html as javascript assignment

dom-playground-master/.gitignore

@@ -0,0 +1,2 @@
+/.vscode
+.DS_Store

dom-playground-master/README.md

@@ -0,0 +1,28 @@
+# DOM Playground
+
+## Instructions
+Fix the page design and layout by modifying the DOM. When complete, your page should look like the original, "[Wicked Grove](http://www.csszengarden.com/006/)" design.
+
+You'll need to look for the comments found in the `index.html` file. Follow the instructions in each comment, but do not modify the HTML or CSS file. All modifications must be done in JavaScript. Use the `js/fix-the-page.js` file for your DOM modifications. 
+
+## Rules
+1) You may not modify the HTML file.
+2) You may not modify the CSS file.
+
+You can use the original HTML and CSS files for reference.
+
+## What You Need to Know
+This assignment is designed to test your knowledge of the following JavaScript features:
+
+* `document.querySelector()`
+* `document.createElement()`
+* `element.appendChild()`
+* `element.innerHTML`
+* `element.style`
+* `element.attribute`
+* `element.classList.add()`
+* `Array.forEach()`
+* The DOM
+* Object Literals `{}`
+* ... and more!
+

dom-playground-master/css/style.css

@@ -0,0 +1,203 @@
+/* Remember, you cannot edit this file. Add the properties using JavaScript. */
+p {
+    font: 10pt/16pt "Trebuchet MS", sans-serif;
+    margin-top: 0px;
+    text-align: justify;
+}
+
+h3 {
+    font: bold normal 12pt "Trebuchet MS", sans-serif;
+    letter-spacing: 3px;
+    margin-bottom: 2px;
+    color: #333333;
+    text-align: left;
+}
+
+a:link {
+    font-weight: bold;
+    text-decoration: none;
+    color: #FF6600;
+}
+
+a:visited {
+    font-weight: bold;
+    text-decoration: none;
+    color: #CC0000;
+}
+
+a:hover,
+a:active {
+    text-decoration: underline;
+    color: #FF6600;
+}
+
+
+.page-wrapper {
+    background: #9cf url(../images/trees.jpg) no-repeat left top;
+    padding: 200px 0px 0px 0px;
+    margin: 0px auto;
+    width: 800px;
+    border-left: 2px dashed #fff;
+    border-right: 2px dashed #fff;
+}
+
+header {
+    margin-bottom: 10px;
+}
+
+/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
+header h1 {
+    background: transparent;
+    margin-top: -180px;
+    width: 500px;
+    height: 87px;
+    float: left;
+    color: #fff;
+
+    text-indent: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+header h2 {
+    background: transparent url(../images/tag.gif) no-repeat top left;
+    width: 300px;
+    margin-top: -60px;
+    margin-left: -190px;
+    height: 100px;
+    float: right;
+
+    text-indent: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.summary {
+    width: 130px;
+    float: left;
+    padding: 5px;
+    margin-right: 15px;
+    background: #0099FF;
+
+}
+
+.summary p {
+    font: bold 8pt/12pt verdana, sans-serif;
+    text-align: right;
+    color: #fff;
+}
+
+.summary a:link {
+    font-weight: bold;
+    text-decoration: none;
+    color: #003;
+}
+
+.summary a:visited {
+    font-weight: bold;
+    text-decoration: none;
+    color: #006;
+}
+
+.summary a:hover,
+.summary a:active {
+    text-decoration: underline;
+    color: #FF6600;
+}
+
+.preamble,
+#supporting text,
+.explanation,
+.participation,
+.benefits,
+.requirements {
+    padding: 0px 170px 0px 30px;
+}
+
+footer {
+    text-align: center;
+}
+
+footer a:link,
+footer a:visited {
+    margin-right: 20px;
+}
+
+.sidebar {
+    background: transparent url(../images/menu.gif) top left no-repeat;
+    position: absolute;
+    top: 0px;
+    padding: 15px;
+    margin-top: 200px;
+    margin-left: 650px;
+    width: 130px;
+}
+
+.sidebar .wrapper {
+    font: 10px verdana, sans-serif;
+    padding-top: 35px;
+}
+
+.sidebar h3.select {
+    background: transparent url(../images/select.gif) top left no-repeat;
+    width: 130px;
+    height: 25px;
+    margin-left: -8px;
+
+    text-indent: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.sidebar h3.archives {
+    background: transparent url(../images/archives.gif) top left no-repeat;
+    width: 130px;
+    height: 25px;
+    margin-left: -8px;
+
+    text-indent: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.sidebar h3.resources {
+    background: transparent url(../images/resources.gif) top left no-repeat;
+    width: 130px;
+    height: 25px;
+    margin-left: -8px;
+
+    text-indent: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.sidebar ul {
+    margin: 0px;
+    padding: 0px;
+}
+
+.sidebar li {
+    line-height: 2.5ex;
+    background: transparent;
+    display: block;
+    padding-top: 5px;
+    margin-bottom: 5px;
+    list-style-type: none;
+}
+
+.sidebar li a:link {
+    color: #FF3300;
+}
+
+.sidebar li a:visited {
+    color: #FF0000;
+}
+
+.extra1 {
+    background: transparent;
+    position: absolute;
+    top: 40px;
+    right: 0px;
+    width: 148px;
+    height: 110px;
+}