Weathr is a simple app to, well, check the weather. While it was originally written with jQuery and Ajax, this new version is all vanilla JS. Cool! I'm using the OpenWeatherMap API to pull in weather data.
App.js is my vanilla js file. main.js is the original jQuery file, included for reference.
Weathr is a weekend project I took on to get some experience working with APIs. There's a lot of weather data out there, so this seemed like a good place to start.
Originally I had typed out document.addEventListener('DomContentLoaded', function(), which, like, was just never going to work. DOM is all caps please.
In jQuery this is just .remove('$(el)’), pretty simple here. With vanilla JS, you use something like this: el.parentNode.removeChild(el). This wasn’t really working for me and I wound up just using innerHTML to clean the slate. It works but definitely feels kind of clunky.
I'm not really sure if what I've done around line 104 is really the best way to do this. In jQuery .append auto closes open html tags, so I had to create an array with my strings and variables, and then join that array. This made me think the regular JS solution was going to be more complicated that what it was. But I don't know. My cardHtml string isn't very readable, which is annoying.
OpenWeatherMap's API provides a seven day forecast starting from the current day, which users had already seen on their initial search. At first I started a For Loop, where i started at 1 and ended at result.list.length, but like, that's a really lame way to work with arrays.
I knew I could shift and pop array items off, so I figured there must be a way to do both at the same time. Enter Slice!
I then used a forEach statement to iterate over the loop and write the pertinent values to the DOM.
There was an initial bug where if you submitted the form more than once and got a five-day forecast multiple times, the cards wouldn't be replaced, they would just keep being added to the DOM. This looked silly and not complete. So I added a function that could check if certain elements were visible and do stuff accordingly if so.