Neler yeni

JS Calculator

The Kerberos

Forum Yöneticisi
Yönetici
Süper Admin
Basit bir calculator yapımı gerçekleştiricez.Bunun gibi basit ama işlevsel projeler eğer henüz temel seviyede eğitim alıyosanız sizin için çok önemlidir.Çünkü bu basit çalışmalarla çalıştığınız dilin ve algoritma yapısının çalışma mantığını anlarsınız.


HTML:
<!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="style.css">
    <title>Document</title>
</head>
<body>

    <div class="container">
        <input id="result">

        <table class="keys-container" cellpadding="0" >


    

            <tr class="row">
                <td><button id="operator" class="btn" onclick="cleard();">C</button></td>
                <td><button id="operator" class="btn" onclick="del();">Del</button></td>
                <td><button id="operator" class="btn equal" value="=" onclick="equal(value);">=</button></td>
                <td><button id="operator" class="btn" value="/" onclick="dis(value);">*</button></td>

            </tr>



            <tr class="row">

                <td><button id="btn" class="btn" value="7" onclick="dis(value);">7</button></td>
                <td><button id="btn" class="btn" value="8" onclick="dis(value);">8</button></td>
                <td><button id="btn" class="btn" value="9" onclick="dis(value);">9</button></td>
                <td><button id="operator" class="btn" value="+" onclick="dis(value);">+</button></td>
                

            </tr>

            <tr class="row">

                <td><button id="btn" class="btn" value="4" onclick="dis(value);">4</button></td>
                <td><button id="btn" class="btn" value="5" onclick="dis(value);">5</button></td>
                <td><button id="btn" class="btn" value="6" onclick="dis(value);">6</button></td>
                <td><button id="operator" class="btn" value="-" onclick="dis(value);">-</button></td>

            </tr>


            <tr class="row">

                <td><button id="btn" class="btn" value="1" onclick="dis(value);">1</button></td>
                <td><button id="btn" class="btn" value="2" onclick="dis(value);">2</button></td>
                <td><button id="btn" class="btn" value="3" onclick="dis(value);">3</button></td>
                <td><button id="operator" class="btn" value="/" onclick="dis(value);">/</button></td>

            </tr>


            <tr class="row">

                <td colspan="3"><button id="btn" class="btn" value="0" onclick="dis(value);">0</button></td>
                <td><button id="btn" class="btn" value="." onclick="dis(value);">.</button></td>
                

            </tr>


          



        </table>
    </div>
    
    <script src="main.js"></script>
</body>
</html>



CSS:
body{
    box-sizing: border-box;
    margin:0;
    padding:0;
    background-image: linear-gradient(to bottom right, #45565f,  #b8224f);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.container{
    width:480px;
    height:560px;
    align-items: center;
    text-align: center;
    margin:50px auto;

}

#result{
    width:99%;
    border:none;
    border-radius: 4px;
    height:12%;
    background:rgb(77, 72, 72);
    color:white;
    outline:none;
    font-size:20px;
    text-align:right;

}

.keys-container{
    width:100%;
    height:100%;
    margin-top:15px;
}

.row{
    width:100%;
}

.row td{
    border-radius:8px;
    height:20%;
    width:25%;
    margin:15px;
    
}

.btn{
    border:none;
    background: rgb(77, 72, 72);
    color:white;
    font-size:24px;
    width:100%;
    height:100%;
    outline:none;
    border-radius:6px;
    box-shadow:15px 15px 25px #6d6767;
    transition: box-shadow 0.1s linear;
}

.btn:focus{
    box-shadow:1px 1px 1px #6d6767;
}

#operator{
    color:red;
}


JavaScript:
let result = document.getElementById("result");

function dis(number){
    result.value= result.value+number;
}

function equal(op){

    if (op ==="="){
        if (result.value){
            result.value=eval(result.value);
        }
    }
}

function cleard(){
    result.value=""
}

function del(){
    var exp = result.value;
    result.value = exp.substring(0 , exp.length -1);
}

Çıktı:

Ek Açıklama 2020-08-05 231444.png
 

The Kerberos

Forum Yöneticisi
Yönetici
Süper Admin
Elinize sağlık pyhton veri çekme hakkında şeyler ilgi çekebilir Şahsen ben ilgileniyorum başarılar 😀
öncelikle teşekkür ederim , python veri çekme konuları front-ende girmiyor .Ben front-end üzerinden gidiyorum , sizin bahsettiğiniz konular back-end kısmına giriyor.Web olayları baya büyük işler çok fazla dallara ayrılıyor bildiğiniz gibi :)
 
Üst