first commit

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.

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')