DEV Community: Prince Jaiswal

How To Learn Python In Just 100 Days 🤔

Prince Jaiswal — Sun, 19 Jun 2022 06:43:51 +0000

Why To Learn Python 😒 ?

Python is highly versatile. You can use it for both small and complex tasks, and it is used across many different industries — from its more common applications in data science and software engineering to environments like mobile app development, artificial intelligence, and machine learning.

Is Their Any Scope For Job ?

You Can Apply For :-

Software Engineer.
Python Developer.
Research Analyst.
Data Analyst.
Data Scientist.
Software Developer.

Is Python Suitable For Beginner In Programming Language ?

Python is always recommended if you're looking for an easy and even fun programming language to learn first.

From Where Can I Learn Python ?

You Can Learn From Here ->

Udemy - CLICK HERE

Recommended Course - CLICK HERE

GeeksForGeeks

Coding Ninja

Note : I Am Not Promoting Any Course .

You Can Try Some FREE Platforms Like :-

YouTube

FreeCodeCamp

W3c School

And Many Other Site's .

Are You Interested In Making Telegram Bot's ?
Checkout This YouTube Channel - CLICK HERE

Credit Of Writing :-
Google

Hero SVG Animation

Prince Jaiswal — Sun, 20 Mar 2022 06:57:50 +0000

HTML

<head>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700" rel="stylesheet">
</head> 

<div id="load" class="loader active">
     <span class="load">loading</span>
 </div>
<section id="hero" class="hero-section">
    <div id="animated-bg"></div>
    <div id="left-indicator"></div>
    <div id="right-indicator"></div>
    <div class="container hero-section__container">
        <div id="left-block" class="left-block active">
            <div class="text-wrap text-wrap-left">
                <h2 class="lbl-1">Customer alignment for today
                    <span class="yellow">.</span>
                </h2>
            </div>
            <div id="circles"></div>
            <div class="circles-description">
                <p class="lbl-2 desc-left">Your Brand’s Why.</p>
                <p class="lbl-2 desc-right">Your Customer’s Why.</p>
            </div>
            <div class="button-wrap button-wrap-left">
                <div class="button-gradient yellow">
                    <a href="#" class="hero-button">Learn More</a>
                </div>
            </div>
        </div>
        <div id="right-block" class="right-block">
            <div class="logo-wrap logo-wrap-right">
                <svg class="labs-circles" id="labs-circles" width="13px" height="11px" viewBox="0 0 13 11" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink">
                    <style>
                        #left-circle {
                            animation: left-circle 1.5s cubic-bezier(0.57, 0, 0.3, 1) infinite;
                            transform-origin: 20% 50%;
                        }

                        #right-circle {
                            animation: right-circle 1.5s cubic-bezier(0.57, 0, 0.3, 1) 0.05s infinite;
                            transform-origin: 33% 56%;
                        }

                        @keyframes left-circle {
                            0% {
                                transform: rotate(0)
                            }
                            50% {
                                transform: rotate(-180deg)
                            }
                            100% {
                                transform: rotate(0)
                            }
                        }

                        @keyframes right-circle {
                            0% {
                                transform: rotate(0)
                            }
                            50% {
                                transform: rotate(-155deg)
                            }
                            100% {
                                transform: rotate(0)
                            }
                        }
                    </style>
                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <g id="Index_Loop" transform="translate(-1051.000000, -164.000000)">
                            <g id="Top" transform="translate(-1.000000, -7.000000)">
                                <g id="Page-1" transform="translate(1006.000000, 171.000000)">
                                    <g id="Group-2" transform="translate(46.000000, 0.000000)">
                                        <circle id="Oval" fill="#F9B225" cx="3.5" cy="7.5" r="3.5"></circle>
                                        <circle id="left-circle" fill="#F35C55" cx="8" cy="2" r="2"></circle>
                                        <circle id="right-circle" fill="#ED0188" cx="11" cy="7" r="2"></circle>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                </svg>
                <object class="labs-logo" data="https://s3-us-west-1.amazonaws.com/zajno-storage0/rocket-source/labs.svg" type="image/svg+xml"></object>
            </div>
            <div class="text-wrap text-wrap-right">
                <h2 class="lbl-1">Innovation for Tomorrow
                    <span class="red">.</span>
                </h2>
            </div>
            <div id="infinity" class="infinity">
                <div id="trident" class="trident-mask"></div>
                <svg id="mask" width="431" height="195" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <clipPath id="myClip">
                            <rect style="transform: rotate(-45deg); transform-origin: center;" x="207.5" y="83" width="19" height="27" />
                        </clipPath>
                        <clipPath id="y-shape" clipPathUnits="objectBoundingBox">
                            <polygon points=".482558 .3836, .537282 .51000, .502641 .567359, .45700, .46350" />
                        </clipPath>
                        <linearGradient id="SVG" gradientUnits="userSpaceOnUse" x1="2.2678" y1="103.6775" x2="330.9431" y2="94.3244" gradientTransform="matrix(1 0 0 -1 0 192.6)">
                            <stop offset="0" style="stop-color:#F9B224" />
                            <stop offset="0.1468" style="stop-color:#F9B224" />
                            <stop offset="0.6142" style="stop-color:#F35A56" />
                            <stop offset="1" style="stop-color:#ED0288" />
                        </linearGradient>
                    </defs>
                    <rect id="mask-rect" fill="url(#SVG)" x="0" y="0" width="431" height="195" clip-path="url(#myClip)" />
                </svg>
                <div id="loop"></div>
                <object class="infinity-sign" data="https://s3-us-west-1.amazonaws.com/zajno-storage0/rocket-source/infinity.svg" type="image/svg+xml"></object>
            </div>
            <div class="button-wrap button-wrap-right">
                <div class="button-gradient red">
                    <a href="#" class="hero-button">Learn More</a>
                </div>
            </div>
        </div>
</section>

Sass



*
    box-sizing: border-box

html, body
    width: 100%

body,
main
    margin: 0
    overflow-x: hidden

a
    text-decoration: none
    outline: none

section
    position: relative
    background-repeat: no-repeat
    background-position: center
    background-size: cover

.hero-section
    opacity: 0
    z-index: 40
    transition: all 0.6s ease
    &.active
        opacity: 1

.lbl-1 
    color: #f0f0f0
    font-family: "Montserrat"
    font-size: 25px
    font-weight: 500
    line-height: 39px
    color: #fff
    margin: 0
    span
        &.red
            color: #ed0188
        &.yellow
            color: #F9B225

.lbl-2 
    text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.26)
    color: #ffffff
    font-family: "Montserrat"
    font-size: 18px
    font-weight: 600
    line-height: 24px
    margin: 0

.hero-section__container
    width: 1120px
    height: 100%
    margin: 0 auto
    display: flex
    justify-content: space-between
    align-items: flex-start

.hero-section
    width: 100%
    height: 100vh
    overflow: hidden
    &.laptop-ie
        height: 700px

.loader
    width: 100%
    height: 100%
    z-index: 10
    position: absolute
    display: flex
    justify-content: center
    align-items: center
    background-color: #242424
    .load
        color: #ffffff
        font-family: "Montserrat"
        font-size: 15px
        font-weight: 500
        line-height: 39px
        margin: 0
        text-transform: uppercase
        letter-spacing: 10px
        opacity: 0
        animation: bounce 2s ease infinite
        visibility: visible
        transition: visibility 0.3s ease
    &.active 
        .load
            .load
                visibility: hidden

