Title: Calculator Code
Course: Fall 2023 - WEBD 164 (41934)

 | <!doctype html>
 | <html>
 | <head>
 | <meta charset="UTF-8">
 | <title>jQuery Midterm</title>
 | <style>
 | body {
 | font-family:sans-serif;
 | }
 | #numpad {
 | background-color:#444;
 | border-radius:10px;
 | margin:20px;
 | padding:20px;
 | width:241px;
 | }
 | #numscreen {
 | width:216px;
 | height:20px;
 | border-radius:8px;
 | padding:10px;
 | margin:3px;
 | background-color:lightgreen;
 | color:#222;
 | font-weight:bold;
 | font-size:1.2em;
 | text-align:right;
 | }
 | .num {
 | width:30px;
 | height:25px;
 | display:inline-block;
 | background-color:#ddd;
 | padding:15px 10px 10px 10px;
 | margin:5px 3px;
 | text-align:center;
 | border-radius:8px;
 | cursor:pointer;
 | }
 | </style>
 | </head>
 | <body>
 | <div id="numpad">
 | <div id="numscreen"></div>
 | <div class="numrow">
 | <div id="num-1" class="num">1</div>
 | <div id="num-2" class="num">2</div>
 | <div id="num-3" class="num">3</div>
 | <div id="plus" class="num">+</div>
 | </div>
 | <div class="numrow">
 | <div id="num-4" class="num">4</div>
 | <div id="num-5" class="num">5</div>
 | <div id="num-6" class="num">6</div>
 | <div id="minus" class="num">-</div>
 | </div>
 | <div class="numrow">
 | <div id="num-7" class="num">7</div>
 | <div id="num-8" class="num">8</div>
 | <div id="num-9" class="num">9</div>
 | <div id="multiply" class="num">*</div>
 | </div>
 | <div class="numrow">
 | <div id="num-c" class="num">C</div>
 | <div id="num-0" class="num">0</div>
 | <div id="num-e" class="num">=</div>
 | <div id="divide" class="num">/</div>
 | </div>
 | <script
 | src="https://code.jquery.com/jquery-3.2.1.js"
 | integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
 | crossorigin="anonymous"></script>
 | <script type="text/javascript">
 | PEBKAC Problem exists between keyboard and chair
 | $(document).ready(function() {
 | $("#num-1").on("click",function(event){
 | $("#numscreen").append($("#num-1").text());
 | //this is more dynamic!!!
 | })
 | $("#plus").on("click",function(event){
 | $("#numscreen").append($("#plus").text());
 | //this is more dynamic!!!
 | })
 | $("#num-2").on("click",function(event){
 | $("#numscreen").append('2');
 | })
 | $("#num-e").on("click",function(event){
 | $("#numscreen").text(eval($("#numscreen").text()));
 | })
 | var sum = eval('3 + 3');
 | //$("#numscreen").html(sum);
 | })
 | </script>
 | </body>
 | </html>