playing around with js. still early stages

angaaruriakhil · Aug 18, 2021 · 3065914 · 3065914
1 parent 7c67c05
commit 3065914
Show file tree

Hide file tree

Showing 5 changed files with 195 additions and 7 deletions.
diff --git a/dist/main.dev.js b/dist/main.dev.js
@@ -0,0 +1,96 @@
+"use strict";
+
+var screen = document.querySelector("#screen");
+
+function delete_entry() {// screen.innerHTML.slice(0, -1);
+  // fix this
+}
+
+function ac() {
+  screen.innerHTML = "";
+}
+
+function add() {
+  screen.innerHTML += "+";
+}
+
+function subtract() {
+  screen.innerHTML += "-";
+}
+
+function divide() {
+  screen.innerHTML += "/";
+}
+
+function multiply() {
+  screen.innerHTML += "*";
+}
+
+function decimal_point() {
+  // some kind of if statement needed here to stop 2 decimals being used. 
+  screen.innerHTML += ".";
+}
+
+function equals() {
+  screen.innerHTML += "=<br>";
+  screen.contentWindow.location.reload(true);
+}
+
+function one() {
+  screen.innerHTML += "1";
+}
+
+function two() {
+  screen.innerHTML += "2";
+}
+
+function three() {
+  screen.innerHTML += "3";
+}
+
+function four() {
+  screen.innerHTML += "4";
+}
+
+function five() {
+  screen.innerHTML += "5";
+}
+
+function six() {
+  screen.innerHTML += "6";
+}
+
+function seven() {
+  screen.innerHTML += "7";
+}
+
+function eight() {
+  screen.innerHTML += "8";
+}
+
+function nine() {
+  screen.innerHTML += "9";
+}
+
+function zero() {
+  screen.innerHTML += "0";
+}
+
+document.querySelector("#delete").addEventListener("click", delete_entry);
+document.querySelector("#ac").addEventListener("click", ac);
+document.querySelector("#add").addEventListener("click", add);
+document.querySelector("#subtract").addEventListener("click", subtract);
+document.querySelector("#divide").addEventListener("click", divide);
+document.querySelector("#multiply").addEventListener("click", multiply);
+document.querySelector("#decimal_point").addEventListener("click", decimal_point);
+document.querySelector("#equals").addEventListener("click", equals);
+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("#zero").addEventListener("click", zero);
diff --git a/index.html b/index.html
@@ -4,7 +4,8 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="styles.css"> 
+  <link rel="stylesheet" href="styles.css">
+  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap" rel="stylesheet"> 
   <title>JavaScript Calculator</title>
 </head>
 <body>
@@ -17,7 +18,7 @@
       <button id="add" class = "buttons"> + </button>
       <button id="subtract" class = "buttons"> - </button>
       <button id="divide" class = "buttons"> ÷ </button>
-      <button id="decimal-point" class = "buttons"> . </button>
+      <button id="decimal_point" class = "buttons"> . </button>
       <button id="equals" class = "buttons"> = </button>
       <button id="one" class = "buttons"> 1 </button>
       <button id="two" class = "buttons"> 2 </button>

diff --git a/main.js b/main.js
@@ -0,0 +1,81 @@
+let screen = document.querySelector("#screen");
+
+function delete_entry() {
+  // screen.innerHTML.slice(0, -1);
+  // fix this
+}
+function ac() {
+  screen.innerHTML = ""
+}
+function add() {
+  screen.innerHTML += "+"
+}
+function subtract() {
+  screen.innerHTML += "-"
+}
+function divide() {
+  screen.innerHTML += "/"
+}
+function multiply() {
+  screen.innerHTML += "*"
+}
+function decimal_point() {
+  // some kind of if statement needed here to stop 2 decimals being used. 
+  screen.innerHTML += "."
+}
+function equals() {
+  screen.innerHTML += "=<br>"
+  screen.contentWindow.location.reload(true);
+}
+function one() {
+  screen.innerHTML += "1"
+}
+function two() {
+  screen.innerHTML += "2"
+}
+function three() {
+  screen.innerHTML += "3"
+}
+function four() {
+  screen.innerHTML += "4"
+}
+function five() {
+  screen.innerHTML += "5"
+}
+function six() {
+  screen.innerHTML += "6"
+}
+function seven() {
+  screen.innerHTML += "7"
+}
+function eight() {
+  screen.innerHTML += "8"
+}
+function nine() {
+  screen.innerHTML += "9"
+}
+function zero() {
+  screen.innerHTML += "0"
+}
+
+document.querySelector("#delete").addEventListener("click", delete_entry);
+document.querySelector("#ac").addEventListener("click", ac);
+document.querySelector("#add").addEventListener("click", add);
+document.querySelector("#subtract").addEventListener("click", subtract);
+document.querySelector("#divide").addEventListener("click", divide);
+document.querySelector("#multiply").addEventListener("click", multiply);
+document.querySelector("#decimal_point").addEventListener("click", decimal_point);
+document.querySelector("#equals").addEventListener("click", equals);
+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("#zero").addEventListener("click", zero);
+
+
+
diff --git a/styles.css b/styles.css
@@ -15,6 +15,11 @@ body {
   border: 1px solid black;
   border-radius: 15px;
   margin-bottom: 10px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+  font-size: 50px;
+  font-family: "Red Hat Display";
 }
 
 #calculator {
@@ -76,7 +81,7 @@ body {
   grid-row: 5/span 1;
 }
 
-#decimal-point {
+#decimal_point {
   grid-column: 1/span 1;
-  grid-row: 5/span 1;
+  grid-row: 5/5;
 }
diff --git a/styles.scss b/styles.scss
@@ -13,7 +13,12 @@ body {
   background: linear-gradient(90deg, rgba(2,0,36,0.15) 0%, rgba(9,9,121,0.15) 35%, rgba(0,212,255,0.15) 100%);  
   border: 1px solid black;
   border-radius: 15px; 
-  margin-bottom: 10px;   
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: flex-end; 
+  align-items: flex-end;
+  font-size: 50px; 
+  font-family: "Red Hat Display";    
 }
 
 #calculator {
@@ -75,7 +80,7 @@ body {
   grid-row: 5 / span 1; 
 }
 
-#decimal-point {
+#decimal_point {
   grid-column: 1 / span 1; 
-  grid-row: 5 / span 1; 
+  grid-row: 5 / 5; 
 }