021224

README.md

@@ -1,6 +1,6 @@
 ## Personal Information:
 
-Full Name: Enter Your Full Name
+Full Name: Kausha Himanshu Trivedi
 
 ## Getting Started
 First, fork this repository and clone it to your local machine.
@@ -43,4 +43,4 @@ To learn more about React.js, take a look at the [React Documentation](https://l
 
 ## What to Submit?
 
-Submit all changes made to files in `src/pages/qcomps` in Canvas class activity for the day.
+Submit all changes made to files in `src/pages/qcomps` in Canvas class activity for the day.

src/pages/index.js

@@ -3,11 +3,19 @@
 // import { Inter } from 'next/font/google'
 import styles from '@/styles/Home.module.css'
 import Profile from './components/profile'
+import ProfileMistake from './qcomps/profile_mistake'
+import FirstComp from './qcomps/firstcomp';
+import Bio from './qcomps/bios';
+import TodoList from './qcomps/todos';
 
 export default function Home() {
   return (
     <div className={styles.main}>
+      <ProfileMistake />
         <Profile />
+        <FirstComp />
+        <Bio />
+        <TodoList />
     </div>
   )
 }

src/pages/qcomps/bios.js

@@ -1,5 +1,6 @@
 export default function Bio() {
   return (
+    <>
     <div class="intro">
       <h1>Welcome to my website!</h1>
     </div>
@@ -8,5 +9,6 @@ export default function Bio() {
       <br/><br/>
       <b>And <i>pictures</i></b> of people!
     </p>
+    </>
   );
 }

src/pages/qcomps/firstcomp.js

@@ -1 +1,16 @@
-function MyComp() {}
+import React from 'react';
+
+const 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>
+  );
+};
+
+export default FirstComp;

src/pages/qcomps/list_keys_id.js

@@ -1,24 +1,33 @@
-export const people = [{
-  id: 0,
-  name: 'Creola Katherine Johnson',
-  profession: 'mathematician',
-  accomplishment: 'spaceflight calculations',
-  imageId: 'szV5sdG'
-}, {
-  id: 1,
-  name: 'Mario José Molina-Pasquel Henríquez',
-  profession: 'chemist',
-  accomplishment: 'discovery of Arctic ozone hole',
-  imageId: 'YfeOqp2'
-}];
+export const people = [
+  {
+    id: 0,
+    name: 'Creola Katherine Johnson',
+    profession: 'mathematician',
+    accomplishment: 'spaceflight calculations',
+    imageId: 'szV5sdG'
+  },
+  {
+    id: 1,
+    name: 'Mario José Molina-Pasquel Henríquez',
+    profession: 'chemist',
+    accomplishment: 'discovery of Arctic ozone hole',
+    imageId: 'YfeOqp2'
+  }
+];
 
 function getImageUrl(imageId) {
-    return "https://i.imgur.com/" + imageId + "s.jpg"
+  return "https://i.imgur.com/" + imageId + "s.jpg";
 }
+
 export default function List() {
   const listItems = people.map(person =>
-    <li>
+    <li key={person.id}>
+      <img src={getImageUrl(person.imageId)} alt={person.name} />
+      <div>Name: {person.name}</div>
+      <div>Profession: {person.profession}</div>
+      <div>Accomplishment: {person.accomplishment}</div>
     </li>
   );
+
   return <ul>{listItems}</ul>;
-}
+}

src/pages/qcomps/profile_mistake.js

@@ -1,4 +1,5 @@
 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,27 +1,19 @@
 function Item({ name, isPacked }) {
-  if (isPacked) {
-    return <li className="item">{name} ✔</li>;
-  }
-  return <li className="item"> {name} </li>
+  return (
+    <li className="item">
+      {isPacked ? <del>{name} ✔</del> : name}
+    </li>
+  );
 }
 
 export default function PackingList() {
   return (
     <section>
       <h1>My Packing List</h1>
       <ul>
-        <Item
-          isPacked={false}
-          name="Laptop"
-        />
-        <Item
-          isPacked={true}
-          name="Chargers"
-        />
-        <Item
-          isPacked={true}
-          name="Socks"
-        />
+        <Item isPacked={false} name="Laptop" />
+        <Item isPacked={true} name="Chargers" />
+        <Item isPacked={true} name="Socks" />
       </ul>
     </section>
   );

src/pages/qcomps/recipes.js

@@ -1,22 +1,35 @@
-export const recipes = [{
-  id: 'greek-salad',
-  name: 'Greek Salad',
-  ingredients: new Set(['tomatoes', 'cucumber', 'onion', 'olives', 'feta'])
-}, {
-  id: 'hawaiian-pizza',
-  name: 'Hawaiian Pizza',
-  ingredients: new Set(['pizza crust', 'pizza sauce', 'mozzarella', 'ham', 'pineapple'])
-}, {
-  id: 'hummus',
-  name: 'Hummus',
-  ingredients: new Set(['chickpeas', 'olive oil', 'garlic cloves', 'lemon', 'tahini'])
-}];
+export const recipes = [
+  {
+    id: 'greek-salad',
+    name: 'Greek Salad',
+    ingredients: new Set(['tomatoes', 'cucumber', 'onion', 'olives', 'feta'])
+  },
+  {
+    id: 'hawaiian-pizza',
+    name: 'Hawaiian Pizza',
+    ingredients: new Set(['pizza crust', 'pizza sauce', 'mozzarella', 'ham', 'pineapple'])
+  },
+  {
+    id: 'hummus',
+    name: 'Hummus',
+    ingredients: new Set(['chickpeas', 'olive oil', 'garlic cloves', 'lemon', 'tahini'])
+  }
+];
 
 export default function RecipeList() {
   return (
     <div>
       <h1>Recipes</h1>
-      {}
+      {recipes.map(recipe => (
+        <div key={recipe.id}>
+          <h2>{recipe.name}</h2>
+          <ul>
+            {[...recipe.ingredients].map((ingredient, index) => (
+              <li key={index}>{ingredient}</li>
+            ))}
+          </ul>
+        </div>
+      ))}
     </div>
   );
-}
+}

src/pages/qcomps/todos.js

@@ -14,9 +14,13 @@ 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>
   );
 }
+
+
+
+