diff --git a/.gitignore b/.gitignore index 496ee2ca6a..065ff77733 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,116 @@ -.DS_Store \ No newline at end of file +.DS_Store +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +lerna-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 + +# 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 variables file +.env +.env.test + +# parcel-bundler cache (https://parceljs.org/) +.cache +.parcel-cache + +# Next.js build output +.next + +# 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 + +# 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 +.pnp.* diff --git a/README.md b/README.md index a5a34956fe..ae5a79dc8a 100644 --- a/README.md +++ b/README.md @@ -1,46 +1,57 @@ # DOM I - JavaScript Content Management System ## Project Description -You are going to be emulating a content managment system by controlling the content in the JavaScript file instead of the HTML file. This project is an excercise pointed at selecting elements and then updating them without touching the HTML file using the DOM. + +You are going to be emulating a content management system by controlling the content in the JavaScript file instead of the HTML file. This project is an exercise pointed at selecting elements and then updating them without touching the HTML file using the DOM. + +Compare `index.html` against `original.html` and notice how `index.html` is lacking text content and other things. The goal is to make the page look the same as `original.html` using JavaScript. You have been provided a [JSON object](js/index.js) with all the necessary data to accomplish this task. Use dot or bracket notation to traverse the data provided. **ONE RULE: You cannot update the HTML or CSS files directly. You must use JavaScript and the DOM only for your tasks today.** -## Set Up The Project With Git +## Instructions + +### Task 1: Set Up The Project With Git **Follow these steps to set up and work on your project:** -* [ ] Create a forked copy of this project. -* [ ] Add your project manager as collaborator on Github. -* [ ] Clone your OWN version of the repository (Not Lambda's by mistake!). -* [ ] Create a new branch: git checkout -b ``. -* [ ] Implement the project on your newly created `` branch, committing changes regularly. -* [ ] Push commits: git push origin ``. +* [X] Create a forked copy of this project. +* [X] Clone your OWN version of the repository (Not Lambda's by mistake!). +* [X] Create a new branch: git checkout -b ``. +* [X] Implement the project on your newly created `` branch, committing changes regularly. +* [X] Push commits: git push origin ``. -**Follow these steps for completing your project.** +### Task 2a: MVP -* [ ] Submit a Pull-Request to merge Branch into master (student's Repo). **Please don't merge your own pull request** -* [ ] Add your project manager as a reviewer on the pull-request -* [ ] Your project manager will count the project as complete by merging the branch back into master. +#### Create selectors to point your data into elements -## Task 1: Create selectors to point your data into elements * [ ] Create selectors by using any of the DOM element's methods -* [ ] Note that IDs have been used on all images. Use the IDs to update src path content +* [ ] Note that IDs have been used on all images. Use the IDs to update src path content + +#### Update the HTML with the JSON data -## Task 2: Update the HTML with the JSON data * [ ] Remember, NO direct updating of the HTML source is allowed. * [ ] Using your selectors, update the content to match the example file. * [ ] Remember to update the src attributes on images -## Task 3: Add new content +#### Add new content + * [ ] Change the color of the navigation text to be green. * [ ] Utilize `.appendChild()` and `.prepend()` to add two new items to the navigation system. You can call them whatever you want. * [ ] Check your work by looking at the [original html](original.html) in the browser -## Stretch Goals -* [ ] Update styles throughout the page as you see fit. Study what happens when you updated the DOM using style in JavaScript. +### Task 3: Stretch + +* [ ] Update styles throughout the page as you see fit. Study what happens when you updated the DOM using style in JavaScript. * [ ] Study tomorrow's lesson on events and try to integrate a button that can update content on the site with a click of a button. You could build a similar data object with new values to help you test the click event. -## Stretch Project: Digital Timer -This project is heavier on logic but employs some DOM manipulation to achieve it's goals. Go check it out here: [stretch assignment](stretch-assignment) and see how far you can get. \ No newline at end of file +#### Stretch Project: Digital Timer + +This project is heavier on logic but employs some DOM manipulation to achieve its goals. Go check it out here: [stretch assignment](stretch-assignment) and see how far you can get. + +## Submission Format + +**Follow these steps for completing your project.** + +* [ ] Submit a Pull-Request to merge `` Branch into `main` (student's Repo). **Please don't merge your own pull request** diff --git a/index.html b/index.html index e20276d83c..1f19722aa7 100644 --- a/index.html +++ b/index.html @@ -1,25 +1,21 @@ + - - + + - Great Idea! DOM + Great Idea! DOM - - + + - - + -
-
+ + \ No newline at end of file diff --git a/js/index.js b/js/index.js index c7bfc264c6..fba99bef06 100644 --- a/js/index.js +++ b/js/index.js @@ -40,3 +40,78 @@ const siteContent = { // Example: Update the img src for the logo let logo = document.getElementById("logo-img"); logo.setAttribute('src', siteContent["nav"]["img-src"]) + +//Navigation Section + + +//Alternate Way of writing section + + // const navElements = document.querySelectorAll('a') + // consple.log(navElements); + + // navElements.forEach((item, idx) => item.textContent = Object.values(siteContent.nav)[idx]) + +const newNav = document.createElement('a'); +newNav.textContent = 'Projects'; +document.querySelector('nav').appendChild(newNav); + +// const newNav2 = document.createElement('a'); +// newNav2.textContent = 'API'; +// document.querySelector('nav').prepend(newNav2); + +const navItems = document.querySelectorAll('nav a'); +navItems.forEach(item => item.style.color = 'green'); + +document.querySelector('nav a').text = 'Services'; +document.querySelector('nav a:nth-of-type(2)').text = 'Product'; +document.querySelector('nav a:nth-of-type(3)').text = 'Vision'; +document.querySelector('nav a:nth-of-type(4)').text = 'Features'; +document.querySelector('nav a:nth-of-type(5)').text = 'About'; +document.querySelector('nav a:nth-of-type(6)').text = 'Contact'; + +document.querySelector('h1').innerHTML = 'DOM
is
Awesome!' +document.querySelector('button').innerHTML = siteContent['cta']['button']; + +//Image +document.querySelector('#cta-img').src = siteContent['cta']['img-src']; + +// const circleImg = document.querySelector('#cta-img'); +// circleImg.src = siteContent['cta']['img-src']; + + +//Main Section + +//Above Wide Image +document.querySelector('h4').textContent = siteContent['main-content']['features-h4']; +document.querySelector('p').textContent = siteContent['main-content']['features-content']; + +document.querySelector('.top-content .text-content:nth-of-type(2) h4').textContent = siteContent['main-content']['about-h4']; +document.querySelector('.top-content .text-content:nth-of-type(2) p').textContent = siteContent['main-content']['about-content']; + + +//Image +document.querySelector('#middle-img').src = siteContent['main-content']['middle-img-src']; + +// const wideImg = document.querySelector('#middle-img'); +// wideImg.src = siteContent['main-content']['middle-img-src']; + + +//Below Wide Image +document.querySelector('.bottom-content h4').textContent = siteContent['main-content']['services-h4']; +document.querySelector('.bottom-content p').textContent = siteContent['main-content']['services-content']; + +document.querySelector('.bottom-content .text-content:nth-of-type(2) h4').textContent = siteContent['main-content']['product-h4']; +document.querySelector('.bottom-content .text-content:nth-of-type(2) p').textContent = siteContent['main-content']['product-content']; + +document.querySelector('.bottom-content .text-content:nth-of-type(3) h4').textContent = siteContent['main-content']['vision-h4']; +document.querySelector('.bottom-content .text-content:nth-of-type(3) p').textContent = siteContent['main-content']['vision-content']; + +//Contact Section +document.querySelector('.contact h4').textContent = siteContent['contact']['contact-h4']; +document.querySelector('.contact p').innerHTML = '123 Way 456 Street
Somewhere USA'; +document.querySelector('.contact p:nth-of-type(2)').textContent = siteContent['contact']['phone']; +document.querySelector('.contact p:nth-of-type(3)').textContent = siteContent['contact']['email']; + + +//Footer Section +document.querySelector('footer p').textContent = siteContent['footer']['copyright']; \ No newline at end of file diff --git a/original.html b/original.html index ac56769752..6572e82f49 100644 --- a/original.html +++ b/original.html @@ -1,24 +1,20 @@ - - - - Great Idea! + + + - - + Great Idea! - + +
-
+ + \ No newline at end of file