DEV Community: Pranesh CodeCraft

CRUD Operations: The Basics of Data Management

Pranesh Chowdhury — Mon, 17 Jun 2024 13:09:16 +0000

First, We learn what the CRUD operation is, then we will understand step by step with a backend code (express.js).

CRUD stands for Create, Read, Update, and Delete. These are the four basic things you can do with data in a database:

Create:

Add new data to the database.

Example: Imagine you're adding a new coffee to your database. You enter the coffee name and price and save it.

Read:

Get data from the database.

Example: When you open your client site to look up coffee items, you read data from the database.

Update:

Change existing data in the database.

Example: If you want to change the coffee price, you can edit the coffee price to update the price.

Delete:

Remove data from the database.

Example: If you no longer need a coffee item, you can delete it from your database.

Yeeessss!!! Now we learned the basic operations,

Now we will understand CRUD operation by applying the code in express.js,

Setup and Middleware

const express = require('express');
const cors = require('cors');
const { MongoClient, ServerApiVersion, ObjectId } = require('mongodb');
const app = express();
const port = process.env.PORT || 5000;
require('dotenv').config();

// Middleware
app.use(cors());
app.use(express.json());

Express Setup: Sets up the Express application.
cors: Middleware to enable Cross-Origin Resource Sharing, allowing the frontend to make requests to this server from different origins.
express.json(): Middleware to parse JSON request bodies.

MongoDB Connection Setup

const uri = `mongodb+srv://${process.env.DB_USER}:${process.env.DB_PASS}@cluster0.2pzzeio.mongodb.net/?retryWrites=true&w=majority`;
const client = new MongoClient(uri, {
  serverApi: {
    version: ServerApiVersion.v1,
    strict: true,
    deprecationErrors: true,
  }
});

MongoDB Connection: Uses the MongoClient from the MongoDB driver to connect to the MongoDB Atlas cluster using the connection string stored in the .env file.

CRUD Operations

app.get('/coffee', async (req, res) => {
  const cursor = coffeeCollection.find();
  const result = await cursor.toArray();
  res.send(result);
});

GET /coffee: Retrieves all documents (coffees) from the coffee collection in the coffeeDB database.

GET Single Coffee

app.get('/coffee/:id', async (req, res) => {
  const id = req.params.id;
  const query = { _id: new ObjectId(id) };
  const result = await coffeeCollection.findOne(query);
  res.send(result);
});

GET /coffee/: Retrieves a single coffee by its _id. Uses ObjectId from MongoDB to create a query object.

PUT (Update) Coffee

app.put('/coffee/:id', async (req, res) => {
  const id = req.params.id;
  const filter = { _id: new ObjectId(id) };
  const options = { upsert: true };
  const updatedCoffee = req.body;
  const coffee = {
    $set: {
      name: updatedCoffee.name,
      quantity: updatedCoffee.quantity,
      supplier: updatedCoffee.supplier,
      taste: updatedCoffee.taste,
      category: updatedCoffee.category,
      details: updatedCoffee.details,
      photo: updatedCoffee.photo,
    }
  };
  const result = await coffeeCollection.updateOne(filter, coffee, options);
  res.send(result);
});

POST /coffee: Inserts a new coffee document into the coffee collection using insertOne().

DELETE Coffee

app.delete('/coffee/:id', async (req, res) => {
  const id = req.params.id;
  const query = { _id: new ObjectId(id) };
  const result = await coffeeCollection.deleteOne(query);
  res.send(result);
});

DELETE /coffee/: Deletes a coffee by its _id using deleteOne().

Server Startup and Ping

app.get('/', (req, res) => {
  res.send("Coffee making server is running...");
});

app.listen(port, () => {
  console.log(`Coffee server is running on port: ${port}`);
});

GET /: Simple route to verify that the server is running.
Server Start: Starts the Express server on the specified port (5000 by default).

MongoDB Connection Management

The run() function is an asynchronous function that connects to MongoDB using await client.connect(). It also sets up the coffeeCollection variable to interact with the coffee collection in the coffeeDB database.

It uses MongoDB's findOne(), find(), updateOne(), insertOne(), and deleteOne() methods to perform CRUD operations on the coffeeCollection.

Code Link: https://github.com/Praneshchow/Coffee-express-server

These operations are the basic actions that can be performed on any data set, whether it is contacts in your phone, products in an online store, or posts on a social media site.

Build a Simple JSON API with Express.js on a Local Server

Pranesh Chowdhury — Wed, 15 May 2024 14:25:30 +0000

Creating a simple server looks like an exciting thing to do. If you're fetching data from other sites, why not create your own server for accessing API data?

It's Easy!!

Let's learn how to make a local server using express.js for your project by following these steps:

First, you need to install Node.js. I assume that you have already installed Node.js on your computer.

Install and setup the server:

First, create the backend server:

mkdir my-app-server

Go to the folder path:

cd my-app-server

npm init:

npm init -y

npm install express:

npm install express

Install cors:

npm install cors

Cors gives access to the server for your project (API call). Otherwise API call in your project will show 'failed to load'.

Then create a file 'index.js'. Now write code in 'index.js'.

const express = require('express');
const app = express();
const cors = require('cors');
const port = process.env.PORT || 5000;

const categories = require('./data/categories.json');

app.use(cors());

app.get('/', (req, res) => {
    res.send("Server is running");
});

app.get('/categories', (req, res) => {
    res.send(categories); 
})

app.listen(port, () => {
    console.log(`Server (categories) is running on port: ${port}`);
})

Our data file is categories.json.

Data of `categories.json` file:

[
    {
        "id": 1,
        "category": "World",
        "total_news": 150
    },
    {
        "id": 2,
        "category": "Politics",
        "total_news": 120
    },
    {
        "id": 3,
        "category": "Business",
        "total_news": 100
    },
    {
        "id": 4,
        "category": "Technology",
        "total_news": 80
    },
    {
        "id": 5,
        "category": "Sports",
        "total_news": 90
    }
]

Run the server:

Run the server using nodemon:

nodemon index.js

Nodemon helps to update the server in real-time.

Open your web browser and go to http://localhost:5000. You should see "Server is running" displayed on the page.

If you go to http://localhost:5000/categories. Then you can see some categories of data.

Now you can easily access this data for your project.

That's why I'm here:

YouTube Tutorial: https://youtu.be/u6q5yqlc8bM?si=RQeVvzZRNYdUA0Wc

Thank You.

Creating a Google Sign-In with Firebase (Firebase Authentication)

Pranesh Chowdhury — Sun, 14 Apr 2024 16:12:05 +0000

In this simple project, we apply Firebase authentication using Google provider.

Preview Site:

After Sign in with Google account:

Let's create a Firebase project. Then we will connect with out project.

Step 1: Go to the Firebase project.

Step 2: Give your project name.

Step 3: Go build > Authentication.

Step 4: Enable Google Sign-in provider.

For more information, you can check this Firebase authentication (https://firebase.google.com/docs/auth?authuser=0&hl=en).
Step 5: Go to the project Setting.
Select the web project.

Project Create and Setup:

Run this cmd Commands:

npm create vite@latest name-of-your-project -- --template react
cd <your new project directory>
npm install react-router-dom localforage match-sorter sort-by
npm install firebase

Now we will create a file name firebase.init.js in our project. In the given screenshot, the code we will copy and paste into a firebase.init.js file.

The `firebase.init.js` file:

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  // firebase config. 
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

export default app;

Then add the last line export default app in firebase.init.js file.

Now follow the code and try to do it.

App.jsx

import Login from "./Login"

function App() {
  return (
    <>
      <Login></Login>
    </>
  )
}

export default App

Login.jsx

import { GoogleAuthProvider, getAuth, signInWithPopup, signOut } from 'firebase/auth';
import { useState } from 'react';
import app from './firebase.init';
import './login.css';

const Login = () => {
    const [user, setUser] = useState(null);
    const auth = getAuth(app);
    const googleProvider = new GoogleAuthProvider();

    // Sign in to the google. 
    const GoogleSignIn = () => {
        signInWithPopup(auth, googleProvider)

            .then((result) => {
                const loggedInUser = result.user;
                console.log(loggedInUser);
                setUser(loggedInUser);
            })
            .catch(error => {
                console.log('error', error.message);
            })
    }

    // Signout. 
    const SignOut = () => {
        signOut(auth)
            .then(result => {
                console.log(result);
                setUser(null);
            })
            .catch(error => {
                console.log(error);
            })
    }

    return (
        <div>
            <h1>Google Signin with Firebase</h1>

            {/*   user ? logout : sign in.   */}
            {
                user ?
                <button onClick={SignOut}>Sign Out</button> :
                <>
                    <button onClick={GoogleSignIn}>Google Login</button>
                </>
            }

            {user && <div className='profile'>
                <h2>Profile</h2>
                <h4>User Name: {user.displayName}</h4>
                <p>Email: {user.email}</p>
                <img src={user.photoURL} alt="" />
            </div>
            }
        </div>
    );
};

export default Login;

Thank You ⭐

Now it's your turn...

Most Common JavaScript Array Methods

Pranesh Chowdhury — Wed, 27 Mar 2024 11:31:09 +0000

There are some common Javascript Array methods we use in JavaScript. In this article, I tried to highlight some of the common array methods I mostly used in JavaScript even in React projects.

I have provided the 16 most used JavaScript methods. I have also included code examples for easier understanding.

Let's Go!!!

length()

Returns the number of elements in an array.

const colors = ['red', 'green', 'blue'];
console.log(colors.length);

Output:

toString()

Converts the elements of an array into a string and returns the result.

const colors = ['red', 'green', 'blue'];
console.log(colors.toString());

Output:

"red,green,blue"

indexOf()

Returns the first index at which a given element can be found in the array, or -1 if it is not present.

const colors = ['red', 'green', 'blue'];
console.log(colors.indexOf('green'));

Output:

pop()

Removes the last element from an array and returns that element.

const colors = ['red', 'green', 'blue'];
const removedColor = colors.pop();
console.log(removedColor);

Output:

"blue"

push()

Adds one or more elements to the end of an array and returns the new length of the array.

const colors = ['red', 'green'];
const newLength = colors.push('blue');
console.log(colors);

Output:

['red', 'green', 'blue']

concat()

Returns a new array that combines the original array's elements with other arrays or values.

const colors = ['red', 'green'];
const moreColors = colors.concat(['blue', 'yellow']);
console.log(moreColors);

Output:

["red", "green", "blue", "yellow"]

slice()

Returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included).

const colors = ['red', 'green', 'blue', 'yellow'];
const slicedColors = colors.slice(1, 3);
console.log(slicedColors);

Output:

["green", "blue"]

splice()

Changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

const colors = ['red', 'green', 'blue', 'yellow'];
colors.splice(2, 1, 'orange'); // Removes 1 element starting from index 2 and adds 'orange'
console.log(colors);

Output:

["red", "green", "orange", "yellow"]

filter()

Creates a new array with all elements that pass the test implemented by the provided function.

const colors = ['red', 'green', 'blue', 'yellow'];
const filteredColors = colors.filter(color => color.length > 4);
console.log(filteredColors);

Output:

["green", "yellow"]

find()

Returns the value of the first element in the array that satisfies the provided testing function, or is undefined if no such element is found.

const colors = ['red', 'green', 'blue', 'yellow'];
const foundColor = colors.find(color => color === 'green');
console.log(foundColor);

Output:

"green"

forEach()

Executes a provided function once for each array element.

const colors = ['red', 'green', 'blue'];
colors.forEach(color => console.log(color.toUpperCase()));

Output:

RED
GREEN
BLUE

includes()

Determines whether an array includes a certain element, returning true or false as appropriate.

const colors = ['red', 'green', 'blue'];
console.log(colors.includes('yellow'));

Output:

false

map()

