In this project, we will continue to work with Javascript and HTML but also include manipulating the CSS.
Create a simple web application using HTML, Javascript (js) and CSS to create interactive boxes. You will apply the two js events previously researched and change the background color of the boxes.
- Sublime Text
- Chrome
- Terminal
At the end of this exercise you should understand:
- HTML elements and classes
- JS event handling
- JS methods for CSS
- Fork this repo
- Create a sub folder inside your root folder named cmd_ctr
- Create an index.html
- Create a js folder with an app.js file inside
- Create a css folder with a style.js file inside
- Create your HTML structure.
- Link your style.css and app.js files
HTML structure: for each event example
- Create a div with a class container
- Create one box with the id box
- Add your js event
Javascript
- Create a global variable that gets the element with the box id
- Create a function named red that changes the background color of the box to red.
CSS
- Style your box(es)
- Hint the size should be atleast 100x100
- Create two more boxes and change their colors.
- Or you can choose two more events