GLASGOW6-IRIANNI_MUNOZ-FULL-STACK-ASSESMENT-LEVEL100

.gitignore

@@ -0,0 +1 @@
+node_modules

client/src/AddVideo.js

@@ -0,0 +1,6 @@
+import React from "react";
+
+function AddVideo() {
+  return <></>;
+}
+export default AddVideo;

client/src/App.css

@@ -1,3 +1,8 @@
 .App {
   text-align: center;
 }
+
+.card-container {
+  display: flex;
+  justify-content: center;
+}

client/src/App.js

@@ -1,11 +1,17 @@
 import "./App.css";
+import AddVideo from "./AddVideo";
+import VideoCards from "./VideoCards";
+import SearchBar from "./SearchBar.js";
 
 function App() {
   return (
     <div className="App">
       <header className="App-header">
         <h1>Video Recommendation</h1>
       </header>
+      <AddVideo />
+      <VideoCards />
+      <SearchBar />
     </div>
   );
 }

client/src/SearchBar.js

@@ -0,0 +1,6 @@
+import React from "react";
+
+function SearchBar() {
+  return <></>;
+}
+export default SearchBar;

client/src/SingleVideoCard.js

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+
+function SingleVideoCard({ title, url }) {
+  const [count, setCount] = useState(0);
+
+  function minusCount() {
+    setCount((prevCount) => prevCount - 1);
+  }
+
+  function plusCount() {
+    setCount((prevCount) => prevCount + 1);
+  }
+  if (!url) {
+    return <div>No video URL provided.</div>;
+  }
+
+  const videoId = url.split("v=")[1];
+  return (
+    <div className="card-container">
+      <div className="card">
+        <iframe
+          className="card-thumb"
+          width="320"
+          height="320"
+          src={`https://www.youtube.com/embed/${videoId}`}
+          title="YouTube video player"
+          frameBorder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        ></iframe>
+        <div className="card-body">
+          <button onClick={minusCount}>-</button>
+          <span>{count}</span>
+          <button onClick={plusCount}>+</button>
+          <h2>{title}</h2>
+          <p>Paragraph</p>
+          <button className="btn btn-primary">Delete</button>
+        </div>
+      </div>
+    </div>
+  );
+}
+export default SingleVideoCard;

client/src/VideoCards.js

@@ -0,0 +1,15 @@
+import React from "react";
+import SingleVideoCard from "./SingleVideoCard";
+import exampleResponse from "./exampleResponse.json";
+
+function VideoCards() {
+  return (
+    <>
+      {exampleResponse.map((video) => (
+        <SingleVideoCard key={video.id} title={video.title} url={video.url} />
+      ))}
+    </>
+  );
+}
+
+export default VideoCards;