DEV Community: Arc Coder | Harsh Patel

Custom Animated CSS Switch

Arc Coder | Harsh Patel — Tue, 24 Nov 2020 14:15:22 +0000

Today we are going to learn how to make a custom switch/checkbox made by using HTML and CSS only.

CodePen

HTML Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="index.css" />
        <title>Custom Animated CSS Switch</title>
    </head>
    <body>
        <div class="center">
            <input type="checkbox" name="" id="" />
        </div>
    </body>
</html>

CSS Code

body {
    margin: 0;
    padding: 0;
    background: #f3f3f3;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

input[type="checkbox"] {
    position: relative;
    width: 80px;
    height: 40px;
    -webkit-appearance: none;
    background: #c6c6c6;
    outline: none;
    cursor: pointer;
    border-radius: 20px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    transition: background 300ms linear;
}

input:checked[type="checkbox"] {
    background: #03a9f4;
}

input[type="checkbox"]::before {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    top: 0;
    left: 0;
    background: #fff;
    transform: scale(1.1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: left 300ms linear;
}

input:checked[type="checkbox"]::before {
    left: 40px;
}

Real-time JavaScript Clock

Arc Coder | Harsh Patel — Wed, 18 Nov 2020 04:13:08 +0000

Please checkout my YouTube Channel

Today we are going to learn how to make a real-time clock by using vanilla JavaScript and CSS only.

Final Output

CodePen

HTML Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="index.css" />
        <title>Clock UI Design</title>
    </head>
    <body>
        <div id="clock">
            <h2>Time is</h2>
            <div id="time">
                <div>
                    <span id="hours">00</span>
                    <span>Hours</span>
                </div>
                <div>
                    <span id="minutes">00</span>
                    <span>Minutes</span>
                </div>
                <div>
                    <span id="seconds">00</span>
                    <span>Seconds</span>
                </div>
                <div>
                    <span id="phase">AM</span>
                </div>
            </div>
        </div>
        <script src="./index.js"></script>
    </body>
</html>

CSS Code

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

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

#clock h2 {
    position: relative;
    display: block;
    color: #fff;
    text-align: center;
    margin: 10px 0;
    font-weight: 700;
    text-transform: 0.4em;
    font-size: 2em;
}

#clock #time {
    display: flex;
}

#clock #time div {
    position: relative;
    margin: 0 5px;
    -webkit-box-reflect: below 1px linear-gradient(transparent, #0004);
}

#clock #time div span {
    position: relative;
    display: block;
    width: 100px;
    height: 80px;
    background: #2196f3;
    color: #fff;
    font-weight: 300;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em;
    z-index: 10;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

#clock #time div span:nth-child(2) {
    height: 30px;
    font-size: 0.7em;
    letter-spacing: 0.2em;
    font-weight: 500;
    z-index: 9;
    box-shadow: none;
    background: #127fd6;
    text-transform: uppercase;
}

#clock #time div:nth-last-child(2) span {
    background: #ff006a;
}

#clock #time div:nth-last-child(2) span:nth-child(2) {
    background: #ec0062;
}

#clock #time div:nth-last-child(1) span {
    position: absolute;
    bottom: 0;
    width: 60px;
    height: 40px;
    font-size: 1.5em;
    background: #fff;
    color: #000;
    -webkit-box-reflect: below 1px linear-gradient(transparent, #0004);
}

JS Code

function clock() {
    var hours = document.getElementById("hours");
    var minutes = document.getElementById("minutes");
    var seconds = document.getElementById("seconds");
    var phase = document.getElementById("phase");

    var h = new Date().getHours();
    var m = new Date().getMinutes();
    var s = new Date().getSeconds();
    var am = "AM";

    if (h > 12) {
        h = h - 12;
        var am = "PM";
    }

    h = h < 10 ? "0" + h : h;
    m = m < 10 ? "0" + m : m;
    s = s < 10 ? "0" + s : s;

    hours.innerHTML = h;
    minutes.innerHTML = m;
    seconds.innerHTML = s;
    phase.innerHTML = am;
}

var interval = setInterval(clock, 1000);

3D Card Effect

Arc Coder | Harsh Patel — Mon, 16 Nov 2020 09:33:59 +0000

YouTube Video by me

Today we are going to learn how to make an animated card design by using CSS and JavaScript.

We will be making a Shoe Product Card that would describe its details.

Final Result

CodePen

