cerchez07/complete-intro-to-web-dev-v3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Calculator part 1

Browse Source
This commit is contained in:
Marius Cerchez
2026-02-26 09:05:55 +02:00
parent eda5b94d6c
commit 9148676625
2 changed files with 77 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
calculator/index.html Normal file
View File

@@ -0,0 +1,42 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Calculator</title>
</head>
<body>
<div class="calculator">
<input type="text" class="display" />
<button class="clear">C</button>
<button>←</button>
<button>÷</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>×</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>-</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>+</button>
<button class="zero">0</button>
<button>=</button>
</div>
</body>
</html>

35
calculator/style.css Normal file
View File

@@ -0,0 +1,35 @@
body {
font-family: "Roboto Mono", monospace;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.calculator {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.display {
grid-column: 1 / 5;
height: 50px;
width: 200px;
}
button {
height: 50px;
}
.clear {
grid-column: 1 / 3;
}
.zero {
grid-column: 1 / 4;
}