oct 26 class

README.md

@@ -1,8 +1,8 @@
 ## Personal Information:
 
-Full Name: Enter Your Full Name
+Full Name: Prabhleenkaur Ramindersingh Bindra
 
-Northeastern ID: Enter your Northeastern ID
+Northeastern ID: 002781738
 
 ## Getting Started
 First, fork this repository and clone it to your local machine.

src/pages/components/state.js

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { sculptureList } from '../../data/data.js';
 
 export default function Gallery() {
+    // useState is the hook - var or att is idx and initial val is 0 - setIdx update state
   const [index, setIndex] = useState(0);
 
   function handleClick() {

src/pages/index.js

@@ -2,12 +2,40 @@ import Head from 'next/head'
 import Image from 'next/image'
 import { Inter } from 'next/font/google'
 import styles from '@/styles/Home.module.css'
-import Profile from './components/profile.js'
+// import Profile from './components/profile.js'
+// import Gallery from "./components/gallery.js";
+// import Profile from './qcomps/profile_mistake.js'
+import Firstcomp from './qcomps/firstcomp.js'
+import Bios from './qcomps/bios.js';
+import Profile from './components/profile_props.js'
+import TodoList from "./qcomps/todos.js";
+import Gallery from './qcomps/state.js'
+import List from "./qcomps/list_keys_id.js";
+import RecipeList from "./qcomps/recipes.js";
+import MenuBar from "./qcomps/menuBar.js";
+import Counter from "./components/queueUpdates.js";
+import React from "react";
+import Form from "@/pages/components/snapshot2";
+import RequestTracker from "@/pages/qcomps/shoppingCart";
+import Scoreboard from "@/pages/qcomps/updObjectsForm";
 
 export default function Home() {
   return (
     <div className={styles.main}>
-        <Profile />
+        {/*<Gallery />*/}
+        {/*<Profile />*/}
+        {/*<Firstcomp />*/}
+        {/*<Bios />*/}
+        {/*<TodoList />*/}
+        {/*<Profile />*/}
+        {/*<Gallery />*/}
+        {/*<List />*/}
+        {/*<RecipeList />*/}
+        {/*<MenuBar />*/}
+        {/*<Counter />*/}
+        {/*<Form />*/}
+        {/*<RequestTracker />*/}
+        <Scoreboard />
     </div>
   )
 }

src/pages/qcomps/bios.js

@@ -1,12 +1,18 @@
 export default function Bio() {
   return (
-    <div class="intro">
-      <h1>Welcome to my website!</h1>
-    </div>
-    <p class="summary">
+      <div>
+        <div className="intro">
+          <h1>Welcome to my website!</h1>
+          <Code/>
+        </div>
+      </div>
+  );
+}
+
+  function Code() {
+    return (<p className="summary">
       You can find my thoughts here.
       <br/><br/>
       <b>And <i>pictures</i></b> of people!
-    </p>
-  );
-}
+    </p>)
+  }

src/pages/qcomps/firstcomp.js

@@ -0,0 +1,10 @@
+export default function Firstcomp() {
+    return (
+        <div>
+            <h1> My first component </h1>
+            <ol>
+                <li> Components: UI Building Block</li> <li> Defining a Component </li>
+                <li> Using a component </li>
+            </ol> </div>
+    )
+}

src/pages/qcomps/gallery_props.js

@@ -1,55 +1,59 @@
-export default function Gallery() {
+const baseUrl = 'https://i.imgur.com/';
+
+function Profile(props) {
   return (
-    <div>
-      <h1>Notable Scientists</h1>
-      <section className="profile">
-        <h2>Maria Skłodowska-Curie</h2>
-        <img
-          className="avatar"
-          src='https://i.imgur.com/szV5sdGs.jpg'
-          alt="Maria Skłodowska-Curie"
-          width={70}
-          height={70}
-        />
-        <ul>
-          <li>
-            <b>Profession: </b>
-            physicist and chemist
-          </li>
-          <li>
-            <b>Awards: 4 </b>
-            (Nobel Prize in Physics, Nobel Prize in Chemistry, Davy Medal, Matteucci Medal)
-          </li>
-          <li>
-            <b>Discovered: </b>
-            polonium (element)
-          </li>
-        </ul>
-      </section>
       <section className="profile">
-        <h2>Katsuko Saruhashi</h2>
+        <h2>{props.name}</h2>
         <img
-          className="avatar"
-          src='https://i.imgur.com/YfeOqp2s.jpg'
-          alt="Katsuko Saruhashi"
-          width={70}
-          height={70}
+            className="avatar"
+            src={baseUrl + props.imageID + 's.jpg'}
+            alt={props.name}
+            width={70}
+            height={70}
         />
         <ul>
           <li>
             <b>Profession: </b>
-            geochemist
+            {props.profession}
           </li>
           <li>
-            <b>Awards: 2 </b>
-            (Miyake Prize for geochemistry, Tanaka Prize)
+            <b>Awards: {props.awards.length} </b>
+            {props.awards.map((award, index) => (
+                <span key={index}>{award}</span>
+            ))}
           </li>
           <li>
             <b>Discovered: </b>
-            a method for measuring carbon dioxide in seawater
+            {props.discovered}
           </li>
         </ul>
       </section>
-    </div>
   );
 }
+
+export default function Gallery() {
+  return (
+      <div>
+        <h1>Notable Scientists</h1>
+        <Profile
+            name="Maria Skłodowska-Curie"
+            imageID=  'szV5sdG'
+            profession="physicist and chemist"
+            awards={[
+              "Nobel Prize in Physics",
+              "Nobel Prize in Chemistry",
+              "Davy Medal",
+              "Matteucci Medal"
+            ]}
+            discovered="polonium (element)"
+        />
+        <Profile
+            name="Katsuko Saruhashi"
+            imageID='YfeOqp2'
+            profession="geochemist"
+            awards={["Miyake Prize for geochemistry", "Tanaka Prize"]}
+            discovered="a method for measuring carbon dioxide in seawater"
+        />
+      </div>
+  );
+}

src/pages/qcomps/list_keys_id.js

@@ -17,7 +17,8 @@ function getImageUrl(imageId) {
 }
 export default function List() {
   const listItems = people.map(person =>
-    <li>
+    <li key = {person.imageId}>
+      {person.name};
     </li>
   );
   return <ul>{listItems}</ul>;

src/pages/qcomps/menuBar.js

@@ -1,10 +1,10 @@
 export default function MenuBar() {
   return (
     <div>
-      <AButton>
+      <AButton id='btn1' color="blue" size="16px">
         Button 1
       </AButton>
-      <AButton>
+      <AButton id='btn2' color="red" size="18px">
         Button 2
       </AButton>
     </div>

src/pages/qcomps/profile_mistake.js

@@ -1,4 +1,9 @@
 export default function profile() {
-    return
-        <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />;
+    return (
+        <img
+            src="https://i.imgur.com/jA8hHMpm.jpg"
+            alt="Katsuko Saruhashi"
+        />
+    )
+
 }

src/pages/qcomps/recipes.js

@@ -16,7 +16,18 @@ export default function RecipeList() {
   return (
     <div>
       <h1>Recipes</h1>
-      {}
+      {
+        recipes.map(recipe => (
+            <div key={recipe.id}>
+              <h2>{recipe.name}</h2>
+              <ul>
+                {Array.from(recipe.ingredients).map((ing, ind) => (
+                <li key={ind}>{ing}</li>
+                ))}
+              </ul>
+            </div>
+        ))
+      }
     </div>
   );
 }

src/pages/qcomps/shoppingCart.js

@@ -5,10 +5,10 @@ export default function RequestTracker() {
   const [completed, setCompleted] = useState(0);
 
   async function handleClick() {
-    setPending(pending + 1);
+    setPending(pending => pending + 1);
     await delay(3000);
-    setPending(pending - 1);
-    setCompleted(completed + 1);
+    setPending(pending => pending - 1);
+    setCompleted(completed => completed + 1);
   }
 
   return (

src/pages/qcomps/state.js

@@ -6,7 +6,8 @@ export default function Gallery() {
   const [showMore, setShowMore] = useState(false);
 
   function handleNextClick() {
-    setIndex(index + 1);
+      setIndex((index + 1) % sculptureList.length);
+      // setIndex(index + 1);
   }
 
   function handleMoreClick() {

src/pages/qcomps/todos.js

@@ -12,10 +12,10 @@ const person = {
 export default function TodoList() {
   return (
     <div style={person.theme}>
-      <h1>Person Name's Todos</h1>
+      <h1>{person.name}'s Todos</h1>
       <img className="avatar"
-      src="URL"
-      alt="Person's Name"
+      src= {baseUrl + person.imageId + 's.jpg'}
+      alt={person.name}
       />
     </div>
   );

src/pages/qcomps/updObjectsForm.js

@@ -8,7 +8,11 @@ export default function Scoreboard() {
   });
 
   function handlePlusClick() {
-    player.score++;
+    setPlayer({
+                ...player,
+                score: player.score+1,
+              });
+
   }
 
   function handleFirstNameChange(e) {