DEV Community: Rohit Sharma

React Native Speed Math App

Rohit Sharma — Mon, 10 Jun 2024 09:22:53 +0000

Hello Everyone, I'm back after 1 year and 4 months.This time with react native project.

Let's start the project
I created this project with Expo and used used Expo Router for routing.
Create a new folder and open the terminal and run this command

npx create-expo-app@latest

After running this command successfully, You can remove the boilerplate code and start fresh with a new project. Run the following command to reset your project:

npm run reset-project

Before jumping to the code, let's understand the functionality of our app.
When the user is on home screen then the user has to choose one mathematical operation that they want to practice.

Once they select the operation then they are moved to the Quiz Screen and questions will start appearing on the user screen. The user have to answer the question within 10sec and if the answer is correct then the score is increased by 1 and the next question will appear and if the user does not answer the question within 10sec then the next question will be rendered.

app is the starting point of our application and inside app, _layout.tsx is our root layout and index.tsx is our home page.

_layout.tsx :-

import { Stack } from "expo-router";

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{headerShown:false}}/>
      <Stack.Screen name='quiz/[id]'options={{headerShown:false}}/>
    </Stack>
  );
}

Now we have two screens, one the home screen and the other will be a dynamic screen which will render the questions based on the operation selected by the user.

index.tsx :-

// HomeScreen.js
import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import {router} from 'expo-router'

const HomeScreen = () => {

  const handleStartQuiz = (operation: string) => {
    router.push({pathname:'/quiz/[id]',
    params:{id:operation}

    }

    )
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Choose a Operation:</Text>
      <Button title="Addition" onPress={() => handleStartQuiz('addition')} />
      <Button title="Subtraction" onPress={() => handleStartQuiz('subtraction')} />
      <Button title="Multiplication" onPress={() => handleStartQuiz('multiplication')} />
      <Button title="Division" onPress={() => handleStartQuiz('division')} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    display:'flex',
    marginTop:60,
    justifyContent: 'center',
    // alignItems: 'center',
    rowGap:10,
    margin:20
  },
  title: {
    fontSize: 20,
    marginTop: 20,
  },
});

export default HomeScreen;

Now create a new folder app/quiz and inside of it create a dynamic route [id].tsx

[id].tsx :-

// QuizScreen.js
import { useLocalSearchParams } from 'expo-router';
import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, StyleSheet, SafeAreaView } from 'react-native';

const QuizScreen = () => {
    const { id } = useLocalSearchParams<{id:string}>();
    const operation = typeof id === 'string' ? id : 'addition'; // Provide a default operation if id is undefined or not a string
    const [num1, setNum1] = useState(0);
    const [num2, setNum2] = useState(0);
    const [userAnswer, setUserAnswer] = useState('');
    const [score, setScore] = useState(0);
    const [time, setTime] = useState(10);

    useEffect(() => {
        console.log('Operation from params:', operation);
        generateQuestion();
    }, [operation]);

    const generateQuestion = () => {
        switch (operation) {
            case 'addition':
                setNum1(Math.floor(Math.random() * 100) + 1);
                setNum2(Math.floor(Math.random() * 100) + 1);
                break;
            case 'subtraction':
                setNum2(Math.floor(Math.random() * 100) + 1);
                setNum1(Math.floor(Math.random() * 100) + 1); // Adjusted to ensure num2 is generated properly
                break;
            case 'multiplication':
                setNum1(Math.floor(Math.random() * 100) + 1);
                setNum2(Math.floor(Math.random() * 10) + 1);
                break;
            case 'division':
                const divisor = Math.floor(Math.random() * 9) + 1;
                const quotient = Math.floor(Math.random() * 100) + 1;
                setNum2(divisor);
                setNum1(divisor * quotient);
                break;
            default:
                setNum1(0);
                setNum2(0);
        }
    };

    const handleAnswerChange = (text:string) => {
        setUserAnswer(text);
        const answer = calculateAnswer();
        const tolerance = 0.0001; // Adjust tolerance level as needed
        if (Math.abs(parseFloat(text) - answer) <= tolerance) {
            setScore(score + 1);
            handleNextQuestion();
        }
    };

    const calculateAnswer = () => {
        switch (operation) {
            case 'addition':
                return num1 + num2;
            case 'subtraction':
                return num1 - num2;
            case 'multiplication':
                return num1 * num2;
            case 'division':
                return num1 / num2; // Ensure it's a precise division
            default:
                return num1 + num2; // Default to addition
        }
    };

    const handleNextQuestion = () => {
        generateQuestion();
        setUserAnswer('');
        setTime(10);
    };

    useEffect(() => {
        const timer = setInterval(() => {
            setTime((prevTime) => {
                if (prevTime > 0) {
                    return prevTime - 1;
                } else {
                    handleNextQuestion();
                    return 10; // Reset timer to 10 seconds for the next question
                }
            });
        }, 1000);

        return () => clearInterval(timer);
    }, []);

    return (
        <SafeAreaView style={styles.container}>
            <Text style={{ fontWeight: 'bold', fontSize: 38 }}>Speed Math</Text>
            <View style={styles.topBar}>
                <View>
                    <Text style={styles.timer}><Text>⌛</Text> {time} sec</Text>
                </View>
                <Text style={styles.score}>Score: {score}</Text>
            </View>
            <Text style={styles.question}>
                {num1} {getOperationSymbol(operation)} {num2} =
            </Text>
            <TextInput
                style={styles.input}
                keyboardType="numeric"
                value={userAnswer}
                onChangeText={handleAnswerChange}
                autoFocus={true}
            />
        </SafeAreaView>
    );
};

const getOperationSymbol = (operation:string) => {
    switch (operation) {
        case 'addition':
            return '+';
        case 'subtraction':
            return '-';
        case 'multiplication':
            return '×';
        case 'division':
            return '÷';
        default:
            return '+';
    }
};

