Notes

//Modal.js
import React, { Component } from 'react';

class Modal extends Component {

render(){
return(
<div>
<div >
{this.props.children}
</div>
</div>
)
}
}
export default Modal;

/////////////////////////////////////////////////////////////////////////////////////
Validation.js is empty
//////////////////////////////////////////////////////////////////////////////////////
App.css

* {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.App-header {
background-color: #282c34;
height: 70px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}

table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 70%;
position: absolute;
top: 30%;
left: 15%;
}

td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: #dddddd;
}

.buttons {
text-decoration: underline;
cursor: pointer;
}

.add {
position: fixed;
top: 15%;
right: 2%;
width: 7%;
height: 6%;
background-color: rgb(94, 177, 245);
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 20px;
}

.add:hover {
background-color: rgb(74, 103, 228);
color: rgb(255, 255, 255);
}

/* modal */

.bg {
margin-left: 0;
margin-top: 0px;
position: fixed;
top: 0px;
background-color: rgb(80, 80, 80);
opacity: 0.85;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 50;
}

.pop {
position: absolute;
top: 5%;
left: 32%;
width: 500px;
height: 650px;
background-color: white;
border-radius: 3px;
text-align: left;
z-index: 55;
overflow-y: scroll;
overflow-x: hidden;
}

.close {
position: absolute;
right: 20px;
top: 20px;
width: 30px;
height: 30px;
background-color: rgb(58, 58, 58);
color: rgb(255, 255, 255);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgb(53, 53, 53);
font-size: 20px;
border: none;
border-radius: 25px;
cursor: pointer;
}

.close:hover {
background-color: black;
}

.pop h3 {
margin-left: 50px;
}

.pop form {
margin-left: 45px;
display: flex;
flex-direction: column;
gap: 1px;
height: 450px;
}

.radio {
display: flex;
flex-direction: row;
margin-left: 130px;
}

.radios {
display: flex;
flex-direction: row;
margin-left: 100px;
}

.pop label {
font-size: 18px;
}

.fields {
display: flex;
flex-direction: column;
gap: 10px;
}

.pop .input {
width: 400px;
height: 20px;
outline: 0;
border-width: 0 0 2px;
border-color: rgb(0, 0, 0);
border-radius: 2px;
background-color: white;
}

.pop input:focus {
border-color: cadetblue;
border-width: none;
border-color: none;
border-radius: none;
}

.pop span {
color: rgb(228, 51, 51);
/* font-weight: bold; */
}

textarea {
width: 400px;
height: auto;
}

.btns {
display: flex;
flex-direction: row;
margin-left: 50px;
gap: 13px;
}

.save {
width: 150px;
height: 30px;
color: white;
border: none;
border-radius: 3px;
background-color: rgb(67, 167, 81);
/* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgb(46, 144, 224); */
font-size: 20px;
cursor: pointer;
}

.save:hover {
background-color: rgb(49, 158, 91);
color: white;
}

.save:disabled {
background-color: rgb(194, 247, 214);
color: white;
}

.clear {
width: 150px;
height: 30px;
border: none;
border-radius: 3px;
color: white;
background-color: rgb(241, 85, 85);
font-size: 20px;
cursor: pointer;
}

.clear:hover {
background-color: rgb(233, 57, 57);
color: white;
}

//////////////////////////////////////////////////////////////
App.js

import React, { Component } from "react";
import "./App.css";
import Modal from "./component/modal";
import {
validateName,
validateAddress,
validateMobile,
validateCity,
validateStates,
validateZip,
} from "./component/validation";

class Home extends Component {
state = {
checked: "",
show: false,
show_personal: true,
name: "",
mobile: "",
addrs: "",
city: "",
states: "",
type: "",
zip: "",
name_error: "",
mobile_error: "",
addrs_error: "",
city_error: "",
states_error: "",
zip_error: "",
personal: [
{
name: "Sample",
mobile: "1234567890",
addrss: "a a a",
city: "Chennai",
states: "Tamil Nadu",
zip: "123456",
type: "Present",
},
],
business: [
{
name: "cool",
mobile: "1234567890",
addrss: "a a a",
city: "Chennai",
states: "Tamil Nadu",
zip: "123456",
type: "Present",
},
],
};

componentDidMount = () => {
this.handleBorder();
};

onClose = () => {
//write code for Modal close
};

handleChange = (e) => {
//write code to handle onchange event for input fields
};

handleSave = () => {
//write code for saving data into personal or business
};

handleClear = () => {
//write code for clearning input fields
};

handleBorder = () => {
this.setState({
borderBottom1: "hidden",
borderBottom: "3px solid rgb(71, 68, 206)",
show_personal: true,
});
};

handleBorder1 = () => {
this.setState({
borderBottom: "hidden",
borderBottom1: "3px solid rgb(71, 68, 206)",
show_personal: false,
});
};

render() {
return <div>{/* write your code here for displaying details */}</div>;
}
}

export default Home;
////////////////////////////////////////////////////
index.css

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}


/////////////////////////////////////////////////////////////////////////////////////index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();