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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Display homepage #24

Merged
merged 7 commits into from
Feb 1, 2022
Merged

Display homepage #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c5e1774
add fontawesome for like icon
zhadier Feb 1, 2022
262a660
update index.js to display cards"
zhadier Feb 1, 2022
a82b6dd
add functions to get data from tvMaze api
zhadier Feb 1, 2022
2790813
add functionality to display movies from list of movies
zhadier Feb 1, 2022
b4c064b
add basic styling to home page
zhadier Feb 1, 2022
86fe7be
add getList functionality
zhadier Feb 1, 2022
9b04e21
refactor functions
zhadier Feb 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
45 changes: 22 additions & 23 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/0a86823ed7.js" crossorigin="anonymous"></script>
<title>JS Capstone</title>
</head>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS Capstone</title>
</head>

<body>
<header>
<a href="#" class="header-brand">JS Capstone</a>
<nav class="header-nav">
<ul>
<li><a href="#movie-section" class="header-links">Movies</a></li>
<li><a href="" class="header-links"></a></li>
</ul>
</nav>
</header>
<section id="movie-section"></section>
<footer>
<p class="copy">&copy; Copyright 2021, Gaby, Zeeshan</p>
</footer>
</body>

</html>
<body>
<header>
<a href="#" class="header-brand">JS Capstone</a>
<nav class="header-nav">
<ul>
<li><a href="#movie-section" class="header-links">Movies</a></li>
<li><a href="" class="header-links"></a></li>
</ul>
</nav>
</header>
<section id="movie-section"></section>
<footer>
<p class="copy">&copy; Copyright 2021, Gaby, Zeeshan</p>
</footer>
</body>
</html>
8 changes: 8 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,9 @@
import './scss/style.scss';
import displayMovies from './modules/displayMovies';
import getMovieData from './modules/consumeTVMazeAPI';

const query = 'action';

getMovieData(0, query).then((movieList) => {
displayMovies(movieList);
});
24 changes: 24 additions & 0 deletions src/modules/consumeTVMazeAPI.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
const baseURL = ' https://api.tvmaze.com';

const getMovieData = async (index, query) => {
const connect = await fetch(`${baseURL}/shows?q=${query}`);
const response = await connect.json().then((dataList) => {
const shortList = dataList.slice(index, index + 50);
shortList.map((item) => {
const container = {
id: item.id,
name: item.name,
genres: item.genres,
image: item.image,
end: item.ended,
rating: item.rating,
summary: item.summary,
};
return container;
});
return shortList;
});
return response;
};

export { getMovieData as default };
26 changes: 26 additions & 0 deletions src/modules/displayMovies.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
const displayMovies = async (movieList) => {
const movieSection = document.querySelector('#movie-section');
movieSection.innerHTML = '';
movieList.forEach((item) => {
const mainDiv = document.createElement('div');
mainDiv.className = 'movie-wrapper';
const details = document.createElement('div');
details.className = 'movie-wrapper__title';
const img = document.createElement('img');
img.className = 'movie-wrapper__img';
img.src = item.image.medium;
const name = document.createElement('h3');
name.innerHTML = `${item.name}`;
const like = document.createElement('i');
like.className = 'far fa-heart';
const commentButton = document.createElement('button');
commentButton.type = 'button';
commentButton.innerHTML = 'Comments';
commentButton.className = 'movie-wrapper__comment-button';
details.append(name, like);
mainDiv.append(img, details, commentButton);
movieSection.appendChild(mainDiv);
});
};

export { displayMovies as default };
34 changes: 34 additions & 0 deletions src/scss/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,37 @@ header {
}
}
}

// ### Movie Section ###

#movie-section {
@include flex-row;

flex-wrap: wrap;
width: 90%;
margin: auto;
gap: 30px 3%;
justify-content: center;
align-items: flex-end;

.movie-wrapper {
@include flex-colum;

align-items: center;
gap: 5px;

.movie-wrapper__title {
@include flex-row;

justify-content: space-between;
align-items: center;
gap: 5px;
width: 210px;
height: 36px;
}

.movie-wrapper__comment-button {
width: 210px;
}
}
}