Cats Fatc's Quick project

Guru — Sat, 20 Apr 2024 07:08:52 +0000

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....

Hello Devs !!!

Guru — Fri, 19 Apr 2024 16:26:01 +0000

Hello Guys iam Guru a Self thought web developer currently in the phase of learning react js already it take's too much time to me
to understand the basics of react today iam learning about useEffects and i dont even know how to work with api's yeah it sounds like shit!! but yesss i dont know how to work with apis
but i realy have my full focused on my journey to be become a Full Stack web developer its my First Post in Dev Community any Way iam started put more focuse of my carrer from today.
while doing some of the projects i accedently did some simple counter but it only has one button for increse and decrese
i know it was not that much complicated for a medium level react learner or a pro in react but it was helpful in someways for a very new react biggner
here are my code's

import "./styles.css";
import { useState, useEffect } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const [isNeg, setIsNeg] = useState(false);

  const changeMode = () => {
    isNeg ? setCount((count) => count - 1) : setCount((count) => count + 1);
  };

  return (
    <div className="App">
      <div>
        <h1>{count}</h1>
        <button onClick={() => setIsNeg((value) => !value)}>
          change
        </button>
        <button onClick={changeMode}>{isNeg ? "+" : "-"}</button>
      </div>
    </div>
  );
}

yes my English is soo much messy and not perfect but i correct that too and also iam looking for connect with web developers is any one intrested pls replay for this post
Thank You....

DEV Community: Guru

Cats Fatc's Quick project

Hello Devs !!!