From c1f20c75914c640c3481269a686034ef548984ce Mon Sep 17 00:00:00 2001 From: Maggie Date: Fri, 9 Dec 2022 17:33:58 -0700 Subject: [PATCH 1/7] "wave one and part of wave two are complete" --- index.html | 27 +++++++++++++++++++++- package.json | 2 +- src/index.js | 1 + styles/index.css | 60 ++++++++++++++++++++++++++++++++++++++++++++++++ yarn.lock | 24 +++++++++++-------- 5 files changed, 103 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 68b320b9a..1fa77f972 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,37 @@ + + + Weather Report + + + + - +
+
+ + +
+
+

Weather in Denver

+

45°F

+ +
cloudy
+
Humidity: 60%
+
Wind Speed: 6.0
+
+ +
+
+

Change the Landscape

+
+
\ No newline at end of file diff --git a/package.json b/package.json index 9cf5ca65b..1cfcba810 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { "dependencies": { - "axios": "^0.27.2" + "axios": "^1.2.1" } } diff --git a/src/index.js b/src/index.js index e69de29bb..0e825dda9 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1 @@ +import axios from "axios"; \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index e69de29bb..04b49c5cb 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,60 @@ + + +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: blueviolet; + font-size: 120%; +} +.card { + background-color: gray; + padding: 2em; + border-radius: 30px; + width: 100%; + max-width: 420px; + margin: 1em; + font-family: 'Roboto Mono', monospace; + font-size: 24px; + + +} + +.search { + display: flex; + align-items: center; + justify-content: center; + +} + +button { + border-radius: 50%; + margin: .5em 1em; + height: 44px; + width: 44px; + border: 1px solid black; + transition: 0.2s ease-in-out; + cursor: pointer; + +} + +button:hover { + background: beige; +} + +input.search-bar { + border: 1px solid purple; + border-radius: 24px; + background-color: antiquewhite; + color: black; + font-size: 105%; + font-family: inherit; + padding: 0.4em 1em; + width: calc(100% - 80px); +} + +h1.temp { + margin: 0; +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 37fbaed29..26630f422 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7,13 +7,14 @@ asynckit@^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== +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== dependencies: - follow-redirects "^1.14.9" + follow-redirects "^1.15.0" form-data "^4.0.0" + proxy-from-env "^1.1.0" combined-stream@^1.0.8: version "1.0.8" @@ -27,10 +28,10 @@ delayed-stream@~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== +follow-redirects@^1.15.0: + version "1.15.2" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13" + integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA== form-data@^4.0.0: version "4.0.0" @@ -52,3 +53,8 @@ mime-types@^2.1.12: 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" + integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg== From 4243df8b585768afb9e0688e3e7e053f5d719ac0 Mon Sep 17 00:00:00 2001 From: Maggie Date: Sat, 10 Dec 2022 16:20:14 -0700 Subject: [PATCH 2/7] Wave one and two edited, working on landscape feature --- index.html | 11 ++++++++--- styles/index.css | 29 ++++++++++++++++++++++++++--- 2 files changed, 34 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 1fa77f972..9d2b83687 100644 --- a/index.html +++ b/index.html @@ -23,9 +23,14 @@

Weather in Denver

45°F -
cloudy
-
Humidity: 60%
-
Wind Speed: 6.0
+ +
diff --git a/styles/index.css b/styles/index.css index 04b49c5cb..ad94090c3 100644 --- a/styles/index.css +++ b/styles/index.css @@ -5,9 +5,10 @@ body { justify-content: center; align-items: center; height: 100vh; - margin: 0; + margin: 30px; background-color: blueviolet; font-size: 120%; + flex-direction: column; } .card { background-color: gray; @@ -18,8 +19,6 @@ body { margin: 1em; font-family: 'Roboto Mono', monospace; font-size: 24px; - - } .search { @@ -57,4 +56,28 @@ input.search-bar { h1.temp { margin: 0; +} + +.dropdown { + margin: 0; + width: calc(100% - 200px); + font-size: 100%; + border: 1px solid purple; + background-color: antiquewhite; + color: black; + font-family: inherit; + padding: 0.6em 1em; + /* border-radius: 50%; */ + float: left; + } + +.landscape { + background-color: gray; + padding: 2em; + border-radius: 30px; + width: 100%; + max-width: 420px; + margin: 1em; + font-family: 'Roboto Mono', monospace; + font-size: 24px; } \ No newline at end of file From 94b71f901de8a7b5d203c7547f4635b5d5f5b34e Mon Sep 17 00:00:00 2001 From: Maggie Date: Tue, 13 Dec 2022 10:35:24 -0700 Subject: [PATCH 3/7] "Started HTML over with new and edited JS to work with proxy server requirement" --- index.html | 31 ++------- src/index.js | 175 ++++++++++++++++++++++++++++++++++++++++++++++- styles/index.css | 81 ++++++++++++++++++++-- 3 files changed, 256 insertions(+), 31 deletions(-) diff --git a/index.html b/index.html index 9d2b83687..04b10fde9 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,3 @@ - - @@ -10,33 +8,14 @@ Weather Report - + -
-
- - -
-
-

Weather in Denver

-

45°F

- - - -
-
-
-

Change the Landscape

-
-
+ + + + \ No newline at end of file diff --git a/src/index.js b/src/index.js index 0e825dda9..a3704edc1 100644 --- a/src/index.js +++ b/src/index.js @@ -1 +1,174 @@ -import axios from "axios"; \ No newline at end of file +const state = { + sky: "sunny", + temperature: 50, + city: "", +}; + +// make testing between ranges easier +const temperatureChangeStep = 10; + +//obtain reference sto all elements on the page +const elTemperature = document.querySelector("#temperature"); +const elIncreaseTemp = document.querySelector("#increaseTemp"); +const elDecreaseTemp = document.querySelector("#decreaseTemp"); +const elLandscape = document.querySelector("#landscape"); +const elCity = document.querySelector("#city"); +const elCityInput = document.querySelector("#cityInput"); +const elCityReset = document.querySelector("#cityReset"); +const elCitySearch = document.querySelector("#citySearch"); +const elSky = document.querySelector("#sky"); +const elSkyInput = document.querySelector("#skyInput"); + +// event handlers to intercept user interactions +elSkyInput.addEventListener("change", (event) => { + setSky(event.target.value); +}); +elCityInput.addEventListener("input", (event) => { + setCity(event.target.value); +}); +elCityReset.addEventListener("click", (event) => { + setCity(""); + elCityInput.focus(); +}); +elCitySearch.addEventListener("click", (event) => { + // disable to prevent multiple requests + elCitySearch.disabled = true; + elCityReset.disabled = true; + + // use lowercase for better UX + const city = state.city.trim().toLowerCase(); + + console.log("search!", city); + fetchWeatherData(city) + .then((data) => { + setTemperature(data.degrees); + }) + .catch((error) => { + console.error(error); + }) + .finally(() => { + // disable to prevent multiple requests + elCitySearch.disabled = false; + elCityReset.disabled = false; + }); +}); +elIncreaseTemp.addEventListener("click", (event) => { + increaseTemp(event.target.value); +}); +elDecreaseTemp.addEventListener("click", (event) => { + decreaseTemp(event.target.value); +}); + +// functions that render state to the screen +const renderSky = () => { + const sky = state.sky; + let skyScape = "unknown"; + + if (sky === "sunny") skyScape = "☀️"; + else if (sky === "cloudy") skyScape = "☁️"; + else if (sky === "rainy") skyScape = "🌧"; + else if (sky === "snowy") skyScape = "🌨"; + + elSky.innerText = skyScape; +}; +const renderTemperature = () => { + elTemperature.innerText = state.temperature; + + const temp = state.temperature; + let color = "teal"; + let landscape = "❄️❄️❄️❄️❄️"; + + if (temp >= 80) { + color = "red"; + landscape = "🔥🔥🔥🔥🔥"; + } else if (temp >= 70) { + color = "orange"; + landscape = "😊😊😊😊😊"; + } else if (temp >= 60) { + color = "yellow"; + landscape = "🌷🌷🌷🌷🌷"; + } else if (temp >= 50) { + color = "green"; + landscape = "🐿🐿🐿🐿🐿"; + } + + elTemperature.style.color = color; + elLandscape.innerText = landscape; +}; +const renderCity = () => { + elCity.innerText = state.city; + elCityInput.value = state.city; +}; + +//setters for changing state and calling respective rendering functions +const setSky = (value) => { + state.sky = value; + renderSky(); +}; +const setTemperature = (value) => { + state.temperature = value; + renderTemperature(); +}; +const setCity = (value) => { + state.city = value; + renderCity(); +}; + +const fetchWeatherData = (city) => { + const data = mockData[city]; + + return new Promise((resolve, reject) => { + setTimeout(() => { + if (data) { + resolve(data); + } else { + reject("The city was not found"); + // show error in UI + } + }, MOCK_API_DELAY); + }); +}; + +// action functions +const increaseTemp = () => { + setTemperature(state.temperature + temperatureChangeStep); +}; +const decreaseTemp = () => { + setTemperature(state.temperature - temperatureChangeStep); +}; + +// init - render all state first +renderSky(); +renderTemperature(); +renderCity(); + +// tests +// setTemperature(60) +// setCity('Quebec') + +// const updateTempColor = (temperature) => { +// const tempValueContainer = document.getElementById("temperature"); +// let color = "teal"; +// if (temperature >= 80) { +// color = "red"; +// } else if (temperature >= 70) { +// color = "orange"; +// } else if (temperature >= 60) { +// color = "yellow"; +// } else if (temperature >= 50) { +// color = "green"; +// } +// tempValueContainer.classList = color; +// } + +// const updateCityName = () => { +// const inputName = document.getElementById("search-city").value; +// const headerCityName = document.getElementById("headerCityName"); +// headerCityName.textContent = inputName; +// }; + +// const resetCityName = () => { +// const search-city = document.getElementById("search-city"); +// seach-city.value = "Denver"; +// updateCityName(); +// }; \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index ad94090c3..abfbb04cb 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,5 +1,4 @@ - body { display: flex; justify-content: center; @@ -9,6 +8,8 @@ body { background-color: blueviolet; font-size: 120%; flex-direction: column; + background-image: url('https://images.unsplash.com/photo-1527482937786-6608f6e14c15?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80'); + } .card { background-color: gray; @@ -16,7 +17,7 @@ body { border-radius: 30px; width: 100%; max-width: 420px; - margin: 1em; + margin: .5em; font-family: 'Roboto Mono', monospace; font-size: 24px; } @@ -77,7 +78,79 @@ h1.temp { border-radius: 30px; width: 100%; max-width: 420px; - margin: 1em; + margin: .5em; + font-family: 'Roboto Mono', monospace; + font-size: 18px; +} + +.change-temp { + background-color: gray; + padding: 2em; + border-radius: 30px; + width: 100%; + max-width: 420px; + margin: .5em; font-family: 'Roboto Mono', monospace; font-size: 24px; -} \ No newline at end of file +} + +.sunny { + background: + url('https://images.unsplash.com/photo-1419833173245-f59e1b93f9ee?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80') + center no-repeat; + } + +.raining { +background: + url('https://images.unsplash.com/photo-1572455857811-045fb4255b5d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80') + center no-repeat; +} + +.snowing { +background: + url('https://images.unsplash.com/photo-1609700930660-8573f28f8e2f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80') + center no-repeat; +} + +.cloudy { +background: + url('https://images.unsplash.com/photo-1614959909713-128c622fad23?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2610&q=80') + center no-repeat; +} + +.catastrophic { +background: + url('https://images.unsplash.com/photo-1527482937786-6608f6e14c15?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80') + center no-repeat; +} + + + + .arrow { + flex-direction: row; + } + + + .red { + color: red; + } + + .orange { + color: orange; + } + + .yellow { + color: gold; + } + + .yellow-green { + color: yellowgreen; + } + + .green { + color: green; + } + + .teal { + color: teal; + } \ No newline at end of file From 7a6059b37d5ba812ff5cca2e2fbc129825f1c72a Mon Sep 17 00:00:00 2001 From: Maggie Date: Tue, 13 Dec 2022 10:37:23 -0700 Subject: [PATCH 4/7] "Editing HTML/CSS for refactor" --- index.html | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 04b10fde9..4d2082534 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,32 @@ - +

Weather for

+
+ + + +
+ +

Temperature is º F

+
+ + +
+ +

Landscape is

+ +

Sky is

+
+ +
+ + From 573f1a3fec08985112f790d18d461841702cdf94 Mon Sep 17 00:00:00 2001 From: Maggie Date: Tue, 13 Dec 2022 18:47:12 -0700 Subject: [PATCH 5/7] "added functions to get data w/ axios" --- src/index.js | 224 ++++++++++++++++++++++++++------------------------- 1 file changed, 114 insertions(+), 110 deletions(-) diff --git a/src/index.js b/src/index.js index a3704edc1..b3900a0e1 100644 --- a/src/index.js +++ b/src/index.js @@ -1,174 +1,178 @@ +// application state management const state = { - sky: "sunny", - temperature: 50, - city: "", + sky: 'sunny', + temperature: 0, + city: '', }; - -// make testing between ranges easier -const temperatureChangeStep = 10; - -//obtain reference sto all elements on the page -const elTemperature = document.querySelector("#temperature"); -const elIncreaseTemp = document.querySelector("#increaseTemp"); -const elDecreaseTemp = document.querySelector("#decreaseTemp"); -const elLandscape = document.querySelector("#landscape"); -const elCity = document.querySelector("#city"); -const elCityInput = document.querySelector("#cityInput"); -const elCityReset = document.querySelector("#cityReset"); -const elCitySearch = document.querySelector("#citySearch"); -const elSky = document.querySelector("#sky"); -const elSkyInput = document.querySelector("#skyInput"); - -// event handlers to intercept user interactions -elSkyInput.addEventListener("change", (event) => { +const temperatureChangeStep = 1; + +// references to all elements on the page +const elTemperature = document.querySelector('#temperature'); +const elIncreaseTemp = document.querySelector('#increaseTemp'); +const elDecreaseTemp = document.querySelector('#decreaseTemp'); +const elLandscape = document.querySelector('#landscape'); +const elCity = document.querySelector('#city'); +const elCityInput = document.querySelector('#cityInput'); +const elCityReset = document.querySelector('#cityReset'); +const elCitySearch = document.querySelector('#citySearch'); +const elSky = document.querySelector('#sky'); +const elSkyInput = document.querySelector('#skyInput'); + +//event handlers to intercept user interactions + +elSkyInput.addEventListener('change', (event) => { setSky(event.target.value); }); -elCityInput.addEventListener("input", (event) => { + +elCityInput.addEventListener('input', (event) => { setCity(event.target.value); }); -elCityReset.addEventListener("click", (event) => { - setCity(""); + +elCityReset.addEventListener('click', (event) => { + setCity(''); elCityInput.focus(); }); -elCitySearch.addEventListener("click", (event) => { - // disable to prevent multiple requests - elCitySearch.disabled = true; - elCityReset.disabled = true; - // use lowercase for better UX - const city = state.city.trim().toLowerCase(); - - console.log("search!", city); - fetchWeatherData(city) - .then((data) => { - setTemperature(data.degrees); - }) - .catch((error) => { - console.error(error); - }) - .finally(() => { - // disable to prevent multiple requests - elCitySearch.disabled = false; - elCityReset.disabled = false; - }); +elCitySearch.addEventListener('click', (event) => { + searchCityWeather(state.city); }); -elIncreaseTemp.addEventListener("click", (event) => { + +elIncreaseTemp.addEventListener('click', (event) => { increaseTemp(event.target.value); }); -elDecreaseTemp.addEventListener("click", (event) => { + +elDecreaseTemp.addEventListener('click', (event) => { decreaseTemp(event.target.value); }); -// functions that render state to the screen +//functions to render state to the screen const renderSky = () => { const sky = state.sky; - let skyScape = "unknown"; + let skyScape = 'unknown'; - if (sky === "sunny") skyScape = "☀️"; - else if (sky === "cloudy") skyScape = "☁️"; - else if (sky === "rainy") skyScape = "🌧"; - else if (sky === "snowy") skyScape = "🌨"; + if (sky === 'sunny') skyScape = '☀️'; + else if (sky === 'cloudy') skyScape = '☁️'; + else if (sky === 'rainy') skyScape = '🌧'; + else if (sky === 'snowy') skyScape = '🌨'; elSky.innerText = skyScape; }; + const renderTemperature = () => { elTemperature.innerText = state.temperature; const temp = state.temperature; - let color = "teal"; - let landscape = "❄️❄️❄️❄️❄️"; + let color = 'teal'; + let landscape = '❄️❄️❄️❄️❄️'; if (temp >= 80) { - color = "red"; - landscape = "🔥🔥🔥🔥🔥"; + color = 'red'; + landscape = '🔥🔥🔥🔥🔥'; } else if (temp >= 70) { - color = "orange"; - landscape = "😊😊😊😊😊"; + color = 'orange'; + landscape = '😊😊😊😊😊'; } else if (temp >= 60) { - color = "yellow"; - landscape = "🌷🌷🌷🌷🌷"; + color = 'yellow'; + landscape = '🌷🌷🌷🌷🌷'; } else if (temp >= 50) { - color = "green"; - landscape = "🐿🐿🐿🐿🐿"; + color = 'green'; + landscape = '🐿🐿🐿🐿🐿'; } elTemperature.style.color = color; elLandscape.innerText = landscape; }; + const renderCity = () => { elCity.innerText = state.city; elCityInput.value = state.city; }; -//setters for changing state and calling respective rendering functions +//setters for changing state and calling respective render functions + const setSky = (value) => { state.sky = value; renderSky(); }; + const setTemperature = (value) => { state.temperature = value; renderTemperature(); }; + const setCity = (value) => { state.city = value; renderCity(); }; -const fetchWeatherData = (city) => { - const data = mockData[city]; - - return new Promise((resolve, reject) => { - setTimeout(() => { - if (data) { - resolve(data); - } else { - reject("The city was not found"); - // show error in UI - } - }, MOCK_API_DELAY); - }); -}; +//functions to run user actions -// action functions const increaseTemp = () => { setTemperature(state.temperature + temperatureChangeStep); }; + const decreaseTemp = () => { setTemperature(state.temperature - temperatureChangeStep); }; -// init - render all state first -renderSky(); -renderTemperature(); +const kelvinToFarenheit = (k) => 1.8 * (k - 273) + 32; + +const searchCityWeather = (city) => { + console.log('searchCityWeather()', city); + + //disable buttons to prevent multiple requests + elCitySearch.disabled = true; + elCityReset.disabled = true; + + return fetchCityLatLong(city) + .then(fetchLatLongTemperature) + .then((temperature) => setTemperature(temperature)) + .catch(console.error) + .finally(() => { + elCitySearch.disabled = false; + elCityReset.disabled = false; + }); +}; + +//use the city to get lat/long +const fetchCityLatLong = (city) => { + console.log('fetchCityLatLong()', city); + const url = `http://127.0.0.1:5000/location?q=${city}`; + + return axios.get(url).then((response) => { + const { data } = response; + const firstResult = data[0]; + return { + lat: firstResult.lat, + lon: firstResult.lon, + }; + }); +}; + +// use lat/lon coordinates to get temperature +const fetchLatLongTemperature = (latLong) => { + const { lat, lon } = latLong; + console.log('fetchLatLongTemperature()', lat, lon); + + const url = `http://127.0.0.1:5000/weather?lat=${lat}&lon=${lon}`; + return axios.get(url).then((response) => { + const { data } = response; + const tempK = data.main.temp; + const tempF = kelvinToFarenheit(tempK); + const tempRounded = Math.round(tempF); + console.log({ tempRounded, tempK, tempF }); + + return tempRounded; + }); +}; + +//initialization - render all state first renderCity(); +renderTemperature(); +renderSky(); + +//run initial search and show a temperature +setCity('Denver'); +searchCityWeather('Denver'); -// tests // setTemperature(60) -// setCity('Quebec') - -// const updateTempColor = (temperature) => { -// const tempValueContainer = document.getElementById("temperature"); -// let color = "teal"; -// if (temperature >= 80) { -// color = "red"; -// } else if (temperature >= 70) { -// color = "orange"; -// } else if (temperature >= 60) { -// color = "yellow"; -// } else if (temperature >= 50) { -// color = "green"; -// } -// tempValueContainer.classList = color; -// } - -// const updateCityName = () => { -// const inputName = document.getElementById("search-city").value; -// const headerCityName = document.getElementById("headerCityName"); -// headerCityName.textContent = inputName; -// }; - -// const resetCityName = () => { -// const search-city = document.getElementById("search-city"); -// seach-city.value = "Denver"; -// updateCityName(); -// }; \ No newline at end of file From e9ee2e57eaad2dedfe6394e874290eda20a665b8 Mon Sep 17 00:00:00 2001 From: Maggie Date: Tue, 13 Dec 2022 18:53:31 -0700 Subject: [PATCH 6/7] "updated html elements and some styling" --- index.html | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 4d2082534..9c6deb07e 100644 --- a/index.html +++ b/index.html @@ -7,14 +7,14 @@ Weather Report - - - + + +

Weather for

- +
@@ -35,12 +35,6 @@

Sky is

-
+ - - - - - - - \ No newline at end of file + From 853cd0834bdd992e5e1d60b7686adc553908128f Mon Sep 17 00:00:00 2001 From: Maggie Date: Wed, 14 Dec 2022 09:08:38 -0700 Subject: [PATCH 7/7] "Final version of JS and HTML, updated CSS" --- index.html | 8 +++- src/index.js | 7 +-- styles/index.css | 121 +++++++++++++++++------------------------------ 3 files changed, 52 insertions(+), 84 deletions(-) diff --git a/index.html b/index.html index 9c6deb07e..7eb96cb63 100644 --- a/index.html +++ b/index.html @@ -12,19 +12,22 @@ +

Weather for

- +
- +

Temperature is º F

+
+

Landscape is

Sky is

@@ -35,6 +38,7 @@

Sky is

+
diff --git a/src/index.js b/src/index.js index b3900a0e1..626fd743d 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,4 @@ -// application state management +//application states const state = { sky: 'sunny', temperature: 0, @@ -6,7 +6,7 @@ const state = { }; const temperatureChangeStep = 1; -// references to all elements on the page +//references to all elements on the page const elTemperature = document.querySelector('#temperature'); const elIncreaseTemp = document.querySelector('#increaseTemp'); const elDecreaseTemp = document.querySelector('#decreaseTemp'); @@ -19,7 +19,6 @@ const elSky = document.querySelector('#sky'); const elSkyInput = document.querySelector('#skyInput'); //event handlers to intercept user interactions - elSkyInput.addEventListener('change', (event) => { setSky(event.target.value); }); @@ -89,7 +88,6 @@ const renderCity = () => { }; //setters for changing state and calling respective render functions - const setSky = (value) => { state.sky = value; renderSky(); @@ -106,7 +104,6 @@ const setCity = (value) => { }; //functions to run user actions - const increaseTemp = () => { setTemperature(state.temperature + temperatureChangeStep); }; diff --git a/styles/index.css b/styles/index.css index abfbb04cb..d7c7b9495 100644 --- a/styles/index.css +++ b/styles/index.css @@ -5,132 +5,99 @@ body { align-items: center; height: 100vh; margin: 30px; - background-color: blueviolet; + background-color: rgb(136, 55, 211); font-size: 120%; flex-direction: column; - background-image: url('https://images.unsplash.com/photo-1527482937786-6608f6e14c15?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80'); - } + .card { background-color: gray; padding: 2em; border-radius: 30px; width: 100%; + height: 80%; max-width: 420px; margin: .5em; font-family: 'Roboto Mono', monospace; - font-size: 24px; -} - -.search { - display: flex; - align-items: center; - justify-content: center; - + margin-top: 4em; + border: 1px solid purple; } button { border-radius: 50%; margin: .5em 1em; - height: 44px; - width: 44px; - border: 1px solid black; + height: 56px; + width: 55px; + border: 1px solid purple; transition: 0.2s ease-in-out; cursor: pointer; - + font-size: 12px; + font-weight: 800; } button:hover { - background: beige; + background:rgb(214, 208, 202); } -input.search-bar { +#cityInput { border: 1px solid purple; border-radius: 24px; - background-color: antiquewhite; + background-color: rgb(214, 208, 202); color: black; font-size: 105%; font-family: inherit; padding: 0.4em 1em; - width: calc(100% - 80px); + width: 180px; + height: 24px; } -h1.temp { - margin: 0; -} - -.dropdown { +#skyInput { margin: 0; width: calc(100% - 200px); - font-size: 100%; + font-size: 105%; border: 1px solid purple; background-color: antiquewhite; color: black; font-family: inherit; - padding: 0.6em 1em; - /* border-radius: 50%; */ + padding: 1.5em 1em; float: left; + } -.landscape { - background-color: gray; - padding: 2em; - border-radius: 30px; - width: 100%; - max-width: 420px; - margin: .5em; - font-family: 'Roboto Mono', monospace; - font-size: 18px; +#decreaseTemp{ + font-size: 36px; + font-weight: 600; } - -.change-temp { - background-color: gray; - padding: 2em; - border-radius: 30px; - width: 100%; - max-width: 420px; - margin: .5em; - font-family: 'Roboto Mono', monospace; - font-size: 24px; +#increaseTemp { + font-size: 28px; + font-weight: 600; } -.sunny { - background: - url('https://images.unsplash.com/photo-1419833173245-f59e1b93f9ee?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80') - center no-repeat; - } - -.raining { -background: - url('https://images.unsplash.com/photo-1572455857811-045fb4255b5d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80') - center no-repeat; -} + +.landscapeSky{ + background-color: gray; + padding: 2em; + border-radius: 30px; + width: 100%; + max-width: 420px; + margin: .5em; + margin-bottom: 4em; + font-family: 'Roboto Mono', monospace; + font-size: 24px; + border: 1px solid purple; -.snowing { -background: - url('https://images.unsplash.com/photo-1609700930660-8573f28f8e2f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80') - center no-repeat; } -.cloudy { -background: - url('https://images.unsplash.com/photo-1614959909713-128c622fad23?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2610&q=80') - center no-repeat; +h4 { + font-size: 30px; + font-family: 'Roboto Mono', monospace; } -.catastrophic { -background: - url('https://images.unsplash.com/photo-1527482937786-6608f6e14c15?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80') - center no-repeat; +h1 { + font-size: 48px; + font-family: 'Roboto Mono', monospace; } - - - - .arrow { - flex-direction: row; - } - - + .red { color: red; }