Test Pull Request

.bundle/config

@@ -0,0 +1,2 @@
+---
+BUNDLE_PATH: "vendor/bundle"

JS Calculator.md

@@ -0,0 +1,219 @@
+---
+title: JS Calculator
+comments: true
+hide: true
+layout: default
+description: A common way to become familiar with a language is to build a calculator.  This calculator shows off button with actions.
+permalink: /techtalk/home_style
+categories: [C7.0]
+courses: {compsci: {week: 2}, csp: {week: 2} }
+type: hacks
+---
+
+<!-- 
+Hack 0: Right justify result
+Hack 1: Test conditions on small, big, and decimal numbers, report on findings. Fix issues.
+Hack 2: Add the common math operation that is missing from calculator
+Hack 3: Implement 1 number operation (ie SQRT) 
+-->
+
+<!-- 
+HTML implementation of the calculator. 
+-->
+
+<!-- 
+    Style and Action are aligned with HRML class definitions
+    style.css contains majority of style definition (number, operation, clear, and equals)
+    - The div calculator-container sets 4 elements to a row
+    Background is credited to Vanta JS and is implemented at bottom of this page
+-->
+<style>
+  .calculator-output {
+    /* calulator output 
+      top bar shows the results of the calculator;
+      result to take up the entirety of the first row;
+      span defines 4 columns and 1 row
+    */
+    grid-column: span 4;
+    grid-row: span 1;
+
+    border-radius: 10px;
+    padding: 0.25em;
+    font-size: 20px;
+    border: 5px solid black;
+
+    display: flex;
+    align-items: center;
+  }
+</style>
+
+<!-- Add a container for the animation -->
+<div id="animation">
+  <div class="calculator-container">
+      <!--result-->
+      <div class="calculator-output" id="output">0</div>
+      <!--row 1-->
+      <div class="calculator-number">1</div>
+      <div class="calculator-number">2</div>
+      <div class="calculator-number">3</div>
+      <div class="calculator-operation">+</div>
+      <!--row 2-->
+      <div class="calculator-number">4</div>
+      <div class="calculator-number">5</div>
+      <div class="calculator-number">6</div>
+      <div class="calculator-operation">-</div>
+      <!--row 3-->
+      <div class="calculator-number">7</div>
+      <div class="calculator-number">8</div>
+      <div class="calculator-number">9</div>
+      <div class="calculator-operation">*</div>
+      <!--row 4-->
+      <div class="calculator-clear">A/C</div>
+      <div class="calculator-number">0</div>
+      <div class="calculator-number">.</div>
+      <div class="calculator-equals">=</div>
+  </div>
+</div>
+
+<!-- JavaScript (JS) implementation of the calculator. -->
+<script>
+// initialize important variables to manage calculations
+var firstNumber = null;
+var operator = null;
+var nextReady = true;
+// build objects containing key elements
+const output = document.getElementById("output");
+const numbers = document.querySelectorAll(".calculator-number");
+const operations = document.querySelectorAll(".calculator-operation");
+const clear = document.querySelectorAll(".calculator-clear");
+const equals = document.querySelectorAll(".calculator-equals");
+
+// Number buttons listener
+numbers.forEach(button => {
+  button.addEventListener("click", function() {
+    number(button.textContent);
+  });
+});
+
+// Number action
+function number (value) { // function to input numbers into the calculator
+    if (value != ".") {
+        if (nextReady == true) { // nextReady is used to tell the computer when the user is going to input a completely new number
+            output.innerHTML = value;
+            if (value != "0") { // if statement to ensure that there are no multiple leading zeroes
+                nextReady = false;
+            }
+        } else {
+            output.innerHTML = output.innerHTML + value; // concatenation is used to add the numbers to the end of the input
+        }
+    } else { // special case for adding a decimal; can't have two decimals
+        if (output.innerHTML.indexOf(".") == -1) {
+            output.innerHTML = output.innerHTML + value;
+            nextReady = false;
+        }
+    }
+}
+
+// Operation buttons listener
+operations.forEach(button => {
+  button.addEventListener("click", function() {
+    operation(button.textContent);
+  });
+});
+
+// Operator action
+function operation (choice) { // function to input operations into the calculator
+    if (firstNumber == null) { // once the operation is chosen, the displayed number is stored into the variable firstNumber
+        firstNumber = parseInt(output.innerHTML);
+        nextReady = true;
+        operator = choice;
+        return; // exits function
+    }
+    // occurs if there is already a number stored in the calculator
+    firstNumber = calculate(firstNumber, parseFloat(output.innerHTML)); 
+    operator = choice;
+    output.innerHTML = firstNumber.toString();
+    nextReady = true;
+}
+
+// Calculator
+function calculate (first, second) { // function to calculate the result of the equation
+    let result = 0;
+    switch (operator) {
+        case "+":
+            result = first + second;
+            break;
+        case "-":
+            result = first - second;
+            break;
+        case "*":
+            result = first * second;
+            break;
+        case "/":
+            result = first / second;
+            break;
+        default: 
+            break;
+    }
+    return result;
+}
+
+// Equals button listener
+equals.forEach(button => {
+  button.addEventListener("click", function() {
+    equal();
+  });
+});
+
+// Equal action
+function equal () { // function used when the equals button is clicked; calculates equation and displays it
+    firstNumber = calculate(firstNumber, parseFloat(output.innerHTML));
+    output.innerHTML = firstNumber.toString();
+    nextReady = true;
+}
+
+// Clear button listener
+clear.forEach(button => {
+  button.addEventListener("click", function() {
+    clearCalc();
+  });
+});
+
+// A/C action
+function clearCalc () { // clears calculator
+    firstNumber = null;
+    output.innerHTML = "0";
+    nextReady = true;
+}
+</script>
+
+<!-- 
+Vanta animations just for fun, load JS onto the page
+-->
+<script src="/teacher/assets/js/three.r119.min.js"></script>
+<script src="/teacher/assets/js/vanta.halo.min.js"></script>
+<script src="/teacher/assets/js/vanta.birds.min.js"></script>
+<script src="/teacher/assets/js/vanta.net.min.js"></script>
+<script src="/teacher/assets/js/vanta.rings.min.js"></script>
+
+<script>
+// setup vanta scripts as functions
+var vantaInstances = {
+  halo: VANTA.HALO,
+  birds: VANTA.BIRDS,
+  net: VANTA.NET,
+  rings: VANTA.RINGS
+};
+
+// obtain a random vanta function
+var vantaInstance = vantaInstances[Object.keys(vantaInstances)[Math.floor(Math.random() * Object.keys(vantaInstances).length)]];
+
+// run the animation
+vantaInstance({
+  el: "#animation",
+  mouseControls: true,
+  touchControls: true,
+  gyroControls: false
+});
+</script>
+

README.md

@@ -1,3 +1,4 @@
+
 ## Blog site using GitHub Pages and Jekyll
 > This site is intended for Students.   This is to record plans, complete hacks, and do work for your learnings.
 - This can be customized to support computer science as you work through pathway (JavaScript, Python/Flask, Java/Spring)

_config.yml

@@ -1,7 +1,7 @@
 title: CompSci Blogs
 description: "August 2023 to June 2024"
 owner_name: Nighthawk Coders
-github_username: nighthawkcoders
+github_username: Nathaniel633
 baseurl: "/student"
 remote_theme: pages-themes/[email protected]
 # remote_theme: pages-themes/[email protected]

_data/compsci.yml

@@ -0,0 +1,11 @@
+# CSP course meta data
+Unit1:
+  title: Build a Lab Notebook
+  description:  Install Tools.  Design lab notebook.  Learn GitHub Pages. Work with Pair (pair name). 
+  start: 0
+  end: 3
+Unit2:
+  title: Learn Language
+  description: Learn (JavaScript|Python|Java).  Start Agile development process.
+  start: 4
+  end: 7

_includes/header.html

@@ -4,11 +4,14 @@
     <nav>
       <ul>
         <li class="fork"><a href="{{site.baseurl}}/">Home</a></li>
-        <li class="fork"><a href="{{site.baseurl}}/csse">CSSE</a></li>
-        <li class="fork"><a href="{{site.baseurl}}/csp">CSP</a></li>
-        <li class="fork"><a href="{{site.baseurl}}/csa">CSA</a></li>
+<!--        <li class="fork"><a href="{{site.baseurl}}/csse">CSSE</a></li> -->
+<li class="fork"><a href="{{site.baseurl}}/csp">CSP</a></li>
+<!----        <li class="fork"><a href="{{site.baseurl}}/csa">CSA</a></li> -->
+        <li class="fork"><a href="{{site.baseurl}}/compsci">CompSci</a></li>
+<!----        <li class="fork"><a href="{{site.baseurl}}/csa">CSA</a></li> -->
         <li class="fork"><a href="{{site.baseurl}}/blogs">Blogs</a></li>
         <li class="title"><a href="{{ site.github.repository_url }}#readme">View On GitHub</a></li>
+        <li class="title"><a href="{{site.baseurl}}/help">Help</a></li>
       </ul>
     </nav>
   </div><!-- end header -->