Accueil
code source
tutoriels

Créer une calculatrice moderne en JavaScript

Coding Team



Salut les lecteurs et aujourd'hui pour ce nouveau tutoriel on va créer un calculatrice moderne avec HTML-CSS-JavaScript. Allons y...

Le code source et le démo du projet sont disponnible en bas du page.

Code HTML


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator UI -Neumorphism</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">   

    <link rel="stylesheet" href="css/white_css.css">
</head>
<body>

<div class="container">
    <div class="iphone-x">
        <div class="screen">
            <div class="notch">
                <div class="sound"></div>
                <div class="camera"></div>
            </div>
            <div class="time" id="time">
                <script>
                    var time = document.getElementById('time').innerHTML;
                    var today = new Date();
                    var time = today.getHours() + ":" + today.getMinutes();
                    time = document.write(time);
                </script>
            </div>
            <div class="battery">
                <i class="fa fa-battery-full"></i>
            </div>
            <div class="wifi">
                <i class="fa fa-wifi"></i>
            </div>

            <div class="top-nav"></div>

            <form class="calculator container">
                <input type="text" placeholder="0" name="displayResult" class="area"/>

                <div class="key container" id="keyBoard">

                    <div class="first-col"></div>

                    <div class="second-col">
                        <div class="button"><button type="button" name="" value="AC" class="btn-work" onclick="displayResult.value=' '">AC</button></div>
                        <div class="button"><button type="button" name="" value="7" onclick="calcNumbers(this.value)">7</button></div>
                        <div class="button"><button type="button" name="" value="4" onclick="calcNumbers(this.value)">4</button></div>
                        <div class="button"><button type="button" name="" value="1" onclick="calcNumbers(this.value)">1</button></div>
                        <div class="button"><button type="button" name="" value="0" onclick="calcNumbers(this.value)">0</button></div>
                    </div>
                    <div class="third-col">
                        <div class="button"><button type="button" name="" value="+/-"  onclick="makeNegative(displayResult.value)" class="btn-work">+/-</button></div>
                        <div class="button"><button type="button" name="" value="8" onclick="calcNumbers(this.value)">8</button></div>
                        <div class="button"><button type="button" name="" value="5" onclick="calcNumbers(this.value)">5</button></div>
                        <div class="button"><button type="button" name="" value="2" onclick="calcNumbers(this.value)">2</button></div>
                        <div class="button"><button type="button" name="" value="." onclick="calcNumbers(this.value)" class="btn-work">.</button></div>
                    </div>
                    <div class="fourth-col">
                        <div class="button"><button type="button" name="" value="%"  onclick="calcNumbers(this.value)" class="btn-work"><i class="fa fa-percent"></i></button></div>
                        <div class="button"><button type="button" name="" value="9" onclick="calcNumbers(this.value)">9</button></div>
                        <div class="button"><button type="button" name="" value="6" onclick="calcNumbers(this.value)">6</button></div>
                        <div class="button"><button type="button" name="" value="3" onclick="calcNumbers(this.value)">3</button></div>
                        <div class="button"><button type="button" name="" value="+" onclick="calcNumbers(this.value)" class="btn-work"><i class="fa fa-plus"></i></button></div>
                    </div>
                    <div class="fifth-col">
                        <div class="button"><button type="button" name="" value="/"  onclick="calcNumbers(this.value)" class="btn-work"><i class="fa fa-divide"></i></button></div>
                        <div class="button"><button type="button" name="" value="*" onclick="calcNumbers(this.value)" class="btn-work"><i class="fa fa-times"></i></button></div>
                        <div class="button"><button type="button" name="" value="-" onclick="calcNumbers(this.value)" class="btn-work"><i class="fa fa-minus"></i></button></div>

                        <div class="button"><button type="button" name="" value="=" onclick="(displayResult.value.includes('%'))?percentage(displayResult.value):displayResult.value=eval(displayResult.value);" class="btn-equal">=</button></div>
                    </div>

                    <div class="menu"><i class="fa fa-bars"></i></div>
                    <div class="home"><i class="fa fa-home"></i></div>
                    <div class="back"><i class="fa fa-step-backward"></i></div>

                </div>
            </form>

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

<script>

function calcNumbers(result)
{
    document.querySelector('.area').value += result;
}
function percentage(result)
{
    var result1 = String(result);
    if(result1.includes("%"))
    {
        var a, b , percent;
        var splitWord = [];
        a = Number(splitWord[0]);
        b = Number(splitWord[1]);
        percent = (a/100 * b);
        document.querySelector('.area').value = percent;
    }
}
function makeNegative(result)
{
    if(result.charAt(0)=='_')
    {
        document.querySelector('.area').value = result.replace('-','');
    }
    else
    {
        document.querySelector('.area').value = '-' + result;
    }
}
</script>
    
</body>
</html>

Code CSS


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