Creates a new array populated with the results of calling a provided function on every element in the calling array.

const colors = ['red', 'green', 'blue'];
const capitalizedColors = colors.map(color => color.toUpperCase());
console.log(capitalizedColors);

Output:

["RED", "GREEN", "BLUE"]

reduce()

Executes a reducer function (that you provide) on each array element, resulting in a single output value.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum);

Output:

If you found this helpful, please consider giving it a like. It means a lot to me. Thanks for Reading 🩵⭐

Bubble Sort Algorithm in JavaScript

Pranesh Chowdhury — Sun, 24 Mar 2024 19:58:26 +0000

Bubble sort is an algorithm for sorting elements by repeatedly comparing adjacent pairs and swapping them if they are in the wrong order until the entire list is sorted.

We will sort based on ascending order.

How Bubble Sort Works:

Traverse from the left and compare adjacent elements and the higher one is placed on the right side.
The largest element is moved to the rightmost end at first.
Then continue to find the second largest and place it until the data is sorted.

Algorithm:

bubbleSort(array)
  for i <- 1 to indexOfLastUnsortedElement-1
    if leftElement > rightElement
      swap leftElement and rightElement
end bubbleSort

JavaScript Implementation:

let arr = [12, 8, -5, 6, -8, 2];        // input array. 

bubbleSort(arr);            // bubbleSort() function call. 

function bubbleSort(arr){
    let n = arr.length;     // 'n' is array size. 

    for (let j=0; j<n-1; ++j){
        for (let i=0; i<n-j-1; ++i){
            if (arr[i] > arr[i+1]){
                let temp = arr[i];
                arr[i] = arr[i + 1];
                arr[i + 1] = temp;
            }
        }
    }

    console.log(arr);           // Print the Sorted Arry. 
}

Output:

[ -8, -5, 2, 6, 8, 12 ]

How can we optimize the bubble sort algorithm?

All the comparisons are made in the above algorithm even if the array is already sorted. This increases the execution time.
We can optimize by checking if the elements are sorted or not. The value of swapped is set to 1 (true) if there occurs a swapping of elements. Otherwise, it is set to 0 (false).

This will reduce the execution time to optimize the bubble sort.

Optimized Bubble Sort Algorithm

bubbleSort(array)
  swapped <- false
  for i <- 1 to indexOfLastUnsortedElement-1
    if leftElement > rightElement
      swap leftElement and rightElement
      swapped <- true
end bubbleSort

let arr = [12, 8, -5, 6, -8, 2];        // input array. 

bubbleSort(arr);            // bubbleSort() function call. 

function bubbleSort(arr){
    let swapped = 0;        // check if swapping occurs

    let n = arr.length;     // 'n' is array size. 

    for (let j=0; j<n-1; ++j){
        for (let i=0; i<n-j-1; ++i){
            if (arr[i] > arr[i+1]){
                let temp = arr[i];
                arr[i] = arr[i + 1];
                arr[i + 1] = temp;

                swapped = 1;
            }
        }
        // no swapping means the array is already sorted. so no need for further comparison. 
        if (swapped == 0) {
            break;
        }
    }

    console.log(arr);           // Print the Sorted Arry. 
}

Output:

[ -8, -5, 2, 6, 8, 12 ]

Time Complexity: O(N^2)

If you found this helpful, please consider giving it a like. It means a lot to me. Thanks for Reading 🩵⭐

Reference:

Mounting Google Drive in Google Colab

Pranesh Chowdhury — Fri, 22 Mar 2024 13:56:56 +0000

Connect Google Drive to Google Colab.

Follow these steps:

First, upload the CSV file to Google Drive.
Open a Colab notebook and write the code.
Connect to Google Drive by granting access to your Google account.
Find the file in Google Drive, copy its path, and paste it into the code.

Run this code:

This code will be automatically generated when you mount the drive. You just need to run this code.

from google.colab import drive

drive.mount('/content/drive')

Access file:

df = pd.read_csv("paste the google drive path")

~ Thank You 🩵⭐

youtube.com

