API tools faq
paste
bapparabi

sivedurga

bapparabi
Sep 12th, 2024
115
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.96 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2.  
  3. .column {
  4. /*float: left;*/
  5. display: inline-block;
  6. width: 50%;
  7. background-color: #fff;
  8. /* border-radius: 20px;*/
  9. padding: 10px;
  10. /*height: 743px!important;
  11. padding-left: 28px;
  12. MARGIN-LEFT: 18PX;
  13. margin-top: -50px;*/
  14. }
  15.  
  16. .iconlocation {
  17.  
  18. margin-bottom: unset;
  19. padding: 8px;
  20.  
  21. margin-top: -5px;
  22. }
  23. .iconcol1 {
  24. margin-right: 15px;
  25. margin-left: 0px;
  26. margin-bottom: unset;
  27. background-color: #ff8001;
  28. padding: 8px;
  29. border-radius: 50%;
  30. height: 37px;
  31. width: 37px;
  32. margin-top: -8px;
  33. }
  34. .img-col1 img {
  35. /*border-radius: 12px;
  36. padding: -28px;*/
  37. width: 105%;
  38. height: 300px;
  39. margin-bottom:10px;
  40. /* margin-left: -5px;
  41. margin-top: -5px;*/
  42. }
  43.  
  44. .loaction{
  45. display: flex;
  46. flex-direction: row;
  47. text-align: left;
  48. margin-top: 5px;
  49. margin-bottom: 5px;
  50. }
  51. .colroW1 {
  52. height: 55px;
  53. display: flex;
  54. /* align-items: flex-start; */
  55. flex-direction: row;
  56. text-align: left;
  57. padding: 16px 0px 10px 23px;
  58. background-color: #FEF3D9;
  59. border-style: solid;
  60. border-width: 1px 1px 1px 1px;
  61. border-color: #F8A63A;
  62. /* border-radius: 35px 35px 35px 35px;*/
  63. margin-top: 20px;
  64. }
  65.  
  66. .textcol1 {
  67. font-family: "Amaranth", Sans-serif;
  68. font-size: 15px;
  69. font-weight: 600;
  70. }
  71. .textloaction{
  72. color:#9a9ab0;
  73. margin-bottom: 7px;
  74. font-family: var(--e-global-typography-accent-font-family), Sans-serif;
  75. font-size:14px !important;
  76.  
  77. }
  78.  
  79. }
  80. .elementor-kit-29 h2{}
  81. .H2textcol1{
  82. color: #11142D;
  83. font-family: var(--e-global-typography-33b1fac-font-family), Sans-serif;
  84. font-size:24px !important;
  85. text-align: left !important;
  86. line-height: var(--e-global-typography-33b1fac-line-height);
  87. letter-spacing: var(--e-global-typography-33b1fac-letter-spacing);
  88. word-spacing: var(--e-global-typography-33b1fac-word-spacing);
  89.  
  90. }
  91. hr.solid {
  92. border-top: 1px solid #dadada;
  93. }
  94. .bage-topArea{
  95. background-color: #ff6600;
  96. text-align: center;
  97. color: #fff;
  98. padding: 10px;
  99. border-radius:15px 15px 0px 0px;
  100. /* height:40px; */
  101. font-size:20px;
  102. margin: -55px 0px 0px 0px;
  103. font-family: 'Amaranth';
  104. width: 31%;
  105. }
  106. .bage-bottomArea{
  107. 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';
  108. width: 28%;
  109. }
  110. /*.bage-topArea{
  111. background-color: #ff6600;text-align: center;color: #fff;padding: 10px;border-radius:15px 15px 0px 0px;/* height:40px; */
  112. /*font-size:20px;margin: -2px 0px 0px 0px;font-family: 'Amaranth';*/
  113. }
  114. /*.bage-bottomArea{*/
  115. /* 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';*/
  116. /*}*/
  117. .bageUI {
  118. position: absolute!important;
  119. width: 9% !important;
  120. top: -85px !important;
  121. }
  122. /*.bageUI {*/
  123. /*position: relative;*/
  124. /*width: 100px;*/
  125. /*top: 52px;*/
  126. /*left: 36px;*/
  127. /* display: inline-block;*/
  128. /* width: 100px;*/
  129. /* margin-left:37px;*/
  130. /*}*/
  131. div#apiData {
  132.  
  133. text-align: center;
  134. }
  135. @media only screen and (min-width: 320px) and (max-width: 767px){
  136. .column {
  137. display: inline-block;
  138. width: 91%;
  139.  
  140. padding: 20px;
  141. /*height: 672px!important;*/
  142.  
  143. MARGIN-LEFT: 14PX;
  144. margin-bottom: 98px;
  145. }
  146.  
  147. .img-col1 img {
  148.  
  149. margin-left: 0px;
  150. border-radius: 19px;
  151.  
  152. }
  153. .textcol1 {
  154. font-size: 13px;
  155.  
  156. }
  157. .colroW1 {
  158.  
  159. padding: 16px 0px 10px 19px;
  160. }
  161. .H2textcol1 {
  162. }
  163. .iconcol1 {
  164. margin-right: 11px;
  165.  
  166. }
  167. }
  168. </style>
  169. <div id="apiData"></div>
  170.  
  171. <script>
  172. async function fetchData() {
  173. let headersList = {
  174. "Accept": "*/*",
  175. "User-Agent": "",
  176. "Authorization": "Basic 976214ba4e83b14b9aed5fccabd614e1cc18ca770870d7210aa51d86e2300335"
  177. };
  178.  
  179. try {
  180. let response = await fetch("https://api.onwajooba.com/plugin/events", {
  181. method: "GET",
  182. headers: headersList
  183. });
  184. let data = await response.json();
  185.  
  186. // Create cards for each item in the array
  187. let cardsHtml = '';
  188. data.forEach(item => {
  189.  
  190. if(item < 3){
  191.  
  192. console.log('item: ', item);
  193. }
  194. console.log('item: ', item);
  195. var datte=item.startTimeStr ;
  196.  
  197. const date = new Date(datte);
  198. let result=date.toDateString();
  199. const date1 = date.getDate();
  200. const month = date.toLocaleString('default', { month: 'short' });
  201. let time=date.toLocaleString('en-US', { hour: 'numeric', hour12: true });
  202. function english_ordinal_suffix(date1)
  203. {
  204. 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')));
  205. }
  206. let eng_date = english_ordinal_suffix(date);
  207.  
  208. cardsHtml += `
  209. <link href='https://fonts.googleapis.com/css?family=Amaranth' rel='stylesheet'>
  210. <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" />
  211.  
  212.  
  213.  
  214.  
  215.  
  216. <div class="column" style="background-color:#fff;">
  217. <!--div class="bageUI" style="">
  218. <h6 class="bage-topArea">${month}</h6>
  219. <h6 class="bage-bottomArea" style="">${eng_date}</h6>
  220. </div-->
  221. <div class="img-col1">
  222. <a href="${item.absEventUrl}">
  223. <img src= ${item.absImageUrl} alt="" width="250" height="300">
  224. </a>
  225. </div>
  226.  
  227.  
  228. <div class="elementor-widget-container">
  229. <img loading="lazy" decoding="async" width="1182" height="27" src="https://waqtgurus.com/clients/wp-content/uploads/2023/12/Divider-05.png" class="attachment-full size-full wp-image-1248" alt="" srcset="https://waqtgurus.com/clients/wp-content/uploads/2023/12/Divider-05.png 1182w, https://waqtgurus.com/clients/wp-content/uploads/2023/12/Divider-05-300x7.png 300w, https://waqtgurus.com/clients/wp-content/uploads/2023/12/Divider-05-1024x23.png 1024w, https://waqtgurus.com/clients/wp-content/uploads/2023/12/Divider-05-768x18.png 768w" sizes="(max-width: 1182px) 100vw, 1182px"> </div>
  230. <h2 class="H2textcol1">${item.name}</h2>
  231. <div class="loaction">
  232. <div class="iconlocation">
  233. <span class="elementor-icon-list-icon">
  234. <i aria-hidden="true" class="far fa-calendar" style="color:#9a9ab0"></i> </span>
  235. </div>
  236. <div class="textloaction">
  237. <span> ${result}</span> @ <span>${time}</span>
  238. </div>
  239.  
  240. </div>
  241.  
  242. <div class="loaction">
  243. <div class="iconlocation">
  244. <span class="elementor-icon-list-icon">
  245. <i aria-hidden="true" class="fas fa-map-marker-alt" style="color:#9a9ab0"></i>
  246. </span>
  247. </div>
  248. <div class="textloaction">
  249.  
  250. <span> ${item.roomName} ${item.location}</span>
  251.  
  252. </div>
  253.  
  254. </div>
  255. </div>
  256.  
  257.  
  258.  
  259.  
  260. `;
  261.  
  262.  
  263. });
  264.  
  265. // Insert the generated HTML into the page
  266. document.getElementById("apiData").innerHTML = cardsHtml;
  267. } catch (error) {
  268. console.error("Error fetching data:", error);
  269. }
  270. }
  271.  
  272. // Call the function to fetch data when the page loads
  273. window.onload = fetchData;
  274. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!