Assign hw3

4564d4fe · Jeff Cohen · f8ce3d77 · 4564d4fe · 4564d4fe
Commit 4564d4fe authored Feb 02, 2020 by Jeff Cohen
Showing with 138 additions and 0 deletions
hw3/README.md
hw3/bikes.html
--- a/hw3/README.md
+++ b/hw3/README.md
+# Homework #3
+
+15 points
+
+**DUE: Thursday, February 13 by 5:30pm**
+
+For easiest viewing of these instructions, view online on Github.com or use a Markdown previewer.
+
+
+### Instructions
+
+This assignment will help you get practice at manipulating the DOM
+with JavaScript.
+
+Watch the instructional video here: https://youtu.be/3-R_hM5eVO8
+
+You will need to become familiar with:
+
+* [HTML Entities](https://developer.mozilla.org/en-US/docs/Glossary/Entity)
+* [The `<select>` Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)
+* [Element methods and navigating the DOM tree](https://developer.mozilla.org/en-US/docs/Web/API/Element)
+* Possibly more
+
+### Part 1. Marking Favorite Stations
+
+Start by opening the [bikes.html](bikes.html) page.
+
+NOTE: You will earn 1 point if you solve this part without modifying any existing HTML code.
+
+  * Allow the user to click the heart icon next to a station name to
+    add it to their list of favorites.
+    * (2 points) The heart should become a filled-in heart (HTML entity `&#9829;`)
+    * (3 points) The station name should be added to the list of Favorites
+
+  * Allow the user to click the filled-in heart of a station name
+    to remove it from their list of favorites.
+    * (2 points) The heart should become an outlined heart (HTML entity `&#9825;`)
+    * (3 points) The station name should be removed from the list of Favorites
+
+
+  * HINT: Test carefully. Make sure you can toggle the favorite status on and off many   times, not just the first time!
+
+### Part 2. Filtering The Station List by Area
+
+You will need to add new HTML code in order to solve this exercise.
+
+  * Allow the user to select a filter:
+    * (1 point) "All" should show all of the stations
+    * (1 point) "University of Chicago" should show only stations near campus
+    * (1 point) "Loop" should show only stations near the Loop
+    * (1 point) "North Side" should show only stations on the north side
+
+
+
+  * HINT: Read the HTML source code to find the CSS classes that indicate
+    which stations belong to which area.
+
+
+
+
+
+
--- a/hw3/bikes.html
+++ b/hw3/bikes.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
+
+    <title>Homework #3: Bike Stations</title>
+    <style>
+      .fave {
+        padding-right: 1em;
+        cursor: pointer;
+        color:red;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container mt-5">
+
+      <div class="row">
+        <div class="col">
+          <h1>Divvy Stations</h1>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col mr-4">
+
+          <p>Area:
+            <select>
+
+            </select>
+          </p>
+
+          <div class="row">
+            <div class="col">
+              <table id="stations" class="table table-striped border">
+                <thead>
+                  <tr><th colspan="2">Station Name</th></tr>
+                </thead>
+                <tbody>
+                  <tr class="loop"><td><span class="fave">&#9825;</span></td><td>Buckingham Fountain</td></tr>
+                  <tr class="loop"><td><span class="fave">&#9825;</span></td><td>Shedd Aquarium</td></tr>
+                  <tr class="loop"><td><span class="fave">&#9825;</span></td><td>Burnham Harbor</td></tr>
+                  <tr class="loop"><td><span class="fave">&#9825;</span></td><td>Michigan Ave & Washington St</td>
+                  <tr class="uchicago"><td><span class="fave">&#9825;</span></td><td>Harper Ave & 59th St</td></tr>
+                  <tr class="uchicago"><td><span class="fave">&#9825;</span></td><td>Museum of Science and Industry</td></tr>
+                  <tr class="uchicago"><td><span class="fave">&#9825;</span></td><td>Ellis Ave & 60th St</td></tr>
+                  <tr class="north"><td><span class="fave">&#9825;</span></td><td>Clark St & Armitage Ave</td></tr>
+                  <tr class="north"><td><span class="fave">&#9825;</span></td><td>Broadway and Argyle St</td></tr>
+                  <tr class="north"><td><span class="fave">&#9825;</span></td><td>Sheffield Ave & Waveland Ave</td></tr>
+                </tbody>
+              </table>
+            </div>
+            <div class="col">
+              <table id="favorites" class="table table-bordered">
+                <thead>
+                  <tr><th>My Favorite Stations</th> </tr>
+                </thead>
+                <tbody>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
+
+  </body>
+</html>