Project OOP JavaScript - Githubissues

haydanu commented 4 years ago

<!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();
})

thatguyarsya commented 4 years ago

repo (attempted challenge through reference but the result was poopOOPeepee)

thomasfebrianseiei commented 4 years ago

https://github.com/thomasfebrianseiei/project-oop

just-jormungandr / projects

Project OOP JavaScript #16