Skip to content

Commit 29575e4

Browse files
namyakhannamyakhan
authored
Merge pull request namyakhan#3 from Aman-Mandal/new-projects
Added few projects
2 parents 4348a0a + 5a2b5dd commit 29575e4

File tree

17 files changed

+830
-0
lines changed

17 files changed

+830
-0
lines changed

‎claculator/.prettierrc

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"arrowParens": "avoid",
3+
"semi": false,
4+
"singleQuote": true
5+
}

‎claculator/index.html

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Calculator</title>
8+
<link rel="stylesheet" href="style.css" />
9+
<script defer src="script.js"></script>
10+
</head>
11+
<body>
12+
<div class="calculator">
13+
<div class="calculator-grid">
14+
<div class="output">
15+
<div data-previous-operand class="previous-operand"></div>
16+
<div data-current-operand class="current-operand"></div>
17+
</div>
18+
<button data-all-clear class="clear">C</button>
19+
<button data-operation class="operators-2">(</button>
20+
<button data-operation class="operators-2">)</button>
21+
<button data-operation class="operators">*</button>
22+
<button data-operation class="operators-2">√</button>
23+
<button data-operation class="operators-2">%</button>
24+
<button data-operation class="operators-2">±</button>
25+
<button data-operation class="operators">÷</button>
26+
<button data-number class="numbers">7</button>
27+
<button data-number class="numbers">8</button>
28+
<button data-number class="numbers">9</button>
29+
<button data-operation class="operators">-</button>
30+
<button data-number class="numbers">4</button>
31+
<button data-number class="numbers">5</button>
32+
<button data-number class="numbers">6</button>
33+
<button data-operation class="operators">+</button>
34+
<button data-number class="numbers">1</button>
35+
<button data-number class="numbers">2</button>
36+
<button data-number class="numbers">3</button>
37+
<button data-equals class="span-two equals">=</button>
38+
<button data-number class="numbers">.</button>
39+
<button data-number class="numbers">0</button>
40+
<button data-delete class="del">⌫</button>
41+
</div>
42+
</div>
43+
</body>
44+
</html>

‎claculator/script.js

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
'use strict'
2+
3+
const numbersBtn = document.querySelectorAll('[data-number]')
4+
const operationsBtn = document.querySelectorAll('[data-operation]')
5+
const allClearBtn = document.querySelector('[data-all-clear]')
6+
const equalsBtn = document.querySelector('[data-equals]')
7+
const deleteBtn = document.querySelector('[data-delete]')
8+
console.log(deleteBtn, allClearBtn)
9+
const previousOperandTextELement = document.querySelector(
10+
'[data-previous-operand]'
11+
)
12+
const currentOperandTextELement = document.querySelector(
13+
'[data-current-operand]'
14+
)
15+
16+
class Calculator {
17+
constructor(previousOperandTextELement, currentOperandTextELement) {
18+
this.previousOperandTextELement = previousOperandTextELement
19+
this.currentOperandTextELement = currentOperandTextELement
20+
this.clear()
21+
}
22+
23+
clear() {
24+
this.previousOperand = ''
25+
this.currentOperand = ''
26+
this.operation = undefined
27+
}
28+
29+
delete() {
30+
this.currentOperand = this.currentOperand.toString().slice(0, -1)
31+
}
32+
33+
appendNumber(number) {
34+
if (number === '.' && this.currentOperand.includes('.')) return
35+
this.currentOperand = this.currentOperand.toString() + number.toString()
36+
}
37+
38+
chooseOperation(operation) {
39+
if (this.currentOperand === '') return
40+
if (this.previousOperand !== '') {
41+
this.compute()
42+
}
43+
this.operation = operation
44+
this.previousOperand = this.currentOperand
45+
this.currentOperand = ''
46+
}
47+
48+
compute() {
49+
let result
50+
const current = parseFloat(this.currentOperand)
51+
const previous = parseFloat(this.previousOperand)
52+
if (isNaN(previous) || isNaN(current)) return
53+
54+
switch (this.operation) {
55+
case '+':
56+
result = previous + current
57+
break
58+
case '-':
59+
result = previous - current
60+
break
61+
case '*':
62+
result = previous * current
63+
break
64+
case '÷':
65+
result = previous / current
66+
break
67+
case '%':
68+
result = (previous / 100) * current
69+
break
70+
default:
71+
return
72+
}
73+
74+
this.currentOperand = result
75+
this.operation = ''
76+
this.previousOperand = ''
77+
}
78+
79+
updateDisplay() {
80+
this.currentOperandTextELement.textContent = this.currentOperand
81+
if (this.operation !== undefined) {
82+
this.previousOperandTextELement.textContent = `${this.previousOperand} ${this.operation}`
83+
} else {
84+
this.previousOperandTextELement.textContent = ''
85+
}
86+
}
87+
}
88+
89+
const calculator = new Calculator(
90+
previousOperandTextELement,
91+
currentOperandTextELement
92+
)
93+
94+
numbersBtn.forEach(btn => {
95+
btn.addEventListener('click', () => {
96+
calculator.appendNumber(btn.textContent)
97+
calculator.updateDisplay()
98+
})
99+
})
100+
101+
operationsBtn.forEach(btn => {
102+
btn.addEventListener('click', () => {
103+
calculator.chooseOperation(btn.textContent)
104+
calculator.updateDisplay()
105+
})
106+
})
107+
108+
equalsBtn.addEventListener('click', () => {
109+
calculator.compute()
110+
calculator.updateDisplay()
111+
// calculator.clear()
112+
})
113+
114+
allClearBtn.addEventListener('click', () => {
115+
calculator.clear()
116+
calculator.updateDisplay()
117+
})
118+
119+
deleteBtn.addEventListener('click', () => {
120+
calculator.delete()
121+
calculator.updateDisplay()
122+
})

