surefoot Code Challenges

cookie-monster-README.md

Cookie Monster 🍪

Adds cookie upon form submission. If user has previously submitted, shows a unique message.

The attached script is used to add cookies upon form submission. This script will also check if a cookie already exists, and then calms the submiter's anxiety with a friendly message and excellent gif.

The script waits for the form to submit. Once it does, it checks to see if the cookie exists. If not, it's created and added to the user's browser.

If it does, this means the user has submitted before and needs assistance calming their nerves! The script adds a message to the form and includes a friendly gif at the end of the form.

This function can be added by copying and pasting the entire code snippet into the html document, one line directly above the tag.

cookie-monster.html

 <!-- COOKIE MONSTER: Adds cookie upon first form submit and checks to see if user has submited previously -->
    <script>
      const formElm = document.querySelector('form.wpcf7-form');

      function checkCookies(e) {
        if (!document.cookie) {
          addCookie();
          return;
        }
        const cookieValue = document.cookie
          .split('; ')
          .find((row) => row.startsWith('previouslySubmitted'));
        if (cookieValue) {
          e.preventDefault();
          addPreviouslySubmitedMessage();
        } else {
          addCookie();
        }
      }

      function addCookie() {
        const newCookie = 'previouslySubmitted=true';
        document.cookie = newCookie;
        console.log('cookie added');
      }

      function addPreviouslySubmitedMessage() {
        const responseElm = document.createElement('div');
        const message =
          "Hmm, you look familiar. While you're waiting for our reply, here's a GIF we think you should see.";
        const gifElm = document.createElement('img');
        gifElm.src = 'https://media.giphy.com/media/HGe4zsOVo7Jvy/giphy.gif';
        responseElm.setAttribute('role', 'alert');
        responseElm.setAttribute('aria-hidden', 'true');
        responseElm.setAttribute('style', 'display: block;');
        responseElm.classList.add('return-response');
        responseElm.textContent = message;

        formElm.appendChild(responseElm);
        formElm.appendChild(gifElm);
      }

      // add cookie

      // check for cookie

      formElm.addEventListener('submit', checkCookies);
    </script>
    <!-- END COOKIE MONSTER -->

form-validation.html

<!-- FORM VALIDATION: Adds form validation for Name and Message Field -->
    <script>
      const signUpForm = document.querySelector('form.wpcf7-form');

      function validateFormInputs(e) {
        const errors = [];
        const yourName = e.currentTarget['your-name'];
        const yourMessage = e.currentTarget['your-message'];
        console.log(yourName, yourMessage);
        if (!yourName.value) {
          errors.push(yourName);
        }
        if (!yourMessage.value) {
          errors.push(yourMessage);
        }
        if (errors.length !== 0) {
          e.preventDefault();
          displayErrors(errors);
        }
      }

      function displayErrors(errors) {
        errors.forEach((input) => {
          const alertElm = document.createElement('span');
          alertElm.classList.add('wpcf7-not-valid-tip');
          alertElm.setAttribute('role', 'alert');
          alertElm.setAttribute('aria-hidden', 'true');
          alertElm.textContent = 'The field is required.';
          input.parentNode.appendChild(alertElm);
        });
      }

      signUpForm.addEventListener('submit', validateFormInputs);
  </script>
<!-- END FORM VALIDATION -->

FormValidationREADME.md

Form Validation

Adding client side validation to surefoot's engineer contact form.

The attached script is used to add further validation to the form. The validation keeps responses quick by working in the browser before sending any data to the servers.

The code listens for the user to hit submit on the form. Once done, the script will check the message and name fields to see if there is any text written. If not, the code will add a red error message directly below the erroneous field. Otherwise, the form submits successfully.

This function can be added by copying and pasting the entire code snippet into the html document, one line directly above the tag.

swap-contact-position-README.md

Swap Contact Position

Switching the position of call prompt and contact form submission on engineering contact page

The attached script is used to switch the position of the two prompting elements on the contact form - the message form and the call prompt.

The script finds the section of code holding these two components. The code uses a unique id to target the exact code that is wrapping around them. In Between the unique wrapping it finds and the components that need switching are other wrappers. To make the switch, the script drills down from the unique wrapper to find the actual closest wrapper to those two components. Once it has found that nearest wrapper, from there the code is able to remove the email form component from the document and move it to the other side of the call component.

This function can be added by copying and pasting the entire code snippet into the html document, one line directly above the tag.

Swap-Contact-Position.html

<!-- SWAP ELEMENTS: Switches the form component with the call prompt -->
  <script>
    const contentWrapper = document.querySelector('section#content');
    const closestWrapper = contentWrapper.lastElementChild.querySelector('.container').firstElementChild
    const emailFormElm = closestWrapper.firstElementChild;
    closestWrapper.appendChild(emailFormElm);
  </script>
<!-- END SWAP ELEMENTS -->