Starter HTML for Demo SPA

students.html

<main>
    <div class="container--students">
      ${generateStudentsHTML(st.students)}
    </div>

    <form action="#">
      <div class="container--form">
        <div>
          <label for="student-pic">Enter a URL for the Student's Pic</label>

          <!-- Developer's Note: It's helpful if the name attributes have values that correspond with the 🔑s in Firestore. -->
          <input type="url" id="student-pic" name="pic" />
        </div>

        <div>
          <label for="student-name">Enter Student's Name</label>
          <input
            type="text"
            id="student-name"
            placeholder="Enter first and last name."
            name="name"
          />
        </div>
      </div>

      <div class="container--form">
        <div>
          <label for="fact">Enter an Interesting Fact About This Student</label>
          <input type="text" id="fact" name="fact" />
        </div>

        <div>
          <label for="why">Why is this Student in Savvy Coders?</label>
          <input type="text" id="why" placeholder="Just 1 sentence please." name="why" />
        </div>
      </div>
      <input type="submit" value="Add Student" />
    </form>
  </main>