REAL CLIENT PROJECT 1 [JP]

REAL CLIENT PROJECT 1 [JP]

This website is requested my friend who owns small bakery store and from going to be on live soon in Japan. Since it is still small local business, client asked warm and simple, “easy to see” website. It is static website created by front-end languages, and third party API named Formspree is used for contact form.

https://ayawata.com/ampel_project/

PLANNING PROCESS

This website consists of 5 pages and page structures and photos, texts are provided by client. Client’s requests also included Email forms and simple calendar to see their store’s open schedule.

LANGUAGE | TOOLS

 

FEATURED

Contact form with JavaScript validation, and 3rd party API “Form Spree”

*Either “Success” or “Error” message will show up for 5 seconds depends on sending result under “Submit” button. *

or


const form = document.getElementById("form");
const name = document.getElementById("name");
const phone = document.getElementById("phone");
const email = document.getElementById("email");
const inquiry = document.getElementById("inquiry");

name.addEventListener('blur', (e) => {
  e.preventDefault();
  checkNameInputs();
});

phone.addEventListener('blur', (e) => {
  e.preventDefault();
  checkPhoneInputs();
});

email.addEventListener('blur', (e) => {
  e.preventDefault();
  checkEmailInputs();
});

inquiry.addEventListener('blur', (e) => {
  e.preventDefault();
  checkInquiryInputs();
});

function checkNameInputs(){
  const nameValue = name.value.trim();

  if(nameValue === ''){
    setErrorFor(name, "お名前は必須となっております。");
  }
  else{
    setSuccessFor(name);
  }
};

function checkPhoneInputs(){
  const phoneValue = phone.value.trim();

  if(phoneValue === ''){
    setErrorFor(phone, "お電話番号は必須となっております。");
  }
  else{
    setSuccessFor(phone);
  }
};

function checkEmailInputs(){
  const emailValue = email.value.trim();

  if(emailValue === ''){
    setErrorFor(email, "メールアドレスは必須となっております。");
  }else if(!isEmail(emailValue)){
    setErrorFor(email, "有効なメールアドレスではありません。");
  }
  else{
    setSuccessFor(email);
  }
};

function checkInquiryInputs(){
  const inquiryValue = inquiry.value.trim();

  if(inquiryValue === ''){
    setErrorFor(inquiry, "質問事項をご記入ください。");
  }
  else{
    setSuccessFor(inquiry);
  }
};

//setErrorFor FUNCTION
function setErrorFor (input, message) {
  const formItem = input.parentElement; 
  const small = formItem.querySelector('small'); //getting small tag of input
 
  small.innerHTML = message; //change error message
  formItem.className = "form-item error";  //add error class
 
 };
 
 //setSuccessFor FUNCTION
 function setSuccessFor (input) {
   const formItem = input.parentElement; 
  
   formItem.className = "form-item success";  //add success class
  
  };
 
  //isEmail FUNCTION
  function isEmail(email){
    return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
  }
 

 

SCREEN SHOTS

Follow Me