diff --git a/600x900.svg b/600x900.svg new file mode 100644 index 0000000..995486f --- /dev/null +++ b/600x900.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/current.json b/current.json new file mode 100644 index 0000000..344b888 --- /dev/null +++ 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" +} \ No newline at end of file diff --git a/favicon.svg b/favicon.svg new file mode 100644 index 0000000..6dd4418 --- /dev/null +++ b/favicon.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img_movie.jpg b/img_movie.jpg new file mode 100644 index 0000000..bbeb8bd Binary files /dev/null and b/img_movie.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..b766964 --- /dev/null +++ b/index.html @@ -0,0 +1,36 @@ + + + + + + + + + Random Movie of the Day - 1001 Movies + + + + +
+
+ movie poster +
+
+
+

+

+
+

+

+
+

+

+

+

+
+
+
+
+ + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..1a30440 --- /dev/null +++ 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(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..26e663e --- /dev/null +++ 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; +}