:root
{
   
    --BxSi:6px 6px 8px rgba(13, 39, 80, 0.25),
        -6px -6px 10px #fff,
        inset -8px -8px 12px rgba(255,255,255,0.7),
        inset 5px 5px 8px rgba(13,39,80,0.2);

    --PSD-3d:7px 7px 15px #45566754,
        -8px -8px 15px #5165790a,
         inset -5px -4px 13px 0px #51657959,
         inset 6px 7px 12px 0px #fffffff0; 
    --BxS:4px 4px 8px rgba(13, 39,80,0.25),
          -4px 4px 8px #fff; 
    --hoverS:-3px -3px 7px #a0a0a032,
         3px 3px 5px rgba(94, 104, 121, 0.417);             

    

}
/***  ***/
* 
{
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
}
body
{
    background: #e8eaec;
}
.iphone-x
{
    margin-top: 20px;
}
.iphone-x .screen
{
    width: 42%;
    height: 625px;
    margin: 0 auto;
    min-width: 310px;
    max-width: 310px;
    border-radius: 44px;

    background: #e8eaec;
    padding: 10px;
    box-shadow:var(--PSD-3d);
}
.screen .notch
{
    width: 159px;
    height: 30px;
    margin: 0px auto;
   /* background: #e8eaece1;*/
    border-bottom-right-radius: 15px;
    border-bottom-left-radius:15px ;
}
.sound
{
    top: 10px;
    left: 54px;
    width: 40px;
    height: 6px;
    position: relative;
    background: #222;
    border-radius: 10px;
}
.camera
{
    top: 2px;
    left: 110px;
    width: 10px;
    height: 10px;
    position: relative;
    background: #222;
    border-radius: 100px;
}
.time
{
    color: #000;

    width: 60px;
    font-size: 11px;
    margin-top: -22px;
    background: transparent;
    margin-left: 18px;
}
.battery
{
    margin-top:-20px;
}
.battery i
{
    color: rgba(0,0,0,0.548);
    
    margin-left: 230px !important;
}
.wifi
{
    margin-top: -22px !important;
    margin-left: 260px;
}
.wifi i
{
    color: rgb(0,0,0);
    margin-top: -20px;
}
.top-nav
{
    width: 100%;
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    background: transparent;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}
.area
{
    min-width: 50% !important;
    width: 93% !important;
    min-height: 120px !important;
    margin-left: -5px;
    margin-top: -5px;
    font-size: 30px !important;
    text-align: center;
    text-align: right;
    overflow: scroll;
    outline: none;
    border: none;
    font-weight: bold;
    color:#0b254e;
    background:#e8eaec;
    border-radius: 10px;
    padding: 12px;
    box-shadow:var(--BxSi);

}
.calculator
{
    margin: 0;
    box-sizing: content-box;
}
.key
{
    float:  left !important;
    font-size: 15pt;
    display: flex !important;
    margin: -5%;
    margin-left: auto !important;
    margin-right: auto !important;
}
.first-col,
.second-col,
.third-col,
.fourth-col,
.fifth-col
{
    padding: 10px;
    white-space: wrap;
    margin: -9.5px;
    display: inline-block;
    margin-top: 20px !important;
    justify-content: space-between !important;
}
.button
{
    display: block;
    padding-left: 40px;
    min-height: 40px;
    padding-right: 30px;
    white-space: wrap;
    word-wrap: break-word;
    margin-top: 20px;
    justify-content: space-between !important;
}
button
{
    position: relative;
    margin-left: -54px !important;
    min-width: 45px;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0px;
    background: transparent;
    color: #c2c3c3 !important;
    border: none !important;
    border-radius: 10px !important;
    height: 45px;
    outline: none;
    font-weight:  bold !important;
    font-size: 14pt !important;
    box-shadow: var(--BxS);
}
.btn-work
{
    color:#0b254e !important;
}
.btn-equal
{
    color:#0b254e !important;
    height: 120px !important;
}
button:focus
{
    cursor: pointer;
    outline: none !important;
    border: none !important;

}
button:active
{
    box-shadow:var(--hoverS);
    outline: none !important;
    border: none !important;
}
button:hover
{
    color: #696a6a !important;
}
.btn-work:hover,
.btn-equal:hover
{
    color:#0b254e !important;
}
.home
{
    margin-top: 382px;
    margin-left: 72px;
    font-size: 30px;
    cursor: pointer;
    color: #0b254e;
}
.menu
{
    margin-top: 392px;
    margin-left: -275px;
    font-size: 20px;
    cursor: pointer;
    color: #0b254e;
}
.back
{
    margin-top: 392px;
    margin-left: 75px;
    font-size: 20px;
    cursor: pointer;
    color: #0b254e;
}

Démonstration

See the Pen Calculatrice UI (Coding Team) by Coding™ (@Mr-roober) on CodePen.

Enregistrer un commentaire

N'hésitez pas de mentionner votre nom d'utilisateur Telegram à la fin de votre message pour recevoir des cadeaux de la part des modérateurs. Merci de commenter