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.

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

wants to merge 9 commits into from

Conversation

mr-meetpatel
Copy link

Completed JS assignment which is Movie LIst app using movie API.

}

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.

main.js Outdated
Comment on lines 51 to 60
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.

main.js Outdated


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

main.js Outdated
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
}

@hhkk28
Copy link
Collaborator

hhkk28 commented Jul 13, 2022

movie poster thumbnail

The design for the poster is not as per the design.

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

@@ -1,8 +1,168 @@
:root {
--light-grey: #626262;
Copy link
Collaborator

Choose a reason for hiding this comment

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

👍

style.css Outdated
.heading {
font-family: "Roboto Mono";
font-size: 48px;
font-weight: 250;
Copy link
Collaborator

Choose a reason for hiding this comment

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

The font weight mentioned in the design in 400

@hhkk28
Copy link
Collaborator

hhkk28 commented Jul 14, 2022

Great work @mr-meetpatel PR approved and you have completed your JS assignment.

Copy link
Collaborator

@hhkk28 hhkk28 left a comment

Choose a reason for hiding this comment

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

LGTM but don't merge it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants