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.
 
 
 
 
 
 

2.3 KiB

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:

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