Hello Dev's Yesterday i Uploded a Counter With Single button for both increment and decrement
*Today * i learned about useEffect littele bit more and it useFull tooo mee so much
by learned knowledge i code a simple random cats Facts website that fetch data from an Api
import { useEffect, useState } from "react"; import "./App.css"; import audio from "./assets/click-sound.mp3"; function App() { const [catFact, setCatFact] = useState(""); const [loading, setLoading] = useState(false); const [error, setError] = useState(false); const [clickSound, setClickSound] = useState(null); useEffect(() => { // Load the click sound const sound = new Audio(audio); setClickSound(sound); }, []); const playClickSound = () => { if (clickSound) { clickSound.play(); } }; const fetchData = async () => { try { setLoading(true); const response = await fetch("https://catfact.ninja/fact"); if (!response.ok) { throw new Error("Unable to Fetch Data"); } const data = await response.json(); setCatFact(data.fact); setError(false); playClickSound(); // Play sound when fetching data } catch (err) { setError(true); } finally { setLoading(false); } }; return ( <div className="App"> <h1>Cat Facts</h1> <h1 className="Logo">🐈😼😿</h1> {loading && <h4 className="loading">Loading Data...⏳</h4>} {!loading && catFact && <h4>{catFact}</h4>} {error && !loading && <h1 className="error">Error 404 ! 🚫</h1>} {!loading && !catFact && !error && <h1>No facts available 😿</h1>} <button onClick={fetchData}>Show More Facts</button> </div> ); } export default App; 
link for the Site : https://catsfactsrandom.netlify.app/
Here Today i leared How use Api in React and Async and Await
Thank You. dev community
thank you....
Top comments (0)