‎claculator/style.css

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Radio+Canada&display=swap');
2+
3+
*,
4+
*::after,
5+
*::before {
6+
margin: 0;
7+
padding: 0;
8+
box-sizing: border-box;
9+
font-family: 'Radio Canada', sans-serif;
10+
}
11+
12+
body {
13+
background: linear-gradient(to bottom, #ffffff, #d6dedc);
14+
/* background-color: #eef0f1; */
15+
}
16+
17+
.calculator {
18+
margin-top: 10px;
19+
background-color: #fafafa;
20+
padding: 0 1.9rem 0;
21+
position: absolute;
22+
border-radius: 2rem;
23+
box-shadow: 0 2rem 5rem rgb(0 0 0 / 25%);
24+
left: 50%;
25+
transform: translateX(-50%);
26+
width: fit-content;
27+
height: 44rem;
28+
}
29+
30+
.calculator-grid {
31+
display: grid;
32+
justify-content: center;
33+
align-content: center;
34+
gap: 0.4rem;
35+
min-height: 100vh;
36+
grid-template-columns: repeat(4, 5rem);
37+
grid-template-rows: minmax(120px, auto) repeat(6, 5rem);
38+
}
39+
40+
.calculator-grid > button {
41+
cursor: pointer;
42+
font-size: 1.5rem;
43+
outline: none;
44+
border: none;
45+
box-shadow: 5px 5px 5px;
46+
border-radius: 2rem;
47+
background-color: #3a3b3d;
48+
color: #f2f3f5;
49+
}
50+
51+
.span-two {
52+
grid-row: span 2;
53+
}
54+
55+
.output {
56+
grid-column: 1/-1;
57+
display: flex;
58+
justify-content: space-around;
59+
align-items: flex-end;
60+
flex-direction: column;
61+
padding: 10px;
62+
word-wrap: break-word;
63+
word-break: break-all;
64+
}
65+
66+
.output .previous-operand {
67+
color: #d0ced2;
68+
font-size: 1.2rem;
69+
}
70+
.output .current-operand {
71+
color: #5a6770;
72+
font-size: 3.3rem;
73+
}
74+
75+
button.equals {
76+
background: #972cee;
77+
}
78+
button.equals:hover {
79+
background-color: #8020cf;
80+
}
81+
82+
button.operators {
83+
background-color: #dfd5e8;
84+
color: #aa7fbc;
85+
}
86+
button.operators:hover {
87+
background-color: #cab7db;
88+
color: #8f65a1;
89+
}
90+
91+
button.operators-2 {
92+
background-color: #f4f0e4;
93+
color: #c3ac7d;
94+
}
95+
button.operators-2:hover {
96+
background-color: #e4dcc2;
97+
color: #a99266;
98+
}
99+
100+
button.clear {
101+
background-color: #fdb82d;
102+
color: #f2f3f5;
103+
}
104+
105+
button.clear:hover {
106+
background-color: #f68726;
107+
color: #f2f3f5;
108+
}
109+
110+
button.numbers {
111+
background-color: #f3f4f6;
112+
color: #a1a8ab;
113+
}
114+
button.numbers:hover {
115+
background-color: whitesmoke;
116+
color: #3a3b3d;
117+
}
118+
119+
button.del {
120+
background-color: #808183;
121+
box-shadow: 1px 5px 5px;
122+
}
123+
button.del:hover {
124+
background-color: #424347;
125+
color: whitesmoke;
126+
}

‎expandingCards/.prettierrc

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"arrowParens": "avoid",
3+
"singleQuote": true,
4+
"semi": false
5+
}

‎expandingCards/index.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="style.css" />
8+
<script defer src="script.js"></script>
9+
<title>Expanding Cards</title>
10+
</head>
11+
<body>
12+
<div class="container">
13+
<div
14+
class="panel active"
15+
style="
16+
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');
17+
"
18+
>
19+
<h3>Nature's Wrath</h3>
20+
</div>
21+
<div
22+
class="panel"
23+
style="
24+
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');
25+
"
26+
>
27+
<h3>Snow's Era</h3>
28+
</div>
29+
<div
30+
class="panel"
31+
style="
32+
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');
33+
"
34+
>
35+
<h3>Evening's Doom</h3>
36+
</div>
37+
<div
38+
class="panel"
39+
style="
40+
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');
41+
"
42+
>
43+
<h3>Moutain's Glory</h3>
44+
</div>
45+
<div
46+
class="panel"
47+
style="
48+
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');
49+
"
50+
>
51+
<h3>Everlands</h3>
52+
</div>
53+
</div>
54+
</body>
55+
</html>

‎expandingCards/script.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
'use strict'
2+
const panels = document.querySelectorAll('.panel')
3+
4+
const removeActiveClass = function () {
5+
panels.forEach(panel => panel.classList.remove('active'))
6+
}
7+
8+
panels.forEach(panel =>
9+
panel.addEventListener('click', function () {
10+
removeActiveClass()
11+
panel.classList.add('active')
12+
})
13+
)

0 commit comments

Comments
 (0)