Hey there, I hope you're having a great start to the New Year! Recently, I've been working on creating a calculator using HTML, CSS, and JavaScript. One thing that's been puzzling me is how to make sure that the content in the input field doesn't disappear when the page is refreshed. I'm reaching out for some assistance on this issue. Just to note, I haven't implemented much logic into the calculator yet.
Here's the code snippet:
var text = document.getElementById("field");
function type(word) {
text.value += word;
}* {
margin: 0;
padding: 0;
color: white;
}
body {
background-color: black;
display: flex;
justify-content: center;
transform: translateY(50%);
}
input {
background-color: transparent;
border: 1px solid white;
width: 250px;
height: 70px;
margin-bottom: 20px;
font-size: xx-large;
text-align: right;
}
td {
width: 60px;
height: 60px;
text-align: center;
border-radius: 50%;
border: 1px solid white;
cursor: pointer;
font-weight: bold;
font-size: larger;
}
td:hover {
color: black;
background-color: white;
}<html>
<head>
<title>Calculator</title>
</head>
<body>
<main>
<input type="text" id="field" maxlength="11">
<table>
<tr>
<td onclick="type('%')">%</td>
<td onclick="text.value=''">C</td>
<td onclick="type(')')">)</td>
<td onclick="type('÷')">÷</td>
</tr>
<tr>
<td onclick="type('7')">7</td>
<td onclick="type('8')">8</td>
<td onclick="type('9')">9</td>
<td onclick="type('×')">×</td>
</tr>
<tr>
<td onclick="type('4')">4</td>
<td onclick="type('5')">5</td>
<td onclick="type('6')">6</td>
<td onclick="type('-')">-</td>
</tr>
<tr>
<td onclick="type('1')">1</td>
<td onclick="type('2')">2</td>
<td onclick="type('3')">3</td>
<td onclick="type('+')">+</td>
</tr>
<tr>
<td onclick="type('(-')">+/-</td>
<td onclick="type('0')">0</td>
<td onclick="type('.')">.</td>
<td>=</td>
</tr>
</table>
</main>
</body>
</html>