Class activities 2/16/24

README.md

@@ -1,6 +1,6 @@
 ## Personal Information:
 
-Full Name: Enter Your Full Name
+Full Name: Andy Yu
 
 ## Getting Started
 First, fork this repository and clone it to your local machine.

src/pages/qcomps/bios.js

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

src/pages/qcomps/firstcomp.js

@@ -1 +1,12 @@
-function MyComp() {}
+export default function MyComp() {
+    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,16 +1,35 @@
+function Profile({scientist, size=100}) {
+  return (
+    <section className="profile">
+      <h2>{scientist.name}</h2>
+      <img
+        className="avatar"
+        src={'https://i.imgur.com/' + person.imageId + 's.jpg'}
+        alt={person.name}
+        width={size}
+        height={size}
+      />
+      <ul>
+        <li>
+          <b>Profession: </b>
+
+        </li>
+      </ul>
+    </section>
+  )
+}
+
+// scientist object to store profession, awards, etc. 
+
 export default function Gallery() {
   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}
-        />
+        <Avatar
+          person={{name: 'Maria Skłodowska-Curie', imageId: 'szV5sdG'}}
+          size={70} />
         <ul>
           <li>
             <b>Profession: </b>

src/pages/qcomps/list_keys_id.js

@@ -18,6 +18,7 @@ function getImageUrl(imageId) {
 export default function List() {
   const listItems = people.map(person =>
     <li>
+      <img src={getImageUrl(person.imageId)}></img>
     </li>
   );
   return <ul>{listItems}</ul>;

src/pages/qcomps/profile_mistake.js

@@ -1,4 +1,7 @@
 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/props_item.js

@@ -1,6 +1,6 @@
 function Item({ name, isPacked }) {
   if (isPacked) {
-    return <li className="item">{name} ✔</li>;
+    return <li className="item"><del>{name}</del> </li>;
   }
   return <li className="item"> {name} </li>
 }

src/pages/qcomps/recipes.js

@@ -16,7 +16,15 @@ 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(ingredient) =>
+          <li key={ingredient}>
+            {ingredient}
+          </li>}}
+        )}
     </div>
   );
 }

src/pages/qcomps/state.js

@@ -6,7 +6,11 @@ export default function Gallery() {
   const [showMore, setShowMore] = useState(false);
 
   function handleNextClick() {
-    setIndex(index + 1);
+    if (index < sculptureList.length - 1) {
+      setIndex(index + 1);
+    } else {
+      setIndex(0);
+    }
   }
 
   function handleMoreClick() {

src/pages/qcomps/stuckForm.js

@@ -1,20 +1,20 @@
 import { useState } from 'react';
 
 export default function Form() {
-  let firstName = '';
-  let lastName = '';
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
 
   function handleFirstNameChange(e) {
-    firstName = e.target.value;
+    setFirstName(e.target.value);
   }
 
   function handleLastNameChange(e) {
-    lastName = e.target.value;
+    setLastName(e.target.value);
   }
 
   function handleReset() {
-    firstName = '';
-    lastName = '';
+    setFirstName('');
+    setLastName('');
   }
 
   return (

src/pages/qcomps/thankYouCrash.js

@@ -2,11 +2,13 @@ import { useState } from 'react';
 
 export default function FeedbackForm() {
   const [isSent, setIsSent] = useState(false);
+  const [message, setMessage] = useState('');
+
   if (isSent) {
     return <h1>Thank you!</h1>;
   } else {
     // eslint-disable-next-line
-    const [message, setMessage] = useState('');
+    // const [message, setMessage] = useState('');
     return (
       <form onSubmit={e => {
         e.preventDefault();

src/pages/qcomps/todos.js

@@ -14,8 +14,8 @@ export default function TodoList() {
     <div style={person.theme}>
       <h1>Person Name's Todos</h1>
       <img className="avatar"
-      src="baseURL + imageID + imageSize + .jpg"
-      alt="Person's Name"
+      src={baseUrl + person.imageId + person.imageSize + '.jpg'} 
+      alt={person.name}
       />
     </div>
   );