Skip to content

Instantly share code, notes, and snippets.

@taylorwaddell
Last active December 5, 2021 21:05
Show Gist options
  • Save taylorwaddell/f4f2494de6884a8d62147fad32c8e58b to your computer and use it in GitHub Desktop.
Save taylorwaddell/f4f2494de6884a8d62147fad32c8e58b to your computer and use it in GitHub Desktop.

Exercise 1: Form validation

Hypothesis: Adding form validation to the "name" and "message" fields of the email form will increase form submissions.

Device type: Desktop only

URL: https://surefoot.me/engineer-application-sandbox-v1/

Dev notes:

  • Currently, the form only checks for a valid email.
  • Please execute your code on DOM ready and use javascript to handle validation.
  • Styling/layout of error messaging is up to you.
  • Include a few lines of a README-esque description that explains your code to a non-technical person.

Your code here:

/* Form Validation Code */
<!--
    Below is the form from the site. I've removed a lot of the guts
    to enhance the reading experience and highlight the changes. The 
    main edits are the addition of id's to the form, your-name, and
    your-message tags. As well as the addition of a new paragraph
    tag that will be used if any validation errors occur.
-->
<form id="contact-form">
  <p>
    <p id="error-warning" style="color: red;"></p>
    <label>Your Name * <input type="text" name="your-name" id="your-name" value="" /></label>
    <label>Your Email * <input type="email" name="YourEmail" value="" /></label>
    <label
      >Your Message *
      <textarea id="your-message" name="your-message"></textarea>
    </label>
    <input type="submit" value="Send" />
  </p>
</form>

<!--
    The JavaScript below scans the HTML document (aka the website)
    for the form input fields. It then assigns names to the "your-name",
    and the "your-message" fields so that they can be easily checked later.

    The `form.addEventListener("submit")` listens for a 'click' of the submit
    button. This allows us to preform actions when the user clicks submit.
    In this case, the code checks the "your-name" and "your-message" fields
    to make sure the user to a name and a message. The code also checks the
    name field to make sure the user didn't add any characters that don't belong
    in human names.

    If any errors are found in this process, we save the reason in a box. If there
    are any errors in the box at the end of the field checking, the code lets the
    user know something is wrong. The code will cancel the submission and then
    display to the user all the reasons why it was cancelled.
