NW6 | Rabia Avci | Full-Stack-Project | Week-2 | New video form

client/src/App.jsx

@@ -1,10 +1,12 @@
+import NewVideoForm from "./NewVideoForm.jsx";
 import VideoList from "./VideoRecommendations";
 
 const App = () => {
 	return (
 		<>
 			<h1>Video Recommendations</h1>
-			<VideoList />
+    	<VideoList />
+       <NewVideoForm />
 		</>
 	);
 };

client/src/NewVideoForm.css

@@ -0,0 +1,55 @@
+/* CSS for NewVideoForm component */
+div {
+	max-width: 500px;
+	margin: 0 auto;
+	padding: 20px;
+	border: 1px solid #ccc;
+	border-radius: 10px;
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+	background-color: #f9f9f9;
+}
+
+h2 {
+	text-align: center;
+	color: #333;
+	margin-bottom: 20px;
+}
+
+form {
+	display: flex;
+	flex-direction: column;
+	gap: 15px;
+}
+
+div > div {
+	display: flex;
+	flex-direction: column;
+}
+
+label {
+	font-weight: bold;
+	margin-bottom: 5px;
+	color: #555;
+}
+
+input {
+	padding: 10px;
+	border: 1px solid #ccc;
+	border-radius: 5px;
+	font-size: 16px;
+}
+
+button {
+	padding: 10px 20px;
+	border: none;
+	border-radius: 5px;
+	background-color: #007bff;
+	color: #fff;
+	font-size: 16px;
+	cursor: pointer;
+	transition: background-color 0.3s;
+}
+
+button:hover {
+	background-color: #0056b3;
+}

client/src/NewVideoForm.jsx

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+
+import "./NewVideoForm.css";
+const NewVideoForm = () => {
+	const [title, setTitle] = useState("");
+	const [src, setSrc] = useState("");
+
+	const handleSubmit = (e) => {
+		e.preventDefault();
+
+		fetch("/api/videos", {
+			method: "POST",
+			headers: {
+				Accept: "application/json",
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify({ title, src }),
+		})
+			.then((response) => response.json())
+			.then((data) => {
+				console.log(JSON.stringify(data));
+			})
+			.catch((error) => {
+				console.error(error);
+			});
+	};
+
+	return (
+		<div>
+			<h2>Add New Video</h2>
+			<form onSubmit={handleSubmit}>
+				<div>
+					<label htmlFor="title">Video Title: </label>
+					<input
+						type="text"
+						id="title"
+						value={title}
+						onChange={(e) => setTitle(e.target.value)}
+						required
+					/>
+				</div>
+				<div>
+					<label htmlFor="src">Video URL: </label>
+					<input
+						type="url"
+						id="src"
+						value={src}
+						onChange={(e) => setSrc(e.target.value)}
+						required
+					/>
+				</div>
+				<button type="submit">Submit</button>
+			</form>
+		</div>
+	);
+};
+
+export default NewVideoForm;