Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 95 additions & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,3 +40,98 @@ 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 middleImg = document.querySelector('#middle-img');
middleImg.src = siteContent['images']['accent-img'];

//footer
const footer = document.querySelector('footer');
const footerLink = document.querySelector('footer a');
footerLink.classList.add('bold')
footerLink.textContent = siteContent['footer']['copyright'];

//contact
const contact = document.querySelector('.contact');
const contactHeading = document.querySelector('.contact h4');
const address = document.querySelector('.contact p:nth-of-type(1)');
const phone = document.querySelector('.contact p:nth-of-type(2)');
const email = document.querySelector('.contact p:nth-of-type(3)');

contactHeading.textContent = siteContent['contact']['contact-h4'];
address.textContent = siteContent['contact']['address'];
phone.textContent = siteContent['contact']['phone'];
email.textContent = siteContent['contact']['email'];

//middle content
const mainContent = document.querySelector('.main-content');
const topContent = mainContent.children[0];
const features = topContent.children[0];
const featuresH4 = features.querySelector('h4');
const featuresText = features.querySelector('p');
const about = topContent.children[1];
const aboutH4 = about.querySelector('h4');
const aboutText = about.querySelector('p');

featuresH4.textContent = siteContent['main-content']['features-h4'];
featuresText.textContent = siteContent['main-content']['features-content'];
aboutH4.textContent = siteContent['main-content']['about-h4'];
aboutText.textContent = siteContent['main-content']['about-content'];



const bottomContent = mainContent.children[2];
const services = bottomContent.children[0];
const servicesH4 = services.querySelector('h4');
const servicesText = services.querySelector('p');
const product = bottomContent.children[1];
const productH4 = product.querySelector('h4');
const productText = product.querySelector('p');
const vision = bottomContent.children[2];
const visionH4 = vision.querySelector('h4');
const visionText = vision.querySelector('p');

servicesH4.textContent = siteContent['main-content']['services-h4'];
servicesText.textContent = siteContent['main-content']['services-content'];
productH4.textContent = siteContent['main-content']['product-h4'];
productText.textContent = siteContent['main-content']['product-content'];
visionH4.textContent = siteContent['main-content']['vision-h4'];
visionText.textContent = siteContent['main-content']['vision-content'];

//cta
const cta = document.querySelector('.cta-text');
const ctaHeader = cta.querySelector('h1');
const ctaButton = cta.querySelector('button');

ctaHeader.textContent = siteContent['cta']['h1'];
ctaButton.textContent = siteContent['cta']['button'];

//header
const headerNav = document.querySelector('header nav');
const servicesNav = headerNav.querySelector('a:nth-of-type(1)');
const productNav = headerNav.querySelector('a:nth-of-type(2)');
const visionNav = headerNav.querySelector('a:nth-of-type(3)');
const featuresNav = headerNav.querySelector('a:nth-of-type(4)');
const aboutNav = headerNav.querySelector('a:nth-of-type(5)');
const contactNav = headerNav.querySelector('a:nth-of-type(6)');

servicesNav.textContent = siteContent['nav']['nav-item-1'];
productNav.textContent = siteContent['nav']['nav-item-2'];
visionNav.textContent = siteContent['nav']['nav-item-3'];
featuresNav.textContent = siteContent['nav']['nav-item-4'];
aboutNav.textContent = siteContent['nav']['nav-item-5'];
contactNav.textContent = siteContent['nav']['nav-item-6'];

servicesNav.classList.add('italic');
productNav.classList.add('italic');
visionNav.classList.add('italic');
featuresNav.classList.add('italic');
aboutNav.classList.add('italic');
contactNav.classList.add('italic');
//product, vision, feature, about, contact