https://github.com/Lisonallie/NyanCat

Exercise in beginning JavaScript to recreate the famous Nyan Cat website with my own twist.
https://github.com/Lisonallie/NyanCat

cats css exercise fly html javascript kitty learning meow music nyan nyancat poptart raining space sparkle

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/Lisonallie/NyanCat
• Owner: Lisonallie
• Created: 2019-05-27T14:15:45.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-07-26T11:46:36.000Z (about 5 years ago)
• Last Synced: 2024-04-11T05:19:47.559Z (5 months ago)
• Topics: cats, css, exercise, fly, html, javascript, kitty, learning, meow, music, nyan, nyancat, poptart, raining, space, sparkle
• Language: JavaScript
• Homepage: https://lisonallie.github.io/NyanCat/
• Size: 78.1 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### Nyan Cat Recreation

[Come click Nyan Cat!](https://lisonallie.github.io/NyanCat/)

#### 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](https://www.youtube.com/watch?v=QH2-TGUlwu4) 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.