DEV Community: Sandeep Kumar Patel

Javascript - Polyfills

Sandeep Kumar Patel — Thu, 19 Oct 2023 14:21:56 +0000

Polyfill

Polyfill for the map function

  let arr = [1, 2, 3 ,4, 5];
  arr.map((e,i) => e*i);

  Array.prototype.myMap = function (cb) {
    let res = [];
    for(let i=0; i<this.length; i++){
      // map(element, index, array)
      res.push(cb(this[i], i, this));
    }

    return res;
  }


  let newArr = arr.myMap((e,i) =>  e*i);
  console.log(newArr);   // [ 0, 2, 6, 12, 20 ]

Polyfill for the filter function

  let arr = [1, 2, 3, 4, 5, 6];

  Array.prototype.myFilter = function(cb) {
    let res = [];
    for(let i = 0; i < this.length; i++){
      if(cb(this[i], i, this)){
        res.push(this[i]);
      }
    }

    return res;
  }

  let ans = arr.myFilter((el, i, arr) => el <= 4);

  console.log(ans); // [1, 2, 3, 4]

Polyfill for the reduce function

    let arr = [1, 2, 3, 4, 5];
    // let ans = arr.reduce((acc, cur) => {
    //     return acc + cur
    // }, 0)
    // Syntax: arr.reduce(function(total, currentValue, currentIndex, arr), initialValue)

    Array.prototype.myReduce = function(cb , initialValue) {
        let acc = initialValue;
        for(let i = 0; i < this.length; i++){
            acc = acc ? cb(acc, this[i], i, this) : this[i];
        }

        return acc;
    }

    console.log(arr.myReduce((acc, cur) => acc+cur)); // 15
    console.log(arr.myReduce((acc, cur) => acc+cur , 2));  // 17

Polyfill for the call function

___ The call() method takes arguments separately. fn.call(obj, "arg1", "arg2", "arg3") ___

    const person1 = {name: "Sandeep"};
    const person2 = {name: "Abhishek"};

    function printSection(section){
        console.log(`${this.name} is in class 12-${section}.`);
    }

    Function.prototype.myCall = function(obj, ...args){
        if(typeof this !== 'function'){
            throw new Error("Not Callable");
        }

        obj.fn = this;

        obj.fn(args);
    } 

    printSection.myCall(person1, 'C');  // Sandeep is in class 12-C. 
    printSection.myCall(person2, 'A');  // Abhishek is in class 12-A.

Polyfill for the apply function

___ The apply() method takes arguments as an array. fn.call(obj, ["arg1", "arg2", "arg3"]) ___

    const person1 = {name: "Sandeep"};
    const person2 = {name: "Abhishek"};

    function printStudent(section, background){
        console.log(`${this.name} is in class 12-${section}, background = ${background}.`);
    }

    Function.prototype.myApply = function(obj, args){
        if(typeof this !== 'function'){
            throw new Error("Not Callable");
        }

        if (!Array.isArray(args)) {
            throw new Error("TypeError: CreateListFromArrayLike called on non-object");
        }


        obj.fn = this;

        obj.fn(...args);
    } 

    printStudent.myApply(person1, ['C', "Science"]);  // Sandeep is in class 12-C, background = Science.
    printStudent.myApply(person2, ['A', "Arts"]);  // Sandeep is in class 12-C, background = Science.

Polyfill for the bind function

    const person1 = {name: "Sandeep"};
    const person2 = {name: "Abhishek"};

    function printStudent(section, background){
        console.log(`${this.name} is in class 12-${section}, background = ${background}.`);
    }

    Function.prototype.myBind = function(obj, ...args){
        if(typeof this !== 'function'){
            throw new Error("Not Callable");
        }

        obj.fn = this;

        return function(...newArgs){
            return obj.fn(...args, ...newArgs);
        }
    } 

    const func = printStudent.myBind(person1, 'C');
    func("Science"); // Sandeep is in class 12-C, background = Science. 

    const func2 = printStudent.myBind(person2, 'A', "Arts");
    func2(); // Abhishek is in class 12-A, background = Arts.

