From 41d42b46355b88375d9e3195d83af939c13326d5 Mon Sep 17 00:00:00 2001 From: jackgipson Date: Tue, 12 Feb 2019 19:45:20 -0800 Subject: [PATCH 01/29] added DOM-I --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 05778f1582..d70dd23dd7 100644 --- a/README.md +++ b/README.md @@ -32,4 +32,5 @@ You have been provided a [JSON object](js/index.js) with all the necessary data * [ ] Study tomorrow's lesson on events and try to integrate a button that can update content on the site with a click of a button. You could build a similar data object with new values to help you test the click event. ## Stretch Project: Digital Timer -This project is heavier on logic but employs some DOM manipulation to achieve it's goals. Go check it out here: [stretch assignment](stretch-assignment) and see how far you can get. \ No newline at end of file +This project is heavier on logic but employs some DOM manipulation to achieve it's goals. Go check it out here: [stretch assignment](stretch-assignment) and see how far you can get. + From 813fbcc0d4ed55e6b79c269d0393531d9140831c Mon Sep 17 00:00:00 2001 From: jackgipson Date: Wed, 13 Feb 2019 09:42:16 -0800 Subject: [PATCH 02/29] aligned navigation bar --- js/index.js | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/js/index.js b/js/index.js index c7bfc264c6..b4685dbf85 100644 --- a/js/index.js +++ b/js/index.js @@ -37,6 +37,36 @@ const siteContent = { }, }; -// Example: Update the img src for the logo +//Example: Update the img src for the logo + let logo = document.getElementById("logo-img"); logo.setAttribute('src', siteContent["nav"]["img-src"]) + +// let headerImg = document.getElementById("cta-img"); +// headerImg.setAttribute("src", "img/header-img.png"); + +let headerImg = document.getElementById("cta-img"); +headerImg.setAttribute("src", siteContent["cta"]["img-src"]); + +let button = document.getElementsByTagName("button")[0]; +button.innerHTML = "Get Started"; + +//nav +let services = document.getElementsByTagName('a')[0]; +services.innerHTML = 'Services'; + +let product = document.getElementsByTagName('a')[1]; +product.innerHTML = 'Product'; + +let vision = document.getElementsByTagName('a')[2]; +vision.innerHTML = 'Vision'; + +let features = document.getElementsByTagName('a')[3]; +features.innerHTML = 'Features'; + +let about = document.getElementsByTagName('a')[4]; +about.innerHTML = 'About'; + +let contact = document.getElementsByTagName('a')[5]; +contact.innerHTML = 'Contact'; + From 1505c2bf9e71e02761f1a931790adfe4e2948ca3 Mon Sep 17 00:00:00 2001 From: jackgipson Date: Wed, 13 Feb 2019 10:29:13 -0800 Subject: [PATCH 03/29] added 'features' in the main-content --- js/index.js | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/js/index.js b/js/index.js index b4685dbf85..dff0500509 100644 --- a/js/index.js +++ b/js/index.js @@ -45,11 +45,9 @@ logo.setAttribute('src', siteContent["nav"]["img-src"]) // let headerImg = document.getElementById("cta-img"); // headerImg.setAttribute("src", "img/header-img.png"); -let headerImg = document.getElementById("cta-img"); -headerImg.setAttribute("src", siteContent["cta"]["img-src"]); -let button = document.getElementsByTagName("button")[0]; -button.innerHTML = "Get Started"; + + //nav let services = document.getElementsByTagName('a')[0]; @@ -70,3 +68,21 @@ about.innerHTML = 'About'; let contact = document.getElementsByTagName('a')[5]; contact.innerHTML = 'Contact'; +// cta + +let h1_ = document.getElementsByTagName('h1')[0]; +h1_.innerHTML = "DOM Is Awesome"; + +let button = document.getElementsByTagName("button")[0]; +button.innerHTML = "Get Started"; + +let headerImg = document.getElementById("cta-img"); +headerImg.setAttribute("src", siteContent["cta"]["img-src"]); + +// main-content + +let featuresH4 = document.getElementsByTagName('h4')[0]; +featuresH4.innerHTML = 'Features'; + +let featuresContent = document.getElementsByTagName('p')[0]; +featuresContent.innerHTML = 'Features content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.'; From f7370e88b1fbc87958a5965e742631fe8c9c1a35 Mon Sep 17 00:00:00 2001 From: jackgipson Date: Wed, 13 Feb 2019 21:02:07 -0800 Subject: [PATCH 04/29] started main-content --- js/index.js | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/js/index.js b/js/index.js index dff0500509..55f4aa8c18 100644 --- a/js/index.js +++ b/js/index.js @@ -51,7 +51,7 @@ logo.setAttribute('src', siteContent["nav"]["img-src"]) //nav let services = document.getElementsByTagName('a')[0]; -services.innerHTML = 'Services'; +services.innerHTML = siteContent['nav']['nav-item-1']; let product = document.getElementsByTagName('a')[1]; product.innerHTML = 'Product'; @@ -86,3 +86,27 @@ featuresH4.innerHTML = 'Features'; let featuresContent = document.getElementsByTagName('p')[0]; featuresContent.innerHTML = 'Features content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.'; + +let about_H4 = document.getElementsByTagName('h4')[1]; +about_H4.innerHTML = "About"; + +let aboutContent_1 = document.getElementsByTagName('h4')[2]; +aboutContent1.innerHTML = 'About content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.'; + +let services_H4 = document.getElementsByTagName('h4')[2]; +servicesH4.innerHTML = "Services"; + +let servicesContent = document.getElementsByTagName('p')[2]; +servicesContent.innerHTML = "Services content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis." + +let product_H4 = document.getElementsByTagName('h4')[3]; +productH4.innerHTML = "Product" + +let productContent = document.getElementsByTagName('p')[3]; +productContent.innerHTML = "Product content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis." + +let vision_H4 = document.getElementsByTagName('h4')[4]; +visionH4.innerHTML = "Vision"; + +let visionContent = document.getElementsByTagName('p')[4]; +visionContent.innerHTML = "Vision content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis." From 65ce1073ebd4fa2cd6de36d53e77e68be8ccbd72 Mon Sep 17 00:00:00 2001 From: jackgipson Date: Thu, 14 Feb 2019 12:59:43 -0800 Subject: [PATCH 05/29] finished main-content, contact and footer --- js/index.js | 36 ++++++++++++++++++++++++++++++------ 1 file changed, 30 insertions(+), 6 deletions(-) diff --git a/js/index.js b/js/index.js index 55f4aa8c18..c16e65420f 100644 --- a/js/index.js +++ b/js/index.js @@ -79,6 +79,9 @@ button.innerHTML = "Get Started"; let headerImg = document.getElementById("cta-img"); headerImg.setAttribute("src", siteContent["cta"]["img-src"]); +let middleImg = document.getElementById("middle-img"); +middleImg.setAttribute("src", "img/mid-page-accent.jpg") + // main-content let featuresH4 = document.getElementsByTagName('h4')[0]; @@ -88,25 +91,46 @@ let featuresContent = document.getElementsByTagName('p')[0]; featuresContent.innerHTML = 'Features content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.'; let about_H4 = document.getElementsByTagName('h4')[1]; -about_H4.innerHTML = "About"; +about_H4.innerHTML = 'About'; -let aboutContent_1 = document.getElementsByTagName('h4')[2]; -aboutContent1.innerHTML = 'About content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.'; +let aboutContent_1 = document.getElementsByTagName('p')[1]; +aboutContent_1.innerHTML = 'About content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.'; let services_H4 = document.getElementsByTagName('h4')[2]; -servicesH4.innerHTML = "Services"; +services_H4.innerHTML = 'Services'; let servicesContent = document.getElementsByTagName('p')[2]; servicesContent.innerHTML = "Services content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis." let product_H4 = document.getElementsByTagName('h4')[3]; -productH4.innerHTML = "Product" +product_H4.innerHTML = "Product" let productContent = document.getElementsByTagName('p')[3]; productContent.innerHTML = "Product content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis." let vision_H4 = document.getElementsByTagName('h4')[4]; -visionH4.innerHTML = "Vision"; +vision_H4.innerHTML = "Vision"; let visionContent = document.getElementsByTagName('p')[4]; visionContent.innerHTML = "Vision content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis." + +// Contact + +let contact_H4 = document.getElementsByTagName('h4')[5]; +contact_H4.innerHTML = "Contact"; +let address = document.getElementsByTagName('p')[5]; +address.innerHTML = "123 Way 456 Street Somewhere, USA"; +let phone = document.getElementsByTagName('p')[6]; +phone.innerHTML = "1 (888) 888-8888"; +let email = document.getElementsByTagName('p')[7]; +email.innerHTML = "sales@greatidea.io"; + +//footer +let footer = document.getElementsByTagName('p')[8]; +footer.innerHTML = "Copyright Great Idea! 2018" + +// let aTags = document.querySelectorAll("a"); +// let i; +// for (i = 0; i < aTags.length; i++) { +// aTags[i].style.color = "red"; +// } \ No newline at end of file From cfe069a1374323ace5a09f573701511260b88682 Mon Sep 17 00:00:00 2001 From: jackgipson Date: Thu, 14 Feb 2019 13:24:42 -0800 Subject: [PATCH 06/29] tried changing nav bar using for loop and for each --- js/index.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/js/index.js b/js/index.js index c16e65420f..5ea50ca504 100644 --- a/js/index.js +++ b/js/index.js @@ -129,8 +129,12 @@ email.innerHTML = "sales@greatidea.io"; let footer = document.getElementsByTagName('p')[8]; footer.innerHTML = "Copyright Great Idea! 2018" -// let aTags = document.querySelectorAll("a"); + let aTags = document.querySelectorAll("a"); // let i; // for (i = 0; i < aTags.length; i++) { // aTags[i].style.color = "red"; -// } \ No newline at end of file +// } + +aTags.forEach(element => { + element.style.color = 'blue'; +}); \ No newline at end of file From 536f5037956807e913470703db933e0fef74c5e0 Mon Sep 17 00:00:00 2001 From: jackgipson Date: Thu, 14 Feb 2019 13:25:34 -0800 Subject: [PATCH 07/29] finished v1 --- js/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/index.js b/js/index.js index 5ea50ca504..f4229b6454 100644 --- a/js/index.js +++ b/js/index.js @@ -129,12 +129,12 @@ email.innerHTML = "sales@greatidea.io"; let footer = document.getElementsByTagName('p')[8]; footer.innerHTML = "Copyright Great Idea! 2018" - let aTags = document.querySelectorAll("a"); + //let aTags = document.querySelectorAll("a"); // let i; // for (i = 0; i < aTags.length; i++) { // aTags[i].style.color = "red"; // } -aTags.forEach(element => { - element.style.color = 'blue'; -}); \ No newline at end of file +// aTags.forEach(element => { +// element.style.color = 'blue'; +// }); \ No newline at end of file From b5d486b613315cdf654baa3b32e741952fe6bbf6 Mon Sep 17 00:00:00 2001 From: jackgipson Date: Fri, 15 Feb 2019 19:45:10 -0800 Subject: [PATCH 08/29] v2 --- js/index.js | 54 +++++++++++++++++++++++++++++++---------------------- 1 file changed, 32 insertions(+), 22 deletions(-) diff --git a/js/index.js b/js/index.js index f4229b6454..bd7f85116b 100644 --- a/js/index.js +++ b/js/index.js @@ -53,28 +53,38 @@ logo.setAttribute('src', siteContent["nav"]["img-src"]) let services = document.getElementsByTagName('a')[0]; services.innerHTML = siteContent['nav']['nav-item-1']; +//===================== Both ways below worked================================== + +//let product = document.getElementsByTagName('a')[1]; +//product.innerHTML = 'Product'; + +//let product = document.getElementsByTagName('a')[1]; +//product.innerText = siteContent['nav']['nav-item-2']; + +//=============================================================================== + let product = document.getElementsByTagName('a')[1]; -product.innerHTML = 'Product'; +product.innerText = siteContent['nav']['nav-item-2']; let vision = document.getElementsByTagName('a')[2]; -vision.innerHTML = 'Vision'; +vision.innerText = siteContent['nav']['nav-item-3']; let features = document.getElementsByTagName('a')[3]; -features.innerHTML = 'Features'; +features.innerText = siteContent['nav']['nav-item-4']; let about = document.getElementsByTagName('a')[4]; -about.innerHTML = 'About'; +about.innerText = siteContent['nav']['nav-item-5']; let contact = document.getElementsByTagName('a')[5]; -contact.innerHTML = 'Contact'; +contact.innerText = siteContent['nav']['nav-item-6']; // cta let h1_ = document.getElementsByTagName('h1')[0]; -h1_.innerHTML = "DOM Is Awesome"; +h1_.innerText = "DOM Is Awesome"; let button = document.getElementsByTagName("button")[0]; -button.innerHTML = "Get Started"; +button.innerText = "Get Started"; let headerImg = document.getElementById("cta-img"); headerImg.setAttribute("src", siteContent["cta"]["img-src"]); @@ -85,49 +95,49 @@ middleImg.setAttribute("src", "img/mid-page-accent.jpg") // main-content let featuresH4 = document.getElementsByTagName('h4')[0]; -featuresH4.innerHTML = 'Features'; +featuresH4.innerText = 'Features'; let featuresContent = document.getElementsByTagName('p')[0]; -featuresContent.innerHTML = 'Features content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.'; +featuresContent.innerText = 'Features content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.'; let about_H4 = document.getElementsByTagName('h4')[1]; -about_H4.innerHTML = 'About'; +about_H4.innerText = 'About'; let aboutContent_1 = document.getElementsByTagName('p')[1]; -aboutContent_1.innerHTML = 'About content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.'; +aboutContent_1.innerText = 'About content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.'; let services_H4 = document.getElementsByTagName('h4')[2]; -services_H4.innerHTML = 'Services'; +services_H4.innerText = 'Services'; let servicesContent = document.getElementsByTagName('p')[2]; -servicesContent.innerHTML = "Services content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis." +servicesContent.innerText = "Services content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis." let product_H4 = document.getElementsByTagName('h4')[3]; -product_H4.innerHTML = "Product" +product_H4.innerText = "Product" let productContent = document.getElementsByTagName('p')[3]; -productContent.innerHTML = "Product content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis." +productContent.innerText = "Product content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis." let vision_H4 = document.getElementsByTagName('h4')[4]; -vision_H4.innerHTML = "Vision"; +vision_H4.innerText = "Vision"; let visionContent = document.getElementsByTagName('p')[4]; -visionContent.innerHTML = "Vision content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis." +visionContent.innerText = "Vision content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis." // Contact let contact_H4 = document.getElementsByTagName('h4')[5]; -contact_H4.innerHTML = "Contact"; +contact_H4.innerText = "Contact"; let address = document.getElementsByTagName('p')[5]; -address.innerHTML = "123 Way 456 Street Somewhere, USA"; +address.innerText = "123 Way 456 Street Somewhere, USA"; let phone = document.getElementsByTagName('p')[6]; -phone.innerHTML = "1 (888) 888-8888"; +phone.innerText = "1 (888) 888-8888"; let email = document.getElementsByTagName('p')[7]; -email.innerHTML = "sales@greatidea.io"; +email.innerText = "sales@greatidea.io"; //footer let footer = document.getElementsByTagName('p')[8]; -footer.innerHTML = "Copyright Great Idea! 2018" +footer.innerText = "Copyright Great Idea! 2018" //let aTags = document.querySelectorAll("a"); // let i; From 73f448f40661b4f1d321bdb5918490f1e0d8a3ca Mon Sep 17 00:00:00 2001 From: jackgipson Date: Fri, 15 Feb 2019 21:05:50 -0800 Subject: [PATCH 09/29] v3 lastest version 3 --- js/index.js | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/js/index.js b/js/index.js index bd7f85116b..c5b7dc63cb 100644 --- a/js/index.js +++ b/js/index.js @@ -51,7 +51,7 @@ logo.setAttribute('src', siteContent["nav"]["img-src"]) //nav let services = document.getElementsByTagName('a')[0]; -services.innerHTML = siteContent['nav']['nav-item-1']; +services.innerText = siteContent['nav']['nav-item-1']; //===================== Both ways below worked================================== @@ -81,10 +81,10 @@ contact.innerText = siteContent['nav']['nav-item-6']; // cta let h1_ = document.getElementsByTagName('h1')[0]; -h1_.innerText = "DOM Is Awesome"; +h1_.innerText = siteContent['cta']['h1']; let button = document.getElementsByTagName("button")[0]; -button.innerText = "Get Started"; +button.innerText = siteContent['cta']['button']; let headerImg = document.getElementById("cta-img"); headerImg.setAttribute("src", siteContent["cta"]["img-src"]); @@ -95,49 +95,49 @@ middleImg.setAttribute("src", "img/mid-page-accent.jpg") // main-content let featuresH4 = document.getElementsByTagName('h4')[0]; -featuresH4.innerText = 'Features'; +featuresH4.innerText = siteContent['main-content']['features-h4']; let featuresContent = document.getElementsByTagName('p')[0]; -featuresContent.innerText = 'Features content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.'; +featuresContent.innerText = siteContent['main-content']['features-content']; let about_H4 = document.getElementsByTagName('h4')[1]; -about_H4.innerText = 'About'; +about_H4.innerText = siteContent['main-content']['about-h4']; let aboutContent_1 = document.getElementsByTagName('p')[1]; -aboutContent_1.innerText = 'About content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.'; +aboutContent_1.innerText = siteContent['main-content']['about-content']; let services_H4 = document.getElementsByTagName('h4')[2]; -services_H4.innerText = 'Services'; +services_H4.innerText = siteContent['main-content']['services-h4']; let servicesContent = document.getElementsByTagName('p')[2]; -servicesContent.innerText = "Services content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis." +servicesContent.innerText = siteContent['main-content']['services-content']; let product_H4 = document.getElementsByTagName('h4')[3]; -product_H4.innerText = "Product" +product_H4.innerText = siteContent['main-content']['product-h4']; let productContent = document.getElementsByTagName('p')[3]; -productContent.innerText = "Product content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis." +productContent.innerText = siteContent['main-content']['product-content']; let vision_H4 = document.getElementsByTagName('h4')[4]; -vision_H4.innerText = "Vision"; +vision_H4.innerText = siteContent['main-content']['vision-h4']; let visionContent = document.getElementsByTagName('p')[4]; -visionContent.innerText = "Vision content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis." +visionContent.innerText = siteContent['main-content']['vision-content']; // Contact let contact_H4 = document.getElementsByTagName('h4')[5]; -contact_H4.innerText = "Contact"; +contact_H4.innerText = siteContent['contact']['contact-h4']; let address = document.getElementsByTagName('p')[5]; -address.innerText = "123 Way 456 Street Somewhere, USA"; +address.innerText = siteContent['contact']['address']; let phone = document.getElementsByTagName('p')[6]; -phone.innerText = "1 (888) 888-8888"; +phone.innerText = siteContent['contact']['phone']; let email = document.getElementsByTagName('p')[7]; -email.innerText = "sales@greatidea.io"; +email.innerText = siteContent['contact']['email']; //footer let footer = document.getElementsByTagName('p')[8]; -footer.innerText = "Copyright Great Idea! 2018" +footer.innerText = siteContent['footer']['copyright']; //let aTags = document.querySelectorAll("a"); // let i; From 206d06ed80b376552cffb2448917bed2d553c3a5 Mon Sep 17 00:00:00 2001 From: Josh Knell Date: Sun, 7 Apr 2019 23:47:47 -0600 Subject: [PATCH 10/29] Revert "Merge pull request #697 from jackgipson/jack-gipson" This reverts commit f8f001a01d3da6e874d165d0d4d0831c2fe90ed6, reversing changes made to c46fe02a99fb9c743e44663763ad76bc98abcf18. --- README.md | 3 +- js/index.js | 110 +--------------------------------------------------- 2 files changed, 2 insertions(+), 111 deletions(-) diff --git a/README.md b/README.md index b4656ef0c3..a5a34956fe 100644 --- a/README.md +++ b/README.md @@ -43,5 +43,4 @@ You have been provided a [JSON object](js/index.js) with all the necessary data * [ ] Study tomorrow's lesson on events and try to integrate a button that can update content on the site with a click of a button. You could build a similar data object with new values to help you test the click event. ## Stretch Project: Digital Timer -This project is heavier on logic but employs some DOM manipulation to achieve it's goals. Go check it out here: [stretch assignment](stretch-assignment) and see how far you can get. - +This project is heavier on logic but employs some DOM manipulation to achieve it's goals. Go check it out here: [stretch assignment](stretch-assignment) and see how far you can get. \ No newline at end of file diff --git a/js/index.js b/js/index.js index c5b7dc63cb..c7bfc264c6 100644 --- a/js/index.js +++ b/js/index.js @@ -37,114 +37,6 @@ const siteContent = { }, }; -//Example: Update the img src for the logo - +// Example: Update the img src for the logo let logo = document.getElementById("logo-img"); logo.setAttribute('src', siteContent["nav"]["img-src"]) - -// let headerImg = document.getElementById("cta-img"); -// headerImg.setAttribute("src", "img/header-img.png"); - - - - - -//nav -let services = document.getElementsByTagName('a')[0]; -services.innerText = siteContent['nav']['nav-item-1']; - -//===================== Both ways below worked================================== - -//let product = document.getElementsByTagName('a')[1]; -//product.innerHTML = 'Product'; - -//let product = document.getElementsByTagName('a')[1]; -//product.innerText = siteContent['nav']['nav-item-2']; - -//=============================================================================== - -let product = document.getElementsByTagName('a')[1]; -product.innerText = siteContent['nav']['nav-item-2']; - -let vision = document.getElementsByTagName('a')[2]; -vision.innerText = siteContent['nav']['nav-item-3']; - -let features = document.getElementsByTagName('a')[3]; -features.innerText = siteContent['nav']['nav-item-4']; - -let about = document.getElementsByTagName('a')[4]; -about.innerText = siteContent['nav']['nav-item-5']; - -let contact = document.getElementsByTagName('a')[5]; -contact.innerText = siteContent['nav']['nav-item-6']; - -// cta - -let h1_ = document.getElementsByTagName('h1')[0]; -h1_.innerText = siteContent['cta']['h1']; - -let button = document.getElementsByTagName("button")[0]; -button.innerText = siteContent['cta']['button']; - -let headerImg = document.getElementById("cta-img"); -headerImg.setAttribute("src", siteContent["cta"]["img-src"]); - -let middleImg = document.getElementById("middle-img"); -middleImg.setAttribute("src", "img/mid-page-accent.jpg") - -// main-content - -let featuresH4 = document.getElementsByTagName('h4')[0]; -featuresH4.innerText = siteContent['main-content']['features-h4']; - -let featuresContent = document.getElementsByTagName('p')[0]; -featuresContent.innerText = siteContent['main-content']['features-content']; - -let about_H4 = document.getElementsByTagName('h4')[1]; -about_H4.innerText = siteContent['main-content']['about-h4']; - -let aboutContent_1 = document.getElementsByTagName('p')[1]; -aboutContent_1.innerText = siteContent['main-content']['about-content']; - -let services_H4 = document.getElementsByTagName('h4')[2]; -services_H4.innerText = siteContent['main-content']['services-h4']; - -let servicesContent = document.getElementsByTagName('p')[2]; -servicesContent.innerText = siteContent['main-content']['services-content']; - -let product_H4 = document.getElementsByTagName('h4')[3]; -product_H4.innerText = siteContent['main-content']['product-h4']; - -let productContent = document.getElementsByTagName('p')[3]; -productContent.innerText = siteContent['main-content']['product-content']; - -let vision_H4 = document.getElementsByTagName('h4')[4]; -vision_H4.innerText = siteContent['main-content']['vision-h4']; - -let visionContent = document.getElementsByTagName('p')[4]; -visionContent.innerText = siteContent['main-content']['vision-content']; - -// Contact - -let contact_H4 = document.getElementsByTagName('h4')[5]; -contact_H4.innerText = siteContent['contact']['contact-h4']; -let address = document.getElementsByTagName('p')[5]; -address.innerText = siteContent['contact']['address']; -let phone = document.getElementsByTagName('p')[6]; -phone.innerText = siteContent['contact']['phone']; -let email = document.getElementsByTagName('p')[7]; -email.innerText = siteContent['contact']['email']; - -//footer -let footer = document.getElementsByTagName('p')[8]; -footer.innerText = siteContent['footer']['copyright']; - - //let aTags = document.querySelectorAll("a"); -// let i; -// for (i = 0; i < aTags.length; i++) { -// aTags[i].style.color = "red"; -// } - -// aTags.forEach(element => { -// element.style.color = 'blue'; -// }); \ No newline at end of file From 3289039c2b994d7bb216de0deb116e3900449dc9 Mon Sep 17 00:00:00 2001 From: Gabriel Cabrejas Date: Tue, 31 Mar 2020 17:56:43 +0200 Subject: [PATCH 11/29] add more things to .gitignore --- .gitignore | 117 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 116 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 496ee2ca6a..065ff77733 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,116 @@ -.DS_Store \ No newline at end of file +.DS_Store +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +lerna-debug.log* + +# Diagnostic reports (https://nodejs.org/api/report.html) +report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage +*.lcov + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# Snowpack dependency directory (https://snowpack.dev/) +web_modules/ + +# TypeScript cache +*.tsbuildinfo + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Microbundle cache +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env +.env.test + +# parcel-bundler cache (https://parceljs.org/) +.cache +.parcel-cache + +# Next.js build output +.next + +# Nuxt.js build / generate output +.nuxt +dist + +# Gatsby files +.cache/ +# Comment in the public line in if your project uses Gatsby and not Next.js +# https://nextjs.org/blog/next-9-1#public-directory-support +# public + +# vuepress build output +.vuepress/dist + +# Serverless directories +.serverless/ + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ + +# TernJS port file +.tern-port + +# Stores VSCode versions used for testing VSCode extensions +.vscode-test + +# yarn v2 + +.yarn/cache +.yarn/unplugged +.yarn/build-state.yml +.pnp.* From 82de78df2652b9a1df99808539fdfec964982982 Mon Sep 17 00:00:00 2001 From: Gabriel Cabrejas Date: Tue, 31 Mar 2020 17:59:56 +0200 Subject: [PATCH 12/29] clean up html, change script attr from async to defer --- index.html | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index e20276d83c..1f19722aa7 100644 --- a/index.html +++ b/index.html @@ -1,25 +1,21 @@ + - - + + - Great Idea! DOM + Great Idea! DOM - - + + - - + -
-
+ + \ No newline at end of file From ec5c1f9db1fe2f5f59b55999cdd7c7bc2f71a8cc Mon Sep 17 00:00:00 2001 From: Gabriel Cabrejas Date: Tue, 31 Mar 2020 18:02:26 +0200 Subject: [PATCH 13/29] clean up original.html --- original.html | 44 ++++++++++++++++++++++++++------------------ 1 file changed, 26 insertions(+), 18 deletions(-) diff --git a/original.html b/original.html index ac56769752..6572e82f49 100644 --- a/original.html +++ b/original.html @@ -1,24 +1,20 @@ - - - - Great Idea! + + + - - + Great Idea! - + +
-
+ + \ No newline at end of file From d55cce23e009ae06e22a5551b4c8926c3545b332 Mon Sep 17 00:00:00 2001 From: Gabriel Cabrejas Date: Fri, 1 May 2020 17:29:48 +0200 Subject: [PATCH 14/29] fix formatting and typos --- README.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a5a34956fe..513a623821 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,8 @@ # DOM I - JavaScript Content Management System ## Project Description -You are going to be emulating a content managment system by controlling the content in the JavaScript file instead of the HTML file. This project is an excercise pointed at selecting elements and then updating them without touching the HTML file using the DOM. + +You are going to be emulating a content management system by controlling the content in the JavaScript file instead of the HTML file. This project is an exercise pointed at selecting elements and then updating them without touching the HTML file using the DOM. You have been provided a [JSON object](js/index.js) with all the necessary data to accomplish this task. Use dot or bracket notation to traverse the data provided. @@ -25,22 +26,27 @@ You have been provided a [JSON object](js/index.js) with all the necessary data * [ ] Your project manager will count the project as complete by merging the branch back into master. ## Task 1: Create selectors to point your data into elements + * [ ] Create selectors by using any of the DOM element's methods * [ ] Note that IDs have been used on all images. Use the IDs to update src path content ## Task 2: Update the HTML with the JSON data + * [ ] Remember, NO direct updating of the HTML source is allowed. * [ ] Using your selectors, update the content to match the example file. * [ ] Remember to update the src attributes on images ## Task 3: Add new content + * [ ] Change the color of the navigation text to be green. * [ ] Utilize `.appendChild()` and `.prepend()` to add two new items to the navigation system. You can call them whatever you want. * [ ] Check your work by looking at the [original html](original.html) in the browser ## Stretch Goals + * [ ] Update styles throughout the page as you see fit. Study what happens when you updated the DOM using style in JavaScript. * [ ] Study tomorrow's lesson on events and try to integrate a button that can update content on the site with a click of a button. You could build a similar data object with new values to help you test the click event. ## Stretch Project: Digital Timer -This project is heavier on logic but employs some DOM manipulation to achieve it's goals. Go check it out here: [stretch assignment](stretch-assignment) and see how far you can get. \ No newline at end of file + +This project is heavier on logic but employs some DOM manipulation to achieve its goals. Go check it out here: [stretch assignment](stretch-assignment) and see how far you can get. From 19a3a659517276f9eca6bfbd5f7d7d676e33c07d Mon Sep 17 00:00:00 2001 From: Gabriel Cabrejas Date: Tue, 26 May 2020 15:32:18 +0200 Subject: [PATCH 15/29] format README --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 513a623821..a18582e6a1 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ You have been provided a [JSON object](js/index.js) with all the necessary data ## Task 1: Create selectors to point your data into elements * [ ] Create selectors by using any of the DOM element's methods -* [ ] Note that IDs have been used on all images. Use the IDs to update src path content +* [ ] Note that IDs have been used on all images. Use the IDs to update src path content ## Task 2: Update the HTML with the JSON data @@ -44,7 +44,7 @@ You have been provided a [JSON object](js/index.js) with all the necessary data ## Stretch Goals -* [ ] Update styles throughout the page as you see fit. Study what happens when you updated the DOM using style in JavaScript. +* [ ] Update styles throughout the page as you see fit. Study what happens when you updated the DOM using style in JavaScript. * [ ] Study tomorrow's lesson on events and try to integrate a button that can update content on the site with a click of a button. You could build a similar data object with new values to help you test the click event. ## Stretch Project: Digital Timer From d3728bf0032c3449f0bc1c8580961480aa0968da Mon Sep 17 00:00:00 2001 From: Gabriel Cabrejas Date: Wed, 17 Jun 2020 17:14:55 +0200 Subject: [PATCH 16/29] readme work --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a18582e6a1..c9b8286096 100644 --- a/README.md +++ b/README.md @@ -21,9 +21,9 @@ You have been provided a [JSON object](js/index.js) with all the necessary data **Follow these steps for completing your project.** -* [ ] Submit a Pull-Request to merge Branch into master (student's Repo). **Please don't merge your own pull request** +* [ ] Submit a Pull-Request to merge `` Branch into `main` (student's Repo). **Please don't merge your own pull request** * [ ] Add your project manager as a reviewer on the pull-request -* [ ] Your project manager will count the project as complete by merging the branch back into master. +* [ ] Your project manager will count the project as complete by merging the branch back into `main` branch. ## Task 1: Create selectors to point your data into elements From 08e2bf2014be5d97d1bed97f7d17b5d910a9e023 Mon Sep 17 00:00:00 2001 From: Zoe Ludwig <56557607+zoelud@users.noreply.github.com> Date: Sun, 5 Jul 2020 20:26:56 -0700 Subject: [PATCH 17/29] Added Exit Ticket and updated readme formatting --- README.md | 34 +++++++++++++++++++++++----------- 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index c9b8286096..0c8364a3d2 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,9 @@ You have been provided a [JSON object](js/index.js) with all the necessary data **ONE RULE: You cannot update the HTML or CSS files directly. You must use JavaScript and the DOM only for your tasks today.** -## Set Up The Project With Git +## Instructions + +### Task 1: Set Up The Project With Git **Follow these steps to set up and work on your project:** @@ -19,34 +21,44 @@ You have been provided a [JSON object](js/index.js) with all the necessary data * [ ] Implement the project on your newly created `` branch, committing changes regularly. * [ ] Push commits: git push origin ``. -**Follow these steps for completing your project.** - -* [ ] Submit a Pull-Request to merge `` Branch into `main` (student's Repo). **Please don't merge your own pull request** -* [ ] Add your project manager as a reviewer on the pull-request -* [ ] Your project manager will count the project as complete by merging the branch back into `main` branch. +### Task 2a: MVP -## Task 1: Create selectors to point your data into elements +#### Create selectors to point your data into elements * [ ] Create selectors by using any of the DOM element's methods * [ ] Note that IDs have been used on all images. Use the IDs to update src path content -## Task 2: Update the HTML with the JSON data +#### Update the HTML with the JSON data * [ ] Remember, NO direct updating of the HTML source is allowed. * [ ] Using your selectors, update the content to match the example file. * [ ] Remember to update the src attributes on images -## Task 3: Add new content +#### Add new content * [ ] Change the color of the navigation text to be green. * [ ] Utilize `.appendChild()` and `.prepend()` to add two new items to the navigation system. You can call them whatever you want. * [ ] Check your work by looking at the [original html](original.html) in the browser -## Stretch Goals +### Task 2b: Exit Ticket + +Once you begin, you will have 15 minutes to answer the questions [here](https://app.codesignal.com/public-test/wDZyexzhgBwvRbtMb/zghxQdQtGENfLc). + +The completion of these questions is mandatory for MVP. However, passing the quiz doesn't affect your standing as a Lambda School student whatsoever. This is Lambda School testing itself! Please answer honestly and to the best of your ability without using external references. + +### Task 3: Stretch * [ ] Update styles throughout the page as you see fit. Study what happens when you updated the DOM using style in JavaScript. * [ ] Study tomorrow's lesson on events and try to integrate a button that can update content on the site with a click of a button. You could build a similar data object with new values to help you test the click event. -## Stretch Project: Digital Timer +#### Stretch Project: Digital Timer This project is heavier on logic but employs some DOM manipulation to achieve its goals. Go check it out here: [stretch assignment](stretch-assignment) and see how far you can get. + +## Submission Instructions + +**Follow these steps for completing your project.** + +* [ ] Submit a Pull-Request to merge `` Branch into `main` (student's Repo). **Please don't merge your own pull request** +* [ ] Add your project manager as a reviewer on the pull-request +* [ ] Your project manager will count the project as complete by merging the branch back into `main` branch. From 5837e6e3dceebb685fc5bae82b970da5ef84bea3 Mon Sep 17 00:00:00 2001 From: Zoe Ludwig <56557607+zoelud@users.noreply.github.com> Date: Sun, 5 Jul 2020 20:28:42 -0700 Subject: [PATCH 18/29] typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0c8364a3d2..c2cc4cbcfa 100644 --- a/README.md +++ b/README.md @@ -55,7 +55,7 @@ The completion of these questions is mandatory for MVP. However, passing the qui This project is heavier on logic but employs some DOM manipulation to achieve its goals. Go check it out here: [stretch assignment](stretch-assignment) and see how far you can get. -## Submission Instructions +## Submission Format **Follow these steps for completing your project.** From a0d84045d57bc91ac8b875fe9fab6fdcae3b6a73 Mon Sep 17 00:00:00 2001 From: Gabriel Cabrejas Date: Wed, 8 Jul 2020 22:38:45 +0200 Subject: [PATCH 19/29] clarification --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index c2cc4cbcfa..2c43eb48b8 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,8 @@ You are going to be emulating a content management system by controlling the content in the JavaScript file instead of the HTML file. This project is an exercise pointed at selecting elements and then updating them without touching the HTML file using the DOM. +Compare `index.html` against `original.html` and notice how `index.html` is lacking text content and other things. The goal is to make the page look the same as `original.html` using JavaScript. + You have been provided a [JSON object](js/index.js) with all the necessary data to accomplish this task. Use dot or bracket notation to traverse the data provided. **ONE RULE: You cannot update the HTML or CSS files directly. You must use JavaScript and the DOM only for your tasks today.** From 82f8d98e0c979f0662f8e2be0162a7a4e71df79a Mon Sep 17 00:00:00 2001 From: Zoe Ludwig <56557607+zoelud@users.noreply.github.com> Date: Sat, 26 Sep 2020 13:45:24 -0700 Subject: [PATCH 20/29] Update README.md --- README.md | 7 ------- 1 file changed, 7 deletions(-) diff --git a/README.md b/README.md index 2c43eb48b8..58ddbd909a 100644 --- a/README.md +++ b/README.md @@ -42,11 +42,6 @@ You have been provided a [JSON object](js/index.js) with all the necessary data * [ ] Utilize `.appendChild()` and `.prepend()` to add two new items to the navigation system. You can call them whatever you want. * [ ] Check your work by looking at the [original html](original.html) in the browser -### Task 2b: Exit Ticket - -Once you begin, you will have 15 minutes to answer the questions [here](https://app.codesignal.com/public-test/wDZyexzhgBwvRbtMb/zghxQdQtGENfLc). - -The completion of these questions is mandatory for MVP. However, passing the quiz doesn't affect your standing as a Lambda School student whatsoever. This is Lambda School testing itself! Please answer honestly and to the best of your ability without using external references. ### Task 3: Stretch @@ -62,5 +57,3 @@ This project is heavier on logic but employs some DOM manipulation to achieve it **Follow these steps for completing your project.** * [ ] Submit a Pull-Request to merge `` Branch into `main` (student's Repo). **Please don't merge your own pull request** -* [ ] Add your project manager as a reviewer on the pull-request -* [ ] Your project manager will count the project as complete by merging the branch back into `main` branch. From f550550e59fdb0297ec35485078642b5307ed2d6 Mon Sep 17 00:00:00 2001 From: Gabriel Cabrejas Date: Mon, 28 Sep 2020 21:54:30 +0200 Subject: [PATCH 21/29] get rid of the program manager language --- README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/README.md b/README.md index 58ddbd909a..1705c51ee3 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,6 @@ You have been provided a [JSON object](js/index.js) with all the necessary data **Follow these steps to set up and work on your project:** * [ ] Create a forked copy of this project. -* [ ] Add your project manager as collaborator on Github. * [ ] Clone your OWN version of the repository (Not Lambda's by mistake!). * [ ] Create a new branch: git checkout -b ``. * [ ] Implement the project on your newly created `` branch, committing changes regularly. @@ -42,8 +41,7 @@ You have been provided a [JSON object](js/index.js) with all the necessary data * [ ] Utilize `.appendChild()` and `.prepend()` to add two new items to the navigation system. You can call them whatever you want. * [ ] Check your work by looking at the [original html](original.html) in the browser - -### Task 3: Stretch +### Task 3: Stretch * [ ] Update styles throughout the page as you see fit. Study what happens when you updated the DOM using style in JavaScript. * [ ] Study tomorrow's lesson on events and try to integrate a button that can update content on the site with a click of a button. You could build a similar data object with new values to help you test the click event. From 2ab107ba217fcd538f9f665e0943ab960b84fd19 Mon Sep 17 00:00:00 2001 From: Norman Jeune III Date: Mon, 2 Aug 2021 14:59:02 -0400 Subject: [PATCH 22/29] first commit of the day --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 1705c51ee3..ae5a79dc8a 100644 --- a/README.md +++ b/README.md @@ -16,11 +16,11 @@ You have been provided a [JSON object](js/index.js) with all the necessary data **Follow these steps to set up and work on your project:** -* [ ] Create a forked copy of this project. -* [ ] Clone your OWN version of the repository (Not Lambda's by mistake!). -* [ ] Create a new branch: git checkout -b ``. -* [ ] Implement the project on your newly created `` branch, committing changes regularly. -* [ ] Push commits: git push origin ``. +* [X] Create a forked copy of this project. +* [X] Clone your OWN version of the repository (Not Lambda's by mistake!). +* [X] Create a new branch: git checkout -b ``. +* [X] Implement the project on your newly created `` branch, committing changes regularly. +* [X] Push commits: git push origin ``. ### Task 2a: MVP From aef1d78a766d9ec243529d6549905559ff8b70bc Mon Sep 17 00:00:00 2001 From: Norman Jeune III Date: Mon, 2 Aug 2021 16:54:01 -0400 Subject: [PATCH 23/29] nav header complete --- js/index.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/js/index.js b/js/index.js index c7bfc264c6..18f3f8a2b9 100644 --- a/js/index.js +++ b/js/index.js @@ -40,3 +40,10 @@ const siteContent = { // Example: Update the img src for the logo let logo = document.getElementById("logo-img"); logo.setAttribute('src', siteContent["nav"]["img-src"]) + +document.querySelector('nav a').text = 'Services'; +document.querySelector('nav a:nth-of-type(2)').text = 'Product'; +document.querySelector('nav a:nth-of-type(3)').text = 'Vision'; +document.querySelector('nav a:nth-of-type(4)').text = 'Features'; +document.querySelector('nav a:nth-of-type(5)').text = 'About'; +document.querySelector('nav a:nth-of-type(6)').text = 'Contact'; \ No newline at end of file From ef98e670843e7d13141fded0dcfeda778b4adee7 Mon Sep 17 00:00:00 2001 From: Norman Jeune III Date: Mon, 2 Aug 2021 17:47:15 -0400 Subject: [PATCH 24/29] header and title complete --- js/index.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/js/index.js b/js/index.js index 18f3f8a2b9..44d80f42d0 100644 --- a/js/index.js +++ b/js/index.js @@ -41,9 +41,17 @@ const siteContent = { let logo = document.getElementById("logo-img"); logo.setAttribute('src', siteContent["nav"]["img-src"]) +// const navElements = document.querySelectorAll('a') +// consple.log(navElements); + +// navElements.forEach((item, idx) => item.textContent = Object.values(siteContent.nav)[idx]) + document.querySelector('nav a').text = 'Services'; document.querySelector('nav a:nth-of-type(2)').text = 'Product'; document.querySelector('nav a:nth-of-type(3)').text = 'Vision'; document.querySelector('nav a:nth-of-type(4)').text = 'Features'; document.querySelector('nav a:nth-of-type(5)').text = 'About'; -document.querySelector('nav a:nth-of-type(6)').text = 'Contact'; \ No newline at end of file +document.querySelector('nav a:nth-of-type(6)').text = 'Contact'; + +document.querySelector('h1').innerHTML = 'DOM
is
Awesome!' +document.querySelector('button').innerHTML = siteContent['cta']['button']; \ No newline at end of file From 5ee6cbd2c2d185b135aff811d5b15d88836242e8 Mon Sep 17 00:00:00 2001 From: Norman Jeune III Date: Mon, 2 Aug 2021 18:21:15 -0400 Subject: [PATCH 25/29] both images added --- js/index.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/js/index.js b/js/index.js index 44d80f42d0..35d1224173 100644 --- a/js/index.js +++ b/js/index.js @@ -54,4 +54,10 @@ document.querySelector('nav a:nth-of-type(5)').text = 'About'; document.querySelector('nav a:nth-of-type(6)').text = 'Contact'; document.querySelector('h1').innerHTML = 'DOM
is
Awesome!' -document.querySelector('button').innerHTML = siteContent['cta']['button']; \ No newline at end of file +document.querySelector('button').innerHTML = siteContent['cta']['button']; + +const circleImg = document.querySelector('#cta-img'); +circleImg.src = siteContent['cta']['img-src']; + +const wideImg = document.querySelector('#middle-img'); +wideImg.src = siteContent['main-content']['middle-img-src']; \ No newline at end of file From 87df6b05a8e9c6f2b12bb351e766781ae84148cb Mon Sep 17 00:00:00 2001 From: Norman Jeune III Date: Mon, 2 Aug 2021 20:51:42 -0400 Subject: [PATCH 26/29] almost complete, layout functional --- js/index.js | 57 ++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 50 insertions(+), 7 deletions(-) diff --git a/js/index.js b/js/index.js index 35d1224173..4c010df5db 100644 --- a/js/index.js +++ b/js/index.js @@ -41,10 +41,15 @@ const siteContent = { let logo = document.getElementById("logo-img"); logo.setAttribute('src', siteContent["nav"]["img-src"]) -// const navElements = document.querySelectorAll('a') -// consple.log(navElements); +//Navigation Section -// navElements.forEach((item, idx) => item.textContent = Object.values(siteContent.nav)[idx]) + +//Alternate Way of writing section + + // const navElements = document.querySelectorAll('a') + // consple.log(navElements); + + // navElements.forEach((item, idx) => item.textContent = Object.values(siteContent.nav)[idx]) document.querySelector('nav a').text = 'Services'; document.querySelector('nav a:nth-of-type(2)').text = 'Product'; @@ -56,8 +61,46 @@ document.querySelector('nav a:nth-of-type(6)').text = 'Contact'; document.querySelector('h1').innerHTML = 'DOM
is
Awesome!' document.querySelector('button').innerHTML = siteContent['cta']['button']; -const circleImg = document.querySelector('#cta-img'); -circleImg.src = siteContent['cta']['img-src']; +//Image +document.querySelector('#cta-img').src = siteContent['cta']['img-src']; + +// const circleImg = document.querySelector('#cta-img'); +// circleImg.src = siteContent['cta']['img-src']; + + +//Main Section + +//Above Wide Image +document.querySelector('h4').textContent = siteContent['main-content']['features-h4']; +document.querySelector('p').textContent = siteContent['main-content']['features-content']; + +document.querySelector('.top-content .text-content:nth-of-type(2) h4').textContent = siteContent['main-content']['about-h4']; +document.querySelector('.top-content .text-content:nth-of-type(2) p').textContent = siteContent['main-content']['about-content']; + + +//Image +document.querySelector('#middle-img').src = siteContent['main-content']['middle-img-src']; + +// const wideImg = document.querySelector('#middle-img'); +// wideImg.src = siteContent['main-content']['middle-img-src']; + + +//Below Wide Image +document.querySelector('.bottom-content h4').textContent = siteContent['main-content']['services-h4']; +document.querySelector('.bottom-content p').textContent = siteContent['main-content']['services-content']; + +document.querySelector('.bottom-content .text-content:nth-of-type(2) h4').textContent = siteContent['main-content']['product-h4']; +document.querySelector('.bottom-content .text-content:nth-of-type(2) p').textContent = siteContent['main-content']['product-content']; + +document.querySelector('.bottom-content .text-content:nth-of-type(3) h4').textContent = siteContent['main-content']['vision-h4']; +document.querySelector('.bottom-content .text-content:nth-of-type(3) p').textContent = siteContent['main-content']['vision-content']; + +//Contact Section +document.querySelector('.contact h4').textContent = siteContent['contact']['contact-h4']; +document.querySelector('.contact p').innerHTML = '123 Way 456 Street
Somewhere USA'; +document.querySelector('.contact:nth-of-type(2) p').textContent = siteContent['contact']['phone']; +document.querySelector('.contact:nth-of-type(3) p').textContent = siteContent['contact']['email']; + -const wideImg = document.querySelector('#middle-img'); -wideImg.src = siteContent['main-content']['middle-img-src']; \ No newline at end of file +//Footer Section +document.querySelector('footer p').textContent = siteContent['footer']['copyright']; \ No newline at end of file From 302a18b7615711d2bc7201701a9ac3712e113698 Mon Sep 17 00:00:00 2001 From: Norman Jeune III Date: Mon, 2 Aug 2021 21:09:32 -0400 Subject: [PATCH 27/29] almost complete --- js/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/js/index.js b/js/index.js index 4c010df5db..4cd7fff594 100644 --- a/js/index.js +++ b/js/index.js @@ -51,6 +51,7 @@ logo.setAttribute('src', siteContent["nav"]["img-src"]) // navElements.forEach((item, idx) => item.textContent = Object.values(siteContent.nav)[idx]) +const navItems = document.querySelector('nav a').style.color = 'green'; document.querySelector('nav a').text = 'Services'; document.querySelector('nav a:nth-of-type(2)').text = 'Product'; document.querySelector('nav a:nth-of-type(3)').text = 'Vision'; @@ -98,8 +99,8 @@ document.querySelector('.bottom-content .text-content:nth-of-type(3) p').textCon //Contact Section document.querySelector('.contact h4').textContent = siteContent['contact']['contact-h4']; document.querySelector('.contact p').innerHTML = '123 Way 456 Street
Somewhere USA'; -document.querySelector('.contact:nth-of-type(2) p').textContent = siteContent['contact']['phone']; -document.querySelector('.contact:nth-of-type(3) p').textContent = siteContent['contact']['email']; +document.querySelector('.contact p:nth-of-type(2)').textContent = siteContent['contact']['phone']; +document.querySelector('.contact p:nth-of-type(3)').textContent = siteContent['contact']['email']; //Footer Section From 72f5a96b2fc1571686bc0aa5016e56fe2bbfc5bf Mon Sep 17 00:00:00 2001 From: Norman Jeune III Date: Mon, 2 Aug 2021 22:39:00 -0400 Subject: [PATCH 28/29] all nav items now green --- js/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/index.js b/js/index.js index 4cd7fff594..0b5990c143 100644 --- a/js/index.js +++ b/js/index.js @@ -51,7 +51,8 @@ logo.setAttribute('src', siteContent["nav"]["img-src"]) // navElements.forEach((item, idx) => item.textContent = Object.values(siteContent.nav)[idx]) -const navItems = document.querySelector('nav a').style.color = 'green'; +const navItems = document.querySelectorAll('nav a'); +navItems.forEach(item => item.style.color = 'green'); document.querySelector('nav a').text = 'Services'; document.querySelector('nav a:nth-of-type(2)').text = 'Product'; document.querySelector('nav a:nth-of-type(3)').text = 'Vision'; From 62fbcfda445754dafa857df0dc8a9a6176326622 Mon Sep 17 00:00:00 2001 From: Norman Jeune III Date: Tue, 3 Aug 2021 00:20:47 -0400 Subject: [PATCH 29/29] all items complete except for 2nd add to nav bar --- js/index.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/js/index.js b/js/index.js index 0b5990c143..fba99bef06 100644 --- a/js/index.js +++ b/js/index.js @@ -51,8 +51,17 @@ logo.setAttribute('src', siteContent["nav"]["img-src"]) // navElements.forEach((item, idx) => item.textContent = Object.values(siteContent.nav)[idx]) +const newNav = document.createElement('a'); +newNav.textContent = 'Projects'; +document.querySelector('nav').appendChild(newNav); + +// const newNav2 = document.createElement('a'); +// newNav2.textContent = 'API'; +// document.querySelector('nav').prepend(newNav2); + const navItems = document.querySelectorAll('nav a'); navItems.forEach(item => item.style.color = 'green'); + document.querySelector('nav a').text = 'Services'; document.querySelector('nav a:nth-of-type(2)').text = 'Product'; document.querySelector('nav a:nth-of-type(3)').text = 'Vision';