diff --git a/README.md b/README.md index 8e4b04468..d40e23bcf 100644 --- a/README.md +++ b/README.md @@ -73,51 +73,3 @@ This should be done during the Wave 1 initial setup of your `index.html` page. - `assets` folder, potentially for holding images - Create and add more folders and files as needed -## Content Requirements - -For this project, there are no requirements around color schemes, font choices, or layouts. - -Note that applying styles with CSS is one of many learning goals of this project -- it is not the central learning goal. You may enjoy being creative with styles, but we encourage you to not concern yourself with getting the styles perfect. Remember, you can always choose to continue working on styling after you've completed all functional requirements. - -However, _at a minimum_, your project must contain these elements: - -Wave 2: - -1. An element that displays the temperature -1. A clickable element to increase temperature -1. A clickable element to decrease temperature -1. An element that displays a landscape - -Wave 3: - -1. An element that displays the city name -1. An element that contains an `` element, used to rename the city - -Wave 4: - -1. A clickable element to get the current temperature of the displayed city name - -Wave 5: - -1. A ` + + + + + + +

Weather Report

+

+ + + + +
+
+

Find A Temperature By City

+
+
+
+

Search by City

+
+ +
+
+ + +
+
+
+
+

Temperature

+
+ + 45 + ° F + +
+
+
+
+
+

Your Weather Emojis

