From b18436512e4f1f9a9ead7ec2ba3648dc6518756b Mon Sep 17 00:00:00 2001
From: Joshi Minh <binhangia241273@gmail.com>
Date: Mon, 3 Jun 2024 22:37:44 +0700
Subject: [PATCH] Test Automation

---
 ShowingMovies.html  | 176 +------------------------
 UpcomingMovies.html | 149 ++-------------------
 fetchShowing.js     |  46 +++----
 fetchUpcoming.js    |  47 ++++---
 index.html          | 315 ++------------------------------------------
 5 files changed, 65 insertions(+), 668 deletions(-)

diff --git a/ShowingMovies.html b/ShowingMovies.html
index 73a5898..ff0f7b4 100644
--- a/ShowingMovies.html
+++ b/ShowingMovies.html
@@ -41,10 +41,10 @@
             <div class="offcanvas-body">
               <ul class="navbar-nav flex-grow-1 pe-3">
                 <li class="nav-item">
-                  <a class="nav-link mx-lg-2" href="UpcomingMovies.html">Phim Sắp Chiếu</a>
+                  <a class="nav-link mx-lg-2" href="ShowingMovies.html">Phim Đang Chiếu</a>
                 </li>
                 <li class="nav-item">
-                  <a class="nav-link mx-lg-2" href="ShowingMovies.html">Phim Đang Chiếu</a>
+                  <a class="nav-link mx-lg-2" href="UpcomingMovies.html">Phim Sắp Chiếu</a>
                 </li>
                 <li class="nav-item align-self-center">
                   <div class="form-check form-switch">
@@ -72,175 +72,11 @@
             <h2>Phim Đang Chiếu</h2>
           </div>
         </div>
-        <div class="row row2">
-          <!--Showing Movies-->
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesShowing/Abigail.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">Abigail</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesShowing/DUNE Phần Hai.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">DUNE Phần Hai</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesShowing/Điềm Báo Của Quỷ.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">Điềm Báo Của Quỷ</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesShowing/Đền Mạng.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">Đền Mạng</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesShowing/Exhuma Quật Mộ Trùng Ma.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">Exhuma Quật Mộ Trùng Ma</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesShowing/Godzilla X Kong Đế Chế Mới.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">Godzilla X Kong Đế Chế Mới</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesShowing/Kung Fu Panda 4.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">Kung Fu Panda 4</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesShowing/Mai.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">Mai</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesShowing/Mobile Suit Gundam SEED FREEDOM.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">Mobile Suit Gundam SEED FREEDOM</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesShowing/Monkey Man.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">Monkey Man</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesShowing/Muôn Vị Nhân Gian.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">Muôn Vị Nhân Gian</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesShowing/Người Chết Trở Về.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">Người Chết Trở Về</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesShowing/Quỷ Thuật.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">Quỷ Thuật</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesShowing/Sáng Đèn.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">Sáng Đèn</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesShowing/Thanh Xuân 18x2 Lữ Trình Hướng Về Em.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">Thanh Xuân 18x2 Lữ Trình Hướng Về Em</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <!--Showing Movies-->
+        
+        <div class="row row2" id="showing-movies-container">
         </div>
+        <script src="fetchShowing.js"></script>
+
       </div>
     </div>
     <footer class="text-center text-lg-start bg-primary-subtle">
diff --git a/UpcomingMovies.html b/UpcomingMovies.html
index 4482244..5cc7742 100644
--- a/UpcomingMovies.html
+++ b/UpcomingMovies.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Phim Sắp Chiếu</title>
+    <title>Phim Đang Chiếu</title>
     <link rel="icon" type="image/x-icon" href="WGLogo.ico" />
 
     <link rel="stylesheet" href="style.css" />
@@ -41,10 +41,10 @@
             <div class="offcanvas-body">
               <ul class="navbar-nav flex-grow-1 pe-3">
                 <li class="nav-item">
-                  <a class="nav-link mx-lg-2" href="UpcomingMovies.html">Phim Sắp Chiếu</a>
+                  <a class="nav-link mx-lg-2" href="ShowingMovies.html">Phim Đang Chiếu</a>
                 </li>
                 <li class="nav-item">
-                  <a class="nav-link mx-lg-2" href="ShowingMovies.html">Phim Đang Chiếu</a>
+                  <a class="nav-link mx-lg-2" href="UpcomingMovies.html">Phim Sắp Chiếu</a>
                 </li>
                 <li class="nav-item align-self-center">
                   <div class="form-check form-switch">
@@ -66,148 +66,17 @@
       </nav>
     </div>
     <div class="content" style="margin-top: 100px;">
-      <div class="content2 my-3 container">
+      <div class="content2 my-3 container" id="pills-sub">
         <div class="row row1">
-          <div class="col mb-4">
+          <div class="col mb-3">
             <h2>Phim Sắp Chiếu</h2>
           </div>
         </div>
