diff --git a/projects/simple calculator/index.html b/projects/simple calculator/index.html new file mode 100644 index 0000000..1d45adc --- /dev/null +++ b/projects/simple calculator/index.html @@ -0,0 +1,35 @@ + + + + + + + Calculator + + +
+

CALCULATOR

+
0
+
+ + + + + + + + + + + + + + + + + +
+
+ + + diff --git a/projects/simple calculator/script.js b/projects/simple calculator/script.js new file mode 100644 index 0000000..460e38c --- /dev/null +++ b/projects/simple calculator/script.js @@ -0,0 +1,58 @@ +let display = document.getElementById('display'); +let currentInput = ''; + +function appendToDisplay(value) { + currentInput += value; + display.textContent = currentInput; +} + +function clearDisplay() { + currentInput = ''; + display.textContent = '0'; +} + +function calculate() { + try { + currentInput = eval(currentInput).toString(); + display.textContent = currentInput; + } catch (error) { + display.textContent = 'Error'; + } +} +document.addEventListener("DOMContentLoaded", function () { + let display = document.getElementById('display'); + let currentInput = ''; + + function appendToDisplay(value) { + currentInput += value; + display.textContent = currentInput; + } + + function clearDisplay() { + currentInput = ''; + display.textContent = '0'; + } + + function calculate() { + try { + const result = Function('"use strict";return (' + currentInput + ')')(); + currentInput = result.toString(); + display.textContent = currentInput; + } catch (error) { + display.textContent = 'Error'; + } + } + + // Add event listeners for each button + document.querySelectorAll('.number').forEach(button => { + button.addEventListener('click', () => appendToDisplay(button.textContent)); + }); + + document.querySelectorAll('.operator').forEach(button => { + button.addEventListener('click', () => appendToDisplay(button.textContent)); + }); + + document.querySelector('.equals').addEventListener('click', calculate); + + document.querySelector('.reset').addEventListener('click', clearDisplay); +}); diff --git a/projects/simple calculator/style.css b/projects/simple calculator/style.css new file mode 100644 index 0000000..b7cb5e2 --- /dev/null +++ b/projects/simple calculator/style.css @@ -0,0 +1,70 @@ +body { + margin: 0; + font-family: Arial, sans-serif; + background-image: url('https://images.unsplash.com/photo-1625225233840-695456021cde?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8Y2FsY3VsYXRvcnxlbnwwfHwwfHx8MA%3D%3D'); + background-size: cover; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + color: white; +} + +h1 { + margin-bottom: 20px; +} + +.calculator { + background-color: rgba(0, 0, 0, 0.5); + border-radius: 10px; + padding: 20px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); +} + +.display { + padding: 10px; + margin-bottom: 10px; + text-align: right; + font-size: 2em; + background-color: rgba(255, 255, 255, 0.1); + border: none; + border-radius: 5px; + width: 100%; + box-sizing: border-box; +} + +.buttons { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; +} + +button { + width: 100%; + padding: 15px; + font-size: 1.5em; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; +} + +button:hover { + background-color: rgba(255, 255, 255, 0.1); +} + +.number { + background-color: #3498db; + color: white; +} + +.operator { + background-color: #e74c3c; + color: white; +} + +.equals { + background-color: #2ecc71; + color: white; +}