Qcomps fixes

README.md

@@ -1,6 +1,6 @@
 ## Personal Information:
 
-Full Name: Enter Your Full Name
+Full Name: Ankur Haritosh
 
 ## 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/qcomps/arrObj.js

@@ -1,73 +1,57 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
-let nextId = 3;
 const initialList = [
-  { id: 0, title: 'Big Bellies', seen: false },
-  { id: 1, title: 'Lunar Landscape', seen: false },
-  { id: 2, title: 'Terracotta Army', seen: true },
+    { id: 0, title: 'Big Bellies', seen: false },
+    { id: 1, title: 'Lunar Landscape', seen: false },
+    { id: 2, title: 'Terracotta Army', seen: true },
 ];
 
 export default function BucketList() {
-  const [myList, setMyList] = useState(initialList);
-  const [yourList, setYourList] = useState(
-    initialList
-  );
+    const [myList, setMyList] = useState(initialList);
+    const [yourList, setYourList] = useState(initialList);
 
-  function handleToggleMyList(artworkId, nextSeen) {
-    const tmpList = myList.map(e => {
-        if (e.id === artworkId) {
-            e.seen = nextSeen
-        }
-        return e
-    });
-    setMyList(tmpList);
-  }
+    function handleToggleMyList(artworkId, nextSeen) {
+        const updatedList = myList.map(item =>
+            item.id === artworkId ? { ...item, seen: nextSeen } : item
+        );
+        setMyList(updatedList);
+    }
 
-  function handleToggleYourList(artworkId, nextSeen) {
-    const tmpList = yourList.map(e => {
-        if (e.id === artworkId) {
-            e.seen = nextSeen
-        }
-        return e
-    });
-    setYourList(tmpList);
-  }
+    function handleToggleYourList(artworkId, nextSeen) {
+        const updatedList = yourList.map(item =>
+            item.id === artworkId ? { ...item, seen: nextSeen } : item
+        );
+        setYourList(updatedList);
+    }
 
-  return (
-    <>
-      <h1>Art Bucket List</h1>
-      <h2>My list of art to see:</h2>
-      <ItemList
-        artworks={myList}
-        onToggle={handleToggleMyList} />
-      <h2>Your list of art to see:</h2>
-      <ItemList
-        artworks={yourList}
-        onToggle={handleToggleYourList} />
-    </>
-  );
+    return (
+        <>
+            <h1>Art Bucket List</h1>
+            <h2>My list of art to see:</h2>
+            <ItemList artworks={myList} onToggle={handleToggleMyList} />
+            <h2>Your list of art to see:</h2>
+            <ItemList artworks={yourList} onToggle={handleToggleYourList} />
+        </>
+    );
 }
 
 function ItemList({ artworks, onToggle }) {
-  return (
-    <ul>
-      {artworks.map(artwork => (
-        <li key={artwork.id}>
-          <label>
-            <input
-              type="checkbox"
-              checked={artwork.seen}
-              onChange={e => {
-                onToggle(
-                  artwork.id,
-                  e.target.checked
-                );
-              }}
-            />
-            {artwork.title}
-          </label>
-        </li>
-      ))}
-    </ul>
-  );
+    return (
+        <ul>
+            {artworks.map(artwork => (
+                <li key={artwork.id}>
+                    <label>
+                        <input
+                            type="checkbox"
+                            checked={artwork.seen}
+                            onChange={e => {
+                                onToggle(artwork.id, e.target.checked);
+                            }}
+                        />
+                        {artwork.title}
+                    </label>
+                </li>
+            ))}
+        </ul>
+    );
 }

src/pages/qcomps/artistsRemoveArr.js

@@ -1,31 +1,33 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 let initialArtists = [
-  { id: 0, name: 'Marta Colvin Andrade' },
-  { id: 1, name: 'Lamidi Olonade Fakeye'},
-  { id: 2, name: 'Louise Nevelson'},
+    { id: 0, name: 'Marta Colvin Andrade' },
+    { id: 1, name: 'Lamidi Olonade Fakeye'},
+    { id: 2, name: 'Louise Nevelson'},
 ];
 
 export default function List() {
-  const [artists, setArtists] = useState(
-    initialArtists
-  );
+    const [artists, setArtists] = useState(initialArtists);
 
-  return (
-    <>
-      <h1>Inspiring sculptors:</h1>
-      <ul>
-        {artists.map(artist => (
-          <li key={artist.id}>
-            {artist.name}{' '}
-            <button onClick={() => {
-              artists.splice(artist.id, 1)
-            }}>
-              Delete
-            </button>
-          </li>
-        ))}
-      </ul>
-    </>
-  );
+    const handleDeleteArtist = (artistId) => {
+        // Create a new array with the artist removed
+        const updatedArtists = artists.filter(artist => artist.id !== artistId);
+        setArtists(updatedArtists);
+    };
+
+    return (
+        <>
+            <h1>Inspiring sculptors:</h1>
+            <ul>
+                {artists.map(artist => (
+                    <li key={artist.id}>
+                        {artist.name}{' '}
+                        <button onClick={() => handleDeleteArtist(artist.id)}>
+                            Delete
+                        </button>
+                    </li>
+                ))}
+            </ul>
+        </>
+    );
 }

src/pages/qcomps/bios.js

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

src/pages/qcomps/firstcomp.js

@@ -1 +1,12 @@
-function MyComp() {}
+import React from 'react';
+
+function MyComp() {
+    return (
+        <div>
+            <h1>Hello from MyComp!</h1>
+            <p>This is a simple functional component.</p>
+        </div>
+    );
+}
+
+export default MyComp;

src/pages/qcomps/gallery_props.js

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

src/pages/qcomps/list_keys_id.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export const people = [{
   id: 0,
   name: 'Creola Katherine Johnson',
@@ -13,12 +15,25 @@ export const people = [{
 }];
 
 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>
-  );
+  const listItems = people.map(person => (
+      <li key={person.id}>
+        <img
+            src={getImageUrl(person.imageId)}
+            alt={person.name}
+            width={70}
+            height={70}
+        />
+        <div>
+          <h2>{person.name}</h2>
+          <p><b>Profession:</b> {person.profession}</p>
+          <p><b>Accomplishment:</b> {person.accomplishment}</p>
+        </div>
+      </li>
+  ));
+
   return <ul>{listItems}</ul>;
-}
+}