Question: HTML Create an HTML that contains a paragraph with ID attribute of target_p that includes the following quote by Ada Lovelace: In considering any new
HTML
Create an HTML that contains a paragraph with ID attribute of "target_p" that includes the following quote by Ada Lovelace:
In considering any new subject, there is frequently a tendency, first, to overrate what we find to be already interesting or remarkable: and, secondly, by a sort of natural reaction, to undervalue the real state of the case, when we do discover that our notions have surpassed those that were really tenable.
JavaScript
Create a separate JavaScript file for this page.
- Create a new Class called ParagraphChanger where the constructor accepts the paragraph element.
- The constructor should create a div before the paragraph, with the ID button_container. It should then add four buttons with the following titles.
- Toggle Bold
- Toggle Width
- Toggle Colour
- Toggle Font Size
- Add click event handlers to each of the four buttons. Each click of a button should "toggle" a style on the paragraph. Toggling means that each click switches the effect from off, on, off, on, etc. By default, none of the changes are enabled, ie: they start as off.
- Toggle Bold will make text bold.
- Toggle Width will change the width of the paragraph to be 50%.
- Toggle Colour will change the color of the text to Ferrari Red.
- Toggle Size will double the font size from a default of 12px.
- Each button should be able to work independently, which means that toggling bold should only affect the bold property and the width, color and size aren't effected.
- You must use CSS classes for toggling styles, adding or removing classes to change the style. You are not permitted to manually apply styles to elements with JavaScript.
- You must use addEventListener for all your event handling.
CSS
Create a separate CSS file that handles the styling for the page.
- Style the buttons so that they sit horizontally inside their container. The four buttons together should take up the full width of the container and each button should be the same width.
- Include a 1px black border around button container, and 10px of padding.
- There must be a 10px gap between each of the buttons.
- The paragraph must have a 3px border of #ff2800 (Ferrari Red) and 15px of padding.
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
