ক্যালকুলেটর তৈরি করুন HTML এবং CSS ব্যবহার করে

এখানে একটি ছোট ও সুন্দর ক্যালকুলেটর বানানোর জন্যে কোড দেওয়া আছে। এখানে শুধু সাধারন ভাবে কাঠামো বানানর জন্যে কোড করা আছে। এখানে কোন পোগ্রামিং ল্যাঙ্গুয়েজ যেমন JAVA, JavaScript, PHP, Python, ইত্যাদি ব্যবহার করা হয়নি। হাইস্কুল ছাত্র – ছাত্রীদের জন্যে এই কোড লেখা হয়েছে।

ক্যালকুলেটর তৈরি করার এইচটিএমএল কোডঃ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <table class="table-content">
        <tr>
            <td colspan="3"><input type="text" class="result"></td>
            <td><input type="button" class="btnc" value="c"></td>
        </tr>
        <tr class="tr1">
            <td><input type= "button" class="btn1" value="1"></td>
            <td><input type= "button" class="btn2" value="2"></td>
            <td><input type= "button" class="btn3" value="3"></td>            
            <td><input type= "button" class="btn/" value="/"></td>            
        </tr>
        <tr class="tr2">
            <td><input type= "button" class="btn4" value="4"></td>
            <td><input type= "button" class="btn5" value="5"></td>
            <td><input type= "button" class="btn6" value="6"></td>            
            <td><input type= "button" class="btn*" value="*"></td>            
        </tr>
        <tr class="tr3">
            <td><input type= "button" class="btn7" value="7"></td>
            <td><input type= "button" class="btn8" value="8"></td>
            <td><input type= "button" class="btn9" value="9"></td>            
            <td><input type= "button" class="btn-" value="-"></td>            
        </tr>
        <tr class="tr4">
            <td><input type= "button" class="btn0" value="0"></td>
            <td><input type= "button" class="btn." value="."></td>
            <td><input type= "button" class="btn=" value="="></td>            
            <td><input type= "button" class="btn+" value="+"></td>            
        </tr>

    </table>
</body>
</html>

ক্যালকুলেটর তৈরি করার সিএসএস কোডঃ

/* internal selector */
*{
   
    align-items: center;
    background-color: beige;
    font-size: 1rem;
}

/* tabale border and magen */
table{
    border: 2px solid red; 
    border-top: 5px solid red; 
    border-radius: 0px 0px 10px 10px;  
    margin: auto;
    margin-top: 150px;           
}

/* button style and color */
input[type="button"]{
    width: 100%;
    padding: 20px 20px;
    background-color: blue;
    color: white;
    font-weight: 800;
    border: none;
    border-radius: 5px;
}

/* button hover  */
input[type="button"]:hover{
    background-color: rgb(24, 190, 88);
    color: rgb(248, 33, 202);
}
/* result color and style */
.result{
    width: 83%;   
    background-color: orange;
    padding: 20px 20px;
    border: none;
    border-radius: 5px;
    color: white;
}

/* result hover */
.result:hover{
    background-color: white;
    color: black;
}

গিটহাব লিঙ্ক নিচে দেওয়া হল আপনি চাইলে কোডগুলি ওখান থেকে নিয়ে ব্যবহার করতে পারেন। ক্যালকুলেটর তৈরি করুন HTML এবং CSS ব্যবহার করে খুব সহজে। ধন্যবাদ।