diff --git a/assets/60_degree_outfit.jpeg b/assets/60_degree_outfit.jpeg new file mode 100644 index 000000000..e83005119 Binary files /dev/null and b/assets/60_degree_outfit.jpeg differ diff --git a/assets/80_degree_outfit.jpeg b/assets/80_degree_outfit.jpeg new file mode 100644 index 000000000..3257f3765 Binary files /dev/null and b/assets/80_degree_outfit.jpeg differ diff --git a/assets/cardigan_and_jeans.jpeg b/assets/cardigan_and_jeans.jpeg new file mode 100644 index 000000000..be7029e71 Binary files /dev/null and b/assets/cardigan_and_jeans.jpeg differ diff --git a/assets/cold_outfit.jpeg b/assets/cold_outfit.jpeg new file mode 100644 index 000000000..1bb3b0463 Binary files /dev/null and b/assets/cold_outfit.jpeg differ diff --git a/assets/icons/arrow_point_left.png b/assets/icons/arrow_point_left.png new file mode 100644 index 000000000..abc764438 Binary files /dev/null and b/assets/icons/arrow_point_left.png differ diff --git a/assets/icons/arrow_point_right.png b/assets/icons/arrow_point_right.png new file mode 100644 index 000000000..c0cfc2ef5 Binary files /dev/null and b/assets/icons/arrow_point_right.png differ diff --git a/assets/icons/moon_icon_two.png b/assets/icons/moon_icon_two.png new file mode 100644 index 000000000..21fa9c98a Binary files /dev/null and b/assets/icons/moon_icon_two.png differ diff --git a/assets/icons/search_icon.png b/assets/icons/search_icon.png new file mode 100644 index 000000000..2a2dc1cde Binary files /dev/null and b/assets/icons/search_icon.png differ diff --git a/assets/icons/spring_outfit.jpeg b/assets/icons/spring_outfit.jpeg new file mode 100644 index 000000000..4a3508eba Binary files /dev/null and b/assets/icons/spring_outfit.jpeg differ diff --git a/assets/icons/weather_icon.jpeg b/assets/icons/weather_icon.jpeg new file mode 100644 index 000000000..69437d0da Binary files /dev/null and b/assets/icons/weather_icon.jpeg differ diff --git a/assets/icons/winter_outfit.jpeg b/assets/icons/winter_outfit.jpeg new file mode 100644 index 000000000..873304ca6 Binary files /dev/null and b/assets/icons/winter_outfit.jpeg differ diff --git a/assets/skies/cloudy_sky.jpeg b/assets/skies/cloudy_sky.jpeg new file mode 100644 index 000000000..c9ceda7e0 Binary files /dev/null and b/assets/skies/cloudy_sky.jpeg differ diff --git a/assets/skies/rainy_sky.jpeg b/assets/skies/rainy_sky.jpeg new file mode 100644 index 000000000..d8bc055b5 Binary files /dev/null and b/assets/skies/rainy_sky.jpeg differ diff --git a/assets/skies/snowy_sky.jpeg b/assets/skies/snowy_sky.jpeg new file mode 100644 index 000000000..751fc93b5 Binary files /dev/null and b/assets/skies/snowy_sky.jpeg differ diff --git a/assets/skies/starry_purple_sky.jpeg b/assets/skies/starry_purple_sky.jpeg new file mode 100644 index 000000000..49a2df924 Binary files /dev/null and b/assets/skies/starry_purple_sky.jpeg differ diff --git a/assets/skies/starry_sky_blue.jpeg b/assets/skies/starry_sky_blue.jpeg new file mode 100644 index 000000000..efe475409 Binary files /dev/null and b/assets/skies/starry_sky_blue.jpeg differ diff --git a/assets/skies/sunny_sky.jpeg b/assets/skies/sunny_sky.jpeg new file mode 100644 index 000000000..37956da3b Binary files /dev/null and b/assets/skies/sunny_sky.jpeg differ diff --git a/index.html b/index.html index cb54ac05d..130a91bf4 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,88 @@ + Weather Report - - - + + + - + +
+

Your Weather ✨Fashion✨ Report

+
+ +
+
+
+
+

Seattle

+
+ + + +
+ +
+ +
+
+ +
+
+ +

+ 65 ° F +

+ +
+ +
+ +
+ + +
+ + +
+
+

Fashion Landscape

+

✨Look Inspiration✨

+ +
+ +
+
+
+ +
+
+

The Sky Today

