Day3 forms events

Day2-Object-Constructor/README.md

@@ -0,0 +1,2 @@
+# Document-Object-Modeling
+This repository is created for lab assignement on DOM for my Code 201 course with Code Partners

Day2-Object-Constructor/object-constructor.js

@@ -0,0 +1,118 @@
+//creating an object constructor
+
+let Store = function (location, Average_Cookies_Per_Customer,Avg_Number_Of_Customers){
+    this.location = location;
+    this.Average_Cookies_Per_Customer = Average_Cookies_Per_Customer;
+    this.Avg_Number_Of_Customers = Avg_Number_Of_Customers;
+    this.Average_Cookies_Sold_Per_Hour = function () {
+        return  this.Average_Cookies_Per_Customer * this.Avg_Number_Of_Customers;
+    };
+}
+
+//creating an array to store the value of my new objects
+let storeArray = []
+
+//creating instances of the object above
+let store1 = new Store( 'Bethesda', 2, 12);
+let store2 = new Store('Rockville', 3, 22);
+let store3 = new Store('Washington D.c', 4,8) 
+
+storeArray.push(store1);
+storeArray.push(store2);
+storeArray.push(store3);
+
+//using console.log to check myArray
+console.log(storeArray);
+
+//creating body element in sale.html and giving it an id, and an attribute
+let elBody = document.getElementById ('creatingTable');
+let elTable = document.createElement('table');
+
+//attaching the firstChild of element'table' to table. That first child is table
+elBody.appendChild(elTable);
+
+//looping through the array of my object
+for (var i=0; i<storeArray.length; i++){
+
+    //creating table and attaching locations of stores as table row header
+    let elRow = document.createElement('tr');
+    elTable.appendChild(elRow);
+    let elTh = document.createElement('th');
+    elRow.appendChild(elTh);
+    elTh.innerText =storeArray[i].location;
+
+    //creating and appending a cell of the table (td) to element (tr) and dynamically populating this cell with one property from my objects stored in an array
+
+    let elTd =document.createElement('td');
+    elRow.appendChild(elTd);
+    elTd.innerText = storeArray[i].Average_Cookies_Per_Customer;
+
+    //creating and appending a cell of the table (td) to element (tr) and dynamically populating this cell with one property from my objects stored in an array
+
+    let elTd2 =document.createElement('td');
+    elRow.appendChild(elTd2);
+    elTd2.innerText = storeArray[i].Avg_Number_Of_Customers;
+
+}
+
+
+
+
+
+
+/*
+let cookieShop1 = { 
+    location: 'Bethesda',
+    Average_Cookies_Per_Customer:2,
+    min_Number_Of_Customers : 2,
+    max_Number_Of_Customers : 12,
+    Random_Number_of_customers : function () {
+        return Math.floor(Math.random () * (this.max_Number_Of_Customers - this.min_Number_Of_Customers +1 ) +  this.min_Number_Of_Customers)
+    }, 
+    Average_Cookies_Sold_Per_Hour: this.Random_Number_of_customers * this.Average_Cookies_Per_Customer,
+};
+//creating an object and giving it properties, methods
+let cookieShop2 = { 
+    location: 'Rockiville',
+    Average_Cookies_Per_Customer:2,
+    min_Number_Of_Customers : 4,
+    max_Number_Of_Customers : 22,
+    Avg_CookiesSale : function () {
+        return Math.floor(Math.random () * (this.max_Number_Of_Customers - this.min_Number_Of_Customers +1 ) + this.min_Number_Of_Customers)
+    }, 
+    Average_Cookies_Sold_Per_Hour: this.Random_Number_of_customers * this.Average_Cookies_Per_Customer,
+
+};
+
+//creating an object and giving it properties, methods
+let cookieShop3 = { 
+    location: 'Washington DC',
+    average_Cookies_Per_Customer:2,
+    min_Number_Of_Customers : 6,
+    max_Number_Of_Customers : 110,
+    Avg_CookiesSale : function () {
+        return Math.floor(Math.random () * (this.max_Number_Of_Customers - this.min_Number_Of_Customers +1 ) + this.min_Number_Of_Customers)
+    }, 
+    Average_Cookies_Sold_Per_Hour: this.Random_Number_of_customers * this.Average_Cookies_Per_Customer,
+
+};
+
+//storing the result for each location in an array
+let cookie_Sale_Per_Store = [cookieShop1, cookieShop2, cookieShop3];
+for (let i=0; i<cookie_Sale_Per_Store.length;i++) {
+
+
+        let newBody = document.getElementById('sales-of-cookies');
+        let newlocation = document.createElement('h2');
+        newBody.appendChild(newlocation);
+        newlocation.innerText = cookie_Sale_Per_Store[i].location;
+
+
+
+        /*let newList = document.getElementById('ListOfProperties');
+        console.log(newList);
+        let newAverage = document.createElement('li');
+        newList.appendChild(newAverage);
+
+        newAverage.innerText = cookie_Sale_Per_Store[i].Average_Cookies_Per_Customer;
+    }; */

