DEV Community: ziontutorial

MERN role-based app | Node js backend

ziontutorial — Tue, 04 Mar 2025 08:22:31 +0000

index.js

import express from "express";
import cors from "cors";
import session from "express-session";
import dotenv from "dotenv";
import db from "./config/Database.js";
// import SequelizeStore from "connect-session-sequelize";
import UserRoute from "./routes/UserRoute.js";
import ProductRoute from "./routes/ProductRoute.js";
import AuthRoute from "./routes/AuthRoute.js";
dotenv.config();

const app = express();

// const sessionStore = SequelizeStore(session.Store);

// const store = new sessionStore({
//     db: db
// });

// (async()=>{
//     await db.sync();
// })();


app.use(session({
    secret: process.env.SESS_SECRET,
    resave: false,
    saveUninitialized: true,
    // store: store,
    cookie: {
        secure: 'auto'
    }
}));

app.use(cors({
    credentials: true,
    origin: 'http://localhost:3000'
}));
app.use(express.json());
app.use(UserRoute);
app.use(ProductRoute);
app.use(AuthRoute);
// store.sync();


app.listen(process.env.APP_PORT, ()=> {
    console.log('Server up and running...');
});

Routes

UserRoute.js

import express from "express";
import {
    getUsers,
    getUserById,
    createUser,
    updateUser,
    deleteUser
} from "../controllers/Users.js";
import { verifyUser, adminOnly } from "../middleware/AuthUser.js";

const router = express.Router();

router.get('/users', verifyUser, getUsers);
router.get('/users/:id', verifyUser, getUserById);
router.post('/users', createUser);
router.patch('/users/:id', verifyUser, updateUser);
router.delete('/users/:id', verifyUser, deleteUser);

export default router;

Product Route

Productroute.js

import express from "express";
import {
    getProducts,
    getProductById,
    createProduct,
    updateProduct,
    deleteProduct
} from "../controllers/Products.js";
import { verifyUser } from "../middleware/AuthUser.js";

const router = express.Router();

router.get('/products',verifyUser, getProducts);
router.get('/products/:id',verifyUser, getProductById);
router.post('/products',verifyUser, createProduct);
router.patch('/products/:id',verifyUser, updateProduct);
router.delete('/products/:id',verifyUser, deleteProduct);

export default router;

AuthRoute

authroute.js

import express from "express";
import {Login, logOut, Me} from "../controllers/Auth.js";

const router = express.Router();

router.get('/me', Me);
router.post('/login', Login);
router.delete('/logout', logOut);

export default router;

Model

UserModel.js

import { Sequelize } from "sequelize";
import db from "../config/Database.js";

const {DataTypes} = Sequelize;

const Users = db.define('users',{
    uuid:{
        type: DataTypes.STRING,
        defaultValue: DataTypes.UUIDV4,
        allowNull: false,
        validate:{
            notEmpty: true
        }
    },
    name:{
        type: DataTypes.STRING,
        allowNull: false,
        validate:{
            notEmpty: true,
            len: [3, 100]
        }
    },
    email:{
        type: DataTypes.STRING,
        allowNull: false,
        validate:{
            notEmpty: true,
            isEmail: true
        }
    },
    password:{
        type: DataTypes.STRING,
        allowNull: false,
        validate:{
            notEmpty: true
        }
    },
    role:{
        type: DataTypes.STRING,
        allowNull: false,
        validate:{
            notEmpty: true
        }
    }
},{
    freezeTableName: true
});

export default Users;

ProductModel.js

import { Sequelize } from "sequelize";
import db from "../config/Database.js";
import Users from "./UserModel.js";

const {DataTypes} = Sequelize;

const Products = db.define('product',{
    uuid:{
        type: DataTypes.STRING,
        defaultValue: DataTypes.UUIDV4,
        allowNull: false,
        validate:{
            notEmpty: true
        }
    },
    name:{
        type: DataTypes.STRING,
        allowNull: false,
        validate:{
            notEmpty: true,
            len: [3, 100]
        }
    },
    price:{
        type: DataTypes.INTEGER,
        allowNull: false,
        validate:{
            notEmpty: true
        }
    },
    userId:{
        type: DataTypes.INTEGER,
        allowNull: false,
        validate:{
            notEmpty: true
        }
    }
},{
    freezeTableName: true
});

Users.hasMany(Products);
Products.belongsTo(Users, {foreignKey: 'userId'});

export default Products;

Middleware

Authmiddleware.js

import User from "../models/UserModel.js";

export const verifyUser = async (req, res, next) =>{
    if(!req.session.userId){
        return res.status(401).json({msg: "Please login to your account!"});
    }
    const user = await User.findOne({
        where: {
            uuid: req.session.userId
        }
    });
    if(!user) return res.status(404).json({msg: "User not found"});
    req.userId = user.id;
    req.role = user.role; 
    next();
}



export const adminOnly = async (req, res, next) =>{
    const user = await User.findOne({
        where: {
            uuid: req.session.userId
        }
    });
    if(!user) return res.status(404).json({msg: "User not found"});
    if(user.role !== "admin") return res.status(403).json({msg: "Access prohibited"});
    next();
}

Controller

User.js

import User from "../models/UserModel.js";

export const verifyUser = async (req, res, next) =>{
    if(!req.session.userId){
        return res.status(401).json({msg: "Please login to your account!"});
    }
    const user = await User.findOne({
        where: {
            uuid: req.session.userId
        }
    });
    if(!user) return res.status(404).json({msg: "User not found"});
    req.userId = user.id;
    req.role = user.role; 
    next();
}



export const adminOnly = async (req, res, next) =>{
    const user = await User.findOne({
        where: {
            uuid: req.session.userId
        }
    });
    if(!user) return res.status(404).json({msg: "User not found"});
    if(user.role !== "admin") return res.status(403).json({msg: "Access prohibited"});
    next();
}

Products.js

import Product from "../models/ProductModel.js";
import User from "../models/UserModel.js";
import { Op } from "sequelize";

export const getProducts = async (req, res) => {
    try {
        let response;
        if (req.role === "admin") {
            response = await Product.findAll({
                attributes: ['uuid', 'name', 'price'],
                include: [{
                    model: User,
                    attributes: ['name', 'email']
                }]
            });
        } else {
            response = await Product.findAll({
                attributes: ['uuid', 'name', 'price'],
                where: {
                    userId: req.userId
                },
                include: [{
                    model: User,
                    attributes: ['name', 'email']
                }]
            });
        }
        res.status(200).json(response);
    } catch (error) {
        res.status(500).json({ msg: error.message });
    }
}