const styles = StyleSheet.create({
    container: {
        marginTop:50,
        flex: 1,
        alignItems: 'center',
    },
    question: {
        fontSize: 20,
        marginTop: 200,
        marginBottom: 10,
    },
    input: {
        height: 40,
        borderColor: 'gray',
        borderWidth: 1,
        marginBottom: 20,
        textAlign: 'center',
        width: 100,
    },
    timer: {
        marginTop: 10,
        fontSize: 16,
        fontWeight: 'bold',
    },
    score: {
        marginTop: 10,
        fontSize: 16,
        fontWeight: 'bold',
    },
    topBar: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        gap: 30,
        alignItems: 'center',
        width: 360,
    },
});

export default QuizScreen;

*Important points *

Here,useLocalSearchParams from expo-router is used to extract query parameters from the URL.
useLocalSearchParams extracts the id parameter from the URL, which determines the type of arithmetic operation.
operation sets the operation type based on id or defaults to "addition".
We initialize state variables: num1, num2, userAnswer, score, and time.

Function to Generate Questions

    const generateQuestion = () => {
        switch (operation) {
            case 'addition':
                setNum1(Math.floor(Math.random() * 100) + 1);
                setNum2(Math.floor(Math.random() * 100) + 1);
                break;
            case 'subtraction':
                setNum2(Math.floor(Math.random() * 100) + 1);
                setNum1(Math.floor(Math.random() * 100) + 1);
                break;
            case 'multiplication':
                setNum1(Math.floor(Math.random() * 100) + 1);
                setNum2(Math.floor(Math.random() * 10) + 1);
                break;
            case 'division':
                const divisor = Math.floor(Math.random() * 9) + 1;
                const quotient = Math.floor(Math.random() * 100) + 1;
                setNum2(divisor);
                setNum1(divisor * quotient);
                break;
            default:
                setNum1(0);
                setNum2(0);
        }
    };

I'm new to react native and maybe not that good at explaining the code. Still, you can reach out to me
LinkedIn
Live Apk
Code

How to create a Drag and Drop interface using Vanilla JS

Rohit Sharma — Mon, 20 Feb 2023 09:10:56 +0000

Hi! I'm back after a long break with a new post on how to create a Drag and Drop interface using Vanilla JS.

GitHub Repo

Let's have look what we are going to create in this tutorial

Drag and drop functionality is a great way to enhance the user experience of a web application. With drag and drop, users can easily move elements around a page, reorder lists, and perform other interactive actions. In this tutorial, we'll cover how to create a simple drag and drop interface with vanilla JavaScript.

We'll be using TailwindCSS for styling you may use pure CSS or any other CSS framework.

So, let's write the HTML for our project in index.html

HTML

<html>
<head>
       <title>Drag and Drop Example</title>
</head>
<body>
    <ul id="list">
        <li id="item1" draggable="true">Item 1</li>
        <li id="item2" draggable="true">Item 2</li>
        <li id="item3" draggable="true">Item 3</li>
        <li id="item4" draggable="true">Item 4</li>
        <li id="item5" draggable="true">Item 5</li>
    </ul>
  <div id="target"></div>
</body>
</html>

Now add the Tailwind CDN in <head>and add classes to it

<!DOCTYPE html>
<html>
<head>
    <title>Drag and Drop Example</title>
    <!-- Load Tailwind CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css">

    <style>
        /* Add custom styles here */
    </style>
</head>
<body class="bg-gray-100">

    <div class="max-w-md mx-auto mt-8">

        <!-- Drag and drop list -->
        <div class="p-4 bg-white rounded-lg shadow-lg">
            <ul id="list" class="list-none p-0 m-0 bg-gray-100 border border-gray-300 min-h-40">
                <li id="item1" draggable="true" class="bg-white border border-gray-300 p-4 mb-2 cursor-move">Item 1</li>
                <li id="item2" draggable="true" class="bg-white border border-gray-300 p-4 mb-2 cursor-move">Item 2</li>
                <li id="item3" draggable="true" class="bg-white border border-gray-300 p-4 mb-2 cursor-move">Item 3</li>
                <li id="item4" draggable="true" class="bg-white border border-gray-300 p-4 mb-2 cursor-move">Item 4</li>
                <li id="item5" draggable="true" class="bg-white border border-gray-300 p-4 mb-2 cursor-move">Item 5</li>
            </ul>
        </div>

        <!-- Drop target -->
        <div id="target" class="mt-4 p-4 bg-white rounded-lg shadow-lg border-dashed border-2 border-gray-300 min-h-60">
            <p class="text-center text-gray-400">Drop items here</p>
        </div>

    </div>
    <script src="index.js"></script>
</body>
</html>

Now create index.js and add this to index.html

JavaScript:-
Now write some JS for our drag and drop interface.

const listItems = document.querySelectorAll("#list li");
const target = document.querySelector("#target");

for (const listItem of listItems) {
    listItem.addEventListener("dragstart", dragStart);
}

target.addEventListener("dragover", dragOver);
target.addEventListener("drop", drop);

function dragStart(event) {
    event.dataTransfer.setData("text/plain", event.target.id);
}

function dragOver(event) {
    event.preventDefault();
    target.classList.add("border-gray-500");
}

function drop(event) {
    event.preventDefault();
    const itemId = event.dataTransfer.getData("text/plain");
    const item = document.getElementById(itemId);
    target.appendChild(item);
    target.classList.remove("border-gray-500");
}

Code Explanation:-
First, it selects all the list items on the page and the target element using document.querySelectorAll and document.querySelector. This is done using CSS selectors: #list li selects all the li elements inside the element with the ID list, and #target selects the element with the ID target.

Next, it adds a dragstart event listener to each list item using a for...of loop. This event listener is triggered when the user starts dragging an item.

