mirror of https://github.com/01-edu/public.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
4 years ago | |
---|---|---|
.. | ||
README.md | 4 years ago |
README.md
First words
Instructions
Now that you know how to make your creation move, what about making it communicate its first words to the world?
Let's put a second button in the top right corner of the page, that will add some text when clicked. Add it in the HTML structure:
<button id="speak-button">Click me to speak</button>
Add the button style in the CSS file:
button#speak-button {
top: 100px;
}
Also add this class to style the text we will add:
.words {
text-align: center;
font-family: sans-serif;
}
In the JS file, like in the previous exercise, get the HTML button element with id
speak-button
and add an event listener on click
event, triggering a function that will:
- create a new HTML element of type
div
- set its text content to "Hello there!"
- set its
className
towords
, that we just added earlier in the CSS - use the
append
method to add it inside thetorso
element
Code examples
Create a new element and add it inside the body:
// create a new `div` element
const div = document.createElement('div') // the argument passed (string) is the html tag
// select the `body` and add the new `div` inside it
const body = document.querySelector('body')
body.append(div)
Expected output
This is what you should see in the browser.