Skip to content

Commit 9d96d12

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #395 from DilshadNoshad/main
update Neumorphism Calculator
2 parents 667dcee + 24adca1 commit 9d96d12

File tree

5 files changed

+178
-0
lines changed

5 files changed

+178
-0
lines changed

‎Neumorphism-calculator-D-vers-1/README.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# Neumorphism Simple calculator D-vers-1
2+
3+
# Instructions of the game
4+
5+
1. Follow the steps on root repository to clone this whole project.
6+
2. Click on the folder 2048 Game.
7+
3. Click on the index.html inside the folder.
8+
4. Use arrow keys to play.
9+
5. Have fun!
10+
11+
## 💻Tech Stack
12+
13+
<br>
14+
15+
![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
16+
![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
17+
![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
18+
19+
<br>
20+
21+
### How to use:
22+
23+
---
24+
25+
- Download or clone the repository
26+
27+
```
28+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
29+
```
30+
31+
- Go to the directory
32+
- Run the index.html file
33+
- Enter your DOB and find age..
34+
35+
<br>
36+
37+
# Screenshot
38+
39+
![screenshot](cal-demo.png)
40+
41+
<br>
42+
43+
## Happy Coding!

‎Neumorphism-calculator-D-vers-1/cal-demo.png

59.1 KB
Loading

‎Neumorphism-calculator-D-vers-1/index.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
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+
<title>Calculator | D-vers </title>
9+
</head>
10+
<body>
11+
12+
<div class="container align-center">
13+
<div class="grid calculator">
14+
<input type="text" id="output-screen" readonly placeholder="0"/>
15+
<button class="text-color" onclick="allClear()">C</button>
16+
<button class="text-color" onclick="del()">DEL</button>
17+
<button class="text-color" onclick="display('%')">%</button>
18+
<button class="text-color" onclick="display('/')">&#247</button>
19+
<button onclick="display(7)">7</button>
20+
<button onclick="display(8)">8</button>
21+
<button onclick="display(9)">9</button>
22+
<button class="text-color" onclick="display('*')">x</button>
23+
<button onclick="display(4)">4</button>
24+
<button onclick="display(5)">5</button>
25+
<button onclick="display(6)">6</button>
26+
<button class="text-color" onclick="display('-')">-</button>
27+
<button onclick="display(1)">1</button>
28+
<button onclick="display(2)">2</button>
29+
<button onclick="display(3)">3</button>
30+
<button class="text-color" onclick="display('+')">+</button>
31+
<button onclick="display('.')">.</button>
32+
<button onclick="display(0)">0</button>
33+
<button class="equal-to" onclick="calculate()">=</button>
34+
</div>
35+
</div>
36+
<script src="script.js"></script>
37+
</body>
38+
</html>

‎Neumorphism-calculator-D-vers-1/script.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
let outputScreen=document.getElementById("output-screen");
2+
3+
function display(num) {
4+
outputScreen.value += num;
5+
}
6+
7+
function calculate() {
8+
try{ outputScreen.value = eval(outputScreen.value);}
9+
catch (err) {
10+
alert("Invalid equation!")
11+
}
12+
}
13+
14+
function allClear() {
15+
outputScreen.value = "";
16+
}
17+
18+
function del() {
19+
outputScreen.value = outputScreen.value.slice(0, -1);
20+
}

‎Neumorphism-calculator-D-vers-1/style.css

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
background-color: #0d1117;
6+
font-family: "Open Sans", sans-serif;
7+
outline: none;
8+
}
9+
10+
:root {
11+
--white-color: #ecf0f3;
12+
--orange-color: #d04326;
13+
}
14+
15+
.align-center {
16+
display: flex;
17+
align-items: center;
18+
justify-content: center;
19+
}
20+
21+
.container {
22+
height: 100vh;
23+
}
24+
25+
.calculator {
26+
background-color: var(--white-color);
27+
padding: 15px;
28+
border-radius: 35px;
29+
box-shadow: 5px 5px 40px rgba(105, 105, 105, 0.3),
30+
-5px -5px 40px rgba(105, 105, 105, 0.3);
31+
}
32+
33+
.grid {
34+
display: grid;
35+
grid-template-columns: repeat(4, 68px);
36+
grid-template-rows: repeat(5);
37+
}
38+
39+
#output-screen {
40+
grid-column: span 4;
41+
height: 75px;
42+
width: 260px;
43+
background-color: var(--white-color);
44+
box-shadow: inset -5px -5px 12px #ffffff,
45+
inset 5px 5px 12px rgba(0, 0, 0, 0.16);
46+
border: none;
47+
border-radius: 30px;
48+
color: rgb(70, 70, 70);
49+
font-size: 50px;
50+
text-align: end;
51+
margin: auto;
52+
margin-top: 40px;
53+
margin-bottom: 30px;
54+
padding: 20px;
55+
}
56+
57+
button {
58+
height: 48px;
59+
width: 48px;
60+
background-color: var(--white-color);
61+
box-shadow: -5px -5px 12px #ffffff, 5px 5px 12px rgba(0, 0, 0, 0.16);
62+
border: none;
63+
border-radius: 50%;
64+
margin: 8px;
65+
font-size: 16px;
66+
}
67+
68+
.equal-to {
69+
width: 115px;
70+
border-radius: 40px;
71+
color: white;
72+
background-color: var(--orange-color);
73+
}
74+
75+
.text-color {
76+
color: var(--orange-color);
77+
}

0 commit comments

Comments
 (0)