Web Development

1. Choose the correct forum for your message. Posting a VB.NET question in the C++ forum will end in tears.
   
   
2. Be specific! Don't ask "can someone send me the code to create an application that does 'X'. Pinpoint exactly what it is you need help with.
   
   
3. Keep the subject line brief, but descriptive. eg "File Serialization problem"
   
   
4. Keep the question as brief as possible. If you have to include code, include the smallest snippet of code you can.
   
   
5. Be careful when including code that you haven't made a typo. Typing mistakes can become the focal point instead of the actual question you asked.
   
   
6. Do not remove or empty a message if others have replied. Keep the thread intact and available for others to search and read. If your problem was answered then edit your message and add "[Solved]" to the subject line of the original post, and cast an approval vote to the one or several answers that really helped you.
   
   
7. If you are posting source code with your question, place it inside <pre></pre> tags. We advise you also check the "Encode "<" (and other HTML) characters when pasting" checkbox before pasting anything inside the PRE block, and make sure "Use HTML in this post" check box is checked.
   
   
8. Be courteous and DON'T SHOUT. Everyone here helps because they enjoy helping others, not because it's their job.
   
   
9. Please do not post links to your question into an unrelated forum such as the lounge. It will be deleted. Likewise, do not post the same question in more than one forum.
   
   
10. Do not be abusive, offensive, inappropriate or harass anyone on the boards. Doing so will get you kicked off and banned. Play nice.
    
    
11. If you have a school or university assignment, assume that your teacher or lecturer is also reading these forums.
    
    
12. No advertising or soliciting.
    
    
13. We reserve the right to move your posts to a more appropriate forum or to delete anything deemed inappropriate or illegal.

1. Read the question carefully
   
2. Understand that English isn't everyone's first language so be lenient of bad spelling and grammar
   
3. If a question is poorly phrased then either ask for clarification, ignore it, or mark it down. Insults are not welcome
   
4. If the question is inappropriate then click the 'vote to remove message' button
   

import React, { useState } from "react";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import "./Userform.css";
import axios from "axios";

function Userform() {
  const schema = yup.object().shape({
    name: yup.string().required("Name is required"),
    dobOrAge: yup.string().required("Age is required"),
    sex: yup.string().required("Sex is required"),
    mobile: yup
      .string()
      .matches(
        /^[6-9]\d{9}$/,
        "Mobile number must be a valid Indian mobile number"
      )
      .nullable(),
    idType: yup.string().required("ID type is required"),
    id: yup.string().when("idType", {
      is: "Aadhar",
      then: yup
        .string()
        .matches(/^\d{12}$/, "Govt Id must be a valid 12-digit numeric string"),
      otherwise: yup
        .string()
        .matches(
          /^[A-Za-z]{5}\d{4}[A-Za-z]{1}$/,
          "Govt Id must be a valid 10-digit alpha-numeric string"
        ),
    }),
    email: yup.string("Email must be a valid email address").nullable(),
    emergencyContactNumber: yup
      .string()
      .matches(
        /^[6-9]\d{9}$/,
        "Emergency Contact Number must be a valid Indian mobile number"
      )
      .nullable(),
    guardianTitle: yup.string().nullable(),
    guardianName: yup.string().nullable(),
    address: yup.string().nullable(),
    country: yup.string().nullable(),
    state: yup.string().nullable(),
    pincode: yup.string().nullable(),
    city: yup.string().nullable(),
    occupation: yup.string().nullable(),
    nationality: yup.string().nullable(),
    religion: yup.string().nullable(),
    maritalStatus: yup.string().nullable(),
    bloodGroup: yup.string().nullable(),
  });

  const resolver = yupResolver(schema);

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm({
    resolver,
  });

  const [message, setMessage] = useState(null);

  const onSubmithandler = (data) => {
    console.log(data);
  };

  return (
    <div className="form-container">
      <form onSubmit={handleSubmit(onSubmithandler)}>
        <div>
          <h2 className="form-heading">Personal Details</h2>
          <label className="form-label"> Name: </label>
          <input
            className="form-input"
            type="text"
            placeholder="Enter your full name"
            {...register("name", { required: true })}
          />
          {errors.name && <p className="form-error">{errors.name.message}</p>}
        </div>
         <div>
          <label className="form-label">Sex :</label>
          <input
            className="form-input"
            type="text"
            {...register("sex", { required: true })}
          />
          {errors.sex && <p className="form-error">{errors.sex.message}</p>}
        </div>
        <div>
          <label className="form-label">Mobile:</label>
          <input className="form-input" type="text" {...register("mobile")} />
          {errors.mobile && (
            <p className="form-error">{errors.mobile.message}</p>
          )}
        </div>
        <div>
          <label>
            ID Type:
            <select {...register("idType")}>
              <option value="">Select ID Type</option>
              <option value="Aadhar">Aadhar</option>
              <option value="PAN">PAN</option>
            </select>
            {errors.idType && <p>{errors.idType.message}</p>}
          </label>
          <label>
            Govt Issued ID:
            <input type="text" {...register("id")} />
            {errors.id && <p>{errors.id.message}</p>}
          </label>
        </div>
        <h2 className="form-heading">Contact Details</h2>
        <div>
          <label className="form-label">Email:</label>
          <input className="form-input" type="email" {...register("email")} />
          {errors.email && <p className="form-error">{errors.email.message}</p>}
          <label className="form-label">Emergency contact number:</label>
          <input
            className="form-input"
            type="text"
            {...register("emergencyContactNumber")}
          />
          {errors.emergencyContactNumber && (
            <p className="form-error">
              {errors.emergencyContactNumber.message}
            </p>
          )}
        </div>
        <div>
          <label className="form-label">Guardian Details:</label>
          <select className="form-select" {...register("guardianTitle")}>
            <option value="Mr.">Mr.</option>
            <option value="Mrs.">Mrs.</option>
          </select>
          <input
            className="form-input"
            type="text"
            {...register("guardianName")}
          />
          {errors.guardianName && (
            <p className="form-error">{errors.guardianName.message}</p>
          )}
        </div>

        <h2 className="form-heading">Address Details</h2>
        <div>
          <label className="form-label">Address:</label>
          <input className="form-input" type="text" {...register("address")} />
          {errors.address && (
            <p className="form-error">{errors.address.message}</p>
          )}

          <label className="form-label">Country:</label>
          <input className="form-input" type="text" {...register("country")} />
          {errors.country && (
            <p className="form-error">{errors.country.message}</p>
          )}
        </div>

        <div>
          <label className="form-label">State:</label>
          <input className="form-input" type="text" {...register("state")} />
          {errors.state && <p className="form-error">{errors.state.message}</p>}
        </div>
        <div>
          <label className="form-label">Pincode:</label>
          <input className="form-input" type="text" {...register("pincode")} />
          {errors.pincode && (
            <p className="form-error">{errors.pincode.message}</p>
          )}
        </div>
        <div>
          <label className="form-label">City:</label>
          <input className="form-input" type="text" {...register("city")} />
          {errors.city && <p className="form-error">{errors.city.message}</p>}
        </div>

        <h2 className="form-heading">Other Details</h2>
        <div>
          <label className="form-label">Occupation</label>
          <input
            className="form-input"
            type="text"
            {...register("occupation")}
          />
          {errors.occupation && (
            <p className="form-error">{errors.occupation.message}</p>
          )}
        </div>
        <div>
          <label className="form-label">Religion</label>
          <select className="form-select" {...register("religion")}>
            <option value="Hindu">Hindu</option>
            <option value="Muslim">Muslim</option>
            <option value="Christian">Christian</option>
            <option value="Sikh">Sikh</option>
            <option value="Jain">Jain</option>
            <option value="Buddhist">Buddhist</option>
          </select>
        </div>
        <div>
          <label className="form-label">Marital status</label>
          <select className="form-select" {...register("marital")}>
            <option value="Married">Married</option>
            <option value="Unmarried">Unmarried</option>
          </select>
        </div>
        <div>
          <label className="form-label">Blood Group</label>
          <select className="form-select" {...register("blood")}>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="AB">AB</option>
            <option value="O">O</option>
          </select>
        </div>
        <div>
          <label className="form-label">Nationality</label>
          <input
            className="form-input"
            type="text"
            {...register("nationality")}
          />
          {errors.nationality && (
            <p className="form-error">{errors.nationality.message}</p>
          )}
        </div>
        <button type="submit">Submit</button>
        {message && <p>{message}</p>}
      </form>
    </div>
  );
}

export default Userform;

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</script>
<style>

body {
	font-family: Arial;
	color: #f9f9ff;
	background-color:#293138;
}

.center-text {
	height:100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

</style>
</head>
<body>

<div class="center-text">
	Test
</div>

</body>
</html> 

I’m undergoing an intensive programming boot-camp over 12 weeks. I learned html,css, js,php, react, laravel and nodejs. I need to do a final project over 30 days. Below are the requirements:

Minimum of two user types: admin, user, client, buyer, seller, etc.
Push Notification or Email System
At least two features from the below list:
Chatbot

ChatGPT API

Graphs and Charts

Parallax / Animations

Multi-Language

Multi-Theme

Machine Learning Predications

Data-Related Features.

I’m encouraged to pick up on a project that is not related to Web Development, specifically: Mobile Application,Internet of Things, Arduino, AI…

I need some ideas with chatgpt api integrated into them. For example one of my collogues proposed a smart wallet that takes the user salary, goals and based on that will create a customizable plan, it will use chatgpt to give the user advices and push notifications when he/she purchase stuff that exceeds the budget.

Thanks in advance