help

Question

i was renewing my website, when i hover around a list of it the color turn black and white, how do i fix this

link: https://code.sololearn.com/W07l1L38KZq9

Answer 1

Your switch need to have 2 values, you need to check is switch on or off.
You already have option to turn dark mode, now just check position of switch (i see you have draw this with css) and reset background color, text color to its default.

Your css switch is little complex, you may look at this switch:
https://www.w3schools.com/howto/howto_css_switch.asp
they used checkbox, so you can check is checkbox checked or not, and change style based on this

Edit:
If you use this checkbox you can select checkbox by its id for example:
document.getElementById("yourSwitch").addEventListener("click",(event) => {
// your switch current state
let darkMode = event.target.checked;
// if switch is checked - true you can change page to have dark mode, if it is false, set default mode (background color and text color)
})

Answer 2

Frank Anthony you just forgot to close for loop, and you need to log result after loop like this:

for(I=0; I<prices.length; I++) {
prices[I] += increase;
}
console.log(prices)

Answer 3

It change color because in javascript you told it to change color on hover, uf you remove this line your code wont change color on hover.

Line 79:
$("body").append("<style>li:hover{ background-color:white; color:black;}div.buttContainer:hover{ background-color:white;}</style>")

You also didnt followed best practices inside html, you have multiple body tags, but only 1 is allowed, title tag need to be inside head, ol and ul can only have li as direct child.
Some browsers,search engines, screen readers will have problem reading this page

I fixed this problems, and typed comments for you to understand
Here is some amazing site where you can check is your html valid, it is very good tool ti help you code better.
https://validator.w3.org

Having css in multiply placed, inline html, css file, javascript, will make code hard to debug.
Best practice is to use just css for styling, if you need to style inside javascript use id or class

https://code.sololearn.com/Wgx13mRJH5Tv/?ref=app

Answer 4

i was also making a dark mode version by flipping a switch, can you help me on returning from dark mode to light mode?

Answer 5

im not using checkbox and how to add title on slider menu?

Answer 6

I know you are not using checkbox, but if you will it will make things much easier for you.
Thats why I suggested you to use it.

To make your current slider (not checkbox) switch themes, you may toggle class name on click.
https://www.w3schools.com/howto/howto_js_toggle_class.asp

To add title on slider you can simply add p tag with title and style it as you need.

Edit:
Here is dark more theme with toggling class name, I used button, but you can use div or anything you need. You would need to set some style inside css (this is also best practice)
https://code.sololearn.com/WKQdu4kuwc9i/?ref=app

Answer 7

Can someone's please explain what's wrong with my solution for the store manager quiz in JS
for(I=0; I<prices.length; I++){
prices[I] += increase;
console.log(prices[I]);

PS: check the store manager quiz for the full syntax of the quiz🙂