Bu yazımızda çeşitli örneklerin yardımıyla HTML kullanarak bir hesap makinesi oluşturacağız. Bu makalenin başında HTML'nin temel yönlerini öğreneceğiz. Bundan sonra HTML ile temel bir hesap makinesinin nasıl oluşturulacağını öğreneceğiz.
HTML nedir?
Köprü Metni İşaretleme Dili, bir web tarayıcısında görüntülenmek üzere tasarlanmış belgeler için standart işaretleme dilidir. CSS gibi çeşitli teknolojilerle ve JavaScript, PHP gibi betik dilleriyle birlikte kullanılabilir.
HTML metin tabanlıdır; bir HTML dosyası, onu Notepad++, Notepad ve üstün bir programda vb. açarak kolayca düzenlenebilir. Metin düzenleyici, bir HTML dosyası oluşturmak veya düzenlemek için kullanılabilir. .html dosya uzantısıyla adlandırılır.
Hesap Makinesi Nedir?
A Hesap makinesi toplama, çarpma, çıkarma, bölme gibi çeşitli matematiksel hesaplamaları gerçekleştirebilen elektronik bir cihazdır. Casio Company ilk elektronik hesap makinesini 1957 yılında geliştirdi. Bilgisayarlar, akıllı telefonlar ve tabletlerdeki çeşitli işletim sistemlerinde çalıştırılabilir. Çeşitli geliştirme araçlarının, dillerin yardımıyla bir hesap makinesi oluşturabiliriz.
HTML yardımıyla Hesap Makinesi'nin bazı örneklerini ele alalım.
Örnek 1:
Calculator using HTML Example html { height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #2d3436; background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%); font-family: 'Cookie', cursive; } .title { margin-bottom: 10px; padding: 5px 0; font-size: 40px; font-weight: bold; text-align: center; color: red; font-family: 'Cookie', cursive; } input[type=button] { width: 60px; height: 60px; float: left; padding: 0; margin: 5px; box-sizing: border-box; background: #ecedef; border: none; font-size: 30px; line-height: 30px; border-radius: 50%; font-weight: 700; color: #5E5858; cursor: pointer; } input[type=text] { width: 270px; height: 60px; float: left; padding: 0; box-sizing: border-box; border: none; background: none; color: red; text-align: right; font-weight: 700; font-size: 60px; line-height: 60px; margin: 0 25px; } .calculator { background-color: #c0c0c0; box-shadow: 0px 0px 0px 10px #666; border: 5px solid black; border-radius: 10px; } #display { height: 40px; text-align: right; background-color: black; border: 3px solid white; font-size: 18px; left: 2px; top: 2px; color: red; } .btnTop { color: white; background-color: #6f6f6f; font-size: 14px; margin: auto; width: 50px; height: 25px; } Example of Calculator using HTML <table class="table"> <tr> <td> <br> </td> </tr> <tr> <td> <br> <br> <br> <br> </td> </tr> </table> Açıklama: Yukarıdaki örnekte HTML yardımıyla basit bir hesap makinesi oluşturduk. Bu hesap makinesinin yardımıyla toplama, çıkarma, çarpma, bölme vb. gibi temel hesaplama işlevlerini yapabiliriz.
Bu örneğin çıktısı aşağıdadır:
Örnek 2:
Calculator using HTML Example * { box-sizing: border-box; font-family: 'Roboto', sans-serif; } body { background: black; } .container { width: auto; margin: 20px; color:black; } .calc-body { width: 275px; margin: auto; min-height: 400px; border: solid 1px #3A4655; box-shadow: 0 8px 50px -7px black; } .calc-screen { background: #3A4655; width: 100%; height: 150px; padding: 20px; } .calc-operation { text-align: right; color: #727B86; font-size: 21px; padding-bottom: 10px; border-bottom: dotted 1px; } .calc-typed { margin-top: 20px; font-size: 45px; text-align: right; color: #fff; } .calc-button-row { width: 100%; background: #3C4857; } .button { width: 25%; background: #425062; color: #fff; padding: 20px; display: inline-block; font-size: 25px; text-align: center; vertical-align: middle; margin-right: -4px; border-right: solid 2px #3C4857; border-bottom: solid 2px #3C4857; transition: all 0.2s ease-in-out; } .button.l { color: #AEB3BA; background: #404D5E; } .button.c { color: #D95D4E; background: #404D5E; } .button:hover { background: #E0B612; transform: rotate(5deg); } .button.c:hover { background: #E0B612; color: #fff; } .button.l:hover { background: #E0B612; color: #fff; } .blink-me { color: #E0B612; } html { height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #2d3436; background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%); font-family: 'Cookie', cursive; } .title:hover { background: #E0B612; color: #fff; } .title { margin-bottom: 10px; padding: 5px 0; font-size: 40px; font-weight: bold; text-align: center; color: #AEB3BA; font-family: 'Cookie', cursive; } input[type=button] { width: 60px; height: 60px; float: left; padding: 0; margin: 5px; box-sizing: border-box; background: #ecedef; border: none; font-size: 30px; line-height: 30px; border-radius: 50%; font-weight: 700; color: #5E5858; cursor: pointer; } input[type=text] { width: 270px; height: 60px; float: left; padding: 0; box-sizing: border-box; border: none; background: none; color: red; text-align: right; font-weight: 700; font-size: 60px; line-height: 60px; margin: 0 25px; } .calculator { background-color: #c0c0c0; box-shadow: 0px 0px 0px 10px #666; border: 5px solid black; border-radius: 10px; } 25 + 10 = 35 <span> _ </span> C ? % / 7 8 9 x 4 5 6 ? 1 2 3 + . 0 <= < pre> <p> <strong>Explanation:</strong> In the above example, we have created a basic calculator with the help of HTML. With the help of this calculator, we can do an essential calculation function such as addition, subtraction, multiplication, division, etc.</p> <p> <strong>Following is the output of this example:</strong> </p> <img src="//techcodeview.com/img/html-tutorial/37/html-calculator-3.webp" alt="HTML Calculator"> <h3>Example 3:</h3> <pre> Calculator using HTML Example body { background-color: tan; } .box { background-color: #3d4543; height: 300px; width: 270px; border-radius: 10px; position: relative; top: 80px; left: 40%; } .display { background-color: #222; width: 220px; position: relative; left: 15px; top: 20px; height: 40px; } .display input { position: relative; left: 2px; top: 2px; height: 35px; color: black; background-color: #bccd95; font-size: 21px; text-align: right; } .keys { position: relative; top: 15px; } .button { width: 40px; height: 30px; border: none; border-radius: 8px; margin-left: 17px; cursor: pointer; border-top: 2px solid transparent; } .button.gray { color: black; font-color: black; background-color: #6f6f6f; border-bottom: black 2px solid; border-top: 2px #6f6f6f solid; } .title:hover { color: #fff; } .title { margin-bottom: 10px; margin-top: 30px; padding: 5px 0; font-size: 40px; font-weight: bold; text-align: center; color: black; font-family: 'Cookie', cursive; } .button.pink { color: black; background-color: #ff4561; border-bottom: black 2px solid; } .button.black { color: black; background-color: 303030; border-bottom: black 2px solid; border-top: 2px 303030 solid; font-weight: bold; } .button.orange { color: black; background-color: FF9933; border-bottom: black 2px solid; border-top: 2px FF9933 solid; } .gray:active { border-top: black 2px solid; border-bottom: 2px #6f6f6f solid; } .pink:active { border-top:black 2px solid; border-bottom:#ff4561 2px solid; } .black:active { border-top: black 2px solid; border-bottom: #303030 2px solid; } .orange:active { border-top: black 2px solid; border-bottom: FF9933 2px solid; } p { line-height: 10px; } Example of Calculator using HTML function c(val) { document.getElementById('d').value=val; } function v(val) {document.getElementById('d').value+=val; } function e() { try { c(eval(document.getElementById('d').value)) } catch(e) { c('Error') } } </pre> <p> <strong>Explanation:</strong> In the above example, we have created a basic calculator with the help of HTML. With the help of this calculator, we can do an essential calculation function such as addition, subtraction, multiplication, division, etc.</p> <p> <strong>Following is the output of this example:</strong> </p> <img src="//techcodeview.com/img/html-tutorial/37/html-calculator-4.webp" alt="HTML Calculator"> <hr></=> Açıklama: Yukarıdaki örnekte HTML yardımıyla basit bir hesap makinesi oluşturduk. Bu hesap makinesinin yardımıyla toplama, çıkarma, çarpma, bölme vb. gibi temel hesaplama işlevlerini yapabiliriz.
Bu örneğin çıktısı aşağıdadır:
