Skip to content

Latest commit

 

History

History
97 lines (64 loc) · 3.31 KB

100.md

File metadata and controls

97 lines (64 loc) · 3.31 KB
Raw

Level 100 - Week 1 - Front End

By the end of this level you will have a React website that

  • Fulfils all of the requirements in the ReadMe
  • Uses static data for the website

Project

You will find an empty project in the client directory for you to work in.

To run the project you should first run these commands

cd client
npm install

then you can launch the website with

npm run start

Static Data

By static data, we mean that we will use a javascript variable to hold the data that we would expect to get from the API.

You can find an example of this data in exampleresponse.json at the root of this repository.

Design

You are welcome to use Bootstrap or any other design framework to help you build this app.

Required Features

  1. Videos should be loaded from a local javascript variable containing the data included in exampleresponse.json
  2. For each video, display a React component that contains
    • The videos title
    • An embedded video
    • The number of votes the video has
    • A button that when clicked removes the video
  3. On each video submission there should be two buttons
    • "Up Vote" - This increases the vote score when clicked
    • "Down Vote" - This decreases the vote score when clicked
  4. On the page there must be another React component that will add a Video.
    • It should include fields to add a
      • Title
      • Url
    • When a button is clicked the video should be added to the list
  5. Your website must follow accessibility guidelines (see below for more details)

Sample Solution

Here is an example solution of the Front End:

https://vid-rec2.netlify.app/

Note: You can design the website to look however you like.

Accessible Guidelines

  1. Run a Lighthouse test on your prototype in Chrome
  2. Follow the suggestions to fix the accessibility errors until your score is green. Save your result as HTML and include it in your Pull Request to show your work.
  3. Add a title to your iframe and make the value the title of the video
  4. Add a focus state with CSS to highlight what control is active
  5. Tab through your page and make sure you can click all the controls without using a mouse (edited)

Embedding Videos from YouTube

Instructions about how to embed a YouTube video can be found here

https://support.google.com/youtube/answer/171780?hl=en

You can embed videos from YouTube by using a HTML feature called iframes.

<iframe width="560" height="315" src="https://www.youtube.com/embed/{VIDEO_ID_GOES_HERE}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Place that HTML snippet in a React component and replace "VIDEO_ID_GOES_HERE" with the ID of the video you want to display to embed a video.

The ID of a video can be found by looking at the URL of the video. For example, for the video

https://www.youtube.com/watch?v=FUeyrEN14Rk

The ID would be

FUeyrEN14Rk

Before you commit your changes

Read this article on .gitignore. Use .gitignore to ensure you do not commit any node_modules directories to your repository.