<aside> <img src="https://i.pinimg.com/originals/7d/c9/93/7dc993c70d4adba215b87cafdc59d82d.png" alt="https://i.pinimg.com/originals/7d/c9/93/7dc993c70d4adba215b87cafdc59d82d.png" width="40px" /> Youtube linki : https://www.youtube.com/watch?v=ZUJzsGXRtfE
</aside>
<aside> <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="40px" /> GitHub linki : https://github.com/Pilestin/Web_Programlama_BIL336/tree/main/odev2 - hesapMakinesi
</aside>
Öncelikle uygulamamızın html iskeletini oluşturalım , ardından css ile tasarımını yapalım ve en son javascript ile özelliklerimizi ekleyelim.
Öncelikle head kısmında kullanacağımız import işlemlerimizi yapalım. İlk olarak 5.satırda Orbitron fontu ardından da jQuery’i uygulamamıza dahil ettik.
7.satırda ise link etiketi ile style.css dosyamızı dahil ettik ( external ).
Sayfamızın body bölümünde , 10.satırda yine bir link ile import işlemi yaptık. Burada dışarıdan javascript fonksiyonlarımızı tutan functions.js dosyamızı dahil ettik
Ardından kullanacağımız bütün etiketlerin üstünde class’ı calculator olan bir div oluşturduk. Bu div hepsini kapsayacak.
Daha sonra altına bir form oluşturduk ve name’ine form dedik. class’ı inputDisplay olan input etiketini ekledik. Burası sağ tarafta görülen bir input kutucuğu oluşturacak. Böylece girilen tuşları buraya aktarabilecek ve sonucu da bu kısımda görebileceğiz.
Daha sonrasında ise tuşları bir table etiketi ile 5 satır olacak şekilde ekledik. İlk dört satırda 4 tane kolon , son satırda ise iki adet kolon ile bir görünüm elde ettik.
Her satırda type’ı button olacak şekilde input etiketleri ekledik. Her bir buton tıklandığında belirli fonksiyonları çağıracaktır. Bu fonksiyonlar ise js dosyamızdan alınacaktır.
İlk tr etiketi ile çıktıda gördüğümüz C , < , / , X ; ikinci tr ile 7 , 8 , 9 , - ; üçüncü tr ile 4 , 5 , 6 , + ; dördüncü tr ile 1 , 2 , 3 , = ve son tr ile 0 , . butonlarımızı ekledik.
