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?
JavaScript
x
24
24
1
<div class="scrolling-wrapper">2
<div class="card">3
<img id="card-shopping-cart-icon" src="images/cart.png" alt="">4
<img id="card-wishlist-icon" src="images/heart.png" alt="">5
<img id="card-image" src="images/motorola_one.jpg" alt="Motorola" class="contain">6
7
<div class="card-text-body">8
<p class="card-clock-deals-title">Motorola One Power</p>9
<p class="card-clock-deals-detail">RAM 4/6GB ROM 64GB</p>10
<p class="card-clock-deals-discounted-price">2000</p>11
<p>12
<table class="card-clock-deals-timer">13
<tr>14
<td id="hours">12</td>15
<td>:</td>16
<td id="minutes">00</td>17
</tr>18
19
</table>20
</p>21
<p class="card-clock-deals-original-price">3000</p>22
<p class="card-clock-deals-timer-text">Hrs Left</p>23
<p class="card-clock-deals-like-image"><img src="images/heart.png" alt="">(381)</p>24
</div </div>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?
Advertisement
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.
JavaScript
1
52
52
1
// Here you need to create your connection to the database with your values2
<?php3
include 'connection.php';4
//Here write your SQL query to get the data from your cards database5
$sql = "SELECT * FROM cards";6
$result = $conn->query($sql);7
?>8
9
// Then we start with the html code to get the data and show the cards10
<!doctype html>11
<html>12
<body>13
<h1 align="center">CARDS</h1>14
<?php15
//Fetch Data form database16
if($result->num_rows > 0){17
while($row = $result->fetch_assoc()){18
?>19
<div class="scrolling-wrapper">20
<div class="card">21
22
<img id="card-shopping-cart-icon" src="images/cart.png" alt="">23
<img id="card-wishlist-icon" src="images/heart.png" alt="">24
<img id="card-image" src="images/<?php echo $row['RowNameYouWannaGet']; ?>" alt="Motorola" class="contain">25
26
<div class="card-text-body">27
<p class="card-clock-deals-title"><?php echo $row['RowNameYouWannaGet']; ?></p>28
<p class="card-clock-deals-detail"><?php echo $row['RowNameYouWannaGet']; ?></p>29
<p class="card-clock-deals-discounted-price"><?php echo $row['RowNameYouWannaGet']; ?></p>30
<p>31
<table class="card-clock-deals-timer">32
<tr>33
<td id="hours"><?php echo $row['RowNameYouWannaGet']; ?></td>34
<td>:</td>35
<td id="minutes"><?php echo $row['RowNameYouWannaGet']; ?></td>36
</tr>37
38
</table>39
</p>40
<p class="card-clock-deals-original-price"><?php echo $row['RowNameYouWannaGet']; ?></p>41
<p class="card-clock-deals-timer-text"><?php echo $row['RowNameYouWannaGet']; ?></p>42
<p class="card-clock-deals-like-image"><img src="images/heart.png" alt=""><?php echo $row['RowNameYouWannaGet']; ?></p>43
</div>44
</div>45
<?php46
}47
}48
else49
{ echo "No data found" } ?>50
</body>51
</html> 52
Hope it helps, you can also find info on Google searching–> Dynamic Tables PHP, MySQL