Countries site using Next Js

Community feedback

• 

  Eduardo Torres•170

  @edu290386Posted over 1 year ago

  Hi, t your border countries tags you can use afunction like this:const getName = (country) => { const newName = data.find((i) => i.alpha3Code == country); return newName.name; };

  I'm learning react, how or what fo you use to make the charging effect and the message when you write a right email an then you push contact button???

  Marked as helpful

  1

  ---

  

  Alex Holguin•410

  @JAleXDesigNPosted over 1 year ago

  @edu290386 Hi, thanks for your feedback, I'll keep it in mind to adjust the names of the border cities. Regarding your question, could you specify what you mean, I don't quite understand

  0

  

  Eduardo Torres•170

  @edu290386Posted over 1 year ago

  @JAleXDesigN when you write and email and then click on contact button it shows like an animation of charging in your project of bookmark landing page

  0

  

  Alex Holguin•410

  @JAleXDesigNPosted over 1 year ago

  @edu290386 In the case of that solution for email validation, use a regular expression, the spinner is on the form but displays: none; when clicking the submit button, if the input value has a valid email format, it adds a screen - flex the spinner to show it and using a timeout after a few seconds, shows the message "Thanks for contact us!", If you don't have a valid email format, it directly displays the message "Oops, make sure it's an email". Using only Javascript it would be something like this:

  function enviarForm(e) {
    e.preventDefault();
  
    if (emailRegEx.test(email.value)) {
      email.classList.remove("error-mail");
      const spinner = document.querySelector("#spinner");
  
      spinner.style.display = "flex";
  
      setTimeout(() => {
        spinner.style.display = "none";
        mensajeAlerta("Thank you for contacting us!!", "exito");
        form.reset();
      }, 2000);
    } else {
      mensajeAlerta("Whoops, make sure it´s an email.", "error");
      email.classList.add("error-mail");
    }
  }
  
  function mensajeAlerta(mensaje, tipo) {
    const parrafoError = document.createElement("p");
    parrafoError.textContent = mensaje;
    if (tipo === "error") {
      parrafoError.classList.add("error");
      form.insertBefore(parrafoError, document.querySelector("#submit"));
    } else {
      parrafoError.classList.add("exito");
      form.appendChild(parrafoError);
    }
  
    setTimeout(() => {
      parrafoError.remove();
    }, 3000);
  }
  

  If you use React you can do something similar to this

  const emailRegex =
    /^(?!\.)[a-zA-Z0-9._%+-]+@(?!-)(?:[a-zA-Z0-9-]+\.)+(?:[a-zA-Z]{2,})$/;
  const initialMessages = { error: "", success: "" };
  
  const ContactForm = () => {
    const [email, setEmail] = useState("");
    const [loading, setLoading] = useState(false);
    const [messages, setMessages] = useState(initialMessages);
  
    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
      e.preventDefault();
  
      if (emailRegex.test(email)) {
        setLoading(true);
        setMessages(initialMessages);
  
        setTimeout(() => {
          setLoading(false);
          setEmail("");
          setMessages({ error: "", success: "Thanks for contact us!" });
        }, 3000);
      } else {
        setMessages({
          error: "Oops, make sure it's an email",
          success: "",
        });
      }
    };
  
    return (
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          aria-label="Email contact"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        {loading && <span>Loading..</span> /*Or your spinner component **/}
        {
          messages.error && (
            <span className="msg-error">{messages.error}</span>
          ) /**If there is an error message, render it */
        }
        {
          messages.success && (
            <span className="msg-success">{messages.success}</span>
          ) /** If there is an error success, render it*/
        }
  
        <button
          type="submit"
          disabled={loading}
        >
          Contact us
        </button>
      </form>
    );
  };
  
  export default ContactForm;
  

  1