Javascript İle Hesap Makinası Yapımı

Javascript ile hesap makinası yapmanın mantığını detaylıca inceliyor olacağız.

Javascript İle Hesap Makinası Yapımı

Javascript hesap makinası yapımı en kolay ve basit örneklerden birisidir. Bu örneği çok kısa kodlama ile nasıl gerçekleştirebiliriz bunu anlatmak istiyorum. Bu uygulamayı üç adımda gerçekleştireceğiz. HTML, CSS ve JAVASCRIPT kodlarından oluşacak bu uygulamamızı aşama aşama inceleyelim.

HTML Kodlarının Oluşturulması

İlk olarak bir HTML iskeleti oluşturuyoruz. Bu iskelete sonrasında CSS ve JS kodlarını ekleyerek işlevsellik kazanmasını sağlayacağız. İşlem yapacağımız sayıları ve matematiksel işaretleri button ile oluşturuyoruz.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hesap Makinesi</title>
</head>
<body>
    <div class="calculator">
        <div class="display">
            <input class="input" type="text" disabled>
        </div>
        <div class="keys">
            <button class="operator" value="+">+</button>
            <button class="operator" value="-">-</button>
            <button class="operator" value="*">*</button>
            <button class="operator" value="/">/</button>
            <button value="7">7</button>
            <button value="8">8</button>
            <button value="9">9</button>
            <button value="4">4</button>
            <button value="5">5</button>
            <button value="6">6</button>
            <button value="1">1</button>
            <button value="2">2</button>
            <button value="3">3</button>
            <button value="0">0</button>
            <button class="clear" value="clear">C</button>
            <button class="equal" value="=">=</button>
        </div>
    </div>
</body>
</html>

Yukarıdaki gibi HTML kodlarını oluşturduktan sonra şimdi sıra bu HTML yapısını şekillendirmeye geliyor.

CSS Kodlarının Oluşturulması

Hazırladığımız hesap makinasının güzel görünmesini istiyoruz. Aynı zamanda mobilden girildiğinde de güzel bir görünüme sahip olmasını istiyoruz. Bunun için aşağıdaki gibi bir kodlama gerçekleştiriyoruz.

<style>
    body{margin:0;padding:0;font-family:Arial,sans-serif}
    .calculator{width:370px;margin:50px auto;background-color:#212121;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,0.2);display:flex;flex-direction:column}
    .display{background-color:#424242;border-radius:10px 10px 0 0;padding:20px;text-align:right;font-size:36px;color:#fff}
    .input{width:100%;border:none;font-size:36px;color:#fff;background-color:transparent;text-align:right}
    .keys{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:10px;padding:20px}
    .keys button{width:75px;height:75px;font-size:24px;border:none;outline:none;background-color:#fff;color:#212121;cursor:pointer;border-radius:10px;transition:all .2s ease-in-out}
    .keys button:hover{background-color:#FFA500;color:#fff}
    .operator{background-color:#f48fb1}
    .clear{background-color:#ffc107}
    .equal{background-color:#4caf50;border-radius:10px 0 0 10px}
    @media screen and (max-width: 768px) {
        .calculator{width:95%;margin:20px auto;border-radius:0;box-shadow:none}
        .display,.input{font-size:24px}
    }
</style>

Bu kodlalar birlikte şık bir görünüme kavuşmuş oluyor. Şimdi sıra bu hazırladığımı HTML ve CSS yapısına işlevsellik vermeye geliyor. JS kodlarımız da aşağıdaki gibi yapmak yeterli olacaktır.

<script>
    const display = document.querySelector('.input');
    const keys = document.querySelectorAll('button');
    
    keys.forEach(key => {
        key.addEventListener('click', () => {
        if (key.value === '=') {
            display.value = eval(display.value);
        } else if (key.value === 'clear') {
            display.value = '';
        } else {
            display.value += key.value;
        }
        });
    });
</script>

Bu kodlarla birlikte, işlem sonucuna ulaşmış oluyoruz. Bu makalede Javascript hesap makinası uygulamasını başarılı bir şekilde gerçekleştirmiş oluyoruz. Gerekli düzenlemeleri yaparak hesap makinasını dilediğiniz gibi kullanabilirsiniz.

Uygulamanın Tamamı

Üşengeç dostlarım içinde bu uygulamanın tamamını paylaşmak istedim. Bu kodları kopyalayarak direk test edebilirsiniz.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hesap Makinesi</title>
    <style>
        body{margin:0;padding:0;font-family:Arial,sans-serif}
        .calculator{width:370px;margin:50px auto;background-color:#212121;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,0.2);display:flex;flex-direction:column}
        .display{background-color:#424242;border-radius:10px 10px 0 0;padding:20px;text-align:right;font-size:36px;color:#fff}
        .input{width:100%;border:none;font-size:36px;color:#fff;background-color:transparent;text-align:right}
        .keys{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:10px;padding:20px}
        .keys button{width:75px;height:75px;font-size:24px;border:none;outline:none;background-color:#fff;color:#212121;cursor:pointer;border-radius:10px;transition:all .2s ease-in-out}
        .keys button:hover{background-color:#FFA500;color:#fff}
        .operator{background-color:#f48fb1}
        .clear{background-color:#ffc107}
        .equal{background-color:#4caf50;border-radius:10px 0 0 10px}
        @media screen and (max-width: 768px) {
            .calculator{width:95%;margin:20px auto;border-radius:0;box-shadow:none}
            .display,.input{font-size:24px}
        }
    </style>
</head>
<body>
    <div class="calculator">
        <div class="display">
            <input class="input" type="text" disabled>
        </div>
        <div class="keys">
            <button class="operator" value="+">+</button>
            <button class="operator" value="-">-</button>
            <button class="operator" value="*">*</button>
            <button class="operator" value="/">/</button>
            <button value="7">7</button>
            <button value="8">8</button>
            <button value="9">9</button>
            <button value="4">4</button>
            <button value="5">5</button>
            <button value="6">6</button>
            <button value="1">1</button>
            <button value="2">2</button>
            <button value="3">3</button>
            <button value="0">0</button>
            <button class="clear" value="clear">C</button>
            <button class="equal" value="=">=</button>
        </div>
    </div>

    <script>
        const display = document.querySelector('.input');
        const keys = document.querySelectorAll('button');
        
        keys.forEach(key => {
            key.addEventListener('click', () => {
            if (key.value === '=') {
                display.value = eval(display.value);
            } else if (key.value === 'clear') {
                display.value = '';
            } else {
                display.value += key.value;
            }
            });
        });
    </script>
</body>
</html>

Bu örnekle birlikte javascriptte minik bir uygulama geliştirmeyi öğrenmiş oluyorsunuz.

Exit mobile version