diff --git a/calc/calc.js b/calc/calc.js new file mode 100644 index 0000000..380eceb --- /dev/null +++ b/calc/calc.js @@ -0,0 +1,26 @@ +const num7 = document.getElementById('7'); +const num8 = document.getElementById('8'); +const num9 = document.getElementById('9'); +const divide = document.getElementById('divide'); +const sqroot = document.getElementById('sqroot'); +const num4 = document.getElementById('4'); +const num5 = document.getElementById('5'); +const num6 = document.getElementById('6'); +const mutiply = document.getElementById('mutiply'); +const percent = document.getElementById('percent'); +const num1 = document.getElementById('1'); +const num2 = document.getElementById('2'); +const num3 = document.getElementById('3'); +const subtract = document.getElementById('subtract'); +const fraction = document.getElementById('fraction'); +const num0 = document.getElementById('0'); +const decimal = document.getElementById('decimal'); +const negative = document.getElementById('negative'); +const add = document.getElementById('add'); +const sum = document.getElementById('sum'); + +const result = document.querySelector('span#resultnum'); + +num7.addEventListener('click', () => { + result.innerHTML = num7.innerHTML; +}) \ No newline at end of file diff --git a/calc/index.html b/calc/index.html new file mode 100644 index 0000000..92f94b3 --- /dev/null +++ b/calc/index.html @@ -0,0 +1,46 @@ + + + + + + + Calculator + + + +
+

zyq's calculator

+
+ +
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + +
+
+ + + + + \ No newline at end of file diff --git a/calc/style.css b/calc/style.css new file mode 100644 index 0000000..0f24c43 --- /dev/null +++ b/calc/style.css @@ -0,0 +1,91 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + font-family: monospace; + font-size: small; + background-color: #2a2a2a; + transition: background-color 0.3s, color 0.3s; + color: #f0f0f0; + flex-direction: column; + overflow-x: hidden; + margin: 0; +} + +div.main { + padding: 50px; + text-align: right; + background-color: #909090; + max-width: 350px; + border-radius: 10px; + border: 2px solid #707070; +} + +.result { + width: 98.5%; + height: 40px; + font-size: x-large; + background-color: #505050; + border: 2px solid #757575; + border-radius: 10px; + justify-content: center; + text-align: right; + display: flex; + color: #fff; + cursor: pointer; + transition: background-color 0.2s; + +} + +.buttons { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(4, 1fr); + gap: 10px; + margin-top: 25px; +} + +button { + cursor: pointer; + padding: 5px 10px; + color: #ccc; + background-color: #464646; + border: 2px solid #505050; + border-radius: 4px; + transition: background-color 0.1s linear; + font-size: large; +} + +#resultnum { + display: flex; + justify-content: center; +} + +button#sum { + cursor: pointer; + padding: 5px 10px; + color: #ddd; + background-color: #b38eed; + border: 2px solid #a986e1; + border-radius: 4px; + transition: background-color 0.1s linear; + font-size: large; +} + +button:hover { + background-color: #565656; + border: 2px solid #606060; + color: #fff; +} + +button#sum:hover { + background-color: #c099ff; + border: 2px solid #b38eed; + color: #fff; +} + +.result:hover { + background-color: #606060; + border: 2px solid #757575; +} \ No newline at end of file