├── 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 ? Heart for like button : Empty heart for like button} 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 | Profile Image

Hipthehippocorn

15 | 16 |
17 | Post Image 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 |
9 | 10 |
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 ? Heart for like button : Empty heart for like button} 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 | Profile Image

Hipthehippocorn

15 | 16 |
17 | Post Image 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 | 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 = Barcelona; 6 | const tokyoImage = Tokyo; 7 | const ohioImage = Ohio; 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 | 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 | 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 | 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 | 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 | {props.title} 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 | 27 | {quantity} 28 | 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 | Zoomable 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 |
    32 |
    33 |
    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 | Event 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 | 100 | 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 |
    9 | 10 | 11 | 12 |
    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 |
    16 | 17 | 25 |
    26 | 27 |
    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 |
    25 | 26 | 34 |
    35 | 36 |
    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 |
    45 | 46 |

    54 | 55 | 56 |

    64 | 65 | 66 |

    74 | 75 |
    76 | 84 |
    85 | 93 |
    94 | 102 |

    103 | 104 | 105 |

    112 | 113 | 114 |
    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 | 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 |
    44 | 45 | 46 | 47 | 48 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 |