Altın Konu HTML, CSS ve JavaScript (Kaynak Kodu) kullanarak Hesap Makinesi Oluşturun

KERİM ERBAY · 24 Kas 2023

Bu makalede, HTML, CSS ve JavaScript kullanarak, ayrıntılı işlevlere sahip, oldukça etkileşimli ve duyarlı bir Hesap Makinesi tasarlayacağız.

Teknolojide çok yenilikçi olduğumuzu da biliyorsunuz, bunun nedeni de bir programcı olarak işimizde herhangi bir engel bulduğumuzda, herhangi bir alternatif çözümle bu engeli aşmaya çalışmamız.

HTML, CSS ve JavaScript kullanan hesap makinesi
Proje ön izlemesinde her şeyin tek kapta nasıl organize edildiğini görüyorsunuz.

Projemizin özelliği aşağıdadır: -

Üzerinde sayısal ve bazı işlevsel değerler bulunan birkaç düğmeyle birleştirilmiş bir ekrana sahip olduğumuz hesap makinesinin ekteki harika Ui tasarımını gözlemleyebildiğiniz gibi.
İkinci resimde olduğu gibi çarpma fonksiyonlu iki sayı seçtim ve bunu yaptıktan sonra eşittir tuşuna bastığınızda sonuç ön izlemesi yapılacak.

HTML, CSS ve JavaScript kullanan hesap makinesi

Hesap Makinesi İçin Html Kodu: -

HyperText İşaretleme Dili veya HTML, bir web tarayıcısında görüntülenmek üzere tasarlanmış belgeler için standart işaretleme dilidir.

Tüm HTML belgeleri bir belge türü bildirimiyle başlamalıdır: <!DOCTYPE html>.

HTML belgesinin kendisi ile başlar <html> ve ile biter </html>.
HTML belgesinin görünen kısmı <body>ve arasındadır </body>. Gövde etiketinin içinde web sitesinin ana içeriği yer alır.
Burada HTML dosyasının yapısını sıfırdan eklemeyeceğim, sadece gövde kısmını yapıştıracağım, öyle çünkü gövde tarayıcı tasarımımızın ana parçası.

HTML kısmında aşağıdaki kısım var.

Öncelikle Hesap Makinesi projesinin diğer tüm bölümlerini kapsayacak bir çalışmamız var.
Daha sonra birden fazla tuşa sahip div anahtar kelimemiz var. 0'dan 9'a kadar olan her sayı için ve farklı tipte operatörlerin yanı sıra önceki harfi silmek veya tüm harfleri silmek gibi farklı fonksiyon türleri için birçok tuşa ihtiyacımız var.

Aşağıdaki kodu inceleyin ve IDE'nizde veya CSS stili olmadan yalnızca HTML tasarladığınız yerde çalıştırın.,,

HTML:

<html>
    <head>
        href="https://fonts.googleapis.com/css?family=Open+Sans:600,700"
        rel="stylesheet">
        <title>A simple calculator</title>
    </head>
    <body>
        <div id="container">
            <div id="calculator">
                <div id="result">
                    <div id="history"><p id="history-value"></p></div>
                    <div id="output"><p id="output-value"></p></div>
                </div>
                <div id="keyboard">
                    <button class="operator" id="clear">C</button>
                    <button class="operator" id="backspace">CE</button>
                    <button class="operator" id="%">%</button>
                    <button class="operator" id="/">&#247;</button>
                    <button class="number" id="7">7</button>
                    <button class="number" id="8">8</button>
                    <button class="number" id="9">9</button>
                    <button class="operator" id="*">&times;</button>
                    <button class="number" id="4">4</button>
                    <button class="number" id="5">5</button>
                    <button class="number" id="6">6</button>
                    <button class="operator" id="-">-</button>
                    <button class="number" id="1">1</button>
                    <button class="number" id="2">2</button>
                    <button class="number" id="3">3</button>
                    <button class="operator" id="+">+</button>
                    <button class="empty" id="empty"></button>
                    <button class="number" id="0">0</button>
                    <button class="empty" id="empty"></button>
                    <button class="operator" id="=">=</button>
                </div>
            </div>
        </div>
    </body>
</html>

HTML Kod Çıkışı:

Hesap Makinesi için Css Kodu: -

Basamaklı Stil Sayfaları, HTML veya XML gibi bir biçimlendirme dilinde yazılmış bir belgenin sunumunu tanımlamak için kullanılan bir stil sayfası dilidir. CSS, HTML ve JavaScript'in yanı sıra World Wide Web'in temel taşı teknolojisidir.

