Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Apply this popup feature for infinite users

    @mattdon
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 312
    Answer it

    I made a popup feature, which shows the phone number of a user. I was able to apply this feature to one instance. A single user.

    Normally, each user has a unique phone number.

    But then, I thought, what if I have lots of users as they come, to my site. How can I automatically apply the same popup feature without writing the same lines of code I wrote for the single user, over and over again?

    Please, help me out.

     

    <!DOCTYPE HTML>
<html>

<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" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=ABeeZee" />
    <style>
        /* ========== begin ========== DEFAULT STYLING ========== begin ========== */
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            background-color: #303030;
        }

        main{
            display: grid;
            grid-template: repeat(2, 1fr) / 1fr;
            width: 100%;
            height: 100vh;
        }
        /* ========== end ========== DEFAULT STYLING ========== end ========== */




        /* ========== begin ========== CSS FOR INFINITE USERS ========== begin ========== */
        div#main_inner,div#main{
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            width: 100%;
        }
        div.card{
            width: 170px;
            height: 160px;
            border: 1px solid #fff;
            margin: 5px;
        }
        div.card .image{
            position: relative;
            width: 100%;
            height: 70%;
            font-family: 'ABeeZee';
            text-align: center;
            color: #fff;
        }
        div.card .image div:first-child{
            font-size: 10px;
        }
        div.card .image .transform_scale_0{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            transform: scale(0.0);
            transition-property: transform;
            transition-duration: 500ms;
            transition-timing-function: linear;
            background-color: #ddd9;
            display: grid;
            place-items: center;
            font-size: 12px;
        }
        div.card .image .transform_scale_0.scale_to_1{
            transform: scale(1.0);
        }
        div.card .user_name{
            background-color: #aaa;
            width: 100%;
            height: 15%;
            text-transform: capitalize;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            font-weight: 600;
            font-family: 'ABeeZee';
        }
        div.card .num_btn{
            background-color: #888;
            width: 100%;
            height: 15%;
            text-transform: capitalize;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            font-weight: 600;
            font-family: 'ABeeZee';
        }
        div.card .num_btn:hover{
            cursor: pointer;
            color: #fff;
        }
        /* ========== end ========== CSS FOR INFINITE USERS ========== end ========== */
    </style>
    <title>distinct popup</title>
</head>

<body>
    <main>
        <!-- ========== begin ========== THIS IS A SINGLE CARD (IT WORKS JUST FINE) ========== begin ========== -->

        <div id="main">
            <div class="card">
                <div class="image">
                    <div>image here</div>
                    <!-- ========== begin ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== begin ========== -->
                    <div class="transform_scale_0">
                        <div class="inner">
                            <span>+27-405-662-159-2</span>
                        </div>
                    </div>
                    <!-- ========== end ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== end ========== -->
                </div>
                <div class="user_name">name: amy hills</div>
                <div class="num_btn">
                    <div class="whatismynumber">my mobile number?</div>
                </div>
            </div>
        </div>

        <!-- ========== end ========== THIS IS A SINGLE CARD (IT WORKS JUST FINE) ========== end ========== -->







        <!-- ========== begin ========== NOW WHAT IF I HAD AN INFINITE NUMBER OF USERS? ========== begin ========== -->

        <div id="main_inner">
            <div class="card">
                <div class="image">
                    <div>image here</div>
                    <!-- ========== begin ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== begin ========== -->
                    <div class="transform_scale_0">
                        <div class="inner">
                            <span>+27-465-062-119-2</span>
                        </div>
                    </div>
                    <!-- ========== end ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== end ========== -->
                </div>
                <div class="user_name">name: dean herald</div>
                <div class="num_btn">
                    <div class="whatismynumber">my mobile number?</div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <div>image here</div>
                    <!-- ========== begin ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== begin ========== -->
                    <div class="transform_scale_0">
                        <div class="inner">
                            <span>+27-640-662-009-4</span>
                        </div>
                    </div>
                    <!-- ========== end ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== end ========== -->
                </div>
                <div class="user_name">name: candace jones</div>
                <div class="num_btn">
                    <div class="whatismynumber">my mobile number?</div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <div>image here</div>
                    <!-- ========== begin ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== begin ========== -->
                    <div class="transform_scale_0">
                        <div class="inner">
                            <span>+22-405-600-109-7</span>
                        </div>
                    </div>
                    <!-- ========== end ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== end ========== -->
                </div>
                <div class="user_name">name: magaret sheridan</div>
                <div class="num_btn">
                    <div class="whatismynumber">my mobile number?</div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <div>image here</div>
                    <!-- ========== begin ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== begin ========== -->
                    <div class="transform_scale_0">
                        <div class="inner">
                            <span>+213-400-002-109-0</span>
                        </div>
                    </div>
                    <!-- ========== end ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== end ========== -->
                </div>
                <div class="user_name">name: clyde vickson</div>
                <div class="num_btn">
                    <div class="whatismynumber">my mobile number?</div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <div>image here</div>
                    <!-- ========== begin ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== begin ========== -->
                    <div class="transform_scale_0">
                        <div class="inner">
                            <span>+34-704-647-205-7</span>
                        </div>
                    </div>
                    <!-- ========== end ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== end ========== -->
                </div>
                <div class="user_name">name: raphael ortolya</div>
                <div class="num_btn">
                    <div class="whatismynumber">my mobile number?</div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <div>image here</div>
                    <!-- ========== begin ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== begin ========== -->
                    <div class="transform_scale_0">
                        <div class="inner">
                            <span>+44-425-266-951-0</span>
                        </div>
                    </div>
                    <!-- ========== end ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== end ========== -->
                </div>
                <div class="user_name">name: abigail weathers</div>
                <div class="num_btn">
                    <div class="whatismynumber">my mobile number?</div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <div>image here</div>
                    <!-- ========== begin ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== begin ========== -->
                    <div class="transform_scale_0">
                        <div class="inner">
                            <span>+42-909-612-151-1</span>
                        </div>
                    </div>
                    <!-- ========== end ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== end ========== -->
                </div>
                <div class="user_name">name: corletta espinoza</div>
                <div class="num_btn">
                    <div class="whatismynumber">my mobile number?</div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <div>image here</div>
                    <!-- ========== begin ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== begin ========== -->
                    <div class="transform_scale_0">
                        <div class="inner">
                            <span>+96-465-551-159-5</span>
                        </div>
                    </div>
                    <!-- ========== end ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== end ========== -->
                </div>
                <div class="user_name">name: neal francis</div>
                <div class="num_btn">
                    <div class="whatismynumber">my mobile number?</div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <div>image here</div>
                    <!-- ========== begin ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== begin ========== -->
                    <div class="transform_scale_0">
                        <div class="inner">
                            <span>+87-485-888-198-8</span>
                        </div>
                    </div>
                    <!-- ========== end ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== end ========== -->
                </div>
                <div class="user_name">name: gary grayson</div>
                <div class="num_btn">
                    <div class="whatismynumber">my mobile number?</div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <div>image here</div>
                    <!-- ========== begin ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== begin ========== -->
                    <div class="transform_scale_0">
                        <div class="inner">
                            <span>+211-437-662-164-3</span>
                        </div>
                    </div>
                    <!-- ========== end ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== end ========== -->
                </div>
                <div class="user_name">name: fiona satzberg</div>
                <div class="num_btn">
                    <div class="whatismynumber">my mobile number?</div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <div>image here</div>
                    <!-- ========== begin ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== begin ========== -->
                    <div class="transform_scale_0">
                        <div class="inner">
                            <span>+112-005-692-100-5</span>
                        </div>
                    </div>
                    <!-- ========== end ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== end ========== -->
                </div>
                <div class="user_name">name: sarah wells</div>
                <div class="num_btn">
                    <div class="whatismynumber">my mobile number?</div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <div>image here</div>
                    <!-- ========== begin ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== begin ========== -->
                    <div class="transform_scale_0">
                        <div class="inner">
                            <span>+36-053-621-159-3</span>
                        </div>
                    </div>
                    <!-- ========== end ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== end ========== -->
                </div>
                <div class="user_name">name: mikhail yomovich</div>
                <div class="num_btn">
                    <div class="whatismynumber">my mobile number?</div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <div>image here</div>
                    <!-- ========== begin ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== begin ========== -->
                    <div class="transform_scale_0">
                        <div class="inner">
                            <span>+49-478-020-019-0</span>
                        </div>
                    </div>
                    <!-- ========== end ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== end ========== -->
                </div>
                <div class="user_name">name: lawrence reggison</div>
                <div class="num_btn">
                    <div class="whatismynumber">my mobile number?</div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <div>image here</div>
                    <!-- ========== begin ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== begin ========== -->
                    <div class="transform_scale_0">
                        <div class="inner">
                            <span>+47-105-600-440-0</span>
                        </div>
                    </div>
                    <!-- ========== end ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== end ========== -->
                </div>
                <div class="user_name">name: benson spritzer</div>
                <div class="num_btn">
                    <div class="whatismynumber">my mobile number?</div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <div>image here</div>
                    <!-- ========== begin ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== begin ========== -->
                    <div class="transform_scale_0">
                        <div class="inner">
                            <span>+33-445-004-973-4</span>
                        </div>
                    </div>
                    <!-- ========== end ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== end ========== -->
                </div>
                <div class="user_name">name: samantha quinley</div>
                <div class="num_btn">
                    <div class="whatismynumber">my mobile number?</div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <div>image here</div>
                    <!-- ========== begin ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== begin ========== -->
                    <div class="transform_scale_0">
                        <div class="inner">
                            <span>+40-224-632-157-7</span>
                        </div>
                    </div>
                    <!-- ========== end ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== end ========== -->
                </div>
                <div class="user_name">name: veronica beele</div>
                <div class="num_btn">
                    <div class="whatismynumber">my mobile number?</div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <div>image here</div>
                    <!-- ========== begin ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== begin ========== -->
                    <div class="transform_scale_0">
                        <div class="inner">
                            <span>+204-590-261-185-1</span>
                        </div>
                    </div>
                    <!-- ========== end ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== end ========== -->
                </div>
                <div class="user_name">name: kendall lorent</div>
                <div class="num_btn">
                    <div class="whatismynumber">my mobile number?</div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <div>image here</div>
                    <!-- ========== begin ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== begin ========== -->
                    <div class="transform_scale_0">
                        <div class="inner">
                            <span>+20-789-638-183-0</span>
                        </div>
                    </div>
                    <!-- ========== end ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== end ========== -->
                </div>
                <div class="user_name">name: francesca swinton</div>
                <div class="num_btn">
                    <div class="whatismynumber">my mobile number?</div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <div>image here</div>
                    <!-- ========== begin ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== begin ========== -->
                    <div class="transform_scale_0">
                        <div class="inner">
                            <span>+77-255-623-122-2</span>
                        </div>
                    </div>
                    <!-- ========== end ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== end ========== -->
                </div>
                <div class="user_name">name: jane holden</div>
                <div class="num_btn">
                    <div class="whatismynumber">my mobile number?</div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <div>image here</div>
                    <!-- ========== begin ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== begin ========== -->
                    <div class="transform_scale_0">
                        <div class="inner">
                            <span>+39-000-662-779-8</span>
                        </div>
                    </div>
                    <!-- ========== end ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== end ========== -->
                </div>
                <div class="user_name">name: frank trenton</div>
                <div class="num_btn">
                    <div class="whatismynumber">my mobile number?</div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <div>image here</div>
                    <!-- ========== begin ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== begin ========== -->
                    <div class="transform_scale_0">
                        <div class="inner">
                            <span>+44-005-616-196-6</span>
                        </div>
                    </div>
                    <!-- ========== end ========== THIS IS THE POPUP HIDDEN BY DEFAULT ========== end ========== -->
                </div>
                <div class="user_name">name: william wallace</div>
                <div class="num_btn">
                    <div class="whatismynumber">my mobile number?</div>
                </div>
            </div>
        </div>

        <!-- ========== end ========== NOW WHAT IF I HAD AN INFINITE NUMBER OF USERS? ========== end ========== -->
    </main>

</body>

</html>
<script>
    /* ========== begin ========== SCRIPT FOR SINGLE USER ========== begin ========== */
    let tansform_scale_0 = document.querySelector('.transform_scale_0');
    let num_btn = document.querySelector('.num_btn');

    num_btn.addEventListener('click', ()=>{
        if (!tansform_scale_0.classList.contains('scale_to_1')) {
            tansform_scale_0.classList.add('scale_to_1');
        } else {
            tansform_scale_0.classList.remove('scale_to_1');
        }
    })
    /* ========== end ========== SCRIPT FOR SINGLE USER ========== end ========== */
</script>

     

    html CSS Javascript
    Answer it

 0 Answer(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: