Stop propagation? Weather app

Stop propagation? Weather app
0

#1

When I save cities to local storage and then remove one, it removes the entirety of the local storage. I have tried with event.stopPropagation(), but it doesn’t seem to work. It has to be around lines 16 - 29, any idea?

  dropdown.addEventListener(`click`, (event) => {
    document.getElementById(`searchbar`).value = ``
    event.stopPropagation()
    if (event.target.classList.contains(`delete`)) {
      let arrOfCities = JSON.parse(localStorage.getItem(`favoriteCities`))
      let deleteInd = arrOfCities.indexOf(event.target.parentNode.id)
      let slicedCity = arrOfCities.splice(deleteInd, 0)
      localStorage.setItem(`favoriteCities`, JSON.stringify(slicedCity))

      dropdown.removeChild(event.target.parentNode)
    } else {
      getCall(event.target.text)
    }
  })

EDIT: Just realized event.stopPropagation is only jQuery, damnit haha


#2

Figured it out:

 dropdown.addEventListener(`click`, (event) => {
    document.getElementById(`searchbar`).value = ``
    if (event.target.classList.contains(`delete`)) {
      let arrOfCities = JSON.parse(localStorage.getItem(`favoriteCities`))
      let deleteInd = arrOfCities.indexOf(event.target.parentNode.id)
      let trash = arrOfCities.splice(deleteInd, 1)
      localStorage.setItem(`favoriteCities`, JSON.stringify(arrOfCities))

      dropdown.removeChild(event.target.parentNode)
    } else {
      getCall(event.target.text)
    }
  })

#3

Seems like you figured it out.

You still have a few bugs you should fix relating to the Add City button.

  1. If I misspell a city’s name into the search box and hit GO, it would be nice to know if the search did not find anything or if the app is broken. Currently, if a city name does not yield any results, nothing happens. Let’s say I had already performed a search on a valid city and it shows the new city and then I type in a city which has no results, the last city still shows. I suggest adding an alert when a search does not yield a result.

  2. I can click on the Add City button 100 times and it will still add the same city name to the dropdown menu.

  3. Same issue as #2, but I can add invalid city names to the drop down, because you have no check to make sure the city entered even produces a result. This is yet another reason I think the Add City functionality should be based on the current city being displayed and not what just shows in the search box.

  4. If the user happens to enter a Zip Code instead of a city name, the correct city’s weather information shows, but it defaults to Celsius (Metric) regardless if the city is in the USA or not.

Other bugs I notice in other parts of your app

  1. You still only show mph for the Wind speed regardless if the temperature is showing in Celsius

  2. When I shrink the browser width a bit, I see the following. You definitely need to try to make the page more responsive for smaller screens.

Nice to have feature:

  1. Once you fix the duplicate city issue in the dropdown in the first section above, it would be nice if the dropdown always showed the city names in alphabetical order.

#4

Hahaha you’re incredible. I thought the chrome tool shows cellphones size and it seemed alright. The Add City button was a last thing to tack on before presentation.


#5

@RandellDawson I took a break today and will be tackling those problems tomorrow. Will most likely ask for your help.


#6

Gonna try to attack these problems now. I will absolutely get stuck at some point.


#7

@RandellDawson https://codepen.io/rstorms/pen/VGEGaJ

This is my current. I fixed the add city button to add the location instead of what was in the search bar, but now I’m struggling on how to fix it so the add city button doesn’t add the same city twice. I’ve tried

  //"Add City" button
  favCityButton.addEventListener(`click`, function (e) {
    let searchbar = document.getElementById(`searchbar`).value
    let option = document.createElement(`a`)

    let city = document.getElementById(`city`)
    favorites = JSON.parse(localStorage.getItem(`favoriteCities`)) || []

    favorites.push(location.innerText)
    localStorage.setItem(`favoriteCities`, JSON.stringify(favorites))
    dropdown.appendChild(option)
    option.classList.add(`dropdown-item`)

    for (let i = 0; i < favorites.length; i++) {
      option.innerHTML = `<i class="fas fa-trash delete" aria-hidden="true"></i> ${favorites[i]}`
    }
    if (option.contains(location.innerText)) {
      alert(`This city is in your favorites!`)
    }
  })

But it doesn’t work.

I’m trying to grab option at this point but both innerText and innerHTML are both giving me blanks.


#8

You need to really think about your algorithm here. What are the basic steps that should happen when the button is clicked?

  1. Add City button is clicked
  2. Get city displayed on page
  3. Get list of favorite cities from local storage
  4. If city is in list of cities, then stop and do nothing else
  5. Add city to local storage
  6. Add city to drop down menu

#9

When you say I need to really think about my algorithm, are you saying I’m going about it in the wrong way?


#10

Yes and I provided you a better version above.

Your current version was already adding the city to the dropdown and to local storage before you checked if it was a duplicate.


#11

Gotta do a few errands and will be coming back to it. Thank you!

I also tried putting all of the adding to local storage and dropdown within the if statement, but it broke it.
Like so…

  //"Add City" button
  favCityButton.addEventListener(`click`, function (e) {
    let searchbar = document.getElementById(`searchbar`).value
    let option = document.createElement(`a`)

      let city = document.getElementById(`city`)
      favorites = JSON.parse(localStorage.getItem(`favoriteCities`)) || []
      
      if (!option.contains(location.innerText)) {
        favorites.push(location.innerText)
        localStorage.setItem(`favoriteCities`, JSON.stringify(favorites))
        dropdown.appendChild(option)
        option.classList.add(`dropdown-item`)
        
        for (let i = 0; i < favorites.length; i++) {
          option.innerHTML = `<i class="fas fa-trash delete" aria-hidden="true"></i> ${favorites[i]}`
      }
      }

  })

#12

You need to read what the contains method does and what the expected argument type is. You are passing a string to it instead of what it expects. Can you explain what you are trying to check in this if statement above?


#13

Would it be indexOf()? I’m sure you know what I’m trying to type here. I’m saying if the dropdown menu has an option that contains the current city, don’t append it.


#14

Wow, I can’t even work on it anymore…the API is telling me I’ve had too many API calls this month…

@RandellDawson, please how do I get about this?


#15

Create another account. Also, make sure to turn off Auto Preview in Codepen, because everytime you make a change it will reload the page and make a call to the api.


#16

Thank you very much! I suppose this is why I’m here…is to learn!


#17

@RandellDawson going to try and fix these bugs you pointed out today.


#18

I don’t understand why this doesn’t work?

  //"Add City" button
  favCityButton.addEventListener(`click`, function (e) {
    let searchbar = document.getElementById(`searchbar`).value
    let option = document.createElement(`a`)

      let city = document.getElementById(`city`)
      favorites = JSON.parse(localStorage.getItem(`favoriteCities`)) || []
      
      if (dropdown.indexOf(location.innerText)) {
        favorites.push(location.innerText)
        localStorage.setItem(`favoriteCities`, JSON.stringify(favorites))
        dropdown.appendChild(option)
        option.classList.add(`dropdown-item`)
      }

      
      for (let i = 0; i < favorites.length; i++) {
        option.innerHTML = `<i class="fas fa-trash delete" aria-hidden="true"></i> ${favorites[i]}`
    }
  })

@RandellDawson

I’ve tried indexOf and contains and don’t understand why that doesn’t work? It looks like it should…

EDIT: It just tells me about the node or it being not a function…


#19

I thought you changed your code to get the city from the current city showing instead of from the searchbar. Did I dream that or did you change it back to the searchbar?

EDTI: Never mind, I saw let searchbar = document.getElementById('searchbar').value and thought you were still using it.


#20

I did change it with favorites.push(location.innerText)

That solved that bug.