Project OOP JavaScript #16
Assignees
Labels
Comments
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>JavaScript</title>
</head>
<body>
<section>
<div>
<img src="" alt="" id="post-1" height="200" />
</div>
</section>
<section>
<div>
<img id="post-1-heart" src="" alt="Like" height="10" />
<span id="post-1-likes"></span>
<span id="post-1-likes-text"></span>
</div>
</section>
<script src="index.js"></script>
</body>
</html>class InstagramPost {
constructor(imageUrl) {
this.imageUrl = imageUrl;
this.likes = [];
}
likedByUser(id) {
this.likes.push(id);
}
getLikes() {
return this.likes;
}
render() {
document.getElementById("post-1").setAttribute("src", this.imageUrl);
}
renderLikes() {
document.getElementById("post-1-likes").innerHTML =
this.likes.length > 0 ? this.likes.length : 0;
document.getElementById("post-1-likes-text").innerHTML =
this.likes.length > 0 ? "likes" : "like";
document
.getElementById("post-1-heart")
.setAttribute(
"src",
this.likes.length > 0
? "./images/red-heart.png"
: "./images/black-heart.png"
);
}
}
const instagramPost = new InstagramPost("./images/plus-size-woman.jpg");
instagramPost.render();
instagramPost.renderLikes();
let postImage = document.getElementById("post-1")
postImage.addEventListener('dblclick', () => {
instagramPost.likedByUser(1);
instagramPost.renderLikes();
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
No description provided.
The text was updated successfully, but these errors were encountered: