├── 3-props-state
    ├── 14-quiz
    │   ├── Question.js
    │   ├── App.js
    │   └── Quiz.js
    ├── 13-stopwatch
    │   ├── App.js
    │   └── Stopwatch.js
    ├── 12-notifications
    │   ├── Notification.js
    │   └── App.js
    ├── 15-trending-now
    │   ├── Movie.js
    │   ├── TrendingList.js
    │   └── App.js
    └── 11-giving-props
    │   └── App.js
├── 6-hooks
    ├── 28-color-effects-i
    │   ├── styles.css
    │   └── App.js
    ├── 29-color-effects-ii
    │   ├── styles.css
    │   └── App.js
    ├── 27-cookie-clicker
    │   ├── styles.css
    │   └── App.js
    ├── 31-kanban-board
    │   ├── Column.js
    │   ├── Task.js
    │   ├── styles.css
    │   └── App.js
    └── 30-barbenheimer
    │   ├── ThemeSwitcher.js
    │   ├── Home.js
    │   ├── styles.css
    │   └── App.js
├── 5-forms
    ├── 25-haiku
    │   ├── App.js
    │   └── Haiku.js
    ├── 26-travel-log
    │   ├── App.js
    │   └── TravelLog.js
    ├── 21-newsletter
    │   ├── App.js
    │   └── Newsletter.js
    ├── 24-animal-rescue
    │   ├── App.js
    │   └── PetAdoptionForm.js
    ├── 22-high-score-i
    │   ├── App.js
    │   └── HighScore.js
    └── 23-high-score-ii
    │   ├── App.js
    │   └── HighScore.js
├── 7-data-fetching
    ├── 35-data-evolution
    │   ├── App.js
    │   └── Pokedex.js
    ├── 36-book-finder
    │   ├── App.js
    │   └── BookFinder.js
    ├── 33-now-loading
    │   ├── App.js
    │   └── LoadingScreen.js
    ├── 32-our-universe
    │   └── App.js
    └── 34-i-am-error
    │   └── App.js
├── 4-events
    ├── 19-noise-levels
    │   ├── App.js
    │   └── VolumeControl.js
    ├── 20-waterfest
    │   ├── App.js
    │   └── EventInvitation.js
    ├── 18-a-focus-in-art
    │   ├── App.js
    │   └── ZoomableImage.js
    ├── 16-online-shopping
    │   ├── App.js
    │   └── ShoppingItem.js
    └── 17-tooltips
    │   └── App.js
├── 8-routing
    ├── 39-paper-route-trail
    │   ├── components
    │   │   ├── House.js
    │   │   ├── Garden.js
    │   │   ├── Museum.js
    │   │   ├── School.js
    │   │   └── Map.js
    │   ├── index.js
    │   ├── App.js
    │   └── styles.css
    ├── 38-browser
    │   ├── components
    │   │   ├── One.js
    │   │   ├── Two.js
    │   │   ├── Three.js
    │   │   └── NavBar.js
    │   ├── index.js
    │   ├── styles.css
    │   └── App.js
    ├── 37-know-your-routes
    │   ├── components
    │   │   ├── NavBar.js
    │   │   ├── Owala.js
    │   │   ├── Stanley.js
    │   │   └── Yeti.js
    │   ├── index.js
    │   ├── styles.css
    │   └── App.js
    ├── 41-ponoplayer
    │   ├── components
    │   │   ├── NavBar.js
    │   │   ├── Customers.js
    │   │   ├── About.js
    │   │   ├── Gallery.js
    │   │   └── Home.js
    │   ├── index.js
    │   ├── styles.css
    │   └── App.js
    └── 40-link-to-the-path
    │   ├── index.js
    │   ├── components
    │       ├── NavBar.js
    │       ├── LegendOfZelda.js
    │       ├── LinkPast.js
    │       ├── LinkWorlds.js
    │       ├── BoTW.js
    │       └── TwilightPrincess.js
    │   ├── styles.css
    │   └── App.js
├── 1-first-react-app
    ├── 03-writing-react
    │   └── App.js
    ├── 05-social-post
    │   ├── App.js
    │   ├── FollowButton.js
    │   ├── Post.js
    │   └── LikeButton.js
    ├── 02-our-workstation
    │   ├── index.js
    │   └── public
    │   │   └── index.html
    └── 04-building-blocks
    │   ├── FollowButton.js
    │   ├── Post.js
    │   └── LikeButton.js
├── 2-jsx-components
    ├── 07-embedded-js
    │   └── App.js
    ├── 10-hot-takes-pt-2
    │   ├── Footer.js
    │   ├── App.js
    │   ├── Header.js
    │   └── Reviews.js
    ├── 09-hot-takes-pt-1
    │   ├── Footer.js
    │   ├── App.js
    │   └── Header.js
    ├── 06-band-tour
    │   └── App.js
    └── 08-travel-gallery
    │   └── App.js
└── README.md


/3-props-state/14-quiz/Question.js:
--------------------------------------------------------------------------------
1 | export default function Question(props) {
2 |   return <p>{props.question}</p>;
3 | }
4 | 


--------------------------------------------------------------------------------
/6-hooks/28-color-effects-i/styles.css:
--------------------------------------------------------------------------------
1 | /* Color Effects I 🎨 */
2 | /* Codédex */
3 | 
4 | #button {
5 |   display: grid;
6 |   place-items: center;
7 |   height: 100vh; 
8 | }


--------------------------------------------------------------------------------
/6-hooks/29-color-effects-ii/styles.css:
--------------------------------------------------------------------------------
1 | /* Color Effects II 🌈 */
2 | /* Codédex */
3 | 
4 | #toggle {
5 |   display: grid;
6 |   place-items: center;
7 |   height: 100vh; 
8 | }


--------------------------------------------------------------------------------
/5-forms/25-haiku/App.js:
--------------------------------------------------------------------------------
1 | // Haiku 📜
2 | // Codédex
3 | 
4 | import React from "react";
5 | import Haiku from "./Haiku";
6 | 
7 | export default function App() {
8 |   return <Haiku />
9 | }


--------------------------------------------------------------------------------
/7-data-fetching/35-data-evolution/App.js:
--------------------------------------------------------------------------------
1 | // Data Evolution 📱
2 | // Codédex
3 | 
4 | import Pokedex from "./Pokedex.js";
5 | 
6 | export default function App() {
7 |   return <Pokedex />
8 | }


--------------------------------------------------------------------------------
/7-data-fetching/36-book-finder/App.js:
--------------------------------------------------------------------------------
1 | // Book Finder 🔍
2 | // Codédex
3 | 
4 | import BookFinder from "./BookFinder";
5 | 
6 | export default function App() {
7 |   return <BookFinder />
8 | }


--------------------------------------------------------------------------------
/3-props-state/14-quiz/App.js:
--------------------------------------------------------------------------------
1 | // Quiz 🙋🏽‍♀️
2 | // Codédex
3 | 
4 | import React from "react";
5 | import Quiz from "./Quiz.js"
6 | 
7 | export default function App() {
8 |   return <Quiz />;
9 | }


--------------------------------------------------------------------------------
/6-hooks/27-cookie-clicker/styles.css:
--------------------------------------------------------------------------------
1 | /* Cookie Clicker 🍪 */
2 | /* Codédex */
3 | 
4 | #cookie {
5 |   display: grid;
6 |   place-items: center;
7 |   height: 100vh; 
8 |   text-align: center;
9 | }


--------------------------------------------------------------------------------
/4-events/19-noise-levels/App.js:
--------------------------------------------------------------------------------
1 | // Noise Levels 🔊
2 | // Codédex
3 | 
4 | import VolumeControl from "VolumeControl.js";
5 | 
6 | export default function App() {
7 |   return <VolumeControl />
8 | }
9 | 


--------------------------------------------------------------------------------
/7-data-fetching/33-now-loading/App.js:
--------------------------------------------------------------------------------
1 | // Now Loading ⏳
2 | // Codédex
3 | 
4 | import LoadingScreen from "./LoadingScreen";
5 | 
6 | export default function App() {
7 |   return <LoadingScreen />
8 | }


--------------------------------------------------------------------------------
/5-forms/26-travel-log/App.js:
--------------------------------------------------------------------------------
1 | // Travel Log 🗺️
2 | // Codédex
3 | 
4 | import React from "react";
5 | import TravelLog from "./TravelLog";
6 | 
7 | export default function App() {
8 |   return <TravelLog />
9 | }


--------------------------------------------------------------------------------
/5-forms/21-newsletter/App.js:
--------------------------------------------------------------------------------
1 | // Newsletter 📰
2 | // Codédex
3 | 
4 | import React from "react";
5 | import Newsletter from "./Newsletter.js";
6 | 
7 | export default function App() {
8 |   return <Newsletter />
9 | }


--------------------------------------------------------------------------------
/8-routing/39-paper-route-trail/components/House.js:
--------------------------------------------------------------------------------
1 | export default function House() {
2 |   return (
3 |     <div>
4 |       <h2>House</h2>
5 |       <p>Welcome to the House page!</p>
6 |     </div>
7 |   );
8 | }
9 | 


--------------------------------------------------------------------------------
/1-first-react-app/03-writing-react/App.js:
--------------------------------------------------------------------------------
 1 | // Writing React ✍🏼
 2 | // Codédex
 3 | 
 4 | export default function App() {
 5 |   return (
 6 |     <div>
 7 |       <h1>Hello, World!</h1>
 8 |     </div>
 9 |   );
10 | }


--------------------------------------------------------------------------------
/8-routing/39-paper-route-trail/components/Garden.js:
--------------------------------------------------------------------------------
1 | export default function Garden() {
2 |   return (
3 |     <div>
4 |       <h2>Garden</h2>
5 |       <p>Welcome to the Garden page!</p>
6 |     </div>
7 |   );
8 | }
9 | 


--------------------------------------------------------------------------------
/8-routing/39-paper-route-trail/components/Museum.js:
--------------------------------------------------------------------------------
1 | export default function Museum() {
2 |   return (
3 |     <div>
4 |       <h2>Museum</h2>
5 |       <p>Welcome to the Museum page!</p>
6 |     </div>
7 |   );
8 | }
9 | 


--------------------------------------------------------------------------------
/8-routing/39-paper-route-trail/components/School.js:
--------------------------------------------------------------------------------
1 | export default function School() {
2 |   return (
3 |     <div>
4 |       <h2>School</h2>
5 |       <p>Welcome to the School page!</p>
6 |     </div>
7 |   );
8 | }
9 | 


--------------------------------------------------------------------------------
/3-props-state/13-stopwatch/App.js:
--------------------------------------------------------------------------------
 1 | // Stopwatch ⏱️
 2 | // Codédex
 3 | 
 4 | import React from "react";
 5 | import Stopwatch from "./Stopwatch.js";
 6 | 
 7 | export default function App() {
 8 |   return <Stopwatch />;
 9 | }
10 | 


--------------------------------------------------------------------------------
/2-jsx-components/07-embedded-js/App.js:
--------------------------------------------------------------------------------
 1 | // Embedded JS
 2 | // Codédex
 3 | 
 4 | export default function App() {
 5 |   const name = "Ada";
 6 | 
 7 |   return (
 8 |     <div>
 9 |       My name is {name}!
10 |     </div>
11 |   )
12 | }


--------------------------------------------------------------------------------
/5-forms/24-animal-rescue/App.js:
--------------------------------------------------------------------------------
1 | // Animal Rescue 🐶
2 | // Codédex
3 | 
4 | import React from "react";
5 | import PetAdoptionForm from "./PetAdoptionForm";
6 | 
7 | export default function App() {
8 |   return <PetAdoptionForm />
9 | }


--------------------------------------------------------------------------------
/1-first-react-app/05-social-post/App.js:
--------------------------------------------------------------------------------
 1 | // Social Post 📱
 2 | // Codédex
 3 | 
 4 | import Post from "./Post.js";
 5 | 
 6 | export default function App() {
 7 |   return (
 8 |     <div>
 9 |       <Post />
10 |     </div>
11 |   );
12 | }


--------------------------------------------------------------------------------
/5-forms/22-high-score-i/App.js:
--------------------------------------------------------------------------------
 1 | // High Score I 🕹️
 2 | // Codédex
 3 | 
 4 | import React from "react";
 5 | import HighScore from "./HighScore";
 6 | import "./highscore.css";
 7 | 
 8 | export default function App() {
 9 |   return <HighScore />
10 | }


--------------------------------------------------------------------------------
/5-forms/23-high-score-ii/App.js:
--------------------------------------------------------------------------------
 1 | // High Score II 🕹️
 2 | // Codédex
 3 | 
 4 | import React from "react";
 5 | import HighScore from "./HighScore";
 6 | import "./highscore.css";
 7 | 
 8 | export default function App() {
 9 |   return <HighScore />
10 | }


--------------------------------------------------------------------------------
/4-events/20-waterfest/App.js:
--------------------------------------------------------------------------------
 1 | // WaterFest 🏝️
 2 | // Codédex
 3 | 
 4 | import EventInvitation from "./EventInvitation.js";
 5 | 
 6 | export default function App() {
 7 |   return (
 8 |     <div>
 9 |       <EventInvitation />
10 |     </div>
11 |   );
12 | }


--------------------------------------------------------------------------------
/4-events/18-a-focus-in-art/App.js:
--------------------------------------------------------------------------------
1 | // A Focus In Art 🎨
2 | // Codédex
3 | 
4 | import ZoomableImage from "./ZoomableImage.js";
5 | 
6 | export default function App() {
7 |   return <div><ZoomableImage imageURL="https://i.imgur.com/ZIBbN09.jpeg" zoomFactor={10} /></div>
8 | }