The dragStart function is called when the event is triggered. It sets the data that is being dragged by calling event.dataTransfer.setData("text/plain", event.target.id). The first argument specifies the data type (text/plain in this case), and the second argument is the ID of the element being dragged.

The code then adds a dragover event listener to the target element. This event listener is triggered when the user drags an item over the target element.

The dragOver function is called when the event is triggered. It calls event.preventDefault() to allow the drop event to be triggered. It also adds a CSS class to the target element to indicate that it can be dropped onto.

Finally, the code adds a drop event listener to the target element. This event listener is triggered when the user drops an item onto the target element.

The drop function is called when the event is triggered. It calls event.preventDefault() to prevent the default behavior (which is to navigate to a new page). It then gets the ID of the element being dragged by calling event.dataTransfer.getData("text/plain"). It retrieves the element by its ID using document.getElementById(itemId), and appends it to the target element using target.appendChild(item). Finally, it removes the CSS class that was added to the target element in the dragOver function.

Finally the Drag and Drop Interface is ready.

I hope you loved this.

Let's connect:

Github
Twitter
LinkedIn

Animations Made Easy: The Top React Animation Libraries You Need to Know

Rohit Sharma — Fri, 17 Feb 2023 14:45:47 +0000

As a frontend developer, you know that animation is an essential part of creating engaging and user-friendly interfaces. With React, you have access to many animation libraries that can help you add delightful animations to your app. In this post, I'll introduce you to the best React animation libraries that can take your app to the next level.

React Spring: React Spring is a powerful and flexible animation library that makes it easy to create fluid and natural animations. It allows you to create complex animations and transitions that respond to user interactions, making your app feel more interactive and dynamic. React Spring provides a simple and intuitive API, making it easy to use and customize.

Monthly Downloads : 3.4 M

2 Framer Motion:
Framer Motion is a popular animation library that allows you to create stunning animations with ease. With Framer Motion, you can create animations and interactions that feel natural and intuitive, giving your app a modern and polished feel. The library provides a simple and declarative API, making it easy to create and customize animations.

Monthly Downloads : 8.4 M

3 React Transition Group:
React Transition Group is a library that makes it easy to animate the mounting and unmounting of components. With React Transition Group, you can add smooth transitions to your app's UI elements, making them feel more polished and professional. The library provides a simple and intuitive API, making it easy to use and customize.

4 React Move: React Move is a powerful and flexible animation library that allows you to create complex and sophisticated animations. With React Move, you can create animations that are both smooth and performant, making your app feel more engaging and dynamic. The library provides a declarative API, making it easy to create and customize animations.

Monthly Downloads : 426K

5 Anime.js: Anime.js is a lightweight and flexible animation library that allows you to create high-quality animations with ease. With Anime.js, you can create animations that are both smooth and performant, making your app feel more dynamic and engaging. The library provides a simple and intuitive API, making it easy to use and customize.

6 React Simple Animate: If you're looking for a lightweight and easy-to-use animation library for your React app, React Simple Animate is definitely worth considering. This library provides a simple API to create CSS-based animations for your components, without the need for complex configuration or external dependencies.

In conclusion, these React animation libraries are sure to add some unique and creative features to your projects. Whether you're looking to add simple CSS-based animations or sophisticated and complex animations, these libraries have got you covered. So, go ahead and try them out in your next React project, and make your app more engaging and dynamic!

Have you tried any of these React animation libraries? We'd love to hear your thoughts and experiences in the comments below! And if you've used other libraries that you think deserve a mention, please share them with us.

How to create a WhatsApp Web UI Clone using Tailwind CSS

Rohit Sharma — Sun, 30 Oct 2022 16:23:11 +0000

Hi ! In this article, I'll explain how you can create a WhatsApp web UI clone using Tailwind CSS. Read the complete article and follow all the steps. All the code and asset files of the project are here.

To understand the UI, we have divided the it in small parts.

The red rectangle, I'll call it left part and blue one is right.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WhatsApp</title>
    <link rel="stylesheet" href="/style.css">
    <link rel="icon" href="images/favicon.png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
        integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body></body>
</html>

The background image is provided in the asset files. We have to make the background fixed. So, on scroll the background don't move.

<body class="bg-[url(/images/bg-image.png)] min-h-screen grid place-items-center bg-fixed"></body>

Now, create a div and its child elements are the left part and right part.

<div class="w-[97.5vw] h-[95vh] bg-red-50 flex flex-row"></div>

Left part has height:100% and width:30%

<div class="left bg-[#ffffff] h-full w-[30%]"></div>

If you observe the WhatsApp web UI, you'll find that the search bar and status section both have position sticky as it remains at the top always. So, we create a new div which is sticky and contains the both elements.

<div class="sticky flex flex-col">
   <div class="upper-nav"></div>
   <div class="lower-nav"></div>
</div>

Now create the upper-nav