Day2-Object-Constructor/sales.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Page Title</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
+
+</head>
+<body id = "creatingTable"></body>
+    <table>
+          <tr>
+             <th></th>
+
+         </tr>
+     </table>
+
+
+</body>
+<script src= "object-constructor.js"></script>
+</html>

Day3-Forms-Events/form-event.js

@@ -0,0 +1,109 @@
+
+//moving my object constructor from previsous lab to this page as reference
+let Store = function (location, Average_Cookies_Per_Customer,Avg_Number_Of_Customers){
+    this.location = location;
+    this.Average_Cookies_Per_Customer = Average_Cookies_Per_Customer;
+    this.Avg_Number_Of_Customers = Avg_Number_Of_Customers;
+    this.Average_Cookies_Sold_Per_Hour = function () {
+        return  this.Average_Cookies_Per_Customer * this.Avg_Number_Of_Customers;
+    };
+}
+
+//creating the element form
+//selecting  the element node (form) I want the script to respond to. This variable is facilitating DOM access to the form.
+let elStore = document.getElementById("stores");
+
+// stating the input field my form needs and making their value equal to the different parameters/keys in my object constructor.
+let userSelect = elStore.location1;
+let userNumber = elStore.avg_cookies_per_cust;
+let UserAvgofCustomer = elStore.avgOfCustomer;
+
+
+//creating an array as placeholder to store the new objects that is create when user puts required values and fire the event "submit"
+let storeArray = [];
+
+//indicating which event on the form node will trigger the response
+//stating the function I want to run when event "submit" is fired
+elStore.addEventListener('submit', function(event) {
+    event.preventDefault()
+
+    //creating new instance of the Store Constructor
+ let newStore = new Store(userSelect.value, userNumber.value, UserAvgofCustomer.value)  
+storeArray.push(newStore)
+addingRow();
+avgCookies();
+numberOfCustomers();
+theTotal();
+console.log(newStore);
+console.log(storeArray);
+
+});
+
+
+
+//creating the table which will dynamically populate the user values entered in the form
+
+let newBody= document.getElementById('body')
+let elTable = document.createElement ('table')
+
+//attaching the firstChild of element'table' to table. That first child is table
+newBody.appendChild(elTable);
+
+//looping through the array of my object
+//for (var i=0; i<storeArray.length; i++){
+
+    //creating table and attaching locations of stores as table row header
+     function addingRow() {
+    let elRow = document.createElement('tr');
+    elTable.appendChild(elRow);
+    let elTh = document.createElement('th');
+    elRow.appendChild(elTh);
+    elTh.innerText =userSelect.value;
+
+
+    //creating and appending a cell of the table (td) to element (tr) and dynamically populating this cell with one property from my objects stored in an array
+
+    let elTd =document.createElement('td');
+    elRow.appendChild(elTd);
+    elTd.innerText = userNumber.value;
+
+    //creating and appending a cell of the table (td) to element (tr) and dynamically populating this cell with one property from my objects stored in an array
+
+    let elTd2 =document.createElement('td');
+    elRow.appendChild(elTd2);
+    elTd2.innerText = UserAvgofCustomer.value;
+     }
+
+     //creating footer at the bottom that tables all the rows 
+     // First- creating function to capture avergage cookies per customer
+
+function avgCookies () {
+    let avaregeCookies = 0;
+    for (let i=0; i<storeArray.length; i++){
+        avaregeCookies += parseInt(storeArray[i].Average_Cookies_Per_Customer);
+        console.log(avaregeCookies);
+        console.log(storeArray[i].Average_Cookies_Per_Customer)
+    };
+    return avaregeCookies;
+
+};
+
+//create function to capture number of customers
+function numberOfCustomers () {
+    let numberOfCustom = 0;
+    for (let j=0;j<storeArray.length;j++){
+        numberOfCustom += parseInt(storeArray[j].Avg_Number_Of_Customers);
+        console.log(numberOfCustom);
+        console.log(storeArray[j].Avg_Number_Of_Customers)
+    }
+    return numberOfCustom;
+};
+
+//Creating a new row to store total
+function theTotal(){
+let total = document.createElement('th')
+elTd2.appendChild(total)
+
+total.innerText= numberOfCustomers();
+}
+

