Create Wonderful Glassmophism (Transparent) Calculator by this Source Code

Ticker

10/recent/ticker-posts

Create Wonderful Glassmophism (Transparent) Calculator by this Source Code

AK Creative 1/03/2021 04:43:00 PM

Get Transparent Calculator by Programming


HTML Code-

<!DOCTYPE html>

<html lang="en">

<head>

    <link rel="stylesheet" href="style.css">

    <meta charset="UTF-8">

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

    <title>Glassmorphism Calculator</title>

</head>

<body>

    <div class="calc-body">

        <input type="text" name="" id="inp" readonly>

        <table>

            <tr>

                <td>(</td>

                <td>)</td>

                <td>C</td>

                <td>/</td>

            </tr>

            <tr>

                <td>7</td>

                <td>8</td>

                <td>9</td>

                <td>+</td>

            </tr>

            <tr>

                <td>4</td>

                <td>5</td>

                <td>6</td>

                <td>*</td>

            </tr>

            <tr>

                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>-</td>

            </tr>

            <tr>

                <td class="zero">0</td>

                <td>.</td>

                <td>%</td>

                <td class="equal">=</td>

            </tr>

        </table>

    </div>

</body>

<script>

    let screen=document.getElementById('inp');

    let buttons=document.querySelectorAll('td');

    let screenValue='';

    for(item of buttons){

        item.addEventListener('click', (e)=>{

            buttonText=e.target.innerText;

            if(buttonText=="C"){

                screenValue="";

                screen.value=screenValue;

            }

            else if(buttonText=="="){

                screen.value=eval(screenValue);

            }

            else{

                screenValue+=buttonText;

                screen.value=screenValue;

            }

        });

    }

</script>

</html>


CSS Code-

*

{

    font-family: Swis721 BlkOul BT;

color: yellow;

    user-select: none;

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    text-decoration: none;

}

body

{

    justify-content: center;

    align-items: center;

    display: flex;

    min-height: 100vh;

    background: url(https://wallpaperaccess.com/full/17927.jpg);

}

.calc-body

{

    height: 75.5vh;

    width: 24vw;

    background: radial-gradient(at 100% 50%, rgba(0, 0, 100, 0.05), rgba(255, 255, 255, 0.5));

    border-radius: 20px;

}

input

{

    font-size: 45px;

    color: aqua;

    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    height: 100px;

    width: 21vw;

    border: none;

    outline: none;

    background: transparent;

}

table

{

    justify-content: center;

    align-items: center;

    display: flex;

}

td

{

    cursor: pointer;

    font-size: 30px;

    text-align: center;

    height: 70px;

    width: 70px;

border-top: 2px solid rgba(192, 192, 192, 0.2);

    border-right: 2px solid rgba(192, 192, 192, 0.2);

    border-bottom: 2px solid rgba(192, 192, 192, 0.2);

border-left: 2px solid rgba(192, 192, 192, 0.2);

}

td:hover

{

    background-color: rgb(55, 0, 179);

}

.zero

{

    border-bottom-left-radius: 15px;

}

.equal

{

    border-bottom-right-radius: 15px;

}


Transparent Calculator OUTPUT



Post a Comment

31 Comments

  1. Unique KnowJanuary 3, 2021 at 4:44 PM

    Awesome work

    ReplyDelete
  2. AnonymousJanuary 3, 2021 at 5:01 PM

    Wonderful 😊😊

    ReplyDelete
  3. ArzuJanuary 3, 2021 at 5:55 PM

    Wow very Creative

    ReplyDelete
  4. UnknownJanuary 3, 2021 at 5:57 PM

    Wow Guys U R Great

    ReplyDelete
  5. UnknownJanuary 3, 2021 at 6:00 PM

    Awesome

    ReplyDelete
  6. UnknownJanuary 3, 2021 at 6:01 PM

    Kallu
    Very good

    ReplyDelete
  7. UnknownJanuary 3, 2021 at 6:04 PM

    Excellent job

    ReplyDelete
  8. UnknownJanuary 3, 2021 at 6:05 PM

    Very nice

    ReplyDelete
  9. UnknownJanuary 3, 2021 at 6:07 PM

    Awesome

    ReplyDelete
  10. UnknownJanuary 3, 2021 at 6:09 PM

    Wonderful

    ReplyDelete
  11. UnknownJanuary 3, 2021 at 6:16 PM

    Brilliant idea about HTML

    ReplyDelete
  12. UnknownJanuary 3, 2021 at 6:18 PM

    Perfect 👌 👌 👌 👌

    ReplyDelete
  13. UnknownJanuary 3, 2021 at 6:19 PM

    Wonderful Calculator

    ReplyDelete
  14. KritikaJanuary 3, 2021 at 6:23 PM

    Fantastic job

    ReplyDelete
  15. UnknownJanuary 3, 2021 at 6:25 PM

    Wow Good Calculator

    ReplyDelete
  16. UnknownJanuary 3, 2021 at 6:27 PM

    👌 👌 👌 👌 👌 👌

    ReplyDelete
  17. UnknownJanuary 3, 2021 at 6:28 PM

    👌
    Wow
    Good

    ReplyDelete
  18. KKJanuary 3, 2021 at 6:37 PM

    Osm

    ReplyDelete
  19. UnknownJanuary 3, 2021 at 6:38 PM

    Awesome

    ReplyDelete
  20. UnknownJanuary 3, 2021 at 6:39 PM

    Exclusive Work

    ReplyDelete
  21. UnknownJanuary 3, 2021 at 6:42 PM

    Interesting

    ReplyDelete
  22. snehaJanuary 3, 2021 at 6:45 PM

    Wonderful

    ReplyDelete
  23. son aJanuary 3, 2021 at 6:46 PM

    👌 👌 👌 👌 👌 👌

    ReplyDelete
  24. UnknownJanuary 3, 2021 at 6:47 PM

    Fabulous idea with HTML

    ReplyDelete
  25. UnknownJanuary 3, 2021 at 6:49 PM

    Fantastic job

    ReplyDelete
  26. UnknownJanuary 3, 2021 at 6:51 PM

    Perfect 👌

    ReplyDelete
  27. UnknownJanuary 3, 2021 at 6:52 PM

    Wonderful

    ReplyDelete
  28. WonderingJanuary 3, 2021 at 10:34 PM

    wonderful calculator

    ReplyDelete
  29. SuperJanuary 4, 2021 at 11:03 PM

    Super Quality Work

    ReplyDelete
  30. FabulousJanuary 4, 2021 at 11:33 PM

    wonderful calculator

    ReplyDelete
  31. UnknownJanuary 4, 2021 at 11:47 PM

    Superb quality

    ReplyDelete