export const getProductById = async (req, res) => {
    try {
        const product = await Product.findOne({
            where: {
                uuid: req.params.id
            }
        });
        if (!product) return res.status(404).json({ msg: "Data tidak ditemukan" });
        let response;
        if (req.role === "admin") {
            response = await Product.findOne({
                attributes: ['uuid', 'name', 'price'],
                where: {
                    id: product.id
                },
                include: [{
                    model: User,
                    attributes: ['name', 'email']
                }]
            });
        } else {
            response = await Product.findOne({
                attributes: ['uuid', 'name', 'price'],
                where: {
                    [Op.and]: [{ id: product.id }, { userId: req.userId }]
                },
                include: [{
                    model: User,
                    attributes: ['name', 'email']
                }]
            });
        }
        res.status(200).json(response);
    } catch (error) {
        res.status(500).json({ msg: error.message });
    }
}

export const createProduct = async (req, res) => {
    const { name, price } = req.body;
    try {
        await Product.create({
            name: name,
            price: price,
            userId: req.userId
        });
        res.status(201).json({ msg: "Product Created Successfuly" });
    } catch (error) {
        res.status(500).json({ msg: error.message });
    }
}

export const updateProduct = async (req, res) => {
    try {
        const product = await Product.findOne({
            where: {
                uuid: req.params.id
            }
        });
        if (!product) return res.status(404).json({ msg: "Data tidak ditemukan" });
        const { name, price } = req.body;
        if (req.role === "admin") {
            await Product.update({ name, price }, {
                where: {
                    id: product.id
                }
            });
        } else {
            if (req.userId !== product.userId) return res.status(403).json({ msg: "Akses terlarang" });
            await Product.update({ name, price }, {
                where: {
                    [Op.and]: [{ id: product.id }, { userId: req.userId }]
                }
            });
        }
        res.status(200).json({ msg: "Product updated successfuly" });
    } catch (error) {
        res.status(500).json({ msg: error.message });
    }
}

export const deleteProduct = async (req, res) => {
    try {
        const product = await Product.findOne({
            where: {
                uuid: req.params.id
            }
        });
        if (!product) return res.status(404).json({ msg: "Data tidak ditemukan" });
        const { name, price } = req.body;
        if (req.role === "admin") {
            await Product.destroy({
                where: {
                    id: product.id
                }
            });
        } else {
            if (req.userId !== product.userId) return res.status(403).json({ msg: "Akses terlarang" });
            await Product.destroy({
                where: {
                    [Op.and]: [{ id: product.id }, { userId: req.userId }]
                }
            });
        }
        res.status(200).json({ msg: "Product deleted successfuly" });
    } catch (error) {
        res.status(500).json({ msg: error.message });
    }
}

Auth.js

import User from "../models/UserModel.js";
import argon2 from "argon2";

export const Login = async (req, res) =>{
    const user = await User.findOne({
        where: {
            email: req.body.email
        }
    });
    if(!user) return res.status(404).json({msg: "User not found"});
    const match = await argon2.verify(user.password, req.body.password);
    if(!match) return res.status(400).json({msg: "Wrong Password"});
    req.session.userId = user.uuid;
    const uuid  =  user.uuid;
    const name  =  user.name;
    const email =  user.email;
    const role  =  user.role;
    res.status(200).json({uuid, name, email, role});
}

export const Me = async (req, res) =>{
    if(!req.session.userId){
        return res.status(401).json({msg: "Please login to your account!!"});
    }
    const user = await User.findOne({
        attributes:['uuid','name','email','role'],
        where: {
            uuid: req.session.userId
        }
    });
    if(!user) return res.status(404).json({msg: "User not found"});
    res.status(200).json(user);
}
export const logOut = (req, res) =>{
    req.session.destroy((err)=>{
        if(err) return res.status(400).json({msg: "Cannot log out"});
        res.status(200).json({msg: "You have logged out"});
    });
}

Config

Database.js

import {Sequelize} from "sequelize";

const db = new Sequelize('auth_db', 'root', '', {
    host: "localhost",
    dialect: "mysql"
});

export default db;

pakage.json

{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "argon2": "^0.28.7",
    "connect-session-sequelize": "^7.1.4",
    "cors": "^2.8.5",
    "dotenv": "^16.0.1",
    "express": "^4.18.1",
    "express-session": "^1.17.3",
    "mysql2": "^2.3.3",
    "sequelize": "^6.21.3"
  }
}

how-to-make-login-page-like-twitter-using-react-js-sign-in-page-design-with-react-js/

ziontutorial — Thu, 23 Jan 2025 17:51:08 +0000

In this article, we will guide you through the process of designing a stunning Twitter Login Clone using react js. You'll learn the best practices for creating a user-friendly and responsive login page, as well as how to implement essential design elements to make your login page stand out. By the end of this article, you'll have a step-by-step guide to building a customizable and visually appealing Twitter log in page clone using React js.

The goal of this tutorial is to introduce developers to the React.js library.The reader should be familiar with the fundamental web development technologies, such as:

Basics for HTML and CSS

Javascript

Basics of React.js in ES6

What we will Learn

Here we will learn how to design a Twitter login clone using react. we will learn to code a simple Twitter login clone using the React.js library. The workflow of the app is the same as the previous blog.If you have not read that blog kindly follow the link .

Popular article: Counter app using react js

Folder structure

Install React

After the successful installation of Nodejs, install and set up a React app using the below command.

npx create-react-app react-counter-app

Then jump to that folder eg. if your folder name is react-counter-app the type

cd react-counter-app

After that Go to the App.js file and start your coding part here we will define our state and functions which are required to increment and decrement our numbers.

Let’s jump into the app.js part where all the logic of our application

App.js

let’s jump into our App.js where all the magic happens and we discuss our application markup here.

import "./App.css";

function App() {
  return (
    <div className="logo-box">
      <img src="./logo.png" alt="apple" className="logo" />
      <h2>Sign In to Twitter</h2>
      <button>
        <img src="./google.png" alt="apple" />
        Sign in with Google
      </button>
      <button>
        <img src="./apple.png" alt="apple" />
        Sign in with Google
      </button>
      <hr></hr>
      <span>Or</span>
      <form>
        <input type="text" placeholder="Phone email or username" />
        <button>Next</button>
      </form>
      <button>Forget Password</button>
      <p>
        Don't Have an account<a>Sign up</a>
      </p>
    </div>
  );
}

export default App;

App.css

Let's begin creating the CSS for our Twitter login clone that will completely transform the appearance of our application. We will be implementing the necessary styles to replicate the design of Twitter's login page, including the use of their distinctive blue color scheme and typography. There is the code just copy and paste it in your app.css file

* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}

body {
  background: #3e65fe;
}

.logo-box {
  background: #fff;
  padding: 30px 120px;
  width: 550px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  border-radius: 10px;
}

.logo {
  width: 30px;
  margin-bottom: 20px;
}
.logo-box h2 {
  margin-bottom: 20px;
}

.logo-box button img {
  width: 18px;
  margin-right: 10px;
}

.logo-box button {
  width: 100%;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0px;
  border-radius: 30px;
  background: transparent;
  border: 1px solid #999;
  font-weight: 500;
  cursor: pointer;
}

.logo-box hr {
  border: 0;
  height: 1px;
  background: #c2c2c2;
  margin: 5px;
}

.logo-box span {
  display: block;
  width: 40px;
  margin: auto;
  background: #fff;
  font-size: 14px;
  margin-top: -16px;
}
.logo-box input {
  width: 100%;
  background: transparent;
  border: 1px solid #999;
  outline: 0;
  padding: 15px 10px;
  border-radius: 4px;
}
::placeholder {
  font-weight: 500;
  color: #333;
}

.logo-box form button {
  background: #000;
  color: #fff;
  border: 0;
  margin-bottom: 15px;
}

.logo-box p {
  /* text-align: left; */
  font-size: 14px;
  color: #555;
  margin: 40px 0 50px;
}

.login-box p a {
  text-decoration: none;
  color: #359cf0;
  margin-left: 100px;
}

GitHub

You can always refer to the GitHub repository to clone the project we have created.

1.https://github.com/tinkugupta5/Counter_app

Conclusion

We did it! ? Hope you like How To Make a Twitter Login Clone Using React Js | Sign In Page Design With React Js. For such projects do visits and comment on which project should I cover next.

Check out this BMI Calculator using react and hooks. Comment if you have any questions. Regarding this project, please comment in the comment box.

Happy coding!

Set Up Tailwind CSS in a React JS Project

ziontutorial — Sun, 15 Dec 2024 09:31:45 +0000

If you don’t have a React app already, create one:

npx create-react-app my-app
cd my-app

Install Tailwind CSS Run the following command to install Tailwind CSS and its dependencies:

npm install -D tailwindcss postcss autoprefixer

Then initialize Tailwind CSS:

npx tailwindcss init

This will create a tailwind.config.js file in your project.

Configure Tailwind Edit the tailwind.config.js file to configure the content paths. Replace the content key with the following:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // Scan these files for Tailwind classes
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Add Tailwind Directives to CSS In the src folder, locate or create a file called index.css. Add the following Tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Import CSS in React Ensure index.css is imported into your project. In the src/index.js file, you should have:

import './index.css';

Start the Development Server Run your React app to see Tailwind CSS in action:

npm start

How to Make Responsive Login Form using Only React Js ✨🚀

ziontutorial — Sat, 22 Jun 2024 06:34:45 +0000

In this article we will design a Responsive Login Form using Only React Js. I am Daman sure you all are familiar with this type of design. However i think there are many beginner who do not know How to Make Responsive Login Form using Only React Js. Hopefully this article will help you out.

If you want you can watch the live demo with this link.

Don't miss this article : link.

if you are a beginner do follow my steps what I am doing to How to Make Responsive Login Form using Only React Js .

Download the source code : link.

App.js



import React from 'react'

const App = () => {
  return (
    <div className="container">
      <div className="wrapper">

        <div className="title">
          <span>Welcome back</span>
        </div>
        <p className='title_para'>Please enter your details to sign in.</p>

        <form action="#">
          <div className="row">
            {/* <i className="fas fa-user"></i> */}
            <input type="text" placeholder="Enter your email..." required />
          </div>
          <div className="row">
            {/* <i className="fas fa-lock"></i> */}
            <input type="password" placeholder="Password" required />
          </div>
          <div className="pass"><a href="#">Forgot password?</a></div>
          <div className="row button">
            <input type="submit" value="Login" />
          </div>
          <div className="signup-link">Not a member? <a href="#">Signup now</a></div>
        </form>
      </div>
    </div>
  )
}

export default App

Now lets jump into css part where we write react js and css .
App.css



@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

body {
  background: #F2EFEF;
  overflow: hidden;
}

::selection {
  background: rgba(26, 188, 156, 0.3);
}

.container {
  max-width: 440px;
  padding: 0 20px;
  margin: 170px auto;
}

