lesson 14

AnthoniaEfe · AnthoniaEfe · commit d03449467599 · 2023-04-01T18:01:55.000+01:00
diff --git a/public/app.js b/public/app.js
@@ -0,0 +1,29 @@
+//imports
+import { Invoice } from './classes/invoice.js';
+const form = document.querySelector(".new-item-form");
+//classes
+const invOne = new Invoice("Tonia", "web design work", 349, 25);
+const invTwo = new Invoice("Yosola", "iftar cooking", 200, 27);
+let invoices = [];
+invoices.push(invOne);
+invoices.push(invTwo);
+invoices.forEach(inv => {
+    console.log(inv.client, inv.amount, inv.format());
+});
+//shorthand when using access modifiers
+class Money {
+    constructor(client, details, amount) {
+        this.client = client;
+        this.details = details;
+        this.amount = amount;
+    }
+}
+//inputs
+const type = document.querySelector("#type");
+const tofrom = document.querySelector("#tofrom");
+const details = document.querySelector("#details");
+const amount = document.querySelector("#amount");
+form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    console.log(type.value, tofrom.value, details.value, amount.valueAsNumber);
+});
diff --git a/public/classes/invoice.js b/public/classes/invoice.js
@@ -0,0 +1,11 @@
+export class Invoice {
+    constructor(c, d, a, ag) {
+        this.client = c;
+        this.details = d;
+        this.amount = a;
+        this.age = ag;
+    }
+    format() {
+        return `${this.client} is ${this.age}y/o and owes $${this.amount} for ${this.details}`;
+    }
+}
diff --git a/public/index.html b/public/index.html
@@ -38,6 +38,6 @@ <h1>Finance Logger</h1>
       </form>
     </footer>
 
-    <script src="index.js"></script>
+    <script type="module" src="app.js"></script>
   </body>
 </html>
diff --git a/public/index.js b/public/index.js
@@ -19,14 +19,15 @@ objectColc = {
     color: "green"
 };
 let objectOne;
-console.log("test watching");
 //function signatures
 let greet;
-greet = (number = 35, word = "hello there") => {
-    console.log(number, word);
+greet = (num, word) => {
+    console.log(num, word);
 };
+greet(24, "hello");
 //function signatures with type aliases
 let obj;
 obj = (person) => {
     console.log(`${person.name}, is ${person.age} years old and is a ${person.gender} `);
 };
+obj({ name: "tonia", age: 23, gender: true });
diff --git a/src/app.ts b/src/app.ts
@@ -0,0 +1,42 @@
+//imports
+import {Invoice } from './classes/invoice.js';
+
+const form = document.querySelector(".new-item-form")! as HTMLFormElement;
+
+//classes
+
+
+const invOne = new Invoice("Tonia", "web design work", 349, 25);
+const invTwo = new Invoice("Yosola", "iftar cooking", 200, 27);
+
+let invoices: Invoice[] =[];
+invoices.push(invOne)
+invoices.push(invTwo)
+invoices.forEach(inv=>{
+ 
+  console.log(inv.client, inv.amount, inv.format());
+})
+
+//shorthand when using access modifiers
+class Money{
+  constructor(
+    readonly client:string,  
+    private details: string,
+    public amount: number,
+  ){}
+}
+
+
+//inputs
+const type = document.querySelector("#type")! as HTMLSelectElement;
+const tofrom = document.querySelector("#tofrom")! as HTMLInputElement;
+const details = document.querySelector("#details")! as HTMLInputElement;
+const amount = document.querySelector("#amount")! as HTMLInputElement;
+ 
+form.addEventListener('submit', (e)=>{
+  e.preventDefault()
+  console.log(type.value,
+  tofrom.value,
+  details.value,
+  amount.valueAsNumber);
+})
diff --git a/src/classes/invoice.ts b/src/classes/invoice.ts
@@ -0,0 +1,18 @@
+export class Invoice{
+  readonly client: string;
+  private details: string;
+  public amount: number;
+ protected age: number;
+ 
+   constructor(c: string, d: string, a: number, ag: number){
+     this.client = c;
+     this.details = d;
+     this.amount = a;
+     this.age = ag;
+   }
+ 
+   format(){
+     return `${this.client} is ${this.age}y/o and owes $${this.amount} for ${this.details}`
+   }
+ }
+
diff --git a/tsconfig.json b/tsconfig.json
@@ -14,7 +14,7 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "es6",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
@@ -28,7 +28,7 @@
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 
     /* Modules */
-    "module": "commonjs",                                /* Specify what module code is generated. */
+    "module": "es2015",                                /* Specify what module code is generated. */
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
     // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