Basic Responsive design using raw CSS code

Pranesh Chowdhury — Wed, 20 Mar 2024 14:53:00 +0000

Responsive design using raw CSS is quite simple if you understand the basics. First, cover some fundamental concepts commonly used in responsive design. Then, you can proceed to learn more on your own.

Responsive Design You can follow this:

Viewport Meta Tag
CSS relative unit (em, percentage)
Responsive Image (Fluid Image)
Use of Max-width and Margin
Media Query (Responsive Split screen using flex or Grid)

Viewport Meta Tag

Check your HTML document includes the viewport meta tag in the head section.

<meta name="viewport" content="width=device-width, initial-scale=1">

CSS Relative Units (em, percentage):

em: The 'em' unit is relative to the parent element's font size. It's commonly used for setting font sizes in a scalable and responsive manner.
Percentage: Percentage units are relative to the size of the containing block. They are widely used for defining widths, heights, margins, and paddings in responsive layouts, allowing elements to adapt to different screen sizes.

Responsive Image (Fluid Image):

A fluid image is an image that resizes itself based on the width of its container, maintaining its aspect ratio. This is achieved by setting the image's width to 100% of its container's width in CSS. Fluid images are crucial for responsive web design as they ensure images adapt to various screen sizes, preventing overflow or distortion.

Body Max-width and Margin Auto:

Set max-width for the body element to prevent content from stretching too wide on larger screens. Center the content horizontally using margin: 0 auto. (You can use it in your way)

Media Query:

Media queries are used for responsive design. To adapt the layout and styling of a webpage based on the characteristics of the device viewing it, such as screen size, orientation, and resolution.

Common breakpoints for various devices:

Extra Small Devices (Phones) - Less than 576px
Small Devices (Tablets) - 576px to 767px
Medium Devices (Desktops) - 768px to 991px
Large Devices (Desktops) - 992px to 1199px
Extra Large Devices (Large Desktops) - 1200px and above

These breakpoints can be used as a general guideline for creating responsive designs for different devices.

@media screen and  (min-width: 577px ) and (max-width: 700px) {
            /*  CSS Code  */
}

Flex

Flexbox is a CSS layout model designed for creating flexible and responsive web designs with ease, offering powerful alignment control and simplified coding. It enables fluid resizing and reordering of elements, making it ideal for building layouts that adapt seamlessly to various screen sizes and devices.

.cart {
  display: flex;
  flex-direction: row;
}

/* Responsive layout - makes a one-column layout instead of a two-column layout */
@media (max-width: 800px) {
  .cart {
    flex-direction: column;
  }
}

Grid

CSS Grid is a powerful layout system in CSS that allows for creating two-dimensional grid-based layouts. It enables precise control over the positioning and alignment of elements in both rows and columns, offering flexibility and responsiveness in web design. CSS Grid simplifies the creation of complex layouts, making it a preferred choice for building modern, responsive websites.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

@media screen and (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr; /* Single column layout for smaller screens */
  }
}

Tips: Practice some projects. It helps you build a good understanding of CSS design.

If you found this helpful, please consider giving it a like. It means a lot to me. Thanks for Reading 🩵⭐

Use Rechart to Draw Any Type Of Chart Using React.JS

Pranesh Chowdhury — Tue, 19 Mar 2024 20:44:20 +0000

Sometimes, we need to display an overview chart in the dashboard section. For this purpose, we can utilize the Recharts website to create visually appealing charts using React.

Let's Start... 😊

