This challenge is designed to assess the HTML, CSS, and JavaScript skills you have gained so far.
There are 7 features that need to be created. Each completed feature (passes all the tests) will be worth 1 point.
A minium of 5 points must be attained in order to pass this assessment.
You may receive partial credit (0.5 points) for code that is close to passing the tests, but does not pass all the tests.
If you have built a feature that works as expected, but is failing the tests and you cannot figure out why for more than 10-20 minutes, please reach out to an instructor to help guide you.
-
Fork and clone this repository.
-
Navigate to the cloned repository's directory on your command line. Then, run the following command:
npm install
This will install the libraries needed to run the tests.
-
Open up the repository in VSCode. Follow the instructions below to complete the Lab.
-
There is a
main.js
file for you with some starter code. Unfortunately, at least one of the tests in Cypress has been reported asflakey
(works sometimes and not others with the correct implementation of the feature). This stater code should resolve the flakines. It is a non-optimal solution and a proper solution is being researched. However, until that solution is found, please use this work around. If you are not sure what to do with this starter code, please reach out to an instructor.
To run the tests, you can run the following command from the command line. You will need to be in the root directory of your local directory.
npm test
This will open the Cypress testing window, where you can click to run an individual suite of tests or all of the tests at once.
To submit the assessment, you should do the following:
- Create a pull request against the original repository.
- In your pull request description, add screenshots of the following:
- Your landing page, when a user first arrives.
- Your landing page, after choosing a dropdown menu.
- Your landing page, after submitting two reviews.
- Submit a link to your pull request on Canvas.
You will create an application using HTML, CSS, and JavaScript that accesses the Studio Ghibli API and allows users to review each movie that was made by the studio.
The API can be accessed via the link below.
You will only need to make one API call in your application to receive all movies. Look under "Endpoints" to find the URL you will need to access.
While it does not need to look exactly the same, it should include the following:
-
body
- The page's background should be the color
lavender
. - All non-input text should be of the font
monospace
.
- The page's background should be the color
-
header
-
img
: An image of the studio's logo should be in the header and should be the same height as the header. The image can be found in theimages/
folder -
h1
:Ghibli Review App
-
header
: takes up about 75% of the page's width - The
header
's background should beskyblue
-
-
main
-
section
-
h2
:Select a movie
-
select
id
titles
: starts with oneoption
(blank, no value), remainingoption
s will be populated with the movie titles from the API
-
-
section
-
h2
:Add a review
-
form
-
label
,for
=review
:Your review
-
input
,id
=review
: type text -
input
: type submit
-
-
-
section
-
h2
:Movie details
-
div
,id
=display-info
: starts empty, will be populated withh3
and twop
elements, when a movie is selected
-
-
section
-
h2
:People
-
ol
: starts empty, will be populated with-
li
as peoplenames
are added
-
button
,id
=show-people
, textShow People
-
-
section
,id
=reviews
-
h2
:Reviews
-
ul
: starts empty, will be populated withli
as reviews are added -
button
,id
=reset-reviews
, textReset Reviews
-
-
You can use this low-fidelity wire-frame to guide your HTML
The movie titles should be populated into option
elements from a call to the API inside the select menu.
option
elements should have a value
of the movie id
and the text should be the movie title
.
The first option should be blank, with no value
and no text (see first image).
This content should change each time the user choose a new option in the dropdown list.
When a movie is selected through one of the options from the dropdown list, the user should see:
An h3
with the movie's title appear in the display-info section of the page.
A p
with the movie's release year.
A p
with the description of the movie.
This content should change each time the user choose a new option in the dropdown list.
-
When the user enters their review into the text input and presses the "Submit Review" button, they should see:
- The review, inside of an
unordered
list ofli
elements, with the name of the movie in astrong
element and the text of the review afterwards. - The review text should be cleared from the text input.
- The review, inside of an
-
If the user selects a different dropdown option after making the review, all of the reviews should stay where they are.
-
If the user tries to make a review when no movie is selected, an alert saying
Please select a movie first
, should appear
Update your page so that when the screen size is small, the Reviews section of the page disappears.
-
#reviews
should have a display ofblock
if the viewport width is greater than 500px and a display ofnone
if the viewport is less than or equal to 500px.
A button with an id
of reset-reviews
, when clicked should empty the ul
where the reviews were being populated.
When the Show People
button is clicked, it should generate an ordered
list of people names associated with the movie.
Hint
Look at the /people
endpoint of the API.
You want to select the people who have the same movie id
as the selected movie
.
Make sure to commit often after specific features are complete. Use sensible commit messages.