From 94ef54503dd8f2f5ca1d4736df7ba616c235345e Mon Sep 17 00:00:00 2001 From: Anaiz Alfonso Date: Mon, 31 Oct 2022 14:21:20 -0400 Subject: [PATCH] completed mvp --- .gitignore | 130 +++++++++++++++++++++++++++++++++++++++++++++++++ README.md | 22 ++++----- src/index.html | 2 +- src/index.js | 49 ++++++++++++++++++- 4 files changed, 190 insertions(+), 13 deletions(-) diff --git a/.gitignore b/.gitignore index 882564bbd6..2df972469a 100644 --- a/.gitignore +++ b/.gitignore @@ -119,3 +119,133 @@ dist # Mac cruft .DS_Store +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +lerna-debug.log* +.pnpm-debug.log* + +# Diagnostic reports (https://nodejs.org/api/report.html) +report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage +*.lcov + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# Snowpack dependency directory (https://snowpack.dev/) +web_modules/ + +# TypeScript cache +*.tsbuildinfo + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional stylelint cache +.stylelintcache + +# Microbundle cache +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variable files +.env +.env.development.local +.env.test.local +.env.production.local +.env.local + +# parcel-bundler cache (https://parceljs.org/) +.cache +.parcel-cache + +# Next.js build output +.next +out + +# Nuxt.js build / generate output +.nuxt +dist + +# Gatsby files +.cache/ +# Comment in the public line in if your project uses Gatsby and not Next.js +# https://nextjs.org/blog/next-9-1#public-directory-support +# public + +# vuepress build output +.vuepress/dist + +# vuepress v2.x temp and cache directory +.temp +.cache + +# Docusaurus cache and generated files +.docusaurus + +# Serverless directories +.serverless/ + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ + +# TernJS port file +.tern-port + +# Stores VSCode versions used for testing VSCode extensions +.vscode-test + +# yarn v2 +.yarn/cache +.yarn/unplugged +.yarn/build-state.yml +.yarn/install-state.gz +.pnp.* diff --git a/README.md b/README.md index 5ebbd5b893..3a5991deae 100644 --- a/README.md +++ b/README.md @@ -12,26 +12,26 @@ 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 @@ -40,8 +40,8 @@ Inside `src/index.js` there is declared an object literal containing all the dat ### 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.html b/src/index.html index 833c4b3272..7c7403ca14 100644 --- a/src/index.html +++ b/src/index.html @@ -69,4 +69,4 @@

- + \ No newline at end of file diff --git a/src/index.js b/src/index.js index e3fb5d7143..3973a11bb6 100644 --- a/src/index.js +++ b/src/index.js @@ -39,4 +39,51 @@ 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') +cta.src = siteContent.images['cta-img'] + +const midImg = document.querySelector('#middle-img') +midImg.setAttribute('src', siteContent.images['accent-img']) +// footer link +const footerLink = document.querySelector('footer a') +footerLink.textContent = siteContent.footer.copyright +footerLink.classList.add('bold') +// 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'] + +// 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 h4Bottom = bottomContent.querySelectorAll('h4') +h4Bottom[0].textContent = siteContent['main-content']['services-h4'] +h4Bottom[1].textContent = siteContent['main-content']['product-h4'] +h4Bottom[2].textContent = siteContent['main-content']['vision-h4'] +const pBottom = bottomContent.querySelectorAll('p') +psBottom[0].textContent = siteContent['main-content']['services-content'] +psBottom[1].textContent = siteContent['main-content']['services-content'] +psBottom[2].textContent = siteContent['main-content']['services-content'] + +// 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('header nav a') +const navLinksTexts = object.values(siteContent.nav) +navLinks.forEach((link, idx) => { + link.textContent = navLinksTexts[idx] + link.classList.add('italic') +})