Calculator Using HTML CSS and Javascript



DevForum chia sẻ các bạn mẫu Máy tính nhỏ gọn được custom với diện mạo mới mẻ sử dụng Javascript
 

1. HTML

<div class="main-wrapper">
		<div id="op-history-container" class="hide"></div>

		<div class="inputs-wrapper">
			<i class="fas fa-history" id="toggle-history"></i>
			<input type="text" id="input-top">
			<input type="text" id="input-bottom" placeholder="0">
		</div>

		<div class="gradient-divider"></div>

		<div class="row">
			<div data-set="7" class="num">7</div>
			<div data-set="8" class="num">8</div>
			<div data-set="9" class="num">9</div>
			<div data-set="/" class="op">÷</div>
		</div>

		<div class="row">
			<div data-set="4" class="num">4</div>
			<div data-set="5" class="num">5</div>
			<div data-set="6" class="num">6</div>
			<div data-set="*" class="op">x</div>
		</div>

		<div class="row">
			<div data-set="1" class="num">1</div>
			<div data-set="2" class="num">2</div>
			<div data-set="3" class="num">3</div>
			<div data-set="-" class="op">-</div>
		</div>

		<div class="row">
			<div class="num" id="reset">C</div>
			<div data-set="0" class="num">0</div>
			<div data-set="." class="num">.</div>
			<div data-set="+" class="op">+</div>
		</div>

		<div id="equal" data-set="=">
			=
		</div>
	</div>
	
	<p class="disclaimer" style="opacity: .8; letter-spacing: 1px; font-size: 16px;">Custom by <a href="https://devforum.info" target="_blank"><span style="font-family: 'Pacifico'"> DevForum</span></a>.</p>

2. CSS

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@300;400;600&display=swap');
		@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			outline: none;
			font-family: "Open Sans", sans-serif;
			user-select: none;
		}

		body {
			background: #394965;
			margin: 0;
			height: 100vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.main-wrapper {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: white;
			border-radius: 5px;
			width: 320px;
			position: relative;
			box-shadow: 0 0 60px rgba(143, 205, 255, 0.5);
		}

		.fa-history {
			position: absolute;
			left: 9px;
			top: 9px;
			color: #58b3ff;
			transition: 300ms ease-out;
			z-index: 3;
			padding: 12px;
			opacity: 0.7;
		}

		.fa-history:hover {
			opacity: 1;
		}

		.fa-history-toggle {
			color: white;
		}

		#op-history-container {
			position: absolute;
			top: 0;
			height: 29%;
			width: 100%;
			background: rgba(88, 179, 255, 0.925);
			z-index: 1;
			border-radius: 5px 5px 0 0;
			padding: 12px 36px;
			text-align: right;
			overflow: auto;
			transition: all 300ms ease-out;
		}

		#op-history-container::-webkit-scrollbar {
			width: 9px;
			background: white;
			border-radius: 10px 10px 0 0;
		}

		#op-history-container::-webkit-scrollbar-thumb {
			border-radius: 10px;
			background: #58b3ff;
		}

		.op-item {
			color: white;
			padding: 6px 0;
		}

		input {
			border: none;
			padding: 12px 36px;
			width: 100%;
			text-align: right;
			letter-spacing: 3px;
			font-weight: 300;
			pointer-events: none;
		}

		.gradient-divider {
			width: 100%;
			border: 0;
			border-top: 2px solid #e6f5ff;
			background: linear-gradient(#e6f5ff, rgba(0, 0, 0, 0));
			padding: 12px 0;
		}

		#input-top {
			font-size: 18px;
			color: #cad0d4;
			border-radius: 5px;
			padding-top: 18px;
			padding-bottom: 0;
			letter-spacing: 5px;
		}

		#input-bottom {
			font-size: 60px;
			color: #929ea7;
			height: 106px;
			letter-spacing: 5px;
		}

		.row {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 12px 9px;
		}

		.num {
			font-weight: 600;
			color: #74828f;
			padding: 24px;
			border-radius: 50%;
			width: 24px;
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		::placeholder {
			color: #74828f;
			opacity: 0.3;
		}

		.op {
			border-radius: 50%;
			box-shadow: 0 9px 12px #e3f3ff;
			padding: 24px;
			width: 6px;
			height: 6px;
			color: #a5d7ff;
			font-size: 18px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		#reset {
			color: #ff8787;
		}

		#equal {
			background: #58b3ff;
			color: white;
			font-size: 24px;
			width: 70%;
			text-align: center;
			border-radius: 3px;
			padding: 9px 0;
			position: relative;
			top: 21px;
			box-shadow: 0 0 18px rgba(88, 179, 255, 0.5);
		}

		.hide {
			opacity: 0;
			pointer-events: none;
			transition: all 300ms ease-out;
		}

		.disclaimer {
			margin-top: 4em;
			color: #58b3ff;
			opacity: 0.5 !important;
		}

		.disclaimer a {
			color: #58b3ff;
			text-decoration: none;
		}

		.disclaimer span:hover {
			cursor: pointer;
		}

		@media (max-height: 720px) {
			.main-wrapper {
				transform: scale(0.8);
			}

			.disclaimer {
				margin-top: 0;
			}
		}

3. JAVASCRIPT

//Chèn thêm 2 thẻ script Js và Font bên dưới
//https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js
//https://kit.fontawesome.com/56942480bb.js

// Variables
		var inputTop = document.getElementById("input-top");
		var inputBottom = document.getElementById("input-bottom");

		var nums = document.querySelectorAll(".num");
		var op = document.querySelectorAll(".op");

		var reset = document.getElementById("reset");
		var equal = document.getElementById("equal");

		var opHistoryContainer = document.getElementById("op-history-container");
		var opHistory = [];

		var toggleHistory = document.getElementById("toggle-history");

		var done = false;

// Get each element with the class ".num"
for (let i = 0; i < nums.length; i++) {
  // When a ".num" element is clicked, display its data-set in inputBottom.
  nums[i].addEventListener("click", () => {
    // If the equal button has been clicked (done), replace inputBottom value with the new one, if not, add it to the current.
    if (done) {
    	inputBottom.value = nums[i].getAttribute("data-set");
    	done = false;
    } else {
    	inputBottom.value += nums[i].getAttribute("data-set");
    }

    gsap.to(nums[i], 0.25, {
    	scale: 1.8,
    	transformOrigin: "center",
    	ease: Back.easeOut
    });
    gsap.to(nums[i], 0.25, {
    	scale: 1,
    	delay: 0.25,
    	transformOrigin: "center",
    	ease: Back.easeOut
    });

    inputBottomLength();
});
}

// Get each element with the class ".op"
for (let i = 0; i < op.length; i++) {
  // When the ".op" element is clicked, display its data-set in inputBottom
  op[i].addEventListener("click", () => {
  	done = false;
  	inputBottom.value += op[i].getAttribute("data-set");

  	gsap.to(op[i], 0.25, {
  		scale: 1.2,
  		transformOrigin: "center",
  		ease: Power3.easeOut
  	});
  	gsap.to(op[i], 0.25, {
  		scale: 1,
  		delay: 0.25,
  		transformOrigin: "center",
  		ease: Back.easeOut
  	});

  	inputBottomLength();
  });
}

// When the equal is clicked
equal.addEventListener("click", () => {
  // If inputBottom value isn't empty and isn't undefined
  if (inputBottom.value != "" && inputBottom.value != "undefined") {
    // Pass the value to inputTop and then clear it
    inputTop.value = inputBottom.value;
    inputBottom.value = "";
    // Then try to evaluate the result, add it to the value of inputBottom and push it to opHistory array
    try {
    	inputBottom.value = eval(inputTop.value);
    	opHistory.push(`${inputTop.value} = ${inputBottom.value}`);

    	done = true;

      // For every item in the opHistory array, create a 

element in the HTML container var newOpItem = `

${inputTop.value} = ${inputBottom.value}

`; opHistoryContainer.insertAdjacentHTML("afterbegin", newOpItem); createHistoryOp(); } catch {} } // Make the button squashy gsap.to(equal, 0.15, { scaleX: 0.95, scaleY: 0.95 }); gsap.to(equal, 1, { delay: 0.15, scaleX: 1, scaleY: 1, ease: Elastic.easeOut }); }); // Reset all inputs when C is clicked reset.addEventListener("click", () => { inputTop.value = ""; inputBottom.value = ""; inputBottom.style.fontSize = "60px"; done = false; }); // Reduce the fontSize of inputBottom if it exceeds X chars. function inputBottomLength() { var inputBottomValue = inputBottom.value; if (inputBottomValue.length < 6) { inputBottom.style.fontSize = "60px"; } else if (inputBottomValue.length === 6) { inputBottom.style.fontSize = "42px"; } else if (inputBottomValue.length === 9) { inputBottom.style.fontSize = "30px"; } else if (inputBottomValue.length === 12) { inputBottom.style.fontSize = "24px"; } else if (inputBottomValue.length === 18) { inputBottom.style.fontSize = "12px"; } } function createHistoryOp() { opHistory.forEach((item) => {}); } toggleHistory.addEventListener("click", () => { opHistoryContainer.classList.toggle("hide"); toggleHistory.classList.toggle("fa-history-toggle"); });

 


Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm Forum.