Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Apply this popup feature for infinite users

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 299
    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>

     

 0 Answer(s)

Sign In
                           OR                           
                           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: