Deploying to gh-pages from @ 2d9cc90 🚀

Rooyca · Mar 12, 2024 · 7f10eb4 · 7f10eb4
1 parent c27ec0d
commit 7f10eb4
Show file tree

Hide file tree

Showing 7 changed files with 238 additions and 0 deletions.
diff --git a/600x900.svg b/600x900.svg
diff --git a/current.json b/current.json
@@ -0,0 +1,9 @@
+{
+        "director": "Alfred Hitchcock",
+        "title": "Psyco",
+        "desc": "A Phoenix secretary embezzles $40,000 from her employer's client, goes on the run and checks into a remote motel run by a young man under the domination of his mother.",
+        "year": "1960",
+        "tags": ["Mystery", "Thriller"],
+        "length": "1h 49min",
+        "img": "https://image.tmdb.org/t/p/w600_and_h900_bestv2/yz4QVqPx3h1hD1DfqqQkCq3rmxW.jpg"
+}
diff --git a/favicon.svg b/favicon.svg
diff --git a/img_movie.jpg b/img_movie.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="description" content="Everyday get a random movie from the list of 1001 movies to watch before you die.">
+	<meta name="keywords" content="movies,1001,cinema,watch,free">
+	<meta name="author" content="rooyca">
+	<title>Random Movie of the Day - 1001 Movies</title>
+	<link rel="icon" type="image/svg+xml" href="favicon.svg">
+	<link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+	<figure class="movie">
+	  <div class="movie__hero">
+	    <img src="600x900.svg" alt="movie poster" class="movie__img">
+	  </div>
+	  <div class="movie__content">
+	    <div class="movie__title">
+	      <h1 class="heading__primary"></h1>
+	      <h2 class="heading__secondary"></h2>
+	    </div>
+	    <p class="movie__description">
+	    </p>
+	    <div class="movie__details">
+	      <p class="movie__detail year"></p>
+	      <p class="movie__detail length"></p>
+	      <p class="movie__detail tag1"></p>
+	      <p class="movie__detail tag2"></p>
+	    </div>
+	  </div>
+	  <div class="movie__date"></div>
+	</figure>
+</body>
+<script type="text/javascript" src="main.js"></script>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,35 @@
+const title = document.querySelector('.heading__primary');
+const director = document.querySelector('.heading__secondary');
+const description = document.querySelector('.movie__description');
+const year = document.querySelector('.year');
+const tag1 = document.querySelector('.tag1');
+const tag2 = document.querySelector('.tag2');
+const length = document.querySelector('.length');
+const date = document.querySelector('.movie__date');
+const poster = document.querySelector('.movie__img');
+
+const GetInfo = () => {
+	fetch('current.json')
+		.then(response => response.json())
+		.then(data => {
+			poster.src = data.img;
+			title.innerHTML = data.title;
+			director.innerHTML = data.director;
+			description.innerHTML = data.desc;
+			year.innerHTML = "📅 "+data.year;
+			length.innerHTML = "🕒 "+data.length;
+
+			for (let i = 0; i < data.tags.length; i++) {
+				if (i === 0) {
+					tag1.innerHTML = "🏷️ #"+data.tags[i];
+				} else {
+					tag2.innerHTML = "🏷️ #"+data.tags[i];
+				}
+			}
+			date.innerHTML = new Date().toDateString();
+		})
+		.catch(error => {
+			console.error('Error:', error);
+		});
+}
+GetInfo();
diff --git a/style.css b/style.css
@@ -0,0 +1,100 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Roboto', sans-serif;
+    font-size: 20px;
+    font-weight: 300;
+    color: #444;
+    background: linear-gradient(112.1deg, rgb(32, 38, 57) 11.4%, rgb(63, 76, 119) 70.2%); 
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.movie {
+    max-width: 800px;
+    border-radius: 5px;
+    display: flex;
+    box-shadow: 0 5px 20px 10px rgba(0, 0, 0, .2);
+   overflow: hidden;
+}
+
+.movie__hero {
+  flex: 0 0 30%;
+}
+
+.movie__img {
+    width: 100%;
+    display: block;
+}
+
+.movie__content {
+    background-color: #fff;
+    flex: 1;
+    padding: 35px 30px;
+    display: flex;
+    flex-direction: column;
+}
+
+.movie__date {
+    background: linear-gradient(to top, rgb(32, 38, 57) 11.4%, rgb(63, 76, 119) 70.2%); 
+    flex: 0 0 50px;
+    font-size: 18px;
+    font-weight: bold;
+    letter-spacing: 2px;
+    color: rgb(255, 255, 255);
+    writing-mode: vertical-lr;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.movie__title {
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.heading__primary {
+    font-size: 26px;
+    margin-right: auto;
+    color: royalblue;
+}
+
+.heading__secondary {
+    font-size: 20px;
+    color: grey;
+    display: block;
+}
+
+.movie__tag {
+  font-size: 10px;
+  color: #000;
+  display: block;
+  text-transform: uppercase;
+
+}
+
+.movie__description {
+    font-size: 19px;
+    text-align: justify;
+    font-weight: 600;
+}
+
+.movie__details {
+    display: flex;
+    margin-top: auto;
+}
+
+.movie__detail {
+   font-size: 15px;
+   margin-right: 20px;
+   font-weight: bold;
+   border-bottom: 2px solid gray;
+}