Min Weather Report App #70

Eatmine · 2021-12-14T03:29:39Z

No description provided.

tgoslee · 2021-12-21T23:26:26Z

index.html

+                <h2 id=gardenText></h2>
+
+            </div>
+                        <br> 


instead of using a br you could add margins to your divs to create space

tgoslee · 2021-12-21T23:32:43Z

index.html

+<!-- 🥶🧊💎🥶🧊💎🥶🧊💎🥶🧊💎🥶🧊💎🥶🧊💎🥶🧊💎🥶🧊💎🥶🧊💎🥶
+✈️☁️✌🏾✈️☁️✌🏾✈️☁️✌🏾✈️☁️✌🏾✈️☁️✌🏾✈️☁️✌🏾✈️☁️✌🏾✈️☁️✌🏾✈️☁️✌🏾✈️☁️✌🏾✈️☁️✌🏾✈️☁️✌🏾✈️☁️
+🌧☔️🌂🌧☔️🌂🌧☔️🌂🌧☔️🌂🌧☔️🌂🌧☔️🌂🌧☔️🌂🌧☔️🌂🌧☔️🌂🌧☔️🌂🌧☔️🌂 -->


I would remove these emojis in your HTML file because you are using them in your JS file.

tgoslee · 2021-12-21T23:52:00Z

src/index.js

@@ -0,0 +1,139 @@
+console.log("loaded")


remove your console.log

tgoslee · 2021-12-22T00:14:48Z

src/index.js

+    state.tempchange += 1;
+    const increseButtonElement = document.getElementById('tempvalue');
+    increseButtonElement.textContent = `${state.tempchange}`;
+    console.log("clickly click click");


remove your console log

tgoslee · 2021-12-22T00:14:56Z

src/index.js

+    state.tempchange -= 1; 
+    const decreaseButtonElement = document.getElementById('tempvalue');
+    decreaseButtonElement.textContent = `${state.tempchange}`; 
+    console.log("downbutton click")


remove console log

tgoslee · 2021-12-22T00:15:42Z

src/index.js

+    // 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";
+    // }
+


remove this unused code

tgoslee · 2021-12-22T00:17:24Z

src/index.js

+    const cityNameInputEl= document.getElementById("cityNameInput").value; 
+    const headerCityEl = document.getElementById("CityName"); 
+    headerCityEl.textContent = cityNameInputEl;
+    console.log("citygirls")


remove console.log

tgoslee · 2021-12-22T00:21:35Z

src/index.js

+    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; 
+


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; }

tgoslee · 2021-12-22T00:23:09Z

index.html

+
+            </div>
+                        <br> 
+            <div class = "landscape">🥵🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🥵</div>


Suggested change

<div class = "landscape">🥵🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🥵</div>

<div class="landscape" >🥵🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🥵</div>

tgoslee · 2021-12-22T00:25:20Z

src/index.js

+
+const changeGarden = ()=> {
+
+    const landContainer = document.querySelector("#landscape")


your landscape is a class name in HTML not an id. So you could do document.getElementsByClassName("landscape")

tgoslee · 2021-12-22T00:27:27Z

src/index.js

+    cityNameInputEl.addEventListener("input", changeCityName)
+
+    const resetButton = document.getElementById("cityNameInput")
+    resetButton.addEventListener("click", changeCityName)


instead of calling the changeCityName function, you should create a function to reset the city name back to the default city name

tgoslee · 2021-12-22T00:27:53Z

styles/index.css

+    width: 480px;
+    height: 30px;
+    align-self: flex-end;
+    /* display: block; */


remove unused code

tgoslee · 2021-12-22T00:28:01Z

styles/index.css

+    align-self:center;
+    margin-left: 30%;
+    font-size: larger;
+    /* background-image: linear-gradient(315deg, #000000 0%, #ffffff 74%); */


remove unused code

tgoslee · 2021-12-22T00:28:52Z

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.

Eatmine added 5 commits December 11, 2021 14:15

updates

443ab48

saved all thee sky elements

c80e3b9

created the sky to match the description of sky dropmenu

fed152b

temperature color isn't changing

0bf36da

added all my images to the asset folder

adefcf5

tgoslee reviewed Dec 21, 2021

View reviewed changes

index.html

<h2 id=gardenText></h2>

</div>

<br>

Copy link

tgoslee Dec 21, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

instead of using a br you could add margins to your divs to create space

tgoslee reviewed Dec 21, 2021

View reviewed changes

src/index.js

@@ -0,0 +1,139 @@

console.log("loaded")

Copy link

tgoslee Dec 21, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove your console.log

tgoslee reviewed Dec 22, 2021

View reviewed changes

styles/index.css

width: 480px;

height: 30px;

align-self: flex-end;

/* display: block; */

Copy link

tgoslee Dec 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove unused code

tgoslee reviewed Dec 22, 2021

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Min Weather Report App #70

Min Weather Report App #70

Eatmine commented Dec 14, 2021

tgoslee Dec 21, 2021

tgoslee Dec 21, 2021

tgoslee Dec 21, 2021

tgoslee Dec 22, 2021

tgoslee Dec 22, 2021

tgoslee Dec 22, 2021

tgoslee Dec 22, 2021

tgoslee Dec 22, 2021

tgoslee Dec 22, 2021 •

edited

Loading

tgoslee Dec 22, 2021

tgoslee Dec 22, 2021

tgoslee Dec 22, 2021

tgoslee Dec 22, 2021

tgoslee commented Dec 22, 2021

	<div class = "landscape">🥵🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🥵</div>
	<div class="landscape" >🥵🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🥵</div>


		const changeGarden = ()=> {

		const landContainer = document.querySelector("#landscape")

Min Weather Report App #70

Are you sure you want to change the base?

Min Weather Report App #70

Conversation

Eatmine commented Dec 14, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tgoslee Dec 22, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tgoslee commented Dec 22, 2021

tgoslee Dec 22, 2021 •

edited

Loading