Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0a8dbaa

Browse files
calculator project
1 parent 35692e9 commit 0a8dbaa

File tree

7 files changed

+321
-0
lines changed

7 files changed

+321
-0
lines changed

‎calculator-project/README.md

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
# Simple Calculator – JavaScript Project
2+
3+
This is my first project using **HTML, CSS, and JavaScript**.
4+
It’s a basic calculator that can perform simple arithmetic operations like addition, subtraction, multiplication, and division.
5+
6+
---
7+
8+
## Features
9+
- User-friendly UI
10+
- Supports basic operations: +, –, ×ばつ, ÷
11+
- Responsive design (works on mobile too)
12+
- Keyboard input support (optional)
13+
- Clean layout with modern look
14+
15+
---
16+
17+
## Technologies Used
18+
- **HTML** – structure of the calculator
19+
- **CSS** – for styling and layout
20+
- **JavaScript** – for functionality and logic
21+
22+
---
23+
24+
## Screenshots
25+
> *preview*
26+
![Calculator UI](screenshot.png)
27+
28+
---
29+
30+
## How to Use
31+
1. Open `index.html` in your browser
32+
2. Click on the number and operation buttons
33+
3. See the result instantly in the display area
34+
35+
---
36+
37+
## Learning Experience
38+
This was my first JavaScript project.
39+
I learned:
40+
- How to handle user input
41+
- Writing functions for logic
42+
- Connecting buttons with event listeners
43+
- Updating the DOM dynamically
44+
45+
---
46+
47+
## Future Plans
48+
- Add keyboard support
49+
- Add percentage & square root features
50+
- Improve styling with animations
51+
52+
---
53+
## Connect
54+
55+
- Instagram: [@codezenashish](https://www.instagram.com/codezenashish/)
56+
- GitHub: [codezenashish](https://github.com/codezenashish)
57+

‎calculator-project/index.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="./style.css">
7+
<link rel="stylesheet" href="/style.css">
8+
<title>code zen</title>
9+
</head>
10+
<body>
11+
12+
<nav>
13+
<a href="/" aria-current="page">Home</a>
14+
<a target="_blank" href=""
15+
>YouTube</a
16+
>
17+
</nav>
18+
19+
<div class="container">
20+
<input id="display" type="text" placeholder="0" readonly />
21+
<div class="buttons">
22+
<button class="specialBtn">AC</button>
23+
<button class="specialBtn">DEL</button>
24+
<button class="specialBtn">%</button>
25+
<button class="specialBtn">/</button>
26+
27+
<button>7</button>
28+
<button>8</button>
29+
<button>9</button>
30+
<button class="specialBtn">*</button>
31+
32+
<button>4</button>
33+
<button>5</button>
34+
<button>6</button>
35+
<button class="specialBtn">-</button>
36+
37+
<button>1</button>
38+
<button>2</button>
39+
<button>3</button>
40+
<button class="specialBtn">+</button>
41+
42+
<button>0</button>
43+
<button>00</button>
44+
<button class="specialBtn">.</button>
45+
<button class="specialBtn">=</button>
46+
</div>
47+
</div>
48+
<script src="./main.js"></script>
49+
</body>
50+
</html>

‎calculator-project/main.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
const display = document.getElementById("display");
2+
const buttons = document.querySelectorAll("button");
3+
let str = "";
4+
5+
buttons.forEach((btn) => {
6+
btn.addEventListener("click", (e) => {
7+
const value = e.target.innerText;
8+
9+
if (value === "AC") {
10+
str = "";
11+
display.value = str;
12+
} else if (value === "DEL") {
13+
str = str.slice(0, -1);
14+
display.value = str;
15+
} else if (value === "=") {
16+
try {
17+
str = eval(str).toString();
18+
display.value = str;
19+
} catch {
20+
display.value = "Error";
21+
}
22+
} else {
23+
str += value;
24+
display.value = str;
25+
}
26+
});
27+
});

‎calculator-project/screenshot.png

18.4 KB
Loading[フレーム]

‎calculator-project/style.css

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
background-color: #121212;
7+
color: white;
8+
font-family: Arial, sans-serif;
9+
display: flex;
10+
flex-direction: column;
11+
align-items: center;
12+
padding-top: 40px;
13+
}
14+
15+
h1 {
16+
text-align: center;
17+
font-family: cursive;
18+
font-size: 18px;
19+
margin-bottom: 20px;
20+
}
21+
22+
h1 > span {
23+
color: red;
24+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
25+
}
26+
27+
.container {
28+
max-width: 270px;
29+
background-color: #1e1e1e;
30+
padding: 15px;
31+
border-radius: 10px;
32+
box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
33+
}
34+
35+
input {
36+
width: 100%;
37+
height: 40px;
38+
font-size: 18px;
39+
margin-bottom: 10px;
40+
padding: 5px 10px;
41+
border-radius: 5px;
42+
border: none;
43+
text-align: right;
44+
background-color: #2c2c2c;
45+
color: white;
46+
}
47+
48+
.buttons {
49+
display: grid;
50+
grid-template-columns: repeat(4, 1fr);
51+
gap: 10px;
52+
}
53+
54+
button {
55+
padding: 10px;
56+
font-size: 18px;
57+
border-radius: 8px;
58+
background-color: #333;
59+
color: white;
60+
border: none;
61+
cursor: pointer;
62+
}
63+
64+
button:hover {
65+
background-color: #555;
66+
}
67+
68+
.specialBtn {
69+
background-color: #007acc;
70+
}
71+
72+
.specialBtn:hover {
73+
background-color: #005f99;
74+
}

‎index.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Home</title>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width" />
7+
8+
<link rel="stylesheet" href="/style.css" />
9+
</head>
10+
<body style="background-color: #212121; color: #fff">
11+
<nav>
12+
<a href="/" aria-current="page">Home</a>
13+
<a target="_blank" href=""
14+
>YouTube</a
15+
>
16+
</nav>
17+
<main class="j-canter">
18+
<h1>Code Zen - By Ashish</h1>
19+
<div class="projects">
20+
<a class="project-link" href="/calculator-project/index.html">calculator</a>
21+
22+
</div>
23+
</main>
24+
</body>
25+
</html>

‎style.css

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
margin: 0;
7+
font-family: system-ui, sans-serif;
8+
color: #fff;
9+
background-image: linear-gradient(to right, #141e30, #243b55);
10+
background-size: cover;
11+
background-position: center;
12+
width: 100vw;
13+
max-width: 900px;
14+
overflow-x: hidden;
15+
margin-inline:auto;
16+
}
17+
18+
nav {
19+
display: flex;
20+
flex-wrap: wrap;
21+
align-items: center;
22+
justify-content: center;
23+
padding: 0.5rem;
24+
gap: 0.5rem;
25+
background: rgba(255, 255, 255, 0.05);
26+
backdrop-filter: blur(10px);
27+
-webkit-backdrop-filter: blur(10px);
28+
border: 1px solid rgba(255, 255, 255, 0.2);
29+
border-radius: 10px;
30+
margin: 10px;
31+
}
32+
33+
nav a {
34+
display: inline-block;
35+
min-width: 9rem;
36+
padding: 0.5rem;
37+
border-radius: 0.2rem;
38+
border: solid 1px rgba(255, 255, 255, 0.3);
39+
text-align: center;
40+
text-decoration: none;
41+
color: #fff;
42+
transition: background 0.3s ease;
43+
}
44+
45+
nav a:hover {
46+
background: rgba(255, 255, 255, 0.1);
47+
}
48+
49+
nav a[aria-current='page'] {
50+
background-color: rgba(255, 255, 255, 0.2);
51+
}
52+
53+
main {
54+
padding: 1rem;
55+
margin-inline: auto;
56+
width: 100%;
57+
max-width: 600px;
58+
}
59+
60+
61+
62+
h1 {
63+
font-weight: bold;
64+
font-size: 1.5rem;
65+
}
66+
67+
.projects {
68+
display: flex;
69+
flex-direction: column;
70+
/* width: 90vw; */
71+
}
72+
73+
.project-link {
74+
background: rgba(255, 255, 255, 0.05);
75+
backdrop-filter: blur(6px);
76+
-webkit-backdrop-filter: blur(6px);
77+
color: #fff;
78+
padding: 10px 30px;
79+
border-radius: 8px;
80+
text-decoration: none;
81+
border: 2px solid rgba(255, 255, 255, 0.3);
82+
margin-top: 10px;
83+
transition: background 0.3s ease;
84+
}
85+
86+
.project-link:hover {
87+
background: rgba(255, 255, 255, 0.15);
88+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /