From 45fc90851265b481dc781104ab127e9eb5a9464e Mon Sep 17 00:00:00 2001 From: Patrice Thomas Date: Wed, 4 Jul 2018 19:14:38 -0400 Subject: [PATCH 01/11] added and populated JS file with objects,and stored results for objects in an array --- index.html | 0 main.css | 0 object-literals.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++ sales.html | 17 ++++++++++++++ 4 files changed, 73 insertions(+) create mode 100644 index.html create mode 100644 main.css create mode 100644 object-literals.js create mode 100644 sales.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..e69de29 diff --git a/main.css b/main.css new file mode 100644 index 0000000..e69de29 diff --git a/object-literals.js b/object-literals.js new file mode 100644 index 0000000..3b27707 --- /dev/null +++ b/object-literals.js @@ -0,0 +1,56 @@ +//creating an object and giving it properties, methods + +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 + + + + + Page Title + + + + + + + + + + + \ No newline at end of file From c4c2fccab73eeab694150db45cfb0e3483ff0c7f Mon Sep 17 00:00:00 2001 From: Patrice Thomas Date: Thu, 5 Jul 2018 17:46:36 -0400 Subject: [PATCH 02/11] pushing assignment to Git --- object-literals.js | 11 ++++++----- sales.html | 3 ++- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/object-literals.js b/object-literals.js index 3b27707..1f053d5 100644 --- a/object-literals.js +++ b/object-literals.js @@ -46,11 +46,12 @@ for (let i=0; i + -
    +
      From efda1bfad01ff7c94b0198754a1d13cdca6d6138 Mon Sep 17 00:00:00 2001 From: Patrice Thomas Date: Thu, 5 Jul 2018 21:13:09 -0400 Subject: [PATCH 03/11] creating Object Constructors --- Day2-Object-Constructor/README.md | 2 + Day2-Object-Constructor/index.html | 0 Day2-Object-Constructor/main.css | 0 Day2-Object-Constructor/object-constructor.js | 86 +++++++++++++++++++ Day2-Object-Constructor/sales.html | 17 ++++ object-literals.js | 26 +++++- 6 files changed, 128 insertions(+), 3 deletions(-) create mode 100644 Day2-Object-Constructor/README.md create mode 100644 Day2-Object-Constructor/index.html create mode 100644 Day2-Object-Constructor/main.css create mode 100644 Day2-Object-Constructor/object-constructor.js create mode 100644 Day2-Object-Constructor/sales.html diff --git a/Day2-Object-Constructor/README.md b/Day2-Object-Constructor/README.md new file mode 100644 index 0000000..553bba9 --- /dev/null +++ b/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 diff --git a/Day2-Object-Constructor/index.html b/Day2-Object-Constructor/index.html new file mode 100644 index 0000000..e69de29 diff --git a/Day2-Object-Constructor/main.css b/Day2-Object-Constructor/main.css new file mode 100644 index 0000000..e69de29 diff --git a/Day2-Object-Constructor/object-constructor.js b/Day2-Object-Constructor/object-constructor.js new file mode 100644 index 0000000..199538b --- /dev/null +++ b/Day2-Object-Constructor/object-constructor.js @@ -0,0 +1,86 @@ +//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 = doucument.createele + + +/* +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 + + + + + Page Title + + + + + + + + + + + \ No newline at end of file diff --git a/object-literals.js b/object-literals.js index 1f053d5..512136a 100644 --- a/object-literals.js +++ b/object-literals.js @@ -1,5 +1,25 @@ -//creating an object and giving it properties, methods +//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, @@ -53,5 +73,5 @@ for (let i=0; i Date: Thu, 5 Jul 2018 22:08:06 -0400 Subject: [PATCH 04/11] created loops for the array that stores the object, and appended a table to the body and dynamically named the heder of the table with the first property (location) of the objects in my array --- Day2-Object-Constructor/object-constructor.js | 21 +++++++++++++++++-- Day2-Object-Constructor/sales.html | 11 +++++++--- 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/Day2-Object-Constructor/object-constructor.js b/Day2-Object-Constructor/object-constructor.js index 199538b..42181de 100644 --- a/Day2-Object-Constructor/object-constructor.js +++ b/Day2-Object-Constructor/object-constructor.js @@ -5,7 +5,7 @@ let Store = function (location, Average_Cookies_Per_Customer,Avg_Number_Of_Custo 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; + return this.Average_Cookies_Per_Customer * this.Avg_Number_Of_Customers; }; } @@ -25,7 +25,24 @@ storeArray.push(store3); console.log(storeArray); //creating body element in sale.html and giving it an id, and an attribute -let elBody = doucument.createele +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 - - + + + + + + +
      - + \ No newline at end of file From 1855907320892796839b5e9312e962c3bc1c2dc8 Mon Sep 17 00:00:00 2001 From: Patrice Thomas Date: Thu, 5 Jul 2018 23:00:24 -0400 Subject: [PATCH 05/11] dynamically added values for my cells of the rows --- Day2-Object-Constructor/object-constructor.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/Day2-Object-Constructor/object-constructor.js b/Day2-Object-Constructor/object-constructor.js index 42181de..24fcd43 100644 --- a/Day2-Object-Constructor/object-constructor.js +++ b/Day2-Object-Constructor/object-constructor.js @@ -33,18 +33,33 @@ elBody.appendChild(elTable); //looping through the array of my object for (var i=0; i Date: Sat, 7 Jul 2018 13:52:58 -0400 Subject: [PATCH 06/11] adding a new branch for day 3 lab on forms and events --- Day3-Forms-Events/form-event.js | 0 Day3-Forms-Events/form.html | 32 ++++++++++++++++++++++++++++++++ 2 files changed, 32 insertions(+) create mode 100644 Day3-Forms-Events/form-event.js create mode 100644 Day3-Forms-Events/form.html diff --git a/Day3-Forms-Events/form-event.js b/Day3-Forms-Events/form-event.js new file mode 100644 index 0000000..e69de29 diff --git a/Day3-Forms-Events/form.html b/Day3-Forms-Events/form.html new file mode 100644 index 0000000..426fe63 --- /dev/null +++ b/Day3-Forms-Events/form.html @@ -0,0 +1,32 @@ + + + + + + Page Title + + + + + + +
      +

      Username: + +

      + +

      Password + + +

      +

      How do you think the class is going so far?

      + + +

      Choose how you feel?
      + Love it + No, I really love it! +

      +
      + + + \ No newline at end of file From 64ee59f890795f95f924c998d14e7dc53beff06d Mon Sep 17 00:00:00 2001 From: Patrice Thomas Date: Sat, 7 Jul 2018 13:57:11 -0400 Subject: [PATCH 07/11] added html file --- Day3-Forms-Events/form.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Day3-Forms-Events/form.html b/Day3-Forms-Events/form.html index 426fe63..b07eb50 100644 --- a/Day3-Forms-Events/form.html +++ b/Day3-Forms-Events/form.html @@ -3,14 +3,14 @@ - Page Title + Forms and Events J.S - + -
      +

      Username:

      @@ -25,7 +25,7 @@

      Choose how you feel?
      Love it No, I really love it! -

      +

      From 6ca7511860ecde4b5b28bc257905f631fc12ad5d Mon Sep 17 00:00:00 2001 From: Patrice Thomas Date: Sat, 7 Jul 2018 14:04:12 -0400 Subject: [PATCH 08/11] added
      tag to html file --- Day3-Forms-Events/form.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/Day3-Forms-Events/form.html b/Day3-Forms-Events/form.html index b07eb50..3ad5103 100644 --- a/Day3-Forms-Events/form.html +++ b/Day3-Forms-Events/form.html @@ -9,8 +9,9 @@ - +
      +

      Username:

      @@ -26,7 +27,9 @@ Love it No, I really love it!

      +
      + \ No newline at end of file From 1b337e8e66064358a7af509dfe95f4dec49d7314 Mon Sep 17 00:00:00 2001 From: Patrice Thomas Date: Sat, 7 Jul 2018 15:23:42 -0400 Subject: [PATCH 09/11] indicated the input field my form needs and what properties in my object constructor are assigned to these inputs --- Day3-Forms-Events/form-event.js | 24 ++++++++++++++++++++++++ Day3-Forms-Events/form.html | 22 +++++++++++----------- 2 files changed, 35 insertions(+), 11 deletions(-) diff --git a/Day3-Forms-Events/form-event.js b/Day3-Forms-Events/form-event.js index e69de29..e711b1d 100644 --- a/Day3-Forms-Events/form-event.js +++ b/Day3-Forms-Events/form-event.js @@ -0,0 +1,24 @@ + +//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; + }; +} + +//selecting the element node I want the script to respond to. This variable is facilitating DOM access to the form. +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 = Store.location; +let userNumber = Store.Average_Cookies_Per_Customer; +let UserAvgofCustomer = Store.Avg_Number_Of_Customers; + + + +//indicating which event on the form node will trigger the respo + +//stating the function I want to run when the event (...) happended diff --git a/Day3-Forms-Events/form.html b/Day3-Forms-Events/form.html index 3ad5103..454b95e 100644 --- a/Day3-Forms-Events/form.html +++ b/Day3-Forms-Events/form.html @@ -10,23 +10,23 @@ -
      +
      -

      Username: - +

      location: + +

      Average Cookies per Customers +

      -

      How do you think the class is going so far?

      - +

      Average Numbr of Customenrs

      + + -

      Choose how you feel?
      - Love it - No, I really love it! -

      From c3dda3532fb4fcb264334097c1a7bf2a1434b75f Mon Sep 17 00:00:00 2001 From: Patrice Thomas Date: Sat, 7 Jul 2018 17:15:06 -0400 Subject: [PATCH 10/11] Added user values in forms and create object, stored in array with these new values --- Day3-Forms-Events/form-event.js | 26 ++++++++++++++++++++------ Day3-Forms-Events/form.html | 22 ++++++++++++---------- 2 files changed, 32 insertions(+), 16 deletions(-) diff --git a/Day3-Forms-Events/form-event.js b/Day3-Forms-Events/form-event.js index e711b1d..2039231 100644 --- a/Day3-Forms-Events/form-event.js +++ b/Day3-Forms-Events/form-event.js @@ -9,16 +9,30 @@ let Store = function (location, Average_Cookies_Per_Customer,Avg_Number_Of_Custo }; } + //selecting the element node I want the script to respond to. This variable is facilitating DOM access to the form. -elStore = document.getElementByID("stores"); +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 = Store.location; -let userNumber = Store.Average_Cookies_Per_Customer; -let UserAvgofCustomer = Store.Avg_Number_Of_Customers; +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 "subscribe" +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) +console.log(newStore); +console.log(storeArray); +}); -//indicating which event on the form node will trigger the respo -//stating the function I want to run when the event (...) happended diff --git a/Day3-Forms-Events/form.html b/Day3-Forms-Events/form.html index 454b95e..8d9baa8 100644 --- a/Day3-Forms-Events/form.html +++ b/Day3-Forms-Events/form.html @@ -13,20 +13,22 @@

      location: - + + + +


      -

      Average Cookies per Customers - +

      Average Cookies per Customers


      + -

      +
      +

      Average Numbr of Customenrs

      - - + + +
      From 8478330496327afabbd5acf565de8593d7b2ce4f Mon Sep 17 00:00:00 2001 From: Patrice Thomas Date: Thu, 12 Jul 2018 20:00:11 -0400 Subject: [PATCH 11/11] total row --- Day3-Forms-Events/form-event.js | 77 +++++++++++++++++++++++++++++++-- Day3-Forms-Events/form.html | 23 ++++++++-- 2 files changed, 94 insertions(+), 6 deletions(-) diff --git a/Day3-Forms-Events/form-event.js b/Day3-Forms-Events/form-event.js index 2039231..7d57581 100644 --- a/Day3-Forms-Events/form-event.js +++ b/Day3-Forms-Events/form-event.js @@ -9,8 +9,8 @@ let Store = function (location, Average_Cookies_Per_Customer,Avg_Number_Of_Custo }; } - -//selecting the element node I want the script to respond to. This variable is facilitating DOM access to the form. +//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. @@ -19,7 +19,7 @@ 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 "subscribe" +//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 @@ -30,9 +30,80 @@ elStore.addEventListener('submit', function(event) { //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 - - + + +
      +

      location: +

      + + +
      - + + + + + + + + + + + +
      Total
      \ No newline at end of file