Given the HTML and CSS as provided, use jQuery to hear the click of the switch and meet the following criteria:
- When someone hits the
<button>
inside of the.switch
, remove the current state class (.on/.off), and apply the opposite class (.on/.off) - Swap the color of the body's background and text by adding or removing the dark/light class. For advanced learning, try to store the values as variables and swap them directly without the use of classes
- Lastly, change the text in box to say "It's so bright in here!" when the switch is in the on position, and "Hey, who turned off the lights?" when it's off
Start with small steps:
- Start by changing the
background-color
and textcolor
- See if you can store the values as variables for swapping (later)
- Change the status
.text()
from one message to the other - Change the class of the
.switch>button
from.on
to.off
- Check if the
button
click()
will trigger a function (try a simplealert()
to test this) - Combine the above steps to solve the problem:
- use an
if
statement to change the text - try the jquery
toggleClass
function to change the light and dark backgrounds - you should be able to click the switch many times and it should switch back and forth between light and dark modes