Git Product home page Git Product logo

youtube-clone's Introduction

Youtube Clone Homework

Description

For this homework you will finally be working with "live" data from an actual API - Youtube!

The current website in this repo is not fully functional and does not use live data. You will need to fix that so it works just like if you were searching on www.youtube.com!

Instructions

  1. Go to the YouTube Data API documentation and get an API key
  2. Read on their docs about how to search for videos
  3. Use Postman to test your API key and queries before you begin coding. Be sure that you can actually get data in Postman first!
  4. Read over the code in this repo and see how it works with the fake data provided
  5. Add comments to the code explaining how every part works to show that you know what is going on
  6. Copy and paste the below into a config.js file in your folder. Make sure it is ignored by git and loaded into your page correctly!
// your youtube API key will live here
// make sure this file is in your .gitignore file so it is not commited to GitHub for someone to steal!
// read about .gitignore files here: https://help.github.com/articles/ignoring-files/

window.API_KEY = 'your api key goes here';
  1. Make the search input works when you hit ENTER (get rid of the fake data!). You will need to load jQuery into the page to use $.ajax for requests (or try using the fetch API with promises)
  2. Make sure you handle any error cases! What happens if your internet goes down or Youtube is broken?
  3. Show the top 15 results on the homepage for the search query passed in
  4. Clicking on a video should show the "Video Page" with correct video and autoplay it. Look at how the renderVideoPage function works. How will you be able to pass the index of the correct video into it?
  5. The Video Page should also show the correct title, channel name and description
  6. Ignore any iframe embed error by Google. It is a bug in Chrome. “Error parsing header X-XSS-Protection”
  7. Make the logo and home button clickable and when clicked they should return the user to the homepage
  8. When returning to the homepage, the app should show the previous search results
  9. Make it so the search automatically happens as a user types, so they no longer need to hit enter. Research how to limit/throttle the number of AJAX calls to youtube so you don’t go over the API call rate limit and get blocked! You may want to write that functionality yourself, or import a library/function that can do it for you.
  10. BONUS: Show some kind of indicator that a search is working/loading with a spinner or “Loading…”
  11. BONUS: Add a button that will show the current trending (mostPopular) videos for the United States
  12. HARDCORE: Refactor the code for the homepage and videopage navigation to make use of HTML5's history.pushState, and no longer use the index in the renderVideoPage function and instead make us of the pageState object. Come up with your own url naming convention

youtube-clone's People

Contributors

craigrodrigues avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.