+ + + +
+ +
+
+ +
+ + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..7032a50b0 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,110 @@ +{ + "name": "weather-report", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "axios": "^1.4.0" + } + }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", + "license": "MIT" + }, + "node_modules/axios": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz", + "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==", + "dependencies": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "license": "MIT", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", + "license": "MIT", + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/follow-redirects": { + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", + "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "license": "MIT", + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "license": "MIT", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "license": "MIT", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==", + "license": "MIT" + } + } +} 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..87bd7c005 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,157 @@ +const city = document.getElementById('city_name') +let inputCity = document.getElementById('city_input') + +function changeCity(event) { + if (event.key === 'Enter') { + city.textContent = inputCity.value; + } +} +inputCity.addEventListener('keydown', changeCity) +inputCity.addEventListener('keydown', updateWeather) + + + +const increaseTempButton = document.getElementById('increase_temp') +const decreaseTempButton = document.getElementById('decrease_temp') + + +function increaseTemp() { + const temperature = document.getElementById('temp_no'); + let current_temp = Number(temperature.textContent) + + temperature.textContent = current_temp + 1; + tempColor(current_temp + 1); + changeLandscape(current_temp + 1) +} + +increaseTempButton.addEventListener('click', increaseTemp) + +function decreaseTemp() { + const temperature = document.getElementById('temp_no'); + let current_temp = Number(temperature.textContent) + + temperature.textContent = current_temp - 1; + tempColor(current_temp - 1); + changeLandscape(current_temp + 1) +} +decreaseTempButton.addEventListener('click', decreaseTemp) + +function changeLandscape(temp) { + let landscape = document.getElementById('fashion_landscape'); + if (temp < 60) { + landscape.src = "assets/cold_outfit.jpeg" + } else if (temp >= 60 && temp < 70) { + landscape.src = "assets/60_degree_outfit.jpeg" + } else if (temp >= 70 && temp < 80) { + landscape.src = "assets/cardigan_and_jeans.jpeg" + } else { + landscape.src = "assets/80_degree_outfit.jpeg" + } + +} + +function tempColor(temp) { + let temperature = document.getElementById('temp'); + if (temp <= 49) { + temperature.className = 'freezing'; + } else if (temp > 49 && temp < 60) { + temperature.className = 'cold'; + } else if (temp >= 60 && temp < 70) { + temperature.className = 'chilly'; + } else if (temp >= 70 && temp < 80) { + temperature.className = 'hot'; + } else { + temperature.className = 'scorching'; + } +} + +let skySelector = document.getElementById('sky_selector'); +let skyImage = document.getElementById('pinterest-sky'); + +skySelector.addEventListener('change', changeSkyImage); + +function changeSkyImage() { + let selectedSky = skySelector.value; + switch(selectedSky) { + case 'skySunny': + skyImage.src = 'assets/skies/sunny_sky.jpeg'; + break; + + case 'skyCloudy': + skyImage.src = 'assets/skies/cloudy_sky.jpeg'; + break; + + case 'skyRainy': + skyImage.src = 'assets/skies/rainy_sky.jpeg'; + break; + + case 'skySnowy': + skyImage.src = 'assets/skies/snowy_sky.jpeg'; + break; + + case 'skyStarry': + skyImage.src = 'assets/skies/starry_sky_blue.jpeg'; + break; + + default: + skyImage.src= 'assets/skies/starry_purple_sky.jpeg'; +} +} + +async function getCoordinates(city) { + try{ + const response = await axios.get('http://127.0.0.1:5000/location', { + params: {"q": city} + }); + + latitude = response.data[0].lat; + longitude = response.data[0].lon; + return {latitude, longitude}; + + }catch (error){ + console.error(error); + } +} + +async function getWeather(lat, lon) { + try{ + const response = await axios.get('http://127.0.0.1:5000/weather', { + params: {"lat": lat, "lon": lon} + }); + + const temp = Math.round(1.8 * (response.data.main.temp - 273) + 32) + + return temp; + + }catch (error){ + console.error(error); + } +} + +async function updateWeather() { + const city = inputCity.value; + const { latitude, longitude } = await getCoordinates(city); + const temperature = await getWeather(latitude, longitude); + document.getElementById('temp_no').textContent = temperature; + tempColor(temperature) + changeLandscape(temperature) + +} + +function resetCity(){ + const cityName = document.getElementById('city_name') + cityName.textContent = 'Seattle'; + inputCity.value = 'Seattle'; + updateWeather() + +} + +const weather_button = document.getElementById('weather-button') +weather_button.addEventListener('click', updateWeather); + +const reset_button = document.getElementById('reset-button') +reset_button.addEventListener('click', resetCity) + + + + diff --git a/styles/index.css b/styles/index.css index e69de29bb..1d6917df8 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,232 @@ + + +body { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + margin: 20px; + padding: 0; + background-color:aliceblue; + box-sizing: border-box; +} + + +header { + width: 100%; + text-align: center; + padding: 20px; + box-sizing: border-box; + background-color: aliceblue; +} + +main { + display: grid; + grid-template-columns: auto auto; + row-gap: 15px; + column-gap: 0px; + width: 90vw; + height: 100%; + padding: 20px; + border: 30px; + box-sizing: border-box; + background-color: aliceblue; +} + +#page-title{ + font-style: italic; +} + +.grid-item { + width: 40vw; + height: 40vw; + margin: auto; + display: flex; + justify-content: center; + align-items: center; + background-color: floralwhite; + border-radius: 40px; + padding: 10px; + box-sizing: border-box; + overflow: hidden; +} +/* grid-space-one */ +#grid_space_one{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 5px; + padding: 60px; +} + +#city-space{ + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 0 5px; + margin-bottom: 0px; +} + +#city-name-section{ + text-align: center; + font-size: 70px; + margin: none; + border: none; +} + +#reset-button{ + width: 100px; + height: 30px; +} + +#city_input{ + width: 400px; + height: 30px; + +} + + +/* grid-space-two */ + +#grid_space_two{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 10px; + padding: 60px; +} + +#weather-and-buttons{ + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 0 5px; + margin-bottom: 0px; +} + +.temp_style{ + margin: 10px; +} +#temp{ + font-size: 120px; +} + +#arrow{ + width:35px; + height: 30px; +} + +button{ + width: 50px; + height: 50px; + background-color: white; +} + +#weather-button{ + width: 200px; +} + +.freezing{ + color:rgba(0, 206, 209, 0.399); + margin: 25px; +} +.cold{ + color:lightsteelblue; + margin: 25px; +} +.chilly{ + color:rgb(182, 223, 193); + margin: 25px; +} + +.hot{ + color:darksalmon; + margin: 25px; +} +.scorching{ + color: darkred; + margin: 25px; +} + +#degrees{ + font-size: 50px; +} + +/* grid-space-three */ +#landscape{ + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 20px; + border: 20px; + margin: 40px; +} + +.fashion-image-container{ + height: 100%; + margin: 20px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + overflow: hidden; +} + +#fashion_landscape{ + height: 90%; + width: auto; +} + + + +/* grid-space-four */ +#grid_space_four{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +#pinterest-sky{ + width: 90%; + height: 90%; +} + +.sky{ + width: 90%; + height: 90%; + display: flex; + align-items: center; + justify-content: center; +} + + +.search{ + width: 50%; + display: flex; + align-items: center; + justify-content: space-between; + margin: 50px 50px; + +} + +.search button img{ + width: 100px; +} + + + +img { + width: 90%; + height: 90%; + object-fit: contain; +} + diff --git a/yarn.lock b/yarn.lock index 26630f422..a84c6924a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4,13 +4,13 @@ asynckit@^0.4.0: version "0.4.0" - resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" + resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz" 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.npmjs.org/axios/-/axios-1.4.0.tgz" + integrity sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA== dependencies: follow-redirects "^1.15.0" form-data "^4.0.0" @@ -18,24 +18,24 @@ axios@^1.2.1: combined-stream@^1.0.8: version "1.0.8" - resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f" + resolved "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz" integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg== dependencies: delayed-stream "~1.0.0" delayed-stream@~1.0.0: version "1.0.0" - resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" + resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz" integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk= follow-redirects@^1.15.0: version "1.15.2" - resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13" + resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz" integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA== form-data@^4.0.0: version "4.0.0" - resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452" + resolved "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz" integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww== dependencies: asynckit "^0.4.0" @@ -44,17 +44,17 @@ form-data@^4.0.0: mime-db@1.52.0: version "1.52.0" - resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70" + resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz" integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg== mime-types@^2.1.12: version "2.1.35" - resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a" + resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz" integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw== dependencies: mime-db "1.52.0" proxy-from-env@^1.1.0: version "1.1.0" - resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2" + resolved "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz" integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==