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

add styling

Browse Source
This commit is contained in:
Marius Cerchez
2026-02-27 13:43:14 +02:00
parent 9148676625
commit 82bd8786cc
2 changed files with 34 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
calculator/index.html
View File

@@ -14,29 +14,29 @@
</head>
<body>
<div class="calculator">
<input type="text" class="display" />
<input type="text" id="display" disabled />
<button class="clear">C</button>
<button>←</button>
<button>÷</button>
<button class="operator">÷</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>×</button>
<button class="operator">×</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>-</button>
<button class="operator">-</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>+</button>
<button class="operator">+</button>
<button class="zero">0</button>
<button>=</button>
<button class="operator">=</button>
</div>
</body>
</html>

32
calculator/style.css
View File

@@ -12,16 +12,40 @@ body {
.calculator {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
border-collapse: collapse;
border-radius: 0;
}
.display {
#display {
grid-column: 1 / 5;
height: 50px;
width: 200px;
height: 100px;
width: 400px;
background-color: black;
color: white;
text-align: right;
font-size: 75px;
}
button {
height: 50px;
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 {