fix calculator

_posts/2023-08-23-javascript-calculator.md

@@ -4,7 +4,6 @@ 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: { csse: {week: 2}, csp: {week: 2, categories: [2.C]}, csa: {week: 2} }
 type: ccc
@@ -31,7 +30,8 @@ HTML implementation of the calculator.
 -->
 <style>
   .calculator-output {
-    /* calulator 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
@@ -47,6 +47,9 @@ HTML implementation of the calculator.
     display: flex;
     align-items: center;
   }
+  canvas {
+    filter: none;
+  }
 </style>
 
 <!-- Add a container for the animation -->

_sass/minima/custom-styles.scss

@@ -19,6 +19,7 @@
 // If you want to use dark themes uncomment out the following lines
 @import "minima/Nighthawkpages-dracula-highlight"; 
 @import "minima/dark-mode"; // Dracula Highlight recommended for dark mode
+@import "minima/teacher-styles"; 
 
 // FOR HAMILTON
 // @import "minima/hamilton/skins/daylight";

_sass/minima/teacher-styles.scss

@@ -0,0 +1,84 @@
+// STYLING PREFERNCES for SITE
+// mixin used as a template for buttons
+@mixin button {
+    width: auto;
+    height: auto;
+    border-radius: 10px;
+    background-color: #21807c;
+    border: 3px solid black;
+    font-size: 1.5em;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    grid-column: span 1;
+    grid-row: span 1;
+
+    // Creates smooth animation effect
+    transition: all 0.5s; 
+  }
+
+  /* define class for redifined button */
+  .button {
+    @include button;
+  }
+
+   /* darkens the background color on hover to create a selecting effect */
+  .button:hover {
+    background-color: #373737;
+  }
+
+  /* "row style" is flexible size and aligns pictures in center */
+  .row {
+    align-items: center;
+    display: flex;
+  }
+
+  /* "column style" is one-third of the width with padding */
+  .column {
+    flex: 16.66%;
+    padding: 3px;
+  }
+
+// STYLING FOR CALCULATOR
+  /* class to create the calculator's container; uses CSS grid dsiplay to partition off buttons */
+  .calculator-container { 
+    width: 90vw; /* this width and height is specified for mobile devices by default */
+    height: 80vh;
+    margin: 0 auto;
+
+    display: grid;
+    grid-template-columns: repeat(4, 1fr); /* fr is a special unit; learn more here: https://css-tricks.com/introduction-fr-css-unit/  */
+    grid-template-rows: 0.5fr repeat(4, 1fr);
+    gap: 10px 10px;
+  }
+
+  @media (min-width: 600px) { 
+    .calculator-container {
+        width: 40vw;
+        height: 80vh;
+    }
+  }
+
+  /* styling for the calculator number button */
+  .calculator-number {
+    @extend .button;
+  }
+
+  /* styling for the calculator operation button */
+  .calculator-operation {
+    @extend .button;
+  }
+
+  /* styling for the calculator clear button */
+  .calculator-clear {
+    @extend .button;
+    background-color: #e68b1c;
+  }
+
+  /* styling for the calculator equals button */
+  .calculator-equals {
+    @extend .button;
+    background-color: #e70f0f;
+  }

assets/js/layer.js

@@ -0,0 +1,16 @@
+class GameObject {
+    constructor(canvas2D/* ADD STUFF HERE
+    add some parameters here to customize game object (maybe width, height, color, x/y position, etc.) */) {
+        this.c = canvas2D;
+        /* ADD STUFF HERE
+     set appropriate properites here */
+    }
+    update() {
+        /* ADD STUFF HERE
+     draw this object on the canvas*/
+    }
+   isCollidingWith(player) {
+       /* ADD STUFF HERE (PART 2)
+     (part 2) - check if this game object is colliding with the player, return true or false */
+   }
+}

assets/js/player.js

@@ -0,0 +1,34 @@
+// Define the Player class
+class Player {
+    constructor(canvas2D) {
+        // Initial position and velocity of the player
+        this.position = {
+            x: 100,
+            y: 200
+        };
+        this.velocity = {
+            x: 0,
+            y: 0
+        };
+        // Dimensions of the player
+        this.width = 30;
+        this.height = 30;
+
+        this.c = canvas2D;
+    }
+    // Method to draw the player on the canvas
+    draw() {
+        this.c.fillStyle = 'red';
+        this.c.fillRect(this.position.x, this.position.y, this.width, this.height);
+    }
+    // Method to update the players position and velocity
+    update() {
+        this.draw();
+        this.position.y += this.velocity.y;
+        this.position.x += this.velocity.x;
+        /* FILL IN HERE
+        this update method is called in the animate function, so this would be a good place to add some code to handle gravity (play around with the constant you use for gravity until you think the motion looks good) */
+       /* FILL IN HERE
+         when adding gravity, make sure to add some handling so it doesn't go through the bottom of the screen */
+    }
+}