<div class="upper-nav bg-[#F0F2F5] flex justify-between items-center px-4 py-[0.60rem] border-r border-slate-300">
                    <div class="dp flex justify-center items-center w-[40px] h-[40px]">
                        <img class="rounded-full" src="/images/dp.jpg" alt="profile">
                    </div>
                    <div class="tools flex justify-center items-center space-x-2">
                        <div class="status w-[40px] h-[40px] grid place-items-center">
                            <svg version="1.1" id="df9d3429-f0ef-48b5-b5eb-f9d27b2deba6" x="0" y="0" viewBox="0 0 24 24"
                                width="24" height="24" class="">
                                <path fill="#54656F"
                                    d="M12.072 1.761a10.05 10.05 0 0 0-9.303 5.65.977.977 0 0 0 1.756.855 8.098 8.098 0 0 1 7.496-4.553.977.977 0 1 0 .051-1.952zM1.926 13.64a10.052 10.052 0 0 0 7.461 7.925.977.977 0 0 0 .471-1.895 8.097 8.097 0 0 1-6.012-6.386.977.977 0 0 0-1.92.356zm13.729 7.454a10.053 10.053 0 0 0 6.201-8.946.976.976 0 1 0-1.951-.081v.014a8.097 8.097 0 0 1-4.997 7.209.977.977 0 0 0 .727 1.813l.02-.009z">
                                </path>
                                <path fill="#009588" d="M19 1.5a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"></path>
                            </svg>
                        </div>
                        <div class="new-chat w-[42.5px] h-[40px] grid place-items-center">
                            <svg viewBox="0 0 24 24" width="24" height="24" class="">
                                <path fill="#54656F"
                                    d="M19.005 3.175H4.674C3.642 3.175 3 3.789 3 4.821V21.02l3.544-3.514h12.461c1.033 0 2.064-1.06 2.064-2.093V4.821c-.001-1.032-1.032-1.646-2.064-1.646zm-4.989 9.869H7.041V11.1h6.975v1.944zm3-4H7.041V7.1h9.975v1.944z">
                                </path>
                            </svg>
                        </div>
                        <div class="menu w-[40px] h-[40px] grid place-items-center">
                            <svg viewBox="0 0 24 24" width="24" height="24" class="">
                                <path fill="#54656F"
                                    d="M12 7a2 2 0 1 0-.001-4.001A2 2 0 0 0 12 7zm0 2a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 9zm0 6a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 15z">
                                </path>
                            </svg>
                        </div>
                    </div>
                </div>

Now create the lower-nav

<div class="lower-nav px-4 py-2 flex items-center">
                    <div class="flex justify-between items-center w-full">

                        <svg viewBox="0 0 24 24" width="24" height="24" class="absolute left-10">
                            <path fill="#54656F"
                                d="M15.009 13.805h-.636l-.22-.219a5.184 5.184 0 0 0 1.256-3.386 5.207 5.207 0 1 0-5.207 5.208 5.183 5.183 0 0 0 3.385-1.255l.221.22v.635l4.004 3.999 1.194-1.195-3.997-4.007zm-4.808 0a3.605 3.605 0 1 1 0-7.21 3.605 3.605 0 0 1 0 7.21z">
                            </path>
                        </svg>
                        <input class="outline-none bg-[#F0F2F5] rounded-md pl-16 py-1 w-[26vw] mr-2"
                            placeholder="Search or start new chat" type="text" id="search">
                        <div class="w-[40px] h-[40px] lg:flex justify-center items-center hidden">

                                <svg viewBox="0 0 24 24" width="20" height="20" preserveAspectRatio="xMidYMid meet"
                                class="relative">
                                <path fill="#54656F" d="M10 18.1h4v-2h-4v2zm-7-12v2h18v-2H3zm3 7h12v-2H6v2z"></path>
                            </svg>
                        </div>

                    </div>
                </div>

Now, we have to create the chat box.

<hr class="h-[0.01px] bg-slate-100">

                <div class="h-[79.5vh] overflow-y-scroll">
                    <div class="chatbox hover:bg-gray-100 cursor-pointer">
                        <hr class="w-[85%] float-right">
                        <div class="flex items-center w-full">
                            <div class="p-3">
                                <img src="/images/Aditya.jpg" alt="" class="rounded-full w-[49px] h-[49px]">
                            </div>
                            <div class="flex justify-between w-[80%] ">

                                <div class="chat-name flex flex-col">
                                    <h3 class="text-md text-gray-700 font-sans font-normal">Aditya Bamniya</h3>
                                    <p class="text-md text-gray-500 font-sans font-normal flex items-center">
                                        <svg viewBox="0 0 18 18" width="18" height="18" class=""><path fill="#7BCCEE" d="m17.394 5.035-.57-.444a.434.434 0 0 0-.609.076l-6.39 8.198a.38.38 0 0 1-.577.039l-.427-.388a.381.381 0 0 0-.578.038l-.451.576a.497.497 0 0 0 .043.645l1.575 1.51a.38.38 0 0 0 .577-.039l7.483-9.602a.436.436 0 0 0-.076-.609zm-4.892 0-.57-.444a.434.434 0 0 0-.609.076l-6.39 8.198a.38.38 0 0 1-.577.039l-2.614-2.556a.435.435 0 0 0-.614.007l-.505.516a.435.435 0 0 0 .007.614l3.887 3.8a.38.38 0 0 0 .577-.039l7.483-9.602a.435.435 0 0 0-.075-.609z"></path></svg>
                                        <span class="inline-block">Aaja Chai peene Chale...</span>
                                    </p>
                                </div>
                                <div class="last-chat">
                                    <p class="text-[0.80rem] font-sans text-gray-500 font-light">yesterday</p>
                                </div>
                            </div>

                        </div>
                        <hr class="w-[85%] float-right">
                    </div>
               </div>

You can add more chatbox. Just copy paste same the code.

Now start creating the right part which contains two div . Upper part which has details of user with whom you're chatting and Lower part has <input> where the user type the messages.

<div class="right bg-[#F0EBE4] h-full w-[70%]"></div>

Now we have to code the upper part

