added 2 projects in js small projects

added 20_image_select_preview/index.html and 21_googledrive_html_audio_embedd/ to the js small projects homepage
nitishkhobragade · Mar 23, 2024 · 633d8fd · 633d8fd
1 parent 3da3606
commit 633d8fd
Showing 1 changed file with 31 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -91,7 +91,31 @@ <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">Unloc
     <section class="text-gray-600 body-font">
       <div class="container px-5 py-2 mx-auto shadow-lg">
         <div class="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
-          <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">19 Online Javascript Music Player (HTML, CSS, JavScript) </h1>
+          <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">21. Google Drive HTML Embedding Link Generator (HTML, CSS, JavScript) </h1>
+          <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-2 px-3 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="./21_googledrive_html_audio_embedd/index.html">Play Here</a>
+          <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-1 px-2 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="#">Source-Code 1</a>
+          <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-1 px-2 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="#">Source-Code 2</a>
+        </div>
+      </div>
+    </section>
+    <!-- article end  -->
+
+    <section class="text-gray-600 body-font">
+      <div class="container px-5 py-2 mx-auto shadow-lg">
+        <div class="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
+          <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">20. Image Select and Preview on WebPage (HTML, CSS, JavScript) </h1>
+          <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-2 px-3 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="./20_image_select_preview/index.html">Play Here</a>
+          <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-1 px-2 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="#">Source-Code 1</a>
+          <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-1 px-2 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="#">Source-Code 2</a>
+        </div>
+      </div>
+    </section>
+    <!-- article end  -->
+
+    <section class="text-gray-600 body-font">
+      <div class="container px-5 py-2 mx-auto shadow-lg">
+        <div class="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
+          <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">19. Online Javascript Music Player (HTML, CSS, JavScript) </h1>
           <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-2 px-3 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="./19_javascript_music_player/index.html">Play Here</a>
           <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-1 px-2 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="#">Source-Code 1</a>
           <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-1 px-2 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="#">Source-Code 2</a>
@@ -103,7 +127,7 @@ <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">19
     <section class="text-gray-600 body-font">
       <div class="container px-5 py-2 mx-auto shadow-lg">
         <div class="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
-          <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">18 Online Code Editor (HTML, CSS, JavScript) </h1>
+          <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">18. Online Code Editor (HTML, CSS, JavScript) </h1>
           <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-2 px-3 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="./18_online_code_editor/index.html">Play Here</a>
           <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-1 px-2 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="#">Source-Code 1</a>
           <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-1 px-2 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="#">Source-Code 2</a>
@@ -115,7 +139,7 @@ <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">18
     <section class="text-gray-600 body-font">
       <div class="container px-5 py-2 mx-auto shadow-lg">
         <div class="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
-          <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">17 Candy Crush Desktop Basic(game)</h1>
+          <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">17. Candy Crush Desktop Basic(game)</h1>
           <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-2 px-3 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="./17_candy_crush(game)/index.html">Play Here</a>
           <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-1 px-2 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="#">Source-Code 1</a>
           <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-1 px-2 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="#">Source-Code 2</a>
@@ -127,7 +151,7 @@ <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">17
     <section class="text-gray-600 body-font">
       <div class="container px-5 py-2 mx-auto shadow-lg">
         <div class="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
-          <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">16 Search and Filter Items 01</h1>
+          <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">16. Search and Filter Items 01</h1>
           <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-2 px-3 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="./16_filter_and_search_01/index.html">Play Here</a>
           <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-1 px-2 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="https://linksly.co/16_filter_and_search_01">Source-Code 1</a>
           <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-1 px-2 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="https://shrinkme.site/16_filter_and_search_01">Source-Code 2</a>
@@ -139,7 +163,7 @@ <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">16
     <section class="text-gray-600 body-font">
       <div class="container px-5 py-2 mx-auto shadow-lg">
         <div class="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
-          <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">15 To-Do List 01</h1>
+          <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">15. To-Do List 01</h1>
           <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-2 px-3 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="./15_to_do_list_01/index.html">Play Here</a>
           <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-1 px-2 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="https://shrinkme.pro/15_to_do_list_01">Source-Code 1</a>
           <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-1 px-2 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="https://linksly.co/15_to_do_list_01">Source-Code 2</a>
@@ -151,7 +175,7 @@ <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">15
     <section class="text-gray-600 body-font">
       <div class="container px-5 py-2 mx-auto shadow-lg">
         <div class="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
-          <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">14 Drag n Drop items 01</h1>
+          <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">14. Drag n Drop items 01</h1>
           <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-2 px-3 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="./14_drag_n_drop_01/index.html">Play Here</a>
           <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-1 px-2 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="https://linksly.co/14_drag_n_drop_01">Source-Code 1</a>
           <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-1 px-2 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="https://shrinkme.pro/14_drag_n_drop_01">Source-Code 2</a>
@@ -163,7 +187,7 @@ <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">14
     <section class="text-gray-600 body-font">
       <div class="container px-5 py-2 mx-auto shadow-lg">
         <div class="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
-          <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">13 Whack a Mole (game)</h1>
+          <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">13. Whack a Mole (game)</h1>
           <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-2 px-3 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="./13_whack_a_mole(game)/index.html">Play Here</a>
           <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-1 px-2 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="https://shrinkme.us/13_whack_a_mole_game">Source-Code 1</a>
           <a class="flex-shrink-0 text-white bg-indigo-500 border-0 py-1 px-2 mx-2 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0" href="https://linksly.co/13_whack_a_mole_game">Source-Code 2</a>