Skip to content

Commit

Permalink
Updates to read me and instructions
Browse files Browse the repository at this point in the history
  • Loading branch information
BigKnell committed Aug 13, 2018
1 parent c0fbef6 commit eedfab3
Show file tree
Hide file tree
Showing 4 changed files with 24 additions and 30 deletions.
37 changes: 21 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,31 @@ You are going to be emulating a content managment system by controlling the cont

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.
**ONE RULE: You cannot update the HTML or CSS files directly. You must use JavaScript and the DOM only for your tasks today.**

## 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
## Task 1: Set Up The Project With Git

## Task 2: Update the HTML with the JSON data
* Remember, NO direct updating of the HTML is allowed.
* Using your selectors, update the content to match the example file.
* Remember to update the src attributes on images
* [ ] Fork the project into your GitHub user account
* [ ] Clone the forked project into a directory on your machine
* [ ] You are now ready to build this project with your preferred IDE

## Task 3: 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
## Task 2: 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

## Task 3: 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 4: 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.
* 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.
* [ ] 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
## 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.
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Great Idea!</title>
<title>Great Idea! DOM</title>

<link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
<link rel="stylesheet" href="css/index.css">
Expand Down
11 changes: 0 additions & 11 deletions js/data.js

This file was deleted.

4 changes: 2 additions & 2 deletions stretch-assignment/README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# DOM I
# Stretch Assignment - Digital Timer

Topics:
* Interacting with the DOM
Expand Down Expand Up @@ -32,7 +32,7 @@ Topics:

You will also need to look up and use `window.setInterval`. For this method, and any of those listed in the "Topics" section of this README, you are encouraged to use MDN as your resource for Documentation. MDN can be challenging to consume at first, so you may also use something like W3schools if the MDN documentation on a given subject is a bit too complicated.

## Stretch Goals
## Stretch On The Stretch!
If you compelete the timer with time to spare:
* Self study and research DOM `events` and `event listeners`
* SG1: Implement a start button. The digital timer should not start until the button is pressed.
Expand Down

0 comments on commit eedfab3

Please sign in to comment.