thomf / moody-kittens

Everyone on the internet should have a experience the joys of owning a cat!

Goals

In this application you will build out a fun application that allows users the joys of owning a cat. This app is intended to ensure you as a student have learned the fundamental concepts around web development successfully graduating you out of the beginners bracket.

Students that successfully build this application and meet all of the requirements will recieve a $500 discount from their tuition when they join the CodeWorks Immersive Fullstack course.

The Setup

The basic design and layout for this app has been mocked out and the names of the JavaScript functions have all been created. As the developer you will need to work across HTML, CSS and JavaScript to complete the requirements. In the code you will see several comments intended to be used as help and guidelines on what needs to be accomplished. Once you have achieved the requirements of the app use GitHub to host the page live.

Build Suggestions

1. Create a form used to add a Kitten
2. Handle the form submission

• Prevent the page from reloading when submitting the form
• Pull the form data to get a new kitten and give that kitten an id
• Add the new kitten to the kittens array
• Reset the form
• Save the kittens list
• Draw the kittens list

1. Handle Page Refresh

• Load the kittens list
• Draw the kittens list

Requirements:

• Users must have a form where they enter in at minimum the name of a kitten
• A Kitten's name and mood must be visible for the user
• A custom Google Font must be added
• A Kitten's mood must affect visually the appearance of the kitten
• Add Kitten form clears when submitted
• Add Kitten form submission does not reload the page
• Kittens are stored in local storage
• Kittens can be deleted
• Kittens have at least two buttons that affect the kitten's mood in different ways
• Kitten's and their mood persist through page reloads
• Kitten's with the same name as an already present kitten cannot be added
• Kittens are visible when the page reloads