This is an optional project to prepare you for the phase 1 code challenge. You'll be building this project over the course of several days in addition to labs, readings, and lectures.
You can work alone or in small groups.
Fork and clone this repository. Open it in your IDE as well as your browser (for example code .
and open index.html
).
You'll be writing your code in the src/index.js
file however you can add any additional files as you see fit. Be sure to look at the index.html
file so you feel familiar with the initial HTML. You may edit index.html
and style.css
as you see fit.
In order to fetch the required information, you'll need to start your json-server
. First make sure that json-server
is installed. You can do this with npm install -g json-server
(you may have already done this for a lab in which case it's already installed). When you're ready, run json-server --watch db.json
in your terminal.
When fetching information you can use this endpoint:
http://localhost:3000/drinks
Later on you'll be asked to make a POST and a DELETE request. For the POST request you can use these options:
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: ???
}
You're building a website for a VHS rental store! They've provided you with the information you'll need in a db.json
file as well as some rudimentary styling and a basic index.html
. Your first tasks are this:
Firstly, delete the div
s and their contents with a class of vhs-card
. These are meant to be examples of what the final product might look like.
Make a fetch request to get all the VHS cassettes. For each VHS cassette, create a new element and display it in the .vhs-container
in a card like this:
<div class="vhs-card">
<h2>Title of Movie</h2>
<img src="movie image url" alt="title of movie" />
<p>Rental Price: rental price of movie</p>
</div>
Be sure to replace the appropriate text with the proper information! This includes the alt
text!
Feel free to add additional styling to this page such as a background image, make the banner more exciting, or make the movie card more interesting. I strongly suggest adding a flexbox so that cards will line up next to each other!
If a vhs rental doesn't have an image associated with it, show the vhs tape image instead. The img
tag you create might look something like this:
<img src='assets/vhs.jpg' alt='default image' />
Additionally, before adding the cards to the DOM, sort the array of rental videos alphabetically by title. Be sure to look up examples and documentation!
Add a new form to the HTML above the vhs-container
. The form should have inputs for the movie title, movie image url, and the price. For an additional challenge, make the price a select tag with options $
, $$
, and $$$
.
When the form is submitted, add the new VHS entry to the DOM. Additionally, create a POST request to your json-server
to persist the VHS tape so it will remain on refresh.
The form should be nicely styled. Additionally, go to google fonts and research how to add new font families to the project!
The form should not accept blank inputs (you shouldn't be able to create a movie with a blank title).
Additionally, create a DELETE button that removes it from both the front end DOM and the back end json-server
.