Programming Homework Help. San Diego State University HTML CSS Javascript Toggle Code
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:
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.
Assessment:
This assignment has 100 points that go towards the followings:
Content – Use of required elements on the page (20 pt)
- Title (5 pt)
- Heading (5 pt)
- Paragraph (5 pt)
- Button (5 pt)
Webpage functionality (60 pt):
- Toggle the background color from white to black and from black to white with every click (30 pt)
- Toggle the button’s text from ‘Night Mode’ to ‘Day Mode’ and from ‘Day Mode’ to ‘Night Mode’ with every click (30 pt)
Code structure and Correctness (20 pt):
- The HTML, CSS, and JavaScript code must be correct and written in an organized structure (e.g. proper use of head and body elements, proper nestings, proper indentations, proper placement of <style> and <script> tags)
