DOM I
Project Description
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 src/index.html
against src/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 can find a screenshot of the goal in design-files/desktop-example.png
.
Inside src/index.js
there is declared an object literal containing all the data needed to make the page look like the screenshot. Do not change this object! Below the declaration you should perform your DOM manipulations. Typically you would select an element and then use the data inside the object to add text content to it, or to change its attributes. Access the data using dot or square-bracket notation.
THE MOST IMPORTANT RULE: You cannot update the HTML file directly. You must use JavaScript alone.
Git Setup
- Create a forked copy of this project.
- 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 onhttp://localhost:3000
. - 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.
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
.
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.
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
.
Submission Format
- Submit a link to your github repo in canvas.