Min Weather Report App#70
Conversation
| <h2 id=gardenText></h2> | ||
|
|
||
| </div> | ||
| <br> |
There was a problem hiding this comment.
instead of using a br you could add margins to your divs to create space
| <!-- ‼️❗️🤯😳☀️😎 🌆🌇🎇🥵💃🏾💋‼️❗️🤯 --> | ||
| <!-- 🥶🧊💎🥶🧊💎🥶🧊💎🥶🧊💎🥶🧊💎🥶🧊💎🥶🧊💎🥶🧊💎🥶🧊💎🥶 | ||
| ✈️☁️✌🏾✈️☁️✌🏾✈️☁️✌🏾✈️☁️✌🏾✈️☁️✌🏾✈️☁️✌🏾✈️☁️✌🏾✈️☁️✌🏾✈️☁️✌🏾✈️☁️✌🏾✈️☁️✌🏾✈️☁️✌🏾✈️☁️ | ||
| 🌧☔️🌂🌧☔️🌂🌧☔️🌂🌧☔️🌂🌧☔️🌂🌧☔️🌂🌧☔️🌂🌧☔️🌂🌧☔️🌂🌧☔️🌂🌧☔️🌂 --> No newline at end of file |
There was a problem hiding this comment.
I would remove these emojis in your HTML file because you are using them in your JS file.
| @@ -0,0 +1,139 @@ | |||
| console.log("loaded") | |||
| state.tempchange += 1; | ||
| const increseButtonElement = document.getElementById('tempvalue'); | ||
| increseButtonElement.textContent = `${state.tempchange}`; | ||
| console.log("clickly click click"); |
| state.tempchange -= 1; | ||
| const decreaseButtonElement = document.getElementById('tempvalue'); | ||
| decreaseButtonElement.textContent = `${state.tempchange}`; | ||
| console.log("downbutton click") |
| // let gardenGifs = "cloudy"; | ||
|
|
||
| // if (inputSky === "cloudy") { | ||
| // gardenGifs = "cloudy" | ||
|
|
||
| // } else if (inputSky === "sunny") { | ||
| // gardenGifs = "sunny"; | ||
| // } else if (inputSky === "rainy") { | ||
| // gardenGifs = "rainy"; | ||
| // } else if (inputSky === "snowy") { | ||
| // gardenGifs = "snowy"; | ||
| // } | ||
|
|
| const cityNameInputEl= document.getElementById("cityNameInput").value; | ||
| const headerCityEl = document.getElementById("CityName"); | ||
| headerCityEl.textContent = cityNameInputEl; | ||
| console.log("citygirls") |
| const tempColor = document.getElementById("tempvalue"); | ||
| let color = "blue"; | ||
| if (state.tempchange >=80){ | ||
| color = "rgba(24, 17, 24, 0.836)"; | ||
| console.log("hotttttttttt") | ||
| }else if (state.tempchange >=70){ | ||
| color = "rgb(117, 87, 117)"; | ||
| }else if (state.tempchange >=60){ | ||
| color = "rgb(175, 124, 175)"; | ||
| }else if (state.tempchange >=50){ | ||
| color = "black"; | ||
| } | ||
| tempColor.classList = color; | ||
|
|
There was a problem hiding this comment.
in css you need to add properties for each of the colors and then the value you want. For example, if color = "black" then in CSS you should have
.black {
color: black;
}
|
|
||
| </div> | ||
| <br> | ||
| <div class = "landscape">🥵🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🥵</div> |
There was a problem hiding this comment.
| <div class = "landscape">🥵🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🥵</div> | |
| <div class="landscape" >🥵🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🥵</div> |
|
|
||
| const changeGarden = ()=> { | ||
|
|
||
| const landContainer = document.querySelector("#landscape") |
There was a problem hiding this comment.
your landscape is a class name in HTML not an id. So you could do document.getElementsByClassName("landscape")
| cityNameInputEl.addEventListener("input", changeCityName) | ||
|
|
||
| const resetButton = document.getElementById("cityNameInput") | ||
| resetButton.addEventListener("click", changeCityName) |
There was a problem hiding this comment.
instead of calling the changeCityName function, you should create a function to reset the city name back to the default city name
| width: 480px; | ||
| height: 30px; | ||
| align-self: flex-end; | ||
| /* display: block; */ |
| align-self:center; | ||
| margin-left: 30%; | ||
| font-size: larger; | ||
| /* background-image: linear-gradient(315deg, #000000 0%, #ffffff 74%); */ |
|
This is a good start. I like the background and gifs you chose to use. I added some comments on refactoring your code and adding functionality. |
No description provided.