Last active
November 15, 2017 14:14
-
-
Save ark234/d52838231836089f55fd3bd5ea0bd29e to your computer and use it in GitHub Desktop.
Task 3.1.1: Create a folder and name it “ JavaScript Task 3.1 ” Using your Text editor, create a page that includes a title & 3 headings. Give your headings a Unique Identifier. Using Javascript, include a button and program your headings to change on click. Save your page and name “Javascript Task 3.1.1” in the “Javascript Task 3.1” folder.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Task 3.1</title> | |
| <style type="text/css"> | |
| #button1 { | |
| height: 50px; | |
| width: 200px; | |
| background: linear-gradient(blue, yellow, green); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1 class="headings" id="heading1">HEADING 1</h1> | |
| <h1 class="headings" id="heading2">HEADING 2</h1> | |
| <h1 class="headings" id="heading3">HEADING 3</h1> | |
| <button id="button1" type="button">CHANGE COLOR</button> | |
| <script type="text/javascript"> | |
| // cache HTML elements into JS variables | |
| // getElementsByClassName returns an object | |
| var h = document.getElementsByClassName('headings'); | |
| var b = document.getElementById('button1'); | |
| // attach event listener to button that will change colors | |
| // of each child of the h object | |
| b.addEventListener('click', function(){ | |
| h[0].style = "background-color:blue"; | |
| h[1].style = "background-color:yellow"; | |
| h[2].style = "background-color:green"; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment