kaylakremer · kaylakremer · Jan 20, 2024 · Jan 18, 2024 · Jan 18, 2024 · Jan 18, 2024
diff --git a/README.md b/README.md
@@ -1,18 +1,43 @@
 # Coderbyte React Challenges
 
--   This repo contains my solutions for the [React Interview Kit](https://coderbyte.com/interview-kit/react) challenges.
+-   This repo contains my solutions for the [React & React Native challenges](https://coderbyte.com/challenges).
 
 -   All solutions received a 10/10 score.
 
 -   Feel free to use any of my solutions for yourself!
 
-### Update 1/8/23
+## Updates
 
-I added the missing solutions to the newer challenges Coderbyte made for React/React Native since I first created this repo. As of now, all challenges are solved. Since this repo seems to be popular, I will try to periodically check and update it with more solutions if Coderbyte decides to add more React challenges.
+#### 1/8/23
 
-### Update 6/13/23
+Added missing solutions for the newer challenges Coderbyte released.
 
-Refactored a few solutions!
+#### 6/13/23
 
-### Update 9/21/23
-Slight editing of README.
+Refactored a few solutions.
+
+#### 9/21/23
+
+Slight editing of `README`.
+
+#### 1/20/24
+
+-   Refactored all previous solutions to use React 18 and use .jsx/.tsx file extensions
+-   Redid solution for `tictactoe.jsx`
+-   Added new solutions for the following challenges:
+    -   `color-dropdown.jsx`
+    -   `letter-tiles.jsx`
+    -   `live-paragraph.jsx`
+    -   `quiz-builder.jsx`
+    -   `weather-dashboard.jsx`
+-   Updated `README``
+
+## FAQ
+
+**Can you include the challenge's question in your solution?**
+
+Unfortunately, no since I don't want to violate Coderbyte's [Terms of Use](https://coderbyte.com/terms). My solutions are only meant as a resource to check against your own or just to study from in general! You'll need to pay for Coderbyte to see the questions to their code challenges.
+
+**Do you accept submissions for alternative solutions?**
+
+No, not at this time. I originally intended to use this repo as a way to keep a copy of my solutions I wrote when I ended my Coderbyte subscription. However, since this repo has grown in popularity, if there is more interest to open this repo up and accept alternative solution submissions, I may consider this!
diff --git a/solutions/button-toggle.js b/solutions/button-toggle.js
diff --git a/solutions/button-toggle.jsx b/solutions/button-toggle.jsx
@@ -0,0 +1,19 @@
+import React, { useState } from "react"
+import { createRoot } from "react-dom/client"
+
+const Toggle = () => {
+    const [toggle, setToggle] = useState(false)
+
+    const handleClick = () => {
+        setToggle(!toggle)
+    }
+
+    return (
+        <button type="button" onClick={handleClick}>
+            {toggle ? "ON" : "OFF"}
+        </button>
+    )
+}
+
+const root = createRoot(document.getElementById("root"))
+root.render(<Toggle />)
diff --git a/solutions/color-dropdown.jsx b/solutions/color-dropdown.jsx
@@ -0,0 +1,21 @@
+import React, { useState } from "react"
+import { createRoot } from "react-dom/client"
+
+function ColorSelector() {
+    const colors = { red: "Red", blue: "Blue", green: "Green" }
+    const [color, setColor] = useState(colors.red)
+    const onChange = e => setColor(e.target.value)
+    return (
+        <>
+            <select onChange={onChange} value={color}>
+                <option value={colors.red}>{colors.red}</option>
+                <option value={colors.blue}>{colors.blue}</option>
+                <option value={colors.green}>{colors.green}</option>
+            </select>
+            {color && <p>{`You have selected: ${color}`}</p>}
+        </>
+    )
+}
+
+const root = createRoot(document.getElementById("root"))
+root.render(<ColorSelector />)
diff --git a/solutions/context-api.js → solutions/context-api.jsx b/solutions/context-api.js → solutions/context-api.jsx
@@ -1,5 +1,5 @@
 import React, { useState, createContext, useContext } from "react"
-import ReactDOM from "react-dom"
+import { createRoot } from "react-dom/client"
 
 const languages = ["JavaScript", "Python"]
 const LanguageContext = createContext({
@@ -8,25 +8,14 @@ const LanguageContext = createContext({
     setLanguage: () => {},
 })
 
-function App() {
-    const [language, setLanguage] = useState(languages[0])
-    return (
-        <LanguageContext.Provider value={{ languages, language, setLanguage }}>
-            <MainSection />
-        </LanguageContext.Provider>
-    )
-}
-
-function MainSection() {
+const MainSection = () => {
     const { languages, language, setLanguage } = useContext(LanguageContext)
     const currentIndex = languages.indexOf(language)
-    const toggleLanguage = () => {
-        if (currentIndex === languages.length - 1) {
-            setLanguage(languages[0])
-        } else {
-            setLanguage(languages[currentIndex + 1])
-        }
-    }
+    const toggleLanguage = () =>
+        currentIndex === languages.length - 1
+            ? setLanguage(languages[0])
+            : setLanguage(languages[currentIndex + 1])
+
     return (
         <div>
             <p id="favoriteLanguage">{`Favorite programming language: ${language}`}</p>
@@ -37,4 +26,14 @@ function MainSection() {
     )
 }
 
-ReactDOM.render(<App />, document.getElementById("root"))
+const App = () => {
+    const [language, setLanguage] = useState(languages[0])
+    return (
+        <LanguageContext.Provider value={{ languages, language, setLanguage }}>
+            <MainSection />
+        </LanguageContext.Provider>
+    )
+}
+
+const root = createRoot(document.getElementById("root"))
+root.render(<App />)
diff --git a/solutions/letter-tiles.jsx b/solutions/letter-tiles.jsx
@@ -0,0 +1,83 @@
+import React, { useState, useCallback, useMemo } from "react"
+import { createRoot } from "react-dom/client"
+
+const style = {
+    letterContainer: {
+        overflow: "auto",
+        marginBottom: "10px",
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    letter: {
+        float: "left",
+        padding: "10px 10px",
+        background: "#c9e4ed",
+        borderRadius: "5px",
+        marginRight: "5px",
+        marginTop: "5px",
+        cursor: "pointer",
+    },
+    outputString: {
+        marginTop: "20px",
+        textAlign: "center",
+    },
+}
+
+const Tile = ({ letter, outputArray, setOutputArray, tally, setTally }) => {
+    const onClick = useCallback(() => {
+        if (!tally[letter]) {
+            setTally({ ...tally, [`${letter}`]: 1 })
+            setOutputArray([...outputArray, letter])
+        } else if (tally[`${letter}`] && tally[`${letter}`] === 2) {
+            setTally({ ...tally, [`${letter}`]: 0 })
+            const slicedArray = outputArray.slice(0, outputArray.length - 2)
+            setOutputArray([...slicedArray, "_"])
+        } else {
+            setTally({ ...tally, [`${letter}`]: tally[`${letter}`] + 1 })
+            setOutputArray([...outputArray, letter])
+        }
+    }, [letter, outputArray, setOutputArray, tally, setTally])
+
+    return (
+        <button type="button" onClick={onClick} style={style.letter}>
+            {letter}
+        </button>
+    )
+}
+
+const Application = () => {
+    const [outputArray, setOutputArray] = useState([])
+    const [tally, setTally] = useState({})
+    const alphabetArray = useMemo(() => {
+        let arr = []
+        for (let i = 65; i <= 90; i++) {
+            const char = String.fromCharCode(i)
+            arr.push(char)
+        }
+        return arr
+    }, [])
+    return (
+        <section>
+            <aside style={style.letterContainer} id="letterContainer">
+                {alphabetArray.map((letter, index) => (
+                    <Tile
+                        tally={tally}
+                        setTally={setTally}
+                        letter={letter}
+                        key={index}
+                        outputArray={outputArray}
+                        setOutputArray={setOutputArray}
+                    />
+                ))}
+            </aside>
+            <div style={style.outputString} id="outputString">
+                {outputArray.join("")}
+            </div>
+        </section>
+    )
+}
+
+const root = createRoot(document.getElementById("root"))
+root.render(<Application />)
diff --git a/solutions/list.js b/solutions/list.js
diff --git a/solutions/list.jsx b/solutions/list.jsx
@@ -0,0 +1,33 @@
+import React from "react"
+import { createRoot } from "react-dom/client"
+
+const data = [
+    { name: "Daniel", age: 25 },
+    { name: "John", age: 24 },
+    { name: "Jen", age: 31 },
+]
+
+const DataItem = ({ name, age }) => (
+    <li>
+        <span>{`${name} `}</span>
+        <span>{age}</span>
+    </li>
+)
+
+const DataList = ({ data }) => (
+    <div>
+        <h2>Data List</h2>
+        <ul>
+            {data.map((dataItem, index) => (
+                <DataItem
+                    name={dataItem.name}
+                    age={dataItem.age}
+                    key={`data-item-${index}`}
+                />
+            ))}
+        </ul>
+    </div>
+)
+
+const root = createRoot(document.getElementById("root"))
+root.render(<DataList data={data} />)
diff --git a/solutions/live-paragraph.jsx b/solutions/live-paragraph.jsx
@@ -0,0 +1,19 @@
+import React, { useState } from "react"
+import { createRoot } from "react-dom/client"
+
+function LiveText() {
+    const [text, setText] = useState("")
+
+    const onChange = ({ target: { value } }) => {
+        setText(value)
+    }
+    return (
+        <>
+            <input type="text" onChange={onChange} value={text} />
+            <p>{text}</p>
+        </>
+    )
+}
+
+const root = createRoot(document.getElementById("root"))
+root.render(<LiveText />)