Initial Commit
Added: - Basic Web Ide, thanks ShaiUI - Simple calculator Signed-off-by: Abdulmujeeb Raji <abdul@midnadimple.com>
This commit is contained in:
commit
b81aad3c1d
|
|
@ -0,0 +1,127 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
</head>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 25%;
|
||||
height: 20%;
|
||||
background: #3083dc;
|
||||
font-size: 75px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid white;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
filter: brightness(75%);
|
||||
}
|
||||
|
||||
.btn-op {
|
||||
background:#fb5012;
|
||||
color:#fdffff;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<body onload='init()'>
|
||||
|
||||
<div id='result' style='
|
||||
width:100%;
|
||||
height:20%;
|
||||
background:#191516;
|
||||
color:#fdffff;
|
||||
font-size:75px;
|
||||
text-align: right;'></div>
|
||||
|
||||
<div style='
|
||||
width:100%;
|
||||
height:79.9%;
|
||||
font-size: 0;
|
||||
'>
|
||||
<div class='btn btn-op' style='width:50%'>C</div>
|
||||
<div class='btn btn-op' style='width:50%'>=</div>
|
||||
<div class='btn'>1</div>
|
||||
<div class='btn'>2</div>
|
||||
<div class='btn'>3</div>
|
||||
<div class='btn btn-op'>÷</div>
|
||||
<div class='btn'>4</div>
|
||||
<div class='btn'>5</div>
|
||||
<div class='btn'>6</div>
|
||||
<div class='btn btn-op'>×</div>
|
||||
<div class='btn'>7</div>
|
||||
<div class='btn'>8</div>
|
||||
<div class='btn'>9</div>
|
||||
<div class='btn btn-op'>+</div>
|
||||
<div class='btn btn-op'>.</div>
|
||||
<div class='btn'>0</div>
|
||||
<div class='btn btn-op'>^</div>
|
||||
<div class='btn btn-op'>-</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
<script>
|
||||
var curVal = 0;
|
||||
var curOp = '';
|
||||
|
||||
var nums = ['.', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
|
||||
var mathTable = {
|
||||
'+': function(x) { curVal += x },
|
||||
'-': function(x) { curVal -= x },
|
||||
'^': function(x) { curVal = curVal ** x },
|
||||
'×': function(x) { curVal *= x },
|
||||
'÷': function(x) { curVal /= x },
|
||||
'C': function(x) { curVal = 0 },
|
||||
'=': function(x) { mathTable[curOp](x) },
|
||||
};
|
||||
|
||||
function init() {
|
||||
btns = document.querySelectorAll('.btn');
|
||||
result = document.querySelector('#result');
|
||||
|
||||
result.innerHTML = curVal;
|
||||
|
||||
btns.forEach(function(btn) {
|
||||
btn.onclick = function(event) {
|
||||
handleButton(this, result);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function handleButton(btn, result) {
|
||||
var op = btn.innerHTML;
|
||||
|
||||
if (nums.includes(op)) {
|
||||
if (result.innerHTML == curVal) {
|
||||
result.innerHTML = '';
|
||||
}
|
||||
result.innerHTML += op;
|
||||
} else {
|
||||
var num = Number(result.innerHTML);
|
||||
if (curOp != '' || op == 'C') {
|
||||
mathTable[op](num);
|
||||
} else {
|
||||
curVal = num;
|
||||
}
|
||||
result.innerHTML = curVal;
|
||||
|
||||
if (op == 'C' || op == '=') {
|
||||
op = '';
|
||||
}
|
||||
curOp = op;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>IDE</title>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/ace/1.33.1/ace.js'></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id='container'>
|
||||
|
||||
<div id="editor">
|
||||
</div>
|
||||
|
||||
<iframe id='iframe' frameBorder="0">
|
||||
</iframe>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<style>
|
||||
|
||||
html,body { margin:0; padding:0; height:100%; width:100%; overflow: hidden;}
|
||||
|
||||
#editor {
|
||||
height: 100%;
|
||||
width:50%;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
#container {
|
||||
height:100%;
|
||||
width:auto;
|
||||
white-space : nowrap;
|
||||
overflow : hidden;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
#iframe {
|
||||
height:100%;
|
||||
display:inline-block;
|
||||
width:50%;
|
||||
}
|
||||
|
||||
/* disable tag matching */
|
||||
.ace_editor .ace_marker-layer .ace_bracket { display: none }
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
var hasLoadedOriginal = false;
|
||||
|
||||
function update()
|
||||
{
|
||||
var idoc = document.getElementById('iframe').contentWindow.document;
|
||||
var writeVal = '';
|
||||
|
||||
if (!hasLoadedOriginal) {
|
||||
writeVal = localStorage['currentWork'];
|
||||
hasLoadedOriginal = true;
|
||||
} else {
|
||||
writeVal = editor.getValue();
|
||||
}
|
||||
|
||||
idoc.open();
|
||||
idoc.write(writeVal);
|
||||
idoc.close();
|
||||
|
||||
localStorage['currentWork'] = editor.getValue();
|
||||
}
|
||||
|
||||
function setupEditor()
|
||||
{
|
||||
window.editor = ace.edit("editor");
|
||||
editor.setTheme("ace/theme/monokai");
|
||||
editor.getSession().setMode("ace/mode/html");
|
||||
if (!localStorage['currentWork']) {
|
||||
localStorage['currentWork'] = `<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
|
||||
</html>`
|
||||
}
|
||||
editor.setValue(localStorage['currentWork'], 1); //1 = moves cursor to end
|
||||
|
||||
editor.getSession().on('change', function() {
|
||||
update();
|
||||
});
|
||||
|
||||
editor.focus();
|
||||
|
||||
|
||||
editor.setOptions({
|
||||
fontSize: "16pt",
|
||||
showLineNumbers: false,
|
||||
showGutter: false,
|
||||
vScrollBarAlwaysVisible:true,
|
||||
enableBasicAutocompletion: false, enableLiveAutocompletion: false
|
||||
});
|
||||
|
||||
editor.setShowPrintMargin(false);
|
||||
editor.setBehavioursEnabled(false);
|
||||
}
|
||||
|
||||
setupEditor();
|
||||
update();
|
||||
</script>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue