Name: CS546- Lab 8: Template Time Solved
SKU: 83417
Availability: InStock

Description

4.6/5 - (5 votes)

Template Time

For this lab, you will be using HTML, CSS, and Handlebars to make your first simple templated web application! You will be building a form that allows you to search through characters in the Marvel API.

You will not need to use a database for this lab.

You must use the async/await keywords (not Promises). You will also be using axios

(https://g ithub.com/axios/axios) , which is a HTTP client for Node.js; you can install it with npm i axios .

Marvel API

You will be using the Marvel API (https://developer.marvel.com) . You will need to register and sign up for an API key.

You will not be able to make requests to the API without signing up and getting an API key

(https://developer.marvel.com/account) . You will use the Characters (https://g ateway .marvel.com/v1/public/characters?

ts=1592417963445&apikey =a8f9ccf932bf29fd379ef00e11668673&hash=f061194023791a1593a0ea861a27da67) listings Please look at the data returned so you know the schema of the data and the objects it returns (the links to Characters above work but using my API key. DO NOT use my API key. Please register for your own. You will need to compose the URL with your API key, a ts (time stamp) and a hash.

You can use the following code to construct the URL. You can read more about AUTHORIZING AND SIGNING REQUESTS from the link below

https://developer.marvel.com/documentation/authorization

(https://developer.marvel.com/documentation/authorization)

const md5 = require(‘blueimp-md5’);

const publickey = ‘your_public_key(API KEY) from Marvel dev portal’; const privatekey = ‘your private key from Marvel dev portal’; const ts = new Date().getTime();

const stringToHash = ts + privatekey + publickey; const hash = md5(stringToHash);

const baseUrl = ‘https://gateway.marvel.com:443/v1/public/characters’; const url = baseUrl + ‘?ts=’ + ts + ‘&apikey=’ + publickey + ‘&hash=’ + hash;

You will be using two endpoints of the Marvel API which is an API about Marvel for your Axios calls.

The search character endpoint where you pass the search term as a query string parameter:

https://gateway.marvel.com:443/v1/public/characters?nameStartsWith=SEARCH_TERM_HERE and then you’ll t i di id l h t i th d i t

get an individual character using the endpoint

You will use these two endpoints to make your axios.get calls depending on which route is called.

You will be making three routes/pages in your application:

http://localhost:3000/ the main page of this application will provide a search form to start a search

of characters for a keyword.

http://localhost:3000/search this page will make the axios call to the search endpoint and return up

to 20 matching results that contain the provided request form param, searchTerm

http://localhost:3000/characters/{id} this page will show all the details of the character with the id

matching the provided URL param, id

All other URLS should return a 404

## `GET http://localhost:3000/`

This page will respond with a valid HTML document. The title of the document should be “Character Finder“. You should have the title set as the <title> element of the HTML document and as an h1 in your document.

Your page should reference a CSS file, /public/site.css ; this file should have at least 5 rulesets that apply to this page; these 5 rules can also apply to elements across all of your pages, or be unique to this page.

You should have a main element, and inside of the main element have a p element with a brief (2-3 sentence description) of what your website does.

Also inside the main element, you will have a form ; this form will POST to /search . This form will have an input and a label ; the label should properly reference the same id as the input . You should also have a input with a type of submit that submits the form. The input in your form where the user types the search term should have a name of searchTerm .

POST http://localhost:3000/search

This route will read the searchTerm parameter and then make an axios call to the Marvel API endpoint searching for that keyword. For example, if the user typed spider in the input field, you would make the axios call to: https://gateway.marvel.com/v1/public/characters?

nameStartsWith=SEARCH_TERM_HERE&ts=TIME_STAMP_HERE&apikey=API_KEY_HERE&hash=HA

This route will respond with a valid HTML document with the results returned from the API. The title of

the document should be “Characters Found“. You should have the title set as the <title> element of the

HTML document and as an h1 in your document. In an h2 element, you will print the supplied searchTerm .

Your page should reference a CSS file, /public/site.css ; this file should have at least 5 rulesets that apply to this page; these 5 rules can also apply to elements on / , or be unique to this page.

You should have a main element, and inside of the main element have a ul tag that has a list of up to

20 characters matching the searchTerm found in the request body in the following format (after searching under ). DO NOT SHOW MORE THAN 20 Characters.

<ul>

<li>

<a href=”/characters/1010727″>Spider-dok</a>

</li>

<li>

<a href=”/characters/1009157″>Spider-Girl (Anya Corazon)</a>

</li>

<li>

<a href=”/Characters/1009609″>Spider-Girl (May Parker)</a>

</li>

</ul>

You must also provide an a tag that links back to your / route with the text Make another search .

If no matches are found, you will print the following HTML paragraph:

<p class=”not-found”>We’re sorry, but no results were found for {searchTerm}.</p>

If the user does not input text into their form or enters just spaces into the input field, make sure to give a response status code of 400 on the page, and render an HTML page with a paragraph class called error ; this paragraph should describe the error.

GET http://localhost:3000/characters/{id}

This route will query the Marvel API using the the id parameter in the URL (for example: https://gateway.marvel.com/v1/public/characters/1009609?

ts=TS_HERE&apikey=API_KEY_HERE&hash=HASH_HERE) and will respond with a valid HTML document with some of the character details. The title of the document should be the name of the character. You should have the title set as the <title> element of the HTML document.

You should have a main element, and inside of the main element, you will have a div tag that has an h1 with the character name , an img which the src is set to the value read from thumbnail.path in the data which is a URL to an image for the character, you will have a p element that contains the character

description , a h2 that’s content says “Comics” and a ul for the list of comics. You only need to display the comic name as the list items

Matching Character Data Returned from API (We will not be using all the fields, just the ones noted above):

{

“code”: 200,

“status”: “Ok”,

“etag”: “284b3f7635608d1e18add4ff80c10902ef5959b4”,

“data”: {

“offset”: 0, “limit”: 20, “total”: 1,

“count”: 1,

“results”: [

{

“id”: 1009609,

“name”: “Spider-Girl (May Parker)”,

“description”: “May \”Mayday\” Parker is the daughter of Spider-Man and Mary Jane Watson-Par ker. Born with all her fatherï¿½s powers-and the same silly sense of humor-sheï¿½s grown up to becom e one of Earthï¿½s most trusted heroes and a fitting tribute to her proud papa.”,

“modified”: “2016-03-02T11:04:46-0500”,

“thumbnail”: {

“path”: “http ://i .annihil .us/u/prod/marvel/i/mg/1/70/4c003adccbe4f (http ://i .anni h i l .us/u / prod/marvel/i /m g/1/70/4c003adccbe4f) “,

“extension”: “jpg”

“resourceURI”: “http ://gateway .marvel .com/v1/public/characters/1009609 (http ://gateway .mar ve l .com/v1/publ i c/characters/1009609) “,

“comics”: {

“available”: 196,

“collectionURI”: “http ://gateway .marvel .com/v1/public/characters/1009609/comics (http ://g ate wa y .marvel .com/v1/publ i c/characters/1009609/com i cs) “,

“items”: [

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/comics/5286 (http ://gateway .marve l .com/v1/publ i c/com i cs/5286) “,

“name”: “Amazing Spider-Girl (2006)”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/comics/5281 (http ://gateway .mar ve l .com/v1/publ i c/com i cs/5281) “,

“name”: “Amazing Spider-Girl (2006) #1”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/comics/5591 (http ://gateway .marve l .com/v1/publ i c/com i cs/5591) “,

“name”: “Amazing Spider-Girl (2006) #2”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/comics/5701 (http ://gateway .mar ve l .com/v1/publ i c/com i cs/5701) “,

“name”: “Amazing Spider-Girl (2006) #3”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/comics/5843 (http ://gateway .marve l .com/v1/publ i c/com i cs/5843) “,

“name”: “Amazing Spider-Girl (2006) #4” },

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/comics/5997 (http ://gateway .mar ve l .com/v1/publ i c/com i cs/5997) “,

“name”: “Amazing Spider-Girl (2006) #5”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/comics/6130 (http ://gateway .marve l .com/v1/publ i c/com i cs/6130) “,

“name”: “Amazing Spider-Girl (2006) #6”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/comics/6270 (http ://gateway .mar ve l .com/v1/publ i c/com i cs/6270) “,

“name”: “Amazing Spider-Girl (2006) #7”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/comics/13478 (http ://gateway .marve l .com/v1/publ i c/com i cs/13478) “,

“name”: “Amazing Spider-Girl (2006) #8”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/comics/15856 (http ://gateway .marve l .com/v1/publ i c/com i cs/15856) “,

“name”: “Amazing Spider-Girl (2006) #9”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/comics/15966 (http ://gateway .marve l .com/v1/publ i c/com i cs/15966) “,

“name”: “Amazing Spider-Girl (2006) #10”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/comics/16151 (http ://gateway .marve l .com/v1/publ i c/com i cs/16151) “,

“name”: “Amazing Spider-Girl (2006) #11”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/comics/16522 (http ://gateway .marve l .com/v1/publ i c/com i cs/16522) “,

“name”: “Amazing Spider-Girl (2006) #12”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/comics/16523 (http ://gateway .marve l .com/v1/publ i c/com i cs/16523) “,

“name”: “Amazing Spider-Girl (2006) #13”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/comics/17249 (http ://gateway .marve l .com/v1/publ i c/com i cs/17249) “,

“name”: “Amazing Spider-Girl (2006) #14”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/comics/17385 (http ://gateway .marve l .com/v1/publ i c/com i cs/17385) “,

“name”: “Amazing Spider-Girl (2006) #15”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/comics/17629 (http ://gateway .marve l .com/v1/publ i c/com i cs/17629) “,

“name”: “Amazing Spider-Girl (2006) #16”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/comics/70668 (http ://gateway .marve l .com/v1/publ i c/com i cs/70668) “,

“name”: “Amazing Spider-Girl (2006) #17”

}, {

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/comics/20868 (http ://gateway .marve l .com/v1/publ i c/com i cs/20868) “,

“name”: “Amazing Spider-Girl (2006) #18”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/comics/21003 (http ://gateway .marve l .com/v1/publ i c/com i cs/21003) “,

“name”: “Amazing Spider-Girl (2006) #19”

}

“returned”: 20

“series”: {

“available”: 37,

“collectionURI”: “http ://gateway .marvel .com/v1/public/characters/1009609/series (http ://g ate wa y .marvel .com/v1/publ i c/characters/1009609/se r i es) “,

“items”: [

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/series/1126 (http ://gateway .mar ve l .com/v1/publ i c/se r i es/1126) “,

“name”: “Amazing Spider-Girl (2006 – 2009)”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/series/2234 (http ://gateway .mar ve l .com/v1/publ i c/se r i es/2234) “,

“name”: “AMAZING SPIDER-GIRL VOL. 1: WHATEVER HAPPENED TO THE DAUGHTER OF SPIDER-MAN T

PB (2007)”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/series/3101 (http ://gateway .mar ve l .com/v1/publ i c/se r i es/3101) “,

“name”: “AMAZING SPIDER-GIRL VOL. 2: COMES THE CARNAGE! TPB (2007)”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/series/5376 (http ://gateway .mar ve l .com/v1/publ i c/se r i es/5376) “,

“name”: “Amazing Spider-Man Family (2008 – 2009)”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/series/1143 (http ://gateway .marve l .com/v1/publ i c/se r i es/1143) “,

“name”: “Avengers Next (2006 – 2007)”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/series/1995 (http ://gateway .mar ve l .com/v1/publ i c/se r i es/1995) “,

“name”: “Cable (1993 – 2002)”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/series/5260 (http ://gateway .marve l .com/v1/publ i c/se r i es/5260) “,

“name”: “Counter X Vol. 1 (2008)”

}, {

“resourceURI”: “http ://gateway .marvel .com/v1/public/series/19 (http ://gateway .mar vel .c om/v1/publ i c/se r i es/19) “,

“name”: “Daredevil Vol. II: Parts of a Hole (1999)”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/series/2119 (http ://gateway .marve l .com/v1/publ i c/se r i es/2119) “,

“name”: “Fantastic Five (1999 – 2000)”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/series/3281 (http ://gateway .mar ve l .com /v1/publ i c/ser i es/3281) “,

l.com/v1/public/series/3281) ,

“name”: “Fantastic Five: The Final Doom (2007)”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/series/13881 (http ://gateway .marve l .com/v1/publ i c/se r i es/13881) “,

“name”: “Fear Itself: The Home Front (2010)”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/series/2572 (http ://gateway .mar ve l .com/v1/publ i c/se r i es/2572) “,

“name”: “Iron Man (1998 – 2004)”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/series/2031 (http ://gateway .mar ve l .com/v1/publ i c/se r i es/2031) “,

“name”: “J2 (1998 – 1999)”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/series/923 (http ://gateway .marvel .

com/v1/publ i c/se r i es/923) “,

“name”: “Last Hero Standing (2005)”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/series/991 (http ://gateway .mar vel .

com/v1/publ i c/se r i es/991) “,

“name”: “Last Planet Standing (2006)”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/series/322 (http ://gateway .marvel .

com/v1/publ i c/se r i es/322) “,

“name”: “MARVEL AGE: SPIDER-GIRL VOL. 1: LEGACY DIGEST (2004)”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/series/26878 (http ://gateway .marve l .com/v1/publ i c/se r i es/26878) “,

“name”: “Marvel’s Greatest Creators: What If? – Spider-Girl (2019)”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/series/2059 (http ://gateway .marve l .com/v1/publ i c/se r i es/2059) “,

“name”: “Paradise X (2002 – 2003)”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/series/2431 (http ://gateway .mar ve l .com/v1/publ i c/se r i es/2431) “,

“name”: “Paradise X Vol. 1 (2007)”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/series/2702 (http ://gateway .mar ve l .com/v1/publ i c/se r i es/2702) “,

“name”: “PARADISE X VOL. 2 TPB [NEW PRINTING] (2007)”

}

“returned”: 20

“stories”: {

“available”: 309,

“collectionURI”: “http ://gateway .marvel .com/v1/public/characters/1009609/stories (htt p ://gate wa y .marvel .com/v1/publ i c/characters/1009609/stor i es) “,

“items”: [

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/stories/791 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/791) “, “name”: “Cover #791”,

“type”: “cover”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/stories/792 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/792) “,

“name”: “Interior #792”,

“type”: “interiorStory”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/stories/806 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/806) “, “name”: “Cover #806”,

“type”: “cover”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/stories/807 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/807) “,

“name”: “Interior #807”,

“type”: “interiorStory”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/stories/808 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/808) “, “name”: “Cover #808”,

“type”: “cover”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/stories/809 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/809) “,

“name”: “Interior #809”,

“type”: “interiorStory”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/stories/810 (http ://gateway .marve l .com/v1/publ i c/stor i es/810) “, “name”: “Cover #810”,

“type”: “cover”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/stories/811 (http ://gateway .marve l .com/v1/publ i c/stor i es/811) “,

“name”: “Interior #811”,

“type”: “interiorStory”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/stories/812 (http ://gateway .marve l .com/v1/publ i c/stor i es/812) “, “name”: “Cover #812”,

“type”: “cover”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/stories/813 (http ://gateway .marve l .com/v1/publ i c/stor i es/813) “,

“name”: “Interior #813”,

“type”: “interiorStory”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/stories/814 (http ://gateway .marve l .com/v1/publ i c/stor i es/814) “,

“name”: “Cover #814”,

“type”: “cover”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/stories/815 (http ://gateway .marve l .com/v1/publ i c/stor i es/815) “,

“name”: “Interior #815”,

“type”: “interiorStory”

}, {

“resourceURI”: “http ://gateway .marvel .com/v1/public/stories/816 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/816) “, “name”: “Cover #816”,

“type”: “cover”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/stories/817 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/817) “,

“name”: “Interior #817”,

“type”: “interiorStory”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/stories/818 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/818) “, “name”: “Cover #818”,

“type”: “cover”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/stories/819 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/819) “,

“name”: “Interior #819”,

“type”: “interiorStory”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/stories/820 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/820) “,

“name”: “\”THE PEOPLE PLAYED BY GAMES!\” Torn between her loyalties to Kaine and the B

lack Tarantula, Spider-Girl finally confronts Lady Oc”,

“type”: “cover”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/stories/821 (http ://gateway .marve l .com/v1/publ i c/stor i es/821) “,

“name”: “\”THE PEOPLE PLAYED BY GAMES!\” Torn between her loyalties to Kaine and the B

lack Tarantula, Spider-Girl finally confronts Lady Oc”,

“type”: “interiorStory”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/stories/822 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/822) “,

“name”: “\”IF THIS BE MY DESTINY—!\” Spider-Girl learns the fate Norman Osborn planned for his grandson when she finally uncovers the secre”,

“type”: “cover”

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/stories/823 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/823) “,

“name”: “\”IF THIS BE MY DESTINY—!\” Spider-Girl learns the fate Norman Osborn planned

for his grandson when she finally uncovers the secre”,

“type”: “interiorStory”

}

“returned”: 20

“events”: {

“available”: 1,

“collectionURI”: “http ://gateway .marvel .com/v1/public/characters/1009609/events (http ://g ateway .marvel .com/v1/publ i c/characters/1009609/events) “,

“items”: [

{

“resourceURI”: “http ://gateway .marvel .com/v1/public/events/302 (http ://gateway .mar vel .

com/v1/publ i c/events/302) “,

“name”: “Fear Itself”

}

“returned”: 1

“urls”: [

{

“type”: “detail”,

“url”: “http ://marvel .com/characters/2171/spider-girl?utm_campaign=apiRef& (http ://marv el .com/characters/2171/sp i de r-g i rl?utm_camp a i gn =ap i Ref&) ;amp;utm_source=a8f9ccf932bf29fd379ef00e1166867

3″

{

“type”: “wiki”,

“url”: “http ://marvel .com/universe/Spider-Girl_(MC2)?utm_campaign=apiRef& (http ://marve l .com/uni verse/Sp i de r -Girl_(MC2)?utm_camp a i gn =ap i Ref&) ;amp;utm_source=a8f9ccf932bf29fd379ef00e11668673″

{

“type”: “comiclink”,

“url”: “http ://marvel .com/comics/characters/1009609/spider-girl_may_parker?utm_campaign= apiRef& (http ://marvel .com/com i cs/characters/1009609/sp i de r-g i rl_may_parker?utm_camp a i gn =ap i Ref&) ;amp;utm_ source=a8f9ccf932bf29fd379ef00e11668673″

} ]

}

] }

}

HTML Format Printed for the character. This will go into your main element:

<div>

<h1>Spider-Girl (May Parker)</h1>

<img alt= “Spider-Girl (May Parker)”src=”http ://i .annihil .us/u/prod/marvel/i/mg/1/70/4c003adccbe4f

(http ://i .anni h i l .us/u /prod/mar vel/i /m g/1/70/4c003adccbe4f) “/>

<p>May \”Mayday\” Parker is the daughter of Spider-Man and Mary Jane Watson-Parker. Born with all her fatherï¿½s powers-and the same silly sense of humor-sheï¿½s grown up to become one of Earthï¿½s

most trusted heroes and a fitting tribute to her proud papa.</p>

<h2>Comics</h2>

<ul>

<li>Amazing Spider-Girl (2006)</li>

<li>Amazing Spider-Girl (2006) #1</li>

<li>Amazing Spider-Girl (2006) #2</li>

<li>Amazing Spider-Girl (2006) #3</li>

<li>Amazing Spider-Girl (2006) #4</li>

<li>Amazing Spider-Girl (2006) #5</li>

<li>Amazing Spider-Girl (2006) #6</li>

<li>Amazing Spider-Girl (2006) #7</li>

<li>Amazing Spider-Girl (2006) #8</li>

<li>Amazing Spider-Girl (2006) #9</li>

<li>Amazing Spider-Girl (2006) #10</li>

<li>Amazing Spider-Girl (2006) #11</li>

<li>Amazing Spider-Girl (2006) #12</li>

<li>Amazing Spider-Girl (2006) #13</li>

<li>Amazing Spider-Girl (2006) #14</li>

<li>Amazing Spider-Girl (2006) #15</li>

<li>Amazing Spider-Girl (2006) #16</li>

<li>Amazing Spider-Girl (2006) #17</li>

<li>Amazing Spider-Girl (2006) #18</li> <li>Amazing Spider-Girl (2006) #19</li>

</ul>

</div>

If there is no character found for the given ID, make sure to give a response status code of 404 on the page, and render an HTML page with a paragraph class called error ; this paragraph should describe the error.

http://localhost:3000/public/site.css

This file should have 5 rulesets that apply to the / route, and 5 rulesets that apply to all of your pages. Rulesets may be shared across both pages; for example, if you styled a p tag, it would count as 1 of the 5 for both pages.

You may include more than 5 rulesets if you so desire.

References and Packages

Basic CSS info can easily be referenced in the MDN CSS tutorial (https://developer.mozilla.org /enUS/docs/Web/Guide/CSS/Getting _started) . Hints

You can use variables in your handlebars layout, that you pass to res.render. For example, in your layout you could have:

And in your route:

Which will render as:

Or, perhaps, the title tag.

Requirements

You must not submit your node_modules folder
You must remember to save your dependencies to your package.json folder
You must do basic error checking in each function
Check for arguments existing and of proper type.
Throw if anything is out of bounds (ie, trying to perform an incalculable math operation or accessing data that does not exist)
You MUST use async/await for all asynchronous operations.
You must remember to update your package.json file to set js as your starting script!
Template Time
For this lab, you will be using HTML, CSS, and Handlebars to make your first simple templated web application! You will be building a form that allows you to search through characters in the Marvel API.

You will not need to use a database for this lab.

You must use the async/await keywords (not Promises). You will also be using axios

(https://g ithub.com/axios/axios) , which is a HTTP client for Node.js; you can install it with npm i axios .

Marvel API

You will be using the Marvel API   (https://developer.marvel.com) . You will need to register and sign up for an API key.

You will not be able to make requests to the API without signing up and getting an API key

(https://developer.marvel.com/account) . You will use the Characters (https://g ateway .marvel.com/v1/public/characters?

ts=1592417963445&apikey =a8f9ccf932bf29fd379ef00e11668673&hash=f061194023791a1593a0ea861a27da67) listings Please look at the data returned so you know the schema of the data and the objects it returns (the links to Characters above work but using my API key. DO NOT use my API key. Please register for your own. You will need to compose the URL with your API key, a ts (time stamp) and a hash.

You can use the following code to construct the URL. You can read more about AUTHORIZING AND SIGNING REQUESTS from the link below

https://developer.marvel.com/documentation/authorization

(https://developer.marvel.com/documentation/authorization)

const md5 = require(‘blueimp-md5’);

const publickey = ‘your_public_key(API KEY) from Marvel dev portal’; const privatekey = ‘your private key from Marvel dev portal’; const ts = new Date().getTime();

const stringToHash = ts + privatekey + publickey; const hash = md5(stringToHash);

const baseUrl = ‘https://gateway.marvel.com:443/v1/public/characters’; const url = baseUrl + ‘?ts=’ + ts + ‘&apikey=’ + publickey + ‘&hash=’ + hash;

You will be using two endpoints of the Marvel API which is an API about Marvel for your Axios calls.

The search character endpoint where you pass the search term as a query string parameter:

https://gateway.marvel.com:443/v1/public/characters?nameStartsWith=SEARCH_TERM_HERE and then you’ll t         i di id   l h        t           i           th         d          i t

get an individual character using the endpoint

You will use these two endpoints to make your axios.get calls depending on which route is called.

You will be making three routes/pages in your application:

http://localhost:3000/ the main page of this application will provide a search form to start a search

of characters for a keyword.

http://localhost:3000/search this page will make the axios call to the search endpoint and return up

to 20 matching results that contain the provided request form param, searchTerm

http://localhost:3000/characters/{id} this page will show all the details of the character with the id

matching the provided URL param, id

All other URLS should return a 404

## `GET http://localhost:3000/`

This page will respond with a valid HTML document. The title of the document should be “Character Finder“. You should have the title set as the <title> element of the HTML document and as an h1 in your document.

Your page should reference a CSS file, /public/site.css ; this file should have at least 5 rulesets that apply to this page; these 5 rules can also apply to elements across all of your pages, or be unique to this page.

You should have a main element, and inside of the main element have a p element with a brief (2-3 sentence description) of what your website does.

Also inside the main element, you will have a form ; this form will POST to /search . This form will have an input and a label ; the label should properly reference the same id as the input . You should also have a input with a type of submit that submits the form. The input in your form where the user types the search term should have a name of searchTerm .

POST http://localhost:3000/search

This route will read the searchTerm parameter and then make an axios call to the Marvel API endpoint searching for that keyword. For example, if the user typed spider in the input field, you would make the axios call to: https://gateway.marvel.com/v1/public/characters?

nameStartsWith=SEARCH_TERM_HERE&ts=TIME_STAMP_HERE&apikey=API_KEY_HERE&hash=HA

This route will respond with a valid HTML document with the results returned from the API. The title of

the document should be “Characters Found“. You should have the title set as the <title> element of the

HTML document and as an h1 in your document. In an h2 element, you will print the supplied searchTerm .

Your page should reference a CSS file, /public/site.css ; this file should have at least 5 rulesets that apply to this page; these 5 rules can also apply to elements on / , or be unique to this page.

You should have a main element, and inside of the main element have a ul tag that has a list of up to

20 characters matching the searchTerm found in the request body in the following format (after searching under ). DO NOT SHOW MORE THAN 20 Characters.

<ul>

<li>

<a href=”/characters/1010727″>Spider-dok</a>

</li>

<li>

<a href=”/characters/1009157″>Spider-Girl (Anya Corazon)</a>

</li>

<li>

<a href=”/Characters/1009609″>Spider-Girl (May Parker)</a>

</li>

</ul>

You must also provide an a tag that links back to your / route with the text Make another search .

If no matches are found, you will print the following HTML paragraph:

<p class=”not-found”>We’re sorry, but no results were found for {searchTerm}.</p>

If the user does not input text into their form or enters just spaces into the input field, make sure to give a response status code of 400 on the page, and render an HTML page with a paragraph class called error ; this paragraph should describe the error.

GET http://localhost:3000/characters/{id}

This route will query the Marvel API using the the id parameter in the URL (for example: https://gateway.marvel.com/v1/public/characters/1009609?

ts=TS_HERE&apikey=API_KEY_HERE&hash=HASH_HERE) and will respond with a valid HTML document with some of the character details. The title of the document should be the name of the character. You should have the title set as the <title> element of the HTML document.

Your page should reference a CSS file, /public/site.css ; this file should have at least 5 rulesets that apply to this page; these 5 rules can also apply to elements on / , or be unique to this page.

You should have a main element, and inside of the main element, you will have a div tag that has an h1 with the character name , an img which the src is set to the value read from thumbnail.path in the data which is a URL to an image for the character, you will have a p element that contains the character

description , a h2 that’s content says “Comics”   and a ul for the list of comics. You only need to display the comic name as the list items

Matching Character Data Returned from API (We will not be using all the fields, just the ones noted above):

{

“code”: 200,

“status”: “Ok”,

“copyright”: “© 2021 MARVEL”,

“attributionText”: “Data provided by Marvel. © 2021 MARVEL”,

“attributionHTML”: “<a href=\”http ://marvel .com\“ (http ://mar vel .com/%22) ;>Data provided by Marvel. © 2021 MARVEL</a>”,

“etag”: “284b3f7635608d1e18add4ff80c10902ef5959b4”,

“data”: {

“offset”: 0,     “limit”: 20,     “total”: 1,

“count”: 1,

“results”: [

{

“id”: 1009609,

“name”: “Spider-Girl (May Parker)”,

“description”: “May \”Mayday\” Parker is the daughter of Spider-Man and Mary Jane Watson-Par ker. Born with all her fatherï¿½s powers-and the same silly sense of humor-sheï¿½s grown up to becom e one of Earthï¿½s most trusted heroes and a fitting tribute to her proud papa.”,

“modified”: “2016-03-02T11:04:46-0500”,

“thumbnail”: {

          “path”: “http ://i .annihil .us/u/prod/marvel/i/mg/1/70/4c003adccbe4f (http ://i .anni h i l .us/u / prod/marvel/i /m g/1/70/4c003adccbe4f) “,

“extension”: “jpg”

},

        “resourceURI”: “http ://gateway .marvel .com/v1/public/characters/1009609 (http ://gateway .mar ve l .com/v1/publ i c/characters/1009609) “,

“comics”: {

“available”: 196,

          “collectionURI”: “http ://gateway .marvel .com/v1/public/characters/1009609/comics (http ://g ate wa y .marvel .com/v1/publ i c/characters/1009609/com i cs) “,

“items”: [

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/comics/5286 (http ://gateway .marve l .com/v1/publ i c/com i cs/5286) “,

“name”: “Amazing Spider-Girl (2006)”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/comics/5281 (http ://gateway .mar ve l .com/v1/publ i c/com i cs/5281) “,

“name”: “Amazing Spider-Girl (2006) #1”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/comics/5591 (http ://gateway .marve l .com/v1/publ i c/com i cs/5591) “,

“name”: “Amazing Spider-Girl (2006) #2”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/comics/5701 (http ://gateway .mar ve l .com/v1/publ i c/com i cs/5701) “,

“name”: “Amazing Spider-Girl (2006) #3”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/comics/5843 (http ://gateway .marve l .com/v1/publ i c/com i cs/5843) “,

“name”: “Amazing Spider-Girl (2006) #4”             },

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/comics/5997 (http ://gateway .mar ve l .com/v1/publ i c/com i cs/5997) “,

“name”: “Amazing Spider-Girl (2006) #5”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/comics/6130 (http ://gateway .marve l .com/v1/publ i c/com i cs/6130) “,

“name”: “Amazing Spider-Girl (2006) #6”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/comics/6270 (http ://gateway .mar ve l .com/v1/publ i c/com i cs/6270) “,

“name”: “Amazing Spider-Girl (2006) #7”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/comics/13478 (http ://gateway .marve l .com/v1/publ i c/com i cs/13478) “,

“name”: “Amazing Spider-Girl (2006) #8”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/comics/15856 (http ://gateway .marve l .com/v1/publ i c/com i cs/15856) “,

“name”: “Amazing Spider-Girl (2006) #9”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/comics/15966 (http ://gateway .marve l .com/v1/publ i c/com i cs/15966) “,

“name”: “Amazing Spider-Girl (2006) #10”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/comics/16151 (http ://gateway .marve l .com/v1/publ i c/com i cs/16151) “,

“name”: “Amazing Spider-Girl (2006) #11”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/comics/16522 (http ://gateway .marve l .com/v1/publ i c/com i cs/16522) “,

“name”: “Amazing Spider-Girl (2006) #12”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/comics/16523 (http ://gateway .marve l .com/v1/publ i c/com i cs/16523) “,

“name”: “Amazing Spider-Girl (2006) #13”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/comics/17249 (http ://gateway .marve l .com/v1/publ i c/com i cs/17249) “,

“name”: “Amazing Spider-Girl (2006) #14”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/comics/17385 (http ://gateway .marve l .com/v1/publ i c/com i cs/17385) “,

“name”: “Amazing Spider-Girl (2006) #15”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/comics/17629 (http ://gateway .marve l .com/v1/publ i c/com i cs/17629) “,

“name”: “Amazing Spider-Girl (2006) #16”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/comics/70668 (http ://gateway .marve l .com/v1/publ i c/com i cs/70668) “,

“name”: “Amazing Spider-Girl (2006) #17”

},             {

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/comics/20868 (http ://gateway .marve l .com/v1/publ i c/com i cs/20868) “,

“name”: “Amazing Spider-Girl (2006) #18”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/comics/21003 (http ://gateway .marve l .com/v1/publ i c/com i cs/21003) “,

“name”: “Amazing Spider-Girl (2006) #19”

}

],

“returned”: 20

},

“series”: {

“available”: 37,

          “collectionURI”: “http ://gateway .marvel .com/v1/public/characters/1009609/series (http ://g ate wa y .marvel .com/v1/publ i c/characters/1009609/se r i es) “,

“items”: [

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/series/1126 (http ://gateway .mar ve l .com/v1/publ i c/se r i es/1126) “,

“name”: “Amazing Spider-Girl (2006 – 2009)”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/series/2234 (http ://gateway .mar ve l .com/v1/publ i c/se r i es/2234) “,

“name”: “AMAZING SPIDER-GIRL VOL. 1: WHATEVER HAPPENED TO THE DAUGHTER OF SPIDER-MAN T

PB (2007)”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/series/3101 (http ://gateway .mar ve l .com/v1/publ i c/se r i es/3101) “,

“name”: “AMAZING SPIDER-GIRL VOL. 2: COMES THE CARNAGE! TPB (2007)”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/series/5376 (http ://gateway .mar ve l .com/v1/publ i c/se r i es/5376) “,

“name”: “Amazing Spider-Man Family (2008 – 2009)”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/series/1143 (http ://gateway .marve l .com/v1/publ i c/se r i es/1143) “,

“name”: “Avengers Next (2006 – 2007)”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/series/1995 (http ://gateway .mar ve l .com/v1/publ i c/se r i es/1995) “,

“name”: “Cable (1993 – 2002)”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/series/5260 (http ://gateway .marve l .com/v1/publ i c/se r i es/5260) “,

“name”: “Counter X Vol. 1 (2008)”

},             {

              “resourceURI”: “http ://gateway .marvel .com/v1/public/series/19 (http ://gateway .mar vel .c om/v1/publ i c/se r i es/19) “,

“name”: “Daredevil Vol. II: Parts of a Hole (1999)”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/series/2119 (http ://gateway .marve l .com/v1/publ i c/se r i es/2119) “,

“name”: “Fantastic Five (1999 – 2000)”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/series/3281 (http ://gateway .mar ve l .com /v1/publ i c/ser i es/3281) “,

l.com/v1/public/series/3281) ,

“name”: “Fantastic Five: The Final Doom (2007)”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/series/13881 (http ://gateway .marve l .com/v1/publ i c/se r i es/13881) “,

“name”: “Fear Itself: The Home Front (2010)”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/series/2572 (http ://gateway .mar ve l .com/v1/publ i c/se r i es/2572) “,

“name”: “Iron Man (1998 – 2004)”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/series/2031 (http ://gateway .mar ve l .com/v1/publ i c/se r i es/2031) “,

“name”: “J2 (1998 – 1999)”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/series/923 (http ://gateway .marvel .

com/v1/publ i c/se r i es/923) “,

“name”: “Last Hero Standing (2005)”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/series/991 (http ://gateway .mar vel .

com/v1/publ i c/se r i es/991) “,

“name”: “Last Planet Standing (2006)”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/series/322 (http ://gateway .marvel .

com/v1/publ i c/se r i es/322) “,

“name”: “MARVEL AGE: SPIDER-GIRL VOL. 1: LEGACY DIGEST (2004)”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/series/26878 (http ://gateway .marve l .com/v1/publ i c/se r i es/26878) “,

“name”: “Marvel’s Greatest Creators: What If? – Spider-Girl (2019)”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/series/2059 (http ://gateway .marve l .com/v1/publ i c/se r i es/2059) “,

“name”: “Paradise X (2002 – 2003)”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/series/2431 (http ://gateway .mar ve l .com/v1/publ i c/se r i es/2431) “,

“name”: “Paradise X Vol. 1 (2007)”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/series/2702 (http ://gateway .mar ve l .com/v1/publ i c/se r i es/2702) “,

“name”: “PARADISE X VOL. 2 TPB [NEW PRINTING] (2007)”

}

],

“returned”: 20

},

“stories”: {

“available”: 309,

          “collectionURI”: “http ://gateway .marvel .com/v1/public/characters/1009609/stories (htt p ://gate wa y .marvel .com/v1/publ i c/characters/1009609/stor i es) “,

“items”: [

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/stories/791 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/791) “,               “name”: “Cover #791”,

“type”: “cover”

},

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/stories/792 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/792) “,

“name”: “Interior #792”,

“type”: “interiorStory”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/stories/806 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/806) “,               “name”: “Cover #806”,

“type”: “cover”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/stories/807 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/807) “,

“name”: “Interior #807”,

“type”: “interiorStory”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/stories/808 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/808) “,               “name”: “Cover #808”,

“type”: “cover”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/stories/809 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/809) “,

“name”: “Interior #809”,

“type”: “interiorStory”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/stories/810 (http ://gateway .marve l .com/v1/publ i c/stor i es/810) “,               “name”: “Cover #810”,

“type”: “cover”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/stories/811 (http ://gateway .marve l .com/v1/publ i c/stor i es/811) “,

“name”: “Interior #811”,

“type”: “interiorStory”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/stories/812 (http ://gateway .marve l .com/v1/publ i c/stor i es/812) “,               “name”: “Cover #812”,

“type”: “cover”

},

{

            “resourceURI”: “http ://gateway .marvel .com/v1/public/stories/813 (http ://gateway .marve l .com/v1/publ i c/stor i es/813) “,

“name”: “Interior #813”,

“type”: “interiorStory”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/stories/814 (http ://gateway .marve l .com/v1/publ i c/stor i es/814) “,

“name”: “Cover #814”,

“type”: “cover”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/stories/815 (http ://gateway .marve l .com/v1/publ i c/stor i es/815) “,

“name”: “Interior #815”,

“type”: “interiorStory”

},

},             {

              “resourceURI”: “http ://gateway .marvel .com/v1/public/stories/816 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/816) “,               “name”: “Cover #816”,

“type”: “cover”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/stories/817 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/817) “,

“name”: “Interior #817”,

“type”: “interiorStory”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/stories/818 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/818) “,               “name”: “Cover #818”,

“type”: “cover”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/stories/819 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/819) “,

“name”: “Interior #819”,

“type”: “interiorStory”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/stories/820 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/820) “,

“name”: “\”THE PEOPLE PLAYED BY GAMES!\” Torn between her loyalties to Kaine and the B

lack Tarantula, Spider-Girl finally confronts Lady Oc”,

“type”: “cover”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/stories/821 (http ://gateway .marve l .com/v1/publ i c/stor i es/821) “,

“name”: “\”THE PEOPLE PLAYED BY GAMES!\” Torn between her loyalties to Kaine and the B

lack Tarantula, Spider-Girl finally confronts Lady Oc”,

“type”: “interiorStory”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/stories/822 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/822) “,

“name”: “\”IF THIS BE MY DESTINY—!\” Spider-Girl learns the fate Norman Osborn planned for his grandson when she finally uncovers the secre”,

“type”: “cover”

},

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/stories/823 (http ://gateway .mar ve l .com/v1/publ i c/stor i es/823) “,

“name”: “\”IF THIS BE MY DESTINY—!\” Spider-Girl learns the fate Norman Osborn planned

for his grandson when she finally uncovers the secre”,

“type”: “interiorStory”

}

],

“returned”: 20

},

“events”: {

“available”: 1,

          “collectionURI”: “http ://gateway .marvel .com/v1/public/characters/1009609/events (http ://g ateway .marvel .com/v1/publ i c/characters/1009609/events) “,

“items”: [

{

              “resourceURI”: “http ://gateway .marvel .com/v1/public/events/302 (http ://gateway .mar vel .

com/v1/publ i c/events/302) “,

“name”: “Fear Itself”

}

],

“returned”: 1

},

“urls”: [

{

“type”: “detail”,

            “url”: “http ://marvel .com/characters/2171/spider-girl?utm_campaign=apiRef& (http ://marv el .com/characters/2171/sp i de r-g i rl?utm_camp a i gn =ap i Ref&) ;amp;utm_source=a8f9ccf932bf29fd379ef00e1166867

3″

},

{

“type”: “wiki”,

            “url”: “http ://marvel .com/universe/Spider-Girl_(MC2)?utm_campaign=apiRef& (http ://marve l .com/uni verse/Sp i de r -Girl_(MC2)?utm_camp a i gn =ap i Ref&) ;amp;utm_source=a8f9ccf932bf29fd379ef00e11668673″

},

{

“type”: “comiclink”,

            “url”: “http ://marvel .com/comics/characters/1009609/spider-girl_may_parker?utm_campaign= apiRef& (http ://marvel .com/com i cs/characters/1009609/sp i de r-g i rl_may_parker?utm_camp a i gn =ap i Ref&) ;amp;utm_ source=a8f9ccf932bf29fd379ef00e11668673″

}         ]

}

]   }

}

HTML Format Printed for the character. This will go into your main element:

<div>

<h1>Spider-Girl (May Parker)</h1>

<img alt= “Spider-Girl (May Parker)”src=”http ://i .annihil .us/u/prod/marvel/i/mg/1/70/4c003adccbe4f

(http ://i .anni h i l .us/u /prod/mar vel/i /m g/1/70/4c003adccbe4f) “/>

<p>May \”Mayday\” Parker is the daughter of Spider-Man and Mary Jane Watson-Parker. Born with all her fatherï¿½s powers-and the same silly sense of humor-sheï¿½s grown up to become one of Earthï¿½s

most trusted heroes and a fitting tribute to her proud papa.</p>

<h2>Comics</h2>

<ul>

<li>Amazing Spider-Girl (2006)</li>

<li>Amazing Spider-Girl (2006) #1</li>

<li>Amazing Spider-Girl (2006) #2</li>

<li>Amazing Spider-Girl (2006) #3</li>

<li>Amazing Spider-Girl (2006) #4</li>

<li>Amazing Spider-Girl (2006) #5</li>

<li>Amazing Spider-Girl (2006) #6</li>

<li>Amazing Spider-Girl (2006) #7</li>

<li>Amazing Spider-Girl (2006) #8</li>

<li>Amazing Spider-Girl (2006) #9</li>

<li>Amazing Spider-Girl (2006) #10</li>

<li>Amazing Spider-Girl (2006) #11</li>

<li>Amazing Spider-Girl (2006) #12</li>

<li>Amazing Spider-Girl (2006) #13</li>

<li>Amazing Spider-Girl (2006) #14</li>

<li>Amazing Spider-Girl (2006) #15</li>

<li>Amazing Spider-Girl (2006) #16</li>

<li>Amazing Spider-Girl (2006) #17</li>

<li>Amazing Spider-Girl (2006) #18</li>     <li>Amazing Spider-Girl (2006) #19</li>

</ul>

</div>

If there is no character found for the given ID, make sure to give a response status code of 404 on the page, and render an HTML page with a paragraph class called error ; this paragraph should describe the error.

http://localhost:3000/public/site.css

This file should have 5 rulesets that apply to the / route, and 5 rulesets that apply to all of your pages. Rulesets may be shared across both pages; for example, if you styled a p tag, it would count as 1 of the 5 for both pages.

You may include more than 5 rulesets if you so desire.

References and Packages

Basic CSS info can easily be referenced in the MDN CSS tutorial (https://developer.mozilla.org /enUS/docs/Web/Guide/CSS/Getting _started) . Hints

You can use variables in your handlebars layout, that you pass to res.render. For example, in your layout you could have:

And in your route:

Which will render as:

Or, perhaps, the title tag.

Requirements
1. You must not submit your node_modules folder
2. You must remember to save your dependencies to your package.json folder
3. You must do basic error checking in each function
4. Check for arguments existing and of proper type.
5. Throw if anything is out of bounds (ie, trying to perform an incalculable math operation or accessing data that does not exist)
6. You MUST use async/await for all asynchronous operations.
7. You must remember to update your package.json file to set js as your starting script!
8. Your HTML must be valid (https://validator.w3.org /#validate_by _input) or you will lose points on the assignment.
9. Your HTML must make semantical sense; usage of tags for the purpose of simply changing the style of elements (such as i b f t t etc) will result in points being deducted; think in terms of
of elements (such as i , b , font , center , etc) will result in points being deducted; think in terms of content first, then style with your CSS.
1. You can be as creative as you’d like to fulfill front-end requirements; if an implementation is not explicitly stated, however you go about it is fine (provided the HTML is valid and semantical). Design is not a factor in this course.
2. All inputs must be properly labeled!
3. All previous requirements about the json author, start task, dependenices, etc. still apply
Your HTML must make semantical sense; usage of tags for the purpose of simply changing the style of elements (such as i b f t t etc) will result in points being deducted; think in terms of

of elements (such as i , b , font , center , etc) will result in points being deducted; think in terms of content first, then style with your CSS.

You can be as creative as you’d like to fulfill front-end requirements; if an implementation is not explicitly stated, however you go about it is fine (provided the HTML is valid and semantical). Design is not a factor in this course.
All inputs must be properly labeled!
All previous requirements about the json author, start task, dependenices, etc. still apply

[SOLVED] CS546- Lab 8: Template Time

If Helpful Share:

Description

Related products

CS546- Lab 10: Authentication and Middleware

CS546- Lab 9: Palindromes

CS546- Lab 11: AJAX

Related in this category

More in this category

CS546-Programming Assignment 1

CS546- Lab 10: Authentication and Middleware

CS546- Lab 9: Palindromes

CS546-Programming Assignment 2

CS546- Lab 5: JSON Routes

CS546- Lab 6: A Restaurant API