-
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
Paper : Karla #70
base: main
Are you sure you want to change the base?
Paper : Karla #70
Conversation
…rk box with dynmaic nature background. Up next: cont css adjustments and add javascript funtionality.
…re, a clickable element to increase/decrease temperature and an elementthat displays a landscape.
…entbyID was added still needs adjustments for JS to work.
…lect with change for eventlistener and removed search option. Next will begin wave 4.
… to drop editable and used a input type text instead. Reset button atm resets the city text box to a blank box.
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.
Overall nice work Karla, you hit the main learning goals. I left some minor feedback, but this works quite well. You didn't have the reset city name section, but otherwise you hit all the requirements. Well done.
let btnAdd = document.getElementById('add'); | ||
let btnSubtract = document.getElementById('subtract'); | ||
let tempInput = document.getElementById('temp_id'); | ||
let landscape = document.getElementById('landscape'); | ||
let skiesInput = document.getElementById('sky-select'); | ||
let skiesLandscape = document.getElementById('sky-landscape'); |
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.
Not a bad idea having these at the top, but it's possible the HTML might get loaded by the browser AFTER the JS. So in that case these variables would be set to undefined
.
Also why not make them const
?
function countUp(element) { | ||
element.value = parseInt(element.value) + 1; | ||
} | ||
|
||
function countDown(element) { | ||
element.value = parseInt(element.value) - 1; | ||
} |
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 helper functions
if (tempInput.value >= 80) { | ||
tempInput.style.color = 'red'; | ||
} else if (tempInput.value >= 70 && tempInput.value <= 79) { | ||
tempInput.style.color = 'orange'; | ||
} else if (tempInput.value >= 60 && tempInput.value <= 69) { | ||
tempInput.style.color = 'yellow'; | ||
} else if (tempInput.value >= 50 && tempInput.value <= 59) { | ||
tempInput.style.color = 'green'; | ||
} else if (tempInput.value <= 49) { | ||
tempInput.style.color = 'teal'; | ||
} |
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.
In general don't set styles directly, instead set the element's class name. Otherwise you're mixing roles between the behavior (JS) and presentation (CSS).
No description provided.