Merge pull request #25 from Nemwel-Boniface/displayMovies

Project Milestone 4 : Display movies
Nemwel-Boniface · Mar 8, 2022 · f0ab006 · f0ab006
2 parents d5c0f8e + 9b0d37a
commit f0ab006
Show file tree

Hide file tree

Showing 9 changed files with 179 additions and 82 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
-node_modules/
+node_modules/
+
+dist
diff --git a/README.md b/README.md
@@ -1,21 +1,21 @@
 ![](https://img.shields.io/badge/Microverse-blueviolet)
 
-# Webpack Setup
+# Let's Chill
+Let's Chill is a web application that generates random movies from the tv Maze API. More information about the API can be found [here](https://www.tvmaze.com/api)
 
-> Webpack is an open-source JavaScript module bundler. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included. webpack takes modules with dependencies and generates static assets representing those modules.
-> Further information can be found [here](https://en.wikipedia.org/wiki/Webpack)
+![screenshot](./src/images/letsChill.png)
 
 
 ## Built With
 
-- node_modules
+- npm node_modules
 - Webpack
-- lodash
-- basic HTML, CSS, JavaScript
+- tv-Maze API
+- HTML, CSS, JavaScript
 
 ## Live Demo
 Live site URL to Webpack basic setup
-[Live Demo Link](https://nemwel-boniface.github.io/WebpackSetUp/)
+[Live Demo Link](https://nemwel-boniface.github.io/openSourceLibrary/)
 
 
 ## Getting Started
@@ -34,7 +34,7 @@ Live site URL to Webpack basic setup
 ### Install
 
 - Open your command prompt or terminal and run.
-- git clone git@github.com:Nemwel-Boniface/WebpackSetUp.git .
+- git@github.com:Nemwel-Boniface/openSourceLibrary.git .
 
 
 ### Run tests
@@ -56,12 +56,17 @@ Live site URL to Webpack basic setup
 - Twitter: [@nemwel_bonie](https://twitter.com/nemwel_bonie)
 - LinkedIn: [LinkedIn](https://www.linkedin.com/in/nemwel-nyandoro-aa1b2620b/)
 
+👤 **Author2**
+
+- GitHub: [@Zelalem ](https://github.com/zmekonnen251)
+- Twitter: [@Zelalem ]()
+- LinkedIn: [LinkedIn]()
 
 ## 🤝 Contributing
 
 Contributions, issues, and feature requests are welcome!
 
-Feel free to check the [issues page](https://github.com/Nemwel-Boniface/WebpackSetUp/issues).
+Feel free to check the [issues page](https://github.com/Nemwel-Boniface/openSourceLibrary/issues).
 
 ## Show your support
 

diff --git a/dist/index.html b/dist/index.html
@@ -1,26 +1,54 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!-- font awesome icons -->
+
+    <link
+      rel="stylesheet"
+      href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
 
     <!--Google fonts Mochiy pop one, poppins-->
 
-    <link href="https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;1,300;1,400&display=swap" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;1,300;1,400&display=swap"
+      rel="stylesheet"
+    />
 
     <title>Let's Chill</title>
-<script defer src="main.js"></script></head>
-<body>
-   <header class="header">
-       <nav class="nav">
-           <a href="#"><h2>Lets Chill</h2></a>
-           <ul>
-               <li><a href="#">Movies<span>6</span></a></li>
-               <li><a href="#">About</a></li>
-               <li><a href="#">Contact</a></li>
-           </ul>
-       </nav>
-   </header>
-</body>
-</html>
+  <script defer src="main.js"></script></head>
+  <body>
+    <header class="header">
+      <nav class="nav">
+        <a href="#"><h2>Lets Chill</h2></a>
+        <ul>
+          <li>
+            <a href="#">Movies<span>6</span></a>
+          </li>
+          <li><a href="#">About</a></li>
+          <li><a href="#">Contact</a></li>
+        </ul>
+      </nav>
+    </header>
+
+    <main class="main">
+      <div class="image-container">
+
+      </div>
+    </main>
+    <footer>
+      <p>&copy; Created by <strong>let's Chill</strong> uderer cc licence</p>
+    </footer>
+  </body>
+</html>
diff --git a/dist/main.js b/dist/main.js
diff --git a/src/images/letsChill.png b/src/images/letsChill.png
diff --git a/src/index.html b/src/index.html
@@ -4,6 +4,17 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <!-- font awesome icons -->
+
+    <link
+      rel="stylesheet"
+      href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+
     <!--Google fonts Mochiy pop one, poppins-->
 
     <link
@@ -30,6 +41,12 @@
         </ul>
       </nav>
     </header>
+
+    <main class="main">
+      <div class="image-container">
+
+      </div>
+    </main>
     <footer>
       <p>&copy; Created by <strong>let's Chill</strong> uderer cc licence</p>
     </footer>

diff --git a/src/index.js b/src/index.js
@@ -1 +1,31 @@
-import './style.css';
+import './style.css';
+
+const url = 'https://api.tvmaze.com/shows/';
+
+const movieWrapper = document.querySelector('.image-container');
+const testMovie = async (url) => {
+  movieWrapper.innerHTML = '';
+  for (let i = 720; i < 729; i += 1) {
+    fetch(url + i)
+      .then((response) => response.json())
+      .then((result) => {
+        movieWrapper.innerHTML = `${movieWrapper.innerHTML}
+        <div class="movie" id="${i}">
+          <img src="${result.image.medium}" alt="movie">
+          <div class="movieDesc">
+            <div class="movieDescTop">
+              <p>${result.name}</p>
+              <a href="#"><i class="fa fa-heart" aria-hidden="true"></i>
+              </a>
+            </div>
+            <p><span>2</span>Likes</p>
+          </div>
+          <div class="movieBtn">
+            <button id="${i}" class="comments" type="button">Comments</button>
+            <button class="reservations" type="button">Reservations</button>
+          </div>
+        </div>`;
+      });
+  }
+};
+testMovie(url);
diff --git a/src/style.css b/src/style.css
@@ -11,7 +11,6 @@
 
 body {
   position: relative;
-  height: 100vw;
 }
 
 .header {
@@ -85,11 +84,67 @@ body {
   bottom: 15px;
 }
 
+/* Styling for the individual cards section */
+.main {
+  margin: 4% 10%;
+}
+
+.image-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 30px;
+}
+
+.image-container .movie {
+  border: 1px solid #000;
+  padding: 12px;
+  transition: transform 0.5s;
+}
+
+.image-container .movie:hover {
+  transform: translateY(-7px);
+}
+
+.image-container .movie img {
+  height: 45vh;
+  width: 100%;
+  margin-bottom: 15px;
+}
+
+.movieDesc {
+  position: relative;
+}
+
+.movieDescTop {
+  display: flex;
+  justify-content: space-between;
+}
+
+.movieDesc > p {
+  position: absolute;
+  right: 0;
+  margin-bottom: 15px;
+}
+
+.movieBtn {
+  position: relative;
+  top: 40px;
+  padding-bottom: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.movieBtn button {
+  padding: 7px;
+  margin: 20px 15px;
+}
+
+/* Footer section  */
 footer {
+  margin-top: 100px;
   width: 100%;
   text-align: center;
-  position: absolute;
-  bottom: 0;
   border-top: 1px solid black;
   padding: 1rem;
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -23,6 +23,10 @@ module.exports = {
         test: /\.css$/i,
         use: ['style-loader', 'css-loader'],
       },
+      {
+        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+        type: 'asset/resource',
+      },
     ],
   },
 };