diff --git a/README.md b/README.md index 5ebbd5b893..e683ec60cf 100644 --- a/README.md +++ b/README.md @@ -12,37 +12,37 @@ 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. +* [X] Create a forked copy of this project. +* [X] Clone your OWN version of the repository. * [ ] 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..3a4f147df6 100644 --- a/src/index.js +++ b/src/index.js @@ -39,4 +39,54 @@ const siteContent = { // DO NOT CHANGE THIS OBJECT }, }; -console.log('project wired!') +//Images +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 midImg = document.querySelector('#middle-img') +midImg.setAttribute('src', siteContent.images['accent-img']) + +//CTA +document.querySelector('.cta .cta-text h1').textContent = siteContent.cta.h1 +document.querySelector('.cta .cta-text button').textContent = siteContent.cta.button + +//NAV Links +const navLinks = document.querySelectorAll('nav a') +const navLinksTexts = Object.values(siteContent.nav) +navLinks.forEach((link, idx) => { + link.textContent = navLinksTexts[idx] + link.classList.add('italic') +}) + +//Top content +const topContent = document.querySelector('.top-content') +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 Content +const bottomContent = document.querySelector('.bottom-content') +const h4sBottom = bottomContent.querySelectorAll('h4') +h4sBottom[0].textContent = siteContent['main-content']['services-h4'] +h4sBottom[1].textContent = siteContent['main-content']['product-h4'] +h4sBottom[2].textContent = siteContent['main-content']['vision-h4'] +const psBottom = bottomContent.querySelectorAll('p') +psBottom[0].textContent = siteContent['main-content']['services-content'] +psBottom[1].textContent = siteContent['main-content']['product-content'] +psBottom[2].textContent = siteContent['main-content']['vision-content'] + +//Contact +const contact = document.querySelector('section.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 Link +const footerLink = document.querySelector('footer a') +footerLink.textContent = siteContent.footer.copyright +footerLink.classList.add('bold') \ No newline at end of file