Simple React Project: Quotes generator.

Ishraq Tanvir — Mon, 12 Jun 2023 12:28:10 +0000

Are you ready to dive into the world of React.js? In this step-by-step tutorial, I'll walk you through building an interactive Quotes Generator using React.js and Vite. I'll highlight the importance of integrating an API and fetch data using axios

Preview:

Github respository(Give a star✨)

Step 1: Setting up the Project with Vite

we need to set up a new React.js project using Vite. By following these steps:

Open your terminal and navigate to the desired directory where you'd like to create your project.

Run the following command to create a new Vite project called "quotes-generator-react":

npm init vite@latest quotes-generator --template react

Once the project is created, navigate into the project folder using:

cd quotes-generator

Step 2: Editing the React App:

Edit the src folder of your project.
In the folder Create App.jsx file and add the following code:

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

This will import necessary react modules which are gonna used in this project and css styles.

Step 3: CSS Implementation

Delete the index.css file and edit App.css.Delete all the styles in that styles and edit the css file and add following code:

@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");
root,
html,
body {
  margin: 0;
  padding: 0;
  font-family: "Ubuntu", sans-serif;
}

.app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: rgb(173, 200, 255);
}

.card {
  transition: opacity 0.5s;

  display: grid;
  place-content: center;
  margin: 20px;
  color: #fff;
  max-width: 450px;
  padding: 0px 20px 20px 20px;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    rgb(63, 124, 255) 0%,
    rgb(17, 52, 123) 100%
  );
}

.heading {
  font-size: 40px;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 2px;
  word-spacing: 1px;
  line-height: 1.3;
}

.button {
  border-radius: 7px;
  cursor: pointer;
  padding: 13px 20px;
  opacity: 1;
  background-color: #ffffff;
  border: none;
  outline: none;
}

.button span {
  color: #1d5dcc;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.7px;
}
.button:hover {
  background-color: #ececec;
  transition: ease-in-out 0.1s;
}

.card.fetching {
  opacity: 0.5;
  pointer-events: none;
}

Step 3: Editing the main.jsx file:

edit main.jsx file and add the following code which will render your App.jsx file.

import { createRoot } from 'react-dom/client';
import App from './App'
const domNode = document.querySelector('#root');
const root = createRoot(domNode);
root.render(<App />)

Step 4: Fetching data using Axios:

const [advice, setAdvice] = useState({
        advice: "",
        isFetching: false, // Removed initial fetching state
    });

    useEffect(() => {
        fetchAdvice();
    }, []);

    const fetchAdvice = () => {
        setAdvice((prevState) => ({ ...prevState, isFetching: true }));
        axios
            .get("https://api.adviceslip.com/advice")
            .then((res) => {
                const { advice } = res.data.slip;
                setAdvice({ advice: advice, isFetching: false });
            })
            .catch((error) => {
                console.log("Error occurred", error);
                setAdvice((prevState) => ({ ...prevState, isFetching: false }));
            });
    };

    const rawAdvice = advice.advice.slice(0, -1);

paste the code in the curlibrackets export default () => {}
this code will fetch data from the following api using axois:

Api:

https://api.adviceslip.com/advice

Sample JSON Data:

{
  "slip": {
    "id": 122,
    "advice": "You spend half your life asleep or in bed. It's worth spending money on a good mattress, decent pillows and a comfy duvet."
  }
}

Step 5: Showing the data in dom:

Just paste the following code which will render the data. the main data is stored int the rawAdvice which just return the advice:'......' but cut the fullstop that will make the advice text node more good to look.

return (
        <div className="app">
            <div className={`card ${advice.isFetching ? "fetching" : ""}`}>
                <h1 className="heading"><span>' </span>{rawAdvice}<span> '</span></h1>
                <button onClick={fetchAdvice} className="button">
                    <span>Generate!</span>
                </button>
            </div>
        </div>
    );

now paste the code at the end of export default () => {} brackets.

Step 6: Running the file

In the terminal paste this command:

npm run dev

Woohhh!This your quotoes generator app using react and vite

Preview Section(Source code and browser)

Main:-

App.jsx:-

main.jsx:-

index.html:-

Final Preview along with code editor:-

Links:-

Gradient Color Collection by tishraq28

Ishraq Tanvir — Fri, 06 May 2022 06:36:51 +0000

Gradiesh - A Small Collection of Gradients

Intro

Gradiesh mainly a site of a small collection of gradients. It is built for both designers and developers. They can use gradients from the site. In the main, site there are only 24 gradients but all of these are most used in the web 3.0 era. Sometimes, it is hard to make common gradients with CSS. For this, Gradiesh is a easy solution. All can use it without any hassle.

Usages

1. Open the main site

2. Choose your gradients

I am choosing second one. You can choose any one.

3. After choosing, Click on your choosed gradient box.

When you Click on your choose gradient box, you will see that a success message has opened and gradient code has successfully copied on your clipboard. You can use it in your code. Click ok

Meet the Creator

Hey that's Ishraq. I have built this happy project for you.

Follow Me:-

twitter : https://twitter.com/tishraq28
Facebook :https://facebook.com/tishraq28
GitHub : https://github.com/tishraq28

Don't forget to give me a GitHub star✨✨✨✨✨

Thanks You very much🙏🙏🙏🙏🙏
`

DEV Community: Ishraq Tanvir