Skip to content

Added Answer Commit #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
udevkota wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added Answer Commit #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions css/reset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
92 changes: 92 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
/*******************************************/
43 changes: 43 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Your description goes here">
<meta name="keywords" content="one, two, three">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Simple Calculator</title>

<!-- external CSS link -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Simple Calculator</h1>
<section class="container-top">
<section class="display-window">
<span id="placeToPutEquation">0</span>
<span id="placeToPutResult">0</span>
</section>
</section>
<ul id="clickZone">
<li id="zero"><button>0</button></li>
<li id="one"><button>1</button></li>
<li id="two"><button>2</button></li>
<li id="three"><button>3</button></li>
<li id="four"><button>4</button></li>
<li id="five"><button>5</button></li>
<li id="six"><button>6</button></li>
<li id="seven"><button>7</button></li>
<li id="eight"><button>8</button></li>
<li id="nine"><button>9</button></li>
<li id="plus"><button>+</button></li>
<li id="minus"><button>-</button></li>
<li id="multiply"><button>*</button></li>
<li id="equals"><button>=</button></li>
<li id="divide"><button>/</button></li>
<li id="clear"><button>Clear</button></li>
</ul>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
159 changes: 159 additions & 0 deletions js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
}