First, create your react project. Then go to the recharts website (https://recharts.org/en-US/guide).

Install Recharts:

npm install recharts

Then create a file where you write your code. I've made a file/component named 'Chart.jsx'. Now, add packages and write the code as provided.

Chart Component:

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const Chart = () => {
    const marks = [
        {
          "ID": 1,
          "Name": "Alice",
          "Math": 85,
          "Physics": 90,
          "Chemistry": 88
        },
        {
          "ID": 2,
          "Name": "Bob",
          "Math": 78,
          "Physics": 82,
          "Chemistry": 79
        },
        {
          "ID": 3,
          "Name": "Charlie",
          "Math": 92,
          "Physics": 88,
          "Chemistry": 95
        },
        {
          "ID": 4,
          "Name": "David",
          "Math": 76,
          "Physics": 85,
          "Chemistry": 80
        }
      ]

    return (
        <div>
            <LineChart width={500} height={200} data={marks}>
                {/* Math, Physics, Name are text.   */}
                <Line dataKey="Physics"></Line>
                <Line dataKey="Math" stroke="#8884d8"></Line>
                <XAxis dataKey="Name"></XAxis>
                <YAxis></YAxis>
                <Tooltip></Tooltip>
            </LineChart>
        </div>
    );
};

export default Chart;

App Component:

Add the component in the 'App.jsx' file.

import './App.css'
import Chart from './Chart'

function App() {

  return (
    <>
      <Chart></Chart>
    </>
  )
}

export default App

Output (Line Chart)

After running the code, the output displays a line chart.

Thanks for reading 🩵🥰

Git Cheatsheet ✨🗨️

Pranesh Chowdhury — Tue, 19 Mar 2024 08:27:30 +0000

Git is a version control system that tracks changes to files over time. It allows multiple people to collaborate on projects by managing their contributions and merging them seamlessly. Git stores these changes in a repository, enabling users to revert to previous states or branch out for experimentation.

Setup

Configuring user information used across all local repositories

git config --global user.name “[firstname lastname]”
set a name that is identifiable for credit when reviewing the version history
git config --global user.email “[valid-email]”
set an email address that will be associated with each history marker
git config --global color.ui auto
set automatic command line coloring for Git for easy reviewing.

Setup and Init

Configuring user information, initializing and cloning repositories

git init
initialize an existing directory as a Git repository
git clone [url]
retrieve an entire repository from a hosted location via URL

Share and Update

Retrieving updates from another repository and updating local repos

git remote add [alias] [url]
add a git URL as an alias
git fetch [alias]
fetch down all the branches from that Git remote
git merge [alias]/[branch]
merge a remote branch into your current branch to bring it up to date
git push [alias] [branch]
Transmit local branch commits to the remote repository branch
git pull
fetch and merge any commits from the tracking remote branch

Stage and Snapshot

Working with snapshots and the Git staging area

git status
show modified files in the working directory, stage for your next commit
git add [file]
add a file as it looks now to your next commit (stage)
git reset [file]
unstaged a file while retaining the changes in the working directory
git diff
diff of what is changed but not staged
git diff --staged
diff of what is staged but not yet committed
git commit -m “[descriptive message]”
commit your staged content as a new commit snapshot

Branch and Merge

Isolating work in branches, changing context, and integrating changes

git branch
list your branches. a * will appear next to the currently active branch
git branch [branch-name]
create a new branch at the current commit
git checkout
switch to another branch and check it out in your working directory
git merge [branch]
merge the specified branch’s history into the current one
git log
show all commits in the current branch’s history

Inspect and Compare

Examining logs, diffs, and object information

git log
show the commit history for the currently active branch
git log branchB..branchA
show the commits on branchA that are not on branchB
git log --follow [file]
show the commits that changed file, even across renames
git diff branchB...branchA
show the diff between what is in branchA and what is not in branchB
git show [SHA]
show any object in Git in a human-readable format

Rewrite History

Rewriting branches, updating commits, and clearing history

git rebase [branch]
apply any commits of the current branch ahead of the specified one
git reset --hard [commit]
clear staging area, rewrite the working tree from the specified commit

Redo commits

Erase mistakes and craft replacement history

git reset [commit]
Undoes all commits after [commit], preserving changes locally
git reset --hard [commit]
Discards all history and changes back to the specified commit

Reference:

Local Storage (Browser Object Module) in JS

Pranesh Chowdhury — Thu, 15 Feb 2024 21:01:14 +0000

Local Storage is a feature that enables JavaScript sites and apps to store key-value pairs in a web browser with no expiration date. This means that the data stored in the browser will persist even after the browser window is closed.

Five methods used for local storage:

setItem() = This method is used to add keys and values to the local storage.
getItem() = This method is used to get items from the local storage.
removeItem() = This method is used to remove an item from the local storage buy key.
clear() = This method is used to clear the local storage.
key() = This method is used to retrieve a key of local storage by passing a number.

Below this is a small project to understand Local storage.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input id="product-name" type="text" placeholder="product">
    <input id="product-quantity" type="text" placeholder="quantity">
    <button onclick="addProduct()">Add product</button>
    <ul id="product-container">

    </ul>
    <script src="product.js"></script>
</body>
</html>

JavaScript:

const addProduct = () => {
    const productField = document.getElementById('product-name');
    const quantityField = document.getElementById('product-quantity');
    const product = productField.value;
    const quantity = quantityField.value;

    productField.value = '';
    quantityField.value = '';

    console.log(product, quantity);
    displayProduct(product, quantity);
    saveProductToLocalStorage(product, quantity);
}

const displayProduct = (product, quantity) => {
    const ul = document.getElementById('product-container');
    const li = document.createElement('li');
    li.innerText = `${product}: ${quantity}`;
    ul.appendChild(li);
}


const getStoredShoppingCart = () => {
    let cart = {};
    const storedCart = localStorage.getItem('cart');
    if (storedCart){
        cart = JSON.parse(storedCart);
    }
    return cart;
}

const saveProductToLocalStorage = (product, quantity) => {
    const cart = getStoredShoppingCart();
    cart[product] = quantity;
    const cartStringified = JSON.stringify(cart);
    localStorage.setItem('cart', cartStringified);          // save into the local storage. 
}

// Display the html 
const displayProductsFromLocalStorage = () => {
    const savedCart = getStoredShoppingCart();
    console.log(savedCart);
    for (const product in savedCart){
        const quantity = savedCart[product];
        console.log(product);
        displayProduct(product, quantity);
    }
}

displayProductsFromLocalStorage();

Thanks for reading 🩵⭐

DEV Community: Pranesh CodeCraft

CRUD Operations: The Basics of Data Management

Create:

Read:

Update:

Delete:

Now we will understand CRUD operation by applying the code in express.js,

Setup and Middleware

MongoDB Connection Setup

CRUD Operations

GET Single Coffee

PUT (Update) Coffee

DELETE Coffee

Server Startup and Ping

MongoDB Connection Management

Code Link: https://github.com/Praneshchow/Coffee-express-server

Build a Simple JSON API with Express.js on a Local Server

Install and setup the server:

Data of categories.json file:

Run the server:

Thank You.

Creating a Google Sign-In with Firebase (Firebase Authentication)

Preview Site:

After Sign in with Google account:

Project Create and Setup:

The firebase.init.js file:

App.jsx

Login.jsx

Thank You ⭐

Now it's your turn...

Most Common JavaScript Array Methods

length()

toString()

indexOf()

pop()

push()

concat()

slice()

splice()

filter()

find()

forEach()

includes()

map()

reduce()

Bubble Sort Algorithm in JavaScript

How Bubble Sort Works:

Algorithm:

JavaScript Implementation:

Output:

How can we optimize the bubble sort algorithm?

Optimized Bubble Sort Algorithm

Output:

Reference:

Mounting Google Drive in Google Colab

Follow these steps:

Run this code:

Access file:

Basic Responsive design using raw CSS code

Responsive Design You can follow this:

Viewport Meta Tag

CSS Relative Units (em, percentage):

Responsive Image (Fluid Image):

Body Max-width and Margin Auto:

Media Query:

Common breakpoints for various devices:

Flex

Grid

Use Rechart to Draw Any Type Of Chart Using React.JS

Let's Start... 😊

Chart Component:

App Component:

Output (Line Chart)

Git Cheatsheet ✨🗨️

Setup

Setup and Init

Share and Update

Stage and Snapshot

Branch and Merge

Inspect and Compare

Data of `categories.json` file:

The `firebase.init.js` file: