Part 1: Buttons
Give both of the following buttons distinct classes, and specify the classes in the css file to change the button styles. Set the color, background-color, width, and height property of both buttons. When either button is clicked, log a message to the console with a description of the button's style
Part 2: Counter
For this section, make the button add one to the count each time it is clicked. Change the following properties of the button's class:
- color: change the color to any color
- background-color: change the background color to any color
- width and height: make the button a square
- border: the border property specifies the border thickness, type of border, and border-color. Specify each of these values(ex. border: 2px solid #555555;)
- border-radius: change the border radius to give the button rounded corners
- do not remove the transition durations. These will help us show the user when the mouse is over the button
Change the color and background-color of the "button.rounded:hover" declaration in the css file
Also, change the size and color of the count field by giving it a class and specifying the class in the css file
Count:
0
Part 3: Change styling by class
For this section, create a paragraph tag and a button in the HTML file. Create two classes for the paragraph tag with different styles in the css file, and have the button switch the paragraph tag's class between these two classes. Also, have the button change the paragraph's text to tell the user which class is currently being displayed. Give the button a class and style it as desired
This is style 1!
Part 4: Dynamic list
For this section, add an element (li) to the list each time a button is clicked. All elements in the list should have the same class and styling.
When adding an element to the list, set the text randomly from a pre-defined list of 5-10 strings you define in the function
Each element should have a remove button, and each element should be removed from the list when its remove button is clicked
Change the button styling to any desired style
Change the list element's font-size, color, and padding properties