-
Notifications
You must be signed in to change notification settings - Fork 78
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.
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
Cedar - Rebeca Muniz #76
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great work on this Vanilla javascript project. You've met the learning goals around writing semantic html, dynamically applying styles, and event handling using vanilla javascript. Nice work!
|
||
<section class = "temperature-side-container" action="#"> | ||
<h3> Temperature </h3> | ||
<p id = "temperature-value"> 76 </p> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Minor note: it is a convention not to include spaces between a properties and it's value.
<p id = "temperature-value"> 76 </p> | |
<p id="temperature-value"> 76 </p> |
<title>Document</title> | ||
<link rel="stylesheet" href= "styles/index.css"/> | ||
</head> | ||
<body class="parent-side-container"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice work writing clear, semantic HTML!
|
||
<section class = "temperature-side-container" action="#"> | ||
<h3> Temperature </h3> | ||
<p id = "temperature-value"> 76 </p> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Consider initializing with class name 'orange'
so when the page first loads the 76 is orange
} | ||
|
||
const changeTempTextColor = () => { | ||
if(state.tempCount >= 80) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A chained conditional if\else if\else if
would make this code a bit more efficient. Also, minor note, if orangize it as temp <= 49 / else if temp <= 59 ...
we do not need the compound conditional.
snowy: "🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨", | ||
} | ||
|
||
const state = { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice use of state
object
cityInput = cityInput.defaultValue | ||
} | ||
|
||
const registerEventHandlers = (event) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great work organizing this event listeners in the registerEventHandlers
function. You might consider refactoring grabbing the corresponding elements that are declared as variables at the top of the script here instead.
No description provided.