From e1b3e9fc40153bcd4e4a56a367b1435e87908194 Mon Sep 17 00:00:00 2001 From: Ankur Haritosh <30547888+ankurharitosh@users.noreply.github.com> Date: Tue, 20 Feb 2024 23:48:41 -0500 Subject: [PATCH 01/23] Update arrObj.js --- src/pages/qcomps/arrObj.js | 106 ++++++++++++++++--------------------- 1 file changed, 45 insertions(+), 61 deletions(-) diff --git a/src/pages/qcomps/arrObj.js b/src/pages/qcomps/arrObj.js index 68d5e9c5..19efde7b 100644 --- a/src/pages/qcomps/arrObj.js +++ b/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 ( - <> -

Art Bucket List

-

My list of art to see:

- -

Your list of art to see:

- - - ); + return ( + <> +

Art Bucket List

+

My list of art to see:

+ +

Your list of art to see:

+ + + ); } function ItemList({ artworks, onToggle }) { - return ( -
    - {artworks.map(artwork => ( -
  • - -
    • - ))} -
- ); + return ( +
    + {artworks.map(artwork => ( +
  • + +
    • + ))} +
+ ); } From 33a3278a9e0c7fd8d0ea6bae9f5395855717da50 Mon Sep 17 00:00:00 2001 From: Ankur Haritosh <30547888+ankurharitosh@users.noreply.github.com> Date: Tue, 20 Feb 2024 23:49:46 -0500 Subject: [PATCH 02/23] Update artistsRemoveArr.js --- src/pages/qcomps/artistsRemoveArr.js | 50 +++++++++++++++------------- 1 file changed, 26 insertions(+), 24 deletions(-) diff --git a/src/pages/qcomps/artistsRemoveArr.js b/src/pages/qcomps/artistsRemoveArr.js index 5c4709f5..0f48b5bd 100644 --- a/src/pages/qcomps/artistsRemoveArr.js +++ b/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 ( - <> -

Inspiring sculptors:

-
    - {artists.map(artist => ( -
  • - {artist.name}{' '} - -
    • - ))} -
- - ); + const handleDeleteArtist = (artistId) => { + // Create a new array with the artist removed + const updatedArtists = artists.filter(artist => artist.id !== artistId); + setArtists(updatedArtists); + }; + + return ( + <> +

Inspiring sculptors:

+
    + {artists.map(artist => ( +
  • + {artist.name}{' '} + +
    • + ))} +
+ + ); } From e7894f50a5ba357058840bdc18d4791f0bd6c5ea Mon Sep 17 00:00:00 2001 From: Ankur Haritosh <30547888+ankurharitosh@users.noreply.github.com> Date: Tue, 20 Feb 2024 23:50:38 -0500 Subject: [PATCH 03/23] Update bios.js --- src/pages/qcomps/bios.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/pages/qcomps/bios.js b/src/pages/qcomps/bios.js index cc9350fd..e1bfa649 100644 --- a/src/pages/qcomps/bios.js +++ b/src/pages/qcomps/bios.js @@ -1,12 +1,14 @@ +import React from 'react'; + export default function Bio() { return ( -
-

Welcome to my website!

-
-

- You can find my thoughts here. -

- And pictures of people! -

+
+

Welcome to my website!

+

+ You can find my thoughts here. +

+ And pictures of people! +

+
); -} \ No newline at end of file +} From 4207368e46399fde17e5b59e008eb2f5e76e00d1 Mon Sep 17 00:00:00 2001 From: Ankur Haritosh <30547888+ankurharitosh@users.noreply.github.com> Date: Tue, 20 Feb 2024 23:50:54 -0500 Subject: [PATCH 04/23] Update firstcomp.js --- src/pages/qcomps/firstcomp.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/pages/qcomps/firstcomp.js b/src/pages/qcomps/firstcomp.js index 9cce715e..bc77fe5a 100644 --- a/src/pages/qcomps/firstcomp.js +++ b/src/pages/qcomps/firstcomp.js @@ -1 +1,12 @@ -function MyComp() {} \ No newline at end of file +import React from 'react'; + +function MyComp() { + return ( +
+

Hello from MyComp!

+

This is a simple functional component.

+
+ ); +} + +export default MyComp; From 8012c9c534abd5e92a1cea8356f9f01c446ce1a5 Mon Sep 17 00:00:00 2001 From: Ankur Haritosh <30547888+ankurharitosh@users.noreply.github.com> Date: Tue, 20 Feb 2024 23:51:10 -0500 Subject: [PATCH 05/23] Update gallery_props.js --- src/pages/qcomps/gallery_props.js | 79 ++++++++++++++++--------------- 1 file changed, 41 insertions(+), 38 deletions(-) diff --git a/src/pages/qcomps/gallery_props.js b/src/pages/qcomps/gallery_props.js index fc118123..c62bbcf4 100644 --- a/src/pages/qcomps/gallery_props.js +++ b/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 ( -
-

Notable Scientists

-

Maria Skłodowska-Curie

+

{scientist.name}

Maria Skłodowska-Curie
  • Profession: - physicist and chemist + {scientist.profession}
  • - Awards: 4 - (Nobel Prize in Physics, Nobel Prize in Chemistry, Davy Medal, Matteucci Medal) + Awards: + {scientist.awards.join(', ')}
  • Discovered: - polonium (element) + {scientist.discovery}
-
-

Katsuko Saruhashi

- Katsuko Saruhashi -
    -
  • - Profession: - geochemist -
    • -
  • - Awards: 2 - (Miyake Prize for geochemistry, Tanaka Prize) -
    • -
  • - Discovered: - a method for measuring carbon dioxide in seawater -
    • -
-
-
+ ); +} + +export default function Gallery() { + return ( +
+

Notable Scientists

+ {scientistsData.map((scientist, index) => ( + + ))} +
); } From 79fd4ae6cc94d3c9c0dba3c3c80da4af6c9c4366 Mon Sep 17 00:00:00 2001 From: Ankur Haritosh <30547888+ankurharitosh@users.noreply.github.com> Date: Tue, 20 Feb 2024 23:51:23 -0500 Subject: [PATCH 06/23] Update gallery_props.js --- src/pages/qcomps/gallery_props.js | 79 ++++++++++++------------------- 1 file changed, 30 insertions(+), 49 deletions(-) diff --git a/src/pages/qcomps/gallery_props.js b/src/pages/qcomps/gallery_props.js index c62bbcf4..bd9e4b97 100644 --- a/src/pages/qcomps/gallery_props.js +++ b/src/pages/qcomps/gallery_props.js @@ -1,58 +1,39 @@ 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' - } -]; +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 ScientistProfile({ scientist }) { - return ( -
-

{scientist.name}

+function getImageUrl(imageId) { + return "https://i.imgur.com/" + imageId + "s.jpg" +} + +export default function List() { + const listItems = people.map(person => ( +
  • {scientist.name} -
      -
    • - Profession: - {scientist.profession} -
      • -
    • - Awards: - {scientist.awards.join(', ')} -
      • -
    • - Discovered: - {scientist.discovery} -
      • -
    -
    • - ); -} +
    +

    {person.name}

    +

    Profession: {person.profession}

    +

    Accomplishment: {person.accomplishment}

    +
    + + )); -export default function Gallery() { - return ( -
    -

    Notable Scientists

    - {scientistsData.map((scientist, index) => ( - - ))} -
    - ); + return
      {listItems}
    ; } From 18bd6d8d25716348a2bedd5442f424c219d1e222 Mon Sep 17 00:00:00 2001 From: Ankur Haritosh <30547888+ankurharitosh@users.noreply.github.com> Date: Tue, 20 Feb 2024 23:51:33 -0500 Subject: [PATCH 07/23] Update gallery_props.js --- src/pages/qcomps/gallery_props.js | 54 ++++++++++++------------------- 1 file changed, 21 insertions(+), 33 deletions(-) diff --git a/src/pages/qcomps/gallery_props.js b/src/pages/qcomps/gallery_props.js index bd9e4b97..c52b46db 100644 --- a/src/pages/qcomps/gallery_props.js +++ b/src/pages/qcomps/gallery_props.js @@ -1,39 +1,27 @@ import React from 'react'; -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" -} - -export default function List() { - const listItems = people.map(person => ( -
  • - {person.name} +export default function MenuBar() { + return (
    -

    {person.name}

    -

    Profession: {person.profession}

    -

    Accomplishment: {person.accomplishment}

    + + Button 1 + + + Button 2 +
    -
    • - )); + ); +} + +function AButton({ id, color, size, children }) { + const handleClick = () => { + document.getElementById(`${id}`).style.backgroundColor = color; + document.getElementById(`${id}`).style.fontSize = size; + }; - return
      {listItems}
    ; + return ( + + ); } From 752a280168905f0aec64468bb19b1d28ff44305c Mon Sep 17 00:00:00 2001 From: Ankur Haritosh <30547888+ankurharitosh@users.noreply.github.com> Date: Tue, 20 Feb 2024 23:51:56 -0500 Subject: [PATCH 08/23] Update gallery_props.js --- src/pages/qcomps/gallery_props.js | 75 ++++++++++++++++++++++--------- 1 file changed, 53 insertions(+), 22 deletions(-) diff --git a/src/pages/qcomps/gallery_props.js b/src/pages/qcomps/gallery_props.js index c52b46db..c62bbcf4 100644 --- a/src/pages/qcomps/gallery_props.js +++ b/src/pages/qcomps/gallery_props.js @@ -1,27 +1,58 @@ import React from 'react'; -export default function MenuBar() { - return ( -
    - - Button 1 - - - Button 2 - -
    - ); -} +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 AButton({ id, color, size, children }) { - const handleClick = () => { - document.getElementById(`${id}`).style.backgroundColor = color; - document.getElementById(`${id}`).style.fontSize = size; - }; +function ScientistProfile({ scientist }) { + return ( +
    +

    {scientist.name}

    + {scientist.name} +
      +
    • + Profession: + {scientist.profession} +
      • +
    • + Awards: + {scientist.awards.join(', ')} +
      • +
    • + Discovered: + {scientist.discovery} +
      • +
    +
    + ); +} - return ( - - ); +export default function Gallery() { + return ( +
    +

    Notable Scientists

    + {scientistsData.map((scientist, index) => ( + + ))} +
    + ); } From 256e27277aa7e97ec0bcb1c4faac182ed67113be Mon Sep 17 00:00:00 2001 From: Ankur Haritosh <30547888+ankurharitosh@users.noreply.github.com> Date: Tue, 20 Feb 2024 23:52:11 -0500 Subject: [PATCH 09/23] Update list_keys_id.js --- src/pages/qcomps/list_keys_id.js | 27 +++++++++++++++++++++------ 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/src/pages/qcomps/list_keys_id.js b/src/pages/qcomps/list_keys_id.js index f10c9b88..bd9e4b97 100644 --- a/src/pages/qcomps/list_keys_id.js +++ b/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 => -
  • -
    • - ); + const listItems = people.map(person => ( +
  • + {person.name} +
    +

    {person.name}

    +

    Profession: {person.profession}

    +

    Accomplishment: {person.accomplishment}

    +
    +
    • + )); + return
      {listItems}
    ; -} \ No newline at end of file +} From 76185701e3ab16dcbfc0b9aabefb7a08875d7a62 Mon Sep 17 00:00:00 2001 From: Ankur Haritosh <30547888+ankurharitosh@users.noreply.github.com> Date: Tue, 20 Feb 2024 23:52:29 -0500 Subject: [PATCH 10/23] Update menuBar.js --- src/pages/qcomps/menuBar.js | 43 ++++++++++++++++++++----------------- 1 file changed, 23 insertions(+), 20 deletions(-) diff --git a/src/pages/qcomps/menuBar.js b/src/pages/qcomps/menuBar.js index 0fb8894e..c52b46db 100644 --- a/src/pages/qcomps/menuBar.js +++ b/src/pages/qcomps/menuBar.js @@ -1,24 +1,27 @@ +import React from 'react'; + export default function MenuBar() { - return ( -
    - - Button 1 - - - Button 2 - -
    - ); + return ( +
    + + Button 1 + + + Button 2 + +
    + ); } -function AButton() { - const handleClick = () => { - document.getElementById(`${id}`).style.backgroundColor = color; - document.getElementById(`${id}`).style.fontSize = size; - } - return ( - - ); +function AButton({ id, color, size, children }) { + const handleClick = () => { + document.getElementById(`${id}`).style.backgroundColor = color; + document.getElementById(`${id}`).style.fontSize = size; + }; + + return ( + + ); } From 906665d8f08cc2a6b8a5609a43294221fa098365 Mon Sep 17 00:00:00 2001 From: Ankur Haritosh <30547888+ankurharitosh@users.noreply.github.com> Date: Tue, 20 Feb 2024 23:52:43 -0500 Subject: [PATCH 11/23] Update profile_mistake.js --- src/pages/qcomps/profile_mistake.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/pages/qcomps/profile_mistake.js b/src/pages/qcomps/profile_mistake.js index ac318d70..f2a3fd7d 100644 --- a/src/pages/qcomps/profile_mistake.js +++ b/src/pages/qcomps/profile_mistake.js @@ -1,4 +1,5 @@ -export default function profile() { - return - Katsuko Saruhashi; +export default function Profile() { + return ( + Katsuko Saruhashi + ); } From daa4a4a6aa6a5b6abd8699b487475aa67dab9b6e Mon Sep 17 00:00:00 2001 From: Ankur Haritosh <30547888+ankurharitosh@users.noreply.github.com> Date: Tue, 20 Feb 2024 23:53:07 -0500 Subject: [PATCH 12/23] Update props_item.js --- src/pages/qcomps/props_item.js | 36 +++++++++++++++++----------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/pages/qcomps/props_item.js b/src/pages/qcomps/props_item.js index 79a9e151..2b8ccd43 100644 --- a/src/pages/qcomps/props_item.js +++ b/src/pages/qcomps/props_item.js @@ -2,27 +2,27 @@ function Item({ name, isPacked }) { if (isPacked) { return
  • {name} ✔
    • ; } - return
  • {name}
    • + return
  • {name}
    • ; } export default function PackingList() { return ( -
    -

    My Packing List

    -
      - - - -
    -
    +
    +

    My Packing List

    +
      + + + +
    +
    ); } From 2457250ef31f3f9a3954419fc504314bbabdaab5 Mon Sep 17 00:00:00 2001 From: Ankur Haritosh <30547888+ankurharitosh@users.noreply.github.com> Date: Tue, 20 Feb 2024 23:53:27 -0500 Subject: [PATCH 13/23] Update recipes.js --- src/pages/qcomps/recipes.js | 37 +++++++++++++++++++------------------ 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/src/pages/qcomps/recipes.js b/src/pages/qcomps/recipes.js index 37803925..100bd847 100644 --- a/src/pages/qcomps/recipes.js +++ b/src/pages/qcomps/recipes.js @@ -1,22 +1,23 @@ -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']) -}]; +import React from 'react'; +import { recipes } from './recipes'; // Import the recipes array export default function RecipeList() { return ( -
    -

    Recipes

    - {} -
    +
    +

    Recipes

    +
      + {recipes.map(recipe => ( +
    • +

      {recipe.name}

      +

      Ingredients:

      +
        + {Array.from(recipe.ingredients).map((ingredient, index) => ( +
      • {ingredient}
        • + ))} +
      +
      • + ))} +
    +
    ); -} \ No newline at end of file +} From 6d3095fc84c332aa6048fbafd8ee679cd370d30b Mon Sep 17 00:00:00 2001 From: Ankur Haritosh <30547888+ankurharitosh@users.noreply.github.com> Date: Tue, 20 Feb 2024 23:53:42 -0500 Subject: [PATCH 14/23] Update shoppingCart.js --- src/pages/qcomps/shoppingCart.js | 44 ++++++++++++++------------------ 1 file changed, 19 insertions(+), 25 deletions(-) diff --git a/src/pages/qcomps/shoppingCart.js b/src/pages/qcomps/shoppingCart.js index d26decf8..b9adbe78 100644 --- a/src/pages/qcomps/shoppingCart.js +++ b/src/pages/qcomps/shoppingCart.js @@ -1,33 +1,27 @@ import { useState } from 'react'; export default function RequestTracker() { - const [pending, setPending] = useState(0); - const [completed, setCompleted] = useState(0); + const [pending, setPending] = useState(0); + const [completed, setCompleted] = useState(0); - async function handleClick() { - setPending(pending + 1); - await delay(3000); - setPending(pending - 1); - setCompleted(completed + 1); - } + async function handleClick() { + setPending(prevPending => prevPending + 1); // Update pending using functional form + await delay(3000); + setPending(prevPending => prevPending - 1); // Update pending using functional form + setCompleted(prevCompleted => prevCompleted + 1); // Update completed using functional form + } - return ( - <> -

    - Pending: {pending} -

    -

    - Completed: {completed} -

    - - - ); + return ( + <> +

    Pending: {pending}

    +

    Completed: {completed}

    + + + ); } function delay(ms) { - return new Promise(resolve => { - setTimeout(resolve, ms); - }); -} \ No newline at end of file + return new Promise(resolve => { + setTimeout(resolve, ms); + }); +} From 4ef71cc38fc6727a40e08428ebdf6dba9a82c5c1 Mon Sep 17 00:00:00 2001 From: Ankur Haritosh <30547888+ankurharitosh@users.noreply.github.com> Date: Tue, 20 Feb 2024 23:53:59 -0500 Subject: [PATCH 15/23] Update snapshot.js --- src/pages/qcomps/snapshot.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/pages/qcomps/snapshot.js b/src/pages/qcomps/snapshot.js index 2c3c9801..5bd06c4a 100644 --- a/src/pages/qcomps/snapshot.js +++ b/src/pages/qcomps/snapshot.js @@ -1,15 +1,15 @@ import { useState } from 'react'; export default function Counter() { - const [number, setNumber] = useState(0); + const [number, setNumber] = useState(0); - return ( - <> -

    {number}

    - - - ) + return ( + <> +

    {number}

    + + + ) } From 4b4ce30b6513d9b34c7dfccb3d0b023cd848dd88 Mon Sep 17 00:00:00 2001 From: Ankur Haritosh <30547888+ankurharitosh@users.noreply.github.com> Date: Tue, 20 Feb 2024 23:54:18 -0500 Subject: [PATCH 16/23] Update state.js --- src/pages/qcomps/state.js | 67 ++++++++++++++++++++------------------- 1 file changed, 34 insertions(+), 33 deletions(-) diff --git a/src/pages/qcomps/state.js b/src/pages/qcomps/state.js index 35953a6a..e2b9eafc 100644 --- a/src/pages/qcomps/state.js +++ b/src/pages/qcomps/state.js @@ -1,39 +1,40 @@ -import { useState } from 'react'; +import React, { useState } from 'react'; import { sculptureList } from '../../data/data.js'; export default function Gallery() { - const [index, setIndex] = useState(0); - const [showMore, setShowMore] = useState(false); + const [index, setIndex] = useState(0); + const [showMore, setShowMore] = useState(false); - function handleNextClick() { - setIndex(index + 1); - } + function handleNextClick() { + const newIndex = index + 1; + setIndex(newIndex >= sculptureList.length ? 0 : newIndex); + } - function handleMoreClick() { - setShowMore(!showMore); - } + function handleMoreClick() { + setShowMore(!showMore); + } - let sculpture = sculptureList[index]; - return ( - <> - -

    - {sculpture.name} - by {sculpture.artist} -

    -

    - ({index + 1} of {sculptureList.length}) -

    - - {showMore &&

    {sculpture.description}

    } - {sculpture.alt} - - ); -} \ No newline at end of file + const sculpture = sculptureList[index]; + + return ( + <> + +

    + {sculpture.name} by {sculpture.artist} +

    +

    + ({index + 1} of {sculptureList.length}) +

    + + {showMore &&

    {sculpture.description}

    } + {sculpture.alt} + + ); +} From 48288c0320c511ba8c422fbad82075e866a096ee Mon Sep 17 00:00:00 2001 From: Ankur Haritosh <30547888+ankurharitosh@users.noreply.github.com> Date: Tue, 20 Feb 2024 23:54:35 -0500 Subject: [PATCH 17/23] Update stuckForm.js --- src/pages/qcomps/stuckForm.js | 58 +++++++++++++++++------------------ 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/src/pages/qcomps/stuckForm.js b/src/pages/qcomps/stuckForm.js index 7cc952e0..977ed8e2 100644 --- a/src/pages/qcomps/stuckForm.js +++ b/src/pages/qcomps/stuckForm.js @@ -1,36 +1,36 @@ -import { useState } from 'react'; +import React, { 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; - } + function handleFirstNameChange(e) { + setFirstName(e.target.value); + } - function handleLastNameChange(e) { - lastName = e.target.value; - } + function handleLastNameChange(e) { + setLastName(e.target.value); + } - function handleReset() { - firstName = ''; - lastName = ''; - } + function handleReset() { + setFirstName(''); + setLastName(''); + } - return ( -
    e.preventDefault()}> - - -

    Hi, {firstName} {lastName}

    - -
    - ); + return ( +
    e.preventDefault()}> + + +

    Hi, {firstName} {lastName}

    + +
    + ); } From b3f4b4df372c13bc3bd10d937681d20bc5ffdb61 Mon Sep 17 00:00:00 2001 From: Ankur Haritosh <30547888+ankurharitosh@users.noreply.github.com> Date: Tue, 20 Feb 2024 23:54:50 -0500 Subject: [PATCH 18/23] Update stuckForm.js --- src/pages/qcomps/stuckForm.js | 48 ++++++++++++++--------------------- 1 file changed, 19 insertions(+), 29 deletions(-) diff --git a/src/pages/qcomps/stuckForm.js b/src/pages/qcomps/stuckForm.js index 977ed8e2..4e219442 100644 --- a/src/pages/qcomps/stuckForm.js +++ b/src/pages/qcomps/stuckForm.js @@ -1,36 +1,26 @@ import React, { useState } from 'react'; -export default function Form() { - const [firstName, setFirstName] = useState(''); - const [lastName, setLastName] = useState(''); - - function handleFirstNameChange(e) { - setFirstName(e.target.value); - } - - function handleLastNameChange(e) { - setLastName(e.target.value); - } - - function handleReset() { - setFirstName(''); - setLastName(''); - } +export default function FeedbackForm() { + const [isSent, setIsSent] = useState(false); + const [message, setMessage] = useState(''); + if (isSent) { + return

    Thank you!

    ; + } else { return ( -
    e.preventDefault()}> - - -

    Hi, {firstName} {lastName}

    - + { + e.preventDefault(); + alert(`Sending: "${message}"`); + setIsSent(true); + }}> +