API tools faq
paste
bapparabi

woozoba-pasteven

bapparabi
Sep 9th, 2024
40
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.94 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2. .column.sr {
  3. margin-top: 50px;
  4. }
  5. hr.divider {
  6. position: relative;
  7. top: 118px;
  8. border-top: 1px solid #ff8201;
  9. }
  10. .hding {
  11. color: #ff8201;
  12. position: relative;
  13. top: 199px;
  14. font-family: 'Amaranth';
  15. -webkit-text-stroke: 1px black;
  16. }
  17. .column {
  18.  
  19. display: inline-block;
  20. width: 31.33%;
  21. background-color: #fff;
  22. border-radius: 20px;
  23. padding: 20px;
  24.  
  25. padding-left: 28px;
  26. MARGIN-LEFT: 18PX;
  27. margin-top: -106px;
  28. }
  29. .column1 {
  30.  
  31. display: inline-block;
  32. width: 31.33%;
  33. background-color: #fff;
  34. border-radius: 20px;
  35. padding: 20px;
  36. padding-top:200px
  37. padding-left: 28px;
  38. MARGIN-LEFT: 18PX;
  39. margin-top: 250px;
  40. }
  41. .iconlocation {
  42. margin-right: 15px;
  43. margin-left: -6px;
  44. margin-bottom: unset;
  45. padding: 8px;
  46. border-radius: 50%;
  47. height: 57px;
  48. width: 61px;
  49. margin-top: -5px;
  50. }
  51. .iconcol1 {
  52. margin-right: 15px;
  53. margin-left: 0px;
  54. margin-bottom: unset;
  55. background-color: #ff8001;
  56. padding: 8px;
  57. border-radius: 50%;
  58. height: 37px;
  59. width: 37px;
  60. margin-top: -8px;
  61. }
  62. .img-col1 img {
  63. border-radius: 12px;
  64. padding: -28px;
  65. width: 105%;
  66. height: 231px;
  67. margin-left: -5px;
  68. margin-top: -5px;
  69. }
  70.  
  71. .loaction{
  72. display: flex;
  73. flex-direction: row;
  74. text-align: left;
  75. margin-top: 20px;
  76. margin-bottom: 20px;
  77. }
  78. .colroW1 {
  79. height: 55px;
  80. display: flex;
  81. /* align-items: flex-start; */
  82. flex-direction: row;
  83. text-align: left;
  84. padding: 16px 0px 10px 23px;
  85. background-color: #FEF3D9;
  86. border-style: solid;
  87. border-width: 1px 1px 1px 1px;
  88. border-color: #F8A63A;
  89. border-radius: 35px 35px 35px 35px;
  90. margin-top: 20px;
  91. }
  92.  
  93. .textcol1 {
  94. font-family: "Amaranth", Sans-serif;
  95. font-size: 15px;
  96. font-weight: 600;
  97. }
  98. .textloaction{
  99.  
  100. margin-bottom: 7px;
  101. color: #ff8001;
  102. font-family: "Amaranth", Sans-serif;
  103. font-size: 13px;
  104. font-weight: bold;
  105.  
  106.  
  107. }
  108. .H2textcol1{
  109. color: #252641;
  110. font-family: "Amaranth";
  111. font-size: 17px;
  112. font-weight: 600;
  113. margin-left: 17px;
  114. margin-top: 20px;
  115. }
  116. hr.solid {
  117. border-top: 1px solid #dadada;
  118. }
  119. .bage-topArea{
  120. background-color: #ff6600;
  121. text-align: center;
  122. color: #fff;
  123. padding: 10px;
  124. border-radius:15px 15px 0px 0px;
  125. /* height:40px; */
  126. font-size:20px;
  127. margin: -55px 0px 0px 0px;
  128. font-family: 'Amaranth';
  129. width: 91%;
  130. }
  131. .bage-bottomArea{
  132. 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';
  133. width: 91%;
  134. }
  135.  
  136. .bageUI {
  137. position: absolute!important;
  138. width: 9% !important;
  139. /* top: -85px !important;*/
  140. /*}*/
  141. }
  142. div#apiData {
  143.  
  144. text-align: center;
  145. }
  146. @media only screen and (min-width: 320px) and (max-width: 767px){
  147. hr.divider {
  148. top: 69px;
  149.  
  150. }
  151. .column1 {
  152. width: 91.33%;
  153. MARGIN-LEFT: 0PX;
  154.  
  155. }
  156. .column {
  157. display: inline-block;
  158. width: 91%;
  159.  
  160. padding: 20px;
  161. /*height: 672px!important;*/
  162.  
  163. MARGIN-LEFT: 0PX;
  164. margin-bottom: 98px;
  165. }
  166.  
  167. .img-col1 img {
  168.  
  169. margin-left: 0px;
  170. border-radius: 19px;
  171.  
  172. }
  173. .textcol1 {
  174. font-size: 13px;
  175.  
  176. }
  177. .colroW1 {
  178.  
  179. padding: 16px 0px 10px 19px;
  180. }
  181. .H2textcol1 {
  182. }
  183. .iconcol1 {
  184. margin-right: 11px;
  185.  
  186. }
  187. .bage-topArea{
  188. width:288%;
  189. }
  190. .bage-bottomArea{
  191. width:288%;
  192. }
  193. }
  194. </style>
  195. <div id="apiData"></div>
  196.  
  197. <script>
  198. async function fetchData() {
  199. let headersList = {
  200. "Accept": "*/*",
  201. "User-Agent": "",
  202. "Authorization": "Basic fba1985e99c0860dcdae338d37ff102ee8b840ad6a1bec0bace51071a56f0ede"
  203. };
  204.  
  205. try {
  206. let response = await fetch("https://api.onwajooba.com/plugin/events", {
  207. method: "GET",
  208. headers: headersList
  209. });
  210.  
  211. let data = await response.json();
  212.  
  213. let response2 = await fetch("https://api.onwajooba.com/plugin/events/?isPastEvents=true", {
  214. method: "GET",
  215. headers: headersList
  216. });
  217. let DData = await response2.json();
  218. console.log(DData);
  219.  
  220.  
  221. // Create cards for each item in the array
  222. let cardsHtml = '';
  223.  
  224. data.forEach(item => {
  225. console.log('item: ', item);
  226. var datte=item.startTimeStr ;
  227.  
  228. const date = new Date(datte);
  229. let result=date.toDateString();
  230. const date1 = date.getDate();
  231. const month = date.toLocaleString('default', { month: 'short' });
  232. let time=date.toLocaleString('en-US', { hour: 'numeric', hour12: true });
  233. function english_ordinal_suffix(date1)
  234. {
  235. 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')));
  236. }
  237. let eng_date = english_ordinal_suffix(date);
  238.  
  239. cardsHtml += `
  240. <link href='https://fonts.googleapis.com/css?family=Amaranth' rel='stylesheet'>
  241. <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" />
  242.  
  243.  
  244.  
  245.  
  246.  
  247. <div class="column sr" style="background-color:#fff;">
  248. <div class="bageUI" style="">
  249. <h6 class="bage-topArea">${month}</h6>
  250. <h6 class="bage-bottomArea" style="">${eng_date}</h6>
  251. </div>
  252. <div class="img-col1">
  253. <a href="${item.absEventUrl}">
  254. <img src= ${item.absImageUrl} alt="" width="250" height="300">
  255. </a>
  256. </div>
  257. <div class="colroW1">
  258. <div class="iconcol1">
  259. <span>
  260. <!-- <i class="fa-solid fa-calendar-days" style="color: #ff8001;" ></i> -->
  261. <i class="fa-solid fa-calendar-days" style="color: #ffffff;font-size: 20px;
  262. padding-left: 1px;"
  263. ></i>
  264. </span>
  265. </div>
  266. <div class="textcol1">
  267. <span> ${result}</span> @ <span>${time}</span>
  268. </div>
  269.  
  270. </div>
  271. <h2 class="H2textcol1">${item.name}</h2>
  272. <hr class="solid">
  273.  
  274. <div class="loaction">
  275. <div class="iconlocation">
  276. <img src="https://mmatlanta.org/wp-content/uploads/2024/02/placeholder-3.png" alt="" >
  277. </span>
  278. </div>
  279. <div class="textloaction">
  280.  
  281. <span> ${item.roomName} ${item.location}</span>
  282.  
  283. </div>
  284.  
  285. </div>
  286. </div>
  287.  
  288.  
  289.  
  290.  
  291. `;
  292.  
  293.  
  294. });
  295.  
  296. DData.forEach(item => {
  297. console.log('item: ', item);
  298. var datte=item.startTimeStr ;
  299.  
  300. const date = new Date(datte);
  301. let result=date.toDateString();
  302. const date1 = date.getDate();
  303. const month = date.toLocaleString('default', { month: 'short' });
  304. let time=date.toLocaleString('en-US', { hour: 'numeric', hour12: true });
  305. function english_ordinal_suffix(date1)
  306. {
  307. 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')));
  308. }
  309. let eng_date = english_ordinal_suffix(date);
  310.  
  311. cardsHtml += ` <br><hr class="divider">
  312. <link href='https://fonts.googleapis.com/css?family=Amaranth' rel='stylesheet'>
  313. <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" />
  314.  
  315.  
  316. <h1 class="hding"> Past Events</h1>
  317.  
  318.  
  319. <div class="column1" style="background-color:#fff;" padding-top=200px>
  320.  
  321. <div class="bageUI" style="">
  322. <h6 class="bage-topArea">${month}</h6>
  323. <h6 class="bage-bottomArea" style="">${eng_date}</h6>
  324. </div>
  325. <div class="img-col1">
  326. <a href="${item.absEventUrl}">
  327. <img src= ${item.absImageUrl} alt="" width="250" height="300">
  328. </a>
  329. </div>
  330. <div class="colroW1">
  331. <div class="iconcol1">
  332. <span>
  333. <!-- <i class="fa-solid fa-calendar-days" style="color: #ff8001;" ></i> -->
  334. <i class="fa-solid fa-calendar-days" style="color: #ffffff;font-size: 20px;
  335. padding-left: 1px;"
  336. ></i>
  337. </span>
  338. </div>
  339. <div class="textcol1">
  340. <span> ${result}</span> @ <span>${time}</span>
  341. </div>
  342.  
  343. </div>
  344. <h2 class="H2textcol1">${item.name}</h2>
  345. <hr class="solid">
  346.  
  347. <div class="loaction">
  348. <div class="iconlocation">
  349. <img src="https://mmatlanta.org/wp-content/uploads/2024/02/placeholder-3.png" alt="" >
  350. </span>
  351. </div>
  352. <div class="textloaction">
  353.  
  354. <span> ${item.roomName} ${item.location}</span>
  355.  
  356. </div>
  357.  
  358. </div>
  359. </div>
  360.  
  361.  
  362.  
  363.  
  364. `;
  365.  
  366.  
  367. });
  368.  
  369.  
  370. // Insert the generated HTML into the page
  371. document.getElementById("apiData").innerHTML = cardsHtml;
  372. } catch (error) {
  373. console.error("Error fetching data:", error);
  374. }
  375. }
  376.  
  377. // Call the function to fetch data when the page loads
  378. window.onload = fetchData;
  379. </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!