diff --git a/index.html b/index.html index 68b320b9a..826c16b66 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,72 @@ + + Weather Report + + +
+

Weather Report

+
+ +
+
+

Temperature

+ +

20

+ + +
+ + + +
+
🌸
+
+ +
+

Location

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

Sky

+ + + +
+
+ +
+ + + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..4fc627b22 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,153 @@ +{ + "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==" + }, + "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==", + "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= sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "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" + } + ], + "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==", + "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==", + "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==", + "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= sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==" + }, + "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..1fd7ec43f 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,171 @@ +"use strict"; + +const state = { + temp: 80 +} + +const currentTemp = document.getElementById('currentTemp'); + +// buttons +const incrementButton = document.getElementById('increaseTempButton'); +const decrementButton = document.getElementById('decreaseTempButton'); +const resetButton = document.getElementById('resetButton'); + +//emoji +const seasonalEmoji = document.getElementById('seasonalEmoji'); +// const realtimeTempButton = document.getElementById('realtimeTempButton'); + +const updateTemp = () => { + currentTemp.textContent = state.temp +} + +const incrementTemp = () => { + state.temp += 1 + updateTemp() + alterTextColor() +} + +const decrementTemp = () => { + state.temp -= 1 + updateTemp() + alterTextColor() +} + +// Wave 5 +let skyColor = document.getElementById('skyColor') +let select = document.getElementById('sky') + +const alterSky = () => { + let text = select.options[select.selectedIndex].text; + if (text === "Sunny"){ + return skyColor.style.backgroundColor = "yellow" + } else if (text === "Cloudy"){ + return skyColor.style.backgroundColor = "lightgray" + } else if (text === "Rainy"){ + return skyColor.style.backgroundColor = "lightblue" + } else if (text === "Snowy"){ + return skyColor.style.backgroundColor = "coral" + } + console.log("background color did not change") +} + + +const registerEventHandlers = () => { + incrementButton.addEventListener('click', incrementTemp); + decrementButton.addEventListener('click', decrementTemp); + // realtimeTempButton.addEventListener('click',) + select.addEventListener('change', alterSky); + input.addEventListener('change', getLatLon); + resetButton.addEventListener('click', defaultDisplayName) +} + +document.addEventListener("DOMContentLoaded", registerEventHandlers); + +const alterTextColor = () => { + if (state.temp > 80){ + console.log('changing to red') + seasonalEmoji.textContent = '🔥🔥🔥🔥🔥🔥🔥' + return currentTemp.style.color = 'red' + } else if (state.temp >= 70){ + console.log('changing to orange') + seasonalEmoji.textContent = '🌻🌻🌻🌻🌻🌻🌻' + return currentTemp.style.color = 'orange' + } else if (state.temp >= 60){ + console.log('changing to yellow') + seasonalEmoji.textContent = '🍄🍄🍄🍄🍄🍄🍄' + return currentTemp.style.color = 'yellow' + } else if (state.temp >= 50){ + seasonalEmoji.textContent = '🍁🍁🍁🍁🍁🍁🍁' + console.log('changing to green') + return currentTemp.style.color = 'green' + } else if (state.temp <= 49){ + seasonalEmoji.textContent = '❄️' + console.log('changing to teal') + return currentTemp.style.color = 'teal' + } + console.log('text color did not change') +} + +//axios request to the api JSON object, + +//could create a script file that contains all the api calls, then import the js files into + + +//convert kevlin to farenheit helper function +const kelvinToFaren = (k) => { + let faren = Math.floor(1.8 * (k - 273) + 32) + return faren + +} + + +const getTemp = (locationData) => { + + axios + .get('http://localhost:5000/weather', { + params: { + lat: locationData.lat, + lon: locationData.lon, + }, + }) + .then((response) => { + let tempInKelvin = response.data.current.temp; + console.log(tempInKelvin) + console.log (typeof tempInKelvin) + let realTimeTemp = kelvinToFaren(tempInKelvin); + console.log(realTimeTemp) + state.temp = realTimeTemp; + currentTemp.textContent = `${state.temp}°F` + }) + .catch((error) => { + console.log( + 'not workingggg error- weather' + ) + }) +} + + +//get input by query selector +const input = document.querySelector('input'); + +let locationDisplay = document.getElementById('location') + +// WAVE 6 +// need to work on this..... buggy +const defaultDisplayName = (event) => { + // nathaniel's magic + event.preventDefault() + locationDisplay.textContent = "New York City" + currentTemp.textContent = '80' + console.log('strugglez') +} + +const getLatLon = () => { + let locationName = input.value + console.log(locationName); + + // changing display text to the input text + locationDisplay.textContent = locationName + + let lat, lon, locationData; + console.log(lat, lon, locationData); + axios + .get('http://localhost:5000/location', { + params: { + q: locationName, + }, + }) + .then((response) => { + lat = response.data[0].lat; + lon = response.data[0].lon; + locationData = { lat,lon } + console.log(locationData) + getTemp(locationData) + }) + .catch((error) => { + console.log( + 'not workingggg error' + ) + }) +} + diff --git a/styles/index.css b/styles/index.css index e69de29bb..46f8efa7d 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,42 @@ +#realtimeTempButton { + background-color: #4CAF50; /* Green */ + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + border-radius: 15px; + cursor: point; + } + + #realtimeTempButton:hover { + color: #000; + cursor: pointer; + } + + #skyColor { + width: 250px; + height: 100px; + background-color: lightgoldenrodyellow + } + + h1 { + font-family: sans-serif; + color: white + } + + h2 { + font-family: sans-serif; + color: white + } + + h3 { + font-family: sans-serif; + color: coral; + } + + body { + background-color: lightblue; + } \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 37fbaed29..6640267bb 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= sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==" + "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"