Polyfill for the Promise

    function myPromise(executor){
        let onResolve, onReject, isFullfilled = false, isRejected = false, isCalled = false, value;

        function resolve(val){
            isFullfilled = true;
            value = val;

            if(typeof onResolve === 'function'){
                onResolve(val);
                isCalled = true;
            };
        }

        function reject(val){
            isRejected = true;
            value = val;

            if(typeof onResolve === 'function'){
                onReject(val);
                isCalled = true;
            };
        }

        this.then = function(cb){
            onResolve = cb;

            if(isFullfilled && !isCalled){
                isCalled = true;
                onResolve(value)
            }

            return this;
        }

        this.catch = function(cb){
            onReject = cb;

            if(isRejected && !isCalled){
                isCalled = true;
                onReject(value)
            }

            return this;
        }

        try{
            executor(resolve, reject)   
        }catch(error){
            reject(error)
        }
    }

    const promise = new myPromise((resolve, reject) => {
        resolve(5)
    })

    promise.then((res) => {
        console.log(res);
    })
    .catch((err) => console.log(err));

Polyfill for the Promise.all()

  function func1(){
        return new Promise((resolve, reject) => {
            resolve("Hello");
        })
    }
    function func2(){
        return new Promise((resolve, reject) => {
            resolve("World");
        })
    }
    function func3(val){
        return new Promise((resolve, reject) => {
            resolve(val);
        })
    }

    Promise.promiseAll = (promises) => {
        return new Promise((resolve, reject) => {
            const result = [];

            if(!promises.length){
                resolve(result);
                return;
            }

            let pending = promises.length;

            promises.forEach((promise, idx) => {
                Promise.resolve(promise).then((res) => {
                    result[idx] = res;

                    pending--;

                    if(pending === 0){
                        resolve(result);
                    }
                }, reject)
            })
        })
    } 

    Promise.promiseAll([
        func1(), func2(), func3("Sandeep")
    ]).then((res) => console.log(res))

Polyfill for the flat

     let arr = [1, 2, [3, [4, 5]]];
    // console.log(arr.flat(2)) // [ 1, 2, 3, 4, 5 ]

    Array.prototype.myFlat = function(depth){
        let res = [];
        if(!Array.isArray(this)){
            throw new Error(`${this}.myFlat is not a function`);
        }

        this.forEach((el) => {
            if(Array.isArray(el) && depth > 0){
                res.push(...el.myFlat(depth-1));
            }else{
                res.push(el);
            }
        })

        return res;
    }

    console.log(arr.myFlat(2)); // [ 1, 2, 3, 4, 5 ]

MongoDB Atlas Hackathon 2022 on DEV

Sandeep Kumar Patel — Thu, 08 Dec 2022 17:53:55 +0000

What I built

Social Media App - Twitter Clone

Category Submission:

Choose Your Own Adventure

App Link

LIVE

Screenshots

On first time opening this website/or after logging out, user will be redirected to Login Page and will ask to login using google account

User can see all the posts and replies on the Home Page

User can post Text and Images(Drag and Drop).

User can change their cover image by dragging the image from local drive dropping to the the cover area.

User can Reply on the post as well as Reply on the Replies

User can Like the Posts and Replies

User can edit their Bio, Username, and Display Name on their User Page.

User can see their user posts and replies on the user page(user can access their page by clicking on their name or image).

User can Logout using Logout button under the posts of the Home Page.

Description

It is a social media app where users can make their account using a google account and create posts, like posts, and reply to posts.

Link to Source Code

GITHUB

Permissive License

MIT License

Background

What made you decide to build this particular app? What inspired you?
=> Today everyone's everyday life almost getting connected to Social Media either it be connection to people , work, money, advertising etc. So I decided to make Social Media Clone.

How I built it

How did you utilize MongoDB Atlas?
=> I used MongoDB Atlas to store user account details, posts, likes, comments. Fetched the users info and posts from MongoDB Atlas.
Did you learn something new along the way? Pick up a new skill?
=> I understand how to set up and use @next-auth/mongodb-adapter(MongoDB Adapter) in NextJS.

Additional Resources/Info

TODO:

Updating and Uploading image didn't work sometime(not fixed yet).
Add update image to profile
Add Trending/News/Weather to fill Side White Space
Search Functionality to Search Users

Ethereum Voting Machine

Sandeep Kumar Patel — Wed, 26 Oct 2022 17:14:14 +0000

Remix-IDE Or Hardhat

You can use Remix IDE if you want to test.
Create a folder and open VS Code.

    npm init
    npm install --dev hardhat

Select * Create javaScript project *
Then create a new file Voting.sol inside contracts folder

// SPDX-License-Identifier: GPL-3.0
pragma solidity ^0.8.4;

contract Voting {
    uint totalCandidate;
    uint totalVoter;
    uint totalVoted;
 }

Inside the contract

 // create candidate struct to store candidate name , party name, number of votes
struct Candidate {
        bytes32 candidateName;
        bytes32 partyName;
        uint votes;
 }


 // create voter struct
struct Voter {
        uint candidateVoteId;
        bytes32 votedTo;
        bool voted;
        bool eligible;
}

      mapping(uint => Candidate) public candidates;

      mapping(address => Voter) public voters;

Only Owner of the contract or Chief of the Election can verify the Voters to vote. So first make the owner

    function VotOwner() public {
        owner = msg.sender;
    }

    modifier onlyOwner() {
        require(msg.sender == owner);
        _;
    }

    function showOwner() public view returns (address) {
        return owner;
    }

Chief can also add the Candidates

 function addCandidate(bytes32 _name, bytes32 _party) public onlyOwner {
        uint i = totalCandidate++;
        candidates[i] = Candidate(_name, _party, 0);
 }

Verify the Voters by passing the address or wallet address of the voter

function getRightToVote(address voterID) public {
        // check eligible
        require(!voters[voterID].eligible, "Already Eligible");
        require(!voters[voterID].voted, "The voter already voted");
        voters[voterID].eligible = true;
        totalVoter++;
}

Verified voters can now vote

 function toVote(uint candidateID) public {
        Voter storage sender = voters[msg.sender];
        require(sender.eligible, "Not Eligible to Vote");
        require(!sender.voted, "Already Voted");

        sender.voted = true;
        sender.votedTo = candidates[candidateID].partyName;
        candidates[candidateID].votes += 1;
        totalVoted += 1;
 }

Some view functions

    function votersLeftTOVote() public view returns (uint) {
        return totalVoter - totalVoted;
    }

    function voterVotedTo() public view returns (bytes32) {
        Voter storage sender = voters[msg.sender];
        return sender.votedTo;
    }

    function getNumOfCandidates() public view returns (uint) {
        return totalCandidate;
    }

    function getNumOfVoters() public view returns (uint) {
        return totalVoter;
    }

Check the Winner

    function checkWinner() public view returns (uint wins) {
        uint winCount = 0;
        for (uint i = 0; i <= totalCandidate; i++) {
            if (winCount < candidates[i].votes) {
                winCount = candidates[i].votes;
                wins = i;
            }
        }
    }

    function winnerVotes() public view returns (uint vot) {
        vot = candidates[checkWinner()].votes;
    }

    function winnerName() public view returns (bytes32 name) {
        name = candidates[checkWinner()].candidateName;
    }

open deploy.js inside scripts folder

const { ethers } = require("hardhat");
require("dotenv").config({ path: ".env" });

async function main() {
  /*
  A ContractFactory in ethers.js is an abstraction used to deploy new smart contracts,
  so verifyContract here is a factory for instances of our Verify contract.
  */
  const verifyContract = await ethers.getContractFactory("Voting");

  // deploy the contract
  const deployedVerifyContract = await verifyContract.deploy();

  await deployedVerifyContract.deployed();

  // print the address of the deployed contract
  console.log("Verify Contract Address:", deployedVerifyContract.address);

  console.log("Sleeping.....");
  // Wait for etherscan to notice that the contract has been deployed
  await sleep(50000);

  // Verify the contract after deploying
  await hre.run("verify:verify", {
    address: deployedVerifyContract.address,
    constructorArguments: [],
  });
}

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

// Call the main function and catch if there is any error
main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

hardhatconfig.js

require("@nomicfoundation/hardhat-toolbox");
require("dotenv").config({ path: ".env" });

const QUICKNODE_HTTP_URL = process.env.QUICKNODE_HTTP_URL;
const PRIVATE_KEY = process.env.PRIVATE_KEY;
const POLYGONSCAN_KEY = process.env.POLYGONSCAN_KEY;

module.exports = {
  solidity: "0.8.4",
  networks: {
    mumbai: {
      url: QUICKNODE_HTTP_URL,
      accounts: [PRIVATE_KEY],
    },
  },
  etherscan: {
    apiKey: {
      polygonMumbai: POLYGONSCAN_KEY,
    },
  },
};

Compile and Deploy

npx hardhat compile
npx hardhat run scripts/deploy.js --network mumbai

If everything goes okay you will get the link to Mumbai PolygonScan in the terminal

Note

You can modify the contract as you want.
You can add a timer (Election start -> end).
github

Anime list reactjs+Jikan API

Sandeep Kumar Patel — Wed, 18 Aug 2021 12:08:36 +0000

Fetching Anime List using Jikan API in reactjs

LIVE: Anime-suem

GitHub : Repo

Step 1

create react app using command npx create-react-app animeseum

After the command create the folders and files like image given below:

OR you can change files name as you desire.

Step 2

Read the comments in the code for explanation

In App.js

import { useState, useEffect } from "react";

// importing other components 
import Header from "./components/Header.js";
import Footer from "./components/Footer.js";
import Home from "./pages/Home.js";


function App() {
// Creating state variables using useState Hooks :
// "animeList" variable will be used for the searched anime 
// "topAnime" variable will be used for all the popular anime
// "search" variable will be used for search terms
  const [animeList, setAnimeList] = useState([]);
  const [topAnime, setTopAnime] = useState([]);
  const [search, setSearch] = useState("");

  // Fetching top anime (by popularity) from jikan API
  // In place of simple fetch method you can axios library 
  // async function is used so don't to the keyword await

  const getTopAnime = async () => {
    const data = await fetch(
      `https://api.jikan.moe/v3/top/anime/1/bypopularity`
    ).then((res) => res.json());

    setTopAnime(data.top);
  };

  const handleSearch = (e) => {
    e.preventDefault();

    fetchAnime(search);
  };

  // Fetching searched anime from jikan API
  const fetchAnime = async (anime_name) => {
    const data = await fetch(
      `https://api.jikan.moe/v3/search/anime?q=${anime_name}&order_by=title&sort=asc&limit=10`
    ).then((res) => res.json());

    setAnimeList(data.results);
  };

  // get getTopAnime() as the site render useEffect is used
  useEffect(() => {
    getTopAnime();
  }, []);

  return (
    <>
    <div className="App" >
      <Header />

      {/*  Main Content  */}
      <Home
        // passing props to the Home Component 
        handleSearch={handleSearch}
        search={search}
        setSearch={setSearch}
        animeList={animeList}
        topAnime={topAnime}
      />

      <Footer />
      </div>
    </>
  );
}

export default App;

In Home.js

import "../styles/Home.css";
import AnimeCard from "../components/AnimeCard";

// you can get the props "function Home(props)" in this manner 
/* OR you can destructure it "function Home({handleSearch, search, setSearch, topAnime, animeList })" and use "search" instead of "props.search"   */

function Home(props) {
  return (
    <main>
      <div className="home">
        <form className="search-box" onSubmit={props.handleSearch}>
          <input
            type="search"
            placeholder="Search ..."
            required
            value={props.search}
            onChange={(e) => props.setSearch(e.target.value)}
          />
        </form>
      </div>

{/* if there is no text in the search bar it will show top anime(by popularity)
 and on searching it will show search results
use map() function to get all element in the array
 */}
      {!props.search ? (
        <div className="card-main">
          {props.topAnime.map((anime) => (
            <AnimeCard anime={anime} key={anime.mal_id} />
          ))}
        </div>
      ) : (
        <div className="card-main">
          {props.animeList.map((anime) => (
            <AnimeCard anime={anime} key={anime.mal_id} />
          ))}
        </div>
      )}

    </main>
  );
}

export default Home;

In AnimeCard.js

import "../styles/AnimeCard.css"

/* You can add anime synopsis you can check all elements using "console.log(getTopAnime)" in useEffect (App.js) if you want */

function AnimeCard({anime}) {
  // Anime Cards
    return (
        <a className="card-body" href={anime.url} alt={anime.title}>
        <figure className="card-fig">
          <img className="card-image" src={anime.image_url} alt="Anime Image" />
        </figure>
        <h3 className="card-title">{anime.title}</h3>
      </a>
    )
}

export default AnimeCard

In Header.js

import "../styles/Header.css";

function Header() {
  return (
    <header className="header">
      <h1 className="title">Anime-Suem</h1>
    </header>
  );
}

export default Header;

In Footer.js

import "../styles/Footer.css";
import GitHubIcon from "@material-ui/icons/GitHub";
import LinkedInIcon from "@material-ui/icons/LinkedIn";

// I have used material-ui icons you can use whatever you wish
// "npm i @material-ui/icons" to install 

function Footer() {
  return (
    <footer>
   <div className="footer">

      <p>Created by: Sandeep Kumar Patel</p>

      <a href="https://github.com/sandyabhi/anime-suem" className="foots">
        <GitHubIcon /> Github
      </a>

      <a href="https://www.linkedin.com/in/sandeep-kumar-patel47/" className="foots">
        <LinkedInIcon /> Linkedin
      </a>

   </div>

    </footer>
  );
}

export default Footer;

Done

For the CSS part you can go to my Github Repo.

OR you can do it yourself or use bootstrap, material ui, semantic ui, Tailwind CSS etc

Extension (VS CODE)

-Prettier
-ES7 React/Redux/GraphQL/React-Native snippets
-Auto Rename Tag

Fetching data from weather API using axios in Reactjs

Sandeep Kumar Patel — Sat, 22 May 2021 14:32:56 +0000

First create react-app
using command in the terminal:
npx create-react-app weather

then install axios:
npm i axios

useState() is a hook in react functional component
it take useState returns an array of two values. The first value is the initial state and the second value is the function to update the value.

useState can be imported using :
import {useState} from react
or
const[value, setValue] = React.useState(initialstate)

import React from 'react'
import { useState } from 'react'
import "./style/Weather.css"
import axios from 'axios'

function App() {

    const [weather, setWeather] = useState('');
    const [city, setCity] = useState('');
    const apiKey = process.env.REACT_APP_APIKEY;

    const apiCall = async (e) => {
        e.preventDefault()
        const loc = e.target.elements.loc.value
        const url = `https://api.openweathermap.org/data/2.5/weather?q=${loc}&appid=${apiKey}`;
        const req = axios.get(url);
        const res = await req;
        setWeather({
            descp: res.data.weather[0].description,
            temp: res.data.main.temp,
            city: res.data.name,
            humidity: res.data.main.humidity,
            press: res.data.main.pressure,
        })

        setCity(res.data.name)

    }

    //Converting K to C
    let k = weather.temp;
    let C = k - 273.15

    const Weath = () => {
        return <div>
            <div className="winfo">
                Weather information for {city}
                <hr></hr>
            </div>
            <div className="Weath">
                <div className="welement">
                    Weather : {weather.descp}
                </div>
                <div className="welement">
                    Temperature : {C.toFixed(2)} &#8451;
                </div>
                <div className="welement">
                    Humidity :{weather.humidity} %
                </div>
                <div className="welement">
                    Pressure :  {weather.press} mb
                </div>
            </div>
        </div>
    }
    return (<>
        <div className="weathhead">Weather Info</div>
        <div className="mainweather">
            <div className="weather">
                <form onSubmit={apiCall} className="form">
                    <input type="text" 
                     placeholder="city" 
                     name="loc" />
                    <button className="bttn">Search</button>
                </form>

                {weather && <Weath />}
            </div>
        </div>
    </>
    )
}

export default App

github: https://github.com/sandyabhi/kitrgh/blob/master/src/Weather.js

First Post

Sandeep Kumar Patel — Sat, 22 May 2021 13:47:19 +0000

Hmmm,
I am Sandeep Kumar Patel, pursuing BTech(CSE) from Kirodimal Institute of Technology, Raigarh.
I like web technologies.
Currently learning Reactjs, Tailwind-CSS, Express.
I love anime, watercolour painting and .....
Hmmmmmmmm