9/4/2017 - 5:29 PM

Sign in Cookies

Sign in Cookies

<!DOCTYPE html>

<html lang="en-us">


  <meta charset="UTF-8">
  <title>Sign-Up Today!</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">



  <div class="container">


    <!-- Jumbotron -->
    <div class="jumbotron">
      <h1 class="text-center">Sign-Up Today!</h1>

    <div class="row">

      <!-- Sign-Up Panel-->
      <div class="col-lg-6">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">New Member Sign-Up</h3>
          <div class="panel-body">

            <!-- Sign-up Form (note the various input "types")-->
            <form role="form">
              <div class="form-group">
                <label for="name-input">Name:</label>
                <input class="form-control" id="name-input" type="text">
              <div class="form-group">
                <label for="email-input">Email:</label>
                <input class="form-control" id="email-input" type="email">
              <div class="form-group">
                <label for="age-input">Age:</label>
                <input class="form-control" id="age-input" type="number">
              <div class="form-group">
                <label for="comment-input">How did you hear about us?</label>
                <textarea class="form-control" id="comment-input" rows="5"></textarea>
              <button class="btn btn-default" id="add-user" type="submit">Submit</button>

      <!-- Most Recent Member Panel -->
      <div class="col-lg-6">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Most Recent Member</h3>
          <div class="panel-body" id="recent-member">
            <h2 id="name-display">Jimmy John</h2>
            <h4 id="email-display">Email:</h4>
            <h4 id="age-display">Age: 27</h4>
            <p id="comment-display">I'm signing up, because I want to spread sandwiches to the world.</p>



  <!-- jQuery -->.
  <script src=""></script>

  <!-- Script -->.
    // NOTE: In order to modify cookies, we must access them over a secure connection e.i = https, localhost:.
    // Needed to create this function to readCookies. Essentially it splits up the cookie list
    // See the working app at or by opening with Firefox or Safari
    function readCookie(name) {
      var nameEQ = name + "=";
      var cookieArray = document.cookie.split(";");
      for (var i = 0; i < cookieArray.length; i++) {
        var cookie = cookieArray[i];
        while (cookie.charAt(0) === " ") cookie = cookie.substring(1, cookie.length);
        if (cookie.indexOf(nameEQ) === 0) {
          return cookie.substring(nameEQ.length, cookie.length);
      return null;

    // Capture Button Click
    $("#add-user").on("click", function(event) {

      // Capture User Inputs and store into variables
      var name = $("#name-input").val().trim();
      var email = $("#email-input").val().trim();
      var age = $("#age-input").val().trim();
      var comment = $("#comment-input").val().trim();

      // Console log each of the user inputs to confirm we are receiving them

      // Output all of the new information into the relevant sections

      // Clear the previous cookie by setting it it equal to nothing and its expiration date to a past time
      document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 UTC";

      // Store all of the parameters as part of the cookie string
      document.cookie = "name=" + name;
      document.cookie = "email=" + email;
      document.cookie = "age=" + age;
      document.cookie = "comment=" + comment;

      // Print all the cookies

      // Recover the parameters by passing the cookie parameters of interest,
      // through a function that breaks the document.cookie
      var cookieName = readCookie("name");
      var cookieEmail = readCookie("email");
      var cookieAge = readCookie("age");
      var cookieComment = readCookie("comment");

      // Log all of the cookies to test

    // By default display the content from the cookieString