<div class="right-upper bg-[#F0F2F5] flex justify-between items-center px-4 py-[0.60rem]">
                <div class="flex justify-between items-center w-full cursor-pointer">
                    <div class="flex justify-between items-center space-x-4">
                        <img src="/images/Ravindra.jpg" class="w-[40px] h-[40px] rounded-full " alt="">
                        <div class="flex flex-col">
                            <p class="text-slate-600 font-sans font-medium text-base">Ravindra</p>
                            <p class="text-slate-400 font-sans font-medium text-[0.75rem]">Online</p>
                        </div>
                    </div>
                    <div class="flex justify-between items-center">
                        <div class="w-[40px] h-[40px] flex justify-center items-center ">
                            <svg viewBox="0 0 24 24" width="24" height="24" class=""><path fill="#54656F" d="M15.9 14.3H15l-.3-.3c1-1.1 1.6-2.7 1.6-4.3 0-3.7-3-6.7-6.7-6.7S3 6 3 9.7s3 6.7 6.7 6.7c1.6 0 3.2-.6 4.3-1.6l.3.3v.8l5.1 5.1 1.5-1.5-5-5.2zm-6.2 0c-2.6 0-4.6-2.1-4.6-4.6s2.1-4.6 4.6-4.6 4.6 2.1 4.6 4.6-2 4.6-4.6 4.6z"></path></svg>
                        </div>
                        <div class="w-[40px] h-[40px] flex justify-center items-center">
                            <svg viewBox="0 0 24 24" width="24" height="24" class=""><path fill="#54656F" d="M12 7a2 2 0 1 0-.001-4.001A2 2 0 0 0 12 7zm0 2a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 9zm0 6a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 15z"></path></svg>
                        </div>
                    </div>
                </div>
            </div>

Now, it's time to code the right lower part

<div class="right-bottom w-full top-full sticky flex justify-between items-center px-4 py-4 space-x-2 bg-[#F0F2F5]">
                <div class="flex justify-between items-center">
                    <div class="w-[40px] h-[40px] flex justify-center items-center cursor-pointer">

                        <svg viewBox="0 0 24 24" width="24" height="24" class="ekdr8vow dhq51u3o"><path fill="currentColor" d="M9.153 11.603c.795 0 1.439-.879 1.439-1.962s-.644-1.962-1.439-1.962-1.439.879-1.439 1.962.644 1.962 1.439 1.962zm-3.204 1.362c-.026-.307-.131 5.218 6.063 5.551 6.066-.25 6.066-5.551 6.066-5.551-6.078 1.416-12.129 0-12.129 0zm11.363 1.108s-.669 1.959-5.051 1.959c-3.505 0-5.388-1.164-5.607-1.959 0 0 5.912 1.055 10.658 0zM11.804 1.011C5.609 1.011.978 6.033.978 12.228s4.826 10.761 11.021 10.761S23.02 18.423 23.02 12.228c.001-6.195-5.021-11.217-11.216-11.217zM12 21.354c-5.273 0-9.381-3.886-9.381-9.159s3.942-9.548 9.215-9.548 9.548 4.275 9.548 9.548c-.001 5.272-4.109 9.159-9.382 9.159zm3.108-9.751c.795 0 1.439-.879 1.439-1.962s-.644-1.962-1.439-1.962-1.439.879-1.439 1.962.644 1.962 1.439 1.962z"></path></svg>
                    </div>
                    <div class="flex justify-center items-center w-[40px] h-[40px] cursor-pointer">

                        <svg viewBox="0 0 24 24" width="24" height="24" class=""><path fill="currentColor" d="M1.816 15.556v.002c0 1.502.584 2.912 1.646 3.972s2.472 1.647 3.974 1.647a5.58 5.58 0 0 0 3.972-1.645l9.547-9.548c.769-.768 1.147-1.767 1.058-2.817-.079-.968-.548-1.927-1.319-2.698-1.594-1.592-4.068-1.711-5.517-.262l-7.916 7.915c-.881.881-.792 2.25.214 3.261.959.958 2.423 1.053 3.263.215l5.511-5.512c.28-.28.267-.722.053-.936l-.244-.244c-.191-.191-.567-.349-.957.04l-5.506 5.506c-.18.18-.635.127-.976-.214-.098-.097-.576-.613-.213-.973l7.915-7.917c.818-.817 2.267-.699 3.23.262.5.501.802 1.1.849 1.685.051.573-.156 1.111-.589 1.543l-9.547 9.549a3.97 3.97 0 0 1-2.829 1.171 3.975 3.975 0 0 1-2.83-1.173 3.973 3.973 0 0 1-1.172-2.828c0-1.071.415-2.076 1.172-2.83l7.209-7.211c.157-.157.264-.579.028-.814L11.5 4.36a.572.572 0 0 0-.834.018l-7.205 7.207a5.577 5.577 0 0 0-1.645 3.971z"></path></svg>
                    </div>
                </div>
                <input type="text" placeholder="Type a message" class="bg-white rounded-lg px-4 py-2 outline-none w-full" id="">
                <div class="flex justify-center items-center w-[40px] h-[40px] cursor-pointer">
                    <svg viewBox="0 0 24 24" width="24" height="24" class=""><path fill="currentColor" d="M11.999 14.942c2.001 0 3.531-1.53 3.531-3.531V4.35c0-2.001-1.53-3.531-3.531-3.531S8.469 2.35 8.469 4.35v7.061c0 2.001 1.53 3.531 3.53 3.531zm6.238-3.53c0 3.531-2.942 6.002-6.237 6.002s-6.237-2.471-6.237-6.002H3.761c0 4.001 3.178 7.297 7.061 7.885v3.884h2.354v-3.884c3.884-.588 7.061-3.884 7.061-7.885h-2z"></path></svg>
                </div>
            </div>

I tried my best to explain and hope you like it.

Github Repo if you like then give it a ⭐

Create an Accordion with Tailwind CSS and Alpine JS

Rohit Sharma — Mon, 19 Sep 2022 14:29:31 +0000

Hi! In this blog we'll learn how we can create an accordion component using TailwindCSS and AlpineJS.

What is Alpine JS

Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the modern web. Plop in a script tag and get going.

When you're using Alpine JS then we don't have to leave our index.html just like Tailwind CSS.

If you want to code with me check this video

First of all create index.html. For this tutorial we're using Tailwind Play CDN. Now we have to add the following script to use Alpine JS in our project