--------------------------------------------------------------------------------
/2-jsx-components/10-hot-takes-pt-2/Footer.js:
--------------------------------------------------------------------------------
 1 | // Hot Takes Pt. 2 ❤️‍🔥
 2 | // Codédex
 3 | export default function Footer() {
 4 |   return (
 5 |     <footer>
 6 |       <ul>
 7 |         <li>Contact</li>
 8 |         <li>Newsletter</li>
 9 |       </ul>
10 |     </footer>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/8-routing/38-browser/components/One.js:
--------------------------------------------------------------------------------
1 | export default function One() {
2 |   return (
3 |     <div className="center">
4 |       <img src="https://i.gifer.com/origin/c3/c3d8b4a13338df2b64fba690f4138632_w200.gif" alt="bowser gif" />
5 |       <p>you are on V1</p>
6 |     </div>
7 |   );
8 | }
9 | 


--------------------------------------------------------------------------------
/8-routing/38-browser/components/Two.js:
--------------------------------------------------------------------------------
1 | export default function Two() {
2 |   return (
3 |     <div className="center">
4 |       <img src="https://i.gifer.com/origin/8d/8dd49d4f63929d2a3a87ae99bfa265d5_w200.gif" alt="bowser gif" />
5 |       <p>you are on V2</p>
6 |     </div>
7 |   );
8 | }
9 | 


--------------------------------------------------------------------------------
/2-jsx-components/09-hot-takes-pt-1/Footer.js:
--------------------------------------------------------------------------------
 1 | // Hot Takes Pt. 1 🔥
 2 | // Codédex
 3 | 
 4 | export default function Footer() {
 5 |   return (
 6 |     <footer>
 7 |       <ul>
 8 |         <li>Contact</li>
 9 |         <li>Newsletter</li>
10 |       </ul>
11 |     </footer>
12 |   );
13 | }
14 | 


--------------------------------------------------------------------------------
/8-routing/38-browser/components/Three.js:
--------------------------------------------------------------------------------
1 | export default function Three() {
2 |   return (
3 |     <div className="center">
4 |       <img src="https://i.gifer.com/origin/92/92922df1c630e89f48d9501c6ac02094_w200.gif" alt="bowser gif" />
5 |       <p>you are on V3</p>
6 |     </div>
7 |   );
8 | }
9 | 


--------------------------------------------------------------------------------
/2-jsx-components/09-hot-takes-pt-1/App.js:
--------------------------------------------------------------------------------
 1 | // Hot Takes Pt. 1 🔥
 2 | // Codédex
 3 | 
 4 | import Header from "./Header.js";
 5 | import Footer from "./Footer.js";
 6 | 
 7 | export default function App() {
 8 |   return (
 9 |     <div>
10 |       <Header />
11 |       <Footer />
12 |     </div>
13 |   );
14 | }


--------------------------------------------------------------------------------
/1-first-react-app/02-our-workstation/index.js:
--------------------------------------------------------------------------------
 1 | // Our Workstation 🖥️
 2 | // Codédex
 3 | 
 4 | import React from "react";
 5 | import { createRoot } from "react-dom/client";
 6 | import "./styles.css";
 7 | import App from "./App";
 8 | 
 9 | const container = document.getElementById("root");
10 | const root = createRoot(container);
11 | 
12 | root.render(<App />);


--------------------------------------------------------------------------------
/3-props-state/12-notifications/Notification.js:
--------------------------------------------------------------------------------
 1 | // Notifications 🔴
 2 | // Codédex
 3 | 
 4 | import React from "react";
 5 | 
 6 | export default function Notification(props) {
 7 |   let classString = "";
 8 |   if (props.isRead == false) {
 9 |     classString = "not-read";
10 |   }
11 |   return <div className={classString}>{props.message}</div>;
12 | }
13 | 


--------------------------------------------------------------------------------
/5-forms/21-newsletter/Newsletter.js:
--------------------------------------------------------------------------------
 1 | // Newsletter 📰
 2 | // Codédex
 3 | 
 4 | import React from 'react';
 5 | 
 6 | export default function Newsletter() {
 7 |   return (
 8 |     <form>
 9 |       <label htmlFor="email">Email:</label>
10 |       <input type="email" id="email" />
11 |       <button type="submit">Sign up</button>
12 |     </form>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/2-jsx-components/10-hot-takes-pt-2/App.js:
--------------------------------------------------------------------------------
 1 | // Hot Takes Pt. 2 ❤️‍🔥
 2 | // Codédex
 3 | 
 4 | import Header from "./Header.js";
 5 | import Footer from "./Footer.js";
 6 | import Reviews from "./Reviews.js";
 7 | 
 8 | export default function App() {
 9 |   return (
10 |     <div>
11 |       <Header />
12 |       <Reviews />
13 |       <Footer />
14 |     </div>
15 |   );
16 | }


--------------------------------------------------------------------------------
/1-first-react-app/02-our-workstation/public/index.html:
--------------------------------------------------------------------------------
 1 | <!-- Our Workstation 🖥️ -->
 2 | <!-- Codédex -->
 3 | 
 4 | <!doctype html>
 5 | <html lang="en">
 6 |   <head>
 7 |     <meta charset="UTF-8" />
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 9 |     <title>Document</title>
10 |   </head>
11 |   <body>
12 |     <div id="root"></div>
13 |   </body>
14 | </html>


--------------------------------------------------------------------------------
/2-jsx-components/09-hot-takes-pt-1/Header.js:
--------------------------------------------------------------------------------
 1 | // Hot Takes Pt. 1 🔥
 2 | // Codédex
 3 | 
 4 | export default function Header() {
 5 |   return (
 6 |     <header>
 7 |       <h1>Hot Takes 🔥</h1>
 8 |       <nav>
 9 |         <ul>
10 |           <li>New Reviews</li>
11 |           <li>Recents</li>
12 |           <li>Archives</li>
13 |         </ul>
14 |       </nav>
15 |     </header>
16 |   );
17 | }
18 | 


--------------------------------------------------------------------------------
/2-jsx-components/10-hot-takes-pt-2/Header.js:
--------------------------------------------------------------------------------
 1 | // Hot Takes Pt. 2 ❤️‍🔥
 2 | // Codédex
 3 | 
 4 | export default function Header() {
 5 |   return (
 6 |     <header>
 7 |       <h1>Hot Takes 🔥</h1>
 8 |       <nav>
 9 |         <ul>
10 |           <li>New Reviews</li>
11 |           <li>Recents</li>
12 |           <li>Archives</li>
13 |         </ul>
14 |       </nav>
15 |     </header>
16 |   );
17 | }
18 | 


--------------------------------------------------------------------------------
/8-routing/37-know-your-routes/components/NavBar.js:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom"; 
 2 | import "../styles.css";
 3 | 
 4 | export default function NavBar() {
 5 | 
 6 |   return (
 7 |     <nav className="navbar"> 
 8 |       <Link to="/owala" >  Owala  </Link> 
 9 |       <Link to="/stanley" >  Stanley </Link> 
10 |       <Link to="/yeti" >  Yeti  </Link> 
11 |     </nav> 
12 |   );
13 | }
14 | 


--------------------------------------------------------------------------------
/3-props-state/15-trending-now/Movie.js:
--------------------------------------------------------------------------------
 1 | // Trending Now 🎬
 2 | // Codédex
 3 | 
 4 | export default function Movie(props) {
 5 |   return (
 6 |     <div className="movie">
 7 |       <img src={props.imageUrl} alt={props.title} />
 8 |       <div className="movie-info">
 9 |         <h3>{props.title}</h3>
10 |         <h4>Released in {props.releaseYear}</h4>
11 |       </div>
12 |     </div>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/6-hooks/31-kanban-board/Column.js:
--------------------------------------------------------------------------------
 1 | // Kanban Board 📋
 2 | // Codédex
 3 | 
 4 | import React from "react";
 5 | import Task from "./Task";
 6 | 
 7 | export default function Column ({ title, tasks }) {
 8 |   return (
 9 |     <div className="column">
10 |       <h2>{title}</h2>
11 |       {tasks.map(function(task) {
12 |         <Task key={task.id} task={task} />
13 |       })}
14 |     </div>
15 |   );
16 | }


--------------------------------------------------------------------------------
/8-routing/41-ponoplayer/components/NavBar.js:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom"; 
 2 | import "../styles.css";
 3 | 
 4 | export default function NavBar() {
 5 |   return (
 6 |     <nav className="navbar"> 
 7 |       <Link to="/" >Home</Link> 
 8 |       <Link to="/about" >About</Link> 
 9 |       <Link to="/gallery" >Gallery</Link>
10 |       <Link to="/customers" >Customers</Link> 
11 |     </nav> 
12 |   );
13 | }
14 | 


--------------------------------------------------------------------------------
/8-routing/38-browser/index.js:
--------------------------------------------------------------------------------
 1 | import { BrowserRouter } from "react-router-dom";
 2 | import React, { StrictMode } from "react";
 3 | import { createRoot } from "react-dom/client";
 4 | import "./styles.css";
 5 | 
 6 | import App from "./App";
 7 | 
 8 | const root = createRoot(document.getElementById("root"));
 9 | root.render(
10 |   <StrictMode>
11 |     <BrowserRouter>
12 |       <App />
13 |     </BrowserRouter>
14 |   </StrictMode>
15 | );


--------------------------------------------------------------------------------
/8-routing/41-ponoplayer/index.js:
--------------------------------------------------------------------------------
 1 | import { BrowserRouter } from "react-router-dom";
 2 | import React, { StrictMode } from "react";
 3 | import { createRoot } from "react-dom/client";
 4 | import "./styles.css";
 5 | 
 6 | import App from "./App";
 7 | 
 8 | const root = createRoot(document.getElementById("root"));
 9 | root.render(
10 |   <StrictMode>
11 |     <BrowserRouter>
12 |       <App />
13 |     </BrowserRouter>
14 |   </StrictMode>
15 | );


--------------------------------------------------------------------------------
/4-events/16-online-shopping/App.js:
--------------------------------------------------------------------------------
 1 | // Online Shopping 🛒
 2 | // Codédex
 3 | 
 4 | import React from "react";
 5 | import ShoppingItem from "./ShoppingItem";
 6 | 
 7 | export default function App() {
 8 |   return (
 9 |     <div className="shopping-list">
10 |       <h2>Shopping List</h2>
11 |       <ShoppingItem name="🍌 bananas" />
12 |       <ShoppingItem name="🍞 bread" />
13 |       <ShoppingItem name="🥛 milk" />
14 |     </div>
15 |   );
16 | }


--------------------------------------------------------------------------------
/8-routing/37-know-your-routes/index.js:
--------------------------------------------------------------------------------
 1 | import { BrowserRouter } from "react-router-dom";
 2 | import React, { StrictMode } from "react";
 3 | import { createRoot } from "react-dom/client";
 4 | import "./styles.css";
 5 | 
 6 | import App from "./App";
 7 | 
 8 | const root = createRoot(document.getElementById("root"));
 9 | root.render(
10 |   <StrictMode>
11 |     <BrowserRouter>
12 |       <App />
13 |     </BrowserRouter>
14 |   </StrictMode>
15 | );


--------------------------------------------------------------------------------
/8-routing/40-link-to-the-path/index.js:
--------------------------------------------------------------------------------
 1 | import { BrowserRouter } from "react-router-dom";
 2 | import React, { StrictMode } from "react";
 3 | import { createRoot } from "react-dom/client";
 4 | import "./styles.css";
 5 | 
 6 | import App from "./App";
 7 | 
 8 | const root = createRoot(document.getElementById("root"));
 9 | root.render(
10 |   <StrictMode>
11 |     <BrowserRouter>
12 |       <App />
13 |     </BrowserRouter>
14 |   </StrictMode>
15 | );


--------------------------------------------------------------------------------
/8-routing/39-paper-route-trail/index.js:
--------------------------------------------------------------------------------
 1 | import { BrowserRouter } from "react-router-dom";
 2 | import React, { StrictMode } from "react";
 3 | import { createRoot } from "react-dom/client";
 4 | import "./styles.css";
 5 | 
 6 | import App from "./App";
 7 | 
 8 | const root = createRoot(document.getElementById("root"));
 9 | root.render(
10 |   <StrictMode>
11 |     <BrowserRouter>
12 |       <App />
13 |     </BrowserRouter>
14 |   </StrictMode>
15 | );
16 | 


--------------------------------------------------------------------------------
/8-routing/38-browser/components/NavBar.js:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | import "../styles.css";
 3 | 
 4 | export default function NavBar() {
 5 |   return (
 6 |     <div className="navbar">
 7 |       <Link to="/one">version one</Link>
 8 |       <Link to="/two">version two</Link>
 9 |       <Link to="/three">version three</Link>
10 |       <Link to="https://www.youtube.com/watch?v=vLn9zVJCu18">Peaches</Link>
11 |     </div>
12 |   );
13 | }
14 | 


--------------------------------------------------------------------------------
/1-first-react-app/05-social-post/FollowButton.js:
--------------------------------------------------------------------------------
 1 | // Social Post 📱
 2 | // Codédex
 3 | 
 4 | import { useState } from "react";
 5 | 
 6 | export default function FollowButton() {
 7 |   const [following, setFollowing] = useState(false);
 8 |   return (
 9 |     <div id="follow-button" className={following ? "following" : "not-following"} onClick={() => setFollowing(!following)}>
10 |       {following === true ? "Following" : "Follow"}
11 |     </div>
12 |   );
13 | }
14 | 


--------------------------------------------------------------------------------
/3-props-state/13-stopwatch/Stopwatch.js:
--------------------------------------------------------------------------------
 1 | // Stopwatch ⏱️
 2 | // Codédex
 3 | 
 4 | import React from "react";
 5 | import { useState } from "react";
 6 | 
 7 | export default function Stopwatch() {
 8 |   const [seconds, setSeconds] = useState(0);
 9 | 
10 |   setTimeout(function() {
11 |     setSeconds(seconds + 1);
12 |   }, 1000);
13 |   
14 |   return (
15 |     <div>
16 |       <h2>Time Starts Now!</h2>
17 |       {seconds} seconds
18 |     </div>
19 |   )
20 | }
21 | 


--------------------------------------------------------------------------------
/1-first-react-app/04-building-blocks/FollowButton.js:
--------------------------------------------------------------------------------
 1 | // Building Blocks 🧱
 2 | // Codédex
 3 | 
 4 | import { useState } from "react";
 5 | 
 6 | export default function FollowButton() {
 7 |   const [following, setFollowing] = useState(false);
 8 |   return (
 9 |     <div id="follow-button" className={following ? "following" : "not-following"} onClick={() => setFollowing(!following)}>
10 |       {following === true ? "Following" : "Follow"}
11 |     </div>
12 |   );
13 | }
14 | 


--------------------------------------------------------------------------------
/3-props-state/12-notifications/App.js:
--------------------------------------------------------------------------------
 1 | // Notifications 🔴
 2 | // Codédex
 3 | 
 4 | import Notification from "./Notification.js";
 5 | 
 6 | export default function App() {
 7 |   return (
 8 |     <div>
 9 |   <h1>Notifications</h1>
10 |   <Notification message="Fatima commented on your post." isRead={true} />
11 |   <Notification message="Daniel's birthday is today! 🎂" isRead={false} />
12 |   <Notification message="Rhea just posted on their feed!" isRead={false} />
13 | </div>
14 | 
15 |   );
16 | }


--------------------------------------------------------------------------------
/3-props-state/15-trending-now/TrendingList.js:
--------------------------------------------------------------------------------
 1 | // Trending Now 🎬
 2 | // Codédex
 3 | 
 4 | import Movie from "./Movie.js";
 5 | 
 6 | export default function TrendingList(props) {
 7 |   return (
 8 | <div className="trending">
 9 |   <h2>Trending Now</h2>
10 |   <div className="movie-list">
11 |     {props.movies.map(function(movie) {
12 |       return <Movie title={movie.title} releaseYear={movie.releaseYear} imageUrl={movie.imageUrl} />
13 |     })}
14 |   </div>
15 | </div>
16 | 
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/2-jsx-components/06-band-tour/App.js:
--------------------------------------------------------------------------------
 1 | // Band Tour 🎸
 2 | // Codédex
 3 | 
 4 | export default function App() {
 5 |   return (
 6 |     <div>
 7 |       <h1>Tour Stops</h1>
 8 |       <ul>
 9 |         <li>🇺🇸 New York City, US - Madison Square Garden</li>
10 |         <li>🇬🇧 London, UK - Wembley Stadium</li>
11 |         <li>🇩🇪 Munich, DE - Zenith Halle</li>
12 |         <li>🇯🇵 Tokyo, JP - Budokan</li>
13 |         <li>🇦🇺 Melbourne, AU - The Forum</li>
14 |       </ul>
15 |     </div>
16 |   )
17 | }
18 | 


--------------------------------------------------------------------------------
/8-routing/40-link-to-the-path/components/NavBar.js:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | import "../styles.css";
 3 | 
 4 | export default function NavBar() {
 5 |   return (
 6 |     <div className="navbar">
 7 |       <Link to="/1986">The Legend of Zelda</Link>
 8 |       <Link to="/1992">A Link to the Past</Link>
 9 |       <Link to="/2006">Twilight Princess</Link>
10 |       <Link to="/2013">A Link Between Worlds</Link>
11 |       <Link to="/2017">Breath of the Wild</Link>
12 |     </div>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/3-props-state/14-quiz/Quiz.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import Question from "./Question.js";
 3 | 
 4 | export default function Quiz() {
 5 |   const [questions, setQuestions] = useState([
 6 |     "What is the meaning of life?",
 7 |     "Is there a 4th of July in Great Britain?",
 8 |   ]);
 9 | 
10 |   return (
11 |     <div>
12 |       <Question
13 |         question={questions[0]}
14 |       />
15 |       <Question
16 |         question={questions[1]}
17 |       />
18 |     </div>
19 |   );
20 | }
21 | 


--------------------------------------------------------------------------------
/6-hooks/27-cookie-clicker/App.js:
--------------------------------------------------------------------------------
 1 | // Cookie Clicker 🍪
 2 | // Codédex
 3 | 
 4 | import React from "react";
 5 | import { useState } from "react";
 6 | 
 7 | export default function App() {
 8 |   const [click, setClick] = useState(0);
 9 | 
10 |   function increment() {
11 |     setClick(click + 1); 
12 |   };
13 | 
14 |   return (
15 |     <div id="cookie">
16 |       <p>{click} Cookies</p>
17 |       <img onClick={increment} src={"https://i.imgur.com/VMWZ9bM.png"} alt="Chocolate chip cookie" />
18 |     </div>
19 |   );
20 | }
21 | 
22 | 


--------------------------------------------------------------------------------
/6-hooks/30-barbenheimer/ThemeSwitcher.js:
--------------------------------------------------------------------------------
 1 | // Barbenheimer 👠
 2 | // Codédex
 3 | 
 4 | import React from "react";
 5 | import { useContext } from "react";
 6 | import { ThemeContext } from "./App.js";
 7 | 
 8 | export default function ThemeSwitcher() {
 9 |   const { theme, toggleTheme } = useContext(ThemeContext);
10 | 
11 |   return (
12 |     <div className="theme-switcher">
13 |       <button onClick={toggleTheme}>
14 |         Switch to {theme === "barbie" ? "Oppenheimer" : "Barbie"} Theme
15 |       </button>
16 |     </div>
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/8-routing/41-ponoplayer/components/Customers.js:
--------------------------------------------------------------------------------
 1 | export default function Customers() {
 2 |     return (
 3 |       <div className="page-layout">
 4 |         <h1>Customers and Reviews</h1>
 5 |         <p>
 6 |         “The sound quality is unparalleled. It feels like I'm hearing my favorite albums for the first time all over again.” — Linda H.
 7 |         <br />
 8 |         “If you're serious about music, the PonoPlayer is a must-have. It's changed the way I listen to music.” — James T.
 9 |         </p>
10 |       </div>
11 |     );
12 |   }
13 |   


--------------------------------------------------------------------------------
/8-routing/40-link-to-the-path/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: Arial, Helvetica, sans-serif;
 3 | }
 4 | 
 5 | .navbar {
 6 |   display: flex;
 7 |   justify-content: space-between;
 8 |   align-items: center;
 9 |   padding: 2rem 3rem;
10 | }
11 | 
12 | h1 {
13 |   font-size: 4rem;
14 |   text-align: center;
15 | }
16 | 
17 | p {
18 |   font-size: 1 rem;
19 |   color: #333;
20 |   text-align: center;
21 |   padding: 2rem 3rem;
22 | }
23 | 
24 | .center {
25 |   display: flex;
26 |   justify-content: center;
27 |   align-items: center;
28 |   height: 60vh;
29 | }
30 | 


--------------------------------------------------------------------------------
/8-routing/41-ponoplayer/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, Helvetica, sans-serif;
 3 | }
 4 | 
 5 | .navbar {
 6 |     display: flex;
 7 |     justify-content: space-between;
 8 |     align-items: center;
 9 |     padding: 2rem 3rem;
10 | }
11 | 
12 | h1 {
13 |     font-size: 4rem;
14 |     padding-bottom: 2rem;
15 |     text-align: center;
16 | }
17 | 
18 | p {
19 |     font-size: 1 rem;
20 |     color: #333;
21 |     text-align: center;
22 |     padding: 2rem 3rem;
23 | }
24 | 
25 | .page-layout {
26 |     display: flex;
27 |     flex-direction: column;
28 |     align-items: center;
29 |   
30 | }


--------------------------------------------------------------------------------
/8-routing/37-know-your-routes/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, Helvetica, sans-serif;
 3 | }
 4 | 
 5 | .navbar {
 6 |     display: flex;
 7 |     justify-content: space-between;
 8 |     align-items: center;
 9 |     padding: 2rem 3rem;
10 | }
11 | 
12 | h1 {
13 |     font-size: 4rem;
14 |     padding-bottom: 2rem;
15 |     text-align: center;
16 | }
17 | 
18 | p {
19 |     font-size: 1 rem;
20 |     color: #333;
21 |     text-align: center;
22 |     padding: 2rem 3rem;
23 | }
24 | 
25 | .waterbottle {
26 |     display: flex;
27 |     flex-direction: column;
28 |     align-items: center;
29 |   
30 | }


--------------------------------------------------------------------------------
/2-jsx-components/08-travel-gallery/App.js:
--------------------------------------------------------------------------------
 1 | // Travel Gallery 📸
 2 | // Codédex
 3 | 
 4 | export default function App() {
 5 |   const barcelonaImage = <img src={"https://i.imgur.com/qaQNzqi.png"}  alt="Barcelona" />;
 6 |   const tokyoImage = <img src={"https://i.imgur.com/OAx1wzO.png"}  alt="Tokyo" />;
 7 |   const ohioImage = <img src={"https://i.imgur.com/CxJjltu.png"}  alt="Ohio" />;
 8 | 
 9 |   const imageGallery = [
10 |     <li>{barcelonaImage}</li>,
11 |     <li>{tokyoImage}</li>,
12 |     <li>{ohioImage}</li>
13 |   ]
14 | 
15 |   return (
16 |     <ul>
17 |       {imageGallery}
18 |     </ul>
19 |   );
20 | }
21 | 


--------------------------------------------------------------------------------
/8-routing/37-know-your-routes/components/Owala.js:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | 
 3 | export default function Owala() {
 4 |   return (
 5 |     <div className="waterbottle">
 6 |       <h1>owala 🐨</h1>
 7 |       <img src="https://i.pinimg.com/originals/bc/61/99/bc6199ab2efee2366878be13c7e320b4.png" width={200} alt="owala" />
 8 |       <p>
 9 |         You're creative, adventurous, and are either incredibly minimalistic or go full deco. You love nature, greens, and pastels. A soft aura at heart.
10 |       </p>
11 |       <footer>
12 |         <p>Back to <Link to="/">Home</Link> </p>
13 |       </footer>
14 |     </div>
15 |   );
16 |   }


--------------------------------------------------------------------------------
/8-routing/41-ponoplayer/components/About.js:
--------------------------------------------------------------------------------
 1 | export default function About() {
 2 |   return (
 3 |     <div className="waterbottle">
 4 |       <h1>About</h1>
 5 |       <p>
 6 |         Neil Young's vision for the PonoPlayer was driven by his passion for high-quality audio. Frustrated with the compressed sound of typical MP3 players, Young aimed to create a device that could deliver studio-quality sound in a portable format. The result is the PonoPlayer, a 
 7 |         device that redefines the listening experience by offering unparalleled sound quality that captures the nuances and depth of original recordings.
 8 |       </p>
 9 |     </div>
10 |   );
11 | }
12 | 


--------------------------------------------------------------------------------
/8-routing/41-ponoplayer/components/Gallery.js:
--------------------------------------------------------------------------------
 1 | export default function Gallery() {
 2 |   return (
 3 |     <div className="page-layout">
 4 |       <h1>Gallery</h1>
 5 |       <img
 6 |         src="https://image.jimcdn.com/app/cms/image/transf/dimension=335x1024:format=png/path/s352df6b973dbb518/image/i11f0d413471aad4b/version/1421066724/the-new-pono-player.png"
 7 |         width={200}
 8 |         alt="three PonoPlayers"
 9 |       />
10 |       <img
11 |         src="https://cdn.digitaldjtips.com/app/uploads/2014/03/09144627/Pono-Music-Player.png"
12 |         width={200}
13 |         alt="black yellow and blue PonoPlayers"
14 |       />
15 |     </div>
16 |   );
17 | }
18 | 


--------------------------------------------------------------------------------
/8-routing/38-browser/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: Arial, Helvetica, sans-serif;
 3 | }
 4 | 
 5 | .navbar {
 6 |   display: flex;
 7 |   justify-content: space-between;
 8 |   align-items: center;
 9 |   padding: 2rem 3rem;
10 | }
11 | 
12 | h1 {
13 |   font-size: 4rem;
14 |   text-align: center;
15 | }
16 | 
17 | .logo {
18 |   display: block;
19 |   margin-left: auto;
20 |   margin-right: auto;
21 |   width: 50%;
22 | }
23 | 
24 | p {
25 |   font-size: 1 rem;
26 |   color: #333;
27 |   text-align: center;
28 |   padding: 2rem 3rem;
29 | }
30 | 
31 | .center {
32 |   display: flex;
33 |   justify-content: center;
34 |   align-items: center;
35 |   height: 60vh;
36 | }
37 | 


--------------------------------------------------------------------------------
/1-first-react-app/05-social-post/Post.js:
--------------------------------------------------------------------------------
 1 | // Social Post 📱
 2 | // Codédex
 3 | 
 4 | import FollowButton from "./FollowButton.js";
 5 | import LikeButton from "./LikeButton.js";
 6 | 
 7 | const postImage = "https://i.imgur.com/ZUZiJ4y.png";
 8 | const userImage = "https://i.imgur.com/lfoiQZs.png";
 9 | 
10 | export default function Post() {
11 |   return (
12 |     <div className="post">
13 |       <div className="user-info">
14 |         <img id="profile-img" src={userImage} alt="Profile Image" /> <p>Hipthehippocorn</p>
15 |         <FollowButton />
16 |       </div>
17 |       <img id="post-img" src={postImage} alt="Post Image" />
18 |       <LikeButton />
19 |     </div>
20 |   );
21 | }


--------------------------------------------------------------------------------
/6-hooks/28-color-effects-i/App.js:
--------------------------------------------------------------------------------
 1 | // Color Effects I 🎨
 2 | // Codédex
 3 | 
 4 | import React from "react";
 5 | import { useState, useEffect } from "react";
 6 | import "./styles.css";
 7 | 
 8 | export default function App() {
 9 |   const [color, setColor] = useState("#ffffff"); 
10 | 
11 |   useEffect(function() {
12 |     document.body.style.backgroundColor = color;
13 |   }, [color]);
14 | 
15 |   function generateColor() {
16 |     const randomColor = "#" + Math.floor(Math.random()*16777215).toString(16);
17 |     setColor(randomColor);
18 |   };
19 | 
20 |   return (
21 |     <div id="button">
22 |       <button onClick={generateColor}>ZAP!!</button>
23 |     </div>
24 |   );
25 | }
26 | 


--------------------------------------------------------------------------------
/8-routing/41-ponoplayer/components/Home.js:
--------------------------------------------------------------------------------
 1 | export default function Home() {
 2 |   return (
 3 |     <div className="page-layout">
 4 |       <h1>The PonoPlayer</h1>
 5 |       <img 
 6 |         src="https://www.audiosciencereview.com/forum/index.php?attachments/pono-png.329412/" 
 7 |         width={200} 
 8 |         alt="PonoPlayer" />
 9 |       <p>
10 |       The PonoPlayer is a high-resolution digital music player developed by PonoMusic, a company founded by musician Neil Young. Launched in 2015 following a successful Kickstarter campaign, the PonoPlayer aims to provide a superior listening experience through high-fidelity audio playback.
11 |       </p>
12 |     </div>
13 |   );
14 |   }


--------------------------------------------------------------------------------
/1-first-react-app/04-building-blocks/Post.js:
--------------------------------------------------------------------------------
 1 | // Building Blocks 🧱
 2 | // Codédex
 3 | 
 4 | import FollowButton from "./FollowButton.js";
 5 | import LikeButton from "./LikeButton.js";
 6 | 
 7 | const postImage = "https://i.imgur.com/ZUZiJ4y.png";
 8 | const userImage = "https://i.imgur.com/lfoiQZs.png";
 9 | 
10 | export default function Post() {
11 |   return (
12 |     <div className="post">
13 |       <div className="user-info">
14 |         <img id="profile-img" src={userImage} alt="Profile Image" /> <p>Hipthehippocorn</p>
15 |         <FollowButton />
16 |       </div>
17 |       <img id="post-img" src={postImage} alt="Post Image" />
18 |       <LikeButton />
19 |     </div>
20 |   );
21 | }


--------------------------------------------------------------------------------
/6-hooks/30-barbenheimer/Home.js:
--------------------------------------------------------------------------------
 1 | // Barbenheimer 👠
 2 | // Codédex
 3 | 
 4 | import { useContext } from "react";
 5 | import { ThemeContext } from "./App.js";
 6 | import {  useEffect } from "react";
 7 | 
 8 | export default function Home() {
 9 |   const { theme } = useContext(ThemeContext);
10 | 
11 |   useEffect(() => {
12 |     document.body.className = theme;
13 |   }, [theme]);
14 | 
15 |   return (
16 |     <div className="content">
17 |       <h1>{theme === "barbie" ? "💇🏼‍♀️💅🏻💗" : "🕵🏼‍♂️🌇🎥"}</h1>
18 |       <p>
19 |         {theme === "barbie" ? "Im a barbie girl, in a barbie world!" : "Now I am become Death, the destroyer of worlds."}
20 |       </p>
21 |     </div>
22 |   );
23 | }


--------------------------------------------------------------------------------
/8-routing/37-know-your-routes/components/Stanley.js:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | 
 3 | export default function Stanley() {
 4 |   return (
 5 |     <div className="waterbottle">
 6 |       <h1>stanley 🚛</h1>
 7 |       <img src="https://images.squarespace-cdn.com/content/v1/65527b8af387e265ab2a36ce/1703783897336-BOR0WWT7P56OCKQKL8R0/Alpine.png" width={200} alt="stanley" />
 8 |       <p>
 9 |         You're a hard worker, and you're always on the move. You're a fan of the outdoors and you're always ready for an adventure. Sippy cup version!
10 |       </p>
11 |       <footer>
12 |         <p>
13 |           Back to <Link to="/">Home</Link>{" "}
14 |         </p>
15 |       </footer>
16 |     </div>
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/8-routing/39-paper-route-trail/components/Map.js:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | import "../styles.css";
 3 | 
 4 | export default function Map() {
 5 |   return (
 6 |     <div className="map-container">
 7 |       <br />
 8 |       <h2>Welcome to ReactTown!</h2>
 9 |       <div className="map">
10 |         <Link to="/" className="map-link house">
11 |           🏡
12 |         </Link>
13 |         <Link to="/garden" className="map-link garden">
14 |           🪴
15 |         </Link>
16 |         <Link to="/school" className="map-link school">
17 |           🏫
18 |         </Link>
19 |         <Link to="/museum" className="map-link museum">
20 |           🏛️
21 |         </Link>
22 |       </div>
23 |     </div>
24 |   );
25 | }
26 | 


--------------------------------------------------------------------------------
/1-first-react-app/05-social-post/LikeButton.js:
--------------------------------------------------------------------------------
 1 | // Social Post 📱
 2 | // Codédex
 3 | 
 4 | import { useState } from "react";
 5 | 
 6 | const emptyHeartImage = "https://i.imgur.com/wIq3Wbq.png";
 7 | const fullHeartImage = "https://i.imgur.com/vyX9Vnx.png";
 8 | 
 9 | export default function LikeButton() {
10 |   const [likes, setLikes] = useState(0);
11 | 
12 |   return (
13 |     <div className="like-info">
14 |       <div className="like-button" onClick={() => setLikes(likes + 1)}>
15 |         {likes > 0 ? <img src={fullHeartImage} alt="Heart for like button" /> : <img src={emptyHeartImage} alt="Empty heart for like button" />}
16 |       </div>
17 |       <p>{likes === 1 ? `  ${likes} Like` : `${likes} Likes`}</p>
18 |     </div>
19 |   );
20 | }
21 | 


--------------------------------------------------------------------------------
/8-routing/37-know-your-routes/components/Yeti.js:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | 
 3 | export default function Yeti() {
 4 |   return (
 5 |     <div className="waterbottle">
 6 |       <h1>yeti 🍊</h1>
 7 |       <img
 8 |         src="https://southernseason.com/cdn/shop/files/yeti-rambler-36-oz-water-bottle-with-chug-cap-navy-38238674026659_5000x.png?v=1706023343"
 9 |         width={200}
10 |         alt="yeti"
11 |       />
12 |       <p>
13 |         You like efficiency and are a realist. Loyal to personal items and people come easy to you. Minimalist at heart.
14 |       </p>
15 |       <footer>
16 |         <p>
17 |           Back to <Link to="/">Home</Link>{" "}
18 |         </p>
19 |       </footer>
20 |     </div>
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/1-first-react-app/04-building-blocks/LikeButton.js:
--------------------------------------------------------------------------------
 1 | // Building Blocks 🧱
 2 | // Codédex
 3 | 
 4 | import { useState } from "react";
 5 | 
 6 | const emptyHeartImage = "https://i.imgur.com/wIq3Wbq.png";
 7 | const fullHeartImage = "https://i.imgur.com/vyX9Vnx.png";
 8 | 
 9 | export default function LikeButton() {
10 |   const [likes, setLikes] = useState(0);
11 | 
12 |   return (
13 |     <div className="like-info">
14 |       <div className="like-button" onClick={() => setLikes(likes + 1)}>
15 |         {likes > 0 ? <img src={fullHeartImage} alt="Heart for like button" /> : <img src={emptyHeartImage} alt="Empty heart for like button" />}
16 |       </div>
17 |       <p>{likes === 1 ? `  ${likes} Like` : `${likes} Likes`}</p>
18 |     </div>
19 |   );
20 | }
21 | 


--------------------------------------------------------------------------------
/4-events/17-tooltips/App.js:
--------------------------------------------------------------------------------
 1 | // Tooltips 🪛
 2 | // Codédex
 3 | 
 4 | import { useState } from "react";
 5 | 
 6 | export default function App() {
 7 |  // State to track tooltip visibility
 8 |  const [showTooltip, setShowTooltip] = useState(false);
 9 | 
10 |  function handleMouseOver() {
11 |   setShowTooltip(true);
12 |  }
13 | 
14 |  function handleMouseLeave() {
15 |   setShowTooltip(false);
16 |  }
17 | 
18 |  return (
19 |    <div className="App">
20 |      <div
21 |        className="element-with-tooltip"
22 |        onMouseOver={handleMouseOver}
23 |        onMouseLeave={handleMouseLeave}
24 |      >
25 |        Hover over me
26 |        {showTooltip && <div className="tooltip">This is a tooltip</div>}
27 |      </div>
28 |    </div>
29 |  )
30 | }
31 | 


--------------------------------------------------------------------------------
/8-routing/39-paper-route-trail/App.js:
--------------------------------------------------------------------------------
 1 | import { Routes, Route } from "react-router-dom";
 2 | 
 3 | import Map from "./components/Map";
 4 | import House from './components/House';
 5 | import Garden from './components/Garden';
 6 | import School from './components/School';
 7 | import Museum from './components/Museum';
 8 | 
 9 | function App() {
10 |   return (
11 |     <div>
12 |       <h1>Map Navigation</h1>
13 |       <Map />
14 |       <Routes>
15 |           <Route path="/" element={<House />} />
16 |           <Route path="/garden" element={<Garden />} />
17 |           <Route path="/school" element={<School />} />
18 |           <Route path="/museum" element={<Museum />} />
19 |         </Routes>
20 |     </div>
21 |   );
22 | }
23 | 
24 | export default App;
25 | 


--------------------------------------------------------------------------------
/6-hooks/30-barbenheimer/styles.css:
--------------------------------------------------------------------------------
 1 | /* Barbenheimer 👠 */
 2 | /* Codédex */
 3 | 
 4 | /* Barbie theme */
 5 | body.barbie {
 6 |   background-color: #ff69b4;
 7 |   color: white;
 8 |   font-family: Arial, Helvetica, sans-serif;
 9 |   text-align: center;
10 | }
11 | 
12 | /* Oppenheimer theme */
13 | body.oppenheimer {
14 |   background-color: #101112; 
15 |   color: white;
16 |   font-family: Arial, Helvetica, sans-serif;
17 |   text-align: center;
18 | }
19 | 
20 | 
21 | .theme-switcher button {
22 |   padding: 10px;
23 |   margin-top: 30px;
24 |   font-size: 16px;
25 |   background-color: white; 
26 |   color: black;
27 |   border: none;
28 |   border-radius: 4px;
29 |   cursor: pointer;
30 | }
31 | 
32 | h1 {
33 |   font-size: 5em;
34 |   text-align: center;
35 | }
36 | 


--------------------------------------------------------------------------------
/6-hooks/31-kanban-board/Task.js:
--------------------------------------------------------------------------------
 1 | // Kanban Board 📋
 2 | // Codédex
 3 | 
 4 | import React from "react";
 5 | import { BoardContext } from "./App.jsx";
 6 | import { useContext } from "react";
 7 | 
 8 | export default function Task ({ task }) {
 9 |   const { moveTask } = useContext(BoardContext);
10 | 
11 |   const handleStatusChange = (e) => {
12 |     moveTask(task.id, e.target.value);
13 |   };
14 | 
15 |   return (
16 |     <div className="task" data-status={task.status}>
17 |       <p>{task.title}</p>
18 |       <select value={task.status} onChange={handleStatusChange}>
19 |         <option value="todo">To Do</option>
20 |         <option value="inProgress">In Progress</option>
21 |         <option value="done">Done</option>
22 |       </select>
23 |     </div>
24 |   );
25 | }


--------------------------------------------------------------------------------
/8-routing/40-link-to-the-path/components/LegendOfZelda.js:
--------------------------------------------------------------------------------
1 | export default function LegendOfZelda() {
2 |   return (
3 |     <div className="center">
4 |       <img src="https://www.zeldadungeon.net/wiki/images/thumb/6/60/Link-Kneeling-Shield.png/400px-Link-Kneeling-Shield.png" alt="Link Image" />
5 |       <p>The first incarnation of Link appears in "The Legend of Zelda" for the Nintendo Entertainment System (NES). This Link is a young boy living in the kingdom of Hyrule, tasked with rescuing Princess Zelda from the evil Ganon. His adventure involves exploring an open world, finding pieces of the Triforce of Wisdom, and defeating numerous dungeons. This version of Link is characterized by his green tunic, pointed hat, and the use of iconic items like the sword and shield.</p>
6 |     </div>
7 |   );
8 | }
9 | 


--------------------------------------------------------------------------------
/8-routing/41-ponoplayer/App.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./styles.css";
 3 | 
 4 | import Home from "./components/Home"
 5 | import NavBar from "./components/NavBar";
 6 | import About from "./components/About"
 7 | import Customers from "./components/Customers";
 8 | import Gallery from "./components/Gallery"
 9 | 
10 | 
11 | import { Routes, Route } from "react-router-dom";
12 | 
13 | export default function App() {
14 |   return (
15 |     <div>
16 |       <NavBar />
17 |       <Routes>
18 |         <Route path="/" exact element={<Home />} />
19 |         <Route path="/about" exact element={<About />} />
20 |         <Route path="/gallery" exact element={<Gallery />} />
21 |         <Route path="/customers" exact element={<Customers />} />
22 |       </Routes>
23 |     </div>
24 |   );
25 | }
26 | 


--------------------------------------------------------------------------------
/6-hooks/31-kanban-board/styles.css:
--------------------------------------------------------------------------------
 1 | /* Kanban Board 📋 */
 2 | /* Codédex */
 3 | 
 4 | body {
 5 |   font-family: Arial, Helvetica, sans-serif;
 6 | }
 7 | 
 8 | .board {
 9 |   display: flex;
10 |   justify-content: space-around;
11 |   margin: 20px ;
12 | }
13 |   
14 | @media (max-width: 700px) {
15 |   .board {
16 |     flex-direction: column;
17 |   }
18 | 
19 |   .column {
20 |     margin: 10px;
21 |     padding-bottom: 20px;
22 |   }
23 | }
24 |   
25 | .column {
26 |   flex: 1;
27 |   border: 1px solid #ccc;
28 |   border-radius: 5px;
29 |   padding: 10px;
30 |   margin: 10px;
31 | }
32 | 
33 | .task {
34 |   background-color: #f9f9f9;
35 |   border: 1px solid #ddd;
36 |   border-radius: 5px;
37 |   padding: 10px;
38 |   margin-bottom: 10px;
39 | }
40 | 
41 | select {
42 |   padding: 5px;
43 | }
44 | 
45 | h2 {
46 |   margin-top: 0;
47 | }


--------------------------------------------------------------------------------
/3-props-state/11-giving-props/App.js:
--------------------------------------------------------------------------------
 1 | // Giving Props 💪🏻
 2 | // Codédex
 3 | 
 4 | export default function App() {
 5 |   const catalogItems = [
 6 |     {
 7 |       name: "Dan",
 8 |       category: "Developer",
 9 |       website: "dandeveloper.dev"
10 |     },
11 |     {
12 |       name: "Fatima",
13 |       category: "Doctor",
14 |       website: "fatimahealth.com"
15 |     },
16 |     {
17 |       name: "Juan",
18 |       category: "Community Leader",
19 |       website: "juan.me"
20 |     }
21 |   ]
22 |   return (
23 |     <div>
24 |       {catalogItems.map(function (item) {
25 |         return (
26 |           <div>
27 |             <h2>{item.name}</h2>
28 |             <h3>Specialty: {item.category}</h3>
29 |             <a href={item.website}>Learn more</a>
30 |           </div>
31 |         )
32 |       })}
33 |     </div>
34 |   )
35 | }


--------------------------------------------------------------------------------
/8-routing/39-paper-route-trail/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: Arial, Helvetica, sans-serif;
 3 |   text-align: center;
 4 | }
 5 | .map-container {
 6 |   text-align: center;
 7 | }
 8 | 
 9 | .map {
10 |   position: relative;
11 |   width: 400px;
12 |   height: 400px;
13 |   margin: 0 auto;
14 |   border: 1px solid #ccc;
15 |   background-color: #d7eddb;
16 |   border-radius: 5%;
17 |   background-image: url("https://opengameart.org/sites/default/files/grass_tileset_16x16_preview_0.png");
18 | }
19 | 
20 | .map-link {
21 |   position: absolute;
22 |   text-decoration: none;
23 |   font-size: 3em;
24 | }
25 | 
26 | .house {
27 |   top: 20%;
28 |   left: 10%;
29 | }
30 | 
31 | .garden {
32 |   top: 50%;
33 |   left: 80%;
34 | }
35 | 
36 | .school {
37 |   top: 80%;
38 |   left: 30%;
39 | }
40 | 
41 | .museum {
42 |   top: 10%;
43 |   left: 60%;
44 | }
45 | 


--------------------------------------------------------------------------------
/4-events/18-a-focus-in-art/ZoomableImage.js:
--------------------------------------------------------------------------------
 1 | // A Focus In Art 🎨
 2 | // Codédex
 3 | 
 4 | import { useState } from "react";
 5 | 
 6 | export default function ZoomableImage(props) {
 7 |   const [isZoomed, setIsZoomed] = useState(false);
 8 | 
 9 |   function handleZoomIn() {
10 |     setIsZoomed(true);
11 |   }
12 | 
13 |   function handleZoomOut() {
14 |     setIsZoomed(false);
15 |   }
16 | 
17 |   return (
18 |     <div className="image-div">
19 |       <img
20 |         className="picture-frame"
21 |         tabIndex="0"
22 |         src={props.imageURL}
23 |         alt="Zoomable"
24 |         style={{
25 |           width: isZoomed ? `${props.zoomFactor * 100}%` : "100%",
26 |           transition: "width 0.5s",
27 |           cursor: "pointer",
28 |         }}
29 |         onFocus={handleZoomIn}
30 |         onBlur={handleZoomOut}
31 |       />
32 |     </div>
33 |   );
34 | }
35 | 


--------------------------------------------------------------------------------
/8-routing/40-link-to-the-path/components/LinkPast.js:
--------------------------------------------------------------------------------
1 | export default function LinkPast() {
2 |   return (
3 |     <div className="center">
4 |       <img src="https://static.wikia.nocookie.net/p__/images/8/87/ALttP_Link_Artwork.png/revision/latest/scale-to-width-down/1000?cb=20200815033618&path-prefix=protagonist" alt="Link Image" />
5 |       <p>In "The Legend of Zelda: A Link to the Past" for the Super Nintendo Entertainment System (SNES), Link is depicted as a more developed hero living with his uncle. He is drawn into a quest to rescue Princess Zelda and thwart the evil wizard Agahnim, who is attempting to release Ganon from imprisonment. This Link journeys between the Light World and the Dark World, wielding the Master Sword for the first time and collecting various magical items. This version is noted for his more detailed design and expanded backstory.</p>
6 |     </div>
7 |   );
8 | }
9 | 


--------------------------------------------------------------------------------
/5-forms/22-high-score-i/HighScore.js:
--------------------------------------------------------------------------------
 1 | // High Score I 🕹️
 2 | // Codédex
 3 | 
 4 | import React, { useState } from "react";
 5 | 
 6 | export default function HighScore() {
 7 |   const [name, setName] = useState("");
 8 | 
 9 |   function handleChange(e) {
10 |     setName(e.target.value);
11 |   }
12 | 
13 |   return (
14 |     <div className="arcade-container">
15 |       <form className="arcade-form">
16 |         <label htmlFor="name">Enter your name<br/><br />(3 characters max)</label>
17 |         <input
18 |           type="text"
19 |           id="name"
20 |           value={name}
21 |           onChange={handleChange}
22 |           required
23 |           className="arcade-input"
24 |         />
25 |         <br />
26 |         <button type="submit" className="arcade-button">Submit</button>
27 |       </form>
28 |       <p>Top Score: <strong>{name}</strong> </p>
29 |     </div>
30 |   );
31 | }
32 | 


--------------------------------------------------------------------------------
/6-hooks/30-barbenheimer/App.js:
--------------------------------------------------------------------------------
 1 | // Barbenheimer 👠
 2 | // Codédex
 3 | 
 4 | import React from "react";
 5 | import { useState, createContext } from "react";
 6 | import ThemeSwitcher from "./ThemeSwitcher";
 7 | import Home from "./Home";
 8 | import "./styles.css";
 9 | 
10 | // Create a ThemeContext
11 | export const ThemeContext = createContext();
12 | 
13 | export default function App() {
14 |   // Initialize theme state
15 |   const [theme, setTheme] = useState("barbie");
16 | 
17 |   // Toggle theme function
18 |   function toggleTheme() {
19 |     setTheme(function(prevTheme) {
20 |       return prevTheme === "barbie" ? "oppenheimer" : "barbie";
21 |     });
22 |   }
23 | 
24 |   return (
25 |     // Provide theme and toggleTheme to child components
26 |     <ThemeContext.Provider value={{ theme, toggleTheme }}>
27 |       <ThemeSwitcher />
28 |       <Home />
29 |     </ThemeContext.Provider>
30 |   );
31 | }
32 | 
33 | 


--------------------------------------------------------------------------------
/8-routing/40-link-to-the-path/components/LinkWorlds.js:
--------------------------------------------------------------------------------
1 | export default function LinkWorlds() {
2 |   return (
3 |     <div className="center">
4 |       <img src="https://static.wikia.nocookie.net/vsbattles/images/e/e3/Link_%28The_Legend_of_Zelda_A_Link_Between_Worlds%29.png/revision/latest/scale-to-width-down/1200?cb=20151115183818" alt="Link Image" />
5 |       <p>"A Link Between Worlds" for the Nintendo 3DS features a new Link in a world that is a direct sequel to "A Link to the Past." This Link can merge into walls as a 2D painting, a unique ability that allows him to navigate puzzles and explore dungeons in innovative ways. The game features a similar art style and overworld to its predecessor but introduces new mechanics and a fresh storyline involving the parallel kingdom of Lorule. This Link is characterized by his courage and adaptability, tackling a variety of challenges in both Hyrule and Lorule.</p>
6 |     </div>
7 |   );
8 | }
9 | 


--------------------------------------------------------------------------------
/4-events/16-online-shopping/ShoppingItem.js:
--------------------------------------------------------------------------------
 1 | // Online Shopping 🛒
 2 | // Codédex
 3 | 
 4 | import { useState } from "react";
 5 | 
 6 | export default function ShoppingItem(props) {
 7 |   const [quantity, setQuantity] = useState(0);
 8 | 
 9 |   function handleIncrease() {
10 |     setQuantity(quantity + 1);
11 |   }
12 | 
13 |   function handleDecrease() {
14 |     if (quantity > 0) {
15 |       setQuantity(quantity - 1);
16 |     }
17 |   }
18 | 
19 |   return (
20 |     <div className="shopping-item">
21 |       <p className="item-info">
22 |         <strong>{props.name}</strong>
23 |         <div className="buttons">
24 |           <button className="btn-decrement" onClick={handleDecrease}>
25 |             -
26 |           </button>
27 |           <span className="quantity">{quantity}</span>
28 |           <button className="btn-increment" onClick={handleIncrease}>
29 |             +
30 |           </button>
31 |         </div>
32 |       </p>
33 |     </div>
34 |   );
35 | }
36 | 


--------------------------------------------------------------------------------
/7-data-fetching/32-our-universe/App.js:
--------------------------------------------------------------------------------
 1 | // Our Universe 🌌
 2 | // Codédex
 3 | 
 4 | import React, { useState, useEffect } from "react";
 5 | 
 6 | export default function App() {
 7 |   const [apodData, setApodData] = useState(null);
 8 | 
 9 |   useEffect(function () {
10 |     async function fetchAPOD() {
11 |       const response = await fetch("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY");
12 |       const data = await response.json();
13 |       setApodData(data);
14 |     }
15 |     fetchAPOD();
16 |   }, []);
17 | 
18 |   // Conditional rendering to avoid accessing properties of null
19 |   return (
20 |     <div style={{ maxHeight: "90vh", overflowY: "auto"}}>
21 |       <h1>NASA Astronomy Picture of the Day (APOD)</h1>
22 |       {apodData && <div>
23 |         <h3>{apodData.title}</h3>
24 |         <img src={apodData.url} alt={apodData.title} style={{ maxWidth: "75%" }} />
25 |         <p>{apodData.explanation}</p>
26 |       </div>}
27 |     </div>
28 |   );
29 | };
30 | 


--------------------------------------------------------------------------------
/7-data-fetching/34-i-am-error/App.js:
--------------------------------------------------------------------------------
 1 | // I Am Error ❌
 2 | // Codédex
 3 | 
 4 | import { useState, useEffect } from "react";
 5 | 
 6 | export default function App() {
 7 |   const [error, setError] = useState(null);
 8 | 
 9 |   const errorSrc = "https://i.giphy.com/4Zvz30OkefpNXT4HDQ.webp";
10 |   
11 |   useEffect(function() {
12 |     async function fetchData() {
13 |       try {
14 |         const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
15 |         if(response.ok === false) {
16 |           throw new Error("Failed to fetch data");
17 |         }
18 |         setError(null);
19 |       } catch(err) {
20 |         setError(err.message);
21 |       }
22 |     }
23 |     fetchData();
24 |   }, []);
25 |   return (
26 |     <div>
27 |       {error && <img width="300" src={errorSrc} /> || <img width="300" src="https://i.giphy.com/ynNF0bU8fB3HsInXEL.webp" />}
28 |       {error && <h2>{error}</h2> || <h2>Yay, no errors!</h2>}
29 |     </div>
30 |   );
31 | }
32 | 


--------------------------------------------------------------------------------
/8-routing/40-link-to-the-path/components/BoTW.js:
--------------------------------------------------------------------------------
 1 | export default function BoTW() {
 2 |     return (
 3 |       <div className="center">
 4 |         <img src="https://static.wikia.nocookie.net/the-legend-of-zelda-botw/images/c/c8/BotW_Link.png/revision/latest?cb=20200902181658" alt="Link Image" />
 5 |         <p>In "The Legend of Zelda: Breath of the Wild" for the Nintendo Switch and Wii U, Link awakens from a century-long slumber in a ruined Hyrule. This Link must defeat Calamity Ganon and save Princess Zelda, exploring an expansive open world with unprecedented freedom. This incarnation of Link is more customizable than ever, with various outfits, weapons, and abilities to suit different playstyles. The game emphasizes exploration, survival, and a non-linear narrative, marking a significant evolution in the series. This Link is defined by his resilience and resourcefulness in a world filled with ancient technology and natural beauty.</p>
 6 |       </div>
 7 |     );
 8 |   }
 9 |   
10 | 


--------------------------------------------------------------------------------
/6-hooks/29-color-effects-ii/App.js:
--------------------------------------------------------------------------------
 1 | // Color Effects II 🌈
 2 | // Codédex
 3 | 
 4 | import React from "react";
 5 | import { useState, useEffect } from "react";
 6 | import "./styles.css";
 7 | 
 8 | export default function ColorfulBackground() {
 9 | 
10 |   const [toggle, setToggle] = useState(false);
11 | 
12 |   useEffect(function() {
13 |     const intervalId = setInterval(function() {
14 |       if (toggle) {
15 |         const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
16 |         document.body.style.backgroundColor = randomColor;
17 |       }
18 |     }, 2000); 
19 | 
20 |     return function() {
21 |       clearInterval(intervalId);
22 |     };
23 |   }, [toggle]);
24 | 
25 |   const handleToggle = function() {
26 |     setToggle(function(prevToggle) {
27 |       return !prevToggle
28 |     } );
29 |   };
30 | 
31 |   return (
32 |     <div id="toggle">
33 |       <button onClick={handleToggle}>{toggle ? "Stop" : "Start"} Color Changing</button>
34 |     </div>
35 |   );
36 | }


--------------------------------------------------------------------------------
/3-props-state/15-trending-now/App.js:
--------------------------------------------------------------------------------
 1 | // Trending Now 🎬
 2 | // Codédex
 3 | 
 4 | import { useState } from "react";
 5 | import TrendingList from "./TrendingList";
 6 | 
 7 | export default function App() {
 8 |   const movieArray = [
 9 |     {
10 |       title: "Hitchhiker's Guide to the Galaxy",
11 |       releaseYear: 2005,
12 |       imageUrl: "https://upload.wikimedia.org/wikipedia/en/7/7a/Hitchhikers_guide_to_the_galaxy.jpg"
13 |     },
14 |     {
15 |       title: "Hitchhiker's Guide to the Galaxy",
16 |       releaseYear: 2005,
17 |       imageUrl: "https://upload.wikimedia.org/wikipedia/en/7/7a/Hitchhikers_guide_to_the_galaxy.jpg"
18 |     },
19 |     {
20 |       title: "Hitchhiker's Guide to the Galaxy",
21 |       releaseYear: 2005,
22 |       imageUrl: "https://upload.wikimedia.org/wikipedia/en/7/7a/Hitchhikers_guide_to_the_galaxy.jpg"
23 |     }    
24 |   ];
25 |   const [movieData, setMovieData] = useState(movieArray);
26 | 
27 |   // code here 💖
28 | 
29 |   return <TrendingList movies={movieData} />;
30 | }


--------------------------------------------------------------------------------
/8-routing/37-know-your-routes/App.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./styles.css";
 3 | 
 4 | import NavBar from "./components/NavBar";
 5 | import Owala from "./components/Owala";
 6 | import Stanley from "./components/Stanley";
 7 | import Yeti from "./components/Yeti";
 8 | 
 9 | import { Routes, Route } from "react-router-dom";
10 | 
11 | export default function App() {
12 |   function Home() {
13 |     return (
14 |       <div className="waterbottle">
15 |         <h1>which waterbottle are you?</h1>
16 |         <p>
17 |           🌟 Navigate the page to find out what watterbottle you are! 🌟
18 |         </p>
19 |       </div>
20 |     );
21 |   }
22 |   return (
23 |     <div>
24 |       <NavBar />
25 |       <Routes>
26 |         <Route path="/" exact element={<Home />} />
27 |         <Route path="/owala" exact element={<Owala />} />
28 |         <Route path="/stanley" exact element={<Stanley />} />
29 |         <Route path="/yeti" exact element={<Yeti />} />
30 |       </Routes>
31 |     </div>
32 |   );
33 | }
34 | 


--------------------------------------------------------------------------------
/8-routing/38-browser/App.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Routes, Route, Link } from "react-router-dom";
 3 | 
 4 | import NavBar from "./components/NavBar";
 5 | import One from "./components/One";
 6 | import Two from "./components/Two";
 7 | import Three from "./components/Three";
 8 | import "./styles.css";
 9 | 
10 | export default function App() {
11 |   function Home() {
12 |     return (
13 |       <div className="center">
14 |         <p>welcome!</p>
15 |       </div>
16 |     );
17 |   }
18 |   return (
19 |     <div className="App">
20 |       <Link to="/">
21 |         <img className="logo" src="https://play.nintendo.com/images/PLAY-5075-PBN-Bowser_Logo_v02.e1456275.png" alt="bowser logo" width={200} />
22 |       </Link>
23 |       <NavBar />
24 |       <Routes>
25 |         <Route path="/" exact element={<Home />} />
26 |         <Route path="/one" exact element={<One />} />
27 |         <Route path="/two" exact element={<Two />} />
28 |         <Route path="/three" exact element={<Three />} />
29 |       </Routes>
30 |     </div>
31 |   );
32 | }
33 | 


--------------------------------------------------------------------------------
/5-forms/23-high-score-ii/HighScore.js:
--------------------------------------------------------------------------------
 1 | // High Score II 🕹️
 2 | // Codédex
 3 | 
 4 | import React, { useState } from "react";
 5 | 
 6 | export default function HighScore() {
 7 |   const [name, setName] = useState("");
 8 | 
 9 |   function handleChange(e) {
10 |     setName(e.target.value);
11 |   }
12 | 
13 |   function handleSubmit(e) {
14 |     e.preventDefault();
15 |     if (name.length > 3) {
16 |       alert("Name must be 3 characters or less.");
17 |     } else {
18 |       setName("");
19 |     }
20 |   };
21 | 
22 |   return (
23 |     <div className="arcade-container">
24 |       <form className="arcade-form" onSubmit={handleSubmit}>
25 |         <label htmlFor="name">Enter your name<br/><br />(3 characters max)</label>
26 |         <input
27 |           type="text"
28 |           id="name"
29 |           value={name}
30 |           onChange={handleChange}
31 |           required
32 |           className="arcade-input"
33 |         />
34 |         <br />
35 |         <button type="submit" className="arcade-button">Submit</button>
36 |       </form>
37 |       <p>Top Score: <strong>{name}</strong> </p>
38 |     </div>
39 |   );
40 | }
41 | 


--------------------------------------------------------------------------------
/7-data-fetching/33-now-loading/LoadingScreen.js:
--------------------------------------------------------------------------------
 1 | // Now Loading ⏳
 2 | // Codédex
 3 | 
 4 | import React, { useState, useEffect } from "react";
 5 | import "./styles.css";
 6 | 
 7 | export default function LoadingScreen() {
 8 |   const [loadingMessage, setLoadingMessage] = useState("");
 9 |   const [isLoading, setIsLoading] = useState(false);
10 | 
11 |   useEffect(function() {
12 |     setIsLoading(true);
13 |     setLoadingMessage("Loading...")
14 |     const timer = setTimeout(function() {
15 |       setLoadingMessage("Done Loading!");
16 |       setIsLoading(false);
17 |     }, 3000);
18 | 
19 |     // Clear the timer to avoid memory leaks
20 |     return function() {clearTimeout(timer)};
21 |   }, []);
22 | 
23 |   if (isLoading) {
24 |     return (
25 |       <div className="loading-screen">
26 |         <div className="loading-animation"></div>
27 |         <div className="loading-message">{loadingMessage}</div>
28 |       </div>
29 |     )
30 |   } else {
31 |     return (
32 |       <div className="loading-screen">
33 |       <div className="done-loading-animation"></div>
34 |       <div className="loading-message">{loadingMessage}</div>
35 |       </div>
36 |     );
37 |   }
38 | };
39 | 


--------------------------------------------------------------------------------
/8-routing/40-link-to-the-path/App.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Routes, Route } from "react-router-dom";
 3 | 
 4 | import NavBar from "./components/NavBar";
 5 | import LegendOfZelda from "./components/LegendOfZelda";
 6 | import LinkPast from "./components/LinkPast";
 7 | import TwilightPrincess from "./components/TwilightPrincess";
 8 | import LinkWorlds from "./components/LinkWorlds";
 9 | import BoTW from "./components/BoTW";
10 | import "./styles.css";
11 | 
12 | export default function App() {
13 |   function Home() {
14 |     return (
15 |       <div className="center">
16 |         <p>Explore the pages above!</p>
17 |       </div>
18 |     );
19 |   }
20 |   return (
21 |     <div className="App">
22 |       <NavBar />
23 |       <Routes>
24 |         <Route path="/" exact element={<Home />} />
25 |         <Route path="/1986" exact element={<LegendOfZelda />} />
26 |         <Route path="/1992" exact element={<LinkPast />} />
27 |         <Route path="/2006" exact element={<TwilightPrincess />} />
28 |         <Route path="/2013" exact element={<LinkWorlds />} />
29 |         <Route path="/2017" exact element={<BoTW />} />
30 |       </Routes>
31 |     </div>
32 |   );
33 | }
34 | 


--------------------------------------------------------------------------------
/4-events/19-noise-levels/VolumeControl.js:
--------------------------------------------------------------------------------
 1 | // Noise Levels 🔊
 2 | // Codédex
 3 | 
 4 | import React, { useState } from "react";
 5 | 
 6 | export default function VolumeControl() {
 7 |   const [volume, setVolume] = useState(50);
 8 |   const [status, setStatus] = useState("Use arrow keys ↑ and ↓ to control volume.");
 9 | 
10 |   function handleKeyDown(event) {
11 |     if (event.key === "ArrowUp") {
12 |       // Increase volume when up arrow key is pressed
13 |       setVolume((prevVolume) => Math.min(prevVolume + 5, 100));
14 |       setStatus("Turning volume up");
15 |     } else if (event.key === "ArrowDown") {
16 |       // Decrease volume when down arrow key is pressed
17 |       setVolume((prevVolume) => Math.max(prevVolume - 5, 0));
18 |       setStatus("Turning volume down");
19 |     }
20 |   };
21 | 
22 |   function handleKeyUp() {
23 |     // Reset volume to default (50) when any key is released
24 |     setStatus("Use arrow keys ↑ and ↓ to control volume.");
25 |   };
26 | 
27 |   return (
28 |     <div>
29 |       <h2>Volume Control 🔊</h2>
30 |       <span>Volume: {volume}</span>
31 |       <div id="volume-bar-empty-space">
32 |         <div id="volume-bar" style={{ width: `${volume}%` }}></div>
33 |       </div>
34 |       <div tabIndex={0} onKeyDown={handleKeyDown} onKeyUp={handleKeyUp}>
35 |         Status: {status}
36 |       </div>
37 |     </div>
38 |   );
39 | }


--------------------------------------------------------------------------------
/8-routing/40-link-to-the-path/components/TwilightPrincess.js:
--------------------------------------------------------------------------------
1 | export default function TwilightPrincess() {
2 |     return (
3 |       <div className="center">
4 |         <img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/52a2ab08-0e92-47b0-af81-d72dc6532c7f/db0n9do-b3310e72-76df-4fdb-b08e-0f3cb63dcd05.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzUyYTJhYjA4LTBlOTItNDdiMC1hZjgxLWQ3MmRjNjUzMmM3ZlwvZGIwbjlkby1iMzMxMGU3Mi03NmRmLTRmZGItYjA4ZS0wZjNjYjYzZGNkMDUucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.stVRlnR8RXJxZXTPPVH1yVIG_-StSfmPm3XvrxfvagM" alt="Link Image" />
5 |         <p>"Twilight Princess" for the Nintendo GameCube and Wii presents a mature, teenage Link from the rural village of Ordon. He is initially a simple farmhand who is thrust into a quest to save Hyrule when it is covered in twilight by the usurper king Zant. This Link has the ability to transform into a wolf and is accompanied by the mysterious Midna. The game's art style is more realistic and darker in tone compared to previous entries, reflecting a more serious and epic narrative. He wields traditional weapons like the Master Sword and the Hylian Shield, along with new items like the Spinner and the Ball and Chain.</p>
6 |       </div>
7 |     );
8 |   }
9 |   


--------------------------------------------------------------------------------
/5-forms/25-haiku/Haiku.js:
--------------------------------------------------------------------------------
 1 | // Haiku 📜
 2 | // Codédex
 3 | 
 4 | import React, { useState } from "react";
 5 | 
 6 | export default function Haiku() {
 7 |   const [theme, setTheme] = useState("");
 8 | 
 9 |   function handleSelectChange(e) {
10 |     setTheme(e.target.value);
11 |   };
12 | 
13 |   const themes = {
14 |     nature: ["A gentle breeze blows", "Leaves rustle in the soft wind", "Nature whispers peace"],
15 |     love: ["Heartbeats softly sound", "Love's sweet melody resounds", "Together we're found"],
16 |     seasons: ["Spring blooms with new life", "Summer's warmth and joy arrive", "Autumn leaves fall, sigh"],
17 |   };
18 | 
19 |   function generateHaiku() {
20 |     if(theme) {
21 |       return themes[theme].map(function(line, index) {
22 |         return <p key={index}>{line}</p>
23 |       });
24 |     }
25 |   };
26 | 
27 |   return (
28 |     <div className="container">
29 |       <h2>Haiku Builder</h2>
30 |       <select className="theme-select" value={theme} onChange={handleSelectChange}>
31 |         <option value="">--Select a theme--</option>
32 |         <option value="nature">🌲 Nature</option>
33 |         <option value="love">❤️ Love</option>
34 |         <option value="seasons">🍂 Seasons</option>
35 |       </select>
36 |       <div>
37 |         {generateHaiku()}
38 |       </div>
39 |       <br></br>
40 |       <textarea
41 |         className="haiku-textarea"
42 |         placeholder="Write your own haiku here..."
43 |         rows={3}
44 |         cols={10}
45 |       ></textarea>
46 |     </div>
47 |   );
48 | }
49 | 


--------------------------------------------------------------------------------
/2-jsx-components/10-hot-takes-pt-2/Reviews.js:
--------------------------------------------------------------------------------
 1 | // Hot Takes Pt. 2 ❤️‍🔥
 2 | // Codédex
 3 | 
 4 | export default function Reviews() {
 5 |   return (
 6 |     <div id="reviews">
 7 |       <article className="review">
 8 |         <h1>⭐️✩✩ Review 1</h1>
 9 |         <h3>By So-and-So</h3>
10 |         <p>
11 |           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
12 |           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
13 |           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
14 |           aliquip ex ea commodo consequat.
15 |         </p>
16 |       </article>
17 | 
18 |       <article className="review">
19 |         <h1>⭐️✩✩ Review 2</h1>
20 |         <h3>By So-and-So</h3>
21 |         <p>
22 |           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
23 |           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
24 |           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
25 |           aliquip ex ea commodo consequat.
26 |         </p>
27 |       </article>
28 | 
29 |       <article className="review">
30 |         <h1>⭐️✩✩ Review 3</h1>
31 |         <h3>By So-and-So</h3>
32 |         <p>
33 |           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
34 |           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
35 |           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
36 |           aliquip ex ea commodo consequat.
37 |         </p>
38 |       </article>
39 |     </div>
40 |   );
41 | }
42 | 


--------------------------------------------------------------------------------
/6-hooks/31-kanban-board/App.js:
--------------------------------------------------------------------------------
 1 | // Kanban Board 📋
 2 | // Codédex
 3 | 
 4 | import React from "react";
 5 | import Column from "./Column";
 6 | import { createContext, useContext, useState, useEffect } from "react";
 7 | import "./styles.css";
 8 | 
 9 | export const BoardContext = createContext();
10 | 
11 | const TaskBoardProvider = function() {
12 |   const [tasks, setTasks] = useState([
13 |     { id: 1, title: "Task 1", status: "todo" },
14 |     { id: 2, title: "Task 2", status: "todo" },
15 |     { id: 3, title: "Task 3", status: "todo" },
16 |   ]);
17 | 
18 |   const moveTask = function(taskId, newStatus) {
19 |     const updatedTasks = tasks.map(function(task) {
20 |       if (task.id === taskId) {
21 |         return { ...task, status: newStatus };
22 |       }
23 |       return task;
24 |     });
25 |     setTasks(updatedTasks);
26 |   };
27 | 
28 |   useEffect(function() {
29 |     const doneTasks = document.querySelectorAll(".task[data-status='done']");
30 |     doneTasks.forEach(function(taskElement) {
31 |       taskElement.style.backgroundColor = "#dbf3c9";
32 |     });
33 |   }, [tasks]);
34 | 
35 |   return (
36 |     <BoardContext.Provider value={{ tasks, moveTask }}>
37 |       <Board />
38 |     </BoardContext.Provider>
39 |   );
40 | };
41 | 
42 | const Board = function() {
43 |   const { tasks } = useContext(BoardContext);
44 | 
45 |   return (
46 |     <div className="board">
47 |       <Column title="To Do 🪄" tasks={tasks.filter(function(task) {
48 |         return task.status === "todo"
49 |       })} />
50 |       <Column title="In Progress 🚀" tasks={tasks.filter(function(task) {
51 |         return task.status === "inProgress"
52 |       })} />
53 |       <Column title="Done 🌟" tasks={tasks.filter(function(task) {
54 |         return task.status === "done"
55 |       })} />
56 |     </div>
57 |   );
58 | };
59 | 
60 | export default function App() {
61 |   return (
62 |     <div className="App">
63 |       <TaskBoardProvider />
64 |     </div>
65 |   );
66 | }
67 | 


--------------------------------------------------------------------------------
/7-data-fetching/35-data-evolution/Pokedex.js:
--------------------------------------------------------------------------------
 1 | // Data Evolution 📱
 2 | // Codédex
 3 | 
 4 | import { useState, useEffect } from "react";
 5 | 
 6 | export default function App() {
 7 |   const [pokemonList, setPokemonList] = useState([]);
 8 |   const [filteredPokemonList, setFilteredPokemonList] = useState([]);
 9 | 
10 |   useEffect(function () {
11 |     async function fetchData() {
12 |       try {
13 |         const response = await fetch(
14 |           "https://pokeapi.co/api/v2/pokemon?limit=25",
15 |         );
16 |         const data = await response.json();
17 | 
18 |         const pokemonDataList = [];
19 |         for (const pokemon of data.results) {
20 |           const pokemonResponse = await fetch(pokemon.url);
21 |           const pokemonData = await pokemonResponse.json();
22 |           pokemonDataList.push(pokemonData);
23 |         }
24 | 
25 |         setPokemonList(pokemonDataList);
26 |         setFilteredPokemonList(pokemonDataList);
27 |       } catch (error) {
28 |         console.log("Error fetching data: ", error);
29 |       }
30 |     }
31 | 
32 |     fetchData();
33 |   }, []);
34 | 
35 |   function handleFilterChange(event) {
36 |     const searchTerm = event.target.value.toLowerCase();
37 |     const filtered = pokemonList.filter(function (pokemon) {
38 |       return pokemon.name.toLowerCase().startsWith(searchTerm);
39 |     });
40 |     setFilteredPokemonList(filtered);
41 |   }
42 | 
43 |   return (
44 |     <div>
45 |       <h1>Pokemon List</h1>
46 |       <div>
47 |         <input
48 |           type="text"
49 |           placeholder="Search Pokemon..."
50 |           onChange={handleFilterChange}
51 |         />
52 |       </div>
53 |       <ul>
54 |         {filteredPokemonList.map(function (pokemon, index) {
55 |           return (
56 |             <li key={index} className="pokemon">
57 |               <p>
58 |                 {pokemon.id}.{" "}
59 |                 {pokemon.name[0].toUpperCase() + pokemon.name.slice(1)}
60 |               </p>
61 |               <img src={pokemon.sprites.front_default} alt={pokemon.name} />
62 |             </li>
63 |           );
64 |         })}
65 |       </ul>
66 |     </div>
67 |   );
68 | }
69 | 


--------------------------------------------------------------------------------
/5-forms/26-travel-log/TravelLog.js:
--------------------------------------------------------------------------------
 1 | // Travel Log 🗺️
 2 | // Codédex
 3 | 
 4 | import React, { useState } from "react";
 5 | 
 6 | export default function TravelLog() {
 7 |   const [activities, setActivities] = useState([]);
 8 |   const [inputData, setInputData] = useState({
 9 |     destination: "",
10 |     dates: "",
11 |     groupSize: 0,
12 |     travelPreferences: ""
13 |   });
14 | 
15 |   function handleActivitiesChange(e) {
16 |     const selectedActivities = Array.from(e.target.selectedOptions, (option) => option.value);
17 |     setActivities(selectedActivities);
18 |   };
19 | 
20 |   function handleInputDataChange(e) {
21 |     setInputData({
22 |       ...inputData,
23 |       [e.target.name]: e.target.value
24 |     })
25 |   };
26 | 
27 |   function handleSubmit(e) {
28 |     e.preventDefault();
29 | 
30 |     // Reset form fields after submission
31 |     setActivities([]);
32 |     setInputData({
33 |       destination: "",
34 |       dates: "",
35 |       groupSize: 0,
36 |       travelPreferences: ""
37 |     })
38 |   };
39 | 
40 |   return (
41 |     <div>
42 |       <h2>Adventure Travel Booking</h2>
43 |       <form onSubmit={handleSubmit}>
44 |         <label htmlFor="destination">Destination:</label>
45 |         <input type="text" name="destination" id="destination" value={inputData.destination} onChange={handleInputDataChange} />
46 | 
47 |         <label htmlFor="activities">Activities:</label>
48 |         <select id="activities" multiple value={activities} onChange={handleActivitiesChange}>
49 |           <option value="hiking">Hiking</option>
50 |           <option value="safari">Safari</option>
51 |           <option value="scuba-diving">Scuba Diving</option>
52 |         </select>
53 | 
54 |         <label htmlFor="dates">Dates:</label>
55 |         <input type="date" id="dates" name="dates" value={inputData.dates} onChange={handleInputDataChange} />
56 | 
57 |         <label htmlFor="group-size">Group Size:</label>
58 |         <input type="number" name="groupSize" id="group-size" value={inputData.groupSize} onChange={handleInputDataChange} />
59 | 
60 |         <label htmlFor="travel-preferences">Travel Preferences:</label>
61 |         <textarea id="travel-preferences" name="travelPreferences" value={inputData.travelPreferences} onChange={handleInputDataChange} />
62 | 
63 |         <button type="submit">Book Adventure</button>
64 |       </form>
65 |     </div>
66 |   );
67 | };
68 | 


--------------------------------------------------------------------------------
/5-forms/24-animal-rescue/PetAdoptionForm.js:
--------------------------------------------------------------------------------
  1 | // Animal Rescue 🐶
  2 | // Codédex
  3 | 
  4 | import React, { useState } from 'react';
  5 | 
  6 | export default function PetAdoptionForm() {
  7 |   // State variables to manage form data
  8 |   const [formData, setFormData] = useState({
  9 |     name: "",
 10 |     email: "",
 11 |     phoneNumber: "",
 12 |     petPreference: "",
 13 |     additionalInfo: ""
 14 |   });
 15 | 
 16 |   // Function to handle form submission
 17 |   function handleSubmit(e) {
 18 |     e.preventDefault(); // Prevent default form submission behavior
 19 | 
 20 |     // Perform form submission logic here
 21 |     console.log("Form submitted:", formData);
 22 | 
 23 |     // Reset form fields
 24 |     setFormData({
 25 |       name: "",
 26 |       email: "",
 27 |       phoneNumber: "",
 28 |       petPreference: "",
 29 |       additionalInfo: ""
 30 |     });
 31 |   };
 32 | 
 33 |   // Function to handle input changes
 34 |   function handleInputChange(e) {
 35 |     setFormData({
 36 |       ...formData,
 37 |       [e.target.name]: e.target.value
 38 |     });
 39 |   };
 40 | 
 41 |   return (
 42 |     <div>
 43 |       <h2>Pet Adoption Form 🐾</h2>
 44 |       <form onSubmit={handleSubmit}>
 45 |         <label htmlFor="name">Your Name:</label>
 46 |         <input
 47 |           type="text"
 48 |           id="name"
 49 |           name="name"
 50 |           value={formData.name}
 51 |           onChange={handleInputChange}
 52 |           required
 53 |         /><br /><br />
 54 | 
 55 |         <label htmlFor="email">Your Email:</label>
 56 |         <input
 57 |           type="email"
 58 |           id="email"
 59 |           name="email"
 60 |           value={formData.email}
 61 |           onChange={handleInputChange}
 62 |           required
 63 |         /><br /><br />
 64 | 
 65 |         <label htmlFor="phoneNumber">Phone Number:</label>
 66 |         <input
 67 |           type="tel"
 68 |           id="phoneNumber"
 69 |           name="phoneNumber"
 70 |           value={formData.phoneNumber}
 71 |           onChange={handleInputChange}
 72 |           required
 73 |         /><br /><br />
 74 | 
 75 |         <label>Preferred Pet:</label><br />
 76 |         <input
 77 |           type="radio"
 78 |           id="dog"
 79 |           name="petPreference"
 80 |           value="dog"
 81 |           checked={formData.petPreference === "dog"}
 82 |           onChange={handleInputChange}
 83 |         />
 84 |         <label htmlFor="dog">Dog</label><br />
 85 |         <input
 86 |           type="radio"
 87 |           id="cat"
 88 |           name="petPreference"
 89 |           value="cat"
 90 |           checked={formData.petPreference === "cat"}
 91 |           onChange={handleInputChange}
 92 |         />
 93 |         <label htmlFor="cat">Cat</label><br />
 94 |         <input
 95 |           type="radio"
 96 |           id="other"
 97 |           name="petPreference"
 98 |           value="other"
 99 |           checked={formData.petPreference === "other"}
100 |           onChange={handleInputChange}
101 |         />
102 |         <label htmlFor="other">Other</label><br /><br />
103 | 
104 |         <label htmlFor="additionalInfo">Additional Information:</label>
105 |         <input
106 |           type="text"
107 |           id="additionalInfo"
108 |           name="additionalInfo"
109 |           value={formData.additionalInfo}
110 |           onChange={handleInputChange}
111 |         /><br /><br />
112 | 
113 |         <input type="submit" value="Submit" />
114 |       </form>
115 |     </div>
116 |   );
117 | }


--------------------------------------------------------------------------------
/4-events/20-waterfest/EventInvitation.js:
--------------------------------------------------------------------------------
  1 | // WaterFest 🏝️
  2 | // Codédex
  3 | 
  4 | import React, { useState } from "react";
  5 | import "./index.css";
  6 | 
  7 | export default function EventInvitation() {
  8 |   const [interestedCount, setInterestedCount] = useState(0);
  9 |   const [goingCount, setGoingCount] = useState(0);
 10 |   const [interestedHovered, setInterestedHovered] = useState(false);
 11 |   const [goingHovered, setGoingHovered] = useState(false);
 12 | 
 13 |   function handleInterestedClick() {
 14 |     setInterestedCount(interestedCount + 1);
 15 |   }
 16 | 
 17 |   function handleInterestedKeyDown(e) {
 18 |     if (e.key === " " || e.key === "SpaceBar") {
 19 |       e.target.style.backgroundColor = "#000112";
 20 |       e.target.style.color = "white";
 21 |     }
 22 |   }
 23 | 
 24 |   function handleInterestedKeyUp(e) {
 25 |     e.target.style.color = "black";
 26 |     e.target.style.backgroundColor = "#efefef";
 27 |   }
 28 | 
 29 |   function handleGoingKeyDown(e) {
 30 |     if (e.key === " " || e.key === "SpaceBar") {
 31 |       e.target.style.backgroundColor = "#000112";
 32 |       e.target.style.color = "white";
 33 |     }
 34 |   }
 35 | 
 36 |   function handleGoingKeyUp(e) {
 37 |     e.target.style.color = "black";
 38 |     e.target.style.backgroundColor = "#efefef";
 39 |   }
 40 | 
 41 |   function handleGoingClick() {
 42 |     setGoingCount(goingCount + 1);
 43 |   }
 44 | 
 45 |   function handleInterestedMouseEnter() {
 46 |     setInterestedHovered(true);
 47 |   }
 48 | 
 49 |   function handleInterestedMouseLeave() {
 50 |     setInterestedHovered(false);
 51 |   }
 52 | 
 53 |   function handleGoingMouseEnter() {
 54 |     setGoingHovered(true);
 55 |   }
 56 | 
 57 |   function handleGoingMouseLeave() {
 58 |     setGoingHovered(false);
 59 |   }
 60 | 
 61 |   function handleInterestedFocus() {
 62 |     setInterestedHovered(true);
 63 |   }
 64 | 
 65 |   function handleGoingFocus() {
 66 |     setGoingHovered(true);
 67 |   }
 68 | 
 69 |   function handleInterestedBlur() {
 70 |     setInterestedHovered(false);
 71 |   }
 72 | 
 73 |   function handleGoingBlur() {
 74 |     setGoingHovered(false);
 75 |   }
 76 | 
 77 |   return (
 78 |     <div className="container">
 79 |       <div className="hero-image">
 80 |         <img src="src/waterfest.jpg" alt="Event" />
 81 |       </div>
 82 |       <div className="description">
 83 |         <h2>You're invited to WaterFest! 🏝️</h2>
 84 |         <p>The hardest part is showing up. After you're here, you've already won. Join other winners like you for a weekend of fun and relaxation!</p>
 85 |       </div>
 86 |       <div className="buttons-container">
 87 |         <button
 88 |           tabIndex="0"
 89 |           className={`interested-button ${interestedHovered ? "hovered" : ""}`}
 90 |           onClick={handleInterestedClick}
 91 |           onMouseEnter={handleInterestedMouseEnter}
 92 |           onMouseLeave={handleInterestedMouseLeave}
 93 |           onFocus={handleInterestedFocus}
 94 |           onBlur={handleInterestedBlur}
 95 |           onKeyDown={handleInterestedKeyDown}
 96 |           onKeyUp={handleInterestedKeyUp}
 97 |         >
 98 |           Interested ({interestedCount})
 99 |         </button>
100 |         <button
101 |           tabIndex="0"
102 |           className={`going-button ${goingHovered ? "hovered" : ""}`}
103 |           onClick={handleGoingClick}
104 |           onMouseEnter={handleGoingMouseEnter}
105 |           onMouseLeave={handleGoingMouseLeave}
106 |           onFocus={handleGoingFocus}
107 |           onBlur={handleGoingBlur}
108 |           onKeyDown={handleGoingKeyDown}
109 |           onKeyUp={handleGoingKeyUp}
110 |         >
111 |           Going ({goingCount})
112 |         </button>
113 |       </div>
114 |     </div>
115 |   );
116 | }


--------------------------------------------------------------------------------
/7-data-fetching/36-book-finder/BookFinder.js:
--------------------------------------------------------------------------------
  1 | // Book Finder 🔍
  2 | // Codédex
  3 | 
  4 | import { useState, useEffect } from "react";
  5 | 
  6 | export default function BookFinderApp() {
  7 |   const [query, setQuery] = useState("");
  8 |   const [books, setBooks] = useState([]);
  9 |   const [loading, setLoading] = useState(false);
 10 |   const [error, setError] = useState(null);
 11 | 
 12 |   async function fetchData(filterValue = "") {
 13 |     setError(null);
 14 | 
 15 |     try {
 16 |       let url = `https://www.googleapis.com/books/v1/volumes?q=${query}`;
 17 | 
 18 |       const response = await fetch(url);
 19 |       if (!response.ok) {
 20 |         throw new Error("Network response was not ok.");
 21 |       }
 22 |       const data = await response.json();
 23 |       console.log(data.items);
 24 |       let filteredBooks = data.items;
 25 |       if (filterValue !== "") {
 26 |         filteredBooks = filteredBooks.filter(function (book) {
 27 |           return (
 28 |             book.volumeInfo &&
 29 |             book.volumeInfo.categories &&
 30 |             book.volumeInfo.categories.includes(filterValue)
 31 |           );
 32 |         });
 33 |       }
 34 | 
 35 |       setBooks(filteredBooks);
 36 |       setLoading(false);
 37 |     } catch (error) {
 38 |       setError("Error fetching data. Please try again later.");
 39 |     }
 40 |   }
 41 | 
 42 |   useEffect(
 43 |     function () {
 44 |       if (query !== "") {
 45 |         fetchData();
 46 |       }
 47 |     },
 48 |     [loading],
 49 |   );
 50 | 
 51 |   function handleInputChange(event) {
 52 |     setQuery(event.target.value);
 53 |   }
 54 | 
 55 |   function handleSearch(event) {
 56 |     setLoading(true);
 57 |     fetchData();
 58 |   }
 59 | 
 60 |   function handleFilterChange(event) {
 61 |     setLoading(true);
 62 |     fetchData(event.target.value);
 63 |   }
 64 | 
 65 |   return (
 66 |     <div>
 67 |       <h1>Book Finder</h1>
 68 |       <div id="input-fields">
 69 |         <input
 70 |           type="text"
 71 |           value={query}
 72 |           onChange={handleInputChange}
 73 |           placeholder="Search for books..."
 74 |         />
 75 |         <button type="submit" onClick={handleSearch}>
 76 |           Search
 77 |         </button>
 78 |         <br />
 79 |         <label htmlFor="filter">Filter by:</label>
 80 |         <select id="filter" onChange={handleFilterChange}>
 81 |           <option value="">All</option>
 82 |           <option value="Paid ebooks">Paid E-books</option>
 83 |           <option value="free-ebooks">Free E-books</option>
 84 |         </select>
 85 |       </div>
 86 |       {loading && <p>Loading...</p>}
 87 |       {error && <p>{error}</p>}
 88 |       <ul>
 89 |         {books.map(function (book) {
 90 |           return (
 91 |             <li key={book.id} className="book">
 92 |               {book.volumeInfo.imageLinks &&
 93 |                 book.volumeInfo.imageLinks.thumbnail && (
 94 |                   <img
 95 |                     src={book.volumeInfo.imageLinks.thumbnail}
 96 |                     alt={book.volumeInfo.title}
 97 |                     className="book-cover"
 98 |                   />
 99 |                 )}
100 |               <div className="book-info">
101 |                 <h2>{book.volumeInfo.title}</h2>
102 |                 <p>
103 |                   {book.volumeInfo.authors
104 |                     ? book.volumeInfo.authors.join(", ")
105 |                     : "Unknown Author"}
106 |                 </p>
107 | 
108 |                 <p>
109 |                   {book.volumeInfo.description
110 |                     ? `${book.volumeInfo.description.substring(0, 100)}...`
111 |                     : "No description available"}
112 |                 </p>
113 |               </div>
114 |             </li>
115 |           );
116 |         })}
117 |       </ul>
118 |     </div>
119 |   );
120 | }
121 | 
122 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 |   <br>
 3 |   <h1>Framework Valley: React ⚛️</h1>
 4 |   <strong>GitHub repo with beginner-friendly problems with React</strong>
 5 | </div>
 6 | <br>
 7 | 
 8 | Welcome to Framework Valley: React GitHub repo! We are super excited to have you. Here, you will find all the solutions to the Codédex challenges. Feel free to make pull requests to add your own twists on the challenges!
 9 | 
10 | ### Website: www.codedex.io/react
11 | 
12 | ## First React App
13 | 
14 | - [`our-workstation`](https://github.com/codedex-io/react-101/blob/main/1-first-react-app/02-our-workstation)
15 | - [`writing-react`](https://github.com/codedex-io/react-101/blob/main/1-first-react-app/03-writing-react)
16 | - [`building-blocks`](https://github.com/codedex-io/react-101/blob/main/1-first-react-app/04-building-blocks)
17 | - [`social-post`](https://github.com/codedex-io/react-101/blob/main/1-first-react-app/05-social-post)
18 | 
19 | ## JSX & Components
20 | 
21 | - [`band-tour`](https://github.com/codedex-io/react-101/blob/main/2-jsx-components/06-band-tour)
22 | - [`embedded-js`](https://github.com/codedex-io/react-101/blob/main/2-jsx-components/07-embedded-js)
23 | - [`travel-gallery`](https://github.com/codedex-io/react-101/blob/main/2-jsx-components/08-travel-gallery)
24 | - [`hot-takes`](https://github.com/codedex-io/react-101/blob/main/2-jsx-components/09-hot-takes-pt-1) (pt. 1)
25 | - [`hot-takes`](https://github.com/codedex-io/react-101/blob/main/2-jsx-components/10-hot-takes-pt-2) (pt. 2)
26 | 
27 | ## Props & State
28 | 
29 | - [`giving-props`](https://github.com/codedex-io/react-101/blob/main/3-props-state/11-giving-props)
30 | - [`notifications`](https://github.com/codedex-io/react-101/blob/main/3-props-state/12-notifications)
31 | - [`stopwatch`](https://github.com/codedex-io/react-101/blob/main/3-props-state/13-stopwatch)
32 | - [`quiz`](https://github.com/codedex-io/react-101/blob/main/3-props-state/14-quiz)
33 | - [`trending-now`](https://github.com/codedex-io/react-101/blob/main/3-props-state/15-trending-now)
34 | 
35 | ## Events
36 | 
37 | - [`online-shopping`](https://github.com/codedex-io/react-101/blob/main/4-events/16-online-shopping)
38 | - [`tooltips`](https://github.com/codedex-io/react-101/blob/main/4-events/17-tooltips)
39 | - [`a-focus-in-art`](https://github.com/codedex-io/react-101/blob/main/4-events/18-a-focus-in-art)
40 | - [`noise-levels`](https://github.com/codedex-io/react-101/blob/main/4-events/19-noise-levels)
41 | - [`waterfest`](https://github.com/codedex-io/react-101/blob/main/4-events/20-waterfest)
42 | 
43 | ## Forms
44 | 
45 | - [`newsletter`](https://github.com/codedex-io/react-101/blob/main/5-forms/21-newsletter)
46 | - [`high-score-i`](https://github.com/codedex-io/react-101/blob/main/5-forms/22-high-score-i)
47 | - [`high-score-ii`](https://github.com/codedex-io/react-101/blob/main/5-forms/23-high-score-ii)
48 | - [`animal-rescue`](https://github.com/codedex-io/react-101/blob/main/5-forms/24-animal-rescue)
49 | - [`haiku`](https://github.com/codedex-io/react-101/blob/main/5-forms/25-haiku)
50 | - [`travel-log`](https://github.com/codedex-io/react-101/blob/main/5-forms/26-travel-log)
51 | 
52 | ## Hooks
53 | 
54 | - [`cookie-clicker`](https://github.com/codedex-io/react-101/blob/main/6-hooks/27-cookie-clicker)
55 | - [`color-effects-i`](https://github.com/codedex-io/react-101/blob/main/6-hooks/28-color-effects-i)
56 | - [`color-effects-ii`](https://github.com/codedex-io/react-101/blob/main/6-hooks/29-color-effects-ii)
57 | - [`barbenheimer`](https://github.com/codedex-io/react-101/blob/main/6-hooks/30-barbenheimer)
58 | - [`kanban-board`](https://github.com/codedex-io/react-101/blob/main/6-hooks/31-kanban-board)
59 | 
60 | ## Data Fetching
61 | 
62 | - [`our-universe`](https://github.com/codedex-io/react-101/blob/main/7-data-fetching/32-our-universe)
63 | - [`now-loading`](https://github.com/codedex-io/react-101/blob/main/7-data-fetching/33-now-loading)
64 | - [`i-am-error`](https://github.com/codedex-io/react-101/blob/main/7-data-fetching/34-i-am-error)
65 | - [`data-evolution`](https://github.com/codedex-io/react-101/blob/main/7-data-fetching/35-data-evolution)
66 | - [`book-finder`](https://github.com/codedex-io/react-101/blob/main/7-data-fetching/36-book-finder)
67 | 
68 | ## Routing
69 | 
70 | - [`know-your-routes`](https://github.com/codedex-io/react-101/blob/main/8-routing/37-know-your-routes)
71 | - [`bowser`](https://github.com/codedex-io/react-101/blob/main/8-routing/38-browser)
72 | - [`paper-route-trail`](https://github.com/codedex-io/react-101/blob/main/8-routing/39-paper-route-trail)
73 | - [`link-to-the-path`](https://github.com/codedex-io/react-101/blob/main/8-routing/40-link-to-the-path)
74 | - [`ponoplayer`](https://github.com/codedex-io/react-101/blob/main/8-routing/41-ponoplayer)
75 | 


--------------------------------------------------------------------------------