+ {item.gender === 'Male' || item.gender === 'm' ? 'π¨ Male' : item.gender === 'Female' || item.gender === 'f' ? 'π© Female' : ''} +
+ )} +D'oh!
++ {character.description || getCharacterDescription(character.name)} +
++ {character.name} +
++ {character.normalized_name} +
++ {character.gender === 'Male' || character.gender === 'm' ? 'π¨ Male' : character.gender === 'Female' || character.gender === 'f' ? 'π© Female' : 'Unknown'} +
++ {character.age} years old +
++ {character.occupation} +
++ {character.status === 'Alive' ? 'β Alive' : character.status === 'Deceased' ? 'π Deceased' : character.status} +
+Open file ./store.js to see the global store that contains and updates the list of colors
diff --git a/src/pages/EpisodeDetail.jsx b/src/pages/EpisodeDetail.jsx new file mode 100644 index 000000000..9140211df --- /dev/null +++ b/src/pages/EpisodeDetail.jsx @@ -0,0 +1,216 @@ +import { useEffect, useState } from "react"; +import { Link, useParams } from "react-router-dom"; + +export const EpisodeDetail = () => { + const { id } = useParams(); + const [episode, setEpisode] = useState(null); + const [loading, setLoading] = useState(true); + const [imgError, setImgError] = useState(false); + + useEffect(() => { + fetch(`https://thesimpsonsapi.com/api/episodes/${id}`) + .then(res => res.json()) + .then(data => { + setEpisode(data); + setLoading(false); + }) + .catch(error => { + console.error("Error fetching episode:", error); + setLoading(false); + }); + }, [id]); + + if (loading) { + return ( +D'oh!
++ π Aired: {new Date(episode.airdate).toLocaleDateString('en-US', { + weekday: 'long', + year: 'numeric', + month: 'long', + day: 'numeric' + })} +
++ {episode.synopsis} +
++ #{episode.episode_number} +
++ Season {episode.season} +
++ {new Date(episode.airdate).toLocaleDateString('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric' + })} +
++ π Aired: {new Date(episode.airdate).toLocaleDateString('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric' + })} +
++ {episode.synopsis} +
+ +
-
-
D'oh!
++ {location.town} +
++ {location.use} +
++ {location.name} +
++ {location.town} +
++ {location.use} +
++ π {location.town} +
+ )} + {location.use && ( ++ {location.use} +
+ )} + ++ {getDescription('people', id)} +
+{person.name}
+{person.birth_year}
+{person.gender}
+{person.height} cm
+{person.mass} kg
+{person.hair_color}
+{person.skin_color}
+{person.eye_color}
++ {getDescription('planets', id)} +
+{planet.name}
+{planet.climate}
+{planet.population}
+{planet.diameter} km
+{planet.terrain}
+{planet.gravity}
+{planet.orbital_period} days
+{planet.rotation_period} hours
+{planet.surface_water}%
++ {getDescription('vehicles', id)} +
+{vehicle.name}
+{vehicle.model}
+{vehicle.vehicle_class}
+{vehicle.manufacturer}
+{vehicle.cost_in_credits} credits
+{vehicle.length} m
+{vehicle.max_atmosphering_speed} km/h
+{vehicle.crew}
+{vehicle.passengers}
+{vehicle.cargo_capacity} kg
+{vehicle.consumables}
+