Calculadora en HTML, CSS y javascript creada con ChatGPT

HTML

Pulsa "Ctrl + Intro" para ver en pantalla completa

CSS

* {
	box-sizing: border-box;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
	margin: 0;
	padding: 0;
	background-color: #f7f7f7;
}

.calculator {
	max-width: 350px;
	margin: 0 auto;
	background-color: #fff;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	overflow: hidden;
}

.display {
	padding: 10px;
	text-align: right;
}

.display input {
	width: 100%;
	height: 40px;
	padding: 5px 10px;
	font-size: 24px;
	border: none;
	border-radius: 5px;
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

.keys {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1px;
	background-color: #555;
}

button {
	cursor: pointer;
	background-color: #f7f7f7;
	color: #444;
	border: none;
	font-size: 24px;
	padding: 10px;
	transition: all 0.2s ease-in-out;
}

button:hover {
	background-color: #444;
}

button.operator {
	background-color: #ff9500;
	color: #fff;
}

button.operator:hover {
	background-color: #ff6600;
}

button.number {
	background-color: #fff;
}

Pulsa "Ctrl + Intro" para ver en pantalla completa

JavaScript / jQuery

// Variables
let calculation = "";
let result = document.getElementById("result");

// Numbers
document.getElementById("0").addEventListener("click", function() {
	appendNumber("0");
});

document.getElementById("1").addEventListener("click", function() {
	appendNumber("1");
});

document.getElementById("2").addEventListener("click", function() {
	appendNumber("2");
});

document.getElementById("3").addEventListener("click", function() {
	appendNumber("3");
});

document.getElementById("4").addEventListener("click", function() {
	appendNumber("4");
});

document.getElementById("5").addEventListener("click", function() {
	appendNumber("5");
});

document.getElementById("6").addEventListener("click", function() {
	appendNumber("6");
});

document.getElementById("7").addEventListener("click", function() {
	appendNumber("7");
});

document.getElementById("8").addEventListener("click", function() {
	appendNumber("8");
});

document.getElementById("9").addEventListener("click", function() {
	appendNumber("9");
});

document.getElementById("decimal").addEventListener("click", function() {
	appendDecimal();
});

// Operators
document.getElementById("add").addEventListener("click", function() {
	appendOperator("+");
});

document.getElementById("subtract").addEventListener("click", function() {
	appendOperator("-");
});

document.getElementById("multiply").addEventListener("click", function() {
	appendOperator("*");
});

document.getElementById("divide").addEventListener("click", function() {
	appendOperator("/");
});

document.getElementById("percent").addEventListener("click", function() {
	appendOperator("%");
});

document.getElementById("backspace").addEventListener("click", function() {
	backspace();
});

document.getElementById("clear").addEventListener("click", function() {
	clear();
});

document.getElementById("equals").addEventListener("click", function() {
	calculate();
});

// Functions
function appendNumber(number) {
	calculation += number;
	updateDisplay();
}

function appendDecimal() {
	if (calculation.indexOf(".") === -1) {
		if (calculation === "") {
			calculation += "0.";
		} else {
			calculation += ".";
		}
	}
	updateDisplay();
}

function appendOperator(operator) {
	if (calculation !== "" && calculation.charAt(calculation.length-1) !== operator) {
		calculation += operator;
	}
	updateDisplay();
}

function backspace() {
	calculation = calculation.slice(0, -1);
	updateDisplay();
}

function clear() {
	calculation = "";
	updateDisplay();
}

function updateDisplay() {
	result.value = calculation;
}

Pulsa "Ctrl + Intro" para ver en pantalla completa

Ver en vivo

Detalles

Autor: djalho

Creado: 11 marzo 2023

Última edición: 11 marzo 2023

Inglés

Español

Apache

Bootstrap 4

CSS3

Git

JavaScript

jQuery

Laravel

MySQL

PHP

ReactJS

SVG

Terminal

Calculadora en HTML, CSS y javascript creada con ChatGPT

HTML

CSS

JavaScript / jQuery

Detalles

Comentarios (0)