Lookingfor00 · Lookingfor00 · Jan 5, 2023 · Jan 3, 2023 · Jan 5, 2023 · Jan 5, 2023
diff --git a/README.md b/README.md
@@ -2,11 +2,12 @@
 
 # 📗 Table of Contents
 - [📗 Table of Contents](#-table-of-contents)
-- [📖 Capston-javascript ](#-capston-javascript-)
+- [📖 ShowTime ](#-showtime-)
   - [🛠 Built With ](#-built-with-)
     - [Tech Stack ](#tech-stack-)
     - [Key Features ](#key-features-)
   - [🚀 Live Demo ](#-live-demo-)
+  - [� Presentation Video ](#-presentation-video-)
   - [💻 Getting Started ](#-getting-started-)
     - [Setup](#setup)
     - [Install](#install)
@@ -17,8 +18,10 @@
   - [⭐️ Show your support ](#️-show-your-support-)
   - [📝 License ](#-license-)
 
-# 📖 Capston-javascript <a name="about-project"></a>
-This is a project done during the microverse program
+# 📖 ShowTime <a name="about-project"></a>
+**ShowTime** is Movie Streaming Website that use TV maze API to display a list of movies with detail. Users can leave comments and likes about their prefered movies.
+
+[video of presentation](https://www.loom.com/share/99aaffee950643ba895293ae357802c2)
 
 
 ## 🛠 Built With <a name="built-with"></a>
@@ -31,13 +34,17 @@ This is a project done during the microverse program
 ### Key Features <a name="key-features"></a>
 
 - **Use ES6**
+- **Show Popup detail**
 - **Use Api [tvmaze](https://www.tvmaze.com/api)**
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 ## 🚀 Live Demo <a name="live-demo"></a>
 
-- [Live Demo Link](https://yourdeployedapplicationlink.com)
+[Live Demo Link](https://trast00.github.io/Capston-javascript/dist/index.html)
+
+## 📺 Presentation Video <a name="live-demo"></a>
+[Presentation video](https://www.loom.com/share/99aaffee950643ba895293ae357802c2)
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
@@ -98,8 +105,10 @@ To run tests, run the following command:
 
 ## 🔭 Future Features <a name="future-features"></a>
 
-- [ ] **Comment section**
-- [ ] **More Personnalized UI**
+- [x] **Comment section**
+- [ ] **Search bar**
+- [ ] **List of episodes**
+- [x] **More Personnalized UI**
 
 
 ## ⭐️ Show your support <a name="support"></a>

diff --git a/dist/0f9e753baa7f7d16f0cc.png b/dist/0f9e753baa7f7d16f0cc.png
diff --git a/dist/240fad889811518e0b5b.png b/dist/240fad889811518e0b5b.png
diff --git a/dist/index.html b/dist/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8"><script src="https://kit.fontawesome.com/a1c06e2fcd.js" crossorigin="anonymous"></script><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Show Time</title><script defer="defer" src="runtime.js"></script><script defer="defer" src="main.js"></script></head><body><header class="flex-center header"><nav class="flex-center nav-bar"><ul class="flex-center"><li><img src="240fad889811518e0b5b.png" alt="logo"></li><li>Spaceships(<span id="count-movies">6</span>)</li><li>Space</li><li>Planets</li></ul></nav></header><main class="flex-center main-container"><ul id="list-movies" class="flex-center list-movies"></ul><nav class="flex-center pages"><button id="btn-previous-page" disabled="disabled">Previous</button><p>Page</p><button id="btn-next-page">Next</button></nav><section class="popup"></section></main><footer><div class="flex-center foot"><p>Created by Microverse under CC licence</p></div></footer></body></html>
+<!doctype html><html lang="en"><head><meta charset="UTF-8"><script src="https://kit.fontawesome.com/a1c06e2fcd.js" crossorigin="anonymous"></script><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta content="0; url=https://trast00.github.io/Capston-javascript/src/dist/index.html"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Show Time</title><script defer="defer" src="runtime.js"></script><script defer="defer" src="main.js"></script></head><body><header class="flex-center header"><nav class="flex-center nav-bar"><ul class="flex-center"><li><img src="0f9e753baa7f7d16f0cc.png" alt="logo"></li><li>Movies(<span id="count-movies">0</span>)</li><li>Series</li><li>Animes</li></ul></nav></header><main class="flex-center main-container"><ul id="list-movies" class="flex-center list-movies"></ul></main><section class="popup flex-center"></section><footer><div class="flex-center foot"><p>Created by Microverse under CC licence</p></div></footer></body></html>
diff --git a/dist/main.js b/dist/main.js
diff --git a/dist/runtime.js b/dist/runtime.js
diff --git a/img/logo-social.png b/img/logo-social.png
diff --git a/src/index.html b/src/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <script src="https://kit.fontawesome.com/a1c06e2fcd.js" crossorigin="anonymous"></script>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta content="0; url=https://trast00.github.io/Capston-javascript/dist/index.html">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Show Time</title>
 </head>
@@ -12,21 +13,16 @@
         <nav class="flex-center nav-bar">
             <ul class="flex-center">
                 <li><img src="../img/logo-social.png" alt="logo"></li>
-                <li>Spaceships(<span id="count-movies">6</span>)</li>
-                <li>Space</li>
-                <li>Planets</li>
+                <li>Movies(<span id="count-movies">0</span>)</li>
+                <li>Series</li>
+                <li>Animes</li>
             </ul>
         </nav>
     </header>
     <main class="flex-center main-container">
       <ul id="list-movies" class="flex-center list-movies"></ul>
-      <nav class="flex-center pages">
-        <button id="btn-previous-page" disabled>Previous</button>
-        <p>Page</p>
-        <button id="btn-next-page">Next</button>
-      </nav>
     </main>
-    <section class="popup"></section>
+    <section class="popup flex-center"></section>
     <footer>
         <div class="flex-center foot">
             <p>Created by Microverse under CC licence</p>

diff --git a/src/index.js b/src/index.js
@@ -3,8 +3,40 @@ import './style.css';
 
 const listMovies = new ListMovies();
 
+const displayLoader = (displayed) => {
+  const main = document.querySelector('.main-container');
+  if (displayed) {
+    const loader = `
+    <div class="loader" title="7">
+      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+         width="80px" height="80px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
+        <rect x="0" y="10" width="4" height="10" fill="#fa0437" opacity="0.2">
+          <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite" />
+          <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite" />
+          <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite" />
+        </rect>
+        <rect x="8" y="10" width="4" height="10" fill="#fa0437"  opacity="0.2">
+          <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
+          <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
+          <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
+        </rect>
+        <rect x="16" y="10" width="4" height="10" fill="#fa0437"  opacity="0.2">
+          <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
+          <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
+          <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
+        </rect>
+      </svg>
+    </div>`;
+    main.innerHTML += loader;
+  } else {
+    main.querySelector('.loader')
+      .classList.add('hidden');
+  }
+};
+
 window.addEventListener('load', async () => {
+  displayLoader(true);
   await listMovies.getListLikes();
   await listMovies.getListMovies();
-  listMovies.display();
+  displayLoader(false);
 });
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="UTF-8"><script src="https://kit.fontawesome.com/a1c06e2fcd.js" crossorigin="anonymous"></script><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Show Time</title><script defer="defer" src="runtime.js"></script><script defer="defer" src="main.js"></script></head><body><header class="flex-center header"><nav class="flex-center nav-bar"><ul class="flex-center"><li><img src="240fad889811518e0b5b.png" alt="logo"></li><li>Spaceships(<span id="count-movies">6</span>)</li><li>Space</li><li>Planets</li></ul></nav></header><main class="flex-center main-container"><ul id="list-movies" class="flex-center list-movies"></ul><nav class="flex-center pages"><button id="btn-previous-page" disabled="disabled">Previous</button><p>Page</p><button id="btn-next-page">Next</button></nav><section class="popup"></section></main><footer><div class="flex-center foot"><p>Created by Microverse under CC licence</p></div></footer></body></html>
		<!doctype html><html lang="en"><head><meta charset="UTF-8"><script src="https://kit.fontawesome.com/a1c06e2fcd.js" crossorigin="anonymous"></script><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta content="0; url=https://trast00.github.io/Capston-javascript/src/dist/index.html"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Show Time</title><script defer="defer" src="runtime.js"></script><script defer="defer" src="main.js"></script></head><body><header class="flex-center header"><nav class="flex-center nav-bar"><ul class="flex-center"><li><img src="0f9e753baa7f7d16f0cc.png" alt="logo"></li><li>Movies(<span id="count-movies">0</span>)</li><li>Series</li><li>Animes</li></ul></nav></header><main class="flex-center main-container"><ul id="list-movies" class="flex-center list-movies"></ul></main><section class="popup flex-center"></section><footer><div class="flex-center foot"><p>Created by Microverse under CC licence</p></div></footer></body></html>