Skip to content

Commit ab1447c

Browse files
Sparktan24Sparktan24
committed
Fixed merging conflicts
2 parents e53e104 + e87edf9 commit ab1447c

File tree

9 files changed

+201
-105
lines changed

9 files changed

+201
-105
lines changed

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,5 +46,8 @@
4646
},
4747
"dependencies": {
4848
"lodash": "^4.17.21"
49-
}
49+
},
50+
"jest":{
51+
"testEnvironment": "jsdom"
52+
}
5053
}

‎src/index.html‎

Lines changed: 53 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,60 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<script
8-
src="https://kit.fontawesome.com/db139aff16.js"
9-
crossorigin="anonymous"
10-
></script>
11-
<title>Document</title>
12-
<script
13-
src="https://kit.fontawesome.com/db139aff16.js"
14-
crossorigin="anonymous"
15-
></script>
16-
</head>
17-
<body>
18-
<header>
19-
<nav>
20-
<ul>
21-
<li><i class="fa-solid fa-circle-play"></i></li>
22-
<li>Top binge-worthy shows</li>
23-
<li>Best of 2022</li>
24-
<li>Mark your Calender</li>
25-
</ul>
26-
</nav>
27-
</header>
28-
<main class="container"></main>
293

30-
<div class="comment_pop-up_container hidden">
31-
<div class="comment_main-content">
32-
<section class="description_content">
33-
<img id="comment-image" src="" alt="" />
34-
<button id="close-btn">⨯</button>
35-
<h2 class="description_content__movie_title"></h2>
36-
<div class="rating-genres"></div>
37-
<h3>Description:</h3>
38-
<p id="description"></p>
39-
</section>
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<script src="https://kit.fontawesome.com/db139aff16.js" crossorigin="anonymous"></script>
9+
<title>Tv Shows</title>
10+
</head>
4011

41-
<section class="comments-section">
42-
<h3 id="comments-header">Comments (N)</h3>
43-
<div class="comments-container"></div>
44-
<div class="add-comments-container">
45-
<h3>Add a comment</h3>
46-
<form id="form" action="" method="post">
47-
<input
48-
id="comment-user-name-input"
49-
type="text"
50-
placeholder="Your name"
51-
/>
52-
<textarea
53-
name="comment"
54-
id="textArea-comment"
55-
cols="30"
56-
rows="3"
57-
placeholder="Your insights"
58-
></textarea>
59-
<button id="btn-input-comment">Comment</button>
60-
</form>
61-
</div>
62-
</section>
63-
</div>
64-
</div>
65-
</body>
12+
<body>
13+
<header>
14+
<nav>
15+
<ul>
16+
<li><i class="fa-solid fa-circle-play"></i></li>
17+
<a href="index.html">
18+
<li class="count-shows"></li>
19+
</a>
20+
<li>Best of 2022</li>
21+
<li>Mark your Calender</li>
22+
</ul>
23+
</nav>
24+
</header>
25+
<main class="container"></main>
26+
<div class="comment_pop-up_container hidden">
27+
<div class="comment_main-content">
28+
<section class="description_content">
29+
<img id="comment-image" src="" alt="" />
30+
<button id="close-btn">⨯</button>
31+
<h2 class="description_content__movie_title"></h2>
32+
<div class="rating-genres"></div>
33+
<h3>Description:</h3>
34+
<p id="description"></p>
35+
</section>
6636

67-
<footer>
68-
<div class="footer_content">
69-
<p>Created by Microverse under CC license</p>
37+
<section class="comments-section">
38+
<h3>Comments (N)</h3>
39+
<div class="comments-container"></div>
40+
<div class="add-comments-container">
41+
<h3>Add a comment</h3>
42+
<form id="form" action="" method="post">
43+
<input id="comment-user-name-input" type="text" placeholder="Your name" />
44+
<textarea name="comment" id="textArea-comment" cols="30" rows="3" placeholder="Your insights"></textarea>
45+
<button id="btn-input-comment">Comment</button>
46+
</form>
47+
</div>
48+
</section>
7049
</div>
71-
</footer>
50+
</div>
51+
</div>
52+
</body>
53+
54+
<footer>
55+
<div class="footer_content">
56+
<p class="footer-description">Created by Microverse under CC license</p>
57+
</div>
58+
</footer>
59+
7260
</html>

‎src/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import './style.css';
2-
import './modules/homepage.js';
2+
import displayShows from './modules/homepage';
33
import './modules/comment_handler.js';
44
import './modules/comments-button_handler.js';
5+
6+
displayShows();

‎src/modules/api.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
// TVMaze API
22
const showData = async (query) => {
3-
const url = `https://api.tvmaze.com/shows/${query}`;
3+
// const url = `https://api.tvmaze.com/shows/${query}`;
4+
const url = `https://api.tvmaze.com/singlesearch/shows?q=${query}`;
5+
const response = await fetch(url);
6+
const data = await response.json();
7+
return data;
8+
};
9+
10+
const getLikes = async () => {
11+
const url = 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/OX5sTwXK5eU2vy1wOpri/likes';
412
const response = await fetch(url);
513
const data = await response.json();
614
return data;
@@ -27,4 +35,6 @@ const postComment = async (showId, userName, comments) => {
2735
return status;
2836
};
2937

30-
export { showData, showDataInvolvement, postComment };
38+
export {
39+
showData, showDataInvolvement, postComment, getLikes,
40+
};

‎src/modules/comment_handler.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import { showData, showDataInvolvement, postComment } from './api.js';
22
// import showDataInvolvement from './comments-pop-up-comments-section_handler.js';
33

4+
const showDataPopUp = async (query) => {
5+
const url = `https://api.tvmaze.com/singlesearch/shows/${query}`;
6+
const response = await fetch(url);
7+
const data = await response.json();
8+
return data;
9+
};
10+
411
const getDescription = async (id) => {
512
const data = await showData(id);
613

‎src/modules/comments-button_handler.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ window.addEventListener('load', () => { // Waits until page is loaded completel
77
// const id = document.querySelector('.description_content__movie_title');
88
btnComments.forEach((element) => {
99
element.addEventListener('click', () => {
10-
getDescription(element.parentElement.id);
10+
console.log('enter');
11+
//getDescription(element.parentElement.id);
12+
getDescription(element.previousElementSibling.firstElementChild.textContent);
1113
// getComments(element.previousElementSibling.firstElementChild.textContent);
1214
getComments(element.parentElement.id);
1315
// getComments(id.textContent);

‎src/modules/count.test.js‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,15 @@
11
/** @jest-environment jsdom */
22

3-
import { getComments } from './comment_handler.js';
4-
53
describe('Homepage items counter Tests', () => {
64
it('Should test if showsCount is adding all shows to the home page', () => {
7-
const htmlEl = `
8-
<div class="comments-container">
9-
<div id="posted-comments">
10-
<div>2023-02-09 Jon: Amazing.</div>
11-
<div>2023-02-09 Jon: Amazing.</div>
12-
<div>2023-02-09 Neto: Cool.</div>`;
13-
const count = document.querySelector('#posted-comments').children.length;
14-
const commentHeader = document.querySelector('#comments-header');
15-
commentHeader.innerHTML = `Comments(${count})`;
165
let counter = '';
6+
const showInfo = () => ['La Casa de Papel', '1899'];
177
const showsCount = () => {
18-
getComments(27436);
19-
counter = `(${getComments.length})`;
8+
const show = showInfo();
9+
counter = `Top binge-worthy shows (${show.length})`;
2010
return counter;
2111
};
2212
showsCount();
23-
expect(counter).toBe(2);
13+
expect(counter).toBe('Top binge-worthy shows (2)');
2414
});
2515
});

‎src/modules/homepage.js‎

Lines changed: 77 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,88 @@
1-
import { showData } from './api.js';
1+
import { showData, getLikes } from './api';
2+
// involvement API for POST
3+
const url = 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/OX5sTwXK5eU2vy1wOpri/likes';
24

3-
/* const shows = ['La Casa de Papel', '1899', 'Dark',
4-
'Stranger Things', 'Squid Game', 'Ginny & Georgia']; */
5-
// const shows =[327417, 384429, 334824, 305288, 383275, 393625] //Thetvdb ids for each show
5+
// const shows = [27436, 39749, 17861, 2993, 43687, 47549]; // TVmaze ids
6+
const tvShows = ['La Casa de Papel', '1899', 'Dark', 'Stranger Things', 'Squid Game', 'Ginny & Georgia'];
7+
8+
const show = [];
9+
10+
const showsCount = async () => {
11+
const shows = document.querySelectorAll('.article').length;
12+
const addCount = document.querySelector('.count-shows');
13+
addCount.innerHTML = `Top binge-worthy shows (${shows})`;
14+
};
15+
16+
export const showInfo = async () => {
17+
for (let i = 0; i < tvShows.length; i += 1) {
18+
/*eslint-disable */
19+
20+
//suppress all warnings between comments
21+
const data = await showData([tvShows[i]]);
22+
23+
/* eslint-enable */
24+
show.push(data);
25+
}
26+
return show;
27+
};
28+
29+
const currentLikes = async () => {
30+
const likes = await getLikes();
31+
const show = await showInfo();
32+
for (let i = 0; i < likes.length; i += 1) {
33+
for (let x = 0; x < show.length; x += 1) {
34+
if (Number(likes[i].item_id) === show[x].id) {
35+
show[x].likes = likes[i].likes;
36+
}
37+
}
38+
}
39+
return show;
40+
};
41+
42+
const addLike = async (likeBtn) => {
43+
await fetch(url, {
44+
method: 'POST',
45+
body: JSON.stringify({ item_id: likeBtn.id }),
46+
headers: {
47+
'Content-Type': 'application/json',
48+
},
49+
});
50+
const counter = document.getElementById(`${likeBtn.id}counter`);
51+
const likes = counter.innerHTML.split(' ');
52+
likes[0] = Number(likes[0]) + 1;
53+
counter.innerHTML = likes.join(' ');
54+
};
55+
56+
const likeBtn = () => {
57+
const btnLike = document.querySelectorAll('.like');
58+
btnLike.forEach((btn) => {
59+
btn.addEventListener('click', () => {
60+
addLike(btn);
61+
});
62+
});
63+
};
664

7-
const shows = [27436, 39749, 17861, 2993, 43687, 47549]; // TVmaze ids
865
const displayShows = async () => {
66+
const show = await currentLikes();
967
const container = document.querySelector('.container');
10-
shows.forEach(async (e) => {
11-
const show = await showData(e);
68+
container.innerHTML = '';
69+
for (let i = 0; i < show.length; i += 1) {
1270
container.innerHTML += `
13-
<article id='${show.id}'>
14-
<img src=${show.image.medium}>
15-
<div class="title">
16-
<h2>${show.name}</h2>
17-
<i class="fa-sharp fa-regular fa-heart"></i>
71+
<article class="article">
72+
<img src=${show[i].image.medium}>
73+
<div class="title" id="${show[i].id}">
74+
<h2>${show[i].name}</h2>
75+
<div class="likes">
76+
<i class="fa-sharp fa-regular fa-heart like" id="${show[i].id}"></i>
77+
<p id="${show[i].id}counter">${show[i].likes || 0} likes</p>
78+
</div>
1879
</div>
1980
<button class="comment">Comments</button>
2081
</article>
2182
`;
22-
});
83+
}
84+
likeBtn();
85+
showsCount();
2386
};
2487

25-
displayShows();
88+
export default displayShows;

0 commit comments

Comments
 (0)