From ecd79e2d94870f9ad0c2e72be8cf3d911f13f3e4 Mon Sep 17 00:00:00 2001 From: Sana <107569767+udevkota@users.noreply.github.com> Date: Sat, 15 Jul 2023 20:10:41 -0400 Subject: [PATCH] Added Answers Commit --- css/reset.css | 47 +++++++++++++++ css/style.css | 92 +++++++++++++++++++++++++++++ index.html | 43 ++++++++++++++ js/main.js | 159 ++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 341 insertions(+) create mode 100644 css/reset.css create mode 100644 css/style.css create mode 100644 index.html create mode 100644 js/main.js diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 00000000..5bc7dcdc --- /dev/null +++ b/css/reset.css @@ -0,0 +1,47 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 00000000..8d5ef0e0 --- /dev/null +++ b/css/style.css @@ -0,0 +1,92 @@ +/* Box Model Hack */ +* { + box-sizing: border-box; +} + +/* Clear fix hack */ +.clearfix:after { + content: "."; + display: block; + clear: both; + visibility: hidden; + line-height: 0; + height: 0; +} + +.clear { + clear: both; +} + +/****************************************** +/* BASE STYLES +/*******************************************/ + +body { + +} + + +/****************************************** +/* LAYOUT +/*******************************************/ +h1{ + text-align: center; +} +span{ + display: block; + line-height: 2rem; + padding: 0% 3%; + text-align: right; +} + +.container-top { + justify-content: center; + margin: auto; + border: 1px black solid; + width: 350px; + padding: 5px; +} + +.display-window{ + align-items: center; + text-align: right; + margin: 0 auto; + border: 1px black solid; + width: 300px; + height: 75px; + padding: 2px; +} + +ul{ + display: flex; + flex-flow: row wrap; + list-style: none; + justify-content: center; + align-items: center; + border: 3px black solid; + width: 350px; + margin: 0 auto; + padding: 5px; + +} + +li{ + height: 100px; + min-width: 100px; + /*would be flexed and have them all sit next to eachother - force 3 buttons per row + if just with: buttons spills out of item */ + + text-align: center; + border: 1px solid black; + padding: 10px; + /*Button sit inside item in center*/ + +} + +button{ + padding: 20px; + /*button goes into original small size*/ +} +/****************************************** +/* ADDITIONAL STYLES +/*******************************************/ diff --git a/index.html b/index.html new file mode 100644 index 00000000..e741e16b --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + + + + + Simple Calculator + + + + + + +

Simple Calculator

+
+
+ 0 + 0 +
+
+ + + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 00000000..88955bb0 --- /dev/null +++ b/js/main.js @@ -0,0 +1,159 @@ + +//(1) problem with num 1 not concatenating when clicking the 1 and num 2 staying 0 +//(2) no way for calc to know which is num1 and which is num2 +//(3) + +let total = 0 +let num1 = '' +let num2 = '' +let operator = '' +let display = '' + +document.querySelector('#clickZone').addEventListener('click', displayCalc) +document.querySelector('#zero').addEventListener('click', zero) +document.querySelector('#one').addEventListener('click', one) +document.querySelector('#two').addEventListener('click', two) +document.querySelector('#three').addEventListener('click', three) +document.querySelector('#four').addEventListener('click', four) +document.querySelector('#five').addEventListener('click', five) +document.querySelector('#six').addEventListener('click', six) +document.querySelector('#seven').addEventListener('click', seven) +document.querySelector('#eight').addEventListener('click', eight) +document.querySelector('#nine').addEventListener('click', nine) +document.querySelector('#plus').addEventListener('click', plus) +document.querySelector('#minus').addEventListener('click', minus) +document.querySelector('#multiply').addEventListener('click', multiply) +document.querySelector('#equals').addEventListener('click', equals) +document.querySelector('#divide').addEventListener('click', divide) +document.querySelector('#clear').addEventListener('click', clear) + +function displayCalc (){ + display = num1 + operator + num2 + document.querySelector('#placeToPutEquation').innerText = display +} + +function zero(){ + if(operator == ''){ + num1 = num1 + '0' + }else{ + num2 = num2 + '0' + } +} + +function one(){ + if(operator == ''){ + num1 = num1 + '1' + }else{ + num2 = num2 + '1' + } +} + +function two(){ + if(operator == ''){ + num1 = num1 + '2' + }else{ + num2 = num2 + '2' + } +} + +function three(){ + if(operator == ''){ + num1 = num1 + '3' + }else{ + num2 = num2 + '3' + } +} + +function four(){ + if(operator == ''){ + num1 = num1 + '4' + }else{ + num2 = num2 + '4' + } +} + +function five(){ + if(operator == ''){ + num1 = num1 + '5' + }else{ + num2 = num2 + '5' + } +} + + +function six(){ + if(operator == ''){ + num1 = num1 + '6' + }else{ + num2 = num2 + '6' + } +} + +function seven(){ + if(operator == ''){ + num1 = num1 + '7' + }else{ + num2 = num2 + '7' + } +} + +function eight(){ + if(operator == ''){ + num1 = num1 + '8' + }else{ + num2 = num2 + '8' + } +} + +function nine(){ + if(operator == ''){ + num1 = num1 + '9' + }else{ + num2 = num2 + '9' + } +} + + +function plus (){ + operator = '+' +} + +function minus (){ + operator = '-' + } + +function multiply (){ + operator = '*' +} + +function divide (){ + operator = '/' + } + +function equals (){ + num1 = (+num1) + num2 = (+num2) + if( operator === '+'){ + total = num1 + num2 + }else if ( operator === '-'){ + total = num1 - num2 + }else if ( operator === '*'){ + total = num1 * num2 + }else if ( operator === '/'){ + total = num1 / num2 + }else{ + total = "Error" + } + + document.querySelector('#placeToPutResult').innerText = total +} + +function clear (){ + total = 0 + num1 = '' + num2 = '' + operator = '' + display = '' + document.querySelector('#placeToPutEquation').innerText = '0' + document.querySelector('#placeToPutResult').innerText = '0' +} \ No newline at end of file