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.
 
 
 
 
 
 
Marie Malarme 0873214d5e first-words: add code examples to create and append element 4 years ago
..
README.md first-words: add code examples to create and append element 4 years ago

README.md

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:

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.

Notions