diff --git a/index.html b/index.html index cb54ac05d..0cdc54f07 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,79 @@ - +
+
+

Weather Report

+

For the lovely city of Atlanta

+
+
+
+
+

Temperature

+
+ +
+

50Β°

+
+ +
+
+
+ +
+
+
+
+

Sky

+
+
+ +
+
+
+
+
+

City Name

+
+ +
+
+

+
+
+ +
+
+
+
+

🌈 Weather Garden 🌀

+

β˜€οΈ πŸͺ‚ β˜€οΈ 🦜 β˜„οΈ β˜€οΈ 🦜 β˜€οΈ ☁️

+
+
+
+

🏑 🏘️ πŸ• 🏑 β›ΊπŸ§šπŸ½ πŸ›– 🐈 β›Ί

+

🌱 🐾 🌱 🌷 🌱 🐝 🌱 πŸƒ 🌱

+
+
+
+ \ No newline at end of file diff --git a/package.json b/package.json index 1cfcba810..cb17ec74d 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { "dependencies": { - "axios": "^1.2.1" + "axios": "^1.4.0" } } diff --git a/src/index.js b/src/index.js index e69de29bb..581079129 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,187 @@ +state = { + temp: 50, + city: "Atlanta", + latitude: 0, + longitude: 0 +}; + +PATH = "http://127.0.0.1:5000/weather" +const findWeather = () => { + + axios.get(PATH, + { + params: { + "lat": state.latitude, + "lon": state.longitude + } + }) + .then((response) => { + let tempK = response.data.main.temp + state.temp = Math.round(((tempK-273.15)*1.8) + 32) + console.log(response.data.main.temp) + const tempNumContainer = document.querySelector("#currentTemp") + tempNumContainer.textContent = `${state.temp}Β°`; + colorChanging(); + changeGround(); + }) + .catch((error) => { + console.log('error in findWeather for', state.city); + throw error; + }) + } + +WeatherPATH = "http://127.0.0.1:5000/location" +const findLatitudeAndLongitude = () => { + + axios.get(WeatherPATH, + { + params: { + "q": state.city + }, + }) + .then((response) => { + state.latitude = response.data[0].lat; + state.longitude = response.data[0].lon; + console.log('success', state.city, state.latitude, state.longitude); + findWeather(); + colorChanging(); + changeGround(); + }) + .catch((error) => { + console.log('error in findLatitudeAndLongitude for', state.city); + throw error; + }) + } + + +const changeGround = function () { + if (state.temp <= 39) { + document.querySelector("#currentTemp") + const tempGroundContainer = document.querySelector("#groundChange") + tempGroundContainer.textContent = `β„οΈπŸŒ²β„οΈβ˜ƒοΈβ„οΈπŸ‚β„οΈπŸŒ²β„οΈ` + } + + else if (state.temp >= 40 && state.temp <= 59) { + document.querySelector("#currentTemp") + const tempGroundContainer = document.querySelector("#groundChange") + tempGroundContainer.textContent = `🌬️ πŸ‚ πŸ¦ƒ 🌾 πŸ‚ 🌰 🐿️ 🌾 πŸ‚` + } + + else if (state.temp >= 60 && state.temp <= 69){ + document.querySelector("#currentTemp") + const tempGroundContainer = document.querySelector("#groundChange") + tempGroundContainer.textContent = `🌱 🐾 🌱 🌷 🌱 🐝 🌱 πŸƒ 🌱` + + } + else if (state.temp >= 70 && state.temp <= 89){ + document.querySelector("#currentTemp") + const tempGroundContainer = document.querySelector("#groundChange") + tempGroundContainer.textContent = `🌺 πŸ–οΈ 🌴 🌺 πŸ§‰ 🐠 🌺 πŸ¦‹ πŸ”` + + } + else if (state.temp >= 90){ + document.querySelector("#currentTemp") + const tempGroundContainer = document.querySelector("#groundChange") + tempGroundContainer.textContent = `πŸ”₯ 😈 πŸ’¦ πŸ”₯ 🌭 πŸ₯΅ ❀️‍πŸ”₯ πŸ§‘πŸΌβ€πŸš’ πŸ¦‚` + } +} + +const colorChanging = function () { + if (state.temp <= 39) { + document.querySelector("#currentTemp").className = 'purple' + console.log(document.querySelector("#currentTemp").className) + } + + else if (state.temp >= 40 && state.temp <= 59) { + document.querySelector("#currentTemp").className = 'green' + console.log(document.querySelector("#currentTemp").className) + + } + + else if (state.temp >= 60 && state.temp <= 69){ + document.querySelector("#currentTemp").className = 'blue' + console.log(document.querySelector("#currentTemp").className) + + } + else if (state.temp >= 70 && state.temp <= 89){ + document.querySelector("#currentTemp").className = 'orange' + console.log(document.querySelector("#currentTemp").className) + + } + else if (state.temp >= 90){ + document.querySelector("#currentTemp").className = 'red' + console.log(document.querySelector("#currentTemp").className) + + } +} + +const displayCity = function(){ + const inputNow = document.querySelector("input").value + console.log(inputNow) + state.city = inputNow + const tempCityContainer = document.querySelector('#city') + tempCityContainer.textContent = `For the lovely city of ${state.city}` +} + +const incrementTemp = function() { + state.temp +=1; + const tempNumContainer = document.querySelector("#currentTemp") + tempNumContainer.textContent = `${state.temp}Β°`; + colorChanging(); + changeGround(); +}; + +const decrementTemp = function() { + state.temp -=1 + const tempNumContainer = document.querySelector("#currentTemp") + tempNumContainer.textContent = `${state.temp}Β°`; + colorChanging(); + changeGround(); +}; + +const getRealTimeTemp = function (){ + findLatitudeAndLongitude(); + colorChanging(); + changeGround(); +} + +const resetCityName = function () { + state.city = "Atlanta"; + const resetNowContainer = document.querySelector("#city"); + console.log(resetNowContainer); + resetNowContainer.textContent = `For the lovely city of ${state.city}`; + const userInput = document.querySelector("input"); + userInput.value = ''; + colorChanging(); +} + +const newSKySelect = function () { + const skyOption = document.querySelector(".sky_selecting").value + const newSkyContainer = document.querySelector("#skyChange") + newSkyContainer.textContent = skyOption +} + +const registerEventHandlers = () => { + const upArrow = document.querySelector("#up_arrow"); + upArrow.addEventListener('click', incrementTemp); + + const DownArrow = document.querySelector("#down_arrow"); + DownArrow.addEventListener('click', decrementTemp); + + const cityInput = document.getElementById("inputCity") + cityInput.addEventListener('input', displayCity) + + const calculateTemp = document.querySelector("#getTemp"); + calculateTemp.addEventListener('click', findLatitudeAndLongitude) + + const resetNowButton = document.querySelector("#reset"); + resetNowButton.addEventListener('click', resetCityName) + + const newSkyDropDown = document + newSkyDropDown.addEventListener("change", newSKySelect) + + // const colorChangeEffect = document.querySelector("currentTemp") + // colorChangeEffect.addEventListener("click", colorChangeEffect) +}; + +document.addEventListener("DOMContentLoaded", registerEventHandlers); \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index e69de29bb..3114dbaf8 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,81 @@ +html{ + background-color: rgb(99, 163, 208); + color: white; + font-family: Arial, Helvetica, sans-serif; + text-align: center; + word-wrap: break-word; +} + +.content_container{ + width: 100%; + height: 100%; + display: grid; + grid-template-columns: 1/3 1/3 1/3; + grid-template-rows: 200 500; + row-gap: 1em; + column-gap: 1em; +} + +#temperature_section{ + background-color: white; + border-radius: 25px; + color: black; + grid-column-start: 1; + grid-column-end: 2; + grid-row-start: 1; + grid-row-end: 2; +} + +#sky_section{ + background-color: white; + border-radius: 25px; + color: black; + grid-column-start: 2; + grid-column-end: 3; + grid-row-start: 1; + grid-row-end: 2; +} + +#city_section{ + background-color: white; + border-radius: 25px; + color: black; + grid-column-start: 3; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 2; +} + +#weather_garden_section{ + background-color: white; + border-radius: 25px; + color: black; + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 2; + grid-row-end: 3; +} + +.weather_emojis { + font-size: xx-large; +} + +.red { + color: red +} + +.orange { + color: orange +} + +.blue { + color: rgb(123, 154, 239) +} + +.green { + color: green +} + +.purple { + color: rgb(5, 34, 128) +} diff --git a/yarn.lock b/yarn.lock index 26630f422..9ef233fc0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7,10 +7,10 @@ asynckit@^0.4.0: resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q== -axios@^1.2.1: - version "1.2.1" - resolved "https://registry.yarnpkg.com/axios/-/axios-1.2.1.tgz#44cf04a3c9f0c2252ebd85975361c026cb9f864a" - integrity sha512-I88cFiGu9ryt/tfVEi4kX2SITsvDddTajXTOFmt2uK1ZVA8LytjtdeyefdQWEf5PU8w+4SSJDoYnggflB5tW4A== +axios@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/axios/-/axios-1.4.0.tgz#38a7bf1224cd308de271146038b551d725f0be1f" + integrity sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA== dependencies: follow-redirects "^1.15.0" form-data "^4.0.0"