Lab 8 3/28/21, 10:58 PM
Page 1 of 7
Lab 8
Due Saturday by 11:59pm Points 100 Submitting a file upload
Available after Mar 22 at 12am
Submit Assignment
CS-546 Lab 8
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 the TV Maze API for a
keyword.
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 axios
(https://github.com/axios/axios) , which is a HTTP client for Node.js; you can install it with npm i
axios .
TV Maze API
You will be using two endpoints of the TV Maze API which is an API about TV shows for your Axios
calls. The search show endpoint where you pass the search term as a query string parameter:
http://api.tvmaze.com/search/shows?Search_Term_Here and then you'll get an individual show using
the endpoint http://api.tvmaze.com/shows/:id where :id is the ID of the show you are looking up.
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 shows 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/shows/{id} this page will show all the details of the show with the id
Lab 8 3/28/21, 10:58 PM
Page 2 of 7
http://localhost:3000/shows/{id} this page will show all the details of the show 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 "Show
Finder". You should have the title set as the
element of the HTML document and as an h1</div>
<div>in your document.</div>
<div>Your page should reference a CSS file, /public/site.css ; this file should have at least 5 rulesets that</div>
<div>apply to this page; these 5 rules can also apply to elements across all of your pages, or be unique to</div>
<div>this page.</div>
<div>You should have a main element, and inside of the main element have a p element with a brief (2-3</div>
<div>sentence description) of what your website does.</div>
<div>Also inside the main element, you will have a form ; this form will POST to /search . This form will</div>
<div>have an input and a label ; the label should properly reference the same id as the input . You</div>
<div>should also have a button with a type of submit that submits the form. The input in your form</div>
<div>should have a name of searchTerm .</div>
<div>POST http://localhost:3000/search</div>
<div>This route will read the searchTerm parameter and then make an axios call to the TV Maze endpoint</div>
<div>searching for that keyword. For example, if the user typed under in the input field, you would make</div>
<div>the axios call to: http://api.tvmaze.com/search/shows?q=under</div>
<div>(http://api.tvmaze.com/search/shows?q=girls)</div>
<div>This route will respond with a valid HTML document with the results returned from the API. The title of</div>
<div>the document should be "Shows Found". You should have the title set as the <title> element of the</div>
<div>HTML document and as an h1 in your document. In an h2 element, you will print the supplied</div>
<div>searchTerm .</div>
<div>Your page should reference a CSS file, /public/site.css ; this file should have at least 5 rulesets that</div>
<div>apply to this page; these 5 rules can also apply to elements on / , or be unique to this page.</div>
<div>You should have a main element, and inside of the main element have a ul tag that has a list of up</div>
<div>to 20 shows matching the searchTerm found in the request body in the following format (after</div>
<div>Lab 8 3/28/21, 10:58 PM</div>
<div> Page 3 of 7</div>
<div>to 20 shows matching the searchTerm found in the request body in the following format (after</div>
<div>searching under ). DO NOT SHOW MORE THAN 20 SHOWS.</div>
<div><ul></div>
<div><li></div>
<div><a href="/shows/5828">Over Under</a></div>
<div></li></div>
<div><li></div>
<div><a href="/shows/1">Under The Dome</a></div>
<div></li></div>
<div><li></div>
<div><a href="/shows/48087">Scottish Vets Down Under</a></div>
<div></li></div>
<div></ul></div>
<div>You must also provide an a tag that links back to your / route with the text Make another search .</div>
<div>If no matches are found, you will print the following HTML paragraph:</div>
<div><p class="not-found">We're sorry, but no results were found for {searchTerm}.</p></div>
<div>If the user does not input text into their form or enters just spaces into the input field, make</div>
<div>sure to give a response status code of 400 on the page, and render an HTML page with a</div>
<div>paragraph class called error error ; this paragraph should describe the error.</div>
<div>GET http://localhost:3000/shows/{id}</div>
<div>This route will query the TV Maze API using the the id parameter in the URL (for example:</div>
<div> http://api.tvmaze.com/shows/1 (http://api.tvmaze.com/shows/:id) ) and will respond with a valid</div>
<div>HTML document with some of the show details. The title of the document should be the name of the</div>
<div>show. You should have the title set as the <title> element of the HTML document. </div>
<div>Your page should reference a CSS file, /public/site.css ; this file should have at least 5 rulesets that</div>
<div>apply to this page; these 5 rules can also apply to elements on / , or be unique to this page.</div>
<div>You should have a main element, and inside of the main element, you will have a div tag that has</div>
<div>an h1 with the show name , an img which the src is set to the value read from image.medium in the</div>
<div>data which is a URL to an image for the show, and a dl (definition list) of the following properties of</div>
<div>the matching show: language , genres (the entire array in an ul ), rating.average , network.name ,</div>
<div>and summary in the HTML structure noted below.</div>
<div>Note: Some show summaries contain HTML tags (not all, but some), as shown in the example</div>
<div>Lab 8 3/28/21, 10:58 PM</div>
<div> Page 4 of 7</div>
<div>Note: Some show summaries contain HTML tags (not all, but some), as shown in the example</div>
<div>below. You should use a regex expression to strip any HTML tags out of the Summary before</div>
<div>displaying it on the page. </div>
<div>Matching Show Data Returned from API (We will not be using all the fields, just the ones noted</div>
<div>above):</div>
<div>{</div>
<div>"id": 1,</div>
<div>"url": "http://www.tvmaze.com/shows/1/under-the-dome http://www.tvmaze.com/shows/1/under-the-dome</div>
<div>(http://www.tvmaze.com/shows/1/under-the-dome) (http://www.tvmaze.com/shows/1/under-the-dome) ",</div>
<div>"name": "Under the Dome",</div>
<div>"type": "Scripted",</div>
<div>"language": "English",</div>
<div>"genres": [</div>
<div>"Drama",</div>
<div>"Science-Fiction",</div>
<div>"Thriller"</div>
<div> ],</div>
<div>"status": "Ended",</div>
<div>"runtime": 60,</div>
<div>"premiered": "2013-06-24",</div>
<div>"officialSite": "http://www.cbs.com/shows/under-the-dome/ http://www.cbs.com/shows/under-the-dome/</div>
<div>(http://www.cbs.com/shows/under-the-dome/) (http://www.cbs.com/shows/under-the-dome/) ",</div>
<div>"schedule": {</div>
<div>"time": "22:00",</div>
<div>"days": [</div>
<div>"Thursday"</div>
<div> ]</div>
<div> },</div>
<div>"rating": {</div>
<div>"average": 6.5</div>
<div> },</div>
<div>"weight": 97,</div>
<div>"network": {</div>
<div>"id": 2,</div>
<div>"name": "CBS",</div>
<div>"country": {</div>
<div>"name": "United States",</div>
<div>"code": "US",</div>
<div>"timezone": "America/New_York"</div>
<div> }</div>
<div> },</div>
<div>"webChannel": null,</div>
<div>"externals": {</div>
<div>"tvrage": 25988,</div>
<div>"thetvdb": 264492,</div>
<div>Lab 8 3/28/21, 10:58 PM</div>
<div> Page 5 of 7</div>
<div>"thetvdb": 264492,</div>
<div>"imdb": "tt1553656"</div>
<div> },</div>
<div>"image": {</div>
<div>"medium": "http://static.tvmaze.com/uploads/images/medium_portrait/81/202627.jpg http://static.tvmaze.com/uploads/images/medium_portrait/81/202627.jpg</div>
<div>(http://static.tvmaze.com/uploads/images/medium_portrait/81/202627.jpg) (http://static.tvmaze.com/uploads/images/medium_portrait/81/202627.jpg) ",</div>
<div>"original": "http://static.tvmaze.com/uploads/images/original_untouched/81/202627.j http://static.tvmaze.com/uploads/images/original_untouched/81/202627.j</div>
<div>pgpg (http://static.tvmaze.com/uploads/images/original_untouched/81/202627.jpg) (http://static.tvmaze.com/uploads/images/original_untouched/81/202627.jpg) "</div>
<div> },</div>
<div>"summary": "<p><b>Under the Dome</b> is the story of a small town that is suddenly and inexplic</div>
<div>ably sealed off from the rest of the world by an enormous transparent dome. The town's inhabitant</div>
<div>s must deal with surviving the post-apocalyptic conditions while searching for answers about the</div>
<div>dome, where it came from and if and when it will go away.</p>",</div>
<div>"updated": 1573667713,</div>
<div>"_links": {</div>
<div>"self": {</div>
<div>"href": "http://api.tvmaze.com/shows/1 http://api.tvmaze.com/shows/1 (http://api.tvmaze.com/shows/1) (http://api.tvmaze.com/shows/1) "</div>
<div> },</div>
<div>"previousepisode": {</div>
<div>"href": "http://api.tvmaze.com/episodes/185054 http://api.tvmaze.com/episodes/185054</div>
<div>(http://api.tvmaze.com/episodes/185054) (http://api.tvmaze.com/episodes/185054) "</div>
<div> }</div>
<div> }</div>
<div>}</div>
<div>HTML Format Printed for the show. This will go into your main element:</div>
<div><div> </div>
<div> <h1>Under The Dome</h1> </div>
<div> <img alt= "Under TheDome"src="http://static.tvmaze.com/uploads/images/medium_portrait/81/202627</div>
<div>.jpg"/> </div>
<div> <dl> </div>
<div> <dt>Language</dt> </div>
<div> <dd>English</dd> </div>
<div> <dt>Genres</dt> </div>
<div> <dd> </div>
<div> <ul> </div>
<div> <li>Drama</li> </div>
<div> <li>Science-Fiction</li> </div>
<div> <li>Thriller</li> </div>
<div> </ul> </div>
<div> </dd> </div>
<div> <dt>Average Rating</dt> </div>
<div> <dd>6.5</dd> </div>
<div> <dt>Network</dt> </div>
<div> <dd>CBS</dd> </div>
<div> <dt>Summary</dt> </div>
<div> <dd>Under the Dome is the story of a small town that is suddenly and inexplicably sealed off</div>
<div>Lab 8 3/28/21, 10:58 PM</div>
<div> Page 6 of 7</div>
<div> <dd>Under the Dome is the story of a small town that is suddenly and inexplicably sealed off</div>
<div>from the rest of the world by an enormous transparent dome. The town's inhabitants must deal with</div>
<div>surviving the post-apocalyptic conditions while searching for answers about the dome, where it ca</div>
<div>me from and if and when it will go away.</dd> </div>
<div> </dl> </div>
<div></div></div>
<div>If there is no show found for the given ID, make sure to give a response status code of 404 on</div>
<div>the page, and render an HTML page with a paragraph class called error error ; this paragraph</div>
<div>should describe the error. </div>
<div>http://localhost:3000/public/site.css</div>
<div>This file should have 5 rulesets that apply to the / route, and 5 rulesets that apply to all of your</div>
<div>pages. Rulesets may be shared across both pages; for example, if you styled a p tag, it would count</div>
<div>as 1 of the 5 for both pages.</div>
<div>You may include more than 5 rulesets if you so desire.</div>
<div>References and Packages</div>
<div>Basic CSS info can easily be referenced in the MDN CSS tutorial (https://developer.mozilla.org/enUS/docs/Web/Guide/CSS/Getting_started) .</div>
<div>Hints</div>
<div>You can use variables in your handlebars layout, that you pass to res.render. For example, in your</div>
<div>layout you could have:</div>
<div><meta name="keywords" content="{{keywords}}" /></div>
<div>And in your route:</div>
<div>res.render("someView", {keywords: "dogs coffee keto"});</div>
<div>Which will render as:</div>
<div><meta name="keywords" content="dogs coffee keto" /></div>
<div>Or, perhaps, the title tag.</div>
<div>Lab 8 3/28/21, 10:58 PM</div>
<div> Page 7 of 7</div>
<div>Requirements</div>
<div>1. You must not submit your node_modules folder</div>
<div>2. You must remember to save your dependencies to your package.json folder</div>
<div>3. You must do basic error checking in each function</div>
<div>4. Check for arguments existing and of proper type.</div>
<div>5. Throw if anything is out of bounds (ie, trying to perform an incalculable math operation or</div>
<div>accessing data that does not exist)</div>
<div>6. You MUST use async/await for all asynchronous operations.</div>
<div>7. You must remember to update your package.json file to set app.js as your starting script!</div>
<div>8. Your HTML must be valid (https://validator.w3.org/#validate_by_input) or you will lose points on the</div>
<div>assignment.</div>
<div>9. Your HTML must make semantical sense; usage of tags for the purpose of simply changing the</div>
<div>style of elements (such as i , b , font , center , etc) will result in points being deducted; think in</div>
<div>terms of content first, then style with your CSS.</div>
<div>10. You can be as creative as you'd like to fulfill front-end requirements; if an implementation is</div>
<div>not explicitly stated, however you go about it is fine (provided the HTML is valid and semantical).</div>
<div>Design is not a factor in this course.</div>
<div>11. All inputs must be properly labeled!</div>
<div>12. All previous requirements about the package.json author, start task, dependenices, etc. still apply</div></span>
</div>
</div>
<div class="width30bi divfr">
<div class="width99bi margintop20 divbdr divfl">
<div class="divtitle">
<div class="divfl divtitlefont" style="text-align: left">
联系我们</div>
<div class="divfr">
</div>
</div>
<div>
<ul>
<li class="divullititle heightline25px divtal">QQ：99515681 </li>
<li class="divullititle heightline25px divtal">邮箱：99515681@qq.com </li>
<li class="divullititle heightline25px divtal">工作时间：8:00-21:00 </li>
<li class="divullititle heightline25px divtal">微信：codinghelp</li>
</ul>
</div>
</div>
<div class="width99bi margintop20 divbdr divfl">
<div class="divtitle">
<div class="divfl divtitlefont" style="text-align: left">
热点文章</div>
<div class="divfr">
<img src="/image/j01.jpg" width="14" height="14" alt="程序代写更多图片" /></div>
<div class="divfr">
<a href="Lists-0-1.html" id="infotop2_amore" title="程序代写周排行更多">更多</a></div>
</div>
<div>
<ul>
<li class="divullititle heightline25px divtal"><a href="2022051012829477501.html"
title="代写 Lab 2: Threads" target="_blank"> 代写 Lab 2: Threads </a> <span class="colorlan"> 2022-05-10</span>
</li>
<li class="divullititle heightline25px divtal"><a href="2022051012829477181.html"
title="辅导Assessment 1. Present your Client with" target="_blank"> 辅导assessment 1. Present Your Client ... </a> <span class="colorlan"> 2022-05-10</span>
</li>
<li class="divullititle heightline25px divtal"><a href="2022051012829457341.html"
title="5CCE2SAS辅导、Python，Java程序辅导" target="_blank"> 5Cce2sas辅导、Python，Java程序辅导 </a> <span class="colorlan"> 2022-05-10</span>
</li>
<li class="divullititle heightline25px divtal"><a href="2022050911426853591.html"
title="代写Brae Webb编程" target="_blank"> 代写brae Webb编程 </a> <span class="colorlan"> 2022-05-09</span>
</li>
<li class="divullititle heightline25px divtal"><a href="2022050911426853431.html"
title="辅导CSCI 3110 Assignment 1 " target="_blank"> 辅导csci 3110 Assignment 1 </a> <span class="colorlan"> 2022-05-09</span>
</li>
<li class="divullititle heightline25px divtal"><a href="2022050911426847031.html"
title="MTH2222 Assignment 2代写" target="_blank"> Mth2222 Assignment 2代写 </a> <span class="colorlan"> 2022-05-09</span>
</li>
<li class="divullititle heightline25px divtal"><a href="2022050811043823751.html"
title="CSE3BDC Assignment 2022辅导" target="_blank"> Cse3bdc Assignment 2022辅导 </a> <span class="colorlan"> 2022-05-08</span>
</li>
<li class="divullititle heightline25px divtal"><a href="2022050811043813281.html"
title="辅导CIS 468、辅导Java，Python编程" target="_blank"> 辅导cis 468、辅导java，Python编程 </a> <span class="colorlan"> 2022-05-08</span>
</li>
<li class="divullititle heightline25px divtal"><a href="2022050710209599531.html"
title="COMP SCI 4094/4194/7094 Assignment 3 Distributed Databases and Data Mining" target="_blank"> Comp Sci 4094/4194/7094 Assignment 3 D... </a> <span class="colorlan"> 2022-05-07</span>
</li>
<li class="divullititle heightline25px divtal"><a href="2022050710208441091.html"
title="CS 178: Machine Learning & Data Mining Homework 2" target="_blank"> Cs 178: Machine Learning & Data Mining... </a> <span class="colorlan"> 2022-05-07</span>
</li>
<li class="divullititle heightline25px divtal"><a href="2022050710207457181.html"
title=" DATA7703 Assignment 4" target="_blank"> Data7703 Assignment 4 </a> <span class="colorlan"> 2022-05-07</span>
</li>
<li class="divullititle heightline25px divtal"><a href="2022042512716964211.html"
title="讲解Assignment 2: Databases" target="_blank"> 讲解assignment 2: Databases </a> <span class="colorlan"> 2022-04-25</span>
</li>
<li class="divullititle heightline25px divtal"><a href="2022042512716963901.html"
title="辅导AIT681 Static analysis" target="_blank"> 辅导ait681 Static Analysis </a> <span class="colorlan"> 2022-04-25</span>
</li>
<li class="divullititle heightline25px divtal"><a href="2022042512716963281.html"
title="CSE121 & CSE121L 编程辅导、辅导c++程序语言" target="_blank"> Cse121 & Cse121l 编程辅导、辅导c++程序语言 </a> <span class="colorlan"> 2022-04-25</span>
</li>
<li class="divullititle heightline25px divtal"><a href="2022042512716962811.html"
title="辅导ITI1120 bject-Oriented Programming" target="_blank"> 辅导iti1120 Bject-Oriented Programming </a> <span class="colorlan"> 2022-04-25</span>
</li>
<li class="divullititle heightline25px divtal"><a href="2022042512716956091.html"
title="CMT304语言辅导、辅导C++，Python编程" target="_blank"> Cmt304语言辅导、辅导c++，Python编程 </a> <span class="colorlan"> 2022-04-25</span>
</li>
<li class="divullititle heightline25px divtal"><a href="2022042411828060151.html"
title="辅导COMP/ENGN4528 Computer Vision " target="_blank"> 辅导comp/Engn4528 Computer Vision </a> <span class="colorlan"> 2022-04-24</span>
</li>
<li class="divullititle heightline25px divtal"><a href="2022042411828052651.html"
title="辅导FIN 2200 Bloomberg Investment Project" target="_blank"> 辅导fin 2200 Bloomberg Investment Proj... </a> <span class="colorlan"> 2022-04-24</span>
</li>
<li class="divullititle heightline25px divtal"><a href="2022042310977130461.html"
title="辅导BISM 7255 UML ASSIGNMENT" target="_blank"> 辅导bism 7255 Uml Assignment </a> <span class="colorlan"> 2022-04-23</span>
</li>
<li class="divullititle heightline25px divtal"><a href="2022042310977130001.html"
title="讲解COMP202 Programming Assignment" target="_blank"> 讲解comp202 Programming Assignment </a> <span class="colorlan"> 2022-04-23</span>
</li>
</ul>
</div>
</div>
<br />
</div>
<div class="divfloatclear">
</div>
<div class="bottomdiv">
<div class="width1000px divmargin0auto paddingtop20">
<div class="height30px divtal">
<a href="#" title="代写程序联系我们">联系我们</a> - QQ: 99515681 微信：codinghelp
</div>
<div class="height30px divtal">
© 2021 <a href="#" target="_blank" title="程序代写网技术分享">www.7daixie.com</a>
<span style="display:none">
</span>
</div>
<div class="divtal">
<span class="colorlan">程序辅导网！</span>
</div>
<div class="paddingtop20">
</div>
</div>
</div>
</div>
</form>
<style type="text/css">
.keifu
{
position: fixed;
top: 30%;
right: 0;
width: 151px;
_position: absolute;
_top: expressiondocument.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.bottom,10)||0)-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
z-index: 100;
}
</style>
<script src="http://www.asgnhelp.com/js/rightfloat.js"></script>
<div class="keifu">
</div>
<script language="Javascript">
document.oncontextmenu=new Function("event.returnValue=false");
document.onselectstart=new Function("event.returnValue=false");
</script>
</body>
</html>