namyakhan · namyakhan · Nov 19, 2022 · Nov 19, 2022
diff --git a/claculator/.prettierrc b/claculator/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "arrowParens": "avoid",
+  "semi": false,
+  "singleQuote": true
+}
diff --git a/claculator/index.html b/claculator/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Calculator</title>
+    <link rel="stylesheet" href="style.css" />
+    <script defer src="script.js"></script>
+  </head>
+  <body>
+    <div class="calculator">
+      <div class="calculator-grid">
+        <div class="output">
+          <div data-previous-operand class="previous-operand"></div>
+          <div data-current-operand class="current-operand"></div>
+        </div>
+        <button data-all-clear class="clear">C</button>
+        <button data-operation class="operators-2">(</button>
+        <button data-operation class="operators-2">)</button>
+        <button data-operation class="operators">*</button>
+        <button data-operation class="operators-2">√</button>
+        <button data-operation class="operators-2">%</button>
+        <button data-operation class="operators-2">±</button>
+        <button data-operation class="operators">÷</button>
+        <button data-number class="numbers">7</button>
+        <button data-number class="numbers">8</button>
+        <button data-number class="numbers">9</button>
+        <button data-operation class="operators">-</button>
+        <button data-number class="numbers">4</button>
+        <button data-number class="numbers">5</button>
+        <button data-number class="numbers">6</button>
+        <button data-operation class="operators">+</button>
+        <button data-number class="numbers">1</button>
+        <button data-number class="numbers">2</button>
+        <button data-number class="numbers">3</button>
+        <button data-equals class="span-two equals">=</button>
+        <button data-number class="numbers">.</button>
+        <button data-number class="numbers">0</button>
+        <button data-delete class="del">⌫</button>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/claculator/script.js b/claculator/script.js
@@ -0,0 +1,122 @@
+'use strict'
+
+const numbersBtn = document.querySelectorAll('[data-number]')
+const operationsBtn = document.querySelectorAll('[data-operation]')
+const allClearBtn = document.querySelector('[data-all-clear]')
+const equalsBtn = document.querySelector('[data-equals]')
+const deleteBtn = document.querySelector('[data-delete]')
+console.log(deleteBtn, allClearBtn)
+const previousOperandTextELement = document.querySelector(
+  '[data-previous-operand]'
+)
+const currentOperandTextELement = document.querySelector(
+  '[data-current-operand]'
+)
+
+class Calculator {
+  constructor(previousOperandTextELement, currentOperandTextELement) {
+    this.previousOperandTextELement = previousOperandTextELement
+    this.currentOperandTextELement = currentOperandTextELement
+    this.clear()
+  }
+
+  clear() {
+    this.previousOperand = ''
+    this.currentOperand = ''
+    this.operation = undefined
+  }
+
+  delete() {
+    this.currentOperand = this.currentOperand.toString().slice(0, -1)
+  }
+
+  appendNumber(number) {
+    if (number === '.' && this.currentOperand.includes('.')) return
+    this.currentOperand = this.currentOperand.toString() + number.toString()
+  }
+
+  chooseOperation(operation) {
+    if (this.currentOperand === '') return
+    if (this.previousOperand !== '') {
+      this.compute()
+    }
+    this.operation = operation
+    this.previousOperand = this.currentOperand
+    this.currentOperand = ''
+  }
+
+  compute() {
+    let result
+    const current = parseFloat(this.currentOperand)
+    const previous = parseFloat(this.previousOperand)
+    if (isNaN(previous) || isNaN(current)) return
+
+    switch (this.operation) {
+      case '+':
+        result = previous + current
+        break
+      case '-':
+        result = previous - current
+        break
+      case '*':
+        result = previous * current
+        break
+      case '÷':
+        result = previous / current
+        break
+      case '%':
+        result = (previous / 100) * current
+        break
+      default:
+        return
+    }
+
+    this.currentOperand = result
+    this.operation = ''
+    this.previousOperand = ''
+  }
+
+  updateDisplay() {
+    this.currentOperandTextELement.textContent = this.currentOperand
+    if (this.operation !== undefined) {
+      this.previousOperandTextELement.textContent = `${this.previousOperand} ${this.operation}`
+    } else {
+      this.previousOperandTextELement.textContent = ''
+    }
+  }
+}
+
+const calculator = new Calculator(
+  previousOperandTextELement,
+  currentOperandTextELement
+)
+
+numbersBtn.forEach(btn => {
+  btn.addEventListener('click', () => {
+    calculator.appendNumber(btn.textContent)
+    calculator.updateDisplay()
+  })
+})
+
+operationsBtn.forEach(btn => {
+  btn.addEventListener('click', () => {
+    calculator.chooseOperation(btn.textContent)
+    calculator.updateDisplay()
+  })
+})
+
+equalsBtn.addEventListener('click', () => {
+  calculator.compute()
+  calculator.updateDisplay()
+  //   calculator.clear()
+})
+
+allClearBtn.addEventListener('click', () => {
+  calculator.clear()
+  calculator.updateDisplay()
+})
+
+deleteBtn.addEventListener('click', () => {
+  calculator.delete()
+  calculator.updateDisplay()
+})
diff --git a/claculator/style.css b/claculator/style.css
@@ -0,0 +1,126 @@
+@import url('https://fonts.googleapis.com/css2?family=Radio+Canada&display=swap');
+
+*,
+*::after,
+*::before {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Radio Canada', sans-serif;
+}
+
+body {
+  background: linear-gradient(to bottom, #ffffff, #d6dedc);
+  /* background-color: #eef0f1; */
+}
+
+.calculator {
+  margin-top: 10px; 
+  background-color: #fafafa;
+  padding: 0 1.9rem 0;
+  position: absolute;
+  border-radius: 2rem;
+  box-shadow: 0 2rem 5rem rgb(0 0 0 / 25%);
+  left: 50%;
+  transform: translateX(-50%);
+  width: fit-content;
+  height: 44rem;
+}
+
+.calculator-grid {
+  display: grid;
+  justify-content: center;
+  align-content: center;
+  gap: 0.4rem;
+  min-height: 100vh;
+  grid-template-columns: repeat(4, 5rem);
+  grid-template-rows: minmax(120px, auto) repeat(6, 5rem);
+}
+
+.calculator-grid > button {
+  cursor: pointer;
+  font-size: 1.5rem;
+  outline: none;
+  border: none;
+  box-shadow: 5px 5px 5px;
+  border-radius: 2rem;
+  background-color: #3a3b3d;
+  color: #f2f3f5;
+}
+
+.span-two {
+  grid-row: span 2;
+}
+
+.output {
+  grid-column: 1/-1;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-end;
+  flex-direction: column;
+  padding: 10px;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
+.output .previous-operand {
+  color: #d0ced2;
+  font-size: 1.2rem;
+}
+.output .current-operand {
+  color: #5a6770;
+  font-size: 3.3rem;
+}
+
+button.equals {
+  background: #972cee;
+}
+button.equals:hover {
+  background-color: #8020cf;
+}
+
+button.operators {
+  background-color: #dfd5e8;
+  color: #aa7fbc;
+}
+button.operators:hover {
+  background-color: #cab7db;
+  color: #8f65a1;
+}
+
+button.operators-2 {
+  background-color: #f4f0e4;
+  color: #c3ac7d;
+}
+button.operators-2:hover {
+  background-color: #e4dcc2;
+  color: #a99266;
+}
+
+button.clear {
+  background-color: #fdb82d;
+  color: #f2f3f5;
+}
+
+button.clear:hover {
+  background-color: #f68726;
+  color: #f2f3f5;
+}
+
+button.numbers {
+  background-color: #f3f4f6;
+  color: #a1a8ab;
+}
+button.numbers:hover {
+  background-color: whitesmoke;
+  color: #3a3b3d;
+}
+
+button.del {
+  background-color: #808183;
+  box-shadow: 1px 5px 5px;
+}
+button.del:hover {
+  background-color: #424347;
+  color: whitesmoke;
+}
diff --git a/expandingCards/.prettierrc b/expandingCards/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "arrowParens": "avoid",
+  "singleQuote": true,
+  "semi": false
+}
diff --git a/expandingCards/index.html b/expandingCards/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <script defer src="script.js"></script>
+    <title>Expanding Cards</title>
+  </head>
+  <body>
+    <div class="container">
+      <div
+        class="panel active"
+        style="
+          background-image: url('https://images.unsplash.com/photo-1435783099294-283725c37230?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=928&q=80');
+        "
+      >
+        <h3>Nature's Wrath</h3>
+      </div>
+      <div
+        class="panel"
+        style="
+          background-image: url('https://images.unsplash.com/photo-1653629154017-80db78b02610?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80');
+        "
+      >
+        <h3>Snow's Era</h3>
+      </div>
+      <div
+        class="panel"
+        style="
+          background-image: url('https://images.unsplash.com/photo-1539278311020-fe8d86254350?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=869&q=80');
+        "
+      >
+        <h3>Evening's Doom</h3>
+      </div>
+      <div
+        class="panel"
+        style="
+          background-image: url('https://images.unsplash.com/photo-1500964757637-c85e8a162699?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=903&q=80');
+        "
+      >
+        <h3>Moutain's Glory</h3>
+      </div>
+      <div
+        class="panel"
+        style="
+          background-image: url('https://images.unsplash.com/photo-1650641033795-496437c828ab?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80');
+        "
+      >
+        <h3>Everlands</h3>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/expandingCards/script.js b/expandingCards/script.js
@@ -0,0 +1,13 @@
+'use strict'
+const panels = document.querySelectorAll('.panel')
+
+const removeActiveClass = function () {
+  panels.forEach(panel => panel.classList.remove('active'))
+}
+
+panels.forEach(panel =>
+  panel.addEventListener('click', function () {
+    removeActiveClass()
+    panel.classList.add('active')
+  })
+)