<script src="//unpkg.com/alpinejs" defer></script>

If you don't have basic understanding of Alpine JS then you can refer this video

HTML

The starting file of our project looks like this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Accordion Tutorial</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="//unpkg.com/alpinejs" defer></script>
</head>
<body>

</body>
</html>

Now create the basic structure of an accordion using Tailwind CSS

<div class="w-[60vw] mx-auto bg-red-50 mt-16">
        <div class="flex justify-between items-center bg-red-200">
            <p class="px-4">Accordion 1</p>
            <button class="px-2 text-black hover:text-gray-500 font-bold text-3xl"></button>
        </div>
        <div class="mx-4 py-4">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta repudiandae ut dolores totam nobis molestias!</div>
        <hr class="h-[0.1rem] bg-slate-500">
    </div>

If you noticed that there is no text used with button but we put that dynamically depending on the state of accordion. And the details of accordion are currently visible but don't worry we'll fix with AlpineJS

Add the x-data="open:false" Alpine property in the parent element. And add onclick event to button. So, on clicking the button we'll change the state of open. If open is true then we'll show the + sign and incase of false - sign as text in button tag.

<button @click="open=!open" x-html="open ? '-' :'+' " class="px-2 text-black hover:text-gray-500 font-bold text-3xl"></button>

Now to show or hide the details of accordion we add the x-show property of Alpine JS. So, when the value of open is 'true' then show the details otherwise hide the details. We also add x-transition property to add some transition effect.