HTML Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>3d Card Effect</title>
        <link
            href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
            rel="stylesheet"
        />
        <link rel="stylesheet" href="./style.css" />
    </head>
    <body>
        <div class="container">
            <div class="card">
                <div class="sneaker">
                    <div class="circle"></div>
                    <img src="./adidas.png" alt="adidas" />
                </div>
                <div class="info">
                    <h1 class="title">Adidas ZX</h1>
                    <h3>
                        FUTURE-READY TRAINERS WITH WRAPPED BOOST FOR EXCEPTION
                        COMFORT.
                    </h3>
                    <div class="sizes">
                        <button>39</button>
                        <button>40</button>
                        <button class="active">42</button>
                        <button>44</button>
                    </div>
                    <div class="purchase">
                        <button>Purchase</button>
                    </div>
                </div>
            </div>
        </div>
        <script src="./app.js"></script>
    </body>
</html>

CSS Code

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Poppins", sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

.container {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    transform-style: preserve-3d;
    min-height: 80vh;
    width: 35rem;
    border-radius: 30px;
    padding: 0rem 5rem;
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0px 0px 50px rgba(0, 0, 0, 0.2);
}

.sneaker {
    min-height: 35vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sneaker img {
    width: 20rem;
    z-index: 2;
    transition: all 0.75s ease-out;
}

.circle {
    width: 15rem;
    height: 15rem;
    background: linear-gradient(
        to right,
        rgba(245, 70, 66, 0.75),
        rgba(8, 83, 156, 0.75)
    );
    position: absolute;
    border-radius: 50%;
    z-index: 1;
}

.info h1 {
    font-size: 3rem;
    transition: all 0.75s ease-out;
}

.info h3 {
    font-size: 1.3rem;
    padding: 2rem 0rem;
    color: #585858;
    font-weight: lighter;
    transition: all 0.75s ease-out;
}

.sizes {
    display: flex;
    justify-content: space-between;
    transition: all 0.75s ease-out;
}

.sizes button {
    padding: 0.5rem 2rem;
    background: none;
    border: none;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
    color: #585858;
}

button.active {
    background: #585858;
    color: white;
}

.purchase {
    margin-top: 5rem;
    transition: all 0.75s ease-out;
}

.purchase button {
    width: 100%;
    padding: 1rem 0rem;
    background: #f54642;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 30px;
    font-weight: bolder;
    outline: none;
}

JavaScript Code

//Movement Animation to happen
const card = document.querySelector(".card");
const container = document.querySelector(".container");

//Items
const title = document.querySelector(".title");
const sneaker = document.querySelector(".sneaker img");
const purchase = document.querySelector(".purchase");
const description = document.querySelector(".info h3");
const sizes = document.querySelector(".sizes");

//Moving Animation Event
container.addEventListener("mousemove", (e) => {
    let xAxis = (window.innerWidth / 2 - e.pageX) / 25;
    let yAxis = (window.innerHeight / 2 - e.pageY) / 25;
    card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
});

//Animate In
container.addEventListener("mouseenter", (e) => {
    card.style.transition = "none";

    //Popout
    title.style.transform = "translateZ(150px)";
    sneaker.style.transform = "translateZ(200px) rotateZ(-15deg)";
    description.style.transform = "translateZ(125px)";
    sizes.style.transform = "translateZ(100px)";
    purchase.style.transform = "translateZ(75px)";
});

//Animate Out
container.addEventListener("mouseleave", (e) => {
    card.style.transition = "all 0.5s ease";
    card.style.transform = `rotateY(0deg) rotateX(0deg)`;

    //Popback
    title.style.transform = "translateZ(0px)";
    sneaker.style.transform = "translateZ(0px) rotateZ(0deg)";
    description.style.transform = "translateZ(0px)";
    sizes.style.transform = "translateZ(0px)";
    purchase.style.transform = "translateZ(0px)";
});

Light Neumorphic Cards with CSS

Arc Coder | Harsh Patel — Sun, 15 Nov 2020 05:28:07 +0000

YouTube Video by me

Today we are going to learn how to make animated Neumorphic Cards by using CSS.

We would be using just CSS and HTML to animate the cards.

Final Outcome

CodePen

HTML Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="index.css">
        <title>CSS Light Neumorphic Cards</title>
    </head>
    <body>
        <div class="container">
            <div class="card">
                <div class="box">
                    <div class="content">
                        <h2>01</h2>
                        <h3>Card One</h3>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing
                            elit. Dolorum exercitationem explicabo, quae eaque
                            fuga quia adipisci quo? Corporis, in nihil.
                        </p>
                        <a href="#">Read More</a>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="box">
                    <div class="content">
                        <h2>02</h2>
                        <h3>Card Two</h3>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing
                            elit. Dolorum exercitationem explicabo, quae eaque
                            fuga quia adipisci quo? Corporis, in nihil.
                        </p>
                        <a href="#">Read More</a>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="box">
                    <div class="content">
                        <h2>03</h2>
                        <h3>Card Three</h3>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing
                            elit. Dolorum exercitationem explicabo, quae eaque
                            fuga quia adipisci quo? Corporis, in nihil.
                        </p>
                        <a href="#">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS Code

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap");

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

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

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    flex-wrap: wrap;
    padding: 40px 0;
}

.container .card {
    position: relative;
    width: 320px;
    height: 440px;
    box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.05),
                inset -5px -5px 5px rgba(255, 255, 255, 0.5),
                5px 5px 5px rgba(0, 0, 0, 0.05),
                -5px -5px 5px rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    margin: 30px;
    cursor: pointer;
}

.container .card .box {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    background: #ebf5fc;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    transition: transform 500ms linear,
                box-shadow 500ms linear,
                background 500ms linear;
}

.container .card:hover .box {
    transform: translateY(-50px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    background: linear-gradient(45deg, #b95ce4, #4f29cd);
}

.container .card .box .content {
    padding: 20px;
    text-align: center;
}

.container .card .box .content h2 {
    position: absolute;
    top: -10px;
    right: 30px;
    font-size: 8em;
    color: rgba(0, 0, 0, 0.02);
    transition: color 500ms linear;
}

.container .card:hover .box .content h2 {
    color: rgba(0, 0, 0, 0.05);
}

.container .card .box .content h3 {
    font-size: 1.8em;
    color: #777;
    z-index: 1;
    transition: color 500ms linear;
}

.container .card .box .content p {
    font-size: 1em;
    font-weight: 300;
    color: #777;
    z-index: 1;
    transition: color 500ms linear;
}

.container .card:hover .box .content h3,
.container .card:hover .box .content p {
    color: #fff;
}

.container .card .box .content a {
    position: relative;
    display: inline-block;
    padding: 8px 20px;
    background: #03a9f4;
    margin-top: 15px;
    border-radius: 20px;
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.container .card:hover .box .content a {
    background: #ff568f;
}

@media only screen and (max-width: 1140px) {
    .container {
        flex-direction: column;
    }
}

Fluid CSS Gallery

Arc Coder | Harsh Patel — Thu, 12 Nov 2020 07:09:20 +0000

YouTube Video by me

Today we're going to learn how to implement the fluid image gallery where the column of the gallery is responsive according to the height of the image.

Here we would be using CSS Flex to achieve responsiveness.

We would be using 3 columns for the widescreen and one column for the smaller screen.

Final Outcome

Codepen

HTML Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="index.css">
        <title>Fluid CSS Gallery</title>
    </head>
    <body>
        <div class="row">
            <div class="column">
                <img
                    src="https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt=""
                />

                <img
                    src="https://images.pexels.com/photos/38867/pexels-photo-38867.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt=""
                />

                <img
                    src="https://images.pexels.com/photos/406014/pexels-photo-406014.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt=""
                />

                <img
                    src="https://images.pexels.com/photos/1378849/pexels-photo-1378849.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt=""
                />
            </div>
            <div class="column">
                <img
                    src="https://images.pexels.com/photos/1389994/pexels-photo-1389994.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt=""
                />

                <img
                    src="https://images.pexels.com/photos/1254140/pexels-photo-1254140.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt=""
                />

                <img
                    src="https://images.pexels.com/photos/320014/pexels-photo-320014.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt=""
                />
            </div>
            <div class="column">
                <img
                    src="https://images.pexels.com/photos/39317/chihuahua-dog-puppy-cute-39317.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt=""
                />

                <img
                    src="https://images.pexels.com/photos/1805164/pexels-photo-1805164.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt=""
                />

                <img
                    src="https://images.pexels.com/photos/1452717/pexels-photo-1452717.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt=""
                />

                <img
                    src="https://images.pexels.com/photos/129634/pexels-photo-129634.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                    alt=""
                />
            </div>
        </div>
    </body>
</html>

CSS Code

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

.column {
    flex: 25%;
    max-width: 33.3%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
    filter: grayscale(1) brightness(0.5);
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s linear;
}

.column img:hover {
    filter: grayscale(0);
}

@media screen and (max-width: 800px) {
    .column {
        flex: 100%;
        max-width: 100%;
    }
    .column img {
        filter: grayscale(0) brightness(1);
    }
}

For Loop in JavaScript / ReactJS

Arc Coder | Harsh Patel — Tue, 10 Nov 2020 06:05:01 +0000

A for loop can not be used directly in the JSX block. So we can not use it inside the return block.

So we have to make a function for that. The function can either be it the main functional block or the custom function made inside the main function. Here I've used the main App function block only.

export default function App() {
    const items = [];

    for (var i = 0; i < 20; i = i + 3) {
        const itemsArr = [];
        for (var j = i; j < i + 3; j++) {
            itemsArr.push(<span>{j}</span>);
        }
        items.push(<div>{itemsArr}</div>);
    }

    return items;
}

Top 6 YouTube channels to learn programming

Arc Coder | Harsh Patel — Wed, 04 Nov 2020 14:35:32 +0000