diff --git a/projects/calculator/favicon.png b/projects/calculator/favicon.png new file mode 100644 index 0000000..32ab607 Binary files /dev/null and b/projects/calculator/favicon.png differ diff --git a/projects/calculator/index.html b/projects/calculator/index.html new file mode 100644 index 0000000..5585c93 --- /dev/null +++ b/projects/calculator/index.html @@ -0,0 +1,52 @@ + + + + + + + + + + + + Gokulakrishnan Calculator + + + + + + + + +
+

G Calculator

+
+ +
+
+
+ + + + +
+
+ + + + + + + + + + + + + +
+
+
+ + + diff --git a/projects/calculator/script.js b/projects/calculator/script.js new file mode 100644 index 0000000..67a5a50 --- /dev/null +++ b/projects/calculator/script.js @@ -0,0 +1,22 @@ +let expression = ''; + +function appendToDisplay(value) { + expression += value; + document.getElementById('display').value = expression; +} + +function calculate() { + try { + const result = eval(expression); + document.getElementById('display').value = result; + expression = ''; + } catch (error) { + document.getElementById('display').value = 'Error'; + expression = ''; + } +} + +function clearDisplay() { + expression = ''; + document.getElementById('display').value = ''; +} diff --git a/projects/calculator/style.css b/projects/calculator/style.css new file mode 100644 index 0000000..fd600d4 --- /dev/null +++ b/projects/calculator/style.css @@ -0,0 +1,84 @@ +body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + background: url("https://images.unsplash.com/photo-1625225233840-695456021cde?auto=format&fit=crop&q=80&w=1000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y2FsY3VsYXRlfGVufDB8fDB8fHww"); + background-size: contain; + background-position: center; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.calculator { + background-color: rgba(255, 255, 255, 0.8); + border-radius: 10px; + padding: 20px; + text-align: center; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + max-width: 300px; + margin: 0 auto; +} + +h1 { + margin-top: 0; +} + +.display { + margin-bottom: 20px; +} + +input[type="text"] { + width: 100%; + padding: 10px; + font-size: 1.5em; +} + +.keys { + display: flex; + flex-direction: column; + align-items: center; +} + +button { + width: 60px; + height: 60px; + margin: 5px; + font-size: 1.2em; + border-radius: 5px; + border: none; + outline: none; + cursor: pointer; + transition: all 0.2s ease-in-out; +} + +button:hover { + transform: scale(1.1); +} + +.operator { + background-color: #ff847c; + color: white; +} + +.number { + background-color: #70c1b3; + color: white; +} + +.clear { + background-color: #b8b8b8; + color: white; +} + +.calculate { + background-color: #f0c987; + color: white; +} + +@media only screen and (max-width: 600px) { + .calculator { + max-width: 90%; + } +}