diff --git a/README.md b/README.md index 5ebbd5b893..ec1f2cae84 100644 --- a/README.md +++ b/README.md @@ -12,37 +12,36 @@ 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. -* [ ] Push commits: `git push origin main`. - +* [x] Create a forked copy of this project. +* [x] Clone your OWN version of the repository. +* [x] Push commits: `git push origin main`. ## 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 -* [ ] Using your selectors, update the text contents of the relevant elements, matching the design file. -* [ ] Find the correct texts for the elements inside the data object in `src/index.js`. +* [x] Using your selectors, update the text contents of the relevant elements, matching the design file. +* [x] Find the correct texts for the elements inside the data object in `src/index.js`. ### 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 tags _inside the nav_ an italic style by adding the classname `italic` to them 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 -* [ ] Submit a link to your github repo in canvas. +* [x] Submit a link to your github repo in canvas. diff --git a/src/index.js b/src/index.js index e3fb5d7143..f42c7a0ce6 100644 --- a/src/index.js +++ b/src/index.js @@ -38,5 +38,79 @@ const siteContent = { // DO NOT CHANGE THIS OBJECT "accent-img": "http://localhost:9000/img/accent.png", }, }; +//header nav anchors +const anchor = document.querySelectorAll('nav a'); +//nav items in obj siteContent +const navItems = Object.keys(siteContent.nav) + + for(let i = 0; i < anchor.length; i++){ + //adding text content from navItems to every anchor tag + anchor[i].textContent = siteContent.nav[navItems[i]] + //adding class italic to every anchor tag + anchor[i].setAttribute('class', 'italic') + } + +//cta button and header +const h1 = document.querySelector('h1'); +const button = document.querySelector('button'); +h1.textContent = siteContent.cta.h1; +button.textContent = siteContent.cta.button; + +//header img +document.querySelector('header img').setAttribute('src','http://localhost:9000/img/logo.png'); + +//section img +document.querySelector('section img').setAttribute('src', 'http://localhost:9000/img/cta.png'); + +//middle img +document.querySelector('.middle-img').setAttribute('src','http://localhost:9000/img/accent.png'); + +//h4 and the their child ps +const h4 = document.querySelectorAll('h4'); +const h4Ps = document.querySelectorAll('p'); +//main-contents strings +const h4s = Object.keys(siteContent["main-content"]) +//filtering every other index to recieve h4 content +let h4Keys = h4s.filter((elem, i) => { + return i % 2 === 0; +}) +//filtering every other index at index 1 to receive h4Ps content +let h4PKeys = h4s.filter((elem, i) => { + return i % 2 === 1; +}) + +for(let i = 0; i < h4Keys.length; i++){ + //looping through h4s to add textContent + h4[i].textContent = siteContent['main-content'][h4Keys[i]] + //looping through h4Ps to add textContent + h4Ps[i].textContent = siteContent['main-content'][h4PKeys[i]] +} + +//footer anchor +const footer = document.querySelector('footer a'); +//adding text to footer anchor +footer.textContent = siteContent.footer['copyright']; +//adding bold class to footer +footer.setAttribute('class', 'bold') + +//contact section +//selecting h4 elem and adding text to h4 +document.querySelector('.contact h4').textContent = siteContent.contact['contact-h4']; +//selecting p elem +const contactPs = document.querySelectorAll('.contact p'); +//strings in contact section of siteContent +const contactPsKeys = Object.keys(siteContent.contact) +//filtering out the h4 leaving us with the 3 ps in the contact class +const newContactPsKeys = contactPsKeys.filter((elem,i) => i > 0) +//adding text to p elems; +for(let i = 0; i < newContactPsKeys.length; i++){ + contactPs[i].textContent = siteContent.contact[newContactPsKeys[i]] +} + + + + + + + -console.log('project wired!')