From 13e7b6c1d9b59beb3bfb6b2bcf5ca157c4b7c0bb Mon Sep 17 00:00:00 2001 From: DJ1 Date: Sat, 4 Feb 2023 19:47:38 -0500 Subject: [PATCH 01/20] counter step zero complete --- src/components/Counter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Counter.js b/src/components/Counter.js index 447a5e849..2eefc426a 100644 --- a/src/components/Counter.js +++ b/src/components/Counter.js @@ -46,7 +46,7 @@ STEP 6: This click handler needs to use 'setCount' to set the 'count' to be zero again. */ -import React from 'react'; /* STEP 0 */ +import React, { userstate } from 'react'; /* STEP 0 */ export default function Counter() { /* STEP 1 */ From 1b904dca9864324eee270cdbd476bf101dbb48e7 Mon Sep 17 00:00:00 2001 From: DJ1 Date: Sat, 4 Feb 2023 19:53:17 -0500 Subject: [PATCH 02/20] coujnter step one complete --- src/components/Counter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Counter.js b/src/components/Counter.js index 2eefc426a..672239329 100644 --- a/src/components/Counter.js +++ b/src/components/Counter.js @@ -50,7 +50,7 @@ import React, { userstate } from 'react'; /* STEP 0 */ export default function Counter() { /* STEP 1 */ - +const [count, setCount] = (0); const increment = () => { /* STEP 4 */ }; From 60da540d65b4c6efc6c87617293a8021c298eb30 Mon Sep 17 00:00:00 2001 From: DJ1 Date: Sat, 4 Feb 2023 20:00:36 -0500 Subject: [PATCH 03/20] color count step three complete --- src/components/Counter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Counter.js b/src/components/Counter.js index 672239329..444ef2bda 100644 --- a/src/components/Counter.js +++ b/src/components/Counter.js @@ -64,7 +64,7 @@ const [count, setCount] = (0); const style = { fontSize: '1.5em', marginBottom: '0.3em', - color: 'royalblue', /* STEP 2 */ + color: count % 2 === 0 ? 'royalblue' : 'crimson' /* STEP 2 */ }; return ( From 7979fb2f63ebc572cc651d6a28b9b5355994da3b Mon Sep 17 00:00:00 2001 From: DJ1 Date: Sat, 4 Feb 2023 20:08:01 -0500 Subject: [PATCH 04/20] count step four complete --- src/components/Counter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Counter.js b/src/components/Counter.js index 444ef2bda..da8db3560 100644 --- a/src/components/Counter.js +++ b/src/components/Counter.js @@ -71,7 +71,7 @@ const [count, setCount] = (0);

Counter

- Number 0 is even {/* STEP 3 */} + Number {count} is even {/* STEP 3 */}
From 93198ed0db4dad7c6a4751d149d05b764fe441ce Mon Sep 17 00:00:00 2001 From: DJ1 Date: Sat, 4 Feb 2023 20:13:16 -0500 Subject: [PATCH 05/20] This is the right step four --- src/components/Counter.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Counter.js b/src/components/Counter.js index da8db3560..13ab6669f 100644 --- a/src/components/Counter.js +++ b/src/components/Counter.js @@ -53,6 +53,7 @@ export default function Counter() { const [count, setCount] = (0); const increment = () => { /* STEP 4 */ + setCount(count + 1); }; const decrement = () => { /* STEP 5 */ From df1dc3912b33bb2cddc874570bfdef961f7fe23b Mon Sep 17 00:00:00 2001 From: DJ1 Date: Sat, 4 Feb 2023 20:20:51 -0500 Subject: [PATCH 06/20] step three is updated --- src/components/Counter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Counter.js b/src/components/Counter.js index 13ab6669f..bee29fb4b 100644 --- a/src/components/Counter.js +++ b/src/components/Counter.js @@ -72,7 +72,7 @@ const [count, setCount] = (0);

Counter

- Number {count} is even {/* STEP 3 */} + Number {count} is {count % 2 === 0 ? 'even' : 'odd'} {/* STEP 3 */}
From 11ddf0d2f3e6ea2ca45e4be62dc9168b750e0b09 Mon Sep 17 00:00:00 2001 From: DJ1 Date: Sat, 4 Feb 2023 20:22:38 -0500 Subject: [PATCH 07/20] step five complete --- src/components/Counter.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Counter.js b/src/components/Counter.js index bee29fb4b..7c883feb9 100644 --- a/src/components/Counter.js +++ b/src/components/Counter.js @@ -57,6 +57,7 @@ const [count, setCount] = (0); }; const decrement = () => { /* STEP 5 */ + setCount(count - 1); }; const reset = () => { /* STEP 6 */ From 0d8c25ec7aa23f6ed6d7949c25545860d7ff46de Mon Sep 17 00:00:00 2001 From: DJ1 Date: Sat, 4 Feb 2023 20:24:12 -0500 Subject: [PATCH 08/20] step six complete --- src/components/Counter.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Counter.js b/src/components/Counter.js index 7c883feb9..27c72a97a 100644 --- a/src/components/Counter.js +++ b/src/components/Counter.js @@ -61,6 +61,7 @@ const [count, setCount] = (0); }; const reset = () => { /* STEP 6 */ + setCount(0); }; const style = { From d1394219a8355e2f5e1bb6129401dc013706fe81 Mon Sep 17 00:00:00 2001 From: DJ1 Date: Sat, 4 Feb 2023 20:28:55 -0500 Subject: [PATCH 09/20] step one complete --- src/components/Moods.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Moods.js b/src/components/Moods.js index 98b49467f..4ff70f18b 100644 --- a/src/components/Moods.js +++ b/src/components/Moods.js @@ -28,7 +28,7 @@ STEPS 4, 5, 6: Inside these click handlers set the correct mood, using 'setMood' and the variables below the imports. */ -import React from 'react'; /* STEP 0 */ +import React, { userState } from 'react'; /* STEP 0 */ const initialMood = 'Not sure how I feel'; const happyMood = 'Quite happy!'; @@ -36,6 +36,7 @@ const sadMood = 'Rather sad'; export default function Moods() { /* STEP 1 */ + const { mood, setMood} = useState(happyMood); const makeHappy = () => { /* STEP 4 */ From e2b310d9227142e8a7e6a75e5af8302537cf97b2 Mon Sep 17 00:00:00 2001 From: DJ1 Date: Sat, 4 Feb 2023 20:33:39 -0500 Subject: [PATCH 10/20] step two complete --- src/components/Moods.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Moods.js b/src/components/Moods.js index 4ff70f18b..82bd5aa7e 100644 --- a/src/components/Moods.js +++ b/src/components/Moods.js @@ -51,7 +51,7 @@ export default function Moods() { const style = { fontSize: '1.5em', marginBottom: '0.3em', - color: 'crimson', /* STEP 2 */ + color: mood === happyMood ? 'royalblue' : 'crimson', /* STEP 2 */ }; return ( From b124bc112970620f97cecae46f34d593f0e81196 Mon Sep 17 00:00:00 2001 From: DJ1 Date: Sat, 4 Feb 2023 20:35:54 -0500 Subject: [PATCH 11/20] step three complete --- src/components/Moods.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Moods.js b/src/components/Moods.js index 82bd5aa7e..9d59d852c 100644 --- a/src/components/Moods.js +++ b/src/components/Moods.js @@ -57,7 +57,7 @@ export default function Moods() { return (

Moods

-
Not sure how I feel
{/* STEP 3 */} +
Not sure how I feel
{/* STEP 3 */}
From f99ae22cdc0d3e84a08e1f5d7e1c9779c7b420e8 Mon Sep 17 00:00:00 2001 From: DJ1 Date: Sat, 4 Feb 2023 20:48:22 -0500 Subject: [PATCH 12/20] steps four, five, and six complete --- src/components/Moods.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/Moods.js b/src/components/Moods.js index 9d59d852c..354e30535 100644 --- a/src/components/Moods.js +++ b/src/components/Moods.js @@ -36,16 +36,19 @@ const sadMood = 'Rather sad'; export default function Moods() { /* STEP 1 */ - const { mood, setMood} = useState(happyMood); + const { mood, setMood } = useState(happyMood); const makeHappy = () => { /* STEP 4 */ + setMood(happyMood); }; const makeSad = () => { /* STEP 5 */ + setMood(sadMood); }; const reset = () => { /* STEP 6 */ + setMood(initialMood); }; const style = { From f7b80685a85bafe1f45d3c83ddfded1a8937cd2b Mon Sep 17 00:00:00 2001 From: DJ1 Date: Sat, 4 Feb 2023 20:51:12 -0500 Subject: [PATCH 13/20] step one complete --- src/components/Spinner.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Spinner.js b/src/components/Spinner.js index d0326fd34..fb08e2382 100644 --- a/src/components/Spinner.js +++ b/src/components/Spinner.js @@ -37,7 +37,7 @@ STEP 4: Do you remember the operator we use to do "not"? */ -import React from 'react'; /* STEP 0 */ +import React, { userState } from 'react'; /* STEP 0 */ export default function Spinner() { /* STEP 1 */ From 1c074f8433ae2fe0bf65a7c691dc307040648334 Mon Sep 17 00:00:00 2001 From: DJ1 Date: Sat, 4 Feb 2023 20:55:51 -0500 Subject: [PATCH 14/20] step one complete --- src/components/Spinner.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Spinner.js b/src/components/Spinner.js index fb08e2382..92fe56125 100644 --- a/src/components/Spinner.js +++ b/src/components/Spinner.js @@ -37,10 +37,11 @@ STEP 4: Do you remember the operator we use to do "not"? */ -import React, { userState } from 'react'; /* STEP 0 */ +import React, { useState } from 'react'; /* STEP 0 */ export default function Spinner() { /* STEP 1 */ +const [spinnerOn, setSpinnerOn] = useState(true); const toggleSpinner = () => { /* STEP 4 */ From f2fdeb7e28a60b74f937b740522a97b7ddf0b289 Mon Sep 17 00:00:00 2001 From: DJ1 Date: Sat, 4 Feb 2023 20:59:46 -0500 Subject: [PATCH 15/20] step two complete --- src/components/Spinner.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Spinner.js b/src/components/Spinner.js index 92fe56125..658a2d4d0 100644 --- a/src/components/Spinner.js +++ b/src/components/Spinner.js @@ -51,7 +51,7 @@ const [spinnerOn, setSpinnerOn] = useState(true);

Spinner

{ - true &&
--+--
/* STEP 2 */ + spinnerOn &&
--+--
/* STEP 2 */ }
); From a5f0a11304ff1769576c9e60f793b4386cb890b8 Mon Sep 17 00:00:00 2001 From: DJ1 Date: Sat, 4 Feb 2023 21:06:13 -0500 Subject: [PATCH 17/20] step four complete --- src/components/Spinner.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Spinner.js b/src/components/Spinner.js index 3052c2e2f..f030e6e63 100644 --- a/src/components/Spinner.js +++ b/src/components/Spinner.js @@ -45,6 +45,7 @@ const [spinnerOn, setSpinnerOn] = useState(true); const toggleSpinner = () => { /* STEP 4 */ + setSpinnerOn(!spinnerOn); }; return ( From 3c124bf22953f4c0bc883c59b4b5f8ef03278bfe Mon Sep 17 00:00:00 2001 From: DJ1 Date: Sat, 4 Feb 2023 22:09:32 -0500 Subject: [PATCH 18/20] input.js complete --- src/components/Input.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/Input.js b/src/components/Input.js index 36bf8fe03..88f68ad8d 100644 --- a/src/components/Input.js +++ b/src/components/Input.js @@ -34,10 +34,11 @@ STEP 6: We need to add an extra prop to the element like so: value={inputValue} */ -import React from 'react'; /* STEP 0 */ +import React, { useState } from 'react'; /* STEP 0 */ export default function Input() { /* STEP 1 */ + const[inputValue, setInputValue] = useState(''); const changeInput = evt => { // When the input changes, its whole value can be found inside the event object. @@ -45,23 +46,25 @@ export default function Input() { const { value } = evt.target; /* STEP 4 */ + inputValue(value); }; const reset = () => { /* STEP 5 */ + setInputValue(''); }; const style = { fontSize: '1.5em', marginBottom: '0.3em', - color: 'royalblue', /* STEP 2 */ + color: inputValue.length > 10 ? 'crimson' : 'royalblue' /* STEP 2 */ }; return (

Input

-
{/* STEP 3 */} +
{inputValue.toUpperCase()}
{/* STEP 3 */}
- {/* STEP 6 */} + {/* STEP 6 */}
From 5f5cd3f56da106f22fffa2d8a5d7f2863e5f4885 Mon Sep 17 00:00:00 2001 From: DJ1 Date: Sat, 4 Feb 2023 22:34:31 -0500 Subject: [PATCH 19/20] Square.js complete --- src/components/Squares.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/Squares.js b/src/components/Squares.js index 25ab72546..838d56e7c 100644 --- a/src/components/Squares.js +++ b/src/components/Squares.js @@ -14,12 +14,14 @@ Only one square (or none) can be active at any given point. Find comments below to help you along. */ -import React from 'react'; +import React, { useState } from 'react'; // Use this variable ONLY to initialize a slice of state! const listOfSquareIds = ['sqA', 'sqB', 'sqC', 'sqD']; export default function Squares() { + const [square, setSquare] = useState(listOfSquareIds); + const [activeSquare, setActiveSquare] = useState(null); // Use the state hook twice, as we need two slices of state: 'squares' and // 'activeSquare'. One holds the _array_ of square ids, and the other keeps track // of the currently active square. On page load there's no active square, @@ -30,10 +32,15 @@ export default function Squares() { // It should return a string containing the class name of 'active', if the id passed // as the argument matches the active square in state, empty string otherwise. // Right-click and "inspect element" on the square to see its effect. - return '' + return id === activeSquare ? 'active' : ''; }; const markActive = id => { + if (id === activeSquare) { + setActiveSquare(null); + }else { + setActiveSquare(id); + } // This is a helper used inside an _inlined_ click handler (see below). // Set the id argument to become the active id in state // (unless it already is, in which case we should reset @@ -48,7 +55,7 @@ export default function Squares() { // Nasty bug! We should map over a slice of state, instead of 'listOfSquareIds'. // We might say: "it works, though!" But if the list of squares is not state, // we could never add squares, change squares or remove squares in the future. Fix! - listOfSquareIds.map(id => + Squares.map(id =>
Date: Sat, 4 Feb 2023 23:01:27 -0500 Subject: [PATCH 20/20] Programmers.js complete --- src/components/Programmers.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/components/Programmers.js b/src/components/Programmers.js index bb4aee6bd..ef13a99a3 100644 --- a/src/components/Programmers.js +++ b/src/components/Programmers.js @@ -11,7 +11,7 @@ We can only feature one awesome programmer at a time. Find comments below to help you along. */ -import React from 'react'; +import React, { useState } from 'react'; // Use this variable ONLY to initialize a slice of state! // There is something in the JSX right now breaking this rule... @@ -26,10 +26,17 @@ export const listOfAwesome = [ ]; export default function Programmers() { + const [programmers, setProgrammers] = useState(listOfAwesome); + const [featured, setFeatured] = useState(null); // We'll have to use the state hook twice, as we need two slices of state. // The programmers list on the one hand, and the id of the featured programmer on the other. const getNameOfFeatured = () => { + for (let i = 0; i < programmers.length; i++) { + if (programmers[i].id === featured) { + return programmers[i].name + } + } // Leave this for last! // This is NOT an event handler but a helper function. See its usage inside the JSX. // It's going to utilize both slices of state to return the _name_ of the featured dev. @@ -40,7 +47,7 @@ export default function Programmers() { const style = { fontSize: '1.5em', marginTop: '0.5em', - color: 'royalblue', // 🤔 color turns to gold, when celebrating + color: featured ? 'gold' : 'royalblue', // 🤔 color turns to gold, when celebrating }; return ( @@ -51,9 +58,9 @@ export default function Programmers() { /* Nasty bug! We should map over a slice of state, instead of 'listOfAwesome'. We might think: "it works, though!" But if the list of programmers is not state, we could never add or edit programmers in the future. The list would be a static thing." */ - listOfAwesome.map(dev => + programmers.map(dev =>
- {dev.name} + {dev.name}
) } @@ -63,7 +70,7 @@ export default function Programmers() { // Ternaries are fantastic to render "one thing or the other" depending on the "truthiness" of something. // Pseudo-code: if the currently featured id is truthy render text 1, otherwise render text 2. // Replace the hard-coded false with the correct variable. - false + featured ? `🎉 Let's celebrate ${getNameOfFeatured()}! 🥳` : 'Pick an awesome programmer' }