Calculator App User interface UI UX Design: HTML CSS and JavaScript @rayen-code

Rayen

Embark on a coding journey as we explore the creation of a sleek and functional calculator using the dynamic trio of HTML, CSS, and JavaScript. Building a calculator isn't just about performing mathematical operations; it's a chance to enhance your coding skills and create a tool that users will find both practical and visually appealing.




Step 1: HTML Markup:

Our journey begins with the foundation – the HTML structure. We set up the essential elements such as buttons for digits, operators, and a display area to showcase the input and results.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator UI Design</title>

    <!----------------- link css -------------------->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    

    <div class="cercle"></div>
    <div class="calculator">
        <div class="display-area">
            <input type="text" name="display" class="display" readonly value="">
        </div>
        <div class="btn-area">
            <div class="buttons">
                <input type="button" value="AC" class="clear">
                <input type="button" value="7" class="input">
                <input type="button" value="4" class="input">
                <input type="button" value="1" class="input">
                <input type="button" value="0" class="input">
            </div>
            <div class="buttons">
                <input type="button" value="DE" class="delete">
                <input type="button" value="8" class="input">
                <input type="button" value="5" class="input">
                <input type="button" value="2" class="input">
                <input type="button" value="00" class="input">
            </div>
            <div class="buttons">
                <input type="button" value="/" class="input operator">
                <input type="button" value="9" class="input">
                <input type="button" value="6" class="input">
                <input type="button" value="3" class="input">
                <input type="button" value="." class="input">
            </div>
            <div class="buttons">
                <input type="button" value="*" class="input operator">
                <input type="button" value="-" class="input operator">
                <input type="button" value="+" class="input operator">
                <input type="button" value="=" class="equal">
                
            </div>
        </div>
    </div>

    <!----------------- link java script -------------------->
    <script src="main.js"></script>
</body>
</html>

Step 2: Styling with CSS:

Let's add some style to our calculator. With CSS, we define the layout, colors. We'll create a clean and modern design that ensures a pleasant user experience.
/*-------------------- CSS --------------------*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

:root {
    --body--bg: #a0d7ff;
    --cercle-bg: #109dff;
}

body {
    min-height: 100vh;
    background: radial-gradient(at 10% 10%, var(--body--bg) 50%, lightskyblue);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.cercle {
    position: absolute;
    width: 500px;
    aspect-ratio: 1;
    background: var(--cercle-bg);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-30%, -50%);
}

.calculator {
    width: 250px;
    height: 500px;
    border-radius: 30px;
    background: linear-gradient(130deg, #fff, #fff3);
    z-index: 2;
    backdrop-filter: blur(15px);
    box-shadow: 50px 50px 200px #0963a1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 10px;
}
.display {
    width: 100%;
    height: 70px;
    border: 0;
    outline: none;
    background: transparent;
    padding: 5px;
    text-align: right;
    font-size: 2rem;
    font-weight: bold;
}

.btn-area {
    display: flex;
    gap: 10px;
}

.buttons {
    display: flex;
    gap: 10px;
    flex-direction: column;
}

.buttons input {
    width: 45px;
    aspect-ratio: 1/1;
    border-radius: 10px;
    border: 0;
    outline: none;
    background: #fff5;
    box-shadow: inset 0 0 7px #fff,
    0 0 20px #0080bb2a;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer;
    transition: 0.13s;
}
.buttons input:hover {
    background: #ffffffb4;
    color: #109dff;
}

.buttons input:active {
    background: #0000;
}

.buttons .clear, 
.buttons .delete {
    color: #7ec9ff;
}

.buttons .equal {
    background: #54b8ff;
    height: 100px;
}

.buttons .operator {
    color: #109dff;
    background: #8aceff;
}

Step 3: Adding JavaScript Interaction:

The magic happens with JavaScript. We'll handle button clicks, perform calculations, and update the display dynamically. Our goal is to create a error-free calculator.
//-------------------- Java Script --------------------//
let display = document.querySelector(".display");
let input = document.querySelectorAll(".input");

input.forEach((inputs) =>{
    inputs.addEventListener("click", ()=>{
        display.value += inputs.value;
    });
});

let clear = document.querySelector(".clear");

clear.addEventListener("click", ()=> {
    display.value = "";
});

let deletes = document.querySelector(".delete");
deletes.addEventListener("click", ()=>{
    display.value = display.value.toString().slice(0, -1)
})


let equal = document.querySelector(".equal");
equal.addEventListener("click", ()=>{
    display.value = eval(display.value);
})

In the conclusion, we wrap up the project, highlighting the key takeaways. Building a calculator isn't just about the code; it's about the problem-solving process, the joy of creating something functional, and the continuous learning journey.

0 Comments