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

Compare commits

base: cerchez07:eda5b94d6c1668aa20fa10ecfb3c4cf85c9e6f96
Branches Tags
cerchez07:main
...
compare: cerchez07:main
Branches Tags
cerchez07:main

2 Commits
eda5b94d6c ... main

Author SHA1 Message Date
Marius Cerchez
82bd8786cc add styling 2026-02-27 13:43:14 +02:00
Marius Cerchez
9148676625 Calculator part 1 2026-02-26 09:05:55 +02:00
2 changed files with 101 additions and 0 deletions
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" id="display" disabled />
<button class="clear">C</button>
<button>←</button>
<button class="operator">÷</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button class="operator">×</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="operator">-</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="operator">+</button>
<button class="zero">0</button>
<button class="operator">=</button>
</div>
</body>
</html>

59
calculator/style.css Normal file
View File

@@ -0,0 +1,59 @@
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;
border-collapse: collapse;
border-radius: 0;
}
#display {
grid-column: 1 / 5;
height: 100px;
width: 400px;
background-color: black;
color: white;
text-align: right;
font-size: 75px;
}
button {
height: 100px;
font-size: 50px;
background-color: #d8d9db;
border: 1px solid black;
padding: 0;
}
button:hover {
background-color: #ebebeb;
}
.operator {
background-color: #df974c;
color: white;
}
.operator:hover {
background-color: #dfb07e;
}
.clear {
grid-column: 1 / 3;
}
.zero {
grid-column: 1 / 4;
}