Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@yararajjoub
yararajjoub authored Jan 1, 2023
1 parent 93c5f47 commit a202b1e
Show file tree
Hide file tree
Showing 3 changed files with 356 additions and 0 deletions.
86 changes: 86 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "Viewport" content = "width = device-width, intial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title> Movie API app </title>
</head>
<body>
<header>
</header>

<div id ="tags" ></div>
<!--
<div class="tag"> Fantasy </div>
<div class="tag"> Horror </div>
<div class="tag"> Action </div>
<div class="tag"> Mystery </div>
<div class="tag"> War </div>
<div class="tag"> Comedy </div>
<div class="tag"> Drama </div>
-->
<main id = "main">
<div class="movie">
<img src="https://images.unsplash.com/photo-1542204165-65bf26472b9b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1548&q=80"
alt="Image"
width="400"
height="200">

<div class="movie-info">
<h3>Movie Title </h3>
<span class="green">9.8 </span>

</div>

<!--
<div class="overview">
<h3> Overview </h3>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Magnam, architecto fugiat aspernatur cumque quasi error odit corrupti
voluptate explicabo beatae.
</div>
<h3> Overview </h3> -->
</div>


<div class="movie">
<img src="https://images.unsplash.com/photo-1542204165-65bf26472b9b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1548&q=80"
alt="Image"
width="400"
height="200">

<div class="movie-info">
<h3>Movie Title </h3>
<span class="orange">5 </span>
</div>

</div>



<div class="movie">
<img src="https://images.unsplash.com/photo-1542204165-65bf26472b9b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1548&q=80"
alt="Image"
width="400"
height="200">

<div class="movie-info">
<h3>Movie Title </h3>
<span class="red">4.9 </span>
</div>
<!--
<div class="overview">
<h3> Overview </h3>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Magnam, architecto fugiat aspernatur cumque quasi error odit corrupti
voluptate explicabo beatae.
</div> -->
</div>
</main>


<script src = "script.js"></script>
</body>
</html>
168 changes: 168 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
//TMDB
///discover/movie?sort_by=popularity.desc

const API_KEY = 'api_key=d9a60d2b9ae4db7ab0ca7aa0ca5a17e7';
const BASE_URL = 'https://api.themoviedb.org/3';
const API_URL = BASE_URL + '/discover/movie?sort_by=popularity.desc&'+API_KEY;
const IMG_URL = 'https://image.tmdb.org/t/p/w500';

const genres = [
{
"id": 14,
"name": "Fantasy"

},
{
"id": 27,
"name": "Horror"


},
{
"id": 28,
"name": "Action"


},

{
"id": 9648,
"name": "Mystery"
},

{
"id": 10752,
"name": "War"
},

{
"id": 35,
"name": "Comedy"
},
{
"id": 18,
"name": "Drama"
}
]

const main = document.getElementById('main');
const tagsElem = document.getElementById('tags')

//call the function and pass the url
getMovies(API_URL);
setGenres()

var selectedGenre = [] // array to save all the element from the selected genre
function setGenres(){
tagsElem.innerHTML= '';
//dynamic crate the tags
genres.forEach(genre => {
const t = document.createElement('div'); //genres
t.classList.add('tag');
t.id=genre.id;
t.innerHTML = genre.name;

//what happend if click on genre-bottun //clickable to change data
t.addEventListener('click', ()=> {

if(selectedGenre.length == 0){ //nothing inside = then push the genre.id to the end of array and return the new length of the array
selectedGenre.push(genre.id);
}else{
if(selectedGenre.includes(genre.id)){ //if the genre.id is alreade inside = if true remove from array
selectedGenre.forEach((id, idx) => { //idx is the position of element
if(id == genre.id){
selectedGenre.splice(idx, 1); //then remove one elm
}
})
}else{
selectedGenre.push(genre.id);
}
}
console.log(selectedGenre)
getMovies(API_URL + '&with_genres='+encodeURI(selectedGenre.join(',')))
// highlightSelection()
} )

tagsElem.append(t); //se the genres
})
}


/*
function highlightSelection() {
const tags = document.querySelectorAll('.tag');
tags.forEach(tag => {
tag.classList.remove('highlight')
})
clearBtn()
if(selectedGenre.length !=0){
selectedGenre.forEach(id => {
const hightlightedTag = document.getElementById(id);
hightlightedTag.classList.add('highlight');
})
}
}
function clearBtn(){
let clearBtn = document.getElementById('clear');
if(clearBtn){
clearBtn.classList.add('highlight')
}else{
let clear = document.createElement('div');
clear.classList.add('tag','highlight');
clear.id = 'clear';
clear.innerText = 'Clear x';
clear.addEventListener('click', () => {
selectedGenre = [];
setGenre();
getMovies(API_URL);
})
tagsEl.append(clear);
}
}*/


//show the movies we get from data as respons, we fetch the url
function getMovies(url){

fetch(url).then(res => res.json()).then(data =>{
console.log(data.results);
showMovies(data.results);
})
}

function showMovies(data){
main.innerHTML='';

data.forEach(movie => {
const {title, poster_path, vote_average} = movie;
const movieElem = document.createElement('div');
movieElem.classList.add('movie');
movieElem.innerHTML =
`
<img src="${IMG_URL+poster_path}" alt="${title}">
<div class="movie-info">
<h3>${title}</h3>
<span class="${getcolor(vote_average)}">${vote_average} </span>
</div>
`
main.appendChild(movieElem);
})
}


function getcolor(vote){
if(vote>=8){
return 'green'
}else if(vote >= 6){
return "orange"
}else if (vote > 1 && vote < 6 ){
return 'red'
}
}
102 changes: 102 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

*{
box-sizing: border-box;
}

:root {
--primary-color:#22254b;
--secondary-color: #373b69;
}

body{
background-color: var(--primary-color);
font-family: 'Poppins', sans-serif;
margin: 0;

}

header{
padding: 1rem;
display: flex;
justify-content: flex-end;
background-color: var(--secondary-color);
}



main{
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.movie{
width: 300px;
margin: 1rem;
border-radius: 3px;
box-shadow: 0.2px 4px 5px rgba(0,0,0,1);
background-color: var(--secondary-color);
position: relative;
overflow: hidden;
}

.movie img{
width: 100%;
}

.movie-info{
color: #eee;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem 1rem;
letter-spacing: 0.5px ;
}

.movie-info h3{
margin-top: 0;
}

.movie-info span{
background-color: var(--primary-color);
padding: 0.25rem 0.5rem;
border-radius: 3px;
font-weight: bold;
}

.movie-info span.green{

color: lightgreen;
}

.movie-info span.orange{

color: orange;
}

.movie-info span.red{

color: red;
}


#tags{
width: 80%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 10px auto;
}
.tag{
color: white;
padding: 10px 20px;
background-color: orange;
border-radius: 50px;
margin:5px;
display:inline-block;
cursor: pointer;
}

0 comments on commit a202b1e

Please sign in to comment.