Remove input yellow box and dropdown background?

Hey guys, finally got all my functionality done and looking to get rid of the blue boxes (chrome) on my toggling buttons and the yellow background on the input form when I click a city I have searched before. I also want to get rid of the white background of the drop-left menu. If anyone has an idea, I would love to hear it.

What color background do you want for the background? What color will the font color be inside the drop-down?

Try adding the following to CSS:

button.fav:focus {
  outline: none;

Doesn’t seem to work.

It does on the Codepen if you add this code to the bottom of the CSS module.

Also, I noticed the dropdown no longer adds cities when the Add City button is clicked.

That’s weird because it does for me.

Your css doesn’t work for me.

I think we are viewing different pen versions. When I click the Add city button, I see the following error in the console:

Uncaught TypeError: favorites.push is not a function at HTMLButtonElement. (pen.js:76)

Realized I didn’t put the bootstrap CDN in the head of the codepen…my fault.

Whatever change you made makes the Add City button no longer have the outline.

However, I still can not add new cities to the dropdown.

Why would it work for me but not for you? What could cause that?

Can you console.log(JSON.parse(localStorage.getItem(favoriteCities))) and tell me what you see?

I am not sure, but I think you might have changed the name the localStorage property name?

I think that is what it was. I cleared my localStorage and now it works again.

When I console log that and click on the trashcan to remove the city, I get the array of a string of the city I just deleted.

I guess maybe the last bit of functionality I need is that when I click the Add City button without anything in the searchbar, it still adds an empty string.

EDIT: Got that to work, but it is only an alert…perhaps I can make the alert a bit prettier, though.

I know you are not going to want to hear this, but in my opinion, the Add City button should be based on what city is currently showing and not what is in the search bar. From a user experience standpoint, if I am in a different city, the app pulls up the weather where I am now. I might want to add the city of the current weather I am in instead of retyping that same city into the search bar, clicking Go and then clicking Add City. That is a lot of extra steps just to add the current city of the weather I am view when the page loads.

Also, I would advise adding the cities’ names as all caps as property names of an object, instead of elements in an array. It solves the issue of duplicate city names. Also, when you go to delete the city, you can simply delete the property instead of having to iterate through an array to find the city name to delete. What this means, is instead of this line:

favorites = JSON.parse(localStorage.getItem(`favoriteCities`)) || []

you would have this line instead:

favorites = JSON.parse(localStorage.getItem(`favoriteCities`)) || {}

Haha, I’m coming from a graphic design background so I absolutely understand the UX behind this is not the greatest…I am just happy to have it work. This is only the Q1 project out of four, so I am not terribly worried that it isn’t perfect.

Well at least only add uppercase versions of the city names to the array.

With the alert that is on there now, how would I pretty it up? I know bootstrap has some options, but would it be on the same line but with innerHTML? A string literal?

I am also trying to remove the styling of the yellow input search history, but I can’t find out how. Might just try to remove the search history altogether.