I've built a calculator. I would not use angular or bootstrap because I am becoming addicted to them. I also wanted to check for double '.' use, and to limit the screens max text length but did not make it in time.
I am new to JavaScript, CSS and HTML and would like to know how I am doing.
<html>
<body style="font-size: 40px; ">
<div style=" max-width: 350px;" class="bordered">
<div class="cont bordered"> <label style="max-width:340px;" id="screen">welcome!</label> </div>
<div class="cont">
<button class="bt" onclick="code(7)">7</button>
<button class="bt" onclick="code(8)">8</button>
<button class="bt" onclick="code(9)">9</button>
<button class="bt" style="margin-left: 50px; " onclick="code('+')">+</button>
<button class="bt" onclick="code('-')">-</button>
<button class="bt" onclick="clr()">C</button>
</div>
<div class="cont">
<button class="bt" onclick="code(4)">4</button>
<button class="bt" onclick="code(5)">5</button>
<button class="bt" onclick="code(6)">6</button>
<button class="bt" style="margin-left: 50px; " onclick="code('*')">*</button>
<button class="bt" onclick="code('/')">/</button>
</div>
<div class="cont">
<button class="bt" onclick="code(1)">1</button>
<button class="bt" onclick="code(2)">2</button>
<button class="bt" onclick="code(3)">3</button>
<button class="bt" style="margin-left: 50px; " onclick="code('%')">%</button>
<button class="bt" onclick="code('(')">(</button>
<button class="bt" onclick="code(')')">)</button>
</div>
<div class="cont">
<button class="bt" onclick="code(0)" style=" padding-right: 25px; padding-left: 25px;"> 0 </button>
<button class="bt" style="; margin-left:2px; padding:0 10px 0 10px;" onclick="code('.')">,</button>
<button class="bt" onclick="compiler()" style=" padding-right: 30px; padding-left: 30px; margin-left: 50px;"> = </button>
</div>
</div>
</body>
<script >
//regular expression for input controll and users value holder.
var rg = new RegExp(/\d/);
var codestr = "";
//"event listener" for button presses and input controll
var code = function(str){
var tested = rg.test(codestr.substring(codestr.length-1));
var sstring = (codestr.substring(codestr.length-1));
(str=="." && !tested ?
codestr = codestr+"0"+str : ((rg.test(str) || str=="(" || str==")") ?
codestr = codestr+str : (tested || sstring=="(" || sstring==")") ?
codestr= codestr+str: restring(str) )) ;
document.getElementById('screen').innerHTML = codestr;
};
function restring(str){ codestr = (codestr.substring(0,codestr.length -1))+str };
//user input interpreter ( calculator logic )
var compiler = function(){
var rezPlz = new Function('return '+codestr)();
codestr = ""+rezPlz;
document.getElementById('screen').innerHTML = codestr;
};
//clear button
function clr(){codestr="";
document.getElementById('screen').innerHTML = "0";}
</script>
</html>
<style rel="stylesheet" type="text/css">
button{
font-size:40px;
background-color: #FAFAFA;
}
.cont{
margin: 5px;
padding-top:6px
}
.bt{
display: inline;
padding: 0 5px 0 5px;
margin-top: 0px;
border: solid;
border-width: 1px;
border-color: blue;
}
.bt:hover{
background-color: darkblue;
color:#F0F0F0;
}
.bordered{
border:solid;
border-width: 2px;
border-color : blue;
outline:solid;
outline-width:1px;
outline-color:aqua;
}
</style>
I know it's not mobile friendly, but that's what I get for doing a no-bootstrap project in short time.