CSS ile çalışmayı tasarlayıp merkeze getireceğiz ve ardından her bir butonu tasarlayacağız ve çalışmamıza harika bir kenarlık yarıçapı vereceğiz ve sabit genişliği display özelliğine ayarlayacağız.

Aşağıdaki kod sizi daha fazla analiz edecektir . Bu yüzden yarı tamamlanmış HTML dosyanızı ekleyin ve biraz sihir izlemek için bekleyin.

HTML:

body{
font-family: 'Open Sans',sans-serif;
background-color: black;
}
#container{
width: 1000px;
height: 550px;
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3));
margin: 20px auto;
}
#calculator{
width: 320px;
height: 520px;
background-color: #eaedef;
margin: 0 auto;
top: 20px;
position: relative;
border-radius: 50px 0 50px 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#result{
height: 120px;
}
#history{
text-align: right;
height: 20px;
margin: 0 20px;
padding-top: 20px;
font-size: 15px;
color: #000;
}
#output{
text-align: right;
height: 60px;
margin: 10px 20px;
font-size: 30px;
}
#keyboard{
height: 400px;
}
.operator, .number, .empty{
width: 50px;
height: 50px;
margin: 15px;
float: left;
border-radius: 50% 0 50 %;
border-width: 0;
font-weight: bold;
font-size: 15px;
}
.number, .empty{
background-color: #eaedef;
}
.number, .operator{
cursor: pointer;
}
.operator:active, .number:active{
font-size: 13px;
}
.operator:focus, .number:focus, .empty:focus{
outline: 0;
}
button:nth-child(4){
font-size: 20px;
background-color: #20b2aa;
}
button:nth-child(8){
font-size: 20px;
background-color: #ffa500;
}
button:nth-child(12){
font-size: 20px;
background-color: #f08080;
}
button:nth-child(16){
font-size: 20px;
background-color: #7d93e0;
}
button:nth-child(20){
font-size: 20px;
background-color: #ffffff;
}

Adım 1: Hesap makinemizin yazı tipi ailesi, gövde etiketi seçici kullanılarak tanımlanacaktır. Yazı tipi ailesi, font ailesi özelliği kullanılarak açık-sans olarak ayarlanacak ve arka plan rengi, arka plan rengi özelliği kullanılarak siyah olarak ayarlanacaktır.

Stil, kimlik seçici (#container) kullanılarak hesap makinesi kapsayıcımıza eklenecektir. Width ve height özelliklerini kullanarak hesap makinemizin genişlik ve yüksekliğini sırasıyla 1000 piksel ve 550 piksel olarak ayarlayacağız ve hesap makinemize doğrusal bir arka plan kazandırmak için arka plan görüntüsü özelliğini kullanacağız.

Kod:

body{
    font-family: 'Open Sans',sans-serif;
    background-color: black;
}
#container{
    width: 1000px;
    height: 550px;
    background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3));
    margin: 20px auto;   
}

Adım 2: Kimlik seçici (#hesap makinesi) artık hesap makinemize stil uygulamak için kullanılacaktır. Arka plan rengi özelliğini kullanarak açık mavi bir arka plan belirleyip genişliğini ve yüksekliğini sırasıyla 320 piksel ve 520 piksel olarak atayacağız. Ek olarak, hesap makinesinin sol üst ve sağ alt köşelerine 50 piksellik bir kenarlık eklemek için border radius özelliğini kullanacağız. Benzer şekilde klavye butonunu ve sonuç ekranını da şekillendireceğiz. Hesap makinemizin her bileşeni tasarımı alacaktır.

HTML:

#calculator{
    width: 320px;
    height: 520px;
    background-color: #eaedef;
    margin: 0 auto;
    top: 20px;
    position: relative;
    border-radius: 50px 0 50px 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#result{
    height: 120px;
}
#history{
    text-align: right;
    height: 20px;
    margin: 0 20px;
    padding-top: 20px;
    font-size: 15px;
    color: #000;
}
#output{
    text-align: right;
    height: 60px;
    margin: 10px 20px;
    font-size: 30px;
}
#keyboard{
    height: 400px;
}
.operator, .number, .empty{
    width: 50px;
    height: 50px;
    margin: 15px;
    float: left;
    border-radius: 50% 0 50 %;
    border-width: 0;
    font-weight: bold;
    font-size: 15px;
}
.number, .empty{
    background-color: #eaedef;
}
.number, .operator{
    cursor: pointer;
}
.operator:active, .number:active{
    font-size: 13px;
}
.operator:focus, .number:focus, .empty:focus{
    outline: 0;
}
button:nth-child(4){
    font-size: 20px;
    background-color: #20b2aa;
}
button:nth-child(8){
    font-size: 20px;
    background-color: #ffa500;
}
button:nth-child(12){
    font-size: 20px;
    background-color: #f08080;
}
button:nth-child(16){
    font-size: 20px;
    background-color: #7d93e0;
}
button:nth-child(20){
    font-size: 20px;
    background-color: #ffffff;
}

CSS Kodu Çıktısı:

Hesap Makinesi İçin Javascript Kodu: -

Javascript kısmında sihirli mantık ekleyeceğiz, başlangıçta sayfamız yüklendiğinde tek statik hesap makinemiz ön izlenecek ve buton işlevselliği ile çalışmak için bu js dosyasını kullanacağız.

Projemizin canlı bir önizlemesi aşağıda eklenmiştir, bu codepen'e bakın

JavaScript:

function getHistory(){
    return document.getElementById("history-value").innerText;
}
function printHistory(num){
    document.getElementById("history-value").innerText=num;
}
function getOutput(){
    return document.getElementById("output-value").innerText;
}
function printOutput(num){
    if(num==""){
        document.getElementById("output-value").innerText=num;
    }
    else{
        document.getElementById("output-value").innerText=getFormattedNumber(num);
    }   
}
function getFormattedNumber(num){
    if(num=="-"){
        return "";
    }
    var n = Number(num);
    var value = n.toLocaleString("en");
    return value;
}
function reverseNumberFormat(num){
    return Number(num.replace(/,/g,''));
}
var operator = document.getElementsByClassName("operator");
for(var i =0;i<operator.length;i++){
    operator[i].addEventListener('click',function(){
        if(this.id=="clear"){
            printHistory("");
            printOutput("");
        }
        else if(this.id=="backspace"){
            var output=reverseNumberFormat(getOutput()).toString();
            if(output){//if output has a value
                output= output.substr(0,output.length-1);
                printOutput(output);
            }
        }
        else{
            var output=getOutput();
            var history=getHistory();
            if(output==""&&history!=""){
                if(isNaN(history[history.length-1])){
                    history= history.substr(0,history.length-1);
                }
            }
            if(output!="" || history!=""){
                output= output==""?output:reverseNumberFormat(output);
                history=history+output;
                if(this.id=="="){
                    var result=eval(history);
                    printOutput(result);
                    printHistory("");
                }
                else{
                    history=history+this.id;
                    printHistory(history);
                    printOutput("");
                }
            }
        }
        
    });
}
var number = document.getElementsByClassName("number");
for(var i =0;i<number.length;i++){
    number[i].addEventListener('click',function(){
        var output=reverseNumberFormat(getOutput());
        if(output!=NaN){ //if output is a number
            output=output+this.id;
            printOutput(output);
        }
    });
}

Hesap makinesi uygulamamız için javascript'te çeşitli işlevler oluşturacağız. .innerHTML özelliğini kullanarak geçmiş değerini sonuca döndüreceğiz ve ardından gethistory() işlevini kullanarak önceki değeri kullanıcıya yazdıracağız. getformatterNumber(num) fonksiyonunu yarattığımıza benzer şekilde, javascriptimizin içine matematiksel işlemi ekledik ve basit bir hesap makinesinin yaptığı tüm işlemler için fonksiyonu oluşturduk.
Bu blog aracılığıyla… Harika bir UI Duyarlı Hesap Makinesi Projesi HTML CSS JAVASCRIPT'i nasıl tasarlayabileceğimizi öğrendik.

HTML, CSS ve JavaScript kullanan Hesap Makinesinin Nihai Çıktısı: -

Hesap Makinesi Nedir?

Toplama, çarpma, çıkarma, bölme ve daha fazlası gibi temel işlemler için dijital hesap makinesi kullanılır. Bu temel işlevlerin tümü bilgisayar tarafından gerçekleştirilir. Kullanıcılar bu çevrimiçi hesap makinelerinin yardımıyla gerektiğinde karmaşık hesaplamalar yapabilirler.

Hesap makinesinin daha duyarlı olmasını sağlamak için hangi özellik kullanılır?

Hesap makinemize yanıt verme yeteneği kazandırmak için CSS'deki medya sorgusu özelliğini kullanabiliriz; Bunu kullanmak için hesap makinesinin ekran genişliğini belirtmeliyiz ve hesap makinesinin boyutu ekrana göre değişecektir.