Animoto Challenge

form.js

$(document).ready(function() {
  function validateEmail(email){
    var emailReg = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);

    var valid = emailReg.test(email);

    if(!valid) {
      return false;
    } else {
      return true;
    }
  }

  $("form").submit(function() {

    if(validateEmail($("#email").val()) === false) {
      $(".errors").text("Please enter a valid email address.");
      return false;
    };

    if($("#password").val() == "") {
      $(".errors").text("Password cannot be blank");
      return false;
    };

    window.location.href = "http://www.google.com";
    return false;
  });
});

index.html.erb

<p class="description">
  Logging in here will direct you to Google's homepage, a page I believe has great
  design. Aesthetically speaking, the design is <span class="emphasis">okay</span>.
  There's a single input field that allows the user to do what they came to the site to do: search.
  Fair enough.
</p>

<p class="description">
  What makes Google's design awesome, in my opinion, is the experience Google provides
  <span class="emphasis">through</span> that search bar. With this tool, Google has
  made it so that searches can be performed using a variety of input fields from a
  number of places. This allows people to use their service without even vising
  the site. If there's an empty text input on your screen, I bet you can use it
  to search Google.
</p>

<p class="description">
  As for a site whose design I find truly visually pleasing, it's
  <a href="http://www.weareisland.com">We Are Island</a>. I like it because
  it does not use web design to force a particular experience onto its visitors.
  It's showcases variation of typography and allows the content of the site
  to drive the experience.
</p>

<div align="center" class="wrapper">
  <form class="shadow">
    <div class="form-header">
      Login
    </div>

    <div class="errors">
    </div>

    <div class="form-body">
      <input type="text" placeholder="you@domain.com" id="email">
      <input type="password" placeholder="Password" id="password">

      <input type="submit" value="Login" id="submit">

      <div class="remember">
        <input type="checkbox" id="check"></input>
        <label for="check">Remember me on this computer</label>
      </div>
    </div>
  </form>
</div>

styles.css.scss

body {
  font-family: "Helvetica";
}

form {
  width: 300px;
  height: 175px;
  border: 1px solid #999;
  border-radius: 2px;
}

.errors {
  color: red;
}

input {
  display: block;
  margin-bottom: 15px;
}

.wrapper {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
}

#email, #password {
  width: 250px;
}

#submit {
  position: relative;
  top: 5px;
  left: 105px;

  border-radius: 40px 40px 40px 40px;
  border: 1px solid #a9e9e9;
}

.remember {
  position: relative;
  bottom: 25px;
  right: 48px;
  border-radius: -1;
  width: 200px;

  label, #check {
    display: inline;
  }

  label {
    font-size: 10px;
  }
}

.form-header {
  background-color: #a9e9e9;
  padding: 10px;
}

.form-body {
  padding-top: 15px;
  border-top: 1px solid #999;
}

.shadow {
  -moz-box-shadow:    1px 1px 1px 0.25px #ccc;
  -webkit-box-shadow: 1px 1px 1px 0.25px #ccc;
  box-shadow:         1px 1px 1px 0.25px #ccc;
}

.description {
  width: 500px;

  .emphasis {
    font-style: italic;
  }
}