From 5ff5bccb1c11331ff823cd51e3a3c9574fddb383 Mon Sep 17 00:00:00 2001 From: sltan29 Date: Thu, 11 Dec 2025 19:04:30 +0200 Subject: [PATCH 1/3] created a react website that is managing interested list for shows. --- package-lock.json | 12 +++++ src/App.tsx | 5 ++- src/components/showCard/ShowCard.tsx | 67 ++++++++++++++-------------- 3 files changed, 50 insertions(+), 34 deletions(-) diff --git a/package-lock.json b/package-lock.json index aee3ff5..f3f7d3b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -57,6 +57,7 @@ "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -1389,6 +1390,7 @@ "integrity": "sha512-WOhQTZ4G8xZ1tjJTvKOpyEVSGgOTvJAfDK3FNFgELyaTpzhdgHVHeqW8V+UJvzF5BT+/B54T/1S2K6gd9c7bbA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -1399,6 +1401,7 @@ "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -1458,6 +1461,7 @@ "integrity": "sha512-N9lBGA9o9aqb1hVMc9hzySbhKibHmB+N3IpoShyV6HyQYRGIhlrO5rQgttypi+yEeKsKI4idxC8Jw6gXKD4THA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.49.0", "@typescript-eslint/types": "8.49.0", @@ -1709,6 +1713,7 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1814,6 +1819,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -2035,6 +2041,7 @@ "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -2721,6 +2728,7 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -2782,6 +2790,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz", "integrity": "sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -2984,6 +2993,7 @@ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "dev": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -3070,6 +3080,7 @@ "integrity": "sha512-ITcnkFeR3+fI8P1wMgItjGrR10170d8auB4EpMLPqmx6uxElH3a/hHGQabSHKdqd4FXWO1nFIp9rRn7JQ34ACQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -3191,6 +3202,7 @@ "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==", "dev": true, "license": "MIT", + "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/src/App.tsx b/src/App.tsx index b16f189..b47e886 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -56,7 +56,10 @@ export default function App() {
- {/* TODO - shows.map((show)=>{ return })*/} + {shows.map((show)=> { + return + })}
diff --git a/src/components/showCard/ShowCard.tsx b/src/components/showCard/ShowCard.tsx index 7e18a47..084487e 100644 --- a/src/components/showCard/ShowCard.tsx +++ b/src/components/showCard/ShowCard.tsx @@ -9,64 +9,65 @@ export interface ShowCardProps { image: string; } -export default function ShowCard( - /* TODO 1: Accept props with ShowCardProps type here */ -) { - // TODO 2: Create state called isInterested of type boolean (default false) - // const [isInterested, setIsInterested] = ... +export default function ShowCard({ + artist, + stage, + day, + hour, + ticketsLeft, + image}: ShowCardProps) - // TODO 3: Function that toggles true/false in isInterested - // function handleToggleInterested() {} + { + const [isInterested, setIsInterested] =useState(false); - // TODO 4: Create ticketsStatusText (string): - // 0 → "SOLD OUT" - // 1–30 → "Last tickets – hurry up!" - // >30 → "Tickets available" + function handleToggleInterested() { + setIsInterested(!isInterested); + } - // TODO 5: Create text for interest status based on isInterested: - // false → "You haven't added this show yet" - // true → "This show is in your interested list 🎟️" + let ticketsStatusText; + + if (ticketsLeft <= 0) { + ticketsStatusText = "SOLD OUT"; + } else if (ticketsLeft <= 30) { + ticketsStatusText = "Last tickets – hurry up!"; + } else { + ticketsStatusText = "Tickets available"; + } + + let interestString; + if(isInterested) + interestString = "this show is in your interested list 🎟️" + else interestString = "You haven't added this show yet" return (
- {/* TODO 6: Replace placeholder with real from props */} - {/* {artist} */} + {artist}
Image goes here

- {/* TODO 7: If isInterested → show ⭐ before artist name */} - "Artist name here" + {isInterested && "⭐"} + {artist}

- {/* TODO 8: Display stage, day, hour from props */} - "Stage · Day · Hour" + {stage} · {day} · {hour}

- {/* TODO 9: Display the ticketsStatusText */} - "Tickets status text" + {ticketsStatusText}

- {/* TODO 10: Display the interestedText */} - "Interested status text" + {interestString}

-
); From eb36366d610dd926d022f756911d5cee336ebd07 Mon Sep 17 00:00:00 2001 From: sltan29 Date: Sat, 13 Dec 2025 00:44:15 +0200 Subject: [PATCH 2/3] changed id to key, made it {...show}, if statement shorter, variables for all numbers --- src/App.tsx | 5 ++--- src/components/showCard/ShowCard.tsx | 14 +++++++------- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index b47e886..a423cae 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -56,9 +56,8 @@ export default function App() {
- {shows.map((show)=> { - return + {shows.map(show=> { + return })}
diff --git a/src/components/showCard/ShowCard.tsx b/src/components/showCard/ShowCard.tsx index 084487e..78f8b23 100644 --- a/src/components/showCard/ShowCard.tsx +++ b/src/components/showCard/ShowCard.tsx @@ -1,4 +1,5 @@ import { useState } from "react"; +const outOfTickets = 0,lastTickets = 0; export interface ShowCardProps { artist: string; @@ -26,19 +27,18 @@ export default function ShowCard({ let ticketsStatusText; - if (ticketsLeft <= 0) { + if (ticketsLeft <= outOfTickets) { ticketsStatusText = "SOLD OUT"; - } else if (ticketsLeft <= 30) { + } else if (ticketsLeft <= lastTickets) { ticketsStatusText = "Last tickets – hurry up!"; } else { ticketsStatusText = "Tickets available"; } - let interestString; - if(isInterested) - interestString = "this show is in your interested list 🎟️" - else interestString = "You haven't added this show yet" - + let interestString = isInterested + ? "this show is in your interested list 🎟️" + : "You haven't added this show yet"; + return (
From 94d3bf8d3ac02833567e6556d16c65c8f3e5cab8 Mon Sep 17 00:00:00 2001 From: sltan29 Date: Sat, 13 Dec 2025 00:44:47 +0200 Subject: [PATCH 3/3] changed id to key, made it {...show}, if statement shorter, variables for all numbers --- src/components/showCard/ShowCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/showCard/ShowCard.tsx b/src/components/showCard/ShowCard.tsx index 78f8b23..6314262 100644 --- a/src/components/showCard/ShowCard.tsx +++ b/src/components/showCard/ShowCard.tsx @@ -38,7 +38,7 @@ export default function ShowCard({ let interestString = isInterested ? "this show is in your interested list 🎟️" : "You haven't added this show yet"; - + return (