added js lesson

2026-01-26 14:56:42 +08:00 · 2019-02-15 16:16:39 -08:00
parent 22fc20962f
commit ca53d75d9d
5 changed files with 95 additions and 44 deletions
--- a/step1-00/js-demo/js-demo.html
+++ b/step1-00/js-demo/js-demo.html
@@ -0,0 +1,41 @@
+<html>
+  <head> </head>
+  <body>
+    <div>
+      <h1>This is my <span>Title</span></h1>
+      <div class="tiles">
+        <div class="links">
+          <h2>Important Links</h2>
+          <a href="#">We're Awesome</a>
+          <a href="#">Learn More</a>
+          <a href="#">Hire Us</a>
+        </div>
+        <div>
+          <h2>Our Logo</h2>
+          <img src="../assets/fabric.jpg" width="100" alt="fabric logo" />
+        </div>
+        <div>
+          <h2>Contact Us</h2>
+          <div id="contact-form">
+            <label>Email</label><input class="email" type="email" />
+            <input onclick="displayMatches()" class="submit" value="Submit" type="submit" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+  <script>
+    const match = 'a';
+    let matches = 0;
+
+    function displayMatches() {
+      const text = document.querySelector('.email').value;
+      for (let letter of text) {
+        if (letter === match) {
+          matches++;
+        }
+      }
+      document.querySelector('.submit').value = matches + ' matches';
+    }
+  </script>
+</html>