Annie's blog

Build own oldgram in Javascript

Anita mishra's photo
Anita mishra
·

6 min read

Build own oldgram in Javascript

Table of contents

  • This code simulates a social media feed where users can like posts by clicking on a heart icon or by double-clicking on the post image.

  • The like counts are stored in variables and updated dynamically when users interact with the posts.

  • This is the link of our Build own oldgram :

    https://anitamishra-social-app.netlify.app/

  • Source code is given below

code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Solo Project - Oldgram</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <header>
        <div class="headline">
            <img src="logo.png" alt="" class="logo-oldgram">
            <img src="profile.jpg" alt="logo picture" class="small-imgprofile">
        </div>
    </header>
    <section class="firstpost-content">
        <div class="user-info">
            <img src="profile.jpg" alt="avatar of vangogh" class="user-info-avatar">
            <div class="user-info-text">
                <p class="user-info-name">Anita H Mishra</p>
                <p class="user-info-location">Mumbai, India</p>
            </div>
        </div>
        <div class="user-post">
            <img src="mumbai.webp" alt="post of Mumbai visit places" class="post" id="firstPostel">
        </div>
        <div class="post-description">
                <div class="icons">
                    <img src="icon-heart.png" alt="" class="heart-icon" id="firstpostLikesel">
                    <img src="icon-comment.png" alt="" class="comment-icon">
                    <img src="icon-dm.png" alt="" class="dm-icon">
                </div>
            <p class="count-like"><span id="firstpostcountsel"> 852 </span> likes</p>
            <p class="comment firstpost-comment">
                <span class="username">annie1111</span>  
                <span class="comment-text">  The Gateway of India is an arch-monument completed in 1924 on the waterfront of Mumbai (Bombay), India.</span>
            </p>
        </div>
    </div>
</section>
<section class="secondpost-content">
            <div class="user-info">
                <img src="avatar-vangogh.jpg" alt="avatar of vangogh" class="user-info-avatar">
                <div class="user-info-text">
                    <p class="user-info-name">Vincet van Gogh</p>
                    <p class="user-info-location">Zundert, Netherlands</p>
                </div>
            </div>
            <div class="user-post">
                <img src="post-vangogh.jpg" alt="post of vangogh" class="post" id="secondPostel">
            </div>
            <div class="post-description">
                    <div class="icons">
                        <img src="icon-heart.png" alt="" class="heart-icon" id="secondpostLikesel">
                        <img src="icon-comment.png" alt="" class="comment-icon">
                        <img src="icon-dm.png" alt="" class="dm-icon">
                    </div>
                <p class="count-like"><span id="secondpostcountsel">21 </span> likes</p>
                <p class="comment firstpost-comment">
                    <span class="username">vincey1853</span>  
                    <span class="comment-text">  just took a few mushrooms lol</span>
                </p>
            </div>
        </div>
    </section>
    <section class="thirdpost-content">
            <div class="user-info">
                <img src="avatar-courbet.jpg" alt="avatar of courbet" class="user-info-avatar">
                <div class="user-info-text">
                    <p class="user-info-name">Gustave Courbet</p>
                    <p class="user-info-location">Ornans, France</p>
                </div>
            </div>
            <div class="user-post">
                <img src="post-courbet.jpg" alt="post of courbet" class="post" id="thirdPostel">
            </div>
            <div class="post-description">
                    <div class="icons">
                        <img src="icon-heart.png" alt="" class="heart-icon" id="thirdpostLikesel">
                        <img src="icon-comment.png" alt="" class="comment-icon">
                        <img src="icon-dm.png" alt="" class="dm-icon">
                    </div>
                <p class="count-like"><span id="thirdpostcountsel">4 </span> likes</p>
                <p class="comment firstpost-comment">
                    <span class="username">gus1819</span>  
                    <span class="comment-text">  i'm feelin a bit stressed tbh</span>
                </p>
            </div>
        </div>
    </section>
    <section class="fourthpost-content">
            <div class="user-info">
                <img src="avatar-ducreux.jpg" alt="avatar of ducreux" class="user-info-avatar">
                <div class="user-info-text">
                    <p class="user-info-name">Joseph Ducreux</p>
                    <p class="user-info-location">Paris, France</p>
                </div>
            </div>
            <div class="user-post">
                <img src="post-ducreux.jpg" alt="post of ducreux" class="post" id="fourthPostel">
            </div>
            <div class="post-description">
                    <div class="icons">
                        <img src="icon-heart.png" alt="" class="heart-icon" id="fourthpostLikesel">
                        <img src="icon-comment.png" alt="" class="comment-icon">
                        <img src="icon-dm.png" alt="" class="dm-icon">
                    </div>
                <p class="count-like"><span id="fourthpostcountsel">152 </span> likes</p>
                <p class="comment firstpost-comment">
                    <span class="username">jd1735</span>  
                    <span class="comment-text"> gm friends! which coin are YOU stacking up today?? post below and WAGMI!</span>
                </p>
            </div>
        </div>
    </section>

    <script src="index.js"></script>
</body>
</html>

css

html,body{
    margin: 0;
    padding: 0;
    font-family: 'Roboto Condensed', sans-serif;
    width: 375px;
    margin: 0 auto;
    background-color: #F5F5F5;;
}

header,
section{
    background-color: #f8edeb;
}

header{
    border-bottom: 2px solid #c4c4c4;
}

section{
    margin-bottom: 35px;
    background-color: #f8edeb;
}

.logo-oldgram{
    width: 127px;
    margin: 10px;
}
.small-imgprofile{
    width: 30px;
    border-radius: 100%;
    margin: 10px;
}

.headline{
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    height: 50px;
    justify-content: space-between;
    padding: 10px 0;
    background-color: rgb(251, 254, 252);
}

.user-info{
    display: flex;
    padding-top: 15px;
    /* margin: 10px; */
    margin-top: 0;
    align-items: center;
    background-color: #f8edeb;
    margin-left: 0;
}

.user-info-avatar{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin: 0 8px 8px;

}

.user-info-name{
    font-size: 15px;
    margin: 0;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: bold;
}

.user-info-location{
    font-size: 12px;
    margin: 0;
    /* padding-left: 14px; */
    font-family: 'Roboto Condensed', sans-serif;
}

.post{
    width: 375px;
    height: 375px;
    margin-bottom: 0;
}

.post-description{
    margin-left: 10px;
}

.icons{
    margin-top: 15px;
    margin-bottom: 0;
}

.heart-icon{
    width: 30.3px;
    height: 30.13px;
    cursor: pointer;

}

.comment-icon{
    width: 30.65px;
    height: 30.65px;
    margin: 0 10px;
}

.dm-icon{
    width: 27.38px;
    height: 28.65px;

}

.heart-icon:hover,
.comment-icon:hover,
.dm-icon:hover{
    opacity: 0.8;
} 

.heart-icon:hover,
.heart-icon:focus{
    z-index: 1;

}
.count-like{
    font-size: 13px;
    margin-top: 12px;
    font-family: 'Roboto Condensed', sans-serif;
}

.comment{
    font-size: 13px;
    padding-bottom: 15px;
}

.username{
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: bolder;
    font-size: 15px;
}

.comment-text{
    /* font-weigh00; */
}

JavaScript



const firstPostEl = document.getElementById("firstPostel")
const firstheartLikesEl = document.getElementById("firstpostLikesel")
const firstlikesCountsEl = document.getElementById("firstpostcountsel")

const secondPostEl = document.getElementById("secondPostel")
const secondheartLikesEl = document.getElementById("secondpostLikesel")
const secondlikesCountsEl = document.getElementById("secondpostcountsel")

const thirdPostEl = document.getElementById("thirdPostel")
const thirdheartLikesEl = document.getElementById("thirdpostLikesel")
const thirdlikesCountsEl = document.getElementById("thirdpostcountsel")

const fourthPostEl = document.getElementById("fourthPostel")
const fourthheartLikesEl = document.getElementById("fourthpostLikesel")
const fourthlikesCountsEl = document.getElementById("fourthpostcountsel")

let firstPostlikes = 852
let secondPostlikes = 21
let thirdPostlikes = 4
let fourthPostlikes = 152


firstPostEl.addEventListener("dblclick", function(){
    firstPostlikes += 1
    firstlikesCountsEl.textContent = firstPostlikes

})

firstheartLikesEl.addEventListener("click", function(){
    firstPostlikes += 1
    firstlikesCountsEl.textContent = firstPostlikes
})

secondPostEl.addEventListener("dblclick", function(){
    secondPostlikes += 1
    secondlikesCountsEl.textContent = secondPostlikes
})

secondheartLikesEl.addEventListener("click", function(){
    secondPostlikes += 1
    secondlikesCountsEl.textContent = secondPostlikes
})

thirdPostEl.addEventListener("dblclick", function(){
    thirdPostlikes += 1
    thirdlikesCountsEl.textContent = thirdPostlikes
})

thirdheartLikesEl.addEventListener("click", function(){
    thirdPostlikes += 1
    thirdlikesCountsEl.textContent = thirdPostlikes
})

fourthPostEl.addEventListener("dblclick", function(){
    fourthPostlikes += 1
    fourthlikesCountsEl.textContent = fourthPostlikes
})

fourthheartLikesEl.addEventListener("click", function(){
    fourthPostlikes += 1
    fourthlikesCountsEl.textContent = fourthPostlikes
})

Certainly! Let's break down the HTML and JavaScript code :

Step - 1 (HTML Structure: ) :

  1. Document Structure:

    • The HTML document starts with the usual doctype declaration (<!DOCTYPE html>).

    • The <html> element has a lang attribute set to "en" for English.

  2. Head Section:

    • The <head> section includes meta tags for character set and viewport settings.

    • It includes a title for the page, a link to Google Fonts, and a link to an external CSS file (index.css).

  3. Body Section:

    • The <body> section contains the main content of the page.

    • There is a <header> element that contains a logo and a small profile image.

    • The main content is organized into multiple <section> elements, each representing a post.

  4. Post Sections:

    • Each <section> contains:

      • A user info section with an avatar, user name, and location.

      • A user post section with an image.

      • A post description section with icons (heart, comment, and direct message), like count, and comments.

  5. JavaScript File:

    • The script tag at the end of the body links to an external JavaScript file (index.js).

Step - 2 (CSS Styles: ) :

  1. General Styling:

    • The CSS styles include general styling for the body, fonts, and some margins.

    • Styling for the header and sections with background colors.

  2. User Info Styling:

    • Styling for user information elements such as avatars, user names, and locations.

  3. Post Styling:

    • Styling for post sections including post images, icons (heart, comment, DM), and like counts.

  4. Icon Hover Effects:

    • Hover effects for icons to change opacity.

Step - 3 (JavaScript Code: ) :

  1. Element Selection:

    • Selects various HTML elements using getElementById.

  2. Like Count Variables:

    • Defines variables (firstPostlikes, secondPostlikes, etc.) to store the initial like counts for each post.

  3. Event Listeners:

    • Adds event listeners to each post's image (dblclick for double-click and click for single click) and the heart icon.

    • Increments the like count for the respective post when an event occurs and updates the displayed like count on the page.

Explanation of JavaScript Event Listeners:

  • DoubleClick Event (dblclick):

    • When a user double-clicks on a post image, the associated like count is incremented (+= 1), and the displayed like count is updated.

  • Click Event (click):

    • When a user clicks on the heart icon, the associated like count is incremented (+= 1), and the displayed like count is updated.

Conclusion :

In conclusion, the provided HTML, CSS, and JavaScript code exemplifies the implementation of a social media feed-like webpage. The HTML structure defines sections for multiple user posts, each comprising user information, a post image, and interaction elements such as like icons. CSS styles enhance the visual appeal, providing a cohesive and responsive layout.

The accompanying JavaScript code adds interactivity to the page, incorporating event listeners to handle double-clicks on post images and single clicks on heart icons. These interactions dynamically update and display the like counts for each post, simulating a social media-like experience.

Overall, this code serves as a foundational example of creating a dynamic webpage with interactive elements using HTML, CSS, and JavaScript. The project emphasizes the importance of incorporating user engagement features, making it relevant for learning web development concepts and enhancing the user experience on a website.

GitHub : https://github.com/ani1ta

Twitter : https://twitter.com/Anitami62013623

LinkedIn : https://www.linkedin.com/in/anita-mishra-812092193/

JavaScriptHTML5CSSCSS3React