Scrimba - 'Oldgram' clone of instagram solo project challenge

This is my solo project challenge from Scrimba to build a 'Oldgram' clone of instagram using HTML, CSS & JavaScript

Table of contents

• Overview
  • The challenge
  • Video
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

Users should be able to:

• Click the hear icon button and increase the like total number

Video

Oldgram.1.mp4

Links

• My solution
• Live version

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS variables
• Grid
• Flexbox
• Mobile first workflow
• JavaScript

What I learned

Building this 'Oldgram' clone of instagram project taught me important skills in working with manipulating the DOM and array objects. Learned how to render posts on the page using JavaScript using for loop.

  <h1>Some HTML I am proud of</h1>
  
  <header>
            <div class="main-header">
                <a href="#" class="oldgram-logo-link"><img src="/assets/img/logo/logo.png" class="oldgram-logo" alt="Oldgram logo"></a>
                <a href="#" class="header-user-avatar-link"><img src="/assets/img/user-avatar/user-avatar.png" class="header-user-avatar" alt="User avatar picture"></a>
            </div>
    </header>

  .proud-of-this-css {

    .comment-section {
      width: 100%;
      overflow: hidden;
      padding: 0 0 1rem 0;
  }
  
    .comment-username {
      text-decoration: none;
      color: var(--clr-neutral-900);
      float: left;
      margin-right: 5px;
  }
}

const proudOfThisFunc = () => {
  
  const heartIcons = document.querySelectorAll('.post-icon-button.icon-heart');

heartIcons.forEach(heartIcon => {
    
    // gets the index of the post object in the array using the "data-index" attribute
    const index = heartIcon.getAttribute('data-index');

    heartIcon.addEventListener('click', () => {

    // increments the "likes" property of the post object at the specified index
    posts[index].likes++;
    
    // updates the text content of the "post-likes" element at the specified index
    document.querySelector(`.post-likes[data-index="${index}"]`).textContent = posts[index].likes;
  });

});
}

Author