Create a Program to Toggle Background Color in Javascript Assignment Solution

Instructions

Objective

Write a program to toggle background color in javascript language.

Requirements and Specifications

JavaScript Toggle Assignment

For this assignment, you need to write a code to toggle the background color of your page between white and black when clicking on a button. The text on your button also needs to toggle between 'Night Mode' and 'Day Mode'. Please watch the video below to see what you should achieve when completing this assignment:

See the attached video.

How to start:

• Create a basic HTML document with correct structural elements such as < head >, < title >, < body >, etc.
• Name your HTML document 'LastName_FirstName.html'
• Create a button on your page using HTML. Add a heading and a paragraph explaining what your button is doing something similar to what is shown in the example above.
• Use javascript and CSS to let users toggle between Day and Night mode by clicking on your button.
• Use embedded CSS and JavaScript to keep all your codes in one document (use < style > and < script > tags within your HTML document) - it would be easier to submit just one file that includes everything for this assignment.

Minimum Requirements:

• A webpage with a title, a heading, a paragraph, and a button.
• Clicking on the button must change the body background color from white to black and from black to white (toggle effect)
• Clicking on the button must change the button's text from 'Night Mode' to 'Day Mode' and from 'Day Mode' to 'Night Mode' (toggle effect)

Tip: You can use JavaScript's toggle( ) method and attach it to a class that you defined in CSS.

Please note that you can create your toggle button using any method that you like and using JavaScript toggle is just a suggestion.

How to Submit:

Once your code is completed and tested, please upload your 'LastName_FirstName.html' file as your submission for this assignment.

Source Code

< html > < title >Toggle Day/Night Mode< /title > < body > < div id="title" >Toggle Day/Night Mode< /div > < div id="description" >Click the button to toggle between Day and Night mode.</div> < div id="button-container" > < button id="toggle" onclick="toggleDayNight()" >Night Mode</button> < !-- Initially in Day Mode -- > < /div > < /body > < style type="text/css" > body { background-color: #ffffff; font-family: arial; color: #000000; } #title { font-family: arial; font-size: 30px; font-style:normal; padding: 5px; } #description { padding-left: 10px; padding-top: 10px; padding-bottom: 10px; } #button-container { padding-left: 10px; } #toggle { font-family: arial; font-size: 20px; } < /style > < script > function toggleDayNight() { // Get the text in the button var button = document.getElementById("toggle"); var buttonText = button.textContent if(buttonText == "Night Mode") // the current state is DAY MODE { // Change the name of the button button.textContent = "Day Mode" // Switch all colors (white->black, black->white) document.body.style.backgroundColor = "black"; document.body.style.color = "white"; } else // current state is NIGHT MODE { // Change the name of the button button.textContent = "Night Mode" // Switch all colors (white->black, black->white) document.body.style.backgroundColor = "white"; document.body.style.color = "black"; } } < /script > < /html >