Make your first change to a real page from JavaScript.
What to build
A script that changes two elements. The HTML itself must stay as it is.
Requirements
- Change the heading's text to
Welcome, Mitu. - Change the text of the paragraph with the id
notetoYour page is ready.. - Add the class
readyto that paragraph.
Constraints
Do not edit the HTML, and do not use innerHTML.
Example
document.querySelector("#title").textContent = "Hi";
Why it works
The heading in the file still says Hello, but the browser shows what the DOM holds. Changing the object changes the page.
Hints
Hint 1
document.querySelector("#title") finds the heading.
Hint 2
Set its textContent to change the words.
Hint 3
classList.add("ready") adds a class to an element.
Solution
Show one correct solution (try it yourself first)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Greeting</title>
<style>
.ready { color: green; }
</style>
</head>
<body>
<h1 id="title">Hello</h1>
<p id="note"></p>
<script>
document.querySelector("#title").textContent = "Welcome, Mitu";
const note = document.querySelector("#note");
note.textContent = "Your page is ready.";
note.classList.add("ready");
</script>
</body>
</html>