Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix issue #1: Added toggle to change temperature to Fahrenheit #18

Merged
merged 1 commit into from
Oct 2, 2024
Merged

Fix issue #1: Added toggle to change temperature to Fahrenheit #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 17 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -443,6 +443,17 @@ <h1>Material You NewTab</h1>
<span class="toggle"></span>
</label>
</div>

<div class="ttcont">
<div class="texts">
<div class="bigText">Switch to Fahrenheit</div>
<div class="infoText">Refresh the page to see the updates </div>
</div>
<label class="switch">
<input type="checkbox" id="fahrenheitCheckbox">
<span class="toggle"></span>
</label>
</div>
<!-- ---🟡--- -->
<div class="ttcont unflex">
<div class="texts">
Expand Down Expand Up @@ -480,7 +491,7 @@ <h1>Material You NewTab</h1>
<input type="radio" name="color" class="colorPlate" value="green">
<input type="radio" name="color" class="colorPlate" value="cyan">
<input type="radio" name="color" class="colorPlate" value="blue" checked>

<!-- -------- -->
<input type="radio" name="color" class="colorPlate" value="pink">
<input type="radio" name="color" class="colorPlate" value="purple">
Expand All @@ -496,10 +507,11 @@ <h1>Material You NewTab</h1>
<div id="menuCloseButton">
<!-- <img src="./svgs/x.svg" alt=""> -->
<div class="icon">
<svg width="30px" height="30px" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="30px" height="30px" viewBox="0 0 34 34" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path class="accentColor"
d="M19.4038 17L24.2131 12.1924C24.5321 11.8734 24.7113 11.4408 24.7113 10.9896C24.7113 10.5385 24.5321 10.1059 24.2131 9.7869C23.8941 9.46791 23.4615 9.2887 23.0103 9.2887C22.5592 9.2887 22.1266 9.46791 21.8076 9.7869L17 14.5962L12.1924 9.7869C11.8734 9.46791 11.4408 9.2887 10.9896 9.2887C10.5385 9.2887 10.1059 9.46791 9.7869 9.7869C9.46791 10.1059 9.2887 10.5385 9.2887 10.9896C9.2887 11.4408 9.46791 11.8734 9.7869 12.1924L14.5962 17L9.7869 21.8076C9.46791 22.1266 9.2887 22.5592 9.2887 23.0103C9.2887 23.4615 9.46791 23.8941 9.7869 24.2131C10.1059 24.5321 10.5385 24.7113 10.9896 24.7113C11.4408 24.7113 11.8734 24.5321 12.1924 24.2131L17 19.4038L21.8076 24.2131C22.1266 24.5321 22.5592 24.7113 23.0103 24.7113C23.4615 24.7113 23.8941 24.5321 24.2131 24.2131C24.5321 23.8941 24.7113 23.4615 24.7113 23.0103C24.7113 22.5592 24.5321 22.1266 24.2131 21.8076L19.4038 17ZM17 34C7.6109 34 0 26.3891 0 17C0 7.6109 7.6109 0 17 0C26.3891 0 34 7.6109 34 17C34 26.3891 26.3891 34 17 34Z"
fill="#23F22C" />
d="M19.4038 17L24.2131 12.1924C24.5321 11.8734 24.7113 11.4408 24.7113 10.9896C24.7113 10.5385 24.5321 10.1059 24.2131 9.7869C23.8941 9.46791 23.4615 9.2887 23.0103 9.2887C22.5592 9.2887 22.1266 9.46791 21.8076 9.7869L17 14.5962L12.1924 9.7869C11.8734 9.46791 11.4408 9.2887 10.9896 9.2887C10.5385 9.2887 10.1059 9.46791 9.7869 9.7869C9.46791 10.1059 9.2887 10.5385 9.2887 10.9896C9.2887 11.4408 9.46791 11.8734 9.7869 12.1924L14.5962 17L9.7869 21.8076C9.46791 22.1266 9.2887 22.5592 9.2887 23.0103C9.2887 23.4615 9.46791 23.8941 9.7869 24.2131C10.1059 24.5321 10.5385 24.7113 10.9896 24.7113C11.4408 24.7113 11.8734 24.5321 12.1924 24.2131L17 19.4038L21.8076 24.2131C22.1266 24.5321 22.5592 24.7113 23.0103 24.7113C23.4615 24.7113 23.8941 24.5321 24.2131 24.2131C24.5321 23.8941 24.7113 23.4615 24.7113 23.0103C24.7113 22.5592 24.5321 22.1266 24.2131 21.8076L19.4038 17ZM17 34C7.6109 34 0 26.3891 0 17C0 7.6109 7.6109 0 17 0C26.3891 0 34 7.6109 34 17C34 26.3891 26.3891 34 17 34Z"
fill="#23F22C" />
</svg>
</div>
<!-- <span>Close</span> -->
Expand All @@ -513,4 +525,5 @@ <h1>Material You NewTab</h1>
<div id="menuButton"></div>
<!-- ending-of-body -->
</body>

</html>
43 changes: 31 additions & 12 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,14 +42,27 @@ window.addEventListener('DOMContentLoaded', async () => {
// Weather data
const conditionText = parsedData.current.condition.text;
const tempCelsius = Math.round(parsedData.current.temp_c);
const tempFahrenheit = Math.round(tempCelsius * 9 / 5 + 32);
const humidity = parsedData.current.humidity;
const feelsLikeCelsius = parsedData.current.feelslike_c;
const feelsLikeFahrenheit = Math.round(feelsLikeCelsius * 9 / 5 + 32);

// Update DOM elements
document.getElementById("conditionText").textContent = conditionText;
document.getElementById("temp").textContent = `${tempCelsius}°`;
document.getElementById("humidityLevel").textContent = `Humidity ${humidity}%`;
document.getElementById("feelsLike").textContent = `Feels ${feelsLikeCelsius}°C`;

// Event Listener for the Fahrenheit toggle
const fahrenheitCheckbox = document.getElementById("fahrenheitCheckbox");
const updateTemperatureDisplay = () => {
if (fahrenheitCheckbox.checked) {
document.getElementById("temp").textContent = `${tempFahrenheit}°F`;
document.getElementById("feelsLike").textContent = `Feels ${feelsLikeFahrenheit}°F`;
} else {
document.getElementById("temp").textContent = `${tempCelsius}°C`;
document.getElementById("feelsLike").textContent = `Feels ${feelsLikeCelsius}°C`;
}
};
updateTemperatureDisplay();

// Setting weather Icon
const newWIcon = parsedData.current.condition.icon;
Expand Down Expand Up @@ -173,16 +186,16 @@ document.addEventListener("DOMContentLoaded", () => {
localStorage.setItem("selectedSearchEngine", selectedOption);
});
});
// -----The stay changed even if user reload the page---
// -----The stay changed even if user reload the page---
// 🔴🟠🟡🟢🔵🟣⚫️⚪️🟤
const storedTheme = localStorage.getItem(themeStorageKey);
if (storedTheme) {
applySelectedTheme(storedTheme);
const selectedRadioButton = document.querySelector(`.colorPlate[value="${storedTheme}"]`);
if (selectedRadioButton) {
selectedRadioButton.checked = true;
}
}
const storedTheme = localStorage.getItem(themeStorageKey);
if (storedTheme) {
applySelectedTheme(storedTheme);
const selectedRadioButton = document.querySelector(`.colorPlate[value="${storedTheme}"]`);
if (selectedRadioButton) {
selectedRadioButton.checked = true;
}
}

});

Expand Down Expand Up @@ -314,6 +327,7 @@ document.addEventListener("DOMContentLoaded", function () {
const aiToolsCont = document.getElementById("aiToolsCont");
const shortcutsCheckbox = document.getElementById("shortcutsCheckbox");
const aiToolsCheckbox = document.getElementById("aiToolsCheckbox");
const fahrenheitCheckbox = document.getElementById("fahrenheitCheckbox");

// Function to save checkbox state to localStorage
function saveCheckboxState(key, checkbox) {
Expand Down Expand Up @@ -350,6 +364,7 @@ document.addEventListener("DOMContentLoaded", function () {
loadCheckboxState("aiToolsCheckboxState", aiToolsCheckbox);
loadDisplayStatus("shortcutsDisplayStatus", shortcuts);
loadDisplayStatus("aiToolsDisplayStatus", aiToolsCont);
loadCheckboxState("fahrenheitCheckboxState", fahrenheitCheckbox);

// Add change event listeners for the checkboxes
shortcutsCheckbox.addEventListener("change", function () {
Expand All @@ -373,5 +388,9 @@ document.addEventListener("DOMContentLoaded", function () {
saveDisplayStatus("aiToolsDisplayStatus", "none");
}
});
});

fahrenheitCheckbox.addEventListener("change", function () {
saveCheckboxState("fahrenheitCheckboxState", fahrenheitCheckbox);
});

});