feat: grab thumbnail

san1234100 · Feb 27, 2024 · f7ff0f5 · f7ff0f5
commit f7ff0f5
Show file tree

Hide file tree

Showing 9 changed files with 2,353 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -0,0 +1,28 @@
+const youtubeLinkEl = document.getElementById('youtubeLink')
+const youtubeThumbnailEl = document.getElementById('youtubeThumbnail')
+const btnEl = document.querySelector('button')
+console.log(youtubeLinkEl,youtubeThumbnailEl,btnEl);
+
+btnEl.addEventListener('click',getThumbnail)
+
+function getThumbnail() {
+    let youtubeLink = youtubeLinkEl.value;
+    let videoId = getYoutubeVideoId(youtubeLink);
+    if (videoId) {
+      let thumbnailUrl = 'https://img.youtube.com/vi/' + videoId + '/maxresdefault.jpg';
+      console.log(thumbnailUrl);
+      youtubeThumbnailEl.innerHTML = '<img src="' + thumbnailUrl + '">';
+    } else {
+      alert('Invalid YouTube Link');
+    }
+  }
+
+  function getYoutubeVideoId(url) {
+    let regExp = /^.*(youtu\.be\/|v\/|e\/|u\/\w+\/|embed\/|v=)([^#\&\?]*).*/;
+    let match = url.match(regExp);
+    if (match && match[2].length == 11) {
+      return match[2];
+    } else {
+      return null;
+    }
+  }
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Youtube thumbnail grabber App</title>
+    <link rel="stylesheet" href="assets/css/main.css">
+  </head>
+  <body class="bg-[#030637]">
+    <header class="text-white p-5">
+      <h1 class="text-2xl font-semibold">YoutubeThumbGrab</h1>
+    </header>
+    <div class="bg-[#3C0753] max-w-2xl text-white p-5 mx-auto mt-10 rounded h-fit">
+      <div class="font-semibold text-lg">Paste the youtube link here</div>
+      <input
+       type="url" 
+       id="youtubeLink"
+       name="url"
+       class="w-full px-4 py-2 rounded mt-3 text-[#720455] bg-gray-200 outline-none">
+       <button class="w-full mt-3 py-2 bg-[#720455] rounded font-medium hover:bg-[#61084a]">Grab the thumbnail</button>
+       <div class="mt-5 rounded" id="youtubeThumbnail"></div>
+      </div>
+
+    <script type="module" src="/assets/js/main.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,24 @@
+import './style.css'
+import javascriptLogo from './javascript.svg'
+import viteLogo from '/vite.svg'
+import { setupCounter } from './counter.js'
+
+document.querySelector('#app').innerHTML = `
+  <div>
+    <a href="https://vitejs.dev" target="_blank">
+      <img src="${viteLogo}" class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
+      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
+    </a>
+    <h1>Hello Vite!</h1>
+    <div class="card">
+      <button id="counter" type="button"></button>
+    </div>
+    <p class="read-the-docs">
+      Click on the Vite logo to learn more
+    </p>
+  </div>
+`
+
+setupCounter(document.querySelector('#counter'))