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

32
calculator/style.css
View File

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