form validation

tin0312 · Sep 24, 2023 · 2faf45a · 2faf45a
1 parent 6db931c
commit 2faf45a
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 41 deletions.
diff --git a/src/App.css b/src/App.css
@@ -147,6 +147,9 @@ body {
   .home-container{
     padding-bottom: 20%;
   }
+  .about-container{
+    padding-bottom: 15%;
+  }
   .project-container{
     padding-bottom: 20%;
   }
@@ -164,6 +167,14 @@ body {
   .header a {
     font-size: 1.3em ;
   }
+  .progress-bar{
+    width: 70% !important;
+  }
+  .skill-header{
+    font-size: 2em !important;
+    padding-top: 1em;
+    padding-bottom: 0.5em;
+  }
 }
 /* About section */
 .about-container {
@@ -173,7 +184,7 @@ body {
 .skill-header {
   color: #fff;
   font-family: "Poppins", sans-serif;
-  font-size: 64px;
+  font-size: 3.5em;
   font-weight: 700;
   margin-bottom: 2%;
 }
@@ -210,7 +221,7 @@ body {
   width: 100%;
 }
 .progress-bar{
-  width: 50% ;
+  width: 50%;
   background-color:#00cc00
 }
 /* Project section*/
@@ -325,7 +336,7 @@ body {
 .form-container label {
   opacity: 0.5;
 }
-input[type="text"],
+input[type="text"], input[type = "email"],
 textarea {
   border: none;
   border-radius: 0;

diff --git a/src/Pages/Contacts.jsx b/src/Pages/Contacts.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import Airtable from "airtable";
-import {Container, Row, Col } from "react-bootstrap"
+import { Container, Row, Col } from "react-bootstrap";
 
 export default function Contacts() {
   // Store form data
@@ -19,12 +19,18 @@ export default function Contacts() {
   // Handle submit
   const handleSubmit = async (e) => {
     e.preventDefault();
-    console.log(formInfo);
-    window.alert("Messaged sent, have a good day :)")
+    window.alert("Messaged sent, have a good day :)");
+    //clean texts after fill
+    setFormInfo({
+      name: "",
+      email: "",
+      message: "",
+    });
 
     try {
       const base = new Airtable({
-        apiKey: "patVJYRDfNeQgFxcb.6d134f1e7190daf5a66ed80d732be67c3e981d8a0f9221dfe03eca5e901d8a45"
+        apiKey:
+          "patVJYRDfNeQgFxcb.6d134f1e7190daf5a66ed80d732be67c3e981d8a0f9221dfe03eca5e901d8a45",
       }).base("app2ECwavIy178eTW");
       // create a record
       const records = await base("Users Inquiry").create([
@@ -36,11 +42,6 @@ export default function Contacts() {
           },
         },
       ]);
-      setFormInfo({
-        name: "",
-        email: "",
-        message: "",
-      });
     } catch (error) {
       console.error("Error creating record:", error);
     }
@@ -49,44 +50,53 @@ export default function Contacts() {
   return (
     <Container fluid className="contact-container pl-0 pr-0 mb-xs-5">
       <Row className="greeting-row d-flex flex-column flex-lg-row w-100">
-        <Col xs={12} lg ={6} className="contact-greeting mb-xs-5">
+        <Col xs={12} lg={6} className="contact-greeting mb-xs-5">
           <h1 className="contact-header">Contact</h1>
           <p className="contact-message">
             I would love to hear about your project and how I <br />
             could help. Please leave me a message, and I’ll get back
             <br /> to you as soon as possible.
           </p>
         </Col>
-      <Col xs={12} lg={6} onSubmit={handleSubmit} className="form-container d-flex justify-content-xs-center justify-content-lg-end pt-4 pb-4 ">
-        <form action="">
-          <label htmlFor="name">NAME</label>
-          <input
-            onChange={handleInputChange}
-            type="text"
-            id="name"
-            name="name"
-            required
-          />
+        <Col
+          xs={12}
+          lg={6}
+          onSubmit={handleSubmit}
+          className="form-container d-flex justify-content-xs-center justify-content-lg-end pt-4 pb-4 "
+        >
+          <form action="">
+            <label htmlFor="name">NAME</label>
+            <input
+              onChange={handleInputChange}
+              type="text"
+              id="name"
+              name="name"
+              required
+              value={formInfo.name}
+              pattern="[A-Za-z]"
+            />
 
-          <label htmlFor="email">EMAIL</label>
-          <input
-            onChange={handleInputChange}
-            type="text"
-            id="email"
-            name="email"
-            required
-          />
+            <label htmlFor="email">EMAIL</label>
+            <input
+              onChange={handleInputChange}
+              type="email"
+              id="email"
+              name="email"
+              required
+              value={formInfo.email}
+            />
 
-          <label htmlFor="message">MESSAGE</label>
-          <textarea
-            onChange={handleInputChange}
-            id="message"
-            name="message"
-            required
-          ></textarea>
-          <button type="submit">SEND MESSAGE</button>
-        </form>
-      </Col>
+            <label htmlFor="message">MESSAGE</label>
+            <textarea
+              onChange={handleInputChange}
+              id="message"
+              name="message"
+              required
+              value={formInfo.message}
+            ></textarea>
+            <button type="submit">SEND MESSAGE</button>
+          </form>
+        </Col>
       </Row>
     </Container>
   );