Hey everyone, let’s take a trip down memory lane in today’s coding session! We’ll be creating an Old Aesthetic Calculator using just HTML and CSS. No need for anything fancy – just simple coding to bring back that classic, nostalgic vibe.
In this tutorial, we’re not just building a calculator; we’re embracing the charm of old-school aesthetics. Whether you’re a seasoned coder or just starting out, this is a great opportunity to have some fun with your skills and create a calculator with a vintage touch.
Join me on this laid-back coding journey into the world of Old Aesthetic Calculators. Let’s keep it simple with HTML and CSS, creating something functional and infused with a touch of vintage charm. Ready to add a bit of old-school flair to your projects? Let’s get started on our Old Aesthetic Calculator adventure – the HTML and CSS way!
HTML :
The provided code is an HTML document that represents an old aesthetic calculator. It consists of a form with an input field and various buttons representing numbers, mathematical operators, and a clear button. The calculator allows users to perform basic arithmetic operations and displays the result in the input field when the equal button is clicked. The design of the calculator has an old-fashioned aesthetic.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Old Aesthetic Calculator</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<form action="" name="calc" class="calculator">
<input type="text" class="value" readonly name="txt" />
<span class="num clear" onclick="calc.txt.value=''"><i>C</i></span>
<span class="num" onclick="calc.txt.value+='/'"><i>/</i></span>
<span class="num" onclick="calc.txt.value+='*'"><i>*</i></span>
<span class="num" onclick="calc.txt.value+='7'"><i>7</i></span>
<span class="num" onclick="calc.txt.value+='8'"><i>8</i></span>
<span class="num" onclick="calc.txt.value+='9'"><i>9</i></span>
<span class="num" onclick="calc.txt.value+='-'"><i>-</i></span>
<span class="num" onclick="calc.txt.value+='4'"><i>4</i></span>
<span class="num" onclick="calc.txt.value+='5'"><i>5</i></span>
<span class="num" onclick="calc.txt.value+='6'"><i>6</i></span>
<span class="num plus" onclick="calc.txt.value+='+'"><i>+</i></span>
<span class="num" onclick="calc.txt.value+='1'"><i>1</i></span>
<span class="num" onclick="calc.txt.value+='2'"><i>2</i></span>
<span class="num" onclick="calc.txt.value+='3'"><i>3</i></span>
<span class="num" onclick="calc.txt.value+='0'"><i>0</i></span>
<span class="num" onclick="calc.txt.value+='00'"><i>00</i></span>
<span class="num" onclick="calc.txt.value+='.'"><i>.</i></span>
<span class="num equal" onclick="document.calc.txt.value=eval(calc.txt.value)"><i>=</i></span>
</form>
</div>
<!-- partial -->
</body>
</html>
CSS :
The provided CSS code styles the old aesthetic calculator. It sets the font family to “Courier Prime” and applies a dark background color to the body. The container element represents the calculator’s layout and is styled with padding, border-radius, and box-shadow to create a 3D effect. The span elements represent the calculator buttons and are styled with background gradients, box-shadow, and border-radius. The active state of the buttons is highlighted with a brightness filter. The calculator’s display input field is styled with a background color, border, and box-shadow. The clear and equal buttons have specific styles for their appearance.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Courier Prime", monospace;
}
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
background-color: #202020;
}
.container {
position: relative;
min-width: 300px;
min-height: 400px;
padding: 40px 30px 30px;
border-radius: 20px;
box-shadow: 25px 25px 75px rgba(0, 0, 0, 0.25),
10px 10px 70px rgba(0, 0, 0, 0.25), inset -5px -5px 15px rgba(0, 0, 0, 0.25),
inset 5px 5px 15px rgba(0, 0, 0, 0.25);
}
.container span {
color: #fff;
position: relative;
display: grid;
width: 80px;
place-items: center;
margin: 8px;
height: 80px;
background: linear-gradient(180deg, #2f2f2f, #3f3f3f);
box-shadow: inset -8px 0 8px rgba(0, 0, 0, 0.15),
inset 0 -8px 8px rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(0, 0, 0, 0.75),
10px 20px 25px rgba(0, 0, 0, 0.4);
user-select: none;
cursor: pointer;
font-weight: 400;
border-radius: 10px;
}
.calculator span:active {
filter: brightness(1.5);
}
.calculator span::before {
content: "";
position: absolute;
top: 3px;
left: 4px;
bottom: 14px;
right: 12px;
border-radius: 10px;
background: linear-gradient(90deg, #2d2d2d, #4d4d4d);
box-shadow: -5px -5px 15px rgba(0, 0, 0, 0.1),
10px 5px 10px rgba(0, 0, 0, 0.15);
border-left: 1px solid #0004;
border-bottom: 1px solid #0004;
border-top: 1px solid #0009;
}
.calculator span i {
position: relative;
font-style: normal;
font-size: 1.5em;
text-transform: uppercase;
}
.calculator {
position: relative;
display: grid;
}
.calculator .value {
position: relative;
grid-column: span 4;
height: 100px;
width: calc(100% - 20px);
left: 10px;
border: none;
outline: none;
background-color: #a7af7c;
margin-bottom: 10px;
border-radius: 10px;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.75);
text-align: right;
padding: 10px;
font-size: 2em;
}
.calculator .clear {
grid-column: span 2;
width: 180px;
background: #f00;
}
.calculator .clear::before {
background: linear-gradient(90deg, #d20000, #ffffff5c);
border-left: 1px solid #fff4;
border-bottom: 1px solid #fff4;
border-top: 1px solid #fff4;
}
.calculator .plus {
grid-row: span 2;
height: 180px;
}
.calculator .equal {
background: #2196f3;
}
.calculator .equal::before {
background: linear-gradient(90deg, #1479c9, #ffffff5c);
border-left: 1px solid #fff4;
border-bottom: 1px solid #fff4;
border-top: 1px solid #fff4;
}
There you have it – our Old Aesthetic Calculator is all set and ready to go! We’ve taken a nostalgic trip, keeping it simple with HTML and CSS. Whether you’re a coding pro or just getting started, this project is a fun way to infuse a touch of vintage charm into your web creations.
If your project hits a snag, no worries! Access the source code effortlessly. Click the Download button to kickstart your coding expedition. May your coding be filled with joy!