Here is the complete code of this small tutorial

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Accordion Tutorial</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="//unpkg.com/alpinejs" defer></script>
    <style>
        [x-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <!-- <p class="text-5xl">Tailwind Accordion Tutorial</p> -->
    <div x-data="{open:false}" class="w-[60vw] mx-auto bg-red-50 mt-16">
        <div class="flex justify-between items-center bg-red-200">
            <p class="px-4">Accordion 1</p>
            <button @click="open=!open" x-html="open ? '-' :'+' " class="px-2 text-black hover:text-gray-500 font-bold text-3xl"></button>
        </div>
        <div x-show="open" x-cloak  class="mx-4 py-4" x-transition>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta repudiandae ut dolores totam nobis molestias!</div>
        <hr class="h-[0.1rem] bg-slate-500">
    </div>
    <div x-data="{open:false}" class="w-[60vw] mx-auto  bg-red-50">
        <div class="flex justify-between items-center bg-red-200">
            <p class="px-4">Accordion 2</p>
            <button @click="open=!open" x-html="open ? '-' :'+' " class="px-2 text-black hover:text-gray-500 font-bold text-3xl"></button>
        </div>
        <div x-show="open" x-cloak class="mx-4 py-4" x-transition>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta repudiandae ut dolores totam nobis molestias!</div>
        <hr class="h-[0.1rem] bg-slate-500">
    </div>
    <div x-data="{open:false}" class="w-[60vw] mx-auto  bg-red-50">
        <div class="flex justify-between items-center bg-red-200">
            <p class="px-4">Accordion 3</p>
            <button @click="open=!open" x-html="open ? '-' :'+' " class="px-2 text-black hover:text-gray-500 font-bold text-3xl"></button>
        </div>
        <div x-show="open" x-cloak class="mx-4 py-4" x-transition>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta repudiandae ut dolores totam nobis molestias!</div>
        <hr>
    </div>
</body>
</html>

I hope you loved this.

Advice Generator App using Tailwind CSS and JS

Rohit Sharma — Wed, 17 Aug 2022 03:24:36 +0000

This is a Frontend Mentor Challenge

Live

Code+Resources

In this video we have created a advice generator app with Tailwind CSS and vanilla JS using Advice Slip API

I hope you loved this.

Create a Card with Tailwind CSS

Rohit Sharma — Mon, 15 Aug 2022 07:41:49 +0000

Card Component with Tailwind CSS

Hi everyone! In this post we'll learn how we can create a card with Tailwind CSS.

You can refer to this to setup tailwind css and code with me(I'm not so good in making videos)

Before starting to code we should have an idea about what we have to create and how it will look when completed. So, basically a card have an Image, title, some description and a button.

So, first of all structure our Card

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Card Tutorial</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <!-- <h1>Tailwind Css Card Tutorial </h1> -->
    <div>
        <div>
            <img src="https://images.unsplash.com/photo-1658827866369-25c66ae3dc30?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="image">

            <h2>Tailwind Card Comoponent</h2>
            <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero dolore quod placeat sit? Omnis nobis perferendis doloremque facilis, modi animi tempora inventore! 
            </p>
            <button>Read More</button>
        </div>
    </div>
</body>
</html>

We have completed the HTML part of the Card component.

**You can skip this part if you know how to setup the tailwind css for your project

Now we have to setup Tailwind CSS for our project. So, open the terminal in VS Code and run the following commands (You can find all the commands on the official Tailwind Website).

Terminal

npm init -y
npm install -D tailwindcss postcss autoprefixer vite
npx tailwindcss init

tailwindcss.config.js

/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: ["*"],
  theme: {
    extend: {},
  },
  plugins: [],
}

style.css

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

Add the above script to package.json

Install the Tailwind CSS IntelliSense extension for better and faster experience

The Complete code for this project

<div class="conatainer bg-slate-400 w-screen h-screen flex justify-center items-center">
        <div class="max-w-sm h-auto bg-white rounded-xl shadow-2xl">
            <img src="https://images.unsplash.com/photo-1658827866369-25c66ae3dc30?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" class="w-full rounded-t-xl" alt="image">

            <h2 class="font-bold text-lg my-2 mx-4 hover:cursor-default">Tailwind Card Comoponent</h2>
            <p class="font-medium text-sm my-4 mx-4 hover:cursor-default">
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero dolore quod placeat sit? Omnis nobis perferendis doloremque facilis, modi animi tempora inventore! 
            </p>
            <button class="bg-blue-600 text-white font-bold px-4 py-1 mx-4 rounded-md my-2 hover:bg-blue-700 hover:scale-105 duration-300 mb-8">Read More</button>
        </div>
    </div>

Hope you loved it.😊

Password show/hide button using vanilla JS

Rohit Sharma — Fri, 29 Apr 2022 11:28:26 +0000

Hello Everyone, I'm back after a long time.
In this post we are going t create a simple password show/hide button using HTML,CSS and JS.
Incase you're not able to understand what we're going to create then check out this video

HTML:

We create an input field of type="password" to Enter the password in it and for creating eye icon we use font awesome.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<input type="password" placeholder="Enter Your Password" id="pass">
<button id="btn"><i id="icon"class="fa-solid fa-eye"></i></button>

CSS:

For styling, you are free to style the way you want.

JavaScript

We add an event listener to showbtn and onclick it call a function. For that we already set count= 1 and on click we increment count by 1
count += 1
Now we use if-else statement

if (count %2 == 0){

     icon.classList.remove("fa-eye");
    icon.classList.add("fa-eye-slash");
  pass.removeAttribute("type");
  }else{
    icon.classList.remove("fa-eye-slash")
    icon.classList.add("fa-eye");
  pass.setAttribute("type","password");
  }

If count is divisible by 2 then we remove fa-eye class from icon and add fa-eye-slash class to it and remove the type attribute from pass to make the password visible.

Else (count is not divisible by 2 ) then we remove fa-eye-slash class from icon and add fa-eye class to it and add attribute of type password pass to hide the password.

The complete JS code is given below

let inpPassword = document.getElementById("pass");
let showbtn = document.getElementById("btn");
let icon = document.getElementById("icon");

let count = 1;
showbtn.addEventListener("click", function() {
  count += 1;

  if (count %2 == 0){

     icon.classList.remove("fa-eye");
    icon.classList.add("fa-eye-slash");


  pass.removeAttribute("type");
  }else{
    icon.classList.remove("fa-eye-slash")
    icon.classList.add("fa-eye");
  pass.setAttribute("type","password");
  }
});

As I'm writing this post after a long time, maybe this post is not up to that level. I'm sorry for that.

Hope you like this tutorial.

Weather App using HTML,CSS and JS

Rohit Sharma — Thu, 10 Feb 2022 09:55:12 +0000

Hello everyone, today we'll be going to create a weather app with help of HTML,CSS and Javascript. For this we'll be using open weather map api. Just follow the basic steps to get your free API ID.

HTML

We need city name as a input from user and two button.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WeatHere</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
            <h1>Weather All-Around</h1>
            <div id="input">
                <input type="text" class="cityname">
                <input type="submit" value="Check Weather" class="btn">
                <button class="locBtn"><img src="https://img.icons8.com/external-kmg-design-outline-color-kmg-design/32/000000/external-pin-map-and-navigation-kmg-design-outline-color-kmg-design-2.png"/></button>

            </div>
            <div id="output">

            </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

CSS

You can style this as your wish.

Javascript

You should check the documentation of open weather API for more clarity.

The basic structure url looks like this
https://api.openweathermap.org/data/2.5/weather?q=cityName&units=metric&appid=1ebc5861bba83e0214cd8df3b995ffca

So, every time we have to change the value of cityName.

In case, we don't know the city name then we can use our device location to get weather update. For this the url looks like this
https://api.openweathermap.org/data/2.5/weather?lat=latitude&lon=longitude&units=metric&appid=1ebc5861bba83e0214cd8df3b995ffca.

So, every time we have to change the value of latitude and longitude for this we use Geolocation API

So, now we declare the variables in our program

let city = document.querySelector('.cityname');
let btn = document.querySelector('.btn');
let locBtn = document.querySelector('.locBtn');
let output = document.getElementById('output');

Now add addEventListener to btn. We listen for a click event and on click we will call checkWeather() function.

btn.addEventListener('click',checkWeather);
function checkWeather(){
    fetch('https://api.openweathermap.org/data/2.5/weather?q='+city.value+'&units=metric&appid=1ebc5861bba83e0214cd8df3b995ffca')
    .then(response => response.json())
    .then(data =>{
        console.log(data);
        output.innerHTML = data['main']['temp']+'°C'+`<br>`+data['weather'][0]['description'];
        output.style.cssText ='background:#c3ffe5; text-align:center; width:150px;'    
    })
    .catch(err=>alert("error"));
}

If user want to check weather using his current location. We have to add addEventListener to locBtn and on clicking the button we call another function showPosition()

locBtn.addEventListener('click',showPosition);
function showPosition() {
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var lat = position.coords.latitude;
            var lon = position.coords.longitude;
            // document.getElementById("lat").innerHTML = lat;
            // document.getElementById("lon").innerHTML = lon;
            fetch('https://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+lon+'&units=metric&appid=1ebc5861bba83e0214cd8df3b995ffca')
            .then(response => response.json())
            .then(data =>{
                output.innerHTML =`<h4>`+ data['main']['temp']+'°C and Location: ' +data['name']+`<br>`+data['weather'][0]['description']+`</h4>`;
                output.style.cssText ='background:#c3ffe5; text-align:center; width:150px;'    
    })
    .catch(err=>alert("error"));

        });

    } else {
        alert("Sorry, your browser does not support HTML5 geolocation.");
    }
}

Hope this tutorial is helpful for you
If you wish to support my work buy me a coffee

Crypto price tracker with JS

Rohit Sharma — Thu, 06 Jan 2022 08:45:31 +0000

Hello Everyone! Today we are going to create a website which gives us current price of any crypto currency listed on coingecko. For this project we are going to use Coingecko API Free version.

