Coder Social home page Coder Social logo

lisonallie / nyancat Goto Github PK

View Code? Open in Web Editor NEW
2.0 1.0 2.0 80 KB

Exercise in beginning JavaScript to recreate the famous Nyan Cat website with my own twist.

Home Page: https://lisonallie.github.io/NyanCat/

JavaScript 70.70% CSS 14.51% HTML 14.79%
nyancat raining cats kitty sparkle poptart nyan meow music javascript

nyancat's Introduction

Nyan Cat Recreation

Come click Nyan Cat!

What it is ๐Ÿฑ๐Ÿฑ๐Ÿฑ

I was assigned a project to recreate the classic Nyan Cat website. This was my first exercise in learning JavaScript.

Objective ๐Ÿž๐Ÿž๐Ÿž

The objective was to learn how to use different functions in JavaScript to achieve the desired outcome. The requirements were:

  1. Create a button.
  2. When you click the button, it should start raining Nyan Cats.
  3. Make the rain stop after 10 seconds.
  4. While it's raining Nyan Cats, the background should become the one from the original animation and all the other elements should disappear until it's done raining cats.
  5. Play the Nyan Cat theme song until it's done raining cats.

Bonus:

  1. Multiply the amount of nyan cats by a random amount.
  2. Randomize the speed of the falling nyan cats.
  3. Randomize the angle of the nyan cats.
  4. Randomize the starting position of the nyan cats.

Look & Layout ๐ŸŒ ๐ŸŒ ๐ŸŒ 

The look of the page is just as the original Nyan Cat looks. The current website is changed after so many years, so I provided a link to a youtube with the original animation. On my version, upon first load there is a lone button in the middle of the screen telling the user to Nyan!. I styled the button in light colors that look fun because it's inline with the theme. When the button is clicked, the Nyan Cat theme song begins playing for 15 seconds and a couple things happen:

  • Nyan Cat begins falling at randomized angles and speeds for 15 seconds.
  • The Nyan Cat theme song begins playing, and stops playing after 15 seconds.
  • The Nyan Cat original background appears and disappears after 15 seconds upon clicking the Nyan! button in the middle.
  • The Nyan! button in the middle diappears.

nyancat's People

Stargazers

 avatar  avatar

Watchers

 avatar

Forkers

pewpasta e1ruch

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.