YouTube Clone Update

Homepage, Search, Play video, History
IshanviChauhan · Feb 26, 2025 · 7907a4a · 7907a4a
1 parent 0362851
commit 7907a4a
Show file tree

Hide file tree

Showing 12 changed files with 390 additions and 68 deletions.
diff --git a/Day10/assests/favicon.ico b/Day10/assests/favicon.ico
diff --git a/Day10/assests/history.png b/Day10/assests/history.png
diff --git a/Day10/assests/home.png b/Day10/assests/home.png
diff --git a/Day10/assests/logo.png b/Day10/assests/logo.png
diff --git a/Day10/assests/playlist.png b/Day10/assests/playlist.png
diff --git a/Day10/assests/subs.png b/Day10/assests/subs.png
diff --git a/Day10/assests/ytLogo.png b/Day10/assests/ytLogo.png
diff --git a/Day10/history.html b/Day10/history.html
@@ -3,33 +3,63 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>History</title>
+    <title>Video</title>
+    <link rel="stylesheet" href="style.css">
+    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
+    <link rel="shortcut icon" href="./assests/favicon.ico" type="image/x-icon">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 </head>
+
 <body>
-    <a href="./index.html">Home</a>
-    <div id="iframe-container"></div>
+    <header>
+        <a href="index.html">
+            <div class="logo">
+                <img src="./assests/ytLogo.png" alt="">
+            </div>
+        </a>
+        <div class="search">
+            <input type="text" id="search-text" placeholder="Search">
+            <button onclick="handleSearch()"><i class='bx bx-search' style='color:#ffffff'></i></button>
+        </div>
+        <div class="user-profile"><span>User</span></div>
+    </header>
+
+    <aside class="menu">
+        <nav>
+            <a href="index.html"><img src="./assests/home.png" alt="">Home</a>
+            <a href=
+            "#"><img src="./assests/subs.png" alt="">Subscriptions</a>
+            <a href="history.html"><img src="./assests/history.png" alt="">History</a>
+            <a href="#"><img src="./assests/playlist.png" alt="">Playlists</a>
+        </nav>
+    </aside>
+
+    <main id="iframe-container"></main>
 
     <script>
-        const historyArray = JSON.parse(localStorage.getItem('yt_history')).reverse();
-        const root = document.getElementById('iframe-container');
+        const historyText = localStorage.getItem("yt_history")
+        const historyArray = JSON.parse(historyText).reverse();
 
+        const root = document.getElementById('iframe-container');
         historyArray.forEach((videoId) => {
             const newCard = document.createElement('div');
-            newCard.innerHTML=`
+            newCard.innerHTML = `
                 <iframe 
-                    <iframe width="448" 
-                    height="252" 
+                    width="320" 
+                    height="180" 
                     src="https://www.youtube.com/embed/${videoId}" 
                     title="YouTube video player" 
-                    frameborder="0" allow="accelerometer; 
-                    autoplay; clipboard-write; encrypted-media; 
-                    gyroscope; picture-in-picture; web-share" 
+                    frameborder="0" 
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                     referrerpolicy="strict-origin-when-cross-origin" 
-                    allowfullscreen>
+                    allowfullscreen >
                 </iframe>
             `;
-            root.appendChild(newCard);
-        });
+            root.appendChild(newCard)
+        })
     </script>
 </body>
+
 </html>
diff --git a/Day10/index.html b/Day10/index.html
@@ -3,21 +3,39 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>YouTube</title>
     <link rel="stylesheet" href="style.css">
+    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
+    <link rel="shortcut icon" href="./assests/favicon.ico" type="image/x-icon">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 </head>
 <body>
     <header>
-        <input type="text" id="search-text" onChange="handleSearch(event)" placeholder="Search">
-        <button>Search</button>
+        <a href="index.html">
+            <div class="logo">
+                <img src="./assests/ytLogo.png" alt="">
+            </div>
+        </a>
+        <div class="search">
+            <input type="text" id="search-text" placeholder="Search">
+            <button onclick="handleSearch()"><i class='bx bx-search' style='color:#ffffff'></i></button>
+        </div>
+        <div class="user-profile"><span>User</span></div>
     </header>
 
-    <aside>
-        <a href="history.html">History</a>
+    <aside class="menu">
+        <nav>
+            <a href="index.html"><img src="./assests/home.png" alt="">Home</a>
+            <a href="#"><img src="./assests/subs.png" alt="">Subscriptions</a>
+            <a href="history.html"><img src="./assests/history.png" alt="">History</a>
+            <a href="#"><img src="./assests/playlist.png" alt="">Playlists</a>
+        </nav>
     </aside>
-    <main>
-        <!-- <div class="card"></div> -->
-    </main>
+
+    <main id="home-video-container"></main>
+
     <script src="script.js"></script>
 </body>
-</html>
+</html>
diff --git a/Day10/script.js b/Day10/script.js
@@ -5732,8 +5732,9 @@ const showUI = (list) => {
             <img 
                 src="${obj.videoThumbnails[0].url}" 
                 width="100%" alt="thumbnail" />
-            <h3>${obj.title}</h3>
+            <h4>${obj.title}</h4>
             <p>${obj.author}</p>
+            <p>${obj.viewCountText}<span></span>${obj.publishedText}</p>
         `;
         newCard.addEventListener('click', () => {
             window.open(`./video.html?id=${obj.videoId}`, "_blank");
@@ -5747,4 +5748,14 @@ showUI(dummyData);
 // const handleHover = (e,idx) => {
 //     const lastImage = dummyData[idx].videoThumbnails.pop()
 //     e.target.src = lastImage.url;
-// };
+// };
+
+//Search Video
+const searchInput = document.querySelector('#search-text');
+searchInput.addEventListener('input', (e) => {
+    const filteredData = dummyData.filter((obj) => {
+        return obj.title.toLowerCase().includes(e.target.value.toLowerCase());
+    });
+    root.innerHTML = '';
+    showUI(filteredData);
+});