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>

Create a Program to Toggle Background Color in Javascript Assignment Solution.

Instructions

Requirements and Specifications