Project Details | Coders Hub

Calculator

Created by Adeyinka Ibraheem • Jan 01, 1970

About the Learner

Adeyinka Ibraheem

I love coding

Level:

Live Preview

VS Code Style Editor

C	$\"←\"$	÷	×
7	8	9	-
4	5	6	+
1	2	3
0	.	=

`; let cssCode = `body { margin: 0; padding: 0; width: 100%; height: 90vh; background: url(\"https://images.pexels.com/photos/900106/pexels-photo-900106.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940\"); background-position: right; background-size: cover; } .main { width: 400px; height: 550px; position: absolute; top: 50%; left: 50%; background: #5c5859; padding: 0; border-radius: 20px; box-shadow: 0 5px 50px 0 rgba(0, 0, 0, .5); box-shadow: inset 0 -5px 10px 5px rgba(0, 0, 0, .5); transform: translate(-50%, -50%) scale(1); /* display: none;*/ } .textview { width: 90%; height: 90px; position: absolute; right: 0; left: 0; margin: 24px auto 15px auto; font-size: 50px; text-align: right; font-family: \'Segment7Standard\'; font-family: \'Rubik\', sans-serif; background: #cddecc; color: #6d756b; border: none; padding: 0 5px 0 0; border-radius: 15px; overflow-x: scroll; box-shadow: inset 0 -5px 10px 2px #6b756a, 0 5px 10px 0px #3f423f; /* padding: 5px;*/ } table { position: absolute; /*top: 0; right: 0;*/ bottom: 0; /* left: 0;*/ /* display: flex; justify-content: center; align-items: center;*/ margin: 0 5px 23px 23px; } #clean { background: #ff1900; color: #fff; box-shadow: inset 0 5px 10px 0 #ff1900, inset 0 -5px 10px 3px #2d1f1fba, 0 5px 10px 0px #1e211e; } #clean:active { box-shadow: inset 0 -5px 10px 0 #ff1900, inset 0 5px 10px 3px #2d1f1fba, 0 0px 10px 0px #3f423f00; } #img { width: 80%; height: 80%; transform: scale(.9); } #plus, #first { height: 164px; } #equal, #second { width: 164px; } #second { background: #31e008; color:#fff; box-shadow: inset 0 5px 10px 0 #31e008, inset 0 -5px 10px 3px #2a5a22bf, 0 5px 10px 0px #1e211e; } #second:active { box-shadow: inset 0 -5px 10px 0 #31e008, inset 0 5px 10px 3px #2a5a22bf, 0 0px 10px 0px #3f423f00; } .button { width: 67px; height: 67px; font-size: 40px; font-weight: 900; position: relative; left: 0; right: 0; margin: 4px; border: none; border-radius: 18px; font-family: \'Rubik\', sans-serif; background: #f0eeef; color: #3b3b3c; box-shadow: inset 0 5px 10px 0 #fff, inset 0 -5px 10px 3px #847a7aba, 0 5px 10px 0px #1e211e; display: flex; justify-content: center; align-items: center; } .main table tr td .button:active { box-shadow: inset 0 -5px 10px 0 #fff, inset 0 5px 10px 3px #847a7aba, 0 0px 10px 0px #3f423f00; } .inner { height: 100%; width: 100%; position: relative; top: 0; bottom: 0; margin: auto 0 auto 0; /* background: green;*/ padding: 0; text-align: center; display: flex; justify-content: center; align-items: center; transform: translateY(-2.5px); } .main table tr td .button .inner:active { transform: translateY(2.5px) scale(.98); } #copy { position: fixed; bottom: 2.5px; left: 50%; transform: translateX(-50%); margin: 0 auto 2.5px auto; font-size: 20px; color: #fff; text-shadow: .5px .5px 5px #5c5859; } ::selection { background: transparent; color: auto; } `; let jsCode = `function insert(num) { var a = document.form.textview; a.value += num; } function opt(amd) { var view = document.form.textview; if (view.value != \"\") { view.value += amd; } } function zero() { var view = document.form.textview; if (view.value != \"\") { view.value += \'0\'; } } function equal() { var button = document.getElementsByClassName(\'none\'); var a = document.form.textview; var exp = a.value; if (exp) { try {a.value = eval(exp);} catch (e) { alert (\"Syntax Error!\"); document.form.textview.value = \'Syntax Error!\'; none(); } } if (a.value == 0) { a.value = \"\"; } if(a.value == \'Infinity\'){ document.form.textview.value = \"Can\'t divide by Zero!\"; // button.onclick =\'none()\'; alert(\'Can\\\'t divide by Zero!\') none(); } } function none() { alert(\'Press the Clear button!\'); } function clean() { document.form.textview.value = \'\'; } function back() { var exp = document.form.textview.value; document.form.textview.value = exp.substring(0, exp.length-1); }`; let currentEditor = 'html'; let editor = ace.edit("editor"); editor.setTheme("ace/theme/monokai"); editor.session.setMode("ace/mode/html"); editor.setValue(htmlCode); // Enable code wrapping editor.getSession().setUseWrapMode(true); function switchEditor(type) { currentEditor = type; document.getElementById("tab-html").classList.remove("active"); document.getElementById("tab-css").classList.remove("active"); document.getElementById("tab-js").classList.remove("active"); document.getElementById("tab-" + type).classList.add("active"); if (type === 'html') { editor.session.setMode("ace/mode/html"); editor.setValue(htmlCode); } else if (type === 'css') { editor.session.setMode("ace/mode/css"); editor.setValue(cssCode); } else if (type === 'js') { editor.session.setMode("ace/mode/javascript"); editor.setValue(jsCode); } editor.getSession().setUseWrapMode(true); // Ensure wrapping stays on } function runCode() { if (currentEditor === 'html') htmlCode = editor.getValue(); else if (currentEditor === 'css') cssCode = editor.getValue(); else if (currentEditor === 'js') jsCode = editor.getValue(); const iframe = document.getElementById("livePreview").contentWindow.document; iframe.open(); iframe.write(htmlCode + "" + "

Calculator

Calculator

About the Learner

Live Preview

VS Code Style Editor

Students Win Coding Hackathon 2025

New Robotics Bootcamp Announced

Python for Teens Workshop