Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

List 1 #1

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

List 1 #1

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
905da8d
MP | HTML files
mr-meetpatel Jul 8, 2022
5e19324
MP | CSS files
mr-meetpatel Jul 8, 2022
e14c399
MP | JS files
mr-meetpatel Jul 8, 2022
1f1fce6
MP | other files
mr-meetpatel Jul 8, 2022
26862fb
MP | Formatted HTML files
mr-meetpatel Jul 13, 2022
3e77b25
MP | use css vairable and change the order
mr-meetpatel Jul 13, 2022
6f0f04c
MP | created element add append it instead of innerHTML
mr-meetpatel Jul 13, 2022
b3e630f
MP | Change required css property
mr-meetpatel Jul 14, 2022
b42e676
MP | make required changes in css file
mr-meetpatel Jul 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added MovieNotFound.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 37 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/main.js"></script>
</body>
</html>

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="" t="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&family=Rubik:wght@600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Book Ticket</title>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Great attention to detail

</head>

<body>
<header class="header">
<h1 class="heading">Book Tickets</h1>
<form class="form" method="post">
<input type="text" class="search-bar" placeholder="search" onfocus="this.placeholder=''"
onblur="this.placeholder='search'">
</form>
</header>
<div id="app">

<div class="movie-card">

</div>
</div>
<div class="no-movie-found">
<div class="no-result">
<h2 class="section-item"> Sorry, there is no result for keyword you searched.</h2>
<img class="section-img" src="MovieNotFound.png" alt="result not found">
</div>

</div>
<!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
<script type="module" src="main.js"></script>

</body>

</html>
83 changes: 78 additions & 5 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,79 @@
import './style.css'
import axios from "axios";
const key = 'f9d119ddc9f2ae7c8b2c34f1d5910a87';
const api =`https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=${key}`;
const imgUrl ="https://image.tmdb.org/t/p/w500" ;
const searchUrl= `https://api.themoviedb.org/3/search/movie?api_key=${key}`;

document.querySelector('#app').innerHTML = `
<h1>Hello Vite!</h1>
<a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
`
const app=document.querySelector("#app");
const movieData=document.querySelector(".movie-card");
const movieSearch=document.querySelector(".search-bar")
const errorDiv=document.querySelector(".no-movie-found");


async function getMovieFromApi(api) {
const response= await axios.get(api);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Keep indentation consistent. You can use auto code formatters for that.
  • Remove empty lines

const movieData=response.data.results.slice(0,15);
if(movieData.length){
app.style.display="block";
showMovieData(movieData)
errorDiv.style.display="none";
}
else{
app.style.display="none";
errorDiv.style.display="block";

}
}


getMovieFromApi(api);

movieSearch.addEventListener("keyup", (event)=>{
event.preventDefault();
const query=event.target.value;

if(query.length>0){
getMovieFromApi(searchUrl+"&query="+query);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can just pass query in this function since variables like api and searchUrl are globally scoped.
The getMovieFromApi function will be something like:

async function getMovieFromApi(query='') {
       const url = query==='' ? api : searchUrl+"&query="+query;
       const response = await axios.get(url);
       // rest of the code
}

}else{
getMovieFromApi(api);
}

});

const showMovieData=(data)=>{
movieData.innerHTML ='';
let count=0;
data.forEach(movie => {
const {poster_path,title}= movie;
const div = document.createElement('div');
div.classList.add("card");
let htmlData=``;
if(poster_path!=null){
htmlData+=`<img src="${imgUrl +poster_path}" alt="${title}">`;
if(title.length>16){
htmlData+=`<h3 class="card-item"> ${title.substring(0,17)}...</h3>`;
}else{
htmlData+=`<h3 class="card-item"> ${title}</h3>`
}
htmlData+=`<button class ="btn"> Read More </button>`

div.innerHTML=htmlData
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Although innerHTML is one of the ways you can directly add elements, it should be avoided due to various reasons..
You can create element and append it.




}else{
htmlData+=`<img src="http://via.placeholder.com/1080x1580" alt="${title}">`;
if(title.length>16){
htmlData+=`<h3 class="card-item"> ${title.substring(0,17)}...</h3>`
}else{
htmlData+=`<h3 class="card-item"> ${title}</h3>`
}
htmlData+=`<button class ="btn"> Read More </button>`

div.innerHTML=htmlData

}

movieData.appendChild(div);
});
}
6 changes: 5 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@
"preview": "vite preview"
},
"devDependencies": {
"jest": "^28.1.2",
"vite": "^2.9.9"
},
"dependencies": {
"axios": "^0.27.2"
}
}
}
Binary file added search.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
182 changes: 175 additions & 7 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,176 @@
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
* {
margin: 0;
}

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • remove empty lines
  • the order of css rules should be first parent, then its childs/states like hover. For eg. .card should come first, then .card:hover and .card image as such.
  • You can use css variables for values like color which is used again and again.

header {
display: flex;
flex-direction: column;
align-items: center;
}

.heading {
font-family: "Roboto Mono";
font-size: 48px;
font-weight: 250;
margin: 12px 0 15px 0;
}


input[type=text]{
font-family: "Rubik";
padding-left: 20px;
font-weight: 400;
font-size: 16px;
}

.search-bar{
height: 43px;
width: 300px;
border: 1px solid #626262;
background: url('search.png');
background-repeat: no-repeat;
background-position: right;
background-position: calc(100% - 10px) center;
}


#app{
margin: 66px auto 149px auto;
max-width: 1200px;
}

.movie-card{
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap:48px 75px;
}


.no-result{
display: flex;
flex-direction: column;
align-items: center;

}

.no-result img{
max-width: 500px;
width:100%;
}
.section-item{
margin-top: 96px;
margin-bottom: 48px;
font-family: 'Rubik';
font-size: 32px;
}


.card img{
height: 374px;
width: 350px;
border-radius: 20px;
opacity: 1;
}

.card:hover img{
opacity: 0.5;
transition:opacity 0.5s;
}

.card{
position: relative;
}

.card:hover button{
display: block;

}

.card:hover h3{
display: block;
}
.card-item{
position: absolute;
left: 31.43%;
top: 42.51%;
color: #FFFFFF;
font-family: 'Rubik';
font-style: normal;
font-weight: 600;
font-size: 24px;
text-align: center;
width: 122px;
height: 56px;
display: none;
}

.btn{
position: absolute;
left: 29.43%;
top: 76.74%;
text-align: center;
background: #352C9A;
border: none;
display: none;
color: #FFFFFF;
height: 37px;
width:125px;
font-family: "Rubik";
font-size:16px;
font-weight: 600;
}

.btn:hover {
background-color: #724fd8;
}

.btn:active {
background-color: #724fdf;
text-decoration: underline;
}

.btn:disabled {
background-color: #626262;
}

@media(max-width:767px) {

.section-img {
width: 400px;
height: 360px;

margin: 24px auto 81px auto;
}

.section-item {
font-size: 30px;
text-align: center;


}
}

@media(max-width:480px){
.heading{
font-size: 36px;
}
.card img{
width: 300px;
height: 320px;
margin:24px 30px 24px 30px;


}
.btn{
width: 125px;
height: 37px;
}
.section-item{
font-size: 20px;
text-align: center;

}

}
Loading