Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

pine sierra #73

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

pine sierra #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 49 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,56 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Report</title>
<link href="styles/index.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;600&display=swap" rel="stylesheet">


</head>
<body>

<div class="container">
<div class="header"><h1>Header</h1></div>



<div class="temp" onclick="tempColor()"><h2>Temp</h2>


<button id="increment">⬆️</button>
<button id="decrement">⬇️</button>

<temperature id="temp">
Copy link

Choose a reason for hiding this comment

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

temperature isn't a valid html element type?

Instead maybe make it a section and then give it the class temperature


<h3 id="tempCount">0</h3>
</temperature>



</div>





<div class="sky"><h2>Sky</h2></div>



<div class="city"><h2>City</h2></div>


<div class="garden"><h2>Garden</h2></div>

</div>
</div>
Copy link

Choose a reason for hiding this comment

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

Extra end div tag

Suggested change
</div>




<script src="src/index.js" type="text/javascript"></script>


</body>
</html>
</html>

62 changes: 62 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@


// let count = 0;
// const tempUp = document.getElementById("increment");
// const tempDown = document.getElementById("decrement");
// const textHolder = document.getElementById("tempCount");
// textHolder.innerHTML = count;

// tempUp.addEventListener("click", function() {
// textHolder.innerHTML = ++count;
// });

// tempDown.addEventListener("click", function() {
// textHolder.innerHTML = --count;
// });

const state = {count: 0,};
const tempCounter = () => {

const tempUp = document.getElementById("increment");
const tempDown = document.getElementById("decrement");
const textHolder = document.getElementById("tempCount");
textHolder.innerHTML = state.count;

tempUp.addEventListener("click", function() {
textHolder.innerHTML = ++state.count;
Copy link

Choose a reason for hiding this comment

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

Just suggested indentation. This works except that you have a temperature tag in the HTML doc which isn't valid HTML.

Suggested change
textHolder.innerHTML = ++state.count;
textHolder.innerHTML = ++state.count;

});

tempDown.addEventListener("click", function() {
textHolder.innerHTML = --state.count;
});

}


const tempColor = () => {
const textHolder = document.getElementById("tempCount");
textHolder.innerHTML = state.count;
if (state.count >= 80) {
textHolder.classList.add ("red");

}
else {
textHolder.classList.add ("teal");
}

};


// const tempColor = () => {
// return state.count >=80 ? 'red'
// : (state.count >= 70 && state.count <= 79) ? 'orange'
// : (state.count >= 60 && state.count <= 69) ? 'yellow'
// : (state.count >= 50 && state.count <= 59) ? 'green'
// : (state.count <= 49) ? "teal"
// : 'black';
// };

tempCounter()
Copy link

Choose a reason for hiding this comment

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

This works, but it's best practice to put it in an event handler like this to prevent it from being called before the HTML doc finishes loading.

Suggested change
tempCounter()
document.addEventListener('DOMContentLoaded', tempCounter);




103 changes: 103 additions & 0 deletions styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
.container {
border: solid black;
display: grid;
gap: 15px;
height: 100vh;
width: 100vw;
grid-template-columns: (2, 1fr);
Copy link

Choose a reason for hiding this comment

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

No () and no commas here.

Suggested change
grid-template-columns: (2, 1fr);
grid-template-columns: 2 1fr;

grid-template-rows: (4, 1fr);
Copy link

Choose a reason for hiding this comment

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

Suggested change
grid-template-rows: (4, 1fr);
grid-template-rows: 4 1fr;

background-image: linear-gradient(to right, rgb(155, 241, 241) , rgb(206, 176, 245));
}

.header {
border: solid red;
grid-column: 1 / 2;
grid-row: 1;
}

.temp {
border: solid blue;
grid-column: 1;
grid-row: 2;
}

.sky {
border: solid blue;
grid-column: 1;
grid-row: 3;
}

.city {
border: solid blue;
grid-column: 1;
grid-row: 4;
}

.garden {
border-radius: 15px;
padding: 20px;
border: solid green;
grid-column: 2;
grid-row: 3;
}

h1 {
color: black;
font-size:24px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}

h2 {
color: black;
font-size:16px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}

h3 {
color: black;
font-size:14px;
font-family: 'Montserrat', sans-serif;
font-weight: 400;

}

.temp,.sky,.city {
background-color: white;
border-radius: 15px;
padding: 20px;
}

button {
background: transparent;
border: none;
display: flex;
align-items: vertical;
Copy link

Choose a reason for hiding this comment

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

vertical isn't a valid value here.

}

temperature {
display: grid;
justify-content: center;
align-items: flex-end;
}

.red {
color: red
}

.orange {
color: orange
}

.yellow {
color: yellow
}

.green {
color: green
}

.teal {
color: teal
}