15 people have

1<div class="red-div">
2  <span class="blink">&#9679;</span>
3  <span id="cartCount" style="color: #9F7301;">4</span> people have this in their cart
4</div>
5
6<script>
7  // Function to update the random number every 15 seconds
8  function updateRandomNumber() {
9    // Generate a random number between 4 and 20
10    var randomCount = Math.floor(Math.random() * (20 - 4 + 1)) + 4;
11    // Display the random number in the HTML
12    document.getElementById("cartCount").innerText = randomCount;
13  }
14
15  // Call the function immediately to set the initial random number
16  updateRandomNumber();
17
18  // Update the random number every 15 seconds
19  setInterval(updateRandomNumber, 15000);
20</script>
21
22<style>
23  .red-div {
24    background-color: #FFF8D0;
25    padding: 2px 10px; /* 6px vertical, 10px horizontal */
26    border-radius: 8px; /* Rounded corners */
27    display: inline-block; /* Display as inline-block */
28    text-align: center; /* Center align the content */
29    margin: 0 auto; /* Horizontally center the red-div */
30    color: #9F7301; /* Text color */
31    font-weight: 500; /* Medium font weight */
32    font-size: 12px; /* Set font size */
33  }
34
35  .blink {
36    color: inherit; /* Inherit color from parent */
37    display: inline-block; /* Display as inline-block */
38    vertical-align: middle; /* Align vertically to middle */
39    font-size: 12px; /* Set font size */
40    margin-right: 5px; /* Add some space between the dot and the text */
41  }
42</style>