generated from JohnFTitor/webpackTemplate
-
Notifications
You must be signed in to change notification settings - Fork 0
/
popup.js
104 lines (101 loc) · 4.18 KB
/
popup.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import XButton from '../../assets/icons/close.svg';
import { getPokemonComments, commentCounter, addPokemonComments } from './comments.js';
const getPokemonInfo = async (id) => {
const getInfo = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}/`);
const json = await getInfo.json();
return json;
};
const updateComments = async (pokemonId) => {
const json = await getPokemonComments(pokemonId);
document.querySelector('.popup-comments > ul').innerHTML = '';
if (json.length !== undefined) {
json.forEach((user) => {
document.querySelector('.popup-comments > h3').innerText = `Comments (${commentCounter(json)})`;
const li = document.createElement('li');
li.innerText = `${user.creation_date}. ${user.username}: ${user.comment}`;
document.querySelector('.popup-comments > ul').appendChild(li);
});
} else {
document.querySelector('.popup-comments > h3').innerText = `Comments (${commentCounter(json)})`;
}
};
export default () => {
const buttons = [...document.querySelectorAll('.comments')];
const close = document.querySelector('.popup-close');
const xImg = document.createElement('img');
const form = document.querySelector('form');
let pokemonId = '';
close.innerHTML = '';
xImg.src = XButton;
close.appendChild(xImg);
buttons.forEach((button) => {
button.addEventListener('click', async (event) => {
const { id } = event.target;
pokemonId = event.target.parentElement.id;
getPokemonInfo(id).then((json) => {
const h2 = document.querySelector('.popup > h2');
const pBaseExperience = document.querySelector('.base-experience');
const pAbilities = document.querySelector('.abilities');
const pHeight = document.querySelector('.height');
const pWeight = document.querySelector('.weight');
const pMoves = document.querySelector('.moves');
const pokemonImgContainer = document.querySelector('.popup-img');
const pokemonImg = document.createElement('img');
const {
name,
abilities,
height,
weight,
moves,
} = json;
const baseExperience = json.base_experience;
let stringWithabilities = '';
let stringWithMoves = '';
pokemonImg.src = json.sprites.other.dream_world.front_default;
pokemonImgContainer.appendChild(pokemonImg);
abilities.forEach((obj, index) => {
if (index === abilities.length - 1) {
stringWithabilities += obj.ability.name;
} else {
stringWithabilities += `${obj.ability.name}, `;
}
});
moves.forEach((obj, index) => {
if (index > 20) return;
if (index === 20) {
stringWithMoves += obj.move.name;
} else {
stringWithMoves += `${obj.move.name}, `;
}
});
h2.innerText = `${name} has:`;
pBaseExperience.innerHTML = `<strong>Base Experience:</strong> ${baseExperience}`;
pAbilities.innerHTML = `<strong>Abilities:</strong> ${stringWithabilities}`;
pHeight.innerHTML = `<strong>Height:</strong> ${height}`;
pWeight.innerHTML = `<strong>Weight:</strong> ${weight}`;
pMoves.innerHTML = `<strong>Some moves are:</strong> ${stringWithMoves}`;
close.addEventListener('click', () => {
document.querySelector('.popup').classList.remove('show');
pokemonImgContainer.innerHTML = '';
document.querySelector('.popup-comments > h3').innerText = '';
document.querySelector('.popup-comments > ul').innerHTML = '';
});
});
await updateComments(pokemonId);
document.querySelector('.popup').classList.add('show');
});
});
form.addEventListener('submit', async (event) => {
const username = document.getElementById('username');
const comment = document.getElementById('comment');
const modalContainer = document.querySelector('.modal-container');
event.preventDefault();
await addPokemonComments(pokemonId, username.value, comment.value);
await updateComments(pokemonId);
form.reset();
modalContainer.style.display = 'flex';
setTimeout(() => {
modalContainer.style.display = 'none';
}, 2000);
});
};