Dr. Teresa Vasquez drteresavasquez

Sorting Hat

OVERVIEW:

The purpose of the application is to assign a person to one of the four Houses in Harry Potter. Once the user's name is submitted, a card appears with the House name, color and values.

DESCRIPTION OF USER:

The ideal user for this app is someone looking to randomly assign a group of people into teams.
This app prevents any biases in team assignments.
The user can recreate new teams as many times as they need.

Team Roster

For this project you will be building a team roster. Pick any kind of team you want (ie sports, educational, club, choir, etc). Theme your project based on the type of team.

Requirements

Take some time to plan your project and track how the data will flow. It is expected that you will complete this assignment by the due date, so plan accordingly.

Here is the ERD for this project:

Create your models
- This is how you define the data stored in the database and how that data is saved
Create your forms (using ModelForm: https://docs.djangoproject.com/en/4.2/topics/forms/modelforms)
Created view
- This makes the data (aka: context) available to the html template
Create the template that interpolates the data from the view
- This renders the form
Create a URL that serves the view to users
- EXAMPLE:

Get Started

Create a React App

Use NextJS PREFERRED METHOD
Use CRA

Once the app is created, run:

npx storybook@latest init

	'use client'; // MUST have for

	import Link from 'next/link';
	import React, { useState } from 'react';
	import { Nav, Navbar} from 'react-bootstrap';

	import { AiFillEye } from 'react-icons/ai';
	import { BsPlayBtnFill, BsInfoCircleFill } from 'react-icons/bs';
	import { IoPeopleCircleOutline } from 'react-icons/io5';
	import { LuHelpingHand } from 'react-icons/lu';

	document.querySelctor('form').addEventListener('submit', (e) => {
	e.preventDefault(); // this prevents the form from reloading on submit
	console.log("submitted")

	// 1. grab the value from the form
	const name = document.querySelector("#name").value;
	// 2. create a new object with it
	const newObj = {
	name,
	complete: false,

	* {
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
	}

	html,
	body {
	margin: 0;
	padding: 0;

	import React, { useState } from 'react';
	import PropTypes from 'prop-types';

	export default function Counter({ title }) {
	const [value, setValue] = useState(0);

	const handleClick = () => {
	setValue((prevState) => prevState + 1);
	};

	{
	"formatVersion": 3,
	"category": "Programming",
	"type": "single",
	"joke": "",
	"flags": {
	"nsfw": false,
	"religious": false,
	"political": false,
	"racist": false,