├── 1-first-react-app
├── 02-our-workstation
│ ├── index.js
│ └── public
│ │ └── index.html
├── 03-writing-react
│ └── App.js
├── 04-building-blocks
│ ├── FollowButton.js
│ ├── LikeButton.js
│ └── Post.js
└── 05-social-post
│ ├── App.js
│ ├── FollowButton.js
│ ├── LikeButton.js
│ └── Post.js
├── 2-jsx-components
├── 06-band-tour
│ └── App.js
├── 07-embedded-js
│ └── App.js
├── 08-travel-gallery
│ └── App.js
├── 09-hot-takes-pt-1
│ ├── App.js
│ ├── Footer.js
│ └── Header.js
└── 10-hot-takes-pt-2
│ ├── App.js
│ ├── Footer.js
│ ├── Header.js
│ └── Reviews.js
├── 3-props-state
├── 11-giving-props
│ └── App.js
├── 12-notifications
│ ├── App.js
│ └── Notification.js
├── 13-stopwatch
│ ├── App.js
│ └── Stopwatch.js
├── 14-quiz
│ ├── App.js
│ ├── Question.js
│ └── Quiz.js
└── 15-trending-now
│ ├── App.js
│ ├── Movie.js
│ └── TrendingList.js
├── 4-events
├── 16-online-shopping
│ ├── App.js
│ └── ShoppingItem.js
├── 17-tooltips
│ └── App.js
├── 18-a-focus-in-art
│ ├── App.js
│ └── ZoomableImage.js
├── 19-noise-levels
│ ├── App.js
│ └── VolumeControl.js
└── 20-waterfest
│ ├── App.js
│ └── EventInvitation.js
├── 5-forms
├── 21-newsletter
│ ├── App.js
│ └── Newsletter.js
├── 22-high-score-i
│ ├── App.js
│ └── HighScore.js
├── 23-high-score-ii
│ ├── App.js
│ └── HighScore.js
├── 24-animal-rescue
│ ├── App.js
│ └── PetAdoptionForm.js
├── 25-haiku
│ ├── App.js
│ └── Haiku.js
└── 26-travel-log
│ ├── App.js
│ └── TravelLog.js
├── 6-hooks
├── 27-cookie-clicker
│ ├── App.js
│ └── styles.css
├── 28-color-effects-i
│ ├── App.js
│ └── styles.css
├── 29-color-effects-ii
│ ├── App.js
│ └── styles.css
├── 30-barbenheimer
│ ├── App.js
│ ├── Home.js
│ ├── ThemeSwitcher.js
│ └── styles.css
└── 31-kanban-board
│ ├── App.js
│ ├── Column.js
│ ├── Task.js
│ └── styles.css
├── 7-data-fetching
├── 32-our-universe
│ └── App.js
├── 33-now-loading
│ ├── App.js
│ └── LoadingScreen.js
├── 34-i-am-error
│ └── App.js
├── 35-data-evolution
│ ├── App.js
│ └── Pokedex.js
└── 36-book-finder
│ ├── App.js
│ └── BookFinder.js
├── 8-routing
├── 37-know-your-routes
│ ├── App.js
│ ├── components
│ │ ├── NavBar.js
│ │ ├── Owala.js
│ │ ├── Stanley.js
│ │ └── Yeti.js
│ ├── index.js
│ └── styles.css
├── 38-browser
│ ├── App.js
│ ├── components
│ │ ├── NavBar.js
│ │ ├── One.js
│ │ ├── Three.js
│ │ └── Two.js
│ ├── index.js
│ └── styles.css
├── 39-paper-route-trail
│ ├── App.js
│ ├── components
│ │ ├── Garden.js
│ │ ├── House.js
│ │ ├── Map.js
│ │ ├── Museum.js
│ │ └── School.js
│ ├── index.js
│ └── styles.css
├── 40-link-to-the-path
│ ├── App.js
│ ├── components
│ │ ├── BoTW.js
│ │ ├── LegendOfZelda.js
│ │ ├── LinkPast.js
│ │ ├── LinkWorlds.js
│ │ ├── NavBar.js
│ │ └── TwilightPrincess.js
│ ├── index.js
│ └── styles.css
└── 41-ponoplayer
│ ├── App.js
│ ├── components
│ ├── About.js
│ ├── Customers.js
│ ├── Gallery.js
│ ├── Home.js
│ └── NavBar.js
│ ├── index.js
│ └── styles.css
└── README.md
/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( );
--------------------------------------------------------------------------------
/1-first-react-app/02-our-workstation/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Document
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/1-first-react-app/03-writing-react/App.js:
--------------------------------------------------------------------------------
1 | // Writing React ✍🏼
2 | // Codédex
3 |
4 | export default function App() {
5 | return (
6 |
7 |
Hello, World!
8 |
9 | );
10 | }
--------------------------------------------------------------------------------
/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 | setFollowing(!following)}>
10 | {following === true ? "Following" : "Follow"}
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/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 |
14 |
setLikes(likes + 1)}>
15 | {likes > 0 ?
:
}
16 |
17 |
{likes === 1 ? ` ${likes} Like` : `${likes} Likes`}
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/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 |
13 |
14 |
Hipthehippocorn
15 |
16 |
17 |
18 |
19 |
20 | );
21 | }
--------------------------------------------------------------------------------
/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 |
11 | );
12 | }
--------------------------------------------------------------------------------
/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 | setFollowing(!following)}>
10 | {following === true ? "Following" : "Follow"}
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/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 |
14 |
setLikes(likes + 1)}>
15 | {likes > 0 ?
:
}
16 |
17 |
{likes === 1 ? ` ${likes} Like` : `${likes} Likes`}
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/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 |
13 |
14 |
Hipthehippocorn
15 |
16 |
17 |
18 |
19 |
20 | );
21 | }
--------------------------------------------------------------------------------
/2-jsx-components/06-band-tour/App.js:
--------------------------------------------------------------------------------
1 | // Band Tour 🎸
2 | // Codédex
3 |
4 | export default function App() {
5 | return (
6 |
7 |
Tour Stops
8 |
9 | 🇺🇸 New York City, US - Madison Square Garden
10 | 🇬🇧 London, UK - Wembley Stadium
11 | 🇩🇪 Munich, DE - Zenith Halle
12 | 🇯🇵 Tokyo, JP - Budokan
13 | 🇦🇺 Melbourne, AU - The Forum
14 |
15 |
16 | )
17 | }
18 |
--------------------------------------------------------------------------------
/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 |
9 | My name is {name}!
10 |
11 | )
12 | }
--------------------------------------------------------------------------------
/2-jsx-components/08-travel-gallery/App.js:
--------------------------------------------------------------------------------
1 | // Travel Gallery 📸
2 | // Codédex
3 |
4 | export default function App() {
5 | const barcelonaImage = ;
6 | const tokyoImage = ;
7 | const ohioImage = ;
8 |
9 | const imageGallery = [
10 | {barcelonaImage} ,
11 | {tokyoImage} ,
12 | {ohioImage}
13 | ]
14 |
15 | return (
16 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/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 |
10 |
11 |
12 |
13 | );
14 | }
--------------------------------------------------------------------------------
/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 |
7 |
8 | Contact
9 | Newsletter
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/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 |
7 | Hot Takes 🔥
8 |
9 |
10 | New Reviews
11 | Recents
12 | Archives
13 |
14 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/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 |
11 |
12 |
13 |
14 |
15 | );
16 | }
--------------------------------------------------------------------------------
/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 |
6 |
7 | Contact
8 | Newsletter
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/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 |
7 | Hot Takes 🔥
8 |
9 |
10 | New Reviews
11 | Recents
12 | Archives
13 |
14 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/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 |
7 |
8 | ⭐️✩✩ Review 1
9 | By So-and-So
10 |
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 |
16 |
17 |
18 |
19 | ⭐️✩✩ Review 2
20 | By So-and-So
21 |
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 |
27 |
28 |
29 |
30 | ⭐️✩✩ Review 3
31 | By So-and-So
32 |
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 |
38 |
39 |
40 | );
41 | }
42 |
--------------------------------------------------------------------------------
/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 |
24 | {catalogItems.map(function (item) {
25 | return (
26 |
27 |
{item.name}
28 |
Specialty: {item.category}
29 |
Learn more
30 |
31 | )
32 | })}
33 |
34 | )
35 | }
--------------------------------------------------------------------------------
/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 |
9 |
Notifications
10 |
11 |
12 |
13 |
14 |
15 | );
16 | }
--------------------------------------------------------------------------------
/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 {props.message}
;
12 | }
13 |
--------------------------------------------------------------------------------
/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 ;
9 | }
10 |
--------------------------------------------------------------------------------
/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 |
16 |
Time Starts Now!
17 | {seconds} seconds
18 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/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 ;
9 | }
--------------------------------------------------------------------------------
/3-props-state/14-quiz/Question.js:
--------------------------------------------------------------------------------
1 | export default function Question(props) {
2 | return {props.question}
;
3 | }
4 |
--------------------------------------------------------------------------------
/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 |
12 |
15 |
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/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 ;
30 | }
--------------------------------------------------------------------------------
/3-props-state/15-trending-now/Movie.js:
--------------------------------------------------------------------------------
1 | // Trending Now 🎬
2 | // Codédex
3 |
4 | export default function Movie(props) {
5 | return (
6 |
7 |
8 |
9 |
{props.title}
10 | Released in {props.releaseYear}
11 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/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 |
9 |
Trending Now
10 |
11 | {props.movies.map(function(movie) {
12 | return
13 | })}
14 |
15 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/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 |
10 |
Shopping List
11 |
12 |
13 |
14 |
15 | );
16 | }
--------------------------------------------------------------------------------
/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 |
21 |
22 | {props.name}
23 |
24 |
25 | -
26 |
27 | {quantity}
28 |
29 | +
30 |
31 |
32 |
33 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/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 |
20 |
25 | Hover over me
26 | {showTooltip &&
This is a tooltip
}
27 |
28 |
29 | )
30 | }
31 |
--------------------------------------------------------------------------------
/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
8 | }
--------------------------------------------------------------------------------
/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 |
19 |
32 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/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
8 | }
9 |
--------------------------------------------------------------------------------
/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 |
29 |
Volume Control 🔊
30 |
Volume: {volume}
31 |
34 |
35 | Status: {status}
36 |
37 |
38 | );
39 | }
--------------------------------------------------------------------------------
/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 |
9 |
10 |
11 | );
12 | }
--------------------------------------------------------------------------------
/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 |
79 |
80 |
81 |
82 |
83 |
You're invited to WaterFest! 🏝️
84 |
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!
85 |
86 |
87 |
98 | Interested ({interestedCount})
99 |
100 |
111 | Going ({goingCount})
112 |
113 |
114 |
115 | );
116 | }
--------------------------------------------------------------------------------
/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
9 | }
--------------------------------------------------------------------------------
/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 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/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
10 | }
--------------------------------------------------------------------------------
/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 |
15 |
28 |
Top Score: {name}
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/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
10 | }
--------------------------------------------------------------------------------
/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 |
24 |
37 |
Top Score: {name}
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/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
9 | }
--------------------------------------------------------------------------------
/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 |
43 |
Pet Adoption Form 🐾
44 |
115 |
116 | );
117 | }
--------------------------------------------------------------------------------
/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
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 {line}
23 | });
24 | }
25 | };
26 |
27 | return (
28 |
29 |
Haiku Builder
30 |
31 | --Select a theme--
32 | 🌲 Nature
33 | ❤️ Love
34 | 🍂 Seasons
35 |
36 |
37 | {generateHaiku()}
38 |
39 |
40 |
46 |
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/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
9 | }
--------------------------------------------------------------------------------
/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 |
42 |
Adventure Travel Booking
43 |
65 |
66 | );
67 | };
68 |
--------------------------------------------------------------------------------
/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 |
16 |
{click} Cookies
17 |
18 |
19 | );
20 | }
21 |
22 |
--------------------------------------------------------------------------------
/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 | }
--------------------------------------------------------------------------------
/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 |
22 | ZAP!!
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/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/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 |
33 | {toggle ? "Stop" : "Start"} Color Changing
34 |
35 | );
36 | }
--------------------------------------------------------------------------------
/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 | }
--------------------------------------------------------------------------------
/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 |
27 |
28 |
29 |
30 | );
31 | }
32 |
33 |
--------------------------------------------------------------------------------
/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 |
17 |
{theme === "barbie" ? "💇🏼♀️💅🏻💗" : "🕵🏼♂️🌇🎥"}
18 |
19 | {theme === "barbie" ? "Im a barbie girl, in a barbie world!" : "Now I am become Death, the destroyer of worlds."}
20 |
21 |
22 | );
23 | }
--------------------------------------------------------------------------------
/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 |
13 |
14 | Switch to {theme === "barbie" ? "Oppenheimer" : "Barbie"} Theme
15 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/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/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 |
37 |
38 |
39 | );
40 | };
41 |
42 | const Board = function() {
43 | const { tasks } = useContext(BoardContext);
44 |
45 | return (
46 |
47 |
50 |
53 |
56 |
57 | );
58 | };
59 |
60 | export default function App() {
61 | return (
62 |
63 |
64 |
65 | );
66 | }
67 |
--------------------------------------------------------------------------------
/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 |
10 |
{title}
11 | {tasks.map(function(task) {
12 |
13 | })}
14 |
15 | );
16 | }
--------------------------------------------------------------------------------
/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 |
17 |
{task.title}
18 |
19 | To Do
20 | In Progress
21 | Done
22 |
23 |
24 | );
25 | }
--------------------------------------------------------------------------------
/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 | }
--------------------------------------------------------------------------------
/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 |
21 |
NASA Astronomy Picture of the Day (APOD)
22 | {apodData &&
23 |
{apodData.title}
24 |
25 |
{apodData.explanation}
26 |
}
27 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/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
8 | }
--------------------------------------------------------------------------------
/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 |
26 |
27 |
{loadingMessage}
28 |
29 | )
30 | } else {
31 | return (
32 |
33 |
34 |
{loadingMessage}
35 |
36 | );
37 | }
38 | };
39 |
--------------------------------------------------------------------------------
/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 |
27 | {error &&
||
}
28 | {error &&
{error} ||
Yay, no errors! }
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/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
8 | }
--------------------------------------------------------------------------------
/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 |
45 |
Pokemon List
46 |
47 |
52 |
53 |
66 |
67 | );
68 | }
69 |
--------------------------------------------------------------------------------
/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
8 | }
--------------------------------------------------------------------------------
/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 |
67 |
Book Finder
68 |
69 |
75 |
76 | Search
77 |
78 |
79 | Filter by:
80 |
81 | All
82 | Paid E-books
83 | Free E-books
84 |
85 |
86 | {loading &&
Loading...
}
87 | {error &&
{error}
}
88 |
89 | {books.map(function (book) {
90 | return (
91 |
92 | {book.volumeInfo.imageLinks &&
93 | book.volumeInfo.imageLinks.thumbnail && (
94 |
99 | )}
100 |
101 |
{book.volumeInfo.title}
102 |
103 | {book.volumeInfo.authors
104 | ? book.volumeInfo.authors.join(", ")
105 | : "Unknown Author"}
106 |
107 |
108 |
109 | {book.volumeInfo.description
110 | ? `${book.volumeInfo.description.substring(0, 100)}...`
111 | : "No description available"}
112 |
113 |
114 |
115 | );
116 | })}
117 |
118 |
119 | );
120 | }
121 |
122 |
--------------------------------------------------------------------------------
/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 |
15 |
which waterbottle are you?
16 |
17 | 🌟 Navigate the page to find out what watterbottle you are! 🌟
18 |
19 |
20 | );
21 | }
22 | return (
23 |
24 |
25 |
26 | } />
27 | } />
28 | } />
29 | } />
30 |
31 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/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 |
8 | Owala
9 | Stanley
10 | Yeti
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/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 |
6 |
owala 🐨
7 |
8 |
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 |
11 |
14 |
15 | );
16 | }
--------------------------------------------------------------------------------
/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 |
6 |
stanley 🚛
7 |
8 |
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 |
11 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/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 |
6 |
yeti 🍊
7 |
12 |
13 | You like efficiency and are a realist. Loyal to personal items and people come easy to you. Minimalist at heart.
14 |
15 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/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 |
11 |
12 |
13 |
14 |
15 | );
--------------------------------------------------------------------------------
/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 | }
--------------------------------------------------------------------------------
/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 |
16 | );
17 | }
18 | return (
19 |
20 |
21 |
22 |
23 |
24 |
25 | } />
26 | } />
27 | } />
28 | } />
29 |
30 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/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 |
7 | version one
8 | version two
9 | version three
10 | Peaches
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/8-routing/38-browser/components/One.js:
--------------------------------------------------------------------------------
1 | export default function One() {
2 | return (
3 |
4 |
5 |
you are on V1
6 |
7 | );
8 | }
9 |
--------------------------------------------------------------------------------
/8-routing/38-browser/components/Three.js:
--------------------------------------------------------------------------------
1 | export default function Three() {
2 | return (
3 |
4 |
5 |
you are on V3
6 |
7 | );
8 | }
9 |
--------------------------------------------------------------------------------
/8-routing/38-browser/components/Two.js:
--------------------------------------------------------------------------------
1 | export default function Two() {
2 | return (
3 |
4 |
5 |
you are on V2
6 |
7 | );
8 | }
9 |
--------------------------------------------------------------------------------
/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 |
11 |
12 |
13 |
14 |
15 | );
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
12 |
Map Navigation
13 |
14 |
15 | } />
16 | } />
17 | } />
18 | } />
19 |
20 |
21 | );
22 | }
23 |
24 | export default App;
25 |
--------------------------------------------------------------------------------
/8-routing/39-paper-route-trail/components/Garden.js:
--------------------------------------------------------------------------------
1 | export default function Garden() {
2 | return (
3 |
4 |
Garden
5 |
Welcome to the Garden page!
6 |
7 | );
8 | }
9 |
--------------------------------------------------------------------------------
/8-routing/39-paper-route-trail/components/House.js:
--------------------------------------------------------------------------------
1 | export default function House() {
2 | return (
3 |
4 |
House
5 |
Welcome to the House page!
6 |
7 | );
8 | }
9 |
--------------------------------------------------------------------------------
/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 |
7 |
8 |
Welcome to ReactTown!
9 |
10 |
11 | 🏡
12 |
13 |
14 | 🪴
15 |
16 |
17 | 🏫
18 |
19 |
20 | 🏛️
21 |
22 |
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/8-routing/39-paper-route-trail/components/Museum.js:
--------------------------------------------------------------------------------
1 | export default function Museum() {
2 | return (
3 |
4 |
Museum
5 |
Welcome to the Museum page!
6 |
7 | );
8 | }
9 |
--------------------------------------------------------------------------------
/8-routing/39-paper-route-trail/components/School.js:
--------------------------------------------------------------------------------
1 | export default function School() {
2 | return (
3 |
4 |
School
5 |
Welcome to the School page!
6 |
7 | );
8 | }
9 |
--------------------------------------------------------------------------------
/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 |
11 |
12 |
13 |
14 |
15 | );
16 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
16 |
Explore the pages above!
17 |
18 | );
19 | }
20 | return (
21 |
22 |
23 |
24 | } />
25 | } />
26 | } />
27 | } />
28 | } />
29 | } />
30 |
31 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/8-routing/40-link-to-the-path/components/BoTW.js:
--------------------------------------------------------------------------------
1 | export default function BoTW() {
2 | return (
3 |
4 |
5 |
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.
6 |
7 | );
8 | }
9 |
10 |
--------------------------------------------------------------------------------
/8-routing/40-link-to-the-path/components/LegendOfZelda.js:
--------------------------------------------------------------------------------
1 | export default function LegendOfZelda() {
2 | return (
3 |
4 |
5 |
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.
6 |
7 | );
8 | }
9 |
--------------------------------------------------------------------------------
/8-routing/40-link-to-the-path/components/LinkPast.js:
--------------------------------------------------------------------------------
1 | export default function LinkPast() {
2 | return (
3 |
4 |
5 |
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.
6 |
7 | );
8 | }
9 |
--------------------------------------------------------------------------------
/8-routing/40-link-to-the-path/components/LinkWorlds.js:
--------------------------------------------------------------------------------
1 | export default function LinkWorlds() {
2 | return (
3 |
4 |
5 |
"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.
6 |
7 | );
8 | }
9 |
--------------------------------------------------------------------------------
/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 |
7 | The Legend of Zelda
8 | A Link to the Past
9 | Twilight Princess
10 | A Link Between Worlds
11 | Breath of the Wild
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/8-routing/40-link-to-the-path/components/TwilightPrincess.js:
--------------------------------------------------------------------------------
1 | export default function TwilightPrincess() {
2 | return (
3 |
4 |
5 |
"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.
6 |
7 | );
8 | }
9 |
--------------------------------------------------------------------------------
/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 |
11 |
12 |
13 |
14 |
15 | );
--------------------------------------------------------------------------------
/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/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 |
16 |
17 |
18 | } />
19 | } />
20 | } />
21 | } />
22 |
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/8-routing/41-ponoplayer/components/About.js:
--------------------------------------------------------------------------------
1 | export default function About() {
2 | return (
3 |
4 |
About
5 |
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 |
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/8-routing/41-ponoplayer/components/Customers.js:
--------------------------------------------------------------------------------
1 | export default function Customers() {
2 | return (
3 |
4 |
Customers and Reviews
5 |
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 |
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 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/8-routing/41-ponoplayer/components/Gallery.js:
--------------------------------------------------------------------------------
1 | export default function Gallery() {
2 | return (
3 |
4 |
Gallery
5 |
10 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/8-routing/41-ponoplayer/components/Home.js:
--------------------------------------------------------------------------------
1 | export default function Home() {
2 | return (
3 |
4 |
The PonoPlayer
5 |
9 |
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 |
12 |
13 | );
14 | }
--------------------------------------------------------------------------------
/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 |
7 | Home
8 | About
9 | Gallery
10 | Customers
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/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 |
11 |
12 |
13 |
14 |
15 | );
--------------------------------------------------------------------------------
/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 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Framework Valley: React ⚛️
4 | GitHub repo with beginner-friendly problems with React
5 |
6 |
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 |
--------------------------------------------------------------------------------