Bu yazıda HTML nesnelerini kullanarak aşağıdaki tasarımda göründüğü gibi hesap makinesi oluşturacağız. Hesap makinesinin yapılış videoları YouTube kanalında bulabileceğiniz gibi yazının içinde de videlara yer vereceğim. Hesap makinesinin ilk bölümü HTML ve CSS düzenlemelerini içeriyor. Diğer bölümler HTML nesnelerinin javascript tarafından programlamasını göstermektedir.
Bölüm 1: JavaScript Hesap Makinesi HTML CSS Tasarımı
Kod: HTML ve CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>TasarimKodlama.com</title> <style> .sayfa{ width:360px; margin:auto; } table{ background:#efefef; border-spacing: 10px; text-align: center; } table .btn{ width: 60px; background:gray; text-align: center; line-height: 60px; color:#fff; font-size: 1.5em; } #islem, #gosterge{ padding:5px; text-align: right; } #gosterge{ height: 60px; background:#ddfafa; color:#333; font-size: 1.8em; text-align: right; line-height: 40px; padding:10px; box-sizing: border-box; } #islem{ background: #aaa; } </style> </head> <body> <div class="sayfa"> <h1>Hesap Makinesi</h1> <table> <tr> <td colspan="5" id="islem"></td> </tr> <tr> <td colspan="5" id="gosterge">0</td> </tr> <tr> <td class="btn">7</td> <td class="btn">8</td> <td class="btn">9</td> <td class="btn">/</td> <td class="btn">CE</td> </tr> <tr> <td class="btn">4</td> <td class="btn">5</td> <td class="btn">6</td> <td class="btn">*</td> <td class="btn">C</td> </tr> <tr> <td class="btn">1</td> <td class="btn">2</td> <td class="btn">3</td> <td class="btn">-</td> <td rowspan="2" class="btn">=</td> </tr> <tr> <td colspan="2" class="btn">0</td> <td class="btn">.</td> <td class="btn">+</td> </tr> </table> </div> <script> </script> </body> </html> |
Bölüm 2: JavaScript Hesap Makinesi Rakamların Yapımı
Bölüm 3: JavaScript Hesap Makinesi Operatörleri Yapımı
Bölüm 4: JavaScript Hesap Makinesi Eşittir ve Nokta Butonları Yapımı
Yorum Yap