#left-indicator
    width: 50%
    height: 100%
    position: absolute
    left: 0
    top: 0
    z-index: 6

#right-indicator
    width: 50%
    height: 100%
    position: absolute
    right: 0
    top: 0
    z-index: 6

.text-wrap
    position: relative
    text-align: center
    opacity: 0
    &-left
        transform: translateX(76px)
        margin: 0 0 20px 0
        transition: all 0.5s cubic-bezier(0.60, 0.00, 0.20, 1.00) 0.1s
    &-right
        transform: translateX(-76px)
        transition: all 0.5s cubic-bezier(0.60, 0.00, 0.20, 1.00) 0.1s
        margin: 5px 0 36px 0

#circles 
    position: relative
    z-index: 1
    width: 440px
    height: 253px
    svg 
        height: auto !important
        width: initial !important
        position: absolute
        z-index: 1
        left: -18.5%
        top: 0

#labs-circles 
    overflow: visible

.infinity
    position: relative
    display: flex
    justify-content: center
    align-items: center
    transition: all 0.9s ease
    .infinity-sign
        position: absolute
        margin-top: -3px
        filter: grayscale(1)
        transition: filter 0.9s ease

.button-wrap
    text-align: center
    position: relative
    display: flex
    justify-content: center
    &-left
        margin-top: 52px
    &-right 
        margin-top: 97px