-        <div class="row row2">
-          <!--Upcoming Movies-->
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesUpcoming/Anh Hùng Bàn Phím.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">Anh Hùng Bàn Phím</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesUpcoming/B4S – Trước Giờ “Yêu”.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">B4S – Trước Giờ “Yêu”</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesUpcoming/Biệt Đội Săn Ma Kỷ Nguyên Băng Giá.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">Biệt Đội Săn Ma Kỷ Nguyên Băng Giá</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesUpcoming/Cái Giá Của Hạnh Phúc.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">Cái Giá Của Hạnh Phúc</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesUpcoming/Đóa Hoa Mong Manh.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">Đóa Hoa Mong Manh</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesUpcoming/Hòa Quang Đẫm Máu.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">Hòa Quang Đẫm Máu</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesUpcoming/Mùa Hè Của Luca.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">Mùa Hè Của Luca</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesUpcoming/Ngày Tàn Của Đế Quốc.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">Ngày Tàn Của Đế Quốc</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesUpcoming/Người Bạn Trong Tưởng Tượng.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">Người Bạn Trong Tưởng Tượng</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesUpcoming/Quỷ Cái.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">Quỷ Cái</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesUpcoming/SUGA Agust D TOUR ‘D-DAY’ THE MOVIE.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">SUGA Agust D TOUR ‘D-DAY’ THE MOVIE</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-lg-3 col-sm-6">
-            <div class="card border-0" style="width: 15; margin: auto;">
-              <img src="MoviesUpcoming/Trò Chơi Chết Chóc.jpg" class="card-img-top" />
-              <div class="card-body">
-                <p class="card-text">Trò Chơi Chết Chóc</p>
-                <div>
-                  <button class="btn btn-primary">Đặt vé</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <!--Upcoming Movies-->
+        
+        <div class="row row2" id="showing-movies-container">
         </div>
+        <script src="fetchUpcoming.js"></script>
+
       </div>
     </div>
     <footer class="text-center text-lg-start bg-primary-subtle">
diff --git a/fetchShowing.js b/fetchShowing.js
index 624195a..aaedc6b 100644
--- a/fetchShowing.js
+++ b/fetchShowing.js
@@ -1,28 +1,22 @@
-const fs = require('fs');
-const path = require('path');
+ // Define the movie card HTML as a template
+ const movieCardTemplate = `
+   <div class="col-lg-3 col-sm-6">
+     <div class="card border-0" style="width: 15; margin: auto;">
+       <img src="MoviesShowing/Abigail.jpg" class="card-img-top" />
+       <div class="card-body">
+         <p class="card-text">Abigail</p>
+         <div>
+           <button class="btn btn-primary">Đặt vé</button>
+         </div>
+       </div>
+     </div>
+   </div>
+ `;
 
-// Define the directory
-const showingDirectory = path.join(__dirname, 'MoviesShowing');
+ // Get the container element
+ const container = document.getElementById('showing-movies-container');
 
-// Function to get jpg files from a directory
-const getJpgFiles = (directory) => {
-    return new Promise((resolve, reject) => {
-        fs.readdir(directory, (err, files) => {
-            if (err) {
-                return reject('Unable to scan directory: ' + err);
-            }
-
-            const jpgFiles = files.filter(file => path.extname(file).toLowerCase() === '.jpg');
-            resolve(jpgFiles);
-        });
-    });
-};
-
-// Get jpg files from the showing directory
-getJpgFiles(showingDirectory)
-    .then((showingImages) => {
-        console.log('MoviesShowing images:', showingImages);
-    })
-    .catch(err => {
-        console.error(err);
-    });
\ No newline at end of file
+ // Insert the movie card template 10 times
+ for (let i = 0; i < 10; i++) {
+   container.innerHTML += movieCardTemplate;
+ }
\ No newline at end of file
diff --git a/fetchUpcoming.js b/fetchUpcoming.js
index bfaddda..bae612f 100644
--- a/fetchUpcoming.js
+++ b/fetchUpcoming.js
@@ -1,28 +1,25 @@
-const fs = require('fs');
-const path = require('path');
+// Define the upcoming movie card HTML as a template
+const upcomingMovieCardTemplate = `
+  <div class="col-lg-3 col-sm-6">
+    <div class="card border-0" style="width: 15; margin: auto;">
+      <img src="MoviesUpcoming/Anh Hùng Bàn Phím.jpg" class="card-img-top" />
+      <div class="card-body">
+        <p class="card-text">Anh Hùng Bàn Phím</p>
+        <div>
+          <button class="btn btn-primary">Đặt vé</button>
+        </div>
+      </div>
+    </div>
+  </div>
+`;
 
-// Define the directory
-const upcomingDirectory = path.join(__dirname, 'MoviesUpcoming');
+// Get the container element
+const upcomingContainer = document.getElementById('pills-sub');
 
-// Function to get jpg files from a directory
-const getJpgFiles = (directory) => {
-    return new Promise((resolve, reject) => {
-        fs.readdir(directory, (err, files) => {
-            if (err) {
-                return reject('Unable to scan directory: ' + err);
-            }
+// Get the row2 element inside the container
+const row2 = upcomingContainer.querySelector('.row2');
 
-            const jpgFiles = files.filter(file => path.extname(file).toLowerCase() === '.jpg');
-            resolve(jpgFiles);
-        });
-    });
-};
-
-// Get jpg files from the upcoming directory
-getJpgFiles(upcomingDirectory)
-    .then((upcomingImages) => {
-        console.log('MoviesUpcoming images:', upcomingImages);
-    })
-    .catch(err => {
-        console.error(err);
-    });
\ No newline at end of file
+// Insert the upcoming movie card template 10 times
+for (let i = 0; i < 10; i++) {
+  row2.innerHTML += upcomingMovieCardTemplate;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 1d934df..5eb331d 100644
--- a/index.html
+++ b/index.html
@@ -41,10 +41,10 @@
             <div class="offcanvas-body">
               <ul class="navbar-nav flex-grow-1 pe-3">
                 <li class="nav-item">
-                  <a class="nav-link mx-lg-2" href="UpcomingMovies.html">Phim Sắp Chiếu</a>
+                  <a class="nav-link mx-lg-2" href="ShowingMovies.html">Phim Đang Chiếu</a>
                 </li>
                 <li class="nav-item">
-                  <a class="nav-link mx-lg-2" href="ShowingMovies.html">Phim Đang Chiếu</a>
+                  <a class="nav-link mx-lg-2" href="UpcomingMovies.html">Phim Sắp Chiếu</a>
                 </li>
                 <li class="nav-item align-self-center">
                   <div class="form-check form-switch">
@@ -169,320 +169,21 @@ <h2>Danh sách phim</h2>
           </li>
         </ul>
         <div class="tab-content" id="pills-tabContent">
+
           <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
             <div class="row row2" id="showing-movies-container">
-
-              <!--Showing Movies-->
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesShowing/Abigail.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">Abigail</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesShowing/DUNE Phần Hai.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">DUNE Phần Hai</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesShowing/Điềm Báo Của Quỷ.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">Điềm Báo Của Quỷ</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesShowing/Đền Mạng.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">Đền Mạng</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesShowing/Exhuma Quật Mộ Trùng Ma.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">Exhuma Quật Mộ Trùng Ma</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesShowing/Godzilla X Kong Đế Chế Mới.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">Godzilla X Kong Đế Chế Mới</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesShowing/Kung Fu Panda 4.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">Kung Fu Panda 4</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesShowing/Mai.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">Mai</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesShowing/Mobile Suit Gundam SEED FREEDOM.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">Mobile Suit Gundam SEED FREEDOM</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesShowing/Monkey Man.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">Monkey Man</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesShowing/Muôn Vị Nhân Gian.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">Muôn Vị Nhân Gian</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesShowing/Người Chết Trở Về.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">Người Chết Trở Về</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesShowing/Quỷ Thuật.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">Quỷ Thuật</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesShowing/Sáng Đèn.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">Sáng Đèn</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesShowing/Thanh Xuân 18x2 Lữ Trình Hướng Về Em.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">Thanh Xuân 18x2 Lữ Trình Hướng Về Em</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <!--Showing Movies-->
-              
+              <!--Showwing Movies-->
             </div>
           </div>
+          <script src="fetchShowing.js"></script>
 
           <div class="tab-pane fade" id="pills-sub" role="tabpanel" aria-labelledby="pills-profile-tab">
-            <div class="row row2">
-
+            <div class="row row2" id="upcoming-movies-container">
               <!--Upcoming Movies-->
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesUpcoming/Anh Hùng Bàn Phím.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">Anh Hùng Bàn Phím</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesUpcoming/B4S – Trước Giờ “Yêu”.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">B4S – Trước Giờ “Yêu”</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesUpcoming/Biệt Đội Săn Ma Kỷ Nguyên Băng Giá.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">Biệt Đội Săn Ma Kỷ Nguyên Băng Giá</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesUpcoming/Cái Giá Của Hạnh Phúc.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">Cái Giá Của Hạnh Phúc</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesUpcoming/Đóa Hoa Mong Manh.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">Đóa Hoa Mong Manh</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesUpcoming/Hòa Quang Đẫm Máu.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">Hòa Quang Đẫm Máu</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesUpcoming/Mùa Hè Của Luca.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">Mùa Hè Của Luca</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesUpcoming/Ngày Tàn Của Đế Quốc.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">Ngày Tàn Của Đế Quốc</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesUpcoming/Người Bạn Trong Tưởng Tượng.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">Người Bạn Trong Tưởng Tượng</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesUpcoming/Quỷ Cái.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">Quỷ Cái</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesUpcoming/SUGA Agust D TOUR ‘D-DAY’ THE MOVIE.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">SUGA Agust D TOUR ‘D-DAY’ THE MOVIE</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-3 col-sm-6">
-                <div class="card border-0" style="width: 15; margin: auto;">
-                  <img src="MoviesUpcoming/Trò Chơi Chết Chóc.jpg" class="card-img-top" />
-                  <div class="card-body">
-                    <p class="card-text">Trò Chơi Chết Chóc</p>
-                    <div>
-                      <button class="btn btn-primary">Đặt vé</button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <!--Upcoming Movies-->
-
             </div>
           </div>
+          <script src="fetchUpcoming.js"></script>
+
         </div>
       </div>
     </div>