├── package.json ├── README.md ├── LICENSE ├── src ├── index.html ├── index.js └── styles.css └── .gitignore /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "web-guided-project-dom-1", 3 | "version": "0.0.2", 4 | "scripts": { 5 | "start": "parcel src/index.html" 6 | }, 7 | "license": "MIT", 8 | "devDependencies": { 9 | "parcel": "^2.12.0" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/BloomInstituteOfTechnology/web-guided-project-dom-1.git" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # DOM 1 2 | 3 | Guided project for **DOM 1** Module. 4 | 5 | In this project we will learn how to use a variety of DOM selectors and manipulate the DOM imperatively. 6 | 7 | ## Prerequisites 8 | 9 | - Chrome 10 | - Node 11 | 12 | ## Project Setup 13 | 14 | - [ ] Clone this repository. 15 | - [ ] Navigate into the project folder with your command line. 16 | - [ ] Run `npm install` to download dependencies. 17 | - [ ] Run `npm start` to compile and serve the project. 18 | - [ ] Use Chrome to navigate to the URL indicated by the output of `npm start`. 19 | 20 | ❗ Note that the website will seem broken. The purpose of this Guided Project is to fix it using JavaScript. 21 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 BloomTech Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | DOM I 10 | 11 | 12 | 13 |
14 |
15 | Bloomtech logo 16 |

Bloomtech Cat

17 |
18 | 23 |
24 |
25 |
26 | majestic supreme ruler 29 |
30 |

Card Title

31 |

Card Subtitle

32 |

Sweet beast tickle my belly at your own peril i will pester for food when you're in the 33 | kitchen even if it's salad spend six hours per day washing

34 | More Pics 35 | Cat Ipsum 36 |
37 |
38 |
39 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | // 👉 1- Finding an element on the page and saving a reference to it 2 | // Older: getElementById, getElementsByTagName, getElementsByClassName 3 | // Newer: querySelector, querySelectorAll 4 | // Select the following single elements from the div.card 5 | 6 | // A- finding across the entire DOM 7 | const header = null 8 | const logoTitle = null 9 | const firstCard = null 10 | // B- finding within one particular element 11 | const imageFirstCard = null 12 | const titleFirstCard = null 13 | const subtitleFirstCard = null 14 | const textFirstCard = null 15 | // C- traversing with dot notation 16 | const link1FirstCard = null 17 | const link2FirstCard = null 18 | 19 | 20 | // 👉 2- Finding collections of elements in the DOM 21 | // A- Find all the anchor tags inside the nav element 22 | // B- Loop over the links and console.log their text content 23 | // C- Turn the collection of links into a real array 24 | // D- Use .filter to find the anchor tag with the textContent of "Home" 25 | 26 | 27 | // 👉 3- Changing an element's text content 28 | // A- Change the cat-related content into dog-related content 29 | // B- Have the students research online the difference between textContent and innerText 30 | 31 | 32 | // 👉 4- Changing any property 33 | // A- Using dot notation to change a few attributes 34 | // B- Using .setAttribute to change a few attributes 35 | 36 | 37 | // 👉 5- Changing the styling of an element 38 | // A- By changing the class names on the element with the classList API 39 | // B- By manipulating inline styles on the element 40 | 41 | 42 | // 👉 6- Creating new elements from scratch and appending them 43 | // Create a new link inside the nav for "Blog" 44 | 45 | 46 | // 👉 7- Making a copy of the card and appending it to the card group 47 | // DOM nodes can only exist in one spot in the DOM 48 | // We cannot append the same copy multiple times 49 | 50 | 51 | // 👉 8- Removing an existing element and putting it back [STRETCH if time allows] 52 | 53 | 54 | // 👉 9- Show to students the insertAdjacentHTML method [STRETCH if time allows] 55 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # Snowpack dependency directory (https://snowpack.dev/) 45 | web_modules/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | .parcel-cache 78 | 79 | # Next.js build output 80 | .next 81 | 82 | # Nuxt.js build / generate output 83 | .nuxt 84 | dist 85 | 86 | # Gatsby files 87 | .cache/ 88 | # Comment in the public line in if your project uses Gatsby and not Next.js 89 | # https://nextjs.org/blog/next-9-1#public-directory-support 90 | # public 91 | 92 | # vuepress build output 93 | .vuepress/dist 94 | 95 | # Serverless directories 96 | .serverless/ 97 | 98 | # FuseBox cache 99 | .fusebox/ 100 | 101 | # DynamoDB Local files 102 | .dynamodb/ 103 | 104 | # TernJS port file 105 | .tern-port 106 | 107 | # Stores VSCode versions used for testing VSCode extensions 108 | .vscode-test 109 | 110 | # yarn v2 111 | 112 | .yarn/cache 113 | .yarn/unplugged 114 | .yarn/build-state.yml 115 | .pnp.* 116 | 117 | .DS_Store 118 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Lato, sans-serif; 3 | background: #e62739; 4 | margin: 0; 5 | } 6 | header { 7 | display: flex; 8 | justify-content: space-between; 9 | align-items: center; 10 | background: #27e6d4; 11 | padding: 10px; 12 | margin: 0; 13 | } 14 | header.sky { 15 | background: deepskyblue; 16 | } 17 | @media (max-width: 780px) { 18 | header { 19 | flex-direction: column; 20 | } 21 | } 22 | header .logo-container { 23 | display: flex; 24 | align-items: center; 25 | } 26 | header .logo-container img { 27 | width: 60px; 28 | height: 60px; 29 | display: block; 30 | } 31 | header nav { 32 | display: flex; 33 | justify-content: space-around; 34 | width: 50vw; 35 | } 36 | header nav a { 37 | font-weight: bold; 38 | margin: 0 10px; 39 | color: #fff; 40 | font-size: 20px; 41 | letter-spacing: 2px; 42 | text-decoration: none; 43 | } 44 | h1 { 45 | margin-left: 1rem; 46 | letter-spacing: 2px; 47 | } 48 | img { 49 | width: 100%; 50 | vertical-align: middle; 51 | } 52 | .extra-stuff { 53 | font-weight: bold; 54 | } 55 | .card-group { 56 | display: grid; 57 | grid-template-columns: 1fr 1fr 1fr 1fr; 58 | margin-top: 20px; 59 | grid-gap: 16px; 60 | padding: 16px; 61 | grid-auto-rows: 1fr; 62 | } 63 | @media (max-width: 780px) { 64 | .card-group { 65 | grid-template-columns: 1fr 1fr; 66 | grid-template-rows: auto; 67 | } 68 | } 69 | @media (max-width: 560px) { 70 | .card-group { 71 | grid-template-columns: 1fr; 72 | } 73 | } 74 | .card-group .card { 75 | background-color: #eee; 76 | overflow: hidden; 77 | } 78 | .card-group .card .card-title { 79 | margin-bottom: 0.75rem; 80 | font-size: 1.85rem; 81 | font-weight: 400; 82 | } 83 | .card-group .card .card-subtitle { 84 | margin-top: -0.375rem; 85 | margin-bottom: 0; 86 | font-size: 1.2rem; 87 | font-weight: 500; 88 | color: #6c757d; 89 | } 90 | .card-group .card .card-body { 91 | padding: 16px; 92 | } 93 | .card-group .card .card-link { 94 | color: #27e6d4; 95 | font-size: 20px; 96 | } 97 | .card-group .card .card-link + .card-link { 98 | margin-left: 1.25rem; 99 | } 100 | h4, 101 | h5 { 102 | margin-top: 0; 103 | margin-bottom: 0.5rem; 104 | font-family: inherit; 105 | font-weight: 500; 106 | line-height: 1.2; 107 | color: inherit; 108 | } 109 | footer { 110 | padding: 20px; 111 | font-size: 20px; 112 | } 113 | --------------------------------------------------------------------------------