.wrapper {
  width: 100%;
  background: #fff;
  border-radius: 5px;
  /* box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1); */
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.wrapper .title {
  height: 90px;
  background: #ffffff;
  border-radius: 5px 5px 0 0;
  color: #151515;
  font-size: 25px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title_para {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  bottom: 22px;
  color: #7e7e7e;
}

.wrapper form {
  padding: 10px 25px 34px 25px;
}

.wrapper form .row {
  height: 56px;
  margin-bottom: 15px;
  position: relative;
}

.wrapper form .row input {
  height: 100%;
  width: 100%;
  outline: none;
  padding-left: 20px;
  border-radius: 5px;
  border: 1px solid lightgrey;
  font-size: 16px;
  transition: all 0.3s ease;
}

form .row input:focus {
  border-color: #16a085;
  box-shadow: inset 0px 0px 2px 2px rgba(26, 188, 156, 0.25);
}

form .row input::placeholder {
  color: #999;
}

.wrapper form .row i {
  position: absolute;
  width: 47px;
  height: 100%;
  color: #fff;
  font-size: 18px;
  background: #16a085;
  border: 1px solid #16a085;
  border-radius: 5px 0 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper form .pass {
  margin: 4px 4px 23px 4px;
}

.wrapper form .pass a {
  color: #16a085;
  font-size: 17px;
  text-decoration: none;
}

.wrapper form .pass a:hover {
  text-decoration: underline;
}

.wrapper form .button input {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  padding-left: 0px;
  background: #242526;
  border: 1px solid #141414;
  cursor: pointer;
}

form .button input:hover {
  background: #090909;
}

.wrapper form .signup-link {
  text-align: center;
  margin-top: 25px;
  /* font-size: 17px; */
  padding-right: 20px;
}

.wrapper form .signup-link a {
  color: #16a085;
  text-decoration: none;
}

form .signup-link a:hover {
  text-decoration: underline;
}

Conclusion
I hope you enjoyed this little tutorial. Let me know over on

Happy Coding! 😇

🧙‍♂️Weather Application using ReactJS | react mini project 🪄✨🚀

ziontutorial — Wed, 08 May 2024 19:11:00 +0000

Using the ReactJS Framework, In this React js weather application tutorial we will create an interactive weather application. The user will be able to access real-time weather information for the city they have searched for through the built application by consuming the api from openweathermap .Also you can find the React js weather application github code.

Live Demo.

Asset Link.

Let's take a peek at our finished product in an interactive manner | React js weather application example:

Technologies Used/Pre-requisites:

ReactJS
React js.
CSS.
JSX.
Function Components in React.

Method:

The ReactJS Framework is used in the produced code to display the interactive Weather Application. Users of the programme can access real-time information about a variety of cities. We are retrieving the weather information for the city that the user has looked for with the aid of API. The application is fully responsive, and it responds quickly in terms of output. The user interface of the app is likewise user-friendly.

Project Structure:

Steps to create React Application And Installing Module
Step 1: Create a React application using the following command:
npx create-react-app projectname

then jump to the directory
cd projectname
Step 2: To run the application:
npm start

Example: Insert the below code in the respective files.

App.js: All the logic of this application for weather application i have write in the App.js file
Index.css: You guys can also write the styling part in the index.css or app.css but in this application case we will write all the css code in the index.css file

App.js

import React, { useState } from "react";
import { useEffect } from "react";

function App() {
  const [city, setCity] = useState("Delhi");
  const [weatherData, setWeatherData] = useState(null);
  const [error, setError] = useState(null);

  const currentDate = new Date();

  const months = [
    "January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"
  ];

  const month = months[currentDate.getMonth()];
  const day = currentDate.getDate();
  const year = currentDate.getFullYear();

  const formattedDate = `${month} ${day}, ${year}`;

  const API_KEY = "bcda10ba323e88e96cb486015a104d1d"; // Replace 'YOUR_API_KEY' with your actual API key from OpenWeatherMap

  const fetchWeatherData = async () => {
    try {
      const response = await fetch(
        `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`
      );
      const data = await response.json();
      console.log(data)
      // if (response.ok) {
      setWeatherData(data);
      // setError(null);
      // } else {
      //   setError(data.message);
      //   setWeatherData(null);
      // }
    } catch (error) {
      console.error("Error fetching weather data:", error);
      // setError("Error fetching weather data. Please try again later.");
      // setWeatherData(null);
    }
  };

  useEffect(()=>{

  fetchWeatherData();

  },[])

  const handleInputChange = (event) => {
    setCity(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    fetchWeatherData();
  };

  const getWeatherIconUrl = (main) => {
    switch (main) {
      case "Clear":
        return "/sun.png"; // Path to your sunny weather icon
      case "Rain":
        return "/icons/rainy.png"; // Path to your rainy weather icon
      case "Snow":
        return "/icons/snowy.png"; // Path to your snowy weather icon
      case "Haze":
        return "/sun.png"; // Path to your haze weather icon
      // Add more cases for other weather conditions as needed
      default:
        return null;
    }
  };


  return (
    <div className="App">


      <div className="container">
        {weatherData && (
          <>
            <h1 className="container_date">{formattedDate}</h1>
            <div className="weather_data">
              <h2 className="container_city">{weatherData.name}</h2>
              {/* <img className="container_img" src="/thunder.png" width="180px" alt="sss"/> */}
              <img className="container_img" src={getWeatherIconUrl(weatherData.weather[0].main)} width="180px" alt="Weather Icon" />
              <h2 className="container_degree">{weatherData.main.temp}</h2>
              <h2 className="country_per">{weatherData.weather[0].main}<span className="degree_icon"></span></h2>
              <form className="form" onSubmit={handleSubmit}>
                <input
                  type="text"
                  class="input"
                  placeholder="Enter city name"
                  value={city}
                  onChange={handleInputChange}
                  required
                />
                <button type="submit">Get</button>
              </form>
            </div>
          </>
        )}


      </div>
    </div>
  );
}

export default App; ```

CSS ( INDEX.CSS )



/* Google Font Link */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  /* background: #0059FF; */
}

.container {
  background: #EDF0F6;
  background: linear-gradient(354deg, #137DF5 0%, #14B1F8 100%);
  /* padding: 30px 120px; */
  width: 320px;
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  border-radius: 10px;
}

.container_date
{
  color: white;
  margin-top:76px;
  opacity: 47%;
  font-size: 22px;
  font-weight: 400;
}

.container_city
{
  margin-top: 1rem;
  font-size: 37px;
  font-weight: 700;
  color: white;

}

.container_degree{
  font-size: 50px;
  font-weight: 800;
  color: white;
  position: relative;
  top: -20px;
}

.container_img
{
  position: relative;
  top: -29px;
}

.degree_icon
{
  font-size: 20px;
}

.country_per
{
  position: relative;
  top: -15px;
  color: white;
  font-size: 18px;
}

.input {
  border: none;
  padding: 1rem;
  border-radius: 0px 0px 0px 15px;
  background: #e8e8e8;
  /* box-shadow: 20px 20px 60px #c5c5c5, -20px -20px 60px #ffffff; */
  transition: 0.3s;
  position: relative;
  top: -2px;
 }

 .input:focus {
  outline-color: #e8e8e8;
  background: #e8e8e8;
  box-shadow: inset 20px 20px 60px #e8e8e8,
     inset -20px -20px 60px #ffffff;
  transition: 0.3s;
 }

 /* button */

 button 
  {
    color: #090909;
    padding: 0.7em 0.7em;
    font-size: 18px;
    /* border-radius: 0.5em; */
    /* background: #e8e8e8; */
    cursor: pointer;
    border: 1px solid #e8e8e8;
    transition: all 0.3s;
}

button:active {
  color: #666;
  box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
}

.form
{
  margin-top: 3rem;

Here Is Full Code : Link

Conclusion:

We have successfully build this weather application using react js and we have used many technologies in it . To build this react js weather application . i hope you will love this tutorial get so many knowledge from this video. I’m hoping you’ll create this application effectively and get a lot of knowledge from it. We designed this project as a beginner project, but in the future days we will cover more advanced projects as well.

🧙‍♂️Master JavaScript with these 5 GitHub repositories🪄✨🚀

ziontutorial — Sat, 16 Mar 2024 16:42:16 +0000

This article contains a list of 5 GitHub repositories that are going to be useful for JavaScript developers whether you are an experienced developer or a beginner-level developer.

People are also reading: : Make Modern Website using react js | Free Source Code

Hey folks! 👋

In this article, we'll take a look at the 5 github repos which is Publicly available!

1. Javascript Questions

This repository lets you know about:

How well you know JavaScript
You can prepare for your coding Interview
Question with Solution and their detailed explanation
Multi-Language Support.

It contains questions from basic to advanced and is updated regularly with new questions.

If you're the kind of person who follows Solving a question a day keeps unemployment away then this is the perfect repo for you.

2. 📜 33 JavaScript concepts every developer should know.

This repository lets you:

You can prepare for your coding Interview
Precise JavaScript Article bundles and videos
Multi-Language Support.

Again It contains questions from basic to advanced and is updated regularly with new questions in the form of article and video format.

3. You-Dont-Know-JS

This repository lets you:

You can prepare for your coding Interview
Precise JavaScript Book and Md Files

It dives deep into the core mechanisms of the Javascript language and is available online completely for free.

You should not miss this one if you want to have a firm grasp over the language!

4. The Algorithm - Javascript

This repository lets you:

You can prepare for your coding Interview about DSA and algo
implemented in JavaScript for beginners, following best practices.

It focuses on implementing various data structures and algorithms in Javascript ranging from the basic ones like sorting and searching to complex ones such as dynamic programming.

If you liked reading this, don't forget to check out our remaining articles from here Link.

I have Mentioned 5 Repo Here click on this Links

Don't forget to comment on what you liked and didn't like about this tutorial and if there's something you know that I should have included in this article, do let me know in the comments down below.

Have a great one, bye! 👋

Please check out my website.
Link

Create a beginner-level project Make A Modern Website Using React Js | Hero Section

ziontutorial — Sat, 16 Mar 2024 15:39:59 +0000

Today we we will learn how to make A Modern Website Using React Js. However, i think there are many beginner who do not know How to Make A Modern Website Using React Js | Hero Section. Hopefully, this article will help you out.

If you want you can watch the live demo with this link.

App.js




import logo from './logo.svg';
import './App.css';
import backgroundImage from './bg.png';

function App() {
  return (
    <div className="container">
      {/* navbar */}
      <nav>
        <div className="logo_container">
          // paste the svg Link from below Link 
        </div>

        <div className="menu_container">
          <ul>
            <li>
              <a href="www.ziontutorial.com" className="active">Home</a>
            </li>
            <li>
              <a href="www.ziontutorial.com">Why Us</a>
            </li>
            <li>
              <a href="www.ziontutorial.com"> Review</a>
            </li>
            <li>
              <a href="www.ziontutorial.com"> Blog</a>
            </li>
          </ul>
        </div>

        <div className="btn_container">
          <ul>
            <li>
              <a href="www.ziontutorial.com"> Sign In</a>
            </li>
          </ul>
          <button className="btn_register">
            Register
          </button>
        </div>
      </nav>

      {/* hero section */}
      <div className="content">
        <div class="hero-text">
          {/* <p className="content_para">Trusted by over 2800+ companies</p> */}
          <h1>Delievr  <span className="content_span">Your Food </span></h1>
          <h1>Easy And Fast.</h1>
          <p className="content_alice">Vivamus vitae odio quam. Etiam non nibh luctus ligula tristique tristique.</p>
          <form>
            <input type="text" placeholder="Enter delivery address" />
            <button type="submit" className="btn_sec">
            Search
            </button>
          </form>
        </div>
        <div className="hero-image">
          <img className="image" src={backgroundImage} alt="Background" />
        </div>
      </div>
      <p></p>
    </div>
  );
}

export default App;

For App.css Part Visit this page.
Link

All the assets are mention here Like SVG and Logo everything you can get it from here.Link

Conclusion

I hope you enjoyed this little tutorial. Let me know over on

Happy Coding! 😇

Reactjs Project Structure and Best Practices

ziontutorial — Sat, 13 Jan 2024 06:04:30 +0000

Organizing your project structure is crucial for the scalability and maintainability of a ReactJS project. There are different ways to structure a React project, and the best approach may depend on the specific needs of your project. Here's a suggested folder structure for a large ReactJS project:


/src
  /assets
    /images
    /styles
      global.css
  /components
    /Common
      Button.js
      Input.js
    /Feature1
      Feature1Component1.js
      Feature1Component2.js
    /Feature2
      Feature2Component1.js
      Feature2Component2.js
  /containers
    /Feature1Container.js
    /Feature2Container.js
  /contexts
    AuthContext.js
  /hooks
    UseFetch.js
    UseAuth.js
  /services
    ApiService.js
    AuthService.js
  /redux
    /actions
      authActions.js
      feature1Actions.js
      feature2Actions.js
    /reducers
      authReducer.js
      feature1Reducer.js
      feature2Reducer.js
    /store
      configureStore.js
  /routes
    AppRouter.js
  /utils
    helpers.js
  App.js
  index.js

Explanation:

assets: Contains static assets such as images and global styles.

components: Reusable presentational components. Group them by feature or create a common folder for components used across features.

containers: Container components that connect to the Redux store. They generally wrap presentational components and handle data fetching and state management.

contexts: React Contexts that provide global state management.

hooks: Custom hooks that can be reused across components.

services: External services, such as API services or authentication services.

redux: Redux-related files including actions, reducers, and the Redux store configuration.

routes: Define your application routes here using a router (e.g., React Router).

utils: Utility functions that are not specific to any component or feature.

App.js: The main component where you set up your application structure.

index.js: The entry point of your application.

This is just one possible structure, and you may need to adapt it based on your project's specific requirements. Additionally, tools like Create React App or Next.js come with their own conventions for project structure.

If you want to create a common layout with a header, footer, and navigation that is consistent across multiple pages, you can extend the folder structure to include a layouts folder. Here's an updated structure:

*For Layout structuring *


/src
  /assets
    /images
    /styles
      global.css
  /components
    /Common
      Button.js
      Input.js
    /Feature1
      Feature1Component1.js
      Feature1Component2.js
    /Feature2
      Feature2Component1.js
      Feature2Component2.js
  /containers
    /Feature1Container.js
    /Feature2Container.js
  /contexts
    AuthContext.js
  /hooks
    UseFetch.js
    UseAuth.js
  /layouts
    /MainLayout
      Header.js
      Footer.js
      Navigation.js
  /services
    ApiService.js
    AuthService.js
  /redux
    /actions
      authActions.js
      feature1Actions.js
      feature2Actions.js
    /reducers
      authReducer.js
      feature1Reducer.js
      feature2Reducer.js
    /store
      configureStore.js
  /routes
    AppRouter.js
  /utils
    helpers.js
  App.js
  index.js

Explanation:

layouts: Contains layout components that define the overall structure of your pages. In this example, there's a MainLayout folder with Header, Footer, and Navigation components.
You can then use these layout components within your routes or pages. For example, your AppRouter.js might look like this:


// AppRouter.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import App from './App';
import MainLayout from './layouts/MainLayout';
import Feature1Container from './containers/Feature1Container';
import Feature2Container from './containers/Feature2Container';

const AppRouter = () => {
  return (
    <Router>
      <Switch>
        <Route path="/feature1">
          <MainLayout>
            <Feature1Container />
          </MainLayout>
        </Route>
        <Route path="/feature2">
          <MainLayout>
            <Feature2Container />
          </MainLayout>
        </Route>
        {/* Add more routes as needed */}
        <Route path="/">
          <MainLayout>
            <App />
          </MainLayout>
        </Route>
      </Switch>
    </Router>
  );
};

export default AppRouter;

**App.js **

// App.js
import React from 'react';
import AppRouter from './routes/AppRouter';

function App() {
  return (
    <div className="App">
      <AppRouter />
    </div>
  );
}

export default App;

Create a beginner-level project Dynamic Currency Converter Beginner React Project

ziontutorial — Thu, 11 Jan 2024 15:10:09 +0000

In this article we will Build a Dynamic Currency Converter Beginner React Project. I am Daman sure you all are familiar with this type of project. However, i think there are many beginners who do not know How to Build a Dynamic Currency Converter Beginner React Project using react js. Hopefully, this article will help you out.

If you want you can watch the live demo with this link.

Don't miss this article : https://bit.ly/3zFCQ8F

if you are a beginner do follow my steps what I am doing to create this beautiful Currency Converter application using react js .

Download the source code : https://bit.ly/482LApG

App.js

`// CurrencyConverter.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './App.css'

const App = () => {
  const [exchangeRates, setExchangeRates] = useState({});
  const [amount, setAmount] = useState(1);
  const [fromCurrency, setFromCurrency] = useState('USD');
  const [toCurrency, setToCurrency] = useState('INR');
  const [convertedAmount, setConvertedAmount] = useState(null);

  useEffect(() => {
    // Fetch exchange rates from a free API (replace with your preferred API)
    const apiUrl = `https://api.exchangerate-api.com/v4/latest/${fromCurrency}`;

    axios.get(apiUrl)
      .then(response => {
        setExchangeRates(response.data.rates);
      })
      .catch(error => {
        console.error('Error fetching exchange rates:', error);
      });
  }, [fromCurrency]);

  useEffect(() => {
    // Convert currency when 'amount', 'fromCurrency', or 'toCurrency' changes
    const conversionRate = exchangeRates[toCurrency];
    if (conversionRate) {
      const converted = amount * conversionRate;
      setConvertedAmount(converted.toFixed(2));
    }
  }, [amount, fromCurrency, toCurrency, exchangeRates]);

  const handleChange = (e) => {
    const { name, value } = e.target;
    switch (name) {
      case 'amount':
        setAmount(value);
        break;
      case 'fromCurrency':
        setFromCurrency(value);
        break;
      case 'toCurrency':
        setToCurrency(value);
        break;
      default:
        break;
    }
  };

  return (
    <div className='card' >
      <h1 className='text-6xl'>Currency Converter</h1>

      <div className='currency_exchnage'>

      <div className="input_container" >
        <label className="input_label">Amount:</label>
        <input
          type="number"
          name="amount"
          className="input_field"
          value={amount}
          onChange={handleChange}
        />
      </div>
      <div className="input_container">
        <label className="input_label">From Currency:</label>
        <select
          name="fromCurrency"
          value={fromCurrency}
          onChange={handleChange}
          className="input_field"
        >
          {Object.keys(exchangeRates).map(currency => (
            <option key={currency} value={currency}>
              {currency}
            </option>
          ))}
        </select>
      </div>
      <div className="input_container">
        <label className="input_label">To Currency:</label>
        <select
          name="toCurrency"
          value={toCurrency}
          onChange={handleChange}
          className="input_field"
        >
          {Object.keys(exchangeRates).map(currency => (
            <option key={currency} value={currency}>
              {currency}
            </option>
          ))}
        </select>
      </div>

      </div>

      <div className='output'>
        <h2>Converted Amount: {convertedAmount}</h2>
      </div>
    </div>
  );
};

export default App;`

The App.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900');

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #F0F2F5;
  font-family: "Inter", sans-serif;
}

.card
{
    background-color: #ffffff;
    width: 55%;
    min-width: 550px;
    padding: 50px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 8px;
}

h1{
  /* padding: 16px; */
  background: #fff;
  font-size: 30px !important;
  margin-bottom: 2rem;
  font-weight: 700;
  color: #333;
}

.currency_exchnage
{
  display: flex;
  justify-content: space-between;
  background: #fff;
  /* align-items: center; */
}

.input_container {
  width: 30%;
  height: fit-content;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
}

.icon {
  width: 20px;
  position: absolute;
  z-index: 99;
  left: 12px;
  bottom: 9px;
}

.input_label {
  font-size: 0.95rem;
  color: #8B8E98;
  font-weight: 600;
  background: #fff;
}

If you are facing any Problem Full source code is available here
with the working output Link

Conclusion
I hope you enjoyed this little tutorial. Let me know over on

Happy Coding! 😇

React Redux | React Redux Tutorial | React Redux for beginners

ziontutorial — Tue, 12 Dec 2023 09:46:04 +0000

REACT REDUX

GitHub Link : https://github.com/tinkugupta5/redux_projectone

Redux is a predictable state container for JavaScript apps.

Redux is a library for JavaScript Applications.
You can use Redux together with React, or with any other view library (Angular, Vue).Redux is just a state container.

In a easy way to understand redux imagine redux just like a store . On that shop which type of items present in that shop we called it as a state.

Store - Holds state of your application
Action - Describe the changes in the state of the application
Reducer- Actually carries out in the state transition depending on the action

Action : Describe the changes in the state of the application

Reducer:

Rule of Redux

The state of your application is stored in a object tree within a single store
{ NumberOfBooks:10 }
The only Way to change the state is to emit an action, an object describing what happened
{Type:"buyBook"}
To specify how the state tree is transformed by action, we write a pure reducer

Let's use in the React application

i have already created my react application through npx create-react-app myapp

Redux Installation and Practical in Coding

To install Redux in your react project you have to type this command in your react application.
npm install redux react-redux

Step 1

With respect to the above image first step is to created our React application which we have already done with the command npx create-react-app projectname

Step 2

The Second Step is to install Redux or react redux pakage because we are using this redux in our react application that why we wrote this command for installing the redux. npm install redux react-redux

Step 3

Now Third step To update our store we have to make a action so that this will instruct the reducer what we have to change in store. Let's understand more about actions Action In Redux

1.Action are javascript objects that contain information.
2.Action are the only source of information for the store,it
only tells us what has happened.
3.Action have a type property and it should be define in string
constraint.
4.It is compulsory to include the type property in the Object.

Syntax

const Action = {
type:''
}

I have created a folder reduxContainer Under this I have created two files for Action first one is BookTypes.js and the Second one is BookAction.js.

In BookTypes.js i have defined a constant for our action so that we can import this file in Our BookAction.js file.
BookTypes.js

File Name : BookTypes.js

export const buy_book = 'buy_book'

Let's jump into another file which is BookAction.js where we have to use the above const value because this Type value we have to define as a constant.

File Name : BookAction.js

import { buybook } from "./BookTypes"
const purchase_book = () => {
    return {
        type : buybook
    }
}

Step 4

Let's Jump into next step 4 which is Reducers. Before jumping to Reducer coding part lets understand some concept about reducer so that you will understand it clearly .

Reducers decides how the state of application changes depending upon the action sent to the store.
Reducers are the function that accepts state and action as parameter and return the next state of the application.

(previousState,action) => newState

BookReducer.js

import { buy_book } from "./BookTypes"
const initialState = {
    NumberOfBooks: 20
}

const BookReducer = (state = initialState, action) => {
    switch (action.type) {
        case buy_book: return {
            ...state, NumberOfBooks: state.initialState - 1
        }
        default: return state
    }
}

export default BookReducer;

Redux Store

let's jump into store creation. We will understand the concepts of store and how to create a store in redux.

The entire Application contains a Single Store.

Store consists some methods like :

* getState()
* subscribe(listener)
* dispatch(action)

It is responsible for holding the application state. getState() method gives access to state it holds.

dispatch(action) method allow state to be updated.

It has subscribe(listener) method as well by which we can register listeners.

This method accept function (listener) as a parameter which execute anytime when the state in redux store changes.

Now let's Jump into coding part so now we have successfully created action reducer and store and Types now next turn is we have to create a store file that holds the entire state of the application.
As we all know for creating a store we have a function called createStore which holds two parameter reducers like i have mentioned in the below code.

Store.js

import {createStore} from 'redux'
import BooksReducer from './BookReducer'

const Store = createStore(BooksReducer)


export default Store;

Next step is to pass the whole data across the application so to do that we have provider for passing which is given by react-redux library and in it we have to pass it as a props like below code.

App.js

import logo from './logo.svg';
import './App.css';
import { Provider } from 'react-redux';
import Store from './reduxContainer/Store';

function App() {
  return (
    <Provider Store={Store}>


    </Provider>
  );
}

export default App;

Now lets us understand some hooks that help us to change our state value by using these hooks.

React Redux Hooks

React Redux offers set of hooks to - subscribe to redux store and dispatch actions.Some of the hooks are as follows.

useSelector Hook

useSelector is a hook react-redux library provides to get hold of any state that is maintained in the redux store.

 Syntax - const xyz =useSelector (selector: Function, equalityFn?: Function)

Selector function accepts the redux state as its argument and returns a value.

Now lets access state value lets jump into file . we have to create a compoennt which is called BookContainer.js for rendering the initial state value as you can see in the image how can we access the initial state.

BookContainer.js

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import purchase_book from './BookAction'

const BookContainer = () => {
    const noofBooks = useSelector(state => state.NumberOfBooks)
    const dispatch = useDispatch()

    const handleBuy = () => {
        dispatch(purchase_book())
    }


  return (
    <>
    <div>BookContainer</div>
    <h2>No of Books - {noofBooks} </h2>
    <button onClick={handleBuy}>Buy Book</button>
    </>
  )
}

export default BookContainer

Output :

So with the help of useSelector method how we access the state in react redux with the help of hooks. Now lets jump to new hook which is useDispatch previously we have only access the state from store but with the help of useDispatch we will update that state.

Age Calculator - in React Js🔥.

ziontutorial — Sat, 16 Sep 2023 10:32:27 +0000

This tutorial guides absolute beginners through the process of building an Age Calculator App in React. The app will determine your age based on the input of your date of birth. Throughout the project, we will cover various concepts, making it a valuable learning experience. By the end, you'll have gained insights into a wide range of features and concepts related to React development. Let's delve into the step-by-step process of building and understanding this application.

However, i think there are many beginners who do not know Age Calculator App in React. Hopefully this article will help you out.

If you want you can watch the live demo with this link.

Don't miss this article : https://bit.ly/3tFJJIB

if you are a beginner do follow my steps what I am doing to Age Calculator App in React.

Download the source code: https://bit.ly/3tFJJIB

Demo:Link

Certainly! Here is the list of functionalities we will build in the Age Calculator App:

Input Field: Create a text input field for users to enter their date of birth.
Calculate Age: Implement the logic to calculate the user's age based on the provided date of birth.
Display Age: Show the calculated age on the screen after the user enters their date of birth.
Error Handling: Implement validation and display appropriate error messages for invalid date inputs.
Age in Different Units: Provide options to display the age in different units, such as years, months, days, etc.
Clear Button: Add a button to clear the input field and reset the displayed age.
Responsive Design: Ensure the app is visually appealing and functions well on various screen sizes and devices.

Throughout the tutorial, we will cover each of these functionalities to create a fully functional Age Calculator App using React.

App.js

import React, { useState } from 'react';
import './AgeCalculator.css'

const AgeCalculator = () => {
    const [birthdate, setBirthdate] = useState('');
    const [age, setAge] = useState(0);

    const calculateAge = () => {
        const today = new Date();
        const birthdateDate = new Date(birthdate);

        let age = today.getFullYear() - birthdateDate.getFullYear();
        const monthDiff = today.getMonth() - birthdateDate.getMonth();
        if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthdateDate.getDate())) {
            age--;
        }

        setAge(age);
    };

    const resetCalculator = () => {
        setBirthdate('');
        setAge(0);
      };

    return (
        <>
            <div className='Container'>
             <h2 className='heading container_title'>Age Calculator</h2>
             <p className=' para container_title'>The Age Calculator can determine the age or interval between two dates. The calculated age will be displayed in years,</p>
             <div className='Container_middle'>
                    <div className='right'>
                        <h4>Date of Birth</h4>
                        <input className='date' type="date" value={birthdate} onChange={e => setBirthdate(e.target.value)} />
                        <div className='button_div'>
                        <button className='button-65' onClick={calculateAge}>Calculate Age</button>
                        <button className="button-65" onClick={resetCalculator}>
                Reset
              </button>

                        </div>
                    </div>

                    <div className='left'>
                        <div className='Container_middle_para'>
                            <h1>Your Age is</h1>
                        </div>
                        <h1 className='age_heading'>{age > 0 ? ` ${age}` : ''}</h1>
                    </div>
             </div>
            </div>
        </>
    );
};

export default AgeCalculator;

App.css

.Container_middle
{
    display: flex;
    justify-content: space-between;
}

.left
{
    width: 500px;
    background-color:#EEF1F6; 

}
.Container_middle_para
{
    display: flex;
    align-items: center;
    justify-content: center;
}

If you are facing any Problem Full source code is available here
with the working output Link

Conclusion
I hope you enjoyed this little tutorial. Let me know over on

Happy Coding! 😇

Create a beginner-level project in React: an Age Calculator App 🔥.

ziontutorial — Sat, 05 Aug 2023 10:16:32 +0000

Demo:Link

Certainly! Here is the list of functionalities we will build in the Age Calculator App:

Input Field: Create a text input field for users to enter their date of birth.
Calculate Age: Implement the logic to calculate the user's age based on the provided date of birth.
Display Age: Show the calculated age on the screen after the user enters their date of birth.
Error Handling: Implement validation and display appropriate error messages for invalid date inputs.
Age in Different Units: Provide options to display the age in different units, such as years, months, days, etc.
Clear Button: Add a button to clear the input field and reset the displayed age.
Responsive Design: Ensure the app is visually appealing and functions well on various screen sizes and devices.

Throughout the tutorial, we will cover each of these functionalities to create a fully functional Age Calculator App using React.

Prerequisite:

An Integrated Development Environment (IDE) of your choice (In this tutorial, we will use Visual Studio Code. You can download it from their official website).
npm (Node Package Manager) installed on your system.
create-react-app package installed globally.
Basic Setup:

Open PowerShell or the terminal in your IDE.

To start a new project using create-react-app, enter the following command: npx create-react-app myapp

You can replace "myapp" with any desired name for your project, such as "my-first-react-website."

Navigate to the newly created project folder using the following command: cd myapp Replace "myapp" with the name you chose for your project.

Here is the folder structure for our application after setting up the basic React project.

App.js Code

import './App.css';
import AgeCalculator from './componets/AgeCalculator';

function App() {
  return (
    <div className="App">
      <AgeCalculator/>
    </div>
  );
}

export default App;

here's the CSS code for styling the "App" class in your React application:


/* app.css */

.App {
  background-color: #F4F9FF;
  display: flex;
  justify-content: center;
  /* width: 1530px; */
  height: 500px;
  padding: 5rem;
}

In this code, we have applied the following styles to the ".App" class:

background-color: Sets the background color of the element to a light blue (#F4F9FF).
display: Makes the element a flex container so that its children can be aligned using flex properties.
justify-content: Centers the child elements horizontally along the main axis (in this case, the center of the screen).
height: Sets the height of the element to 500 pixels.
padding: Adds 5 rem (root em) of padding on all sides of the element.
You can place this CSS code in a separate file named "app.css" within your project's "src" folder. Then, make sure to import this CSS file into your main React component (e.g., "App.js") to apply these styles to the ".App" class.

let's create the component folder structure with "AgeCalculator.js" and "AgeCalculator.css" files. It should look like the following:

Follow these steps to create the files and folders:

Inside the "src" folder, create a new folder named "components" if it doesn't already exist.

Inside the "components" folder, create a new folder named "AgeCalculator."

Inside the "AgeCalculator" folder, create two files: "AgeCalculator.js" and "AgeCalculator.css."

After creating the folder structure and files, you can start building the Age Calculator component inside "AgeCalculator.js" and apply styles using "AgeCalculator.css." This modular approach helps organize your project and makes it easier to manage components and their associated styles.

AgeCalculator.js


import React, { useState } from 'react';
import './AgeCalculator.css'

const AgeCalculator = () => {
    const [birthdate, setBirthdate] = useState('');
    const [age, setAge] = useState(0);

    const calculateAge = () => {
        const today = new Date();
        const birthdateDate = new Date(birthdate);

        let age = today.getFullYear() - birthdateDate.getFullYear();
        const monthDiff = today.getMonth() - birthdateDate.getMonth();
        if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthdateDate.getDate())) {
            age--;
        }

        setAge(age);
    };

    const resetCalculator = () => {
        setBirthdate('');
        setAge(0);
      };

    return (
        <>
            <div className='Container'>
             <h2 className='heading container_title'>Age Calculator</h2>
             <p className=' para container_title'>The Age Calculator can determine the age or interval between two dates. The calculated age will be displayed in years,</p>
             <div className='Container_middle'>
                    <div className='right'>
                        <h4>Date of Birth</h4>
                        <input className='date' type="date" value={birthdate} onChange={e => setBirthdate(e.target.value)} />
                        <div className='button_div'>
                        <button className='button-65' onClick={calculateAge}>Calculate Age</button>
                        <button className="button-65" onClick={resetCalculator}>
                Reset
              </button>

                        </div>
                    </div>

                    <div className='left'>
                        <div className='Container_middle_para'>
                            <h1>Your Age is</h1>
                        </div>
                        <h1 className='age_heading'>{age > 0 ? ` ${age}` : ''}</h1>
                    </div>
             </div>
            </div>
        </>
    );
};

export default AgeCalculator;

AgeCalculator.css

.Container_middle
{
    display: flex;
    justify-content: space-between;
}

.left
{
    width: 500px;
    background-color:#EEF1F6; 

}
.Container_middle_para
{
    display: flex;
    align-items: center;
    justify-content: center;
}

Now important Css part where all our CSS styling I mean most of the styling part I have to write it here for our application in Index.css for the styling part.

Index.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900');

html,
body {
  width: 100%;
  height: 100%;
  background-color: #e4ecff;
  font-family: 'Inter', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.age_heading{
  color: #5E5AF9;
  font-family: Inter;
  font-size: 5rem;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  display: flex;
  justify-content: center;

}

h2{
  color: #000;
font-family: Inter;
font-size: 35px;
font-style: normal;
font-weight: 900;
line-height: normal;
}
h3{
  color: #000;
font-family: Inter;
font-size: 30px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-top: 5rem;
}

h4{
  color: #000;
font-family: Inter;
font-size: 30px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.right
{
  width: 500px;
}
.para
{
  color: #505050;
font-family: Inter;
font-size: 19px;
font-style: normal;
font-weight: 500;
line-height: normal;
}

.button_div
{
  margin-top: 2rem;
}

.container_title
  {  
    display: flex;
    align-items: center;
    justify-content: center;
  }

  input[type="date"]{
    background: #F4F9FF;
    border: 2px solid #DEDEDE;
    padding: 20px;
    font-family: "Roboto Mono",monospace;
    color: #000000;
    font-size: 18px;
    width: 230px;
    /* border: none; */
    outline: none;
    border-radius: 5px;
}
::-webkit-calendar-picker-indicator{
    /* background-color: #ffffff; */
    padding: 5px;
    cursor: pointer;
    border-radius: 3px;
}



/* CSS */
.button-65 {
  appearance: none;
  backface-visibility: hidden;
  background-color: #2f80ed;
  border-radius: 10px;
  border-style: none;
  box-shadow: none;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: Inter,-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size: 15px;
  font-weight: 500;
  height: 50px;
  letter-spacing: normal;
  line-height: 1.5;
  outline: none;
  overflow: hidden;
  padding: 14px 30px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transform: translate3d(0, 0, 0);
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: top;
  white-space: nowrap;
}

.button-65:hover {
  background-color: #1366d6;
  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
  opacity: 1;
  transform: translateY(0);
  transition-duration: .35s;
}

.button-65:hover:after {
  opacity: .5;
}

.button-65:active {
  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
  transform: translateY(2px);
  transition-duration: .35s;
}

.button-65:active:after {
  opacity: 1;
}

@media (min-width: 768px) {
  .button-65 {
    padding: 14px 22px;
    width: 176px;
  }
}

Now the last part which we are going to write which in the main part of our application which is index.js part .

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

In conclusion,

I hope you enjoyed this tutorial on building the Age Calculator App in React. If you have any suggestions for other applications or projects, feel free to leave your comments and opinions. I trust that you have successfully created the Age Calculator App and gained valuable insights from this project.

Stay tuned, as in the future, we will explore more exciting beginner-level projects together. Happy coding and keep learning!

If there is any difficulty, of course you can comment.

You can visit my blog for more tutorials like this.
https://ziontutorial.com/