+
🧤🧣🧤
+
+
+
+ + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..b8d580a28 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,160 @@ +{ + "name": "weather-report", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "dependencies": { + "axios": "^0.27.2" + } + }, + "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": "0.27.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz", + "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==", + "dependencies": { + "follow-redirects": "^1.14.9", + "form-data": "^4.0.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.0", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.0.tgz", + "integrity": "sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ==", + "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" + } + } + }, + "dependencies": { + "asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, + "axios": { + "version": "0.27.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz", + "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==", + "requires": { + "follow-redirects": "^1.14.9", + "form-data": "^4.0.0" + } + }, + "combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "requires": { + "delayed-stream": "~1.0.0" + } + }, + "delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=" + }, + "follow-redirects": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.0.tgz", + "integrity": "sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ==" + }, + "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==", + "requires": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + } + }, + "mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==" + }, + "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==", + "requires": { + "mime-db": "1.52.0" + } + } + } +} diff --git a/src/index.js b/src/index.js index e69de29bb..a9e468ce8 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,141 @@ +"use strict"; + +const state = { + city: 'Portland, OR', + temperature: 72, + latitude: 45.5152, + longitude: 122.6784, +}; + +let getCityName; +let curWeatherEmojis = document.getElementById("curWeatherEmojis"); +let cityDisplayOnLoad = document.getElementById("now-showing").textContent = + `Now showing the temperature for ${state.city}`; + +const updateCityWhileTyping = () => { + const input = document.getElementById("defaultCity").value; + document.getElementById("now-showing").textContent = + `Now showing the temperature for ${input}` + state.city = input; +}; + +document.getElementById("sky").addEventListener('change', (event) => { + const bgValue = event.target.options[event.target.selectedIndex].value; + if( bgValue == 'sunny' ) { + document.body.style.backgroundImage = "url(/ada-project-docs/assets/sunshine.png)"; + } else if( bgValue == "cloudy" ){ + document.body.style.backgroundImage = "url(/ada-project-docs/assets/cloudy.png)"; + } else if( bgValue == "rainy" ){ + document.body.style.backgroundImage = "url(/ada-project-docs/assets/rain.png)"; + } else if( bgValue == "snowy" ){ + document.body.style.backgroundImage = "url(/ada-project-docs/assets/snow.png)"; + } +}); + +const weatherEmojisandColor = () => { + let temp = state.temperature; + let color; + if (temp <= 49) { + curWeatherEmojis.textContent="❄️🥶❄️🥶"; + document.body.style.backgroundImage = "url(/ada-project-docs/assets/snow.png)"; + color="cornflowerblue"; + } else if (temp <= 59) { + curWeatherEmojis.textContent="🧤🧣🧤🧣"; + document.body.style.backgroundImage = "url(/ada-project-docs/assets/rain.png)"; + color = "green"; + } else if (temp <= 69) { + curWeatherEmojis.textContent="✅✅✅✅"; + document.body.style.backgroundImage = "url(/ada-project-docs/assets/cloudy.png)"; + color ="yellow"; + } else if (temp <= 79) { + curWeatherEmojis.textContent="😅😎😅😎"; + document.body.style.backgroundImage = "url(/ada-project-docs/assets/sunshine.png)"; + color="orange"; + } else { + curWeatherEmojis.textContent="🔥🔥🔥🔥"; + document.body.style.backgroundImage = "url(/ada-project-docs/assets/dry.png)"; + color="red"; + } + let tempTag = document.getElementById("tempTag"); + + tempTag.textContent = String(temp); + tempTag.className = color; +}; + +const getLatLonAsync = async () => { + try { + const response = await axios.get("http://127.0.0.1:5000/location", { + params: { + q: state.city, + }}); + state.latitude = response.data[0].lat; + state.longitude = response.data[0].lon; + getWeather(); + } catch (error) { + console.log("City not found"); + }}; + +const getWeather = () => { + axios.get("http://127.0.0.1:5000/weather", { + params: { + lat: state.latitude, + lon: state.longitude, + }}) + .then ((response) => { + const tempInF = Math.floor((response.data.main.temp - 273.15) * (9/5) + 32); + tempTag.textContent = tempInF + state.temperature = tempInF + weatherEmojisandColor(); + }) + .catch ((error) => { + console.log("error no temperature found"); + })}; + +const increaseTemp = () => { + state.temperature+=1; + weatherEmojisandColor(); + }; + +const decreaseTemp = () => { + state.temperature-=1; + weatherEmojisandColor(); + }; + +const resetCity = () => { + const defaultCity = document.getElementById("defaultCity"); + defaultCity.value = "Portland, OR"; + state.city = defaultCity.value; + getLatLonAsync(); + weatherEmojisandColor(); + nowShowingTemp(); +}; + +const nowShowingTemp = () => { + document.getElementById("now-showing").textContent = + `Now showing the temperature for ${state.city}`; +}; + +// Section for Event Handlers + +const registerEventHandlers = () => { + weatherEmojisandColor(); + const realTimeTemp = document.getElementById("realTime"); + realTimeTemp.addEventListener('click', getLatLonAsync); + + const increaseBtn = document.getElementById("increaseBtn"); + increaseBtn.addEventListener('click', increaseTemp); + + const decreaseBtn = document.getElementById("decreaseBtn"); + decreaseBtn.addEventListener('click', decreaseTemp); + + const getCityName = document.getElementById("now-showing"); + getCityName.addEventListener('input', updateCityWhileTyping); + + const resetBtn = document.getElementById("reset"); + resetBtn.addEventListener('click', resetCity); + + const cityDisplayOnLoad = document.getElementById("defaultCity"); + cityDisplayOnLoad.addEventListener('load', nowShowingTemp); +}; + +document.addEventListener('DOMContentLoaded', registerEventHandlers); \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index e69de29bb..586833620 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,117 @@ +* { + font-family: 'Rokkitt', serif; + color: black; +} + +body { + background-image: url(/ada-project-docs/assets/sunshine.png); + background-repeat: no-repeat; + background-size:cover; +} + +label { + font-weight: 600; +} + +.flex-box-container { + max-height: 300px; + margin-left: auto; + margin-right: auto; + display: flex; + flex-wrap: wrap; +} + +.misc-heading-container { + padding: 15px 15px 15px 15px; + max-height: 300px; + margin-left: auto; + margin-right: auto; + position: relative; +} + +.background-block { + background-color: white; + opacity: 60%; + margin-left: auto; + margin-right: auto; + position: absolute; + top: 0; + left: 0; + height: 107%; + width: 100%; +} + +.text-in-front { + z-index: 1; +} + +#column { + flex-direction: column; + align-items: center; +} + +#row { + flex-direction: row; + align-items: stretch; + justify-content: space-around; +} + +header { + text-align: center; + padding-top: 75px; + padding-bottom: 25px; +} + +h1 { + font-size: 50pt; + z-index: 1; + position: relative; +} + +h2 { + font-weight: 600; + text-align: center; +} + +h3 { + text-align: center; +} + +#tempTag, #tempUnits { + font-size: 40pt; + text-shadow: 1px 1px black; +} + +#cityInput { + font-style: italic; +} + +.red { + color: red; +} + +.orange { + color:orange; +} + +.yellow { + color: yellow; +} + +.green { + color: green; +} + +.cornflowerblue { + color: cornflowerblue; +} + +#curWeatherEmojis { + font-size: 40pt; +} + +footer { + text-align: center; + padding-top: 25px; + padding-bottom: 50px; +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 37fbaed29..4827f9171 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,53 +2,53 @@ # yarn lockfile v1 -asynckit@^0.4.0: - version "0.4.0" - resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" - integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q== - -axios@^0.27.2: - version "0.27.2" - resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972" - integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ== +"asynckit@^0.4.0": + "integrity" "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + "resolved" "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz" + "version" "0.4.0" + +"axios@^0.27.2": + "integrity" "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==" + "resolved" "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz" + "version" "0.27.2" dependencies: - follow-redirects "^1.14.9" - form-data "^4.0.0" + "follow-redirects" "^1.14.9" + "form-data" "^4.0.0" -combined-stream@^1.0.8: - version "1.0.8" - resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f" - integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg== +"combined-stream@^1.0.8": + "integrity" "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==" + "resolved" "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz" + "version" "1.0.8" 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" - integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk= - -follow-redirects@^1.14.9: - version "1.15.0" - resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.0.tgz#06441868281c86d0dda4ad8bdaead2d02dca89d4" - integrity sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ== - -form-data@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452" - integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww== + "delayed-stream" "~1.0.0" + +"delayed-stream@~1.0.0": + "integrity" "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=" + "resolved" "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz" + "version" "1.0.0" + +"follow-redirects@^1.14.9": + "integrity" "sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ==" + "resolved" "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.0.tgz" + "version" "1.15.0" + +"form-data@^4.0.0": + "integrity" "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==" + "resolved" "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz" + "version" "4.0.0" dependencies: - asynckit "^0.4.0" - combined-stream "^1.0.8" - mime-types "^2.1.12" - -mime-db@1.52.0: - version "1.52.0" - resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70" - 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" - integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw== + "asynckit" "^0.4.0" + "combined-stream" "^1.0.8" + "mime-types" "^2.1.12" + +"mime-db@1.52.0": + "integrity" "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==" + "resolved" "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz" + "version" "1.52.0" + +"mime-types@^2.1.12": + "integrity" "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==" + "resolved" "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz" + "version" "2.1.35" dependencies: - mime-db "1.52.0" + "mime-db" "1.52.0"