wazooba-even code

<style>
 .column.sr {
    margin-top: 50px;
}
 .column {
    /*float: left;*/
    display: inline-block;
    width: 31.33%;
    background-color: #fff;
    border-radius: 20px;
    padding: 20px;
    /*height: 743px!important;*/
    padding-left: 28px;
    MARGIN-LEFT: 18PX;
    margin-top: -50px;
}

.iconlocation {
    margin-right: 15px;
    margin-left: -6px;
    margin-bottom: unset;
    padding: 8px;
    border-radius: 50%;
    height: 57px;
    width: 61px;
    margin-top: -5px;
}
.iconcol1 {
    margin-right: 15px;
    margin-left: 0px;
    margin-bottom: unset;
    background-color: #ff8001;
    padding: 8px;
    border-radius: 50%;
    height: 37px;
    width: 37px;
    margin-top: -8px;
}
.img-col1 img {
    border-radius: 12px;
    padding: -28px;
    width: 105%;
    height: 231px;
    margin-left: -5px;
    margin-top: -5px;
}

.loaction{
  display: flex;
  flex-direction: row;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 20px;
}
.colroW1 {
    height: 55px;
    display: flex;
    /* align-items: flex-start; */
    flex-direction: row;
    text-align: left;
    padding: 16px 0px 10px 23px;
    background-color: #FEF3D9;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #F8A63A;
    border-radius: 35px 35px 35px 35px;
    margin-top: 20px;
}

.textcol1 {
    font-family: "Amaranth", Sans-serif;
    font-size: 15px;
    font-weight: 600;
}
.textloaction{

    margin-bottom: 7px;
    color: #ff8001;
    font-family: "Amaranth", Sans-serif;
    font-size: 13px;
    font-weight: bold;


}
.H2textcol1{
  color: #252641;
  font-family: "Amaranth";
  font-size: 17px;
  font-weight: 600;
  margin-left: 17px;
  margin-top: 20px;
}
hr.solid {
  border-top: 1px solid #dadada;
}
.bage-topArea{
    background-color: #ff6600;
    text-align: center;
    color: #fff;
    padding: 10px;
    border-radius:15px 15px 0px 0px;
    /* height:40px; */
    font-size:20px;
    margin: -55px 0px 0px 0px;
    font-family: 'Amaranth';
        width: 31%;
}
.bage-bottomArea{
    background-color: #fff;text-align: center;color: #000;margin-top: -16px;padding: 10px;border-radius:0px 0px 15px 15px;font-size:20px;margin:0px 0px 0px 0px;font-family: 'Amaranth';
        width: 28%;
}
/*.bage-topArea{
    background-color: #ff6600;text-align: center;color: #fff;padding: 10px;border-radius:15px 15px 0px 0px;/* height:40px; */
    /*font-size:20px;margin: -2px 0px 0px 0px;font-family: 'Amaranth';*/
}*/
/*.bage-bottomArea{*/
/*    background-color: #fff;text-align: center;color: #000;margin-top: -16px;padding: 10px;border-radius:0px 0px 15px 15px;font-size:20px;margin:0px 0px 0px 0px;font-family: 'Amaranth';*/
/*}*/
.bageUI {
    position: absolute!important;
    width: 9% !important;
    top: -85px !important;
}
/*.bageUI {*/
    /*position: relative;*/
    /*width: 100px;*/
    /*top: 52px;*/
    /*left: 36px;*/
/*    display: inline-block;*/
/*    width: 100px;*/
/*    margin-left:37px;*/
/*}*/
div#apiData {

    text-align: center;
}
@media only screen and (min-width: 320px) and  (max-width: 767px){
    .column {
    display: inline-block;
    width: 91%;

    padding: 20px;
    /*height: 672px!important;*/

    MARGIN-LEFT: 14PX;
  margin-bottom: 98px;
}

.img-col1 img {

    margin-left: 0px;
    border-radius: 19px;

}
.textcol1 {
    font-size: 13px;

}
.colroW1 {

    padding: 16px 0px 10px 19px;
    }
.H2textcol1 {
   }
   .iconcol1 {
    margin-right: 11px;

}
}
    </style>
    <div id="apiData"></div>

      <script>
          async function fetchData() {
              let headersList = {
                  "Accept": "*/*",
                  "User-Agent": "",
                  "Authorization": "Basic fba1985e99c0860dcdae338d37ff102ee8b840ad6a1bec0bace51071a56f0ede"
              };

              try {
                  let response = await fetch("https://api.onwajooba.com/plugin/events", {
                      method: "GET",
                      headers: headersList
                  });
                  let data = await response.json();

                  // Create cards for each item in the array
                  let cardsHtml = '';
                  data.forEach(item => {

                           if(item < 3){

                       console.log('item: ', item);
}
                  console.log('item: ', item);
                      var datte=item.startTimeStr ;

                         const date = new Date(datte);
                    let result=date.toDateString();
                      const date1 = date.getDate();
                      const month = date.toLocaleString('default', { month: 'short' });
                        let time=date.toLocaleString('en-US', { hour: 'numeric', hour12: true });
function english_ordinal_suffix(date1)
  {
   return date.getDate()+(date.getDate() % 10 == 1 && date.getDate() != 11 ? 'st' : (date.getDate() % 10 == 2 && date.getDate() != 12 ? 'nd' : (date.getDate() % 10 == 3 && date.getDate() != 13 ? 'rd' : 'th')));
  }
let eng_date = english_ordinal_suffix(date);

     cardsHtml += `
     <link href='https://fonts.googleapis.com/css?family=Amaranth' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />





  <div class="column sr" style="background-color:#fff;">
      <div class="bageUI" style="">
        <h6 class="bage-topArea">${month}</h6>
<h6 class="bage-bottomArea" style="">${eng_date}</h6>
</div>
    <div class="img-col1">
    <a href="${item.absEventUrl}">
      <img src= ${item.absImageUrl} alt="" width="250" height="300">
     </a>
     </div>
     <div class="colroW1">
      <div class="iconcol1">
        <span>
          <!-- <i class="fa-solid fa-calendar-days" style="color: #ff8001;" ></i> -->
          <i class="fa-solid fa-calendar-days" style="color: #ffffff;font-size: 20px;
          padding-left: 1px;"
      ></i>
        </span>
      </div>
      <div class="textcol1">
        <span> ${result}</span> @ <span>${time}</span>
      </div>

     </div>
<a href="${item.absEventUrl}">
  <h2 class="H2textcol1">${item.name}</h2>
</a>
    <hr class="solid">

    <div class="loaction">
      <div class="iconlocation">
         <img src="https://mmatlanta.org/wp-content/uploads/2024/02/placeholder-3.png" alt="" >
        </span>
      </div>
      <div class="textloaction">

       <span> ${item.roomName} ${item.location}</span>

      </div>

  </div>
  </div>




    `;


       });

                  // Insert the generated HTML into the page
                  document.getElementById("apiData").innerHTML = cardsHtml;
              } catch (error) {
                  console.error("Error fetching data:", error);
              }
          }

          // Call the function to fetch data when the page loads
          window.onload = fetchData;
      </script>