- --fcc-editable-region--
-
-
-
+
+ --fcc-editable-region--
-
-
+
);
-}
+};
export const FootballPlayerCard = () => {
-
+ --fcc-editable-region--
return (
- --fcc-editable-region--
- Football Card Builder
- --fcc-editable-region-- - ) +Football Card Builder
+ ); + --fcc-editable-region-- }; ``` diff --git a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69e8b295388ebbd517692bb3.md b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69e8b295388ebbd517692bb3.md index 882af23200c..2698f5174eb 100644 --- a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69e8b295388ebbd517692bb3.md +++ b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69e8b295388ebbd517692bb3.md @@ -382,15 +382,13 @@ export const PlayerCard = () => { return (
--fcc-editable-region--
-
+
--fcc-editable-region--
);
-}
+};
export const FootballPlayerCard = () => {
- return (
-
--fcc-editable-region--
-
+
--fcc-editable-region--
--fcc-editable-region--
-
+
--fcc-editable-region--
98
--fcc-editable-region--
-
+
--fcc-editable-region--
ST
--fcc-editable-region--
-
+
--fcc-editable-region--
);
-}
+};
export const FootballPlayerCard = () => {
return GOLD
--fcc-editable-region--
-
+
--fcc-editable-region--
--fcc-editable-region--
-
+
--fcc-editable-region--
);
-}
+};
export const FootballPlayerCard = () => {
return 
--fcc-editable-region--
-
+
--fcc-editable-region--
);
-}
+};
export const FootballPlayerCard = () => {
return
- --fcc-editable-region--
- --fcc-editable-region--
+ --fcc-editable-region--
97
PAC
@@ -448,10 +448,10 @@ export const PlayerCard = ({ player }: { player: PlayerData }) => {
83
+ --fcc-editable-region--
PAS
@@ -471,9 +471,9 @@ export const PlayerCard = ({ player }: { player: PlayerData }) => {
{player.position}
-
@@ -474,14 +476,14 @@ export const PlayerCard = ({ player }: { player: PlayerData }) => {
);
-}
+};
const defaultPlayer: PlayerData = {
- name: 'PELE',
+ name: "PELE",
overallRating: 98,
- position: 'ST',
- club: 'Santos FC',
- imageUrl: 'https://cdn.freecodecamp.org/curriculum/typescript/tsx-workshop/pele.jpg',
+ position: "ST",
+ club: "Santos FC",
+ imageUrl: "https://cdn.freecodecamp.org/curriculum/typescript/tsx-workshop/pele.jpg",
pac: 97,
sho: 98,
pas: 83,
@@ -506,8 +508,18 @@ export const FootballPlayerCard = () => {
{getPlayerTier(player.overallRating).toUpperCase()}
+
+ {getPlayerTier(player.overallRating).toUpperCase()}
+
{player.club}
Player Info
-
- setPlayer({ ...player, name: e.target.value })} />
+
+
+ setPlayer({ ...player, name: e.target.value })
+ }
+ />
@@ -518,8 +530,9 @@ export const FootballPlayerCard = () => {
id="position"
className="input"
value={player.position}
- onChange={(e) =>
- setPlayer({ ...player, position: e.target.value as Position })}
+ onChange={(e) =>
+ setPlayer({ ...player, position: e.target.value as Position })
+ }
>
{POSITIONS.map(
(pos) => (
@@ -531,46 +544,115 @@ export const FootballPlayerCard = () => {
-
- setPlayer({ ...player, overallRating: Number(e.target.value) })} />
+
+
+ setPlayer({
+ ...player,
+ overallRating: Number(e.target.value),
+ })
+ }
+ />
-
- setPlayer({ ...player, club: e.target.value })} />
+
+
+ setPlayer({ ...player, club: e.target.value })
+ }
+ />
-
- setPlayer({ ...player, imageUrl: e.target.value })} />
+
+
+ setPlayer({ ...player, imageUrl: e.target.value })
+ }
+ />
Player Stats
-
- setPlayer({ ...player, pac: Number(e.target.value) })} />
+
+
+ setPlayer({ ...player, pac: Number(e.target.value) })
+ }
+ />
-
- setPlayer({ ...player, sho: Number(e.target.value) })} />
+
+
+ setPlayer({ ...player, sho: Number(e.target.value) })
+ }
+ />
-
- setPlayer({ ...player, pas: Number(e.target.value) })} />
+
+
+ setPlayer({ ...player, pas: Number(e.target.value) })
+ }
+ />
-
+
--fcc-editable-region--
--fcc-editable-region--
-
+
-
+
Live Preview
Updates as you type
-
+
diff --git a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69e8b296388ebbd517692bdf.md b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69e8b296388ebbd517692bdf.md
index 5863e660574..1106ca6fbc3 100644
--- a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69e8b296388ebbd517692bdf.md
+++ b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69e8b296388ebbd517692bdf.md
@@ -421,7 +421,7 @@ type Position = typeof POSITIONS[number];
interface PlayerData {
name: string;
overallRating: number;
- position: string;
+ position: Position;
club: string;
imageUrl: string;
pac: number;
@@ -495,7 +495,7 @@ export const PlayerCard = ({ player }: { player: PlayerData }) => {
+ --fcc-editable-region--
@@ -679,8 +680,8 @@ export const FootballPlayerCard = () => {
PHY
-
--fcc-editable-region--
+
diff --git a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69e8d1be04ed6aad1c955729.md b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69e8d1be04ed6aad1c955729.md
index 7bf50cf27b3..859f71316ea 100644
--- a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69e8d1be04ed6aad1c955729.md
+++ b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69e8d1be04ed6aad1c955729.md
@@ -391,8 +391,8 @@ const { useState } = React;
--fcc-editable-region--
export const FootballPlayerCard = () => {
- return (
- Football Card Builder
- ) + return ( +Football Card Builder
+ ); }; ``` diff --git a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea01c45b04f3e9de845036.md b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea01c45b04f3e9de845036.md index f0040d2f71e..2ff55cd1f17 100644 --- a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea01c45b04f3e9de845036.md +++ b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea01c45b04f3e9de845036.md @@ -405,7 +405,7 @@ type Position = typeof POSITIONS[number]; interface PlayerData { name: string; overallRating: number; - position: string; + position: Position; club: string; imageUrl: string; pac: number; @@ -483,7 +483,7 @@ export const PlayerCard = ({ player }: { player: PlayerData }) => { ); -} +}; const defaultPlayer: PlayerData = { name: "PELE", @@ -537,8 +537,9 @@ export const FootballPlayerCard = () => { id="position" className="input" value={player.position} - onChange={(e) => - setPlayer({ ...player, position: e.target.value as Position })} + onChange={(e) => + setPlayer({ ...player, position: e.target.value as Position }) + } > {POSITIONS.map( (pos) => ( diff --git a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea02adff0fd528639ee23b.md b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea02adff0fd528639ee23b.md index d58a9093522..95ba82ebc6f 100644 --- a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea02adff0fd528639ee23b.md +++ b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea02adff0fd528639ee23b.md @@ -409,7 +409,7 @@ type Position = typeof POSITIONS[number]; interface PlayerData { name: string; overallRating: number; - position: string; + position: Position; club: string; imageUrl: string; pac: number; @@ -485,7 +485,7 @@ export const PlayerCard = ({ player }: { player: PlayerData }) => { ); -} +}; const defaultPlayer: PlayerData = { name: "PELE", @@ -543,8 +543,9 @@ export const FootballPlayerCard = () => { id="position" className="input" value={player.position} - onChange={(e) => - setPlayer({ ...player, position: e.target.value as Position })} + onChange={(e) => + setPlayer({ ...player, position: e.target.value as Position }) + } > {POSITIONS.map( (pos) => ( diff --git a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea0349f8305a99324465ff.md b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea0349f8305a99324465ff.md index 8a819c167da..90b4f6d22f4 100644 --- a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea0349f8305a99324465ff.md +++ b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea0349f8305a99324465ff.md @@ -407,7 +407,7 @@ type Position = typeof POSITIONS[number]; interface PlayerData { name: string; overallRating: number; - position: string; + position: Position; club: string; imageUrl: string; pac: number; @@ -483,7 +483,7 @@ export const PlayerCard = ({ player }: { player: PlayerData }) => { ); -} +}; const defaultPlayer: PlayerData = { name: "PELE", @@ -502,11 +502,9 @@ const defaultPlayer: PlayerData = { function loadPlayer(): PlayerData { try { --fcc-editable-region-- - - --fcc-editable-region-- - } catch (error) { - } + --fcc-editable-region-- + } catch (error) {} } export const FootballPlayerCard = () => { @@ -547,8 +545,9 @@ export const FootballPlayerCard = () => { id="position" className="input" value={player.position} - onChange={(e) => - setPlayer({ ...player, position: e.target.value as Position })} + onChange={(e) => + setPlayer({ ...player, position: e.target.value as Position }) + } > {POSITIONS.map( (pos) => ( diff --git a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea044f8c93a5e7ce64214c.md b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea044f8c93a5e7ce64214c.md index 6511f390643..b2ca72aab52 100644 --- a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea044f8c93a5e7ce64214c.md +++ b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea044f8c93a5e7ce64214c.md @@ -395,7 +395,7 @@ type Position = typeof POSITIONS[number]; interface PlayerData { name: string; overallRating: number; - position: string; + position: Position; club: string; imageUrl: string; pac: number; @@ -471,7 +471,7 @@ export const PlayerCard = ({ player }: { player: PlayerData }) => { ); -} +}; const defaultPlayer: PlayerData = { name: "PELE", @@ -492,12 +492,10 @@ function loadPlayer(): PlayerData { const saved = localStorage.getItem(STORAGE_KEY); if (saved) { --fcc-editable-region-- - + --fcc-editable-region-- - }; - } catch (error) { - - } + } + } catch (error) {} } export const FootballPlayerCard = () => { @@ -538,8 +536,9 @@ export const FootballPlayerCard = () => { id="position" className="input" value={player.position} - onChange={(e) => - setPlayer({ ...player, position: e.target.value as Position })} + onChange={(e) => + setPlayer({ ...player, position: e.target.value as Position }) + } > {POSITIONS.map( (pos) => ( diff --git a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea0577f25e519489353f82.md b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea0577f25e519489353f82.md index 357673a14f2..bdb5d92270d 100644 --- a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea0577f25e519489353f82.md +++ b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea0577f25e519489353f82.md @@ -405,7 +405,7 @@ type Position = typeof POSITIONS[number]; interface PlayerData { name: string; overallRating: number; - position: string; + position: Position; club: string; imageUrl: string; pac: number; @@ -418,7 +418,6 @@ interface PlayerData { const STORAGE_KEY = "football_player_card"; - export function getPlayerTier(rating: number): string { if (rating >= 92) return "elite"; if (rating >= 85) return "gold"; @@ -482,7 +481,7 @@ export const PlayerCard = ({ player }: { player: PlayerData }) => { ); -} +}; const defaultPlayer: PlayerData = { name: "PELE", @@ -505,14 +504,15 @@ function loadPlayer(): PlayerData { return { ...defaultPlayer, ...JSON.parse(saved) - } - }; ---fcc-editable-region-- + }; + } } catch (error) { +--fcc-editable-region-- } -} + --fcc-editable-region-- +} export const FootballPlayerCard = () => { const [player, setPlayer] = useState
@@ -491,7 +489,7 @@ function PlayerCard({ player }: { player: PlayerData }) {
@@ -559,8 +559,9 @@ export const FootballPlayerCard = () => {
id="position"
className="input"
value={player.position}
- onChange={(e) =>
- setPlayer({ ...player, position: e.target.value as Position })}
+ onChange={(e) =>
+ setPlayer({ ...player, position: e.target.value as Position })
+ }
>
{POSITIONS.map(
(pos) => (
diff --git a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea0bb3e7000f44c207bb0e.md b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea0bb3e7000f44c207bb0e.md
index ce566360256..0f493e32d41 100644
--- a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea0bb3e7000f44c207bb0e.md
+++ b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea0bb3e7000f44c207bb0e.md
@@ -401,7 +401,7 @@ type Position = typeof POSITIONS[number];
interface PlayerData {
name: string;
overallRating: number;
- position: string;
+ position: Position;
club: string;
imageUrl: string;
pac: number;
@@ -477,7 +477,7 @@ export const PlayerCard = ({ player }: { player: PlayerData }) => {
);
-}
+};
const defaultPlayer: PlayerData = {
name: "PELE",
@@ -500,8 +500,8 @@ function loadPlayer(): PlayerData {
return {
...defaultPlayer,
...JSON.parse(saved)
- }
- };
+ };
+ }
} catch (error) {
console.log("Failed to load player data, using defaults:", error);
}
@@ -557,8 +557,9 @@ export const FootballPlayerCard = () => {
id="position"
className="input"
value={player.position}
- onChange={(e) =>
- setPlayer({ ...player, position: e.target.value as Position })}
+ onChange={(e) =>
+ setPlayer({ ...player, position: e.target.value as Position })
+ }
>
{POSITIONS.map(
(pos) => (
@@ -1098,7 +1099,7 @@ type Position = typeof POSITIONS[number];
interface PlayerData {
name: string;
overallRating: number;
- position: string;
+ position: Position;
club: string;
imageUrl: string;
pac: number;
@@ -1174,7 +1175,7 @@ export const PlayerCard = ({ player }: { player: PlayerData }) => {
);
-}
+};
const defaultPlayer: PlayerData = {
name: "PELE",
@@ -1197,8 +1198,8 @@ function loadPlayer(): PlayerData {
return {
...defaultPlayer,
...JSON.parse(saved)
- }
- };
+ };
+ }
} catch (error) {
console.log("Failed to load player data, using defaults:", error);
}
@@ -1252,8 +1253,9 @@ export const FootballPlayerCard = () => {
id="position"
className="input"
value={player.position}
- onChange={(e) =>
- setPlayer({ ...player, position: e.target.value as Position })}
+ onChange={(e) =>
+ setPlayer({ ...player, position: e.target.value as Position })
+ }
>
{POSITIONS.map(
(pos) => (
diff --git a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea1bb4a66dd6debb999c7f.md b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea1bb4a66dd6debb999c7f.md
index 5f02596e35b..0fa739c792d 100644
--- a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea1bb4a66dd6debb999c7f.md
+++ b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea1bb4a66dd6debb999c7f.md
@@ -473,7 +473,7 @@ export const PlayerCard = ({ player }: { player: PlayerData }) => {
);
-}
+};
const defaultPlayer: PlayerData = {
name: "PELE",
diff --git a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea1dd8e74976afa407bf22.md b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea1dd8e74976afa407bf22.md
index 579ffa913bf..3880cbbc581 100644
--- a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea1dd8e74976afa407bf22.md
+++ b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea1dd8e74976afa407bf22.md
@@ -479,7 +479,7 @@ export const PlayerCard = ({ player }: { player: PlayerData }) => {
);
-}
+};
const defaultPlayer: PlayerData = {
name: "PELE",
diff --git a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea1ed1543a4db863564aac.md b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea1ed1543a4db863564aac.md
index e0ece75d6ab..8792bfc9fc1 100644
--- a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea1ed1543a4db863564aac.md
+++ b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea1ed1543a4db863564aac.md
@@ -1,6 +1,6 @@
---
id: 69ea1ed1543a4db863564aac
-title: خطوة 51
+title: الخطوة 51
challengeType: 0
dashedName: step-51
---
@@ -472,7 +472,7 @@ export const PlayerCard = ({ player }: { player: PlayerData }) => {
);
-}
+};
const defaultPlayer: PlayerData = {
name: "PELE",
diff --git a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea21dcd8c4cb48c23a2c67.md b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea21dcd8c4cb48c23a2c67.md
index 3f08e472684..8691a01b8ea 100644
--- a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea21dcd8c4cb48c23a2c67.md
+++ b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea21dcd8c4cb48c23a2c67.md
@@ -14,7 +14,7 @@ dashedName: step-53
يجب أن يحتوي عنصر `select` الخاص بالموقع على معالِج `onChange` يستدعي `setPlayer` مع نسخ من `player` ويُحدّث `position`.
```js
-assert.match(__helpers.removeJSComments(code), /onChange.*setPlayer.*\.\.\.\s*player[\s\S]*position/);
+assert.match(__helpers.removeJSComments(code), /onChange=\{[\s\S]*?position:\s*e\.target\.value\s+as\s+Position/);
```
# --seed--
@@ -469,7 +469,7 @@ export const PlayerCard = ({ player }: { player: PlayerData }) => {
);
-}
+};
const defaultPlayer: PlayerData = {
name: "PELE",
diff --git a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea2378f3c6a60a57cc29c3.md b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea2378f3c6a60a57cc29c3.md
index 36f49fc305c..825b6d28f45 100644
--- a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea2378f3c6a60a57cc29c3.md
+++ b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69ea2378f3c6a60a57cc29c3.md
@@ -483,7 +483,7 @@ export const PlayerCard = ({ player }: { player: PlayerData }) => {
);
-}
+};
const defaultPlayer: PlayerData = {
name: "PELE",
@@ -537,10 +537,12 @@ export const FootballPlayerCard = () => {
id="position"
className="input"
value={player.position}
- onChange={(e) => setPlayer({ ...player, position: e.target.value as Position })}
+ onChange={(e) =>
+ setPlayer({ ...player, position: e.target.value as Position })
+ }
>
--fcc-editable-region--
-
+
--fcc-editable-region--
diff --git a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69eb216380522cfc11aa408c.md b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69eb216380522cfc11aa408c.md
index 81e2069fe8a..c479681f0ed 100644
--- a/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69eb216380522cfc11aa408c.md
+++ b/curriculum/challenges/arabic/blocks/workshop-build-a-football-player-card-builder/69eb216380522cfc11aa408c.md
@@ -443,7 +443,7 @@ export const PlayerCard = () => {
);
-}
+};
export const FootballPlayerCard = () => {
return
- --fcc-editable-region--
+ --fcc-editable-region--
@@ -410,14 +410,14 @@ export const PlayerCard = () => {
-
--fcc-editable-region--
+
+ --fcc-editable-region--
@@ -426,14 +426,14 @@ export const PlayerCard = () => {
+ --fcc-editable-region--
+ --fcc-editable-region--
99
DRI
@@ -463,17 +463,17 @@ export const PlayerCard = ({ player }: { player: PlayerData }) => {
75
+ --fcc-editable-region--
PHY
- --fcc-editable-region--
);
-}
+};
export const FootballPlayerCard = () => {
- return 123 Free Code Camp Drive
+