-->
<script>
    const form = document.getElementById("contact-form");
    const nameInput = document.getElementById("your-name");
    const message = document.getElementById("your-message");
    const errorWarning = document.getElementById("error-warning");

    window.addEventListener("DOMContentLoaded", () => {
    form.addEventListener("submit", (e) => {
        let errors = [];
        if (nameInput.value === "" || nameInput.value == null) {
        errors.push("Name is required");
        }
        if (/\d|[!@#$%^&*()_+=<>;:{}[`~-]/gi.test(nameInput.value)) {
        errors.push("No numbers or symbols allowed in name");
        }

        if (message.value === "" || message.value == null) {
        errors.push("Message is required");
        }

        if (errors.length > 0) {
        e.preventDefault();
        errorWarning.innerText = errors.join(", ");
        }
    });
    });
</script>

Exercise 2: Form restyling

Hypothesis: Swapping the position of the two forms and restyling the email form will increase email form submissions.

Device type: Desktop only

URL: https://surefoot.me/engineer-application-sandbox-v1/

Mockup: https://goo.gl/oMM3Pe

Dev notes:

  • Swap the positions of the "schedule a call" and email forms.
  • Restyle the form to resemble the mockup but don't worry too much about pixel perfection.
  • Include a few lines of a README-esque description that explains your code to a non-technical person.

Your code here:

/* Form Restyling Code */
<!--
    Within the website, there are two divs that contain the class
    `section_clear`. The second div that contains this class is the
    parent div to two other divs. One contains the contact form, and
    the other contains the "schedule a call" option.
    This is great news! Because of this set up, we can simply apply
    two styles to the parent div. The first is `display: flex;` which
    allows for the children with-in the parent div to be told where
    to go and how to do it. So naturally, the next style we are going
    to apply does exactly that. The next style is `flex-direction:
    row-reverse`. This first tells the site that we want these elements
    to be displayed side by side in one row. This is also telling the site
    that we want to display them in reverse order. Resulting in the
    "schedule a call" section to be put first.
-->
<div class="section_clear" style="display: flex; flex-direction: row-reverse;">
  <div class="form">
      This div contains the contact form!
  </div>
  <div class="schedule-call">
      This div contains a call scheduling option!
  </div>
</div>

Exercise 3: Cookie monster

Hypothesis: Disallowing return users to resubmit the email form will decrease spam.

Device: Desktop only

URL: https://surefoot.me/engineer-application-sandbox-v1/

Dev Notes:

  • If user has already submitted the email form, don’t allow them to resubmit. Instead, show the message "Hmm, you look familiar. While you're waiting for our reply, here's a GIF we think you should see."
  • GIF can be anything you desire.
  • Styling of messaging is up to you.
  • Include a few lines of a README-esque description that explains your code to a non-technical person.

Your code here:

/* Cookie Monster Code */
<!--
    Below is the form from the site. I've removed a lot of the guts
    to enhance the reading experience and highlight the changes.
    
    The main edits are the addition of a div that contains the familiar
    message as well as the gif we wish to display when the user does
    look familiar. This `<div>` has a class of `d-none` which we can
    assume only has the css style of `display: none;`. Which allows
    the message and gif to exist without being seen by the user.
    ooooooo. spooooky.
    Throughout the code below, the styling class of `d-none` will be
    of great importance.
-->

<div id="familiar-gif" class="d-none">
    <p>Hmm, you look familiar. While you're waiting for our reply, here's a GIF we think you should see.</p>
    <iframe src="https://giphy.com/embed/3o7aDgf134NzaaHI8o" width="466" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
</div>
<form id="contact-form">
    <p>
      <label>Your Name * <input type="text" name="your-name" value="" /></label>
      <label>Your Email * <input type="email" name="YourEmail" value="" /></label>
      <label
        >Your Message *
        <textarea name="your-message"></textarea>
      </label>
      <input type="submit" value="Send" />
    </p>
</form>

<!--
    The below JavaScript makes use of cookies. Which we can think of
    as a text document where the website can hold information over
    a long(er) period of time.

    The first thing this code does is drudges through all the cookies.
    In the process of looking at all of them, the code organizes them all
    in a way where we can call upon cookies by name instead of looking
    through all of them each time we need something. Which, we will later.

    Next, the code also goes through the website and finds the gif div
    we created up top, as well as the contact form. Then, the code assigns
    a name to each of these things for later ease.

    The last two actions of this code are best explained in opposite order.
    Starting with the `form.addEventLIstener("submit")`. Here the code is
    waiting for the user to click the submit button. When the user finally
    submits the form, the code adds a cookie called `contactSubmitted` to
    the cookie jar that lets the site know that the user has previously
    submitted a form.
    Now back to the `if (cookies.contactSubmitted)`. This `if` statement
    checks to see if the `contactSubmitted` cookie is in the cookie jar.
    If it is in there, the code tells the contact form to disappear and
    instead show the "you look familiar" message and the fun gif.
-->
<script>
const cookies = document.cookie
    .split(";")
    .map((cookie) => cookie.split("="))
    .reduce((acc, [key, value]) => ({ ...acc, [key.trim()]: value }), {});
const contactForm = document.getElementById("contact-form");
const familiarGIF = document.getElementById("familiar-gif");

window.addEventListener("DOMContentLoaded", () => {
    if (cookies.contactSubmitted) {
        familiarGIF.classList.remove("d-none");
        contactForm.classList.add("d-none");
    }
    form.addEventListener("submit", (e) => {
        document.cookie = "contactSubmitted=true";
    });
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment