Git Product home page Git Product logo

react-sorting-hat's Introduction

React Sorting Hat - Stretch Assignment

Welcome to Hogwarts, the School of Whitchcraft and Wizardy. One of the tools that is used by students of Hogwarts on their first day entering the school is notoriously known as the Sorting Hat. Your goal throughout this stretch assignment is to build the Sorting Hat using ReactJS.

Project Set Up

  • cd into react-sorting-hat directory and run npm install to retrieve your dependancies.
  • run npm start to spin up your webpack development server.
  • Inside of ./react-sorting-hat/src create a directory called components and start to think about all of the components you'll need for this application.

Project description and requirements

  • As a student stepping into the great hall at Hogwarts should be greeted with a message and I should be able to click a button that will initiate the sorting process.

  • I should then be asked a sequence of 6 questions that will determine to which of the 4 Hogwarts Houses I should belong.

  • When sorted, I should receive a message about which house I now belong in, that will include a history of the house and some unique facts about what type of people belong in the house.

    • The message page should be decorated to follow the house colors and crest.
    • As a part of this message I should also be informed of any Famous Wizards that have come any gone through my house.
  • Use this guide to help craft your questions about the characteristics of each house.

  • In the event of a tie, simply randomize and select a house from the two options.

Stretch Problems

  • Redo this entire project using VueJS.
  • Look into Firebase for data persistence.
    • Use Firebase to build out a Login System so that as a user I can login to the app and have all messages be directed at my name.
    • All data tracked through the app should be stored in firebase.
  • Allow me (the user) the ability to share my hogwarts house decision to my social media platform of choice.

react-sorting-hat's People

Contributors

jasonsbarr avatar ladrillo avatar ryan-hamblin avatar

Forkers

bigproblems55

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.