-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathExercise12.html
34 lines (30 loc) · 1.92 KB
/
Exercise12.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="welcome-message">
</div>
<span id="hometown"></span>
<div id="from">
Test
</div>
<div id="to">
</div>
<script>
var visitorName = prompt("What is your name?");
var hometown = prompt('Where are you from?');
document.querySelector("#welcome-message").textContent = "Welcome " + visitorName + "! Thank you for visiting our website.";
document.querySelector("#hometown").textContent = " It is so nice to have a visitor from " + hometown +"!";
document.querySelector("#to").textContent = document.querySelector("#from").textContent
</script>
</body>
</html>
<!-- Exercise 12
Create a <div> with an id of "welcome-message" on your web page.
Prompt the user to enter their name. Set the response equal to a variable "visitorName". Create a nice welcome message on the page using querySelector and textContent.
Put a <span> with the id of "hometown" on the page, prompt the user for their hometown, and use their answer and the "hometown" span to let them know how nice it is to have a visitor from that place.
Create a <div> with an id of "from-div", and one with the id of "to-div". Take the text content of "from-div", and place it in "to-div".
Create a "Mad Libs" web page. It should tell a story, leaving empty <spans>'s with id attributes of 'noun1', 'adjective2', 'verb3', etc. Practice using the console along with `querySelector` and `textContent` to fill in the missing information one at a time.
After doing this manually, put these operations into a script tag, and use variables to store each piece of information before placing it into the web page, so that the template will be filled out automatically each time the page loads, but the information will be easy to change later.
Finally, prompt the visitor repeatedly to provide their own mad libs words. Save their responses as variables and then place those variables into the page to make a crazy story for them. -->