Prompt Details
Model
Chat - GPT-3.5 (gpt-3.5-turbo)
Token size
55 ($0.00010 / call)
Example input
To get started, simply copy the prompt and insert it. Then use it as a starting point to create your own look!
Example output
Sure! Here's an example of a streamlined and simple digital calculator using HTML, CSS, and JavaScript with a minimalist design:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="calculator">
<input type="text" id="result" readonly>
<div class="buttons">
<button onclick="clearResult()">C</button>
<button onclick="deleteLastCharacter()">←</button>
<button onclick="appendNumber(7)">7</button>
<button onclick="appendNumber(8)">8</button>
<button onclick="appendNumber(9)">9</button>
<button onclick="appendOperator('+')">+</button>
<button onclick="appendNumber(4)">4</button>
<button onclick="appendNumber(5)">5</button>
<button onclick="appendNumber(6)">6</button>
<button onclick="appendOperator('-')">-</button>
<button onclick="appendNumber(1)">1</button>
<button onclick="appendNumber(2)">2</button>
<button onclick="appendNumber(3)">3</button>
<button onclick="appendOperator('*')">*</button>
<button onclick="appendNumber(0)">0</button>
<button onclick="appendOperator('/')">/</button>
<button onclick="calculateResult()">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS (style.css):
```css
.calculator {
width: 200px;
margin: 0 auto;
text-align: center;
}
#result {
width: 100%;
margin-bottom: 10px;
padding: 5px;
font-size: 20px;
}
.buttons button {
width: 40px;
height: 40px;
margin: 2px;
border: none;
background-color: #f0f0f0;
color: #333;
font-size: 18px;
cursor: pointer;
}
.buttons button:hover {
background-color: #ccc;
}
.buttons button:active {
background-color: #999;
color: white;
}
```
JavaScript (script.js):
```javascript
let result = document.getElementById('result');
let expression = '';
function appendNumber(num) {
expression += num;
result.value = expression;
}
function appendOperator(operator) {
expression += operator;
result.value = expression;
}
function calculateResult() {
try {
result.value = eval(expression);
} catch (error) {
result.value = 'Error';
}
}
function clearResult() {
expression = '';
result.value = '';
}
function deleteLastCharacter() {
expression = expression.slice(0, -1);
result.value = expression;
}
```
This code creates a basic calculator with a simple, modern, and minimalist design. The calculator allows you to input numbers and perform addition, subtraction, multiplication, and division operations. The result is displayed in the text input field. The `eval` function is used to evaluate the expression, but please note that using `eval` can pose security risks, so it's important to validate and sanitize user input if you plan to use this code in a production environment.
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
35
Views
GPT-3.5-TURBO
✨Create your own web page containing your own calculator.
🔀 Get everything you need your own html, css and javascript code.
🔥Workable for any design, LEARN NOW!
...more
Added over 1 month ago
