JavaScript – A simple calculator with lots Bootstrap

Posted on October 11, 2015 by

Have you ever dreamt of making the simplest application for calculating two numbers?

Nope? Me also. But anyhow, I have started to make it only with JavaScript, without jQuery and it turned out to be fun after some time. That is the final result:

The interesting part about it, is that it uses cookies with JS. I have copied the code for the cookies from here with small editions – http://www.w3schools.com/js/js_cookies.asp. It worked pretty well.

Another thing to note in this example is the usage of “addEventListener”, which I managed to use pretty well. As a bad practice, must be mentioned the fact that the CSS, HTML and the JS is all in one file. But I somehow did not feel the need to separate it, because it was less than 200 lines all together.

I even made a small video, to test my maths skills here:

Pretty much that is all. Here comes the code:

<!DOCTYPE HTML>
<html>
<head>
	<title>Lucky Mathematician</title>
</head>
<body>
    <div class="container" id="main_div">
        <div id="div_1" ></div>
        <div id="div_2" ></div>
        <input id="result_try" type="number" />  
        <form id="my_form">
            <input type ="submit" class="btn btn-success" value="Check your knowledge!" />
        </form>
        <form id="my_deletion" >
            <input type ="submit" class="btn btn-info" value="Reset"/>
        </form>
        <div id="my_result"></div>
        <div id="score"></div>
    </div>
    

    </body>
    <script> 
    window.onload = function(){ 
        document.getElementById('my_result').innerHTML = "Result -> " + getCookie("current_result");
        var first_random = Math.floor((Math.random() * 10) + 1);
        var second_random = Math.floor((Math.random() * 100) + 1);
        var result = parseInt(document.cookie);
        loadTwoRandoms();
        checkCookie();
        document.getElementById("my_form").addEventListener("submit", check);
        document.getElementById("my_deletion").addEventListener("submit",deleteCookies);    
        
        function deleteCookies(){
            setCookie("current_result",0,30);
        }
        
        function check(){
            console.log(first_random);
            var result = parseInt(getCookie("current_result"));
            console.log(result);
            
            var try_number = parseInt(document.getElementById('result_try').value,10);
            var score = document.cookie;
            if (try_number == first_random+second_random){
                document.getElementById('my_result').innerHTML = "Bravo!";
                result +=1 ;
                setCookie("current_result",result,30);
            }   else    {
                document.getElementById('my_result').innerHTML = "Nope...";
                result -=1 ;
                setCookie("current_result",result,30);
            }
            
        }
        
        function loadTwoRandoms(){
            console.log("random loaded here");
            var field1 = document.getElementById('div_1');
            var field2 = document.getElementById('div_2');
            
            field1.innerHTML = first_random;
            field2.innerHTML = second_random;
        }
        
        function setCookie(cname,cvalue,exdays) {
            var d = new Date();
            d.setTime(d.getTime() + (exdays*24*60*60*1000));
            var expires = "expires=" + d.toGMTString();
            document.cookie = cname+"="+cvalue+"; "+expires;
            }
        
        function getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for(var i=0; i<ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1);
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
            }
            return "";
            }
        
        function checkCookie() {
            var score = getCookie("current_result");
            if (score != "") {
            } else {
            result = 0;
            if (score != "" && score != null) {
               setCookie("current_result", score, 30);
            }
            }
        }
        
        
    };
    </script>
    <style>
    #my_result{
        background-color:yellow;
    }
    #main_div {
        outline: 1px solid orange;
        position:absolute;
        width:40%;
        height:40%;
        z-index:15;
        top:10%;
        left:10%;
        margin:-100px 0 0 -150px;
        background:red;
    }
    
    button, input {
        margin: 10px;
        padding: 10px;
    }

    
    div{
        margin-top: 15px;
        margin-bottom:15px;
        font-family: 'Oswald', sans-serif;
        font-size: 22px;
    }
    </style>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

<!DOCTYPE HTML>

<html>

<head>

<title>Lucky Mathematician</title>

</head>

<body>

</form>

</form>

</div>

</body>

window.onload = function(){

document.getElementById('my_result').innerHTML = "Result -> " + getCookie("current_result");

var first_random = Math.floor((Math.random() * 10) + 1);

var second_random = Math.floor((Math.random() * 100) + 1);

var result = parseInt(document.cookie);

loadTwoRandoms();

checkCookie();

document.getElementById("my_form").addEventListener("submit", check);

document.getElementById("my_deletion").addEventListener("submit",deleteCookies);

function deleteCookies(){

setCookie("current_result",0,30);

}

function check(){

console.log(first_random);

var result = parseInt(getCookie("current_result"));

console.log(result);

var try_number = parseInt(document.getElementById('result_try').value,10);

var score = document.cookie;

if (try_number == first_random+second_random){

document.getElementById('my_result').innerHTML = "Bravo!";

result +=1 ;

setCookie("current_result",result,30);

} else {

document.getElementById('my_result').innerHTML = "Nope...";

result -=1 ;

setCookie("current_result",result,30);

}

function loadTwoRandoms(){

console.log("random loaded here");

var field1 = document.getElementById('div_1');

var field2 = document.getElementById('div_2');

field1.innerHTML = first_random;

field2.innerHTML = second_random;

}

function setCookie(cname,cvalue,exdays) {

var d = new Date();

d.setTime(d.getTime() + (exdays*24*60*60*1000));

var expires = "expires=" + d.toGMTString();

document.cookie = cname+"="+cvalue+"; "+expires;

}

function getCookie(cname) {

var name = cname + "=";

var ca = document.cookie.split(';');

for(var i=0; i<ca.length; i++) {

var c = ca[i];

while (c.charAt(0)==' ') c = c.substring(1);

if (c.indexOf(name) == 0) {

return c.substring(name.length, c.length);

}

return "";

}

function checkCookie() {

var score = getCookie("current_result");

if (score != "") {

} else {

result = 0;

if (score != "" && score != null) {

setCookie("current_result", score, 30);

}

};

</script>

<style>

#my_result{

background-color:yellow;

}

#main_div {

outline: 1px solid orange;

position:absolute;

width:40%;

height:40%;

z-index:15;

top:10%;

left:10%;

margin:-100px 0 0 -150px;

background:red;

}

button, input {

margin: 10px;

padding: 10px;

}

div{

margin-top: 15px;

margin-bottom:15px;

font-family: 'Oswald', sans-serif;

font-size: 22px;

}

</style>

</html>

Available also in GitHub here.

Enjoy it! 😀

Tagged with: Bootstrap, Cookies in JS, javascript, Simple Calculator

JavaScript – A simple calculator with lots Bootstrap

Related posts: