Giter VIP home page Giter VIP logo

dom-i's Introduction

DOM I - JavaScript Content Management System

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 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 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.

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.
  • Clone your OWN version of the repository (Not Lambda's by mistake!).
  • Create a new branch: git checkout -b <firstName-lastName>.
  • Implement the project on your newly created <firstName-lastName> branch, committing changes regularly.
  • Push commits: git push origin <firstName-lastName>.

Task 2a: MVP

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

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

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 in the browser

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 its goals. Go check it out here: stretch assignment and see how far you can get.

Submission Format

Follow these steps for completing your project.

  • Submit a Pull-Request to merge <firstName-lastName> Branch into main (student's Repo). Please don't merge your own pull request

dom-i's People

Contributors

bigknell avatar ivanmora avatar jackgipson avatar ladrillo avatar shawnantonucci avatar tetondan avatar zoelud avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.