From 61be5a9ff13b08fa958db61ddfc7b1a9e0243fc8 Mon Sep 17 00:00:00 2001 From: Colten Empey Date: Mon, 7 Mar 2022 15:02:08 -0700 Subject: [PATCH] finished up! --- .vscode/settings.json | 3 ++ README.md | 24 ++++++++-------- src/index.js | 67 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 82 insertions(+), 12 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000000..6f3a2913e1 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/README.md b/README.md index 94a581040c..56f4c792bc 100644 --- a/README.md +++ b/README.md @@ -12,23 +12,23 @@ Inside `src/index.js` there is declared an object literal containing all the dat ## Git Setup -* [ ] Create a forked copy of this project. -* [ ] Clone your OWN version of the repository. -* [ ] 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. +* [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 `. ## Running the project -* [ ] Run `npm install` to download the project's dependencies. -* [ ] Run `npm start` to launch the page on `http://localhost:3000`. -* [ ] Run `npm test` to execute auto tests against your work (you'll need a new terminal window). +* [x] Run `npm install` to download the project's dependencies. +* [x] Run `npm start` to launch the page on `http://localhost:3000`. +* [x] Run `npm test` to execute auto tests against your work (you'll need a new terminal window). ## MVP ### Create selectors to access the relevant elements -* [ ] Declare variables pointing to the relevant DOM elements, using any of the selectors you have learned. +* [x] Declare variables pointing to the relevant DOM elements, using any of the selectors you have learned. ### Add text contents @@ -38,12 +38,12 @@ Inside `src/index.js` there is declared an object literal containing all the dat ### Add class names * [ ] Give the anchor tags _inside the nav_ an italic style by adding the classname `italic` to them alone. -* [ ] Give the anchor tag _inside the footer_ a bolder appearence by adding the classname `bold` to it alone. +* [x] Give the anchor tag _inside the footer_ a bolder appearence by adding the classname `bold` to it alone. ### Add image sources -* [ ] Make the img tags on the page display the correct images by editing their `src` attribute. -* [ ] Find the correct URLs for the images inside the data object in `src/index.js`. +* [x] Make the img tags on the page display the correct images by editing their `src` attribute. +* [x] Find the correct URLs for the images inside the data object in `src/index.js`. ## Submission Format diff --git a/src/index.js b/src/index.js index e3fb5d7143..4c6dcf18bb 100644 --- a/src/index.js +++ b/src/index.js @@ -40,3 +40,70 @@ const siteContent = { // DO NOT CHANGE THIS OBJECT }; console.log('project wired!') + +//pictures +const logoImg = document.querySelector("#logo-img") +logoImg.src = siteContent.images["logo-img"] + +const ctaImg = document.querySelector("#cta-img") +ctaImg.src = siteContent.images["cta-img"] + +const AccImg = document.querySelector("#middle-img") +AccImg.src = siteContent.images["accent-img"] + +//nav bar +const navBar = document.querySelectorAll("header nav a") +// navBar.children[0].textContent = siteContent.nav["nav-item-1"] +// navBar.children[1].textContent = siteContent.nav["nav-item-2"] +// navBar.children[2].textContent = siteContent.nav["nav-item-3"] +// navBar.children[3].textContent = siteContent.nav["nav-item-4"] +// navBar.children[4].textContent = siteContent.nav["nav-item-5"] +// navBar.children[5].textContent = siteContent.nav["nav-item-6"] + +const navLinkTexts = Object.values(siteContent.nav) +navBar.forEach((link, idx) => { + link.textContent=navLinkTexts[idx] + link.classList.add("italic") +}); + + +// main content + +//button section +const buttonTitle = document.querySelector("h1") +buttonTitle.textContent = siteContent.cta.h1 + +const buttonSect = document.querySelector("button") +buttonSect.textContent = siteContent.cta.button + + //top +const topContent = document.querySelector(".top-content") +console.log(topContent) +topContent.children[0].children[0].textContent = siteContent["main-content"]["features-h4"] +topContent.children[0].children[1].textContent = siteContent["main-content"]["features-content"] +topContent.children[1].children[0].textContent = siteContent["main-content"]["about-h4"] +topContent.children[1].children[1].textContent = siteContent["main-content"]["about-content"] + //bottom +const bottomContent = document.querySelector(".bottom-content") +console.log(topContent) +bottomContent.children[0].children[0].textContent = siteContent["main-content"]["services-h4"] +bottomContent.children[0].children[1].textContent = siteContent["main-content"]["services-content"] +bottomContent.children[1].children[0].textContent = siteContent["main-content"]["product-h4"] +bottomContent.children[1].children[1].textContent = siteContent["main-content"]["product-content"] +bottomContent.children[2].children[0].textContent = siteContent["main-content"]["vision-h4"] +bottomContent.children[2].children[1].textContent = siteContent["main-content"]["vision-content"] + + + + +//contact +const contact = document.querySelector(".contact") +contact.children[0].textContent = siteContent.contact["contact-h4"] +contact.children[1].textContent = siteContent.contact["address"] +contact.children[2].textContent = siteContent.contact["phone"] +contact.children[3].textContent = siteContent.contact["email"] + +//footer +const footerLink = document.querySelector("footer a") +footerLink.textContent = siteContent.footer.copyright +footerLink.classList.add("bold") \ No newline at end of file