duperweb/firscalc.html

## firscalc.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>dupercalulator</title>
</head>
<style>
  main {
    width: 30%;
    margin: 0 auto;

    background: rgb(39, 45, 63);
    color: rgb(94, 153, 163);
    box-sizing: border-box;
    text-align: left;
}


input {
    margin: 5px;
}
input[type="button"] {
    color: maroon;
    background: lightseagreen;
    min-width: 48px;
    min-height: 48px;
    width: 49px;
    font-size: 16px;
    font-weight: bolder;
}
 </style>

<script>
  // global variable goes here:
var btnlist = document.getElementsByClassName("button");
var display = document.getElementById("show");


//function section
// parameter is the value that will pass
// when the button is clicked

function clearInput(val) {
// THE VALUE OF INPUT TEXT WILL BE
//VALUE OF THE BUTTON CLICKED
    document.getElementById("show").value = val;
}

// any button clicked
function calc(val) {
    document.getElementById("show").value += val  || 0;
}

/// evaluation is here
function e() {
   try {
       clearInput(eval(document.getElementById("show").value))
   } catch(e) {
    clearInput('ERROR');
   }
}
/* DUPERWEB IS ALL WE ARE */

</script>
<body>

    <main id="container">

        <header>
            <h1> calculator</h1>
           <div>
                <!--readonly - NO KEYBOARD INPUT-->
                <input type="text"  id="show" readonly>
           </div>
            <nav>
                <input type="button" value="="  onclick="e('=')" class="button">
                <input type="button" value="Clear"  onclick="clearInput('')" class="button">
                <input type="button" class="button" value="." onclick="calc('.')">
                <!-- <input type="button" class="button" value="," onclick="calc(',')">
                <input type="button" class="button" value=")" onclick="calc(')')">
                <input type="button" class="button" value="(" onclick="calc('(')"> -->
                <input type="button" class="button" value="%" onclick="calc('%')">
            </nav>
            <aside>
                <!--passing the value as an argument-->
                <input type="button" value="+"  onclick="calc('+')" class="button">
                <input type="button" value="-"  onclick="calc('-')" class="button">
                <input type="button" value="/"  onclick="calc('/')" class="button">
                <input type="button" value="*"  onclick="calc('*')" class="button">
            </aside>
        </header>
        <section>
           <div>
            <!--passing the value as an argument-->
                <input type="button" class="button" value="1" onclick="calc(1)">
                <input type="button" class="button" value="2" onclick="calc(2)">
                <input type="button" class="button" value="3" onclick="calc(3)">
           </div>
           <div>
            <!--passing the value as an argument-->
                <input type="button" class="button" value="4" onclick="calc(4)">
                <input type="button" class="button" value="5" onclick="calc(5)">
                <input type="button" class="button" value="6" onclick="calc(6)">
           </div>
           <div>
            <!--passing the value as an argument-->
                <input type="button" class="button" value="7" onclick="calc(7)">
                <input type="button" class="button" value="8" onclick="calc(8)">
                <input type="button" class="button" value="9" onclick="calc(9)">
           </div>
        </section>
    </main>


</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>dupercalulator</title>
	</head>
	<style>
	main {
	width: 30%;
	margin: 0 auto;

	background: rgb(39, 45, 63);
	color: rgb(94, 153, 163);
	box-sizing: border-box;
	text-align: left;
	}


	input {
	margin: 5px;
	}
	input[type="button"] {
	color: maroon;
	background: lightseagreen;
	min-width: 48px;
	min-height: 48px;
	width: 49px;
	font-size: 16px;
	font-weight: bolder;
	}
	</style>

	<script>
	// global variable goes here:
	var btnlist = document.getElementsByClassName("button");
	var display = document.getElementById("show");


	//function section
	// parameter is the value that will pass
	// when the button is clicked

	function clearInput(val) {
	// THE VALUE OF INPUT TEXT WILL BE
	//VALUE OF THE BUTTON CLICKED
	document.getElementById("show").value = val;
	}

	// any button clicked
	function calc(val) {
	document.getElementById("show").value += val \|\| 0;
	}

	/// evaluation is here
	function e() {
	try {
	clearInput(eval(document.getElementById("show").value))
	} catch(e) {
	clearInput('ERROR');
	}
	}
	/* DUPERWEB IS ALL WE ARE */

	</script>
	<body>

	<main id="container">

	<header>
	<h1> calculator</h1>
	<div>
	<!--readonly - NO KEYBOARD INPUT-->
	<input type="text" id="show" readonly>
	</div>
	<nav>
	<input type="button" value="=" onclick="e('=')" class="button">
	<input type="button" value="Clear" onclick="clearInput('')" class="button">
	<input type="button" class="button" value="." onclick="calc('.')">
	<!-- <input type="button" class="button" value="," onclick="calc(',')">
	<input type="button" class="button" value=")" onclick="calc(')')">
	<input type="button" class="button" value="(" onclick="calc('(')"> -->
	<input type="button" class="button" value="%" onclick="calc('%')">
	</nav>
	<aside>
	<!--passing the value as an argument-->
	<input type="button" value="+" onclick="calc('+')" class="button">
	<input type="button" value="-" onclick="calc('-')" class="button">
	<input type="button" value="/" onclick="calc('/')" class="button">
	<input type="button" value="" onclick="calc('')" class="button">
	</aside>
	</header>
	<section>
	<div>
	<!--passing the value as an argument-->
	<input type="button" class="button" value="1" onclick="calc(1)">
	<input type="button" class="button" value="2" onclick="calc(2)">
	<input type="button" class="button" value="3" onclick="calc(3)">
	</div>
	<div>
	<!--passing the value as an argument-->
	<input type="button" class="button" value="4" onclick="calc(4)">
	<input type="button" class="button" value="5" onclick="calc(5)">
	<input type="button" class="button" value="6" onclick="calc(6)">
	</div>
	<div>
	<!--passing the value as an argument-->
	<input type="button" class="button" value="7" onclick="calc(7)">
	<input type="button" class="button" value="8" onclick="calc(8)">
	<input type="button" class="button" value="9" onclick="calc(9)">
	</div>
	</section>
	</main>



	</body>
	</html>