week-06 assignment

yuk23003 · Feb 21, 2024 · ce28110 · ce28110
1 parent 45538f3
commit ce28110
Show file tree

Hide file tree

Showing 6 changed files with 166 additions and 0 deletions.
diff --git a/week-06/.gitignore b/week-06/.gitignore
@@ -0,0 +1,27 @@
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
diff --git a/week-06/README.md b/week-06/README.md
@@ -0,0 +1,18 @@
+# Tip Calculator
+An exercise in JavaScript function definitions and return values. Course: DMD 3475. 
+
+## Introduction
+Our tip calculator application is almost complete. Our function named `updateValues()` will fetch the values that were input by the user. 
+
+At that point, the values are passed as arguments to two functions named `calculateTipPerPerson()` and `calculateTotalPerPerson()`. The values that are returned by each function are used to update the DOM.
+
+## Instructions
+
+1. Define both required functions: `calculateTipPerPerson()` and `calculateTotalPerPerson()`.
+2. Each function should accept the 3 arguments being passed to them within the `updateValues()` function.
+3. Using those values, calculate and return the appropriate answer.
+4. Extra credit: Properly round the dollars and cents that are returned by your functions.
+
+## Helpful Information
+* Search Google for "Tip Calculator" to see the desired functionality for this application.
+* The `calculateTotalPerPerson()` function should return a value that includes the tip.
diff --git a/week-06/css/main.css b/week-06/css/main.css
@@ -0,0 +1,28 @@
+body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+}
+
+.card {
+    width: 400px;
+    max-width: 100%;
+}
+
+.card-image img {
+    height: 100px;
+    object-fit: cover;
+    object-position: center;
+}
+
+.card-content .row {
+    margin: 0;
+}
+
+
+.card .card-image .card-title {
+    font-weight: bold;
+    text-shadow: 2px 2px 3px black;
+    padding-bottom: 12px;
+}
diff --git a/week-06/images/bg.jpg b/week-06/images/bg.jpg
diff --git a/week-06/js/script.js b/week-06/js/script.js
@@ -0,0 +1,74 @@
+const person = {
+    name: {
+          first: "Bob",
+          last: "Smith",
+        },
+    age: 32,
+    bio() {
+      console.log(`${this.name.first} ${this.name.last} is ${this.age} years old.`);
+    },
+    introduceSelf() {
+      console.log(`Hi! I'm ${this.name.first}.`);
+    },
+  };
+
+  function logPropoerty(propertyName){
+    console.log(person[propertyName]);
+  }
+
+
+const myDataName = "height";
+const myDataValue = "1.75m";
+person[myDataName] = myDataValue;
+
+const person1 = {
+    name: "Chris",
+    introduceSelf() {
+      console.log(`Hi! I'm ${this.name}.`);
+    },
+  };
+
+  const person2 = {
+    name: "Deepti",
+    introduceSelf() {
+      console.log(`Hi! I'm ${this.name}.`);
+    },
+  };
+
+  function createPerson(name) {
+    const obj = {};
+    obj.name = name;
+    obj.introduceSelf = function () {
+      console.log(`Hi! I'm ${this.name}.`);
+    };
+    return obj;
+  }
+
+// const salva = createPerson("Salva");
+// salva.name;
+// salva.introduceSelf();
+
+// const frankie = createPerson("Frankie");
+// frankie.name;
+// frankie.introduceSelf();
+
+// ---------------
+
+function Person(name) {
+    this.name = name;
+    this.introduceSelf = function () {
+      console.log(`Hi! I'm ${this.name}.`);
+    };
+  }
+
+const salva = new Person("Salva");
+salva.name;
+salva.introduceSelf();
+// "Hi! I'm Salva."
+
+const frankie = new Person("Frankie");
+frankie.name;
+frankie.introduceSelf();
+// "Hi! I'm Frankie."
+
+const myNotification = new Notification("Hello!");
diff --git a/week-06/oojs.html b/week-06/oojs.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Object-oriented JavaScript example</title>
+  </head>
+
+  <body>
+    <p>This example requires you to enter commands in your browser's JavaScript console (see <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a> for more information).</p>
+
+    <script>
+
+    </script>
+        <script src="js/script.js"></script>
+
+  </body>
+
+</html>