Home Explore Help
Sign In
kris
/
FCCZiplineCalculator
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Initial commit

Kristian Vos 2 years ago
commit
d4cb302878
6 changed files with 169 additions and 0 deletions
Split View Show Diff Stats
  1. BIN
      Pacifico-Regular.ttf
  2. 3 0
      README.md
  3. 37 0
      index.html
  4. 1 0
      jquery.min.js
  5. 51 0
      script.js
  6. 77 0
      style.css

BIN
Pacifico-Regular.ttf
View File


+ 3 - 0
README.md
View File 

@@ -0,0 +1,3 @@
 
+# Calculator
 
+A small project created for a FreeCodeCamp zipline challenge.  
+Created July 8th, 2015, with a few tweaks applied later.

+ 37 - 0
index.html
View File 

@@ -0,0 +1,37 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+    <head>
 
+        <meta charset="UTF-8" />
 
+        <title>Calculator</title>
 
+        <link rel="stylesheet" href="./style.css" />
 
+    </head>
 
+    <body>
 
+        <div id="main">
 
+            <h1 id="header">Kris' Calculator</h1>
 
+            <p id="screen">0</p>
 
+            <ul id="calc-buttons">
 
+                <li class="calc-button">AC</li>
 
+                <li class="calc-button">DEL</li>
 
+                <li class="calc-button">%</li>
 
+                <li class="calc-button">÷</li>
 
+                <li class="calc-button">7</li>
 
+                <li class="calc-button">8</li>
 
+                <li class="calc-button">9</li>
 
+                <li class="calc-button">×</li>
 
+                <li class="calc-button">4</li>
 
+                <li class="calc-button">5</li>
 
+                <li class="calc-button">6</li>
 
+                <li class="calc-button">-</li>
 
+                <li class="calc-button">1</li>
 
+                <li class="calc-button">2</li>
 
+                <li class="calc-button">3</li>
 
+                <li class="calc-button">+</li>
 
+                <li class="calc-button">0</li>
 
+                <li class="calc-button">.</li>
 
+                <li class="calc-button calc-big">=</li>
 
+            </ul>
 
+        </div>
 
+        <script src="./jquery.min.js"></script>
 
+        <script src="./script.js"></script>
 
+    </body>
 
+</html>

File diff suppressed because it is too large
+ 1 - 0
jquery.min.js


+ 51 - 0
script.js
View File 

@@ -0,0 +1,51 @@
 
+var selection = [];
 
+
 
+$(document).ready(function () {
 
+    $(".calc-button").on("click", function () {
 
+        var curr = $(this).text();
 
+        if (curr !== "AC" && curr !== "=" && curr !== "DEL") {
 
+            selection.push(curr);
 
+            updateScreen();
 
+        } else if (curr === "AC") {
 
+            selection = [];
 
+            $("#screen").text("0");
 
+        } else if (curr === "DEL") {
 
+            selection.pop();
 
+            if (selection.length === 0) {
 
+                $("#screen").text("0");
 
+            } else {
 
+                updateScreen();
 
+            }
 
+        } else if (curr === "=") {
 
+            showAnswer();
 
+        }
 
+    });
 
+});
 
+
 
+function updateScreen() {
 
+    $("#screen").text(selection.join(""));
 
+}
 
+
 
+function showAnswer() {
 
+    selection = selection.map(function (curr, index) {
 
+        if (curr === "÷") {
 
+            return "/";
 
+        } else if (curr === "×") {
 
+            return "*";
 
+        } else {
 
+            return curr;
 
+        }
 
+    });
 
+    var answer;
 
+    try {
 
+        answer = eval(selection.join(""));
 
+    } catch (e) {
 
+        if (e instanceof SyntaxError) {
 
+            answer = "Math error";
 
+        }
 
+    }
 
+    selection = [];
 
+    answer = (answer + "").replace("Infinity", "∞");
 
+    answer = (answer + "").replace("NaN", "Error 404, logic not found");
 
+    $("#screen").text(answer);
 
+}

+ 77 - 0
style.css
View File 

@@ -0,0 +1,77 @@
 
+@font-face {
 
+    font-family: "Pacifico";
 
+    src: URL('Pacifico-Regular.ttf') format('truetype');
 
+}
 
+
 
+body {
 
+    background-color: lightsalmon;
 
+}
 
+
 
+#main {
 
+    width: 280px;
 
+    margin-right: auto;
 
+    margin-left: auto;
 
+    background-color: lightgray;
 
+    margin-top: 40px;
 
+    padding: 20px;
 
+    border-radius: 10px;
 
+    -webkit-box-shadow: 0px 10px 5px 0px rgba(50, 50, 50, 0.75);
 
+    -moz-box-shadow: 0px 10px 5px 0px rgba(50, 50, 50, 0.75);
 
+    box-shadow: 0px 10px 5px 0px rgba(50, 50, 50, 0.75);
 
+    font-family: sans-serif;
 
+}
 
+
 
+#header {
 
+    text-align: center;
 
+    margin-bottom: 10px;
 
+    font-family: "Pacifico", cursive;
 
+}
 
+
 
+#screen {
 
+    width: 95%;
 
+    height: 25px;
 
+    line-height: 25px;
 
+    padding: 8px;
 
+    border-radius: 10px;
 
+    margin-right: auto;
 
+    margin-left: auto;
 
+    background-color: #8ea386;
 
+    margin-bottom: 50px;
 
+    text-align: right;
 
+    overflow: hidden;
 
+}
 
+
 
+#calc-buttons {
 
+    list-style: none;
 
+    padding: 0;
 
+    height: 230px;
 
+}
 
+
 
+.calc-button {
 
+    padding-top: 5px;
 
+    padding-bottom: 5px;
 
+    height: 20px;
 
+    line-height: 20px;
 
+    width: 60px;
 
+    margin-left: 5px;
 
+    margin-right: 5px;
 
+    margin-top: 10px;
 
+    margin-bottom: 10px;
 
+    float: left;
 
+    color: white;
 
+    background-color: #454545;
 
+    text-align: center;
 
+    vertical-align: middle;
 
+    border-radius: 5px;
 
+    cursor: default;
 
+    -webkit-touch-callout: none;
 
+    -webkit-user-select: none;
 
+    -khtml-user-select: none;
 
+    -moz-user-select: none;
 
+    -ms-user-select: none;
 
+    user-select: none;
 
+}
 
+
 
+.calc-big {
 
+    width: 130px;
 
+}

Some files were not shown because too many files changed in this diff