diff --git a/calculator/index.html b/calculator/index.html new file mode 100644 index 0000000..9e5fcab --- /dev/null +++ b/calculator/index.html @@ -0,0 +1,61 @@ + + + + + + + + calculator + + +

calculator

+ +
+
+
+ +
+ +
+
+
+
+
+
+ +
+ +
+ +
+
+
+
+
+ +
+ +
+
+
+
+
+ +
+
+
+
+
+
+ + +
+ +
+
+ + + + \ No newline at end of file diff --git a/calculator/responsive.css b/calculator/responsive.css new file mode 100644 index 0000000..5f822fa --- /dev/null +++ b/calculator/responsive.css @@ -0,0 +1,67 @@ +/*300px to 500px*/ +@media (min-width:300px) and (max-width:500px) { +/*main*/ +#size{ + display: flex; + flex-direction: column; + align-items: center; +} +#calculator{ + display: inline-block; + position: relative; + margin-left: 7px; + border: 2px solid black; + border-radius: 20px; + width: 280px; + height: 350px; + background-color: black; +} +#display{ + display: inline-block; + position: relative; + margin-left: 0px; + width: 100%; + background-color: gray; + border-top-left-radius: 16px; + border-top-right-radius: 16px; +} +#displaytext{ + margin-top: 20px; + height: 70px; + width: 200px; + border-radius: 20px; + font-size: 20px; + margin-left: 40px; + margin-bottom: 20px; +} +#btn{ +height: 52px; +width: 60px; +font-size: 20px; +cursor: pointer; +opacity: .80; +border-radius: 20px; +background-color: white; +margin-bottom: 3px; +} +#btn:hover{ + height: 52px; + width: 60px; + font-size: 20px; + opacity: .90; + cursor: pointer; + border-radius: 20px; + background-color: white; + margin-bottom: 3px; +} +#btn:active{ + height: 52px; + width: 60px; + font-size: 20px; + opacity: .80; + cursor: pointer; + border-radius: 20px; + background-color: white; + margin-bottom: 3px; +} +} \ No newline at end of file diff --git a/calculator/script.js b/calculator/script.js new file mode 100644 index 0000000..7e1044f --- /dev/null +++ b/calculator/script.js @@ -0,0 +1,19 @@ +let string =""; +let buttons =document.querySelectorAll("button"); +Array.from(buttons).forEach((btn) => { + btn.addEventListener("click",(e)=>{ + if (e.target.innerHTML == '=') { + string = eval(string); + document.querySelector("input").value = string; + } + else if(e.target.innerHTML == "AC"){ + string =""; + document.querySelector("input").value = string; + } + else{console.log(e.target); + string =string +e.target.innerHTML; + document.querySelector("input").value = string; + } + }) +}); + diff --git a/calculator/style.css b/calculator/style.css new file mode 100644 index 0000000..89c8e90 --- /dev/null +++ b/calculator/style.css @@ -0,0 +1,101 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Quicksand:wght@300..700&display=swap'); +*{ + margin: 0; + padding: 0; +} +/*header*/ + +#heading{ + margin-top: 20px; + text-align: center; + margin-bottom: 20px; + font-family: "Quicksand", sans-serif; + font-weight: 500; +} +#size{ + display: flex; + flex-direction: column; + align-items: center; +} +/*main*/ +#calculator{ + display: inline-block; + position: relative; + border: 2px solid black; + border-radius: 20px; + width: 450px; + height: 420px; + background-color: black; +} +#display{ + display: inline-block; + position: relative; + margin-left: 0px; + width: 100%; + background-color: gray; + border-top-left-radius: 16px; + border-top-right-radius: 16px; +} +#displaytext{ + margin-top: 20px; + height: 70px; + width: 350px; + border-radius: 20pxz; + font-size: 30px; + margin-left: 50px; + margin-bottom: 20px; +} +#btn{ +height: 70px; +width: 100px; +font-size: 20px; +cursor: pointer; +opacity: .80; +border-radius: 20px; +background-color: white; +} +#btn:hover{ + height: 70px; + width: 100px; + font-size: 20px; + opacity: .90; + cursor: pointer; + border-radius: 20px; + background-color: white; +} +#btn:active{ + height: 70px; + width: 100px; + font-size: 20px; + opacity: .80; + cursor: pointer; + border-radius: 20px; + background-color: white; +} +#button{ + padding-top: 20px; +} +#row1{ + display: flex; + justify-content: space-around; + align-items: center; +} +#row2{ + display: flex; + justify-content: space-around; + align-items: center; +} +#row3{ + display: flex; + justify-content: space-around; + align-items: center; +} +#row4{ + display: flex; + justify-content: space-around; + align-items: center; +} + +.button{ + font-size: 20px; +}