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
+
+
+
+
+
+
+
+
+
+
+ Fashion Landscape
+ ✨Look Inspiration✨
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ 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==