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)