Simple Server: Individual Exercises
Using the "Hello World" web server as a starting point, complete the following exercises.
More HTML
Currently, the actual HTML for the website is a little sparse. Update the homepage so that it has a little more content.
- Find the line in the
handleRequest
function withresponse.write('<h1>There is no world</h1>')
- Under that, still within the
else
block, add anotherresponse.write
- Pass in
'<p>There are worlds other places</p>'
- This will add a paragraph to the page
- Under that, add another
response.write
- For that one, pass in
'<img src="https://i.imgur.com/hrwSaGo.png">'
- This is a picture of the world
- Under that, add one more
response.write
- Pass in
'<p><a href="?world=1">World 1</a></p>'
- This will link to the Hello World page
Run the program and refresh the page. Verify that the new HTML appears, and it is possible to go to the Hello World page!
if (worldParam == 1) {
response.write('<h1>Hello World</h1>');
} else {
response.write('<h1>There is no world</h1>');
response.write('<p>There are worlds other places</p>');
response.write('<img src="https://i.imgur.com/hrwSaGo.png">');
response.write('<p><a href="?world=1">World 1</a></p>');
}
A Link Back
Now, from the Hello World page, there is no way back to the main page. Fix this by writing an <a href="?">Home</a>
element to the response.
- Find the body of the
if (worldParam == 1)
statement - Under the existing
response.write
, add anotherresponse.write
- Pass in
'<a href="?">Home</a>'
- This will link back to the homepage
Run the program and refresh the page. Verify that it is possible to go back and forth between each page!
if (worldParam == 1) {
response.write('<h1>Hello World</h1>');
response.write('<a href="?">Home</a>');
} else {
response.write('<h1>There is no world</h1>');
response.write('<p>There are worlds other places</p>');
response.write('<img src="https://i.imgur.com/hrwSaGo.png">');
response.write('<p><a href="?world=1">World 1</a></p>');
}
Even More HTML
Feel free to add as much new HTML as desired. The possibilities are endless!
A Whole New World
Now that the two pages have been filled out a little more, it's time to add another page. This one should be accessible with ?world=2
appended to the end of the base URL.
- Find the
if
andelse
structure within thehandleRequest
function - In between the
if
andelse
, add anelse if
- For the
else if
condition, check if theworldParam
variable is2
- In the body of the
else if
, add aresponse.write
- Pass in
'<h1>World 2</h1>'
- Pass in
Run the program and open the website in a new tab.
Add ?world=2
to the end of the URL, and verify that the new message appears!
if (worldParam == 1) {
response.write('<h1>Hello World</h1>');
response.write('<p><a href="?">Home</a></p>');
} else if (worldParam == 2) {
response.write('<h1>World 2</h1>');
} else {
response.write('<h1>There is no world</h1>');
response.write('<p>There are worlds other places</p>');
response.write('<img src="https://i.imgur.com/hrwSaGo.png">');
response.write('<p><a href="?world=1">World 1</a></p>');
}
More New World Content
Now, fill out the World 2 page a little bit.
- Under the
response.write
in theelse if
body, add anotherresponse.write
- Pass in
'<img src="https://i.imgur.com/u3wv9H8.png">'
- This is a picture of Super Mario
- Under that, add another
response.write
- Pass in
'<p>This is Super Mario World</p>'
- Under that, use
response.write
to write'<a href="?">Home</a>'
Run the program again and refresh the ?world=2
page to verify that the new content appears!
if (worldParam == 1) {
response.write('<h1>Hello World</h1>');
response.write('<p><a href="?">Home</a></p>');
} else if (worldParam == 2) {
response.write('<h1>World 2</h1>');
response.write('<img src="https://i.imgur.com/u3wv9H8.png">');
response.write('<p>This is Super Mario World</p>');
response.write('<a href="?">Home</a>');
} else {
response.write('<h1>There is no world</h1>');
response.write('<p>There are worlds other places</p>');
response.write('<img src="https://i.imgur.com/hrwSaGo.png">');
response.write('<p><a href="?world=1">World 1</a></p>');
}
Linking
Now that the new page exists, it's time to link it from the main page. Add another response.write
in the else
block, and pass in '<p><a href="?world=2">World 2</a></p>'
.
Run the program again, and see how it is possible to navigate between pages!
if (worldParam == 1) {
response.write('<h1>Hello World</h1>');
response.write('<p><a href="?">Home</a></p>');
} else if (worldParam == 2) {
response.write('<h1>World 2</h1>');
response.write('<img src="https://i.imgur.com/u3wv9H8.png">');
response.write('<p>This is Super Mario World</p>');
response.write('<a href="?">Home</a>');
} else {
response.write('<h1>There is no world</h1>');
response.write('<p>There are worlds other places</p>');
response.write('<img src="https://i.imgur.com/hrwSaGo.png">');
response.write('<p><a href="?world=1">World 1</a></p>');
response.write('<p><a href="?world=2">World 2</a></p>');
}
Yet Another World
Add a World 3 to the site.
- It should be accessible by appending
?world=3
to the base URL - It should have a header that says World 3
- There should be links to and from the new page and the Home page
Follow these instructions:
- In the
handleResponse
function, find theif (worldParam == 1)
statement - Add an
else if
checking forworldParam == 3
- Within that
else if
body, useresponse.write
to write anh1
containing "World 3" - Under that, add another
response.write
with a link to the Home page - In the body of the
else
clause, make a new line at the bottom - Add a
response.write
with a link to the new World 3 page - Run the program, and verify that it is possible to navigate to the new page!
Message Query Parameter
Add the ability for the user to use a new query parameter msg
whose value will appear on the page. For example, they should be able to go to the Repl project url with ?msg=hello
appended and see a page that contains the text "You said hello" in the HTML. This should work for any value, e.g. ?msg=hi
, ?msg=goodbye
, ?msg=whatever
, etc.
HINT: No
if
statement is required for this exercise!
- In the
handleRequest
function, find theparsedUrl
object- The
parsedUrl
object should have a property ofmsg
for the query parameter
- The
- Get the value of the
msg
query parameter, and store it in a new variable - Use
response.write
to write the message into the HTML response:'You said ' + msg
let msgParam = queryParams.msg;
response.write(`<p>You said ${msgParam}</p>`);
Background Color Query Parameter
Use a new query parameter, bg
, to dynamically set the background color of the page. For example, the user should be able to go to the Repl project url with ?bg=red
appended, and see a page with a red background. This should work for any color.
The HTML/CSS to change the background color looks like this:
<style>
body {
background-color: red;
}
</style>
- In the
handleRequest
function, use thequeryParams
object to obtain the value of a query parameterbg
, and store it in a variable- This is just like getting the value of the
msg
orworld
query parameter
- This is just like getting the value of the
- Create a new variable named
bgParam
containing the<style></style>
tag within a template string (surrounded by backticks) - Update the template string so that instead of
red
, the color is whatever the user specified withbg
- HINT: replace
red
in thestyle
tag with${bgParam}
- HINT: replace
- Use
response.write
to write the entire<style></style>
tag to the response!
let bgParam = queryParams.bg;
response.write(`<style>
body {
background-color: ${bgParam};
}
</style>`);
Background Color Links
Instead of making the user type the query parameter into the URL, create links on the page that contain the query parameter for them!
A link would look like this:
<p><a href="?orange">Make background orange</a><p>
- Create a new variable containing the
<p></p>
element as a string - Write the
<p></p>
element to theresponse
object withresponse.write
- Repeat the steps above to create links for "lavender" and "yellow" in addition to orange
response.write('<p><a href="?orange">Make background orange</a><p>');
response.write('<p><a href="?lavender">Make background lavender</a><p>');
response.write('<p><a href="?yellow">Make background yellow</a><p>');
Challenge
- Create an array of color strings, including
'orange', 'lavender', 'yellow'
- Use a
for
loop to dynamically generate the anchor elements based on the color array, and write all of them to theresponse
CHALLENGE - Pages of People
Use this code for the names
array:
const names = [
'Wesley Malecha',
'Glenna Hillman',
'Shenita Cheney',
'Ja Woodside',
'Rafael Wolken',
'Samuel Studer',
'Nadene Rita',
'Kathie Crosland',
'Roxanna Scogin',
'Stan Croxton',
'Yuki Hosch',
'Shantae Dirksen',
'Harriette Berthelot',
'Jennie Parman',
'Louanne Oland',
'Ebony Bushey',
'Tom Sanger',
'Shemeka Righter',
'Jetta Zaremba',
'Adrianne Commons',
'Clay Renninger',
'Raleigh Howley',
'Maryln Leven',
'Dominica Paik',
'Peter Yocum',
'Gabriela Kubala',
'Gino Phinney',
'Lavona Vidal',
'Angelique Fontanez',
'Waldo Hagwood',
'Jacquie Mellon',
'Velva Vitagliano',
'Eun Flora',
'Virgil Trimble',
'Kurt Mallon',
'Donella Mcardle',
'Maud Guider',
'Holli Champlin',
'Rosalie Rook',
'Ina Leonard',
'Eliseo Spoto',
'Teisha Wilhoit',
'Lachelle Augustus',
'Kristel Dennis',
'Jeannetta Oller',
'Scottie Steptoe',
'Margit Stockwell',
'Minh Blau',
'Maegan Burling',
'Floria Bakley'
];
There are 50 total names, and there should be 10 names appearing on each page. This way, names 1-10 will appear on page 1, names 11-20 will appear on page 2, and so on. There should be dynamically-generated links at the bottom of the list to go to the "Next Page" or the "Previous Page" depending on the current page. For example, if the user is on page 2, the "Next Page" link should send them to page 3, and the "Previous Page" link should send them to page 1. If there is no next page or previous page, no link should appear.
- Create a
names
array that contains 50 names (above) - Use the parsed URL object to obtain the value of a query parameter
page
- Convert the parameter value into a number using the
Number()
function, and store it in a variable - Use the
isNan()
function to check if the value is a number, and if it is not, set it to1
- If the page value is less than 1 or greater than 5, set it to
1
- Write an
h3
with the text "People" to the response - Write the opening tag of a
ul
to the response - Use a
for
loop to dynamically write the appropriate names, each within anli
element, to the response- There should be
10
names total - The starting point should be based on the current
page
- There should be
- Write the closing tag of the
ul
- If appropriate, create an HTML link that links to the previous page, and write it to the response
- If appropriate, create an HTML link that links to the next page, and write it to the response
POST Request with a Form
Figure out how to use an HTML form to make a POST request to the server.
Anything Else!
Think about what is possible with HTML pages and query parameters and try to create something new.