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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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