Skip to content

Instantly share code, notes, and snippets.

@erikfig
Created Oct 29, 2020
Embed
What would you like to do?
import api from "./api";
import MovieCover, {buildEvents} from './components/movieCover';
import "./styles.css";
class App {
constructor() {
this.appElement = document.getElementById("app");
this.render()
.then((res) => this.appElement.innerHTML = res)
.then(() => {
buildEvents()
});
}
async render() {
const getListMovies = async () => {
const key = 'api_key=bebe980497ad33ca4d679dc13577d180&language=en-US&page=1'
const response = await api.get(`movie/popular?${key}`);
const {data} = response;
console.log(data);
return data;
}
const res = await getListMovies();
const results = res.results;
return `
<ul>
<li>${MovieCover({data: results[0]})}</li>
<li>${MovieCover({data: results[1]})}</li>
<li>${MovieCover({data: results[2]})}</li>
<li>${MovieCover({data: results[3]})}</li>
</ul>
`;
}
}
const app = new App();
const $ = (selector, callback) => {
const list = document.querySelectorAll(selector);
Array.prototype.forEach.call(list, callback);
}
const MovieCover = ({data}) => {
return (
`
<div>
<div class="heartIcon">
<a href="" data-id="${data.id}" data-qualquercoisa="Erik|Elaine|Radisol">heart</a>
</div>
<div class="cover">
<a href=""><img src="https://image.tmdb.org/t/p/w780${data.poster_path}" /></a>
</div>
</div>
`
);
}
const events = [
() => {
$('.heartIcon a', (item) => {
item.addEventListener('click', (e) => {
e.preventDefault();
console.log(e.target.dataset);
});
})
}
];
export const buildEvents = () => {
events.forEach((event) => event());
}
export default MovieCover;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment