Scribd
Upload
14 views

_PERTEMUAN_6

Uploaded by

DWI PRAYOGA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

_PERTEMUAN_6

Uploaded by

DWI PRAYOGA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Nama : Dwi Prayoga

NIM : A11.2022.14739
Kelompok : Pemerograman Sisi Klien (4721)

Tugas Pertemuan 6
Source Code
App.jsx

// App.jsx
import React, { useState } from "react";

const App = () => {


const [formData, setFormData] = useState({ nama: "", nim: "", jurusan: "" });
const [submittedData, setSubmittedData] = useState([]);

// Handle input change


const handleChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};

// Handle form submit


const handleSubmit = (e) => {
e.preventDefault();
setSubmittedData([...submittedData, formData]);
setFormData({ nama: "", nim: "", jurusan: "" }); // Reset form
};

return (
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
minHeight: "100vh",
fontFamily: "Inter, system-ui, Avenir, Helvetica, Arial, sans-serif",
background: "linear-gradient(to right, #1a202c, #2d3748)",
color: "#edf2f7",
padding: "20px",
}}
>
<h1
style={{
fontSize: "3.2em",
lineHeight: "1.1",
textAlign: "center",
background: "linear-gradient(to right, #63b3ed, #805ad5)",
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
}}
>
Form Mahasiswa
</h1>
<form
onSubmit={handleSubmit}
style={{
marginBottom: "20px",
display: "flex",
flexDirection: "column",
gap: "10px",
width: "100%",
maxWidth: "400px",
padding: "20px",
background: "#2d3748",
borderRadius: "10px",
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
}}
>
<div style={{ marginBottom: "10px" }}>
<label>Nama:</label>
<input
type="text"
name="nama"
value={formData.nama}
onChange={handleChange}
required
style={{
width: "100%",
padding: "10px",
borderRadius: "5px",
border: "1px solid #4a5568",
background: "#1a202c",
color: "#edf2f7",
}}
/>
</div>
<div style={{ marginBottom: "10px" }}>
<label>NIM:</label>
<input
type="text"
name="nim"
value={formData.nim}
onChange={handleChange}
required
style={{
width: "100%",
padding: "10px",
borderRadius: "5px",
border: "1px solid #4a5568",
background: "#1a202c",
color: "#edf2f7",
}}
/>
</div>
<div style={{ marginBottom: "10px" }}>
<label>Jurusan:</label>
<input
type="text"
name="jurusan"
value={formData.jurusan}
onChange={handleChange}
required
style={{
width: "100%",
padding: "10px",
borderRadius: "5px",
border: "1px solid #4a5568",
background: "#1a202c",
color: "#edf2f7",
}}
/>
</div>
<button
type="submit"
style={{
padding: "10px 20px",
borderRadius: "5px",
background: "linear-gradient(to right, #63b3ed, #805ad5)",
color: "#edf2f7",
fontWeight: "bold",
border: "none",
cursor: "pointer",
transition: "0.3s",
}}
>
Submit
</button>
</form>

<h2 style={{ marginBottom: "10px", textAlign: "center" }}>Data


Mahasiswa</h2>
{submittedData.length > 0 ? (
<table
style={{
width: "100%",
maxWidth: "600px",
borderCollapse: "collapse",
marginTop: "20px",
background: "#2d3748",
borderRadius: "10px",
overflow: "hidden",
}}
>
<thead>
<tr style={{ background: "#4a5568", color: "#edf2f7" }}>
<th style={{ padding: "10px" }}>Nama</th>
<th style={{ padding: "10px" }}>NIM</th>
<th style={{ padding: "10px" }}>Jurusan</th>
</tr>
</thead>
<tbody>
{submittedData.map((data, index) => (
<tr
key={index}
style={{
textAlign: "center",
borderBottom: "1px solid #4a5568",
}}
>
<td style={{ padding: "10px" }}>{data.nama}</td>
<td style={{ padding: "10px" }}>{data.nim}</td>
<td style={{ padding: "10px" }}>{data.jurusan}</td>
</tr>
))}
</tbody>
</table>
) : (
<p style={{ color: "#a0aec0", textAlign: "center" }}>Belum ada data
mahasiswa yang dimasukkan.</p>
)}
</div>
);
};

export default App;


Hasil Tampilan

Gambar 1 Tampilan Form Input

Gambar 2 Tampilan Hasil Submit Form

You might also like