drteresavasquez

function formatTime(ms) {
    const totalSeconds = Math.floor(ms / 1000);
    const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
    const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
    const seconds = String(totalSeconds % 60).padStart(2, '0');
    return `${hours}:${minutes}:${seconds}`;
}

drteresavasquez

Usage Examples (SCSS)

.card {
  background-color: var(--surface);
  color: var(--text);
  border: $border-width $border-style var(--border);
  border-radius: $border-radius-md;
  padding: $spacing-md;
 box-shadow: $elevation-1;

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.

drteresavasquez

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:

drteresavasquez

'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';

drteresavasquez

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,

drteresavasquez

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

drteresavasquez

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

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

drteresavasquez

Get Started

Create a React App

• Use NextJS PREFERRED METHOD
• Use CRA

Once the app is created, run:

npx storybook@latest init

drteresavasquez

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);
  };