adding dom manipulation examples to apis module

mdn · Jan 12, 2017 · 3b63adf · 3b63adf
1 parent 85839d4
commit 3b63adf
Show file tree

Hide file tree

Showing 8 changed files with 227 additions and 0 deletions.
diff --git a/javascript/apis/document-manipulation/bgtile.png b/javascript/apis/document-manipulation/bgtile.png
diff --git a/javascript/apis/document-manipulation/dinosaur.png b/javascript/apis/document-manipulation/dinosaur.png
diff --git a/javascript/apis/document-manipulation/dom-example-manipulated.html b/javascript/apis/document-manipulation/dom-example-manipulated.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Simple DOM example</title>
+    <style>
+      .highlight {
+        color: white;
+        background-color: black;
+        padding: 10px;
+        width: 250px;
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+      <section>
+        <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
+        <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p>
+      </section>
+  </body>
+  <script>
+    var link = document.querySelector('a');
+    link.textContent = 'Mozilla Developer Network';
+    link.href = 'https://developer.mozilla.org';
+
+    var sect = document.querySelector('section');
+    var para = document.createElement('p');
+    para.textContent = 'We hope you enjoyed the ride.';
+    sect.appendChild(para);
+
+    var text = document.createTextNode(' — the premier source for web development knowledge.');
+    var linkPara = document.querySelector('p');
+    linkPara.appendChild(text);
+
+    // You could clone link para by doing something like this and inserting the new para instead
+    // var newPara = linkPara.cloneNode(true);
+
+    sect.appendChild(linkPara);
+    linkPara.parentNode.removeChild(linkPara);
+
+    para.setAttribute('class', 'highlight');
+  </script>
+</html>
diff --git a/javascript/apis/document-manipulation/dom-example.html b/javascript/apis/document-manipulation/dom-example.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Simple DOM example</title>
+  </head>
+  <body>
+      <section>
+        <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
+        <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p>
+      </section>
+  </body>
+</html>
diff --git a/javascript/apis/document-manipulation/shopping-list-finished.html b/javascript/apis/document-manipulation/shopping-list-finished.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Shopping list example</title>
+    <style>
+      li {
+        margin-bottom: 10px;
+      }
+
+      li button {
+        font-size: 8px;
+        margin-left: 20px;
+        color: #666;
+      }
+    </style>
+  </head>
+  <body>
+
+    <h1>My shopping list</h1>
+
+    <div>
+      <label for="item">Enter a new item:</label>
+      <input type="text" name="item" id="item">
+      <button>Add item</button>
+    </div>
+
+    <ul>
+
+    </ul>
+
+  </body>
+  <script>
+
+  var list = document.querySelector('ul');
+  var input = document.querySelector('input');
+  var button = document.querySelector('button');
+
+  button.onclick = function() {
+    var myItem = input.value;
+    input.value = '';
+
+    var listItem = document.createElement('li');
+    var listText = document.createElement('span');
+    var listBtn = document.createElement('button');
+
+    listItem.appendChild(listText);
+    listText.textContent = myItem;
+    listItem.appendChild(listBtn);
+    listBtn.textContent = 'Delete';
+    list.appendChild(listItem);
+
+    listBtn.onclick = function(e) {
+      e.target.parentNode.parentNode.removeChild(listItem);
+    }
+
+    input.focus();
+  }
+
+
+  </script>
+</html>
diff --git a/javascript/apis/document-manipulation/shopping-list.html b/javascript/apis/document-manipulation/shopping-list.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Shopping list example</title>
+    <style>
+      li {
+        margin-bottom: 10px;
+      }
+
+      li button {
+        font-size: 8px;
+        margin-left: 20px;
+        color: #666;
+      }
+    </style>
+  </head>
+  <body>
+
+    <h1>My shopping list</h1>
+
+    <div>
+      <label for="item">Enter a new item:</label>
+      <input type="text" name="item" id="item">
+      <button>Add item</button>
+    </div>
+
+    <ul>
+
+    </ul>
+
+  </body>
+  <script>
+
+  </script>
+</html>
diff --git a/javascript/apis/document-manipulation/window-resize-example-finished.html b/javascript/apis/document-manipulation/window-resize-example-finished.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Window resize example</title>
+    <style>
+      body {
+        margin: 0;
+      }
+
+      div {
+        box-sizing: border-box;
+        width: 100px;
+        height: 100px;
+        background-image: url(bgtile.png);
+        border: 10px solid white;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div>
+
+    </div>
+
+  </body>
+  <script>
+    var div = document.querySelector('div');
+    var WIDTH = window.innerWidth;
+    var HEIGHT = window.innerHeight;
+
+    div.style.width = WIDTH + 'px';
+    div.style.height = HEIGHT + 'px';
+
+    window.onresize = function() {
+      WIDTH = window.innerWidth;
+      HEIGHT = window.innerHeight;
+      div.style.width = WIDTH + 'px';
+      div.style.height = HEIGHT + 'px';
+    }
+  </script>
+</html>
diff --git a/javascript/apis/document-manipulation/window-resize-example.html b/javascript/apis/document-manipulation/window-resize-example.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Window resize example</title>
+    <style>
+      body {
+        margin: 0;
+      }
+
+      div {
+        box-sizing: border-box;
+        width: 100px;
+        height: 100px;
+        background-image: url(bgtile.png);
+        border: 10px solid white;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div>
+
+    </div>
+
+  </body>
+  <script>
+
+  </script>
+</html>