Day3-Forms-Events/form.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Forms and Events J.S</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
+
+</head>
+ <body id="body">
+    <!-- start of the main text which is a form -->
+    <!--creating id attributes in my form element and children nodes and assigning valuess to these attributes so that the script can work( identify/access) with these particular elements-->
+    <form id = "stores"> 
+    <!-- adding the element fieldset to group the forms in -->
+       <fieldset>
+        <p>location:
+            <select name = "location1"/>
+              <option value = "Bethesda">Bethesda</option>
+              <option value = "Rockville">Rockville</option>
+              <option value = "Washington D.C">Washington D.C</option>
+        </p> </br>
+
+        <p> Average Cookies per Customers</p> </br>
+            <input required type = "number" name = "avg_cookies_per_cust" value = ""/>
+
+         </br>
+
+        <p> Average Numbr of Customenrs</p>
+            <textarea name ="avgOfCustomer" cols = "20" rows="5"> Give me an anverage number of customer </textarea>
+
+        <button type = "submit">Submit</button>
+    <footer id = "footer">
+
+
+    </footer>
+
+      </fieldset>   
+    </form>
+    <!-- end of the main text -->   
+
+    <!-- beginning of the footer-->
+   <table>
+    <tfoot> 
+            <tr> 
+                <th></th>
+                <th scope = "col"> <b>Total</b></th>
+            </tr>
+
+        </tfoot>
+    </table>
+</body>
+<script src="form-event.js"></script>
+</html>

object-literals.js

@@ -0,0 +1,77 @@
+//creating an object constructor
+
+let Store = function (location, Average_Cookies_Per_Customer,Avg_Number_Of_Customers){
+    this.location = location;
+    this.Average_Cookies_Per_Customer = Average_Cookies_Per_Customer;
+    this.Avg_Number_Of_Customers = Avg_Number_Of_Customers;
+    this.Average_Cookies_Sold_Per_Hour = function () {
+        return   this.Average_Cookies_Per_Customer * this.Avg_Number_Of_Customers;
+    };
+}
+
+//creating an array to store the value of my new objects
+let storeArray = []
+
+//creating instances of the object above
+let store1 = new Store( 'Bethesda', 2, 12);
+let store2 = new Store('Rockville', 3, 22);
+let store3 = new Store('Washington D.c', 4,8) 
+
+console.log();
+
+/*
+let cookieShop1 = { 
+    location: 'Bethesda',
+    Average_Cookies_Per_Customer:2,
+    min_Number_Of_Customers : 2,
+    max_Number_Of_Customers : 12,
+    Random_Number_of_customers : function () {
+        return Math.floor(Math.random () * (this.max_Number_Of_Customers - this.min_Number_Of_Customers +1 ) +  this.min_Number_Of_Customers)
+    }, 
+    Average_Cookies_Sold_Per_Hour: this.Random_Number_of_customers * this.Average_Cookies_Per_Customer,
+};
+//creating an object and giving it properties, methods
+let cookieShop2 = { 
+    location: 'Rockiville',
+    Average_Cookies_Per_Customer:2,
+    min_Number_Of_Customers : 4,
+    max_Number_Of_Customers : 22,
+    Avg_CookiesSale : function () {
+        return Math.floor(Math.random () * (this.max_Number_Of_Customers - this.min_Number_Of_Customers +1 ) + this.min_Number_Of_Customers)
+    }, 
+    Average_Cookies_Sold_Per_Hour: this.Random_Number_of_customers * this.Average_Cookies_Per_Customer,
+
+};
+
+//creating an object and giving it properties, methods
+let cookieShop3 = { 
+    location: 'Washington DC',
+    average_Cookies_Per_Customer:2,
+    min_Number_Of_Customers : 6,
+    max_Number_Of_Customers : 110,
+    Avg_CookiesSale : function () {
+        return Math.floor(Math.random () * (this.max_Number_Of_Customers - this.min_Number_Of_Customers +1 ) + this.min_Number_Of_Customers)
+    }, 
+    Average_Cookies_Sold_Per_Hour: this.Random_Number_of_customers * this.Average_Cookies_Per_Customer,
+
+};
+
+//storing the result for each location in an array
+let cookie_Sale_Per_Store = [cookieShop1, cookieShop2, cookieShop3];
+for (let i=0; i<cookie_Sale_Per_Store.length;i++) {
+
+
+        let newBody = document.getElementById('sales-of-cookies');
+        let newlocation = document.createElement('h2');
+        newBody.appendChild(newlocation);
+        newlocation.innerText = cookie_Sale_Per_Store[i].location;
+
+
+
+        /*let newList = document.getElementById('ListOfProperties');
+        console.log(newList);
+        let newAverage = document.createElement('li');
+        newList.appendChild(newAverage);
+
+        newAverage.innerText = cookie_Sale_Per_Store[i].Average_Cookies_Per_Customer;
+    }; */