From a61bd10f0c3da131c11262b90262134812ee53a6 Mon Sep 17 00:00:00 2001 From: Aaron Belmore Date: Wed, 25 Jan 2023 10:43:48 -0500 Subject: [PATCH 1/7] completed tasks 0-3 --- src/components/Counter.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Counter.js b/src/components/Counter.js index 447a5e849..c3f83474a 100644 --- a/src/components/Counter.js +++ b/src/components/Counter.js @@ -46,10 +46,11 @@ 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, {useState} from 'react'; /* STEP 0 */ export default function Counter() { /* STEP 1 */ + const [count, setCount] = useState(0) const increment = () => { /* STEP 4 */ @@ -64,14 +65,14 @@ export default function Counter() { const style = { fontSize: '1.5em', marginBottom: '0.3em', - color: 'royalblue', /* STEP 2 */ + color: count % 2 === 0 ? 'royalblue':'crimson', /* STEP 2 */ }; return (

Counter

- Number 0 is even {/* STEP 3 */} + Number {count} is {count % 2 === 0 ? "even" : "odd"} {/* STEP 3 */}
From d906cf80549d966153f5dd186d105f7450021b28 Mon Sep 17 00:00:00 2001 From: Aaron Belmore Date: Wed, 25 Jan 2023 10:49:06 -0500 Subject: [PATCH 2/7] completed Counter --- src/components/Counter.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Counter.js b/src/components/Counter.js index c3f83474a..ec68a2d3d 100644 --- a/src/components/Counter.js +++ b/src/components/Counter.js @@ -53,13 +53,14 @@ export default function Counter() { const [count, setCount] = useState(0) const increment = () => { - /* STEP 4 */ + setCount(count + 1); }; const decrement = () => { /* STEP 5 */ + setCount(count + 1); }; const reset = () => { - /* STEP 6 */ + setCount(count = 0); }; const style = { From 9ffded39e44ea080fad989f6d9e683ea1856df49 Mon Sep 17 00:00:00 2001 From: Aaron Belmore Date: Wed, 25 Jan 2023 10:53:14 -0500 Subject: [PATCH 3/7] Fixed error in step 5 (Counter) --- src/components/Counter.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Counter.js b/src/components/Counter.js index ec68a2d3d..47504c1ab 100644 --- a/src/components/Counter.js +++ b/src/components/Counter.js @@ -57,10 +57,10 @@ export default function Counter() { }; const decrement = () => { /* STEP 5 */ - setCount(count + 1); + setCount(count - 1); }; const reset = () => { - setCount(count = 0); + setCount(0); }; const style = { From b9ce22875b222e5a880af8e6ab19732f3c578cd3 Mon Sep 17 00:00:00 2001 From: Aaron Belmore Date: Wed, 25 Jan 2023 10:58:37 -0500 Subject: [PATCH 4/7] Completed tasks 0 - 3 in Moods --- src/components/Input.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Input.js b/src/components/Input.js index 36bf8fe03..b9e8cf814 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. @@ -53,7 +54,7 @@ export default function Input() { const style = { fontSize: '1.5em', marginBottom: '0.3em', - color: 'royalblue', /* STEP 2 */ + color: inputValue.length > 10 ? 'crimson' : 'royalblue' /* STEP 2 */ }; return ( From aa9ad9fd9107c928596bba172443103a30e25a23 Mon Sep 17 00:00:00 2001 From: Aaron Belmore Date: Wed, 25 Jan 2023 11:38:26 -0500 Subject: [PATCH 5/7] completed input --- src/components/Input.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/Input.js b/src/components/Input.js index b9e8cf814..199d90ff7 100644 --- a/src/components/Input.js +++ b/src/components/Input.js @@ -34,7 +34,7 @@ STEP 6: We need to add an extra prop to the element like so: value={inputValue} */ -import React, { useState} from 'react'; /* STEP 0 */ +import React, { useState } from 'react'; /* STEP 0 */ export default function Input() { /* STEP 1 */ @@ -44,23 +44,24 @@ export default function Input() { // When the input changes, its whole value can be found inside the event object. // Log out the synthetic event object 'evt' and see for yourself. const { value } = evt.target; - - /* STEP 4 */ + // console.log(evt.target) +setInputValue(value) /* STEP 4 */ }; const reset = () => { /* STEP 5 */ + setInputValue(''); }; const style = { fontSize: '1.5em', marginBottom: '0.3em', - color: inputValue.length > 10 ? 'crimson' : 'royalblue' /* STEP 2 */ + color:inputValue.length > 10 ? 'crimson' : 'royalblue', /* STEP 2 */ }; return (

Input

-
{/* STEP 3 */} +
{inputValue.toUpperCase()}
{/* STEP 6 */} From 7b8c512eebbd3cb34d92565ee898eae1ae12805c Mon Sep 17 00:00:00 2001 From: Aaron Belmore Date: Wed, 25 Jan 2023 12:12:29 -0500 Subject: [PATCH 6/7] Completed Mood --- src/components/Moods.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/Moods.js b/src/components/Moods.js index 98b49467f..44e5e2acd 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, { useState } from 'react'; /* STEP 0 */ const initialMood = 'Not sure how I feel'; const happyMood = 'Quite happy!'; @@ -36,27 +36,29 @@ const sadMood = 'Rather sad'; export default function Moods() { /* STEP 1 */ + const [mood,setMood] = useState(initialMood); + console.log(mood); const makeHappy = () => { - /* STEP 4 */ + setMood(happyMood); }; const makeSad = () => { - /* STEP 5 */ + setMood(sadMood); }; const reset = () => { - /* STEP 6 */ + setMood(initialMood); }; const style = { fontSize: '1.5em', marginBottom: '0.3em', - color: 'crimson', /* STEP 2 */ + color: mood === happyMood ? 'royalblue':'crimson', /* STEP 2 */ }; return (

Moods

-
Not sure how I feel
{/* STEP 3 */} +
{mood}
From 8d1709cbf376356160a2077568e4248bb445d496 Mon Sep 17 00:00:00 2001 From: Aaron Belmore Date: Wed, 25 Jan 2023 20:53:16 -0500 Subject: [PATCH 7/7] Working on getNameOfFeatured --- src/components/Programmers.js | 20 ++++++++++++++------ src/components/Spinner.js | 9 ++++++--- 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/src/components/Programmers.js b/src/components/Programmers.js index bb4aee6bd..aa8fb8fcb 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... @@ -28,19 +28,27 @@ export const listOfAwesome = [ export default function Programmers() { // 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 [programmers, setProgrammers] = useState(listOfAwesome); +// console.log(programmers) +const [featured, setGetFeatured] = useState(null) const getNameOfFeatured = () => { // 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. // The beauty of closures is that we can "see" both slices of state from this region // of the program, without needing to inject the information through arguments. + for(let i = 0; i < programmers.length; i++){ + if(programmers[i] === featured){ + return programmers[i].name; + } + } + }; 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 +59,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 +71,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' } diff --git a/src/components/Spinner.js b/src/components/Spinner.js index d0326fd34..5da2b3544 100644 --- a/src/components/Spinner.js +++ b/src/components/Spinner.js @@ -37,23 +37,26 @@ STEP 4: Do you remember the operator we use to do "not"? */ -import React 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 */ + setSpinnerOn(!spinnerOn); }; return (

Spinner

{ - true &&
--+--
/* STEP 2 */ + spinnerOn &&
--+--
/* STEP 2 */ + }
);