Giter Club home page Giter Club logo

coding_challenge-23's Introduction

coding_challenge-23

Reverse Engineering Apple Airpods

This coding challenge is all about Reverse Engineering Apple's Website to Build Airpods Pro Animation. This month we are going to have fun with something that you may have encountered: You see something amazing on a website and you think to yourself "WOW How did they do that?". Apple recently launched AirPods Pro and it is one of the most visually beautiful page you will see. The coolest part is this:

Alt Text

What is the Challenge?

All you have to do is recreate this animation! But wait!??!!! How am I suppose to do that? Don't worry I will get you started by showing you how this animation is done and you can finish off the rest yourself. You can get as creative as possible:

What you need:

  1. Apple is using this library for the wave animation. Visit the "examples" section to see all the things you can do with it.
  2. You need to hide the play button and just have the wave play automatically in the background.
  3. Use the Developer Tools to inspect the website and see how other parts are working.
  4. Bonus if you want to add scrolling events like Apple does onthe website so the wave moves from left to right (there are lots of libraries online for you to do this).
  5. Show off to your friends.

Submissions:

At the end of the challenge, we will post everyone's custom animations page down below so you can see what others have done. In order to see your submission below, make sure you read the next section for the submission guidelines (In The Rules Are section)!

The Rules Are:

  1. You have until November 30th at 11:59pm EST to submit your solution (using Github. If you don't know how to do that, check out the lecture in the Git + Github section of the course). You will have to submit the link to the #coding-challenge Discord group with the following message: -challenge URL LINK TO YOUR ENTRY" . The bot will listen for the command and will reply with "thanks for your submission" if it succeeded.

  2. Use whatever tools you have as developers (google, friends, Discord, programming buddy etc...) but I will not be offering any help with this challenge. Just like a developer, you must solve a problem and build something that will be challenging. Nobody will hold your hand during the job so we want to experience that by figuring it all out on your own with your team.

One Last Thing!

Please note: As with all my challenges there is zero benefit or monetary gain I recieve from it. This is just my way of thanking my students and making sure that you are able to continue gaining valuable knowledge outside of just my videos. It would mean a lot to me if you are able to rate my course...5 star reviews make my day :)

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.