JavaScript’de Basit Hesap Makinesi Yapımı

Ocak 9, 2019Ocak 9, 2019 Emre ÖZTÜRK 0 yorum basit, css, css3, fonksiyon, hesap, hesapmakinesi, html, html5, javascript, js, makinesi, proje, web

Arkadaşlar bu yazımızda HTML, CSS3 ve JavaScript tekonolojilerini kullanarak küçük bir projeyi sizlerele paylaştık. 4 farklı JavaScript fonksiyonu kullanarak basit matematik ve hesap makinesi uygulamasını elde ettik. Aşağıda projemizin kodları paylaştık ve şimdi inceleyelim;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function insert(num) {
            document.form.text.value = document.form.text.value + num;
        }
        function equal() {
            var exp = document.form.text.value;
            if (exp){
                document.form.text.value=eval(exp);
            }
        }
        function c() {
            document.form.text.value="";
        }
        function back() {
            var exp = document.form.text.value;
            document.form.text.value = exp.substring(0,exp.length-1);
        }
    </script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .button{
            width: 50px;
            height: 50px;
            font-size: 25px;
            margin: 2px;
            cursor: pointer;
            background: #698ea0;
            border: none;
            color: white;
        }
        .text{
            width: 208px;
            margin: 5px;
            font-size: 25px;
            padding: 5px;
            border: none;
            color: #698ea0;
        }
        .main{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%)translateY(-50%);
        }
        .bg{
            background: linear-gradient(to right,red,blue);
            height: 700px;
        }
    </style>
</head>
<body>
    <div class="bg">
        <form class="main">

        </form>
    </div>
    <div class="main">
        <h1>TEKNOKAFE.NET CALCULATOR</h1>
        <form name="form" action="">
            <input class="text" name="text" type="text">
        </form>
        <table>
            <tr>
                <td><input class="button" type="button" value="C" onclick="c()"></td>
                <td><input class="button" type="button" value="<" onclick="back()"></td>
                <td><input class="button" type="button" value="/" onclick="insert('/')"></td>
                <td><input class="button" type="button" value="*" onclick="insert('*')"></td>
            </tr>
            <tr>
                <td><input class="button" type="button" value="7" onclick="insert(7)"></td>
                <td><input class="button" type="button" value="8" onclick="insert(8)"></td>
                <td><input class="button" type="button" value="9" onclick="insert(9)"></td>
                <td><input class="button" type="button" value="-" onclick="insert('-')"></td>
            </tr>
            <tr>
                <td><input class="button" type="button" value="4" onclick="insert(4)"></td>
                <td><input class="button" type="button" value="5" onclick="insert(5)"></td>
                <td><input class="button" type="button" value="6" onclick="insert(6)"></td>
                <td><input class="button" type="button" value="+" onclick="insert('+')"></td>
            </tr>
            <tr>
                <td> <input class="button" type="button" value="1" onclick="insert(1)"> </td>
                <td> <input class="button" type="button" value="2" onclick="insert(2)"> </td>
                <td> <input class="button" type="button" value="3" onclick="insert(3)"></td>
                <td rowspan="2"> <input class="button" style="height: 106px" type="button" value="=" onclick="equal('=')"></td>
            </tr>
            <tr>
                <td colspan="2"> <input class="button" style="width: 106px" type="button" value="0" onclick="insert(0)"> </td>
                <td> <input class="button" type="button" value="." onclick="insert('.')"> </td>
            </tr>
        </table>
    </div>
</body>
</html>

100

101

102

<!DOCTYPE html>

<head>

<title>Title</title>

function insert(num) {

document.form.text.value = document.form.text.value + num;

}

function equal() {

var exp = document.form.text.value;

if (exp){

document.form.text.value=eval(exp);

}

function c() {

document.form.text.value="";

}

function back() {

var exp = document.form.text.value;

document.form.text.value = exp.substring(0,exp.length-1);

}

</script>

<style>

margin: 0px;

padding: 0px;

}

.button{

width: 50px;

height: 50px;

font-size: 25px;

margin: 2px;

cursor: pointer;

background: #698ea0;

border: none;

color: white;

}

.text{

width: 208px;

margin: 5px;

font-size: 25px;

padding: 5px;

border: none;

color: #698ea0;

}

.main{

position: absolute;

top: 50%;

left: 50%;

transform: translateX(-50%)translateY(-50%);

}

.bg{

background: linear-gradient(to right,red,blue);

height: 700px;

}

</style>

</head>

<body>

</form>

</div>

<h1>TEKNOKAFE.NET CALCULATOR</h1>

</form>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</body>

</html>

Kodlar basit olup gerekli ekleme veya kafanıza takılan yerlerde yorum yaparak ulaşabilirsiniz. TeknoKafe.Net takip etmeye devam ediniz. Bol kodlu günler…

Bir cevap yazın Cevabı iptal et