Giter VIP home page Giter VIP logo

moody-kittens's Introduction

Moody Kittens

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.

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.

Requirements

Visualization

  • 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
  • Kittens are visible when the page reloads
  • A Kitten's mood must affect visually the apperance of the kitten

Functionality

  • 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 moods persist through page reloads

Step by Step Guide

  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

moody-kittens's People

Contributors

idmiller2020 avatar

Watchers

 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.