DOM Challenges 2
Goal: Further demonstrate understanding of DOM manipulation, events, and forms. Build familiarity with JS syntax.
Direction: It is up to you and your group: either make separate HTML files for each prompt, or organize the assignment such that everything is on one page. If you want to run the same JavaScript on several pages in a web site, you should create an external JavaScript file, instead of writing the same script over and over again. Save the script file with a .js extension, and then refer to it using the src attribute in the <script> tag.
Example:
<script src="myscripts.js"></script>Assignment: Complete and submit the following:
- Create an HTML page with two buttons that argue with each other. When one button is clicked, the text "I'm right" should be placed next to it. When the other button is clicked, the text is replaced with, "No, I'm right!"
- Create an HTML page with a large element on the page that says "Don't hover over me" inside of it. When you hover over the element, send an alert to the user that says, "Hey, I told you not to hover over me!
- Create an HTML page with a form. It should include inputs for a username, email, and password. Also a submit button.
- In a Javascript file, write a program which checks the following things:
- checks that the password is 12345678
- if the password is incorrect, send an alert message
- Your page should also include an
<h1>tag. If the information in the form is correct, have Javascript change the text in the<h1>HTML page.
- Add a CSS stylesheet that styles all of your pages.
- BONUS: Create an HTML page with a form that asks the user to input the value of a sphere's radius. Write Javascript that gives them back the volume of the sphere. (There are many different ways to execute this. You can give the user information back in another input box on the page, as an alert, or any other way you can think of. You can look up how to use the Javascript Math object to simplify your calculations.)