HTML

We have to use two <select>. In the first <select> we create some <options>,which user select to get current price of Cryptocurrency(for example: bitcoin, ethereum etc.) and in the second <select> we create <options> for currency (example: usd, inr etc.)

We also need to create a button, onclick we call our API.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CoinRate</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div id="header">
            <h1>CoinRate</h1>
        </div>
        <div id="inputs">
            <div id="selectCrypto">
                <select id="crypto">
                    <option>bitcoin</option>
                    <option>ethereum</option>
                    <option>solana</option>
                    <option>aave</option>
                </select>
            </div>
            <div id="btn">
                <button>Check Price</button>
            </div>
            <div id="selectCurrency">
                <select id="currency">
                    <option>usd</option>
                    <option>inr</option>

                </select>
            </div>

        </div>
        <div id="outputs"> 
            <br>
            <div id=price>Price</div>
        </div>
    </div>
    <footer>Copyright &copy; CoinRate (Coingecko API) <a href='https://www.freepik.com/vectors/logo'>Logo vector created by freepik - www.freepik.com</a> </footer>
    <script src="main.js"></script>
</body>
</html>

CSS

You can style your webpage as according to you. My CSS code for this project is given below

*{
    margin: 0;
    padding: 0;
    color: #ffff;
}
body{
    height: 100vh;
    width: 100vw;
    background: url(/5499459.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.container{
    display: grid;
    height: 90vh;
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: 25% 30% 20% 25%;
    grid-template-areas:
    "header header header"
    ". inputs ."
    ". outputs ."
    "footer footer footer";
}
#header{
    grid-area: header;
    display: grid;
    place-items: center;
}
footer{
    display: grid;
    place-items: center;
}
#inputs{
    grid-area:inputs;
    display: grid;
    grid-template-columns: repeat(2,1fr);

    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
    "selectCrypto selectCurrency"
    "btn btn";
    place-items: center;
}
#btn{
    grid-area: btn;

}
button{
    background: transparent;
    border: 2px solid #9eeaf0;
    font-size: 1.5rem;
    border-radius: 2em;
}
button:hover{
    background: #9eeaf0;
    color: #333;
}

#selectCrypto{
    grid-area: selectCrypto;
}
#selectCurrency{
    grid-area: selectCurrency;
}
#outputs{
    grid-area:outputs;
    display: grid;
    place-items: center;
}
#inpCrypto{
    margin-top: 1rem;
    border: 1px solid rgb(21, 236, 243);
    width: max-content;
}
#inpCrypto{
    margin-top: 1rem;
    border: 1px solid rgb(21, 236, 243);
    width: max-content;

}
#price{
    margin-top: 1rem;
    border: 1px solid rgb(21, 236, 243);
    width: max-content;
    z-index: 1;
    display: none;
    font-size: 1.2rem;
    background: rgb(215,215,215);
    color: black;

}
select{
    background: transparent;
    width: 5rem;
    border: 2px solid #9eeaf0;
    color: black;
    border-radius: 2em;
    font-size: 1em;
    height: 2em;
    width: 5em;
}
select:hover{
    background: #9eeaf0;
}
option{

    color: black;
}

JavaScript

This is the most important part of this project.
Grab the all important elements.

let price = document.getElementById('price');
let btn = document.getElementById('btn');
let cryptoInp = document.querySelector('#crypto');
let currencyInp = document.querySelector('#currency');

Now add an event listener to btn which fire getPrice() function

btn.addEventListener('click',getPrice);

Now we'll write our getPrice() fuunction. We use AJAX for this project.

function getPrice() {
    let crypto = cryptoInp.value;
    let currency = currencyInp.value;
    let xhr = new XMLHttpRequest();
    xhr.open('GET','https://api.coingecko.com/api/v3/simple/price?ids='+crypto+'&vs_currencies='+currency);

    xhr.onload = function(){
        if (this.status == 200) {
            data =  JSON.parse(this.responseText);
            price.innerHTML = "Current Price is "+data[crypto][currency]+" "+currency;
            price.style.display = 'block';

        }else{
            price.innerHTML = 'Error'
        }

    }
    xhr.send();

}

I hope you loved it. If yes , then drop a like and support my work.

What is web 3.0

Rohit Sharma — Tue, 04 Jan 2022 09:48:53 +0000

What is web3.0 ?
How it is different from current web?
Please Suggest Any article or video related to it.

And I want to say Thanks😊 in Advance.

Create Loading Animation with CSS only

Rohit Sharma — Sat, 25 Dec 2021 07:35:42 +0000

Hello! Everyone, Today we are going to create Beat Bar type loading animation with css only.

Check What we going to create

HTML

We have to create four <div> element.

<body>
  <div class="box" id="box1"></div>
  <div class="box" id="box2"></div>
  <div class="box" id="box3"></div>
  <div class="box" id="box4"></div>
</body>

CSS

*{
  margin:0;
  padding:0; 
}

Now center our <div>

body{
  background:#444;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}

Now style our box

.box{
  width:20px;
  height:20px;
  background: white;
  margin:5px;
}

Now we're going to use nth-child() pseudo selector.

.box:nth-child(1){
  background:red;
  animation: balls 1s linear infinite;
}
.box:nth-child(2){
  background:cyan;
  animation: balls 1s  0.1s linear infinite;
}
.box:nth-child(3){
  background:blue;
  animation: balls 1s 0.2s linear infinite;
}
.box:nth-child(4){
  background:yellow;
  animation: balls 1s 0.4s linear infinite;
}

Now it's time to animate using keyframes

@keyframes balls{
  0%{
    transform:sclaeY(1);
  }
  50%{
    transform:scaleY(3);
  }
  100%{
    transform:sclaeY(1);
  }
}

I hope you love it.
Support me, If you can