This information looks like it might be 'static' information where the meetings occur on the same day each week?
If that IS the case you could store the information as a json object in a file called meetings_list.js which would take the form as below: (Sunday - Tuesday has been formatted)
var meetings = [
{
weekday: "Sunday",
title: "Flat Book (Step Working Guide)",
location: "Virtua Memorial Hospital",
address: "175 Madison Avenue, Mt Holly 08060",
time: "11:00am - 1:00pm (C/St)"
},
{
weekday: "Sunday",
title: "No Matter What",
location: "449 Club",
address: "6 Pemberton Street, Pemberton 0868",
time: "4:00pm - 5:30pm (O/S/D/L)"
},
{
weekday: "Sunday",
title: "Come Grow With Us",
location: "St Marys Hall",
address: "145 Broad Street, Burlington 08016",
time: "7:00pm - 8:30pm (O/S/St./D)"
},
{
weekday: "Sunday",
title: "Freedom Group (JS)",
location: "St Peter's Episcopal Church",
address: "1 hartford Road, Medford 08055",
time: "7:00pm - 8:30pm (O/S/St./D)"
},
{
weekday: "Sunday",
title: "Nothing Else Works",
location: "Mount Holly Friends Meeting",
address: "81 High Street, Mt Holly 08060",
time: "8:15 - 9:30pm (C,JFT,D)"
},
{
weekday: "Monday",
title: "Wake Up To Recovery Group (SJ)",
location: "First Baptist Church",
address: "19 West Main Street, Moorestown 08057",
time: "7:00am - 8:00am (O/S)"
},
{
weekday: "Monday",
title: "Together We Grow",
location: "",
address: "136 East Broad Street, Burlington 08016",
time: "12:00pm - 1:30pm (O/Tp/S/D)"
},
{
weekday: "Monday",
title: "Today We Live",
location: "Broad Street Methodist Church",
address: "36 East Broad Street, Burlington 08016",
time: "7:30pm - 9:15pm (O/S/St/H&W)"
},
{
weekday: "Monday",
title: "Freedom Group (SJ)",
location: "St Peter's Episcopal Church",
address: "1 Hartford Road, Medford 08055",
time: "8:00pm - 9:00pm (O/V)"
},
{
weekday: "Monday",
title: "Maple Shade Freedom Group",
location: "United Christ Church",
address: "45 North Fork Landing Road, Maple Shade 08052",
time: "8:00pm - 9:00pm (O/T/D)"
},
{
weekday: "Monday",
title: "Monday Nite Live",
location: "Saint Paul’s Lutheran Church",
address: "910 Marne Highway, Hainesport 08036",
time: "8:00pm - 9:30pm (O/S/IP/Td/An/Bk)"
},
{
weekday: "Tuesday",
title: "Together We Grow",
location: "",
address: "136 East Broad Street, Burlington 08016",
time: "12:00pm-1:30pm (O/Bk/S/D)"
},
{
weekday: "Tuesday",
title: "Women In Unity",
location: "St Luke’s Lutheran Church",
address: "Salem Road & Levitt Parkway, Willingboro 08046",
time: "7:00pm-8:30pm (O/W/S/Td)"
},
{
weekday: "Tuesday",
title: "Traditions & Concerns",
location: "Lourdes Hospital (back of cafeteria)",
address: "218 Sunset Road, Willingboro 08046",
time: "8:00pm-9:30pm (O/S/Td/D)"
},
{
weekday: "Tuesday",
title: "New Leaf",
location: "449 Club",
address: "6 Pemberton Street, Pemberton 08068",
time: "8:00pm-9:30pm (O; 1st St/D, 2nd Sp/D, 3rd Td, 4th & 5th IP/Anniv)"
},
{
weekday: "Tuesday",
title: "Strategic Recovery (SJ)",
location: "Prince of Peace Church",
address: "61 Route 70 East, Marlton 08053",
time: "8:00pm-9:00pm (Bk)"
},
{
weekday: "Tuesday",
title: "Recovery by the River",
location: "Sacred Heart Church",
address: "103 4th Street, Riverton 08077",
time: "7:00pm to 8:15pm (O/S/Tp/JFT) - NOT wheelchair accessible"
}
];
You can then use the information from the meetings_list.js file to insert into your 'Todays Meetings' panel, based on what day of the week it currently is, example code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Meetings List</title>
<style>
body {
font-family: helvetica, snas-serif;
}
.meetings {
width: 30%;
margin: 0 auto;
background-color: #343a40;
padding: 30px;
}
.meetings h2 {
margin: 0;
padding: 0 0 10px 0;
color: #fff;
}
.meetings h4 {
margin: 0;
padding: 20px 0 5px 0;
font-size: 16px;
color: #fff;
}
.meetings p {
margin: 0;
padding: 0;
font-size: 16px;
line-height: 24px;
color: #fff;
}
</style>
</head>
<body>
<div class="meetings">
<h2>TODAY'S MEETINGS:</h2>
<div class="meetings_list">
</div>
<!-- end meetings_list -->
</div>
<!-- end meetings -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="meetings_list.js"></script>
<script>
// get date
const date = new Date()
// assign weekday to array
const weekday = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
// get current day
const day = weekday[date.getDay()];
// loop through meetings data from meetings_list.js file
$.each(meetings, function () {
if(this.weekday === day) {
// append results to meetings_list div
$('.meetings_list').append("<h4>" + this.title + "</h4><p>" + this.location + "</p><p>" + this.address + "</p><p>" + this.time + "</p>");
}
});
</script>
</body>
</html>
If the information changes regularly from week to week then you are best advised to create some kind of database solution, which is much more robust and malleable.
1 Correct answer
15
Replies
AdChoices