<style> .box { width: 100%; max-height: 250px; padding: 10px; border-radius: 10px; background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(255,255,255, 0.5) 90%); overflow: auto; } span.comFeed { font-weight: 700; border-radius: 15px; margin: 10px; padding: 0px 5px 0px 5px; color: white; background: #93030E; } p.update { margin: 5px; padding-left: 10px; color: white; background: rgba(0,0,0,0.3); border-radius: 15px; font-size: 12px; } </style> <div id='snapFeeds' class='box'> <span class='comFeed'><span id='numFeedsToday'>(?)</span>COMMUNITY FEEDS TODAY</span> <a class="button-7">CREATE FEED</a> </div> <script> function timeSince(date) { date = convertTZ(date); var seconds = Math.floor((new Date() - date) / 1000); var interval = seconds / 31536000; if (interval > 1) { return Math.floor(interval) + " year/s"; } interval = seconds / 2592000; if (interval > 1) { return Math.floor(interval) + " month/s"; } interval = seconds / 86400; if (interval > 1) { return Math.floor(interval) + " day/s"; } interval = seconds / 3600; if (interval > 1) { return Math.floor(interval) + " hour/s"; } interval = seconds / 60; if (interval > 1) { return Math.floor(interval) + " minute/s"; } return Math.floor(seconds) + " second/s"; } function convertTZ(date) { let tzString = Intl.DateTimeFormat().resolvedOptions().timeZone; return new Date((typeof date === "string" ? new Date(date) : date).toLocaleString("en-US", {timeZone: tzString})); } function retrieveLists(data) { let mdata = JSON.parse(data); let parentDiv = document.createElement('div'); let numPost = 0; for(i = Object.keys(mdata.posts).length-1; i > -1; i--, numPost++) { let time = Object.keys(mdata.posts)[i]; time = time.split('at ')[1]; time = timeSince(time); if(time.includes('day')) { break; } else { a++; let p = document.createElement('p'); let span = document.createElement('span'); p.setAttribute('class', 'update'); span.setAttribute('class', 'comFeed'); let content = mdata.posts[Object.keys(mdata.posts)[i]].description; span.innerText = time; p.appendChild(span); p.setAttribute('class', 'update'); p.innerHTML += content.substring(0, 100) + '...'; document.querySelector('#snapFeeds').appendChild(p); } } document.querySelector('#numFeedsToday').innerText = "(" + numPost + ")"; } function getCommunityFeeds() { let req = new XMLHttpRequest(); req.onload = () => { if(req.readyState == XMLHttpRequest.DONE) { if(req.status == 200) { retrieveLists(req.response); } } } req.open('GET', 'https://getpantry.cloud/apiv1/pantry/91c9a2f3-be20-4b3b-8c9e-94a81264de7a/basket/members', true); req.setRequestHeader("Content-Type", "application/json"); req.send(); } </script>