https://github.com/kpwithcode/99lines2
Building on the 99 Lines of Code Lab
https://github.com/kpwithcode/99lines2
Last synced: 12 months ago
JSON representation
Building on the 99 Lines of Code Lab
- Host: GitHub
- URL: https://github.com/kpwithcode/99lines2
- Owner: KPWithCode
- Created: 2018-11-14T20:50:08.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-11-18T02:15:19.000Z (over 7 years ago)
- Last Synced: 2025-01-11T04:49:21.996Z (over 1 year ago)
- Language: JavaScript
- Size: 12.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Info
This lab consists of two parts
In this second iteration you will be transforming part 1 of the lab
You should copy your files from part 1 and paste them along with this README file into a new folder linked to a new github repository
## New Objectives
Put a button in the HTML that says Sing!
Stepping Stone: When you click the button, all the console.log statements from yesterday should happen. They SHOULD NOT happen before the button is clicked.
When you have the button setup and working correctly as described, then:
Delete the div with class friend and the headings and paragraphs it contains from your html file
Go to your code where you are "singing the song" and accomplish the following using DOM:
For every one of your friends, create a div with class friend
Put an h3 containing your friend's name in the div
Then, instead of using console.log to put the song lyrics in the console, create a paragraph for each song lyric line and put that paragraph in the friend div.
To Recap:
When you have made these modifications, the page should start out just showing a button labeled "Sing!"
Nothing will be logged to the console
Clicking the button will cause 5 div elements with class name friend to be added to the page, one for each of your friends
Each div contains a friend's name as an h3 and 99 paragraphs, each one representing a lyric line that you previously were logging to the console in part 1 of this lab.
## Hints
You will be using DOM functions to complete this portion of the lab
Remember that elements can be added to other elements
document.body.appendChild(someElement);
someOtherElement.appendChild(anotherElement);