.button-gradient
    width: 137px
    height: 44px
    border-radius: 57px
    padding: 1px
    opacity: 0
    z-index: 7
    &.red
        transition: all 0.4s cubic-bezier(0.60, 0.00, 0.20, 1.00) 0.2s
        transform: translateX(-76px)
        background-image: linear-gradient(233deg, #ed0088 0%, #f9b225 100%)
    &.yellow
        transition: all 0.4s cubic-bezier(0.60, 0.00, 0.20, 1.00) 0.2s
        transform: translateX(76px)
        background-image: linear-gradient(-138deg, #F9EB25 0%, #F9B225 100%)
    .hero-button
        position: relative
        color: #ffffff
        width: 137px
        height: 44px
        font-family: "Montserrat"
        font-size: 15px
        font-weight: 400
        display: flex
        justify-content: center
        align-items: center
        background-color: #242424
        width: 100%
        height: 100%
        border-radius: 57px
        transition: all 0.4s linear

.right-block
    text-align: center
    padding-top: 165px
    .logo-wrap
        display: flex
        flex-direction: column
        align-items: center
        transition: all 0.5s cubic-bezier(0.60, 0.00, 0.20, 1.00) 0.1s
        opacity: 0
        transform: translateX(-76px)
        .labs-logo
            position: relative   
        .labs-circles
            position: relative
            margin-bottom: 5px
            svg 
                overflow: visible

@keyframes bounce
    0% 
        opacity: 1
        letter-spacing: 10px
    50% 
        opacity: 0.8
        letter-spacing: 7px
    100%
        opacity: 1
        letter-spacing: 10px

.right-block
    &.active
        .logo-wrap
            opacity: 1
            transform: translateX(0)
        .infinity
            .infinity-sign
                filter: grayscale(0)
        #loop 
            &:before 
                background: #f3655b
            svg 
                path
                    stroke: #000000
        .button-gradient.red
            opacity: 1
            transform: translateX(0)
            .hero-button
                background-color: #000000
        .text-wrap
            transform: translateX(0)
            opacity: 1
        #mask 
            filter: grayscale(0)

.left-block
    position: relative
    padding-top: 218px
    .circles-description
        position: absolute
        display: flex
        justify-content: space-between
        text-align: center
        width: 100%
        left: 0
        bottom: 97px
        z-index: 4
        .desc
            &-left
                opacity: 0
                transition: all 0.3s cubic-bezier(0.80, 0.00, 0.83, 1.00) 0.3s
                transform: translateX(-30px)
                width: 100%
                max-width: 120px
                margin-left: 46px
            &-right
                opacity: 0
                transition: all 0.3s cubic-bezier(0.80, 0.00, 0.83, 1.00) 0.3s
                transform: translateX(30px)
                max-width: 170px
                margin-right: 6%

.left-block
    &.active
        .button-gradient.yellow
            opacity: 1
            transform: translateX(0)
            .hero-button
                    background-color: #000000    
        .text-wrap
            transform: translateX(0)
            opacity: 1
        .circles-description
            .desc
                &-left
                    opacity: 1
                    transform: translateX(0)
                &-right
                    opacity: 1
                    transform: translateX(0)

#animated-bg
    position: absolute
    z-index: 0
    left: 0
    top: 0
    width: 100%
    height: 100%
    display: flex
    justify-content: center
    svg 
        height: auto !important
        width: 101% !important
        position: absolute
        top: 0
        left: 50%
        transform: translateX(-50%) !important

#mask 
    position: absolute
    filter: grayscale(1)
    transition: filter 0.4s linear 0.1s
    z-index: 3
    margin-left: 0px

#loop 
    position: relative
    z-index: 2
    svg 
        width: auto !important
        height: auto !important
        path
            transition: stroke 0.4s linear 0.1s
            stroke: #242424
            stroke-width: 22

// FIREFOX
#infinity.ff 
    #mask 
        margin-left: 2px
        #mask-rect 
            clip-path: polygon(48.2558% 76px, 53.7282% 51.1256%, 50.2641% 57.1359%, 196px 46.4487%) !important
    .infinity-sign
        margin-top: -5px

#infinity.ff-old 
    .infinity-sign
        top: 0
        left: 0
        margin-top: 0px
    #mask 
        top: 0
        left: 0
        #mask-rect 
            clip-path: url(#y-shape)
// END FIREFOX
#mask 
    visibility: hidden

// INTERNET EXPLORER && EDGE
.trident-mask 
    position: absolute
    top: 50%
    left: 50%
    width: 15px
    transform: translate(-50%, -50%) rotate(-45deg)
    height: 40px
    z-index: 3
    margin-left: 2px
    background-image: linear-gradient(to bottom, #f46052 0%, #f24762 100%)
    display: none
    opacity: 0

#infinity 
    &.ie 
        display: block
        .infinity-sign 
            margin-top: 5px
            top: 0
            left: 0
        #mask 
            opacity: 0
        .trident-mask
            opacity: 1
            display: block
    &.edge
        display: block
        #mask 
            display: none
        #loop 
            display: none 
        .infinity-sign 
            position: relative
            top: 0
            left: 0

#right-block
    &.ie 
        .button-wrap-right
            margin-top: 133px
    &.edge 
        .button-wrap-right
            margin-top: 133px

#left-block
    &.ie 
        .circles-description 
            bottom: 67px
            position: relative
        .button-wrap-left
            margin-top: 0
    &.edge 
        .circles-description 
            bottom: 67px
            position: relative
            .button-wrap-left
                margin-top: 0

// END EXPLORER && EDGE


@media all and(min-width: 1800px)
    .hero-section__container
        width: 1350px

@media all and(max-width: 1700px)
    #circles 
        width: 415px
        svg 
            height: auto !important
            width: initial !important
            position: absolute
            z-index: 1
            left: -24.5%
            top: 0

@media all and(max-width: 1680px)
    #animated-bg svg
        height: auto !important
        width: 101% !important

@media all and(max-width: 1480px)
    #circles 
        width: 415px
        svg 
            height: auto !important
            width: initial !important
            position: absolute
            z-index: 1
            left: -24.5%
            top: 0
    .left-block .circles-description 
        .desc-left 
            margin-left: 32px
        .desc-right

@media all and(max-width: 1400px)
    #mask 
        margin-left: 0px
    .trident-mask 
        width: 14px

@media all and(max-width: 1330px)
    #circles 
        width: 100%
        svg 
            width: 500px !important
            left: -15.5%

@media all and(max-width: 1200px)
    .hero-section__container
        justify-content: space-around
    .left-block 
        padding-top: 168px
    .right-block
        padding-top: 115px


@media all and(max-width: 1120px)
    .hero-section__container
        width: 100%
        padding: 0 15px

@media all and(max-width: 1024px)
    #mask
        margin-left: 0px
    .right-block 
        padding-top: 85px
    .left-block 
        padding-top: 138px
    .hero-section 
        height: 1400px
    #animated-bg svg 
        width: 1900px !important
        position: absolute
        top: 0
        left: 50%
        top: 50%
        transform: translateX(-50%) translateY(-50%) rotate(90deg)
    .hero-section__container
        flex-direction: column
        align-items: center
    #left-indicator 
        width: 100%
        height: 50%
        left: 0
        top: 0
    #right-indicator
        height: 50%
        width: 100%
        left: 0
        bottom: 0
        top: inherit

@media all and(max-width: 768px)
    #animated-bg svg 
        width: 1500px !important

@media all and(max-width: 480px)
    #animated-bg svg 
        width: 1030px !important
    .hero-section 
        height: 1000px
    .left-block 
        padding-top: 58px
    .text-wrap-left
        margin: 0
    #circles 
        display: flex
        justify-content: center
        svg 
            width: 350px !important
            left: 0
            position: relative
    #loop svg 
        width: 300px !important
    .infinity .infinity-sign
        width: 300px
        margin-top: -2px
    .button-wrap-right 
        margin-top: 30px
    #mask defs #myClip rect 
        transform: rotate(-45deg) translateX(3px) !important
        width: 13px

@media (max-width: 320px)
    #mask 
        margin-left: -2px

JavaScript

// Detect Browsers
const isFirefox = typeof InstallTrigger !== 'undefined';
const detectFFVersion = window.navigator.userAgent.match(/Firefox\/([0-9]+)\./);
const targetVersion = detectFFVersion ? parseInt(detectFFVersion[1]) : 0;
const isIE = /*@cc_on!@*/false || !!document.documentMode;
const isEdge = !isIE && !!window.StyleMedia;

//DOM elements
const heroSection = document.getElementById("hero");
const infinityBlock = document.getElementById('infinity');
const rightBlock = document.getElementById('right-block');
const leftBlock = document.getElementById('left-block');
const leftIndicator = document.getElementById('left-indicator');
const rightIndicator = document.getElementById('right-indicator');

let rectangle = document.getElementById('mask');

if (isFirefox) {
    if (targetVersion > 57) {
        infinityBlock.classList.add('ff');
    } else {
        infinityBlock.classList.add('ff-old');
    }
}

if (isIE) {
    rectangle = document.getElementById('trident');
    infinityBlock.classList.add('ie');
    leftBlock.classList.add('ie');
    rightBlock.classList.add('ie')
    if (window.innerWidth < 1400) {
        heroSection.classList.add('laptop-ie')
    }
}

if (isEdge) {
    infinityBlock.classList.add('edge');
    leftBlock.classList.add('edge');
    rightBlock.classList.add('edge')
}

//Detect touchable device
const isTouchDevice = 'ontouchstart' in document.documentElement;

//Lottie animations variables https://github.com/airbnb/lottie-web
var circles;
var bg;
var loopAnim;

//Timers
let timerIn;
let timerOut;

//Flags
let isRight = false;
let isLeft = true;
let isCircleHalf = false;
let isBgHalf = false;
let isLoopHalf = false;


// Animation params
let circlesParams = {
    container: document.getElementById('circles'),
    renderer: 'svg',
    loop: false,
    autoplay: false,
    path: 'https://s3-us-west-1.amazonaws.com/zajno-storage0/rocket-source/circles.json'
};

let bgParams = {
    container: document.getElementById('animated-bg'),
    renderer: 'svg',
    loop: false,
    autoplay: false,
    path: 'https://s3-us-west-1.amazonaws.com/zajno-storage0/rocket-source/bg.json'
};

let loopParams = {
    container: document.getElementById('loop'),
    renderer: 'svg',
    loop: false,
    autoplay: false,
    path: 'https://s3-us-west-1.amazonaws.com/zajno-storage0/rocket-source/loop.json'
};

//Init animations
circles = lottie.loadAnimation(circlesParams);
bg = lottie.loadAnimation(bgParams);
loopAnim = lottie.loadAnimation(loopParams);

//Get animations total frames
var firstFrame = 0;
var totalFramesCircles;
var totalFramesBg;
var totalFramesLoop;

// loader element
const loader = document.getElementById('load');

// on animation frames load get total frames
circles.addEventListener('DOMLoaded', function () {
    totalFramesCircles = circles.totalFrames;
    loader.classList.remove('active')
    heroSection.classList.add('active')
})

bg.addEventListener('DOMLoaded', function () {
    totalFramesBg = bg.totalFrames;
})

loopAnim.addEventListener('DOMLoaded', function () {
    totalFramesLoop = loopAnim.totalFrames;
})

// Add eventLinsteners
if (!isTouchDevice) {
    addListener(leftIndicator, 'mouseenter', playLeftBlockAnimation)
    addListener(rightIndicator, 'mouseenter', playRightBlockAnimation)
} else {
    addListener(leftIndicator, 'touchstart', playLeftBlockAnimation)
    addListener(rightIndicator, 'touchstart', playRightBlockAnimation)
}

function addListener(element, eventName, action) {
    element.addEventListener(eventName, function () {
        action()
    });
}

//Animation play functions
function playCircleAnimation() {
    if (!isCircleHalf) {
        circles.playSegments([firstFrame, totalFramesCircles / 2], true);
        isCircleHalf = true;
    } else {
        circles.playSegments([totalFramesCircles / 2, totalFramesCircles], true);
        isCircleHalf = false;
    }
}

function playBgAnimation() {
    if (!isBgHalf) {
        bg.playSegments([firstFrame, totalFramesBg / 2], true);
        isBgHalf = true;
    } else {
        bg.playSegments([totalFramesBg / 2, totalFramesBg], true);
        isBgHalf = false;
    }
}

function playLoopAnimation() {
    if (!isBgHalf) {
        loopAnim.playSegments([firstFrame, totalFramesLoop / 2], true);
        showRectangle()
        isLoopHalf = true;
    } else {
        loopAnim.playSegments([totalFramesLoop / 2, totalFramesLoop], true);
        showRectangle()
        isLoopHalf = false;
    }
}

function showRectangle() {
    clearTimeout(timerIn)
    clearTimeout(timerOut)
    timerIn = setTimeout(function () {
        rectangle.style.zIndex = 2
        timerOut = setTimeout(function () {
            rectangle.style.zIndex = 3
        }, 500);
    }, 500)
}

function playRightBlockAnimation() {
    if (!isRight) {
        rightBlock.classList.add("active");
        leftBlock.classList.remove("active");
        isLeft = false;
        isRight = true;
        playCircleAnimation();
        playLoopAnimation();
        playBgAnimation();
    }
}

function playLeftBlockAnimation() {
    isRight = false
    leftBlock.classList.add("active")
    rightBlock.classList.remove("active")
    if (!isLeft) {
        isLeft = true
        playLoopAnimation();
        playCircleAnimation();
        playBgAnimation();
    }
}

RoadMap To Become Frontend Developer

Prince Jaiswal — Tue, 25 Jan 2022 12:52:48 +0000

Their are so many languages, frameworks, and libraries to choose from, often beginners find themselves scratching their heads on how to start off their development journey. This article aims to help them and provide you the perfect roadmap to becoming the Amazing Front End Developer.

🚀 Let's Get Started :-

Html
Css
JavaScript
Git
Rest API

Html

HTML is the foundation of Front End Web Development. One thing I notice is beginners trying to learn all HTML tags; you DON'T need to know all tags, just remember some important tag's .

🎥 Some Tutorial's To Learn :-

1 . YouTube
2 . CodeCademy
3 . FreeCodeCamp

And So On.....

CSS

Once you learn HTML, you will be able to create a website, but it will definitely look unprofessional. Now it's time to add Design to it using CSS. For starters, you could focus on only the basics:

And This Also Same You Can Learn From :-

1 . YouTube
2 . CodeCademy
3 . FreeCodeCamp

And So on......

JavaScript

Now, you would like to make your website interactive as well. JavaScript is the tool you need.

You Can Learn From w3c School

Git

Whenever we work on a large project, maintaining different versions of the application is a difficult task. We are lucky to have software like Git to sort it out for us.

To Learn Git You Can Prefer It's Documentation .

REST API

When you are working on any real-world application, you would require data from other servers, APIs provide end-points to share data between your application and the various services hosted on the web.

And That's All For Now ....

Their Are Many More Languages , You Can Explore Them At Your Interest 😊

Create Beautiful GitHub Profile ReadMe

Prince Jaiswal — Mon, 24 Jan 2022 05:57:53 +0000

We Will Create Amazing Github Profile ReadMe

Use Can Use The Websites Below To Create Your Github Profile ReadMe :-

1 ) Github Readme Generator

2) Github ReadMe Generator

cyberstain / cyberstain

Hi 👋, I'm Prince Jaiswal

A passionate developer from India .

🔭 I’m currently working on Music Website Made With MERN
🌱 I’m currently learning ReactJS , ExpressJS , MongoDB
👯 I’m looking to collaborate on Website & App
🤝 I’m looking for help with Learning
👨‍💻 All of my projects are available at https://bit.ly/coderui
📝 I regularly write articles on https://dev.to/princejaiswal
💬 Ask me about react,nodejs,expressjs
📫 How to reach me nexhacker@my.com
📄 Know about my experiences https://bit.ly/coderui
⚡ Fun fact Work Smart Not Harder .

Blogs posts

Connect with me:

Languages and Tools:

View on GitHub

Qr Code Maker Made With PhP

Prince Jaiswal — Sun, 23 Jan 2022 12:41:45 +0000

We Will Make A Qr Code Maker

You Can Get The Code On GitHub - https://github.com/cyberstain/qrcode_maker

princejaiswal-coder / qrcode_maker

This Is Made By Php And Used Bootstrap Framework for making it responsive .

qrcode_maker

This Is Made By Php And Used Bootstrap Framework for making it responsive .

And Try To Support Our Work , Here - https://bit.ly/mycofe

And Visit My Portfolio - https://princejaiswal.netlify.com

View on GitHub

My Portfolio Made With ReactJS

Prince Jaiswal — Thu, 20 Jan 2022 13:37:13 +0000

Visit Portfolio

Typing Effect | Css

Prince Jaiswal — Thu, 20 Jan 2022 06:45:50 +0000

In This Blog , You Will Learn To Create Typing Effect In Css 😲 .

Get Ready 🚀

1. Html

<div class="illustration-editor">
  <div class="code-blocks">
    <div class="code code-html">
      <header>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.9999 6.675L13.1999 6.075C12.9999 5.975 12.8999 5.775 12.9999 5.675L13.8999 3.975C14.4999 2.775 13.1999 1.475 11.9999 2.075L10.2999 2.975C10.1999 3.075 9.9999 2.975 9.8999 2.775L9.2999 0.975C8.8999 -0.325 7.0999 -0.325 6.6999 0.975L6.0999 2.775C5.9999 2.975 5.7999 3.075 5.6999 2.975L3.9999 2.075C2.7999 1.475 1.4999 2.775 2.0999 3.975L2.9999 5.675C3.0999 5.775 2.9999 5.975 2.7999 6.075L0.999902 6.675C-0.300098 7.075 -0.300098 8.975 0.999902 9.375L2.7999 9.975C2.9999 9.975 3.0999 10.175 2.9999 10.275L2.0999 11.975C1.4999 13.175 2.7999 14.475 3.9999 13.875L5.6999 12.975C5.8999 12.875 6.0999 12.975 6.0999 13.175L6.6999 14.975C7.0999 16.275 8.9999 16.275 9.3999 14.975L9.9999 13.175C10.0999 12.975 10.2999 12.875 10.3999 12.975L12.0999 13.875C13.2999 14.475 14.5999 13.175 13.9999 11.975L12.9999 10.275C12.8999 10.075 12.9999 9.875 13.1999 9.875L14.9999 9.275C16.2999 8.875 16.2999 7.075 14.9999 6.675ZM7.9999 10.375C6.6999 10.375 5.5999 9.275 5.5999 7.975C5.5999 6.675 6.6999 5.575 7.9999 5.575C9.2999 5.575 10.3999 6.675 10.3999 7.975C10.3999 9.275 9.2999 10.375 7.9999 10.375Z" fill="#4C4F5A"/></svg>
<h1>HTML</h1>
        <svg width="16" height="8" viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.7089 7.65105L14.8704 2.02908C15.1112 1.80937 15.2528 1.51212 15.2528 1.18902C15.2528 0.865913 15.1112 0.56866 14.8704 0.348951C14.6296 0.129241 14.3038 0 13.9497 0C13.5956 0 13.2698 0.129241 13.029 0.348951L7.75989 5.1567L2.49077 0.348951C2.24998 0.129241 1.9242 0 1.57009 0C1.21598 0 0.890202 0.129241 0.649409 0.336026C0.380287 0.568659 0.252808 0.878837 0.252808 1.18902C0.252808 1.48627 0.380286 1.78352 0.621079 2.02908C2.23581 3.51535 6.42844 7.3538 6.71173 7.6252L6.74006 7.65105C7.24998 8.11632 8.19898 8.11632 8.7089 7.65105Z" fill="#4C4F5A"/></svg>
      </header>
      <div class="code-content">
        <code>
          <span class="c-r">&lt;div</span> <span class="c-y">class</span><span class="c-w">=</span><span class="c-g">"rect"</span><span class="c-r">&gt;&lt;/div&gt;</span></div>
        </code>
      </div>
    </div>
    <div class="code code-css">
      <header>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.9999 6.675L13.1999 6.075C12.9999 5.975 12.8999 5.775 12.9999 5.675L13.8999 3.975C14.4999 2.775 13.1999 1.475 11.9999 2.075L10.2999 2.975C10.1999 3.075 9.9999 2.975 9.8999 2.775L9.2999 0.975C8.8999 -0.325 7.0999 -0.325 6.6999 0.975L6.0999 2.775C5.9999 2.975 5.7999 3.075 5.6999 2.975L3.9999 2.075C2.7999 1.475 1.4999 2.775 2.0999 3.975L2.9999 5.675C3.0999 5.775 2.9999 5.975 2.7999 6.075L0.999902 6.675C-0.300098 7.075 -0.300098 8.975 0.999902 9.375L2.7999 9.975C2.9999 9.975 3.0999 10.175 2.9999 10.275L2.0999 11.975C1.4999 13.175 2.7999 14.475 3.9999 13.875L5.6999 12.975C5.8999 12.875 6.0999 12.975 6.0999 13.175L6.6999 14.975C7.0999 16.275 8.9999 16.275 9.3999 14.975L9.9999 13.175C10.0999 12.975 10.2999 12.875 10.3999 12.975L12.0999 13.875C13.2999 14.475 14.5999 13.175 13.9999 11.975L12.9999 10.275C12.8999 10.075 12.9999 9.875 13.1999 9.875L14.9999 9.275C16.2999 8.875 16.2999 7.075 14.9999 6.675ZM7.9999 10.375C6.6999 10.375 5.5999 9.275 5.5999 7.975C5.5999 6.675 6.6999 5.575 7.9999 5.575C9.2999 5.575 10.3999 6.675 10.3999 7.975C10.3999 9.275 9.2999 10.375 7.9999 10.375Z" fill="#4C4F5A"/></svg>
<h1>CSS</h1>
        <svg width="16" height="8" viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.7089 7.65105L14.8704 2.02908C15.1112 1.80937 15.2528 1.51212 15.2528 1.18902C15.2528 0.865913 15.1112 0.56866 14.8704 0.348951C14.6296 0.129241 14.3038 0 13.9497 0C13.5956 0 13.2698 0.129241 13.029 0.348951L7.75989 5.1567L2.49077 0.348951C2.24998 0.129241 1.9242 0 1.57009 0C1.21598 0 0.890202 0.129241 0.649409 0.336026C0.380287 0.568659 0.252808 0.878837 0.252808 1.18902C0.252808 1.48627 0.380286 1.78352 0.621079 2.02908C2.23581 3.51535 6.42844 7.3538 6.71173 7.6252L6.74006 7.65105C7.24998 8.11632 8.19898 8.11632 8.7089 7.65105Z" fill="#4C4F5A"/></svg>
      </header>
      <div class="code-content">
        <code>
          <p class="line-1"><span class="c-y">.rect</span> <span>{</span></p><br/><p class="line-2"><span class="c-p">background</span><span>:</span> <span class="c-y">linear-gradient</span>( </p><br/><p class="line-3"><span class="c-o">-119deg</span>,</p><br/><p class="line-4"><span class="c-y">$gray</span> <span class="c-o">0%</span>,</p><br/><p class="line-5"><span class="c-y">$dark-gray</span> <span class="c-o">100%</span>);}</p>
        </code>
      </div>
    </div>
    <div class="code code-js">
      <header>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.9999 6.675L13.1999 6.075C12.9999 5.975 12.8999 5.775 12.9999 5.675L13.8999 3.975C14.4999 2.775 13.1999 1.475 11.9999 2.075L10.2999 2.975C10.1999 3.075 9.9999 2.975 9.8999 2.775L9.2999 0.975C8.8999 -0.325 7.0999 -0.325 6.6999 0.975L6.0999 2.775C5.9999 2.975 5.7999 3.075 5.6999 2.975L3.9999 2.075C2.7999 1.475 1.4999 2.775 2.0999 3.975L2.9999 5.675C3.0999 5.775 2.9999 5.975 2.7999 6.075L0.999902 6.675C-0.300098 7.075 -0.300098 8.975 0.999902 9.375L2.7999 9.975C2.9999 9.975 3.0999 10.175 2.9999 10.275L2.0999 11.975C1.4999 13.175 2.7999 14.475 3.9999 13.875L5.6999 12.975C5.8999 12.875 6.0999 12.975 6.0999 13.175L6.6999 14.975C7.0999 16.275 8.9999 16.275 9.3999 14.975L9.9999 13.175C10.0999 12.975 10.2999 12.875 10.3999 12.975L12.0999 13.875C13.2999 14.475 14.5999 13.175 13.9999 11.975L12.9999 10.275C12.8999 10.075 12.9999 9.875 13.1999 9.875L14.9999 9.275C16.2999 8.875 16.2999 7.075 14.9999 6.675ZM7.9999 10.375C6.6999 10.375 5.5999 9.275 5.5999 7.975C5.5999 6.675 6.6999 5.575 7.9999 5.575C9.2999 5.575 10.3999 6.675 10.3999 7.975C10.3999 9.275 9.2999 10.375 7.9999 10.375Z" fill="#4C4F5A"/></svg>
<h1>JS</h1>
        <svg width="16" height="8" viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.7089 7.65105L14.8704 2.02908C15.1112 1.80937 15.2528 1.51212 15.2528 1.18902C15.2528 0.865913 15.1112 0.56866 14.8704 0.348951C14.6296 0.129241 14.3038 0 13.9497 0C13.5956 0 13.2698 0.129241 13.029 0.348951L7.75989 5.1567L2.49077 0.348951C2.24998 0.129241 1.9242 0 1.57009 0C1.21598 0 0.890202 0.129241 0.649409 0.336026C0.380287 0.568659 0.252808 0.878837 0.252808 1.18902C0.252808 1.48627 0.380286 1.78352 0.621079 2.02908C2.23581 3.51535 6.42844 7.3538 6.71173 7.6252L6.74006 7.65105C7.24998 8.11632 8.19898 8.11632 8.7089 7.65105Z" fill="#4C4F5A"/></svg>
      </header>
      <div class="code-content">
        <code>
          <span class="c-y">var</span> <span class="c-b">colors</span> = [<span class="c-g">“#74B087”</span>, <span class="c-g">“#DE7300”</span>, <span class="c-g">“#74B087”</span>];<br/><br/>
          <span class="c-c">// Do the thing</span><br/>
          <span class="c-y">function</span> <span class="c-b">animate</span>() {}
        </code>
    </div>
  </div>
  <div class="editor-block"></div>
</div>

2. Css

html, body {
  height: 95%;
}

body {
  background: linear-gradient(135deg, #000111 0%, #000000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.illustration-editor {
  margin-top: -2rem;
  margin-right: -10rem;
  display: grid;
  grid-template-rows: 24px auto;
  justify-items: center;
  position: relative;
}

.code {
  position: absolute;
  width: 290px;
  height: 145px;
  background: #1D1E22;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  z-index: 5;
}
.code header {
  display: grid;
  grid-template-columns: 36px auto 36px;
  align-items: center;
}
.code header svg {
  margin: 10px;
}
.code header h1 {
  font-family: Lato, sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1.57px;
  color: #C5C8D4;
  margin: 0;
}
.code-html {
  left: -100px;
  top: 40px;
}
.code-css {
  left: -25px;
  top: 200px;
}
.code-js {
  left: -175px;
  top: 360px;
}
.code .code-content {
  margin: 0 10px 10px;
  color: white;
}
.code .code-content .c-r {
  color: #A88038;
}
.code .code-content .c-o {
  color: #DE7300;
}
.code .code-content .c-y {
  color: #E1CA72;
}
.code .code-content .c-g {
  color: #74B087;
}
.code .code-content .c-p {
  color: #9F8198;
}
.code .code-content .c-b {
  color: #7A99AD;
}
.code .code-content .c-c {
  color: #666666;
}
.code-css .code-content code .line-1 {
  width: 0%;
  margin: 0;
  border-right: 0.15em solid transparent;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}
.code-css .code-content code .line-2 {
  width: 0%;
  margin: 0;
  border-right: 0.15em solid transparent;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}
.code-css .code-content code .line-3 {
  width: 0%;
  margin: 0;
  border-right: 0.15em solid transparent;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}
.code-css .code-content code .line-4 {
  width: 0%;
  margin: 0;
  border-right: 0.15em solid transparent;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}
.code-css .code-content code .line-5 {
  width: 0%;
  margin: 0;
  border-right: 0.15em solid transparent;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}
.code-css .code-content code .line-1 {
  animation: typing-1 3s 0s steps(30, end) forwards, cursor 1s linear 0s 3;
}
.code-css .code-content code .line-2 {
  animation: typing-2 3s 3s steps(30, end) forwards, cursor 1s linear 3s 3;
}
.code-css .code-content code .line-3 {
  animation: typing-3 3s 6s steps(30, end) forwards, cursor 1s linear 6s 3;
}
.code-css .code-content code .line-4 {
  animation: typing-4 3s 9s steps(30, end) forwards, cursor 1s linear 9s 3;
}
.code-css .code-content code .line-1, .code-css .code-content code .line-3, .code-css .code-content code .line-4 {
  animation-duration: 1s;
  animation-timing-function: steps(10, end);
}
.code-css .code-content code .line-5 {
  border-color: transparent;
  animation: typing-5 3s 12s steps(30, end) forwards, cursor-persist 1s linear 12s infinite;
}
.code-css .code-content code .line-2 {
  margin-left: 2rem;
}
.code-css .code-content code .line-3, .code-css .code-content code .line-4, .code-css .code-content code .line-5 {
  margin-left: 4rem;
}

.editor-block {
  position: relative;
  display: block;
  width: 500px;
  height: 421px;
  background: linear-gradient(109.61deg, #4C4F5A 4.26%, #202125 84.84%);
  border-radius: 10px;
}

@keyframes typing-1 {
  from {
    width: 0;
  }
  to {
    width: 60px;
  }
}
@keyframes typing-2 {
  from {
    width: 0;
  }
  to {
    width: 220px;
  }
}
@keyframes typing-3 {
  from {
    width: 0;
  }
  to {
    width: 70px;
  }
}
@keyframes typing-4 {
  from {
    width: 0;
  }
  to {
    width: 75px;
  }
}
@keyframes typing-5 {
  from {
    width: 0;
  }
  to {
    width: 141px;
  }
}
@keyframes cursor {
  from, to, 20%, 80% {
    border-color: transparent;
  }
  25%, 75% {
    border-color: white;
  }
}
@keyframes cursor-persist {
  from, 45% {
    border-color: transparent;
  }
  50%, to {
    border-color: white;
  }
}

And Your Code Will Look Like This 👇

GLASSMORPHISM CREDIT CARD

Prince Jaiswal — Wed, 19 Jan 2022 11:28:15 +0000

GLASSMORPHISM CREDIT CARD

Responsive: no

Dependencies Used :jquery.js

See Here Is The Code </>

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="box">


  <div class="mdl">
  <div class="circles">
    <div class="circle circle-1"></div>
    <div class="circle circle-2"></div>
  </div>  
      <h1 class="title">
        Please enter your credit card <br>details below
      </h1>

    <div class="card">

      <form>
        <div class="logo">
          <?xml version="1.0" encoding="UTF-8"?>
          <svg width="48px" height="48px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <title>Group</title>
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g id="Group" fill="#FFFFFF">
                <circle id="Oval" cx="16" cy="16" r="16"></circle>
                <circle id="Oval" cx="16" cy="48" r="16"></circle>
                <circle id="Oval" cx="48" cy="16" r="16"></circle>
                <circle id="Oval" cx="48" cy="48" r="16"></circle>
              </g>
            </g>
          </svg>

        </div>
        <div class="card-number">
          <label>Card Number</label>
          <input id="card-number" placeholder="1234 1234 1234 1234" type="text" required maxlength="19">
          <span class="underline"></span>

        </div>
        <br>
        <div class="group">
          <div class="card-name">
            <label>Card Holder</label>
            <input id="card-name" placeholder="ISRAEL ISRAELI" type="text" required>
            <span class="underline"></span>

          </div>
          <div class="expiration-date">
            <label>Exp. Date</label>
            <input id="card-exp" placeholder="10/25" type="text" maxlength="5" required>
            <span class="underline"></span>

          </div>
          <div class="ccv">
            <label>CCV</label>
            <input id="card-ccv" placeholder="123" type="text" maxlength="3" required>
            <span class="underline"></span>
          </div>

        </div>
      </form>
    </div>
  </div>

</div>

And Here Goes Css Styling

body{
  display: block;
  position: center;
    font-family: 'Space Mono', monospace;
    background-color: rgb(240, 244, 247);
  background: linear-gradient(-70deg,  #202020, #000000);
  height: 100vh;

}



/* .box {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

}  */



/* Background circles start */
.circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(120deg, #1D976C, #2c3e50);
}
.circles {
  position: absolute;
  height: 270px;
  width: 450px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.circle-1 {
  height: 300px;
  width: 300px;
  top: 100px;
  left: -50px;
  opacity: 0.8;
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-iteration-count: infinite;
  animation-name: float;
  -webkit-animation-name: float;
  animation-duration: 6s;
  -webkit-animation-duration: 6s;
  -webkit-animation-delay: 3.5s;
  animation-delay: 3.5s;
  animation-direction: alternate;

}

.circle-2 {
  height: 240px;
  width: 240px;
  bottom: 40px;
  right: -100px;
  opacity: 0.8;
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-iteration-count: infinite;
  animation-name: float;
  -webkit-animation-name: float;
  animation-duration: 6s;
  -webkit-animation-duration: 6s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  animation-direction: alternate;
}
/* Background circles end */





/* ANIMATIONS */
@keyframes explode {
 0% { opacity: 1; }
 100% { transform: scale(1.2); opacity: 0; }
}
@keyframes float {

  0% {
    -webkit-transform: rotateX(0deg) translateY(0px);
    -moz-transform: rotateX(0deg) translateY(0px);
    -ms-transform: rotateX(0deg) translateY(0px);
    -o-transform: rotateX(0deg) translateY(0px);
    transform: rotateX(0deg) translateY(0px);
    }

  50% {
    -webkit-transform: rotateX(0deg) translateY(1px) translateX(5px);
    -moz-transform: rotateX(0deg) translateY(10px) translateX(5px);
    -ms-transform: rotateX(0deg) translateY(30px) translateX(5px);
    -o-transform: rotateX(0deg) translateY(40px) translateX(5px);
    transform: rotateX(0deg) translateY(10px) translateX(5px);
}
  100% {
    -webkit-transform: rotateX(0deg) translateY(0px) translateX(1px);
    -moz-transform: rotateX(0deg) translateY(0px) translateX(1px);
    -ms-transform: rotateX(0deg) translateY(0px) translateX(1px);
    -o-transform: rotateX(0deg) translateY(0px) translateX(1px);
    transform: rotateX(0deg) translateY(0px) translateX(1px);
  }

}

.mdl{
  height: auto;
  width: 420px;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-60%,-60%);

}

h1{

  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 300;
  padding-left: 30px;
  padding-bottom: 20px;
  color: #ffffff;
  width: 420px;
  line-height: 1.5em;
  text-align: left;
}

.card {
  height: 260px;
  width: 420px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  padding: 30px 30px 30px 30px;
  overflow: hidden;

}

.logo{
  padding-bottom: 40px;
  opacity: 0.9;
}



input[id="card-number"]{
  font-size: 30px;
  font-family: 'Space Mono', monospace;
  width: 100%;
  height: 50px;
}

input[id="card-number"]::placeholder{
  color: #b5b5b5;
  font-size: 30px;
  font-family: 'Space Mono', monospace;
}

input::placeholder{
  color: #b5b5b5;
  font-family: 'Space Mono', monospace;
}



.group{
  display: inline-flex;
  margin: 0;
  padding: 0;

}

.card-number              { 
  position:relative; 
   display: inline-block;
  overflow: hidden;
  margin-bottom:30px; 


}

.card-number > input[id="card-number"]{
  border: none;
  margin-bottom: 0px;
  outline: none;
}

.card-name > input[id="card-name"]{
  border: none;
  margin-bottom: 0px;
  outline: none;
}

.card-exp > input[id="card-exp"]{
  border: none;
  margin-bottom: 0px;
  outline: none;
}

.card-ccv > input[id="card-ccv"]{
  border: none;
  margin-bottom: 0px;
  outline: none;
}

.underline{
  transition: all 0.3s;
  display: inline-block;
  bottom: 0;
  left: -100%;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
}

.card-number > input[id="card-number"]:hover + .underline
{
  left: 0; 
}

.card-number > input[id="card-number"]:focus + .underline
{
  left: 0; 
}




.card-name > input[id="card-name"]:hover + .underline{
  left: 0; 
}
.card-name > input[id="card-name"]:focus + .underline{
  left: 0; 
}

.expiration-date > input[id="card-exp"]:hover + .underline{
  left: 0;
}

.expiration-date > input[id="card-exp"]:focus + .underline{
  left: 0;
}

.ccv > input[id="card-ccv"]:hover + .underline{
  left: 0;
}

.ccv > input[id="card-ccv"]:focus + .underline{
  left: 0;
}

.card-name{ 
  font-family: 'Space Mono', monospace;
padding: 0px 80px  0px 0px;
  margin-right: 40px;
  width: 100px;
  position:relative; 
   display: inline-block;
  overflow: hidden;
}

.expiration-date{
  font-family: 'Space Mono', monospace;
 padding: 0px 0px 0px 0px; 
  margin-right: 60px;
  width: 80px;
  position:relative; 
   display: inline-block;
  overflow: hidden;
}

.ccv{
  font-family: 'Space Mono', monospace;
 padding: 0px 0px 0px 0px; 
  margin-right: 0px;
  width: 60px;
  position:relative; 
   display: inline-block;
  overflow: hidden;
}




input {
  font-family: 'Space Mono', monospace;
  border: none;
  font-size: 16px;
  height: 26px;
  color: #ffffff;
  background: 0;
  padding 0;
  width 0;
}

input:focus{ 
  border-bottom: 2px solid white;
  outline: none;
  font-family: 'Space Mono', monospace;
  border: none;
  color: white;
  font-size: 16px;
  height: 30px;
  margin-bottom: -2px;
}

input:hover{
  border-bottom: 2px solid white;
  font-family: 'Space Mono', monospace;
  color: white;
  margin-bottom: -2px;
  font-size: 16px;
  height: 30px;
}





input[id="card-number"]:focus
{
  border: none;
  border-bottom: 2px solid white;
  color: white;
  font-size: 30px;
  height: 50px;
  margin-bottom: -2px;
  width: 400px;
}

input[id="card-number"]:hover
{
  border: none;
  border-bottom: 2px solid white;
  color: white;
  font-size: 30px;
  height: 50px;
  margin-bottom: -2px;
  width: 400px;
}




input[id="card-name"]{
  color: white;
  margin-bottom: -2px;
  font-size: 16px;
  height: 26px;
  width: 160px;
}

input[id="card-name"]:hover{
  border-bottom: 2px solid white;
  color: white;
  margin-bottom: -2px;
  font-size: 16px;
  height: 26px;
  width: 160px;
}

input[id="card-name"]:focus{
  border-bottom: 2px solid white;
  color: white;
  margin-bottom: -2px;
  font-size: 16px;
  height: 26px;
  width: 160px;
}

input[id="card-exp"]:hover{
  border-bottom: 2px solid white;
  color: white;
  margin-bottom: -2px;
  font-size: 16px;
  height: 26px;
  width: 80px;
}

input[id="card-exp"]:focus{
  border-bottom: 2px solid white;
  color: white;
  margin-bottom: -2px;
  font-size: 16px;
  height: 26px;
  width: 80px;
}

input[id="card-ccv"]:hover{
  border-bottom: 2px solid white;
  color: white;
  margin-bottom: -2px;
  font-size: 16px;
  height: 26px;
  width: 50px;

}

input[id="card-ccv"]:focus{
  border-bottom: 2px solid white;
  color: white;
  margin-bottom: -2px;
  font-size: 16px;
  height: 26px;
  width: 50px;

}


label {
  color: white; 
  font-size:12px;
  font-weight:normal;
  font-family: 'Space Mono', monospace;
  pointer-events:none;
  display: block;
  padding-bottom: 2px;

}

And The Working Part Javascript


/* Card Number Spacing */

$('#card-number').on('keypress change blur', function () {
  $(this).val(function (index, value) {
    return value.replace(/[^a-z0-9]+/gi, '').replace(/(.{4})/g, '$1 ');
  });
});

$('#card-number').on('copy cut paste', function () {
  setTimeout(function () {
    $('#card-number').trigger("change");
  });
});


/* Exp. Date Slash */

$('#card-exp').on('input',function(){
    var curLength = $(this).val().length;
    if(curLength === 2){
       var newInput = $(this).val();
        newInput += '/';
        $(this).val(newInput);
    }


});

// var characterCount
// $('#card-exp').on('input',function(e){
//     if($(this).val().length == 2 && characterCount < $(this).val().length) {
//         $(this).val($(this).val()+'/');
//     }
//     characterCount = $(this).val().length
// });

Thank You , Follow For More Code & Projects

Website Scraper | NodeJS

Prince Jaiswal — Tue, 18 Jan 2022 06:12:15 +0000

Download a website by it's url .

Requirements

To download all the resources from a website, we are going to use the website-scraper module . This module allows you to download an entire website (or single webpages) to a local directory (including all the resources css, images, js, fonts etc.)

Install the module in your project executing the following command in the terminal:

npm install website-scraper

Note

Dynamic websites (where content is loaded by js) may be saved not correctly because website-scraper doesn't execute js, it only parses http responses for html and css files.

1. Download a single page

The scrape function returns a Promise that makes requests to all the providen urls and saves all files found with sources to directory. The resources will be organized into folders according to the type of resources (css, images or scripts) inside the providen directory path. The following script will download the homepage of the node.js website:

const scrape = require('website-scraper');

let options = {
    urls: ['https://nodejs.org/'],
    directory: './node-homepage',
};

scrape(options).then((result) => {
    console.log("Website succesfully downloaded");
}).catch((err) => {
    console.log("An error ocurred", err);
});

Save the previous script in a js file (script.js) and then execute it with node using node index.js. Once the script finishes, the content of the node-homepage folder will be:

And the index.html file from a web browser will look like:

All the scripts, style sheets were downloaded and the website works like a charm. Notice that the only error shown in the console, is due to the analytics script from Google that you should obviously remove from the code manually.

2. Download multiple pages

If you're downloading multiple pages of a website, you should provide them simultaneously in the same script, scraper is smart enough to know that a resource shouldn't be downloaded twice (but only if the resource has been already downloaded from the same website in another page) and it will download all the markup files but not the resources that already exist.

In this example, we are going to download 3 pages of the node.js website (index, about and blog) specified in the urls property. The content will be saved in the node-website folder (where the script is executed), if it doesn't exists it will be created. To be more organized, we are going to sort out every type of resources manually in different folders respectively (images, javascript, css and fonts). The sources property specifies with an array of objects to load, specifies selectors and attribute values to select files for loading.

This script is useful if you want specifically some web pages:

const scrape = require('website-scraper');

scrape({
    urls: [
        'https://nodejs.org/', // Will be saved with default filename 'index.html'
        {
            url: 'http://nodejs.org/about',
            filename: 'about.html'
        },
        {
            url: 'http://blog.nodejs.org/',
            filename: 'blog.html'
        }
    ],
    directory: './node-website',
    subdirectories: [
        {
            directory: 'img',
            extensions: ['.jpg', '.png', '.svg']
        },
        {
            directory: 'js',
            extensions: ['.js']
        },
        {
            directory: 'css',
            extensions: ['.css']
        },
        {
            directory: 'fonts',
            extensions: ['.woff','.ttf']
        }
    ],
    sources: [
        {
            selector: 'img',
            attr: 'src'
        },
        {
            selector: 'link[rel="stylesheet"]',
            attr: 'href'
        },
        {
            selector: 'script',
            attr: 'src'
        }
    ]
}).then(function (result) {
    // Outputs HTML 
    // console.log(result);
    console.log("Content succesfully downloaded");
}).catch(function (err) {
    console.log(err);
});

3. Recursive downloads

Imagine that you don't need only specific web pages from a website, but all the pages of it. A way to do it, is to use the previous script and specify manually every URL of the website that you can get to download it, however this can be counterproductive because it will take a lot of time and you will probably overlook some URLs. That's why Scraper offers the recursive download feature that allows you to follow all the links from a page and the links from that page and so on. Obviously, that would lead to a very very long (and almost infinite) loop that you can limit with the max allowed depth (maxDepth property):

const scrape = require('website-scraper');

let options = {
    urls: ['https://nodejs.org/'],
    directory: './node-homepage',
    // Enable recursive download
    recursive: true,
    // Follow only the links from the first page (index)
    // then the links from other pages won't be followed
    maxDepth: 1
};

scrape(options).then((result) => {
    console.log("Webpages succesfully downloaded");
}).catch((err) => {
    console.log("An error ocurred", err);
});

The previous script should download more pages:

Filter external URLs

As expected in any kind of website, there will be external URLs that don't belong to the website that you want to copy. To prevent that those pages are downloaded too, you can filter it only if the URL matches with the one you use:

const scrape = require('website-scraper');

const websiteUrl = 'https://nodejs.org';

let options = {
    urls: [websiteUrl],
    directory: './node-homepage',
    // Enable recursive download
    recursive: true,
    // Follow only the links from the first page (index)
    // then the links from other pages won't be followed
    maxDepth: 1,
    urlFilter: function(url){

        // If url contains the domain of the website, then continue:
        // https://nodejs.org with https://nodejs.org/en/example.html
        if(url.indexOf(websiteUrl) === 0){
            console.log(`URL ${url} matches ${websiteUrl}`);
            return true;
        }

        return false;
    },
};

scrape(options).then((result) => {
    console.log("Webpages succesfully downloaded");
}).catch((err) => {
    console.log("An error ocurred", err);
});

That should decrease in our example the number of downloaded pages:

4. Download an entire website

Note : This task require much time, so be patient.

If you want to download an entire website, you can use the recursive download module and increase the max allowed depth to a reasonable number (in this example not so reasonable with 50, but whatever):

// Downloads all the crawlable files of example.com.
// The files are saved in the same structure as the structure of the website, by using the `bySiteStructure` filenameGenerator.
// Links to other websites are filtered out by the urlFilter
const scrape = require('website-scraper');
const websiteUrl = 'https://nodejs.org/';

scrape({
    urls: [websiteUrl],
    urlFilter: function (url) {
        return url.indexOf(websiteUrl) === 0;
    },
    recursive: true,
    maxDepth: 50,
    prettifyUrls: true,
    filenameGenerator: 'bySiteStructure',
    directory: './node-website'
}).then((data) => {
    console.log("Entire website succesfully downloaded");
}).catch((err) => {
    console.log("An error ocurred", err);
});

Top 3 Colour Picker Websites , Must Try For Your Project .

Prince Jaiswal — Mon, 17 Jan 2022 15:03:51 +0000

Top 3 Colour Picker Websites , Must Try For Your Project .

So , The First One Goes .

1) Grabient.com

2) GradientHunt.com

3) GradientHunt By ShapeFactory

DEV Community: Prince Jaiswal

How To Learn Python In Just 100 Days 🤔

Why To Learn Python 😒 ?

Is Their Any Scope For Job ?

You Can Apply For :-

Is Python Suitable For Beginner In Programming Language ?

From Where Can I Learn Python ?

You Can Try Some FREE Platforms Like :-

Hero SVG Animation

Sass

JavaScript

RoadMap To Become Frontend Developer

🚀 Let's Get Started :-

Table Of Contents

Html

CSS

JavaScript

Git

REST API

Create Beautiful GitHub Profile ReadMe

We Will Create Amazing Github Profile ReadMe

cyberstain / cyberstain

Hi 👋, I'm Prince Jaiswal

A passionate developer from India .

Blogs posts

Connect with me:

Languages and Tools:

Qr Code Maker Made With PhP

We Will Make A Qr Code Maker

princejaiswal-coder / qrcode_maker

This Is Made By Php And Used Bootstrap Framework for making it responsive .

qrcode_maker

My Portfolio Made With ReactJS

Typing Effect | Css

In This Blog , You Will Learn To Create Typing Effect In Css 😲 .

GLASSMORPHISM CREDIT CARD

GLASSMORPHISM CREDIT CARD

And The Working Part Javascript

Website Scraper | NodeJS

Download a website by it's url .

Note

1. Download a single page

2. Download multiple pages

3. Recursive downloads

Filter external URLs

4. Download an entire website

Top 3 Colour Picker Websites , Must Try For Your Project .

Top 3 Colour Picker Websites , Must Try For Your Project .