How to create div cards in html dynamically using javascript & jquery?

I created this card for design purpose but i want to create html card dynamically using JavaScript or jQuery, means if I pass 5 value in a loop then 5 cards create with same design. How can I do this?

<div class="scrolling-wrapper">
  <div class="card">
    <img id="card-shopping-cart-icon" src="images/cart.png" alt="">
    <img id="card-wishlist-icon" src="images/heart.png" alt="">
    <img id="card-image" src="images/motorola_one.jpg" alt="Motorola" class="contain">

    <div class="card-text-body">
      <p class="card-clock-deals-title">Motorola One Power</p>
      <p class="card-clock-deals-detail">RAM 4/6GB ROM 64GB</p>
      <p class="card-clock-deals-discounted-price">2000</p>
      <p>
        <table class="card-clock-deals-timer">
          <tr>
            <td id="hours">12</td>
            <td>:</td>
            <td id="minutes">00</td>
          </tr>

        </table>
      </p>
      <p class="card-clock-deals-original-price">3000</p>
      <p class="card-clock-deals-timer-text">Hrs Left</p>
      <p class="card-clock-deals-like-image"><img src="images/heart.png" alt="">(381)</p>
    </div </div>

Answer

So as I asked you, you’re using a database to store the data from the cards right? So all you need is create the connection to the database, then fetch the result with a loop to display one by one the cards.

        // Here you need to create your connection to the database with your values
        <?php
            include 'connection.php';
        //Here write your SQL query to get the data from your cards database
            $sql = "SELECT * FROM cards";
            $result = $conn->query($sql);
        ?>

        // Then we start with the html code to get the data and show the cards
        <!doctype html>
        <html>
          <body>
           <h1 align="center">CARDS</h1>
        <?php
        //Fetch Data form database
        if($result->num_rows > 0){
         while($row = $result->fetch_assoc()){
         ?>
            <div class="scrolling-wrapper">
            <div class="card">

            <img id="card-shopping-cart-icon" src="images/cart.png" alt="">
            <img id="card-wishlist-icon" src="images/heart.png" alt="">
            <img id="card-image" src="images/<?php echo $row['RowNameYouWannaGet']; ?>" alt="Motorola" class="contain">

        <div class="card-text-body">
              <p class="card-clock-deals-title"><?php echo $row['RowNameYouWannaGet']; ?></p>
              <p class="card-clock-deals-detail"><?php echo $row['RowNameYouWannaGet']; ?></p>
              <p class="card-clock-deals-discounted-price"><?php echo $row['RowNameYouWannaGet']; ?></p>
              <p>
                <table class="card-clock-deals-timer">
                  <tr>
                    <td id="hours"><?php echo $row['RowNameYouWannaGet']; ?></td>
                    <td>:</td>
                    <td id="minutes"><?php echo $row['RowNameYouWannaGet']; ?></td>
                  </tr>

                </table>
              </p>
              <p class="card-clock-deals-original-price"><?php echo $row['RowNameYouWannaGet']; ?></p>
              <p class="card-clock-deals-timer-text"><?php echo $row['RowNameYouWannaGet']; ?></p>
              <p class="card-clock-deals-like-image"><img src="images/heart.png" alt=""><?php echo $row['RowNameYouWannaGet']; ?></p>
          </div>
       </div>
         <?php
           }
           }
           else
            { echo "No data found" } ?>
          </body>
        </html>

Hope it helps, you can also find info on Google searching–> Dynamic Tables PHP, MySQL

Advertisement

Answer