<html>
<head>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
const { useState } = React;
function App() {
const [csvData, setCsvData] = useState([]);
const [row, setRow] = useState({ name: '', email: '', role: '' });
const addData = () => {
if (row.name === '' || row.email === '' || row.role === '') {
showToast('Please fill in all fields.', 'error');
return;
}
setCsvData([...csvData, { ...row }]);
clearInputs();
showToast('Data added successfully.', 'success');
};
const generateCSV = () => {
let csvContent = 'data:text/csv;charset=utf-8,';
const headers = ['name', 'email', 'role'];
csvContent += headers.join(',') + '\n';
csvData.forEach((row) => {
csvContent += Object.values(row).join(',') + '\n';
});
const encodedUri = encodeURI(csvContent);
const link = document.createElement('a');
link.setAttribute('href', encodedUri);
link.setAttribute('download', 'data.csv');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
showToast('CSV file generated.', 'success');
};
const clearInputs = () => {
setRow({ name: '', email: '', role: '' });
};
const showToast = (message, type) => {
const toast = document.createElement('div');
toast.className = `toast ${type}`;
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => {
toast.remove();
}, 3000);
};
return (
<div className='container'>
<h3 className='title'>Reactjs Create CSV file by User Input and data Export to Excel</h3>
<input
className='name-input'
value={row.name}
onChange={(e) => setRow({ ...row, name: e.target.value })}
placeholder="Name"
/>
<input
className='email-input'
value={row.email}
onChange={(e) => setRow({ ...row, email: e.target.value })}
placeholder="Email"
/>
<input
className='role-input'
value={row.role}
onChange={(e) => setRow({ ...row, role: e.target.value })}
placeholder="Role"
/>
<button className="add-button" onClick={addData}>
Add Data
</button>
<button className="generate-button" onClick={generateCSV}>
Generate CSV
</button>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>
<style>
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.title {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
box-sizing: border-box;
}
.add-button,
.generate-button {
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin-bottom: 10px;
transition: background-color 0.2s ease;
margin: 5px
}
.add-button:hover,
.generate-button:hover {
background-color: #0056b3;
}
.toast {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
padding: 10px;
background-color: #222;
color: #fff;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
z-index: 9999;
}
.toast.success {
background-color: #387d3b;
}
.toast.error {
background-color: #c0392b;
}
</style>
</body>
</html>