diff --git a/weather/.vscode/settings.json b/weather/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/weather/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/weather/Weather.jpg b/weather/Weather.jpg new file mode 100644 index 0000000..47c3d1d Binary files /dev/null and b/weather/Weather.jpg differ diff --git a/weather/weather.css b/weather/weather.css new file mode 100644 index 0000000..e91590d --- /dev/null +++ b/weather/weather.css @@ -0,0 +1,96 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + font-family: 'montserrat', sans-serif; + background-image: url('Weather.jpg'); + background-size: cover; + background-position: top center; +} + +.app-wrap{ + display: flex; + flex-direction: column; + min-height: 100vh; + background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.6)); +} + +header{ + display: flex; + justify-content: center; + align-items: center; + padding: 50px 15px 15px; +} + +header input{ + width: 100%; + max-width: 280px; + padding: 10px 15px; + border: none; + outline: none; + background-color: rgba(255,255,255, 0.3); + border-radius: 16px 0px 16px 0px; + border-bottom: 3px solid orange; + + color: lightgray; + font-size: 20px; + font-weight: 300; + transition: 0.2s ease-out; +} + +header input:focus{ + background-color: rgba(255,255,255,0.6); +} + +main { + flex: 1 1 100%; + padding: 25px 25px 50px; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} + +.location .city{ + color: lightcyan; + font-size: 32px; + font-weight: 500; + margin-bottom: 5px; +} + +.location .date{ + color: lightcyan; + font-size: 16px; +} + +.current .temp{ + color: lightcyan; + font-size: 102px; + font-weight: 900; + margin: 30px 0px; + text-shadow: 2px 10px rgba(0,0,0,0.75); +} + +.current .temp span{ + font-weight: 500; +} + +.current .weather{ + color: lightcyan; + font-size: 32px; + font-weight: 700; + font-style: italic; + margin-bottom: 15px; + text-shadow: 0px 3px rgba(0,0,0,0.4); +} + +.current .hi-low{ + color: lightcyan; + font-size: 24px; + font-weight: 500; + text-shadow: 0px 4px rgba(0,0,0,0.4); +} + diff --git a/weather/weather.html b/weather/weather.html new file mode 100644 index 0000000..b042cdc --- /dev/null +++ b/weather/weather.html @@ -0,0 +1,29 @@ + + + + + + Weather + + + +
+
+ +
+
+
+
Jericho, NY
+
Wednesday 3 September 2020
+
+
+
15°c
+
Sunny
+
13°c / 16°c
+
+
+
+ + + \ No newline at end of file diff --git a/weather/weather.js b/weather/weather.js new file mode 100644 index 0000000..75782fa --- /dev/null +++ b/weather/weather.js @@ -0,0 +1,53 @@ +const api = { + key: "53d5ab9baedfa34cf3599c8db30a3b2c", + base: "https://api.openweathermap.org/data/2.5/" +} + +const searchbox = document.querySelector('.search-box'); +searchbox.addEventListener('keypress',setQuery); + +function setQuery(evt){ + if(evt.keyCode == 13){ + getResults(searchbox.value); + console.log(searchbox.value); + } +} + +function getResults (query) { + fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`) + .then(weather => { + return weather.json(); + }).then(displayResults); +} + +function displayResults(weather){ + console.log(weather); + let city = document.querySelector('.location .city'); + city.innerText = `${weather.name}, ${weather.sys.country}`; + + let now = new Date(); + let date = document.querySelector('.location .date'); + date.innerText = dateBuilder(now); + + let temp = document.querySelector('.current .temp'); + temp.innerHTML = `${Math.round(weather.main.temp)}°c`; + + let weather_el = document.querySelector('.current .weather'); + weather_el.innerText = weather.weather[0].main; + + let hilow = document.querySelector('.hi-low'); + hilow.innerText = `${weather.main.temp_min}°c / ${weather.main.temp_max}°c`; +} + +function dateBuilder(d) { + let months = ["January", "Feburary", "March", "April", "May", "June", + "July", "August", "September", "October", "November", "December"]; + let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thrusday", "Friday", "Saturday"]; + + let day = days[d.getDay()]; + let date = d.getDate(); + let month = months[d.getMonth()]; + let year = d.getFullYear(); + + return `${day} ${date} ${month} ${year}`; +} \ No newline at end of file