diff --git a/README.md b/README.md deleted file mode 100644 index 8c0f25b2..00000000 --- a/README.md +++ /dev/null @@ -1,10 +0,0 @@ -## Modern JavaScript - Novice to Ninja -All lecture files from the Modern JavaScript (Novice to Ninja) course on Udemy. - -### How to use this repository - -Each lesson in the course has it's own branch in the repository. To see the code for a specific lesson, just select that branch from the branch drop-down (top-left). E.g. The lesson-20 branch contains the final code for lesson 20 in the course. - -**Course link:** [Modern JavaScript - Novice to Ninja](https://pages.github.com/) - - diff --git a/weather_app/img/day.svg b/weather_app/img/day.svg new file mode 100644 index 00000000..de48965e --- /dev/null +++ b/weather_app/img/day.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/weather_app/img/icons/1.svg b/weather_app/img/icons/1.svg new file mode 100644 index 00000000..00eaf5f6 --- /dev/null +++ b/weather_app/img/icons/1.svg @@ -0,0 +1,19 @@ + + + + + + diff --git a/weather_app/img/icons/11.svg b/weather_app/img/icons/11.svg new file mode 100644 index 00000000..2eb3dea2 --- /dev/null +++ b/weather_app/img/icons/11.svg @@ -0,0 +1,13 @@ + + + + + + diff --git a/weather_app/img/icons/12.svg b/weather_app/img/icons/12.svg new file mode 100644 index 00000000..724bb2f2 --- /dev/null +++ b/weather_app/img/icons/12.svg @@ -0,0 +1,13 @@ + + + + + + diff --git a/weather_app/img/icons/13.svg b/weather_app/img/icons/13.svg new file mode 100644 index 00000000..036d5270 --- /dev/null +++ b/weather_app/img/icons/13.svg @@ -0,0 +1,22 @@ + + + + + + diff --git a/weather_app/img/icons/14.svg b/weather_app/img/icons/14.svg new file mode 100644 index 00000000..eb4e4fc8 --- /dev/null +++ b/weather_app/img/icons/14.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/weather_app/img/icons/15.svg b/weather_app/img/icons/15.svg new file mode 100644 index 00000000..0e9b2c64 --- /dev/null +++ b/weather_app/img/icons/15.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/weather_app/img/icons/16.svg b/weather_app/img/icons/16.svg new file mode 100644 index 00000000..0e9b2c64 --- /dev/null +++ b/weather_app/img/icons/16.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/weather_app/img/icons/17.svg b/weather_app/img/icons/17.svg new file mode 100644 index 00000000..f01f2606 --- /dev/null +++ b/weather_app/img/icons/17.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/weather_app/img/icons/18.svg b/weather_app/img/icons/18.svg new file mode 100644 index 00000000..c7d0cc2c --- /dev/null +++ b/weather_app/img/icons/18.svg @@ -0,0 +1,14 @@ + + + + + + diff --git a/weather_app/img/icons/19.svg b/weather_app/img/icons/19.svg new file mode 100644 index 00000000..ebc775c0 --- /dev/null +++ b/weather_app/img/icons/19.svg @@ -0,0 +1,18 @@ + + + + + + diff --git a/weather_app/img/icons/2.svg b/weather_app/img/icons/2.svg new file mode 100644 index 00000000..c1fc09c0 --- /dev/null +++ b/weather_app/img/icons/2.svg @@ -0,0 +1,20 @@ + + + + + + diff --git a/weather_app/img/icons/20.svg b/weather_app/img/icons/20.svg new file mode 100644 index 00000000..888a922e --- /dev/null +++ b/weather_app/img/icons/20.svg @@ -0,0 +1,19 @@ + + + + + + + + + + diff --git a/weather_app/img/icons/21.svg b/weather_app/img/icons/21.svg new file mode 100644 index 00000000..888a922e --- /dev/null +++ b/weather_app/img/icons/21.svg @@ -0,0 +1,19 @@ + + + + + + + + + + diff --git a/weather_app/img/icons/22.svg b/weather_app/img/icons/22.svg new file mode 100644 index 00000000..c6d2fb5f --- /dev/null +++ b/weather_app/img/icons/22.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/weather_app/img/icons/23.svg b/weather_app/img/icons/23.svg new file mode 100644 index 00000000..e8851987 --- /dev/null +++ b/weather_app/img/icons/23.svg @@ -0,0 +1,17 @@ + + + + + + diff --git a/weather_app/img/icons/24.svg b/weather_app/img/icons/24.svg new file mode 100644 index 00000000..c6d2fb5f --- /dev/null +++ b/weather_app/img/icons/24.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/weather_app/img/icons/25.svg b/weather_app/img/icons/25.svg new file mode 100644 index 00000000..3bf11e15 --- /dev/null +++ b/weather_app/img/icons/25.svg @@ -0,0 +1,17 @@ + + + + + + diff --git a/weather_app/img/icons/26.svg b/weather_app/img/icons/26.svg new file mode 100644 index 00000000..77fbd77c --- /dev/null +++ b/weather_app/img/icons/26.svg @@ -0,0 +1,17 @@ + + + + + + diff --git a/weather_app/img/icons/27.svg b/weather_app/img/icons/27.svg new file mode 100644 index 00000000..367b602d --- /dev/null +++ b/weather_app/img/icons/27.svg @@ -0,0 +1,18 @@ + + + + + + diff --git a/weather_app/img/icons/3.svg b/weather_app/img/icons/3.svg new file mode 100644 index 00000000..c1fc09c0 --- /dev/null +++ b/weather_app/img/icons/3.svg @@ -0,0 +1,20 @@ + + + + + + diff --git a/weather_app/img/icons/30.svg b/weather_app/img/icons/30.svg new file mode 100644 index 00000000..b45d03f5 --- /dev/null +++ b/weather_app/img/icons/30.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/weather_app/img/icons/31.svg b/weather_app/img/icons/31.svg new file mode 100644 index 00000000..caf0fd15 --- /dev/null +++ b/weather_app/img/icons/31.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/weather_app/img/icons/32.svg b/weather_app/img/icons/32.svg new file mode 100644 index 00000000..03e12e54 --- /dev/null +++ b/weather_app/img/icons/32.svg @@ -0,0 +1,14 @@ + + + + + + diff --git a/weather_app/img/icons/33.svg b/weather_app/img/icons/33.svg new file mode 100644 index 00000000..a3d7f863 --- /dev/null +++ b/weather_app/img/icons/33.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/weather_app/img/icons/34.svg b/weather_app/img/icons/34.svg new file mode 100644 index 00000000..a3d7f863 --- /dev/null +++ b/weather_app/img/icons/34.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/weather_app/img/icons/35.svg b/weather_app/img/icons/35.svg new file mode 100644 index 00000000..ee057b31 --- /dev/null +++ b/weather_app/img/icons/35.svg @@ -0,0 +1,16 @@ + + + + + + diff --git a/weather_app/img/icons/36.svg b/weather_app/img/icons/36.svg new file mode 100644 index 00000000..ee057b31 --- /dev/null +++ b/weather_app/img/icons/36.svg @@ -0,0 +1,16 @@ + + + + + + diff --git a/weather_app/img/icons/37.svg b/weather_app/img/icons/37.svg new file mode 100644 index 00000000..f1f462a9 --- /dev/null +++ b/weather_app/img/icons/37.svg @@ -0,0 +1,17 @@ + + + + + + diff --git a/weather_app/img/icons/38.svg b/weather_app/img/icons/38.svg new file mode 100644 index 00000000..ee057b31 --- /dev/null +++ b/weather_app/img/icons/38.svg @@ -0,0 +1,16 @@ + + + + + + diff --git a/weather_app/img/icons/39.svg b/weather_app/img/icons/39.svg new file mode 100644 index 00000000..8bb77cad --- /dev/null +++ b/weather_app/img/icons/39.svg @@ -0,0 +1,23 @@ + + + + + + + + + + diff --git a/weather_app/img/icons/4.svg b/weather_app/img/icons/4.svg new file mode 100644 index 00000000..c1fc09c0 --- /dev/null +++ b/weather_app/img/icons/4.svg @@ -0,0 +1,20 @@ + + + + + + diff --git a/weather_app/img/icons/40.svg b/weather_app/img/icons/40.svg new file mode 100644 index 00000000..8bb77cad --- /dev/null +++ b/weather_app/img/icons/40.svg @@ -0,0 +1,23 @@ + + + + + + + + + + diff --git a/weather_app/img/icons/41.svg b/weather_app/img/icons/41.svg new file mode 100644 index 00000000..b17070b5 --- /dev/null +++ b/weather_app/img/icons/41.svg @@ -0,0 +1,18 @@ + + + + + + diff --git a/weather_app/img/icons/42.svg b/weather_app/img/icons/42.svg new file mode 100644 index 00000000..b17070b5 --- /dev/null +++ b/weather_app/img/icons/42.svg @@ -0,0 +1,18 @@ + + + + + + diff --git a/weather_app/img/icons/43.svg b/weather_app/img/icons/43.svg new file mode 100644 index 00000000..e90922c1 --- /dev/null +++ b/weather_app/img/icons/43.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/weather_app/img/icons/44.svg b/weather_app/img/icons/44.svg new file mode 100644 index 00000000..952452dd --- /dev/null +++ b/weather_app/img/icons/44.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/weather_app/img/icons/5.svg b/weather_app/img/icons/5.svg new file mode 100644 index 00000000..6564301c --- /dev/null +++ b/weather_app/img/icons/5.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/weather_app/img/icons/6.svg b/weather_app/img/icons/6.svg new file mode 100644 index 00000000..3ca9a4c8 --- /dev/null +++ b/weather_app/img/icons/6.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/weather_app/img/icons/7.svg b/weather_app/img/icons/7.svg new file mode 100644 index 00000000..3ca9a4c8 --- /dev/null +++ b/weather_app/img/icons/7.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/weather_app/img/icons/8.svg b/weather_app/img/icons/8.svg new file mode 100644 index 00000000..3ca9a4c8 --- /dev/null +++ b/weather_app/img/icons/8.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/weather_app/img/night.svg b/weather_app/img/night.svg new file mode 100644 index 00000000..73823b3d --- /dev/null +++ b/weather_app/img/night.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/weather_app/index.html b/weather_app/index.html new file mode 100644 index 00000000..59757644 --- /dev/null +++ b/weather_app/index.html @@ -0,0 +1,34 @@ + + + + + + + + Ninja Weather + + + +
+ +

Weather Ninja

+ +
+ + +
+ +
+ +
+ +
+
+
+ +
+ + + + + \ No newline at end of file diff --git a/weather_app/scripts/app.js b/weather_app/scripts/app.js new file mode 100644 index 00000000..1171bf9b --- /dev/null +++ b/weather_app/scripts/app.js @@ -0,0 +1,59 @@ +const cityForm = document.querySelector('form'); +const card = document.querySelector('.card'); +const details = document.querySelector('.details'); +const time = document.querySelector('img.time'); +const icon = document.querySelector('.icon img'); + +const updateUI = (data) => { + // destructure properties + const { cityDets, weather } = data; + + // update details template + details.innerHTML = ` +
${cityDets.EnglishName}
+
${weather.WeatherText}
+
+ ${weather.Temperature.Metric.Value} + °C +
+ `; + + // update the night/day & icon images + const iconSrc = `img/icons/${weather.WeatherIcon}.svg`; + icon.setAttribute('src', iconSrc); + + let timeSrc = null; + if(weather.IsDayTime){ + timeSrc = 'img/day.svg'; + } else { + timeSrc = 'img/night.svg'; + } + time.setAttribute('src', timeSrc); + + // remove the d-none class if present + if(card.classList.contains('d-none')){ + card.classList.remove('d-none'); + } +}; + +const updateCity = async (city) => { + + const cityDets = await getCity(city); + const weather = await getWeather(cityDets.Key); + return { cityDets, weather }; + +}; + +cityForm.addEventListener('submit', e => { + // prevent default action + e.preventDefault(); + + // get city value + const city = cityForm.city.value.trim(); + cityForm.reset(); + + // update the ui with new city + updateCity(city) + .then(data => updateUI(data)) + .catch(err => console.log(err)); +}); \ No newline at end of file diff --git a/weather_app/scripts/forecast.js b/weather_app/scripts/forecast.js new file mode 100644 index 00000000..84777858 --- /dev/null +++ b/weather_app/scripts/forecast.js @@ -0,0 +1,27 @@ +const key = ' xvpOBAAypFh84YftzPvUCh8ZM80gbYIG'; + +// get weather information +const getWeather = async (id) => { + + const base = 'http://dataservice.accuweather.com/currentconditions/v1/'; + const query = `${id}?apikey=${key}`; + + const response = await fetch(base + query); + const data = await response.json(); + + return data[0]; + +}; + +// get city information +const getCity = async (city) => { + + const base = 'http://dataservice.accuweather.com/locations/v1/cities/search'; + const query = `?apikey=${key}&q=${city}`; + + const response = await fetch(base + query); + const data = await response.json(); + + return data[0]; + +}; \ No newline at end of file diff --git a/weather_app/styles.css b/weather_app/styles.css new file mode 100644 index 00000000..4d056139 --- /dev/null +++ b/weather_app/styles.css @@ -0,0 +1,15 @@ +body{ + background: #eeedec; + letter-spacing: 0.2em; + font-size: 0.8em; +} +.container{ + max-width: 400px; +} +.icon{ + position: relative; + top: -50px; + border-radius: 50%; + width: 100px; + margin-bottom: -50px; +} \ No newline at end of file