diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 4df2ed26c..000000000 --- a/.gitignore +++ /dev/null @@ -1,4 +0,0 @@ -.vscode -.DS_Store -node_modules -.parcel-cache \ No newline at end of file diff --git a/index.html b/index.html index 5540cc6ea..c8a9911f2 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -7,9 +8,51 @@ Weather Report - + + +
+

Weather Report

+ For the lovely city of + Seattle +
+
+

Temperature

+
+
+ ⬆️ + + ⬇️ +
+ +
+
+
+

Sky

+ +
+ +
+

City Name

+ + +
+ +
+

Weather Garden

+
+
+
+
+
+ - + \ No newline at end of file diff --git a/src/index.js b/src/index.js index e69de29bb..af0dfbde3 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,136 @@ +let currentTemperature = 70; + +const tempValue = document.getElementById('tempValue'); +const increaseTempControl = document.getElementById('increaseTempControl'); +const decreaseTempControl = document.getElementById('decreaseTempControl'); +const landScrape = document.getElementById('landscape'); +const skySelect = document.getElementById('skySelect'); +const skyElement = document.getElementById('sky'); + + +const updateTemperature = () => { + tempValue.textContent = `${currentTemperature}°F`; + + if (currentTemperature >= 80) { + tempValue.style.color = 'red'; + tempValue.style.backgroundColor = '#FFCCCC'; + landScrape.textContent = "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂"; + } else if (currentTemperature >= 70) { + tempValue.style.color = 'orange'; + tempValue.style.backgroundColor = '#FFE4B5'; + landScrape.textContent = "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷"; + } else if (currentTemperature >= 60) { + tempValue.style.color = 'yellow'; + tempValue.style.backgroundColor = 'pink'; + landScrape.textContent = "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃"; + } else if (currentTemperature >= 50) { + tempValue.style.color = 'green'; + tempValue.style.backgroundColor = '#CCFFCC'; + landScrape.textContent = "🌲🌲🍂🌲🍁🍃🌲🌾🌲🌲🍂🍁🌲"; + } else if (currentTemperature >= 40) { + tempValue.style.color = 'teal'; + tempValue.style.backgroundColor = '#CCFFFF'; + landScrape.textContent = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"; + } +}; + +increaseTempControl.addEventListener('click', () => { + currentTemperature += 1; + updateTemperature(); +}); + +decreaseTempControl.addEventListener('click', () => { + currentTemperature -= 1; + updateTemperature(); +}); + +// Wave 5 +const updateSky = (skyType) => { + const skyOptions = { + Sunny: "☁️ ☁️ ☁️ ☀️ ☁️ ☁️", + Cloudy: "☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️", + Rainy: "🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧", + Snowy: "🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨", + Misty: "🌫️🌫️💨🌫️🌦🌫️🌫️💨🌫️🌫️🌫️💨", + }; + + skyElement.textContent = skyOptions[skyType] || skyOptions["Sunny"]; + skySelect.value = skyType; // Sync the dropdown +}; + +skySelect.addEventListener("change", () => { + const selectedSky = skySelect.value; + updateSky(selectedSky); +}); + +// Wave 3 +document.addEventListener("DOMContentLoaded", () => { + const cityNameInput = document.getElementById('cityNameInput'); + const headerCityName = document.getElementById('headerCityName'); + const currentTempButton = document.getElementById("currentTempButton"); + + cityNameInput.addEventListener("input", (event) => { + const newCityName = event.target.value; + headerCityName.textContent = newCityName; + }); + +// Wave 4 + const getRealTimeTemperature = async () => { + const cityName = headerCityName.textContent; + + try { + const locationResponse = await axios.get( + `http://127.0.0.1:5000/location?q=${cityName}` + ); + + const { lat, lon } = locationResponse.data[0]; + + const weatherResponse = await axios.get( + `http://127.0.0.1:5000/weather?lat=${lat}&lon=${lon}` + ); + + const tempKelvin = weatherResponse.data.main.temp; + const tempFahrenheit = ((tempKelvin - 273.15) * 1.8) + 32; + + currentTemperature = Math.round(tempFahrenheit); + updateTemperature(); + + // Update the sky based on weather condition + const weatherCondition = weatherResponse.data.weather[0].main; + let skyType = "Sunny"; // Default sky + + if (weatherCondition.includes("Rain")) { + skyType = "Rainy"; + } else if (weatherCondition.includes("Snow")) { + skyType = "Snowy"; + } else if (weatherCondition.includes("Cloud")) { + skyType = "Cloudy"; + } else if (weatherCondition.includes("Misty")) { + skyType = "Misty"; + } + + updateSky(skyType); + } catch (error) { + console.error("Error fetching weather data:", error); + } + }; + + currentTempButton.addEventListener("click", getRealTimeTemperature); + +// Wave 6 + const resetButton = document.getElementById('cityNameReset'); + resetButton.addEventListener("click", () => { + cityNameInput.value = ""; + headerCityName.textContent = "Seattle"; + currentTemperature = 70; + updateTemperature(); + updateSky("Sunny"); + // skySelect.value = "Sunny"; + }); + + updateTemperature(); + updateSky("Sunny"); +}); + + + diff --git a/styles/index.css b/styles/index.css index e69de29bb..9dac432bd 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,170 @@ +h2 { + margin: 0 auto 2rem auto; +} + +body { +display: grid; +grid-template-columns: 1fr 2fr; +grid-template-rows: auto auto auto auto; +grid-gap: 1rem; + +font-family: "Rubik", sans-serif; +font-size: 18px; +background-color: #1b69f9; +margin: 2rem; +} + +.header__header { +color: white; +grid-column: span 3; +display: flex; +align-items: center; +margin: 2rem auto 3rem 0; +} + +.header__header > h1 { +margin-right: 2rem; +font-size: 3em; +} + +.header__city-name { +font-style: oblique; +font-size: 2rem; +} + +.header__city-name::before, +.header__city-name::after { +content: "✨"; +} + +.temperature__section, +.sky__section, +.city-name__section { +border-radius: 8px; +padding: 2rem; +background-color: white; +} + +.temperature__section { +grid-row: 2; +} + +.temperature__section button { + background-color: #1b69f9; + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + border-radius: 10px +} + +.sky__section { +grid-row: 3; +} + +.city-name__section { +grid-row: 4; +} + +.garden__section { +grid-row: 2 / span 3; +grid-column: 2; +text-align: center; +align-self: center; +} + +.temperature__content { +display: flex; +flex-direction: row; +justify-content: space-around; +/* justify-content: center; */ +} + +#tempValue { +font-size: 3rem; +margin-left: 1.5rem; +/* padding-right: 1rem; */ +/* margin-right: 1.5rem; */ +} + +.temperature__controls { +display: flex; +flex-direction: column; +align-items: center; +} + +.garden__section > h2 { +color: white; +} + +.garden__content { +min-height: 200px; +max-width: fit-content; +margin: auto; +padding: 2rem; + +display: flex; +flex-direction: column; +justify-content: space-between; + +border-radius: 8px; +font-size: 2em; +} + +.city-name__reset-btn { +border: 0; +background-color: #1655cc; +color: white; +border-radius: 8px; +padding: 1rem; +font-family: "Rubik", sans-serif; +} + +/* .red { +color: red; +} + +.orange { +color: orange; +} + +.yellow { +color: gold; +} + +.yellow-green { +color: yellowgreen; +} + +.green { +color: green; +} + +.teal { +color: teal; +} + +.cloudy { +background-color: lightgrey; +} + +.sunny { +background-color: rgb(221, 255, 255); +} + +.rainy { +background-color: lightblue; +} + +.snowy { +background-color: lightsteelblue; +} */ + +#skyDisplay { + font-size: 2rem; + text-align: center; + margin-top: 10px; + } \ No newline at end of file