Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- https://www.springfielddelco.org/ -->

<section>
  <div class="container">
    <h1>2021 LEAF SCHEDULE</h1>
    <p> LISTED BELOW IS THE 2021 LEAF SCHEDULE. EVERY YEAR TWO PRECINCTS ARE ROTATED FROM THE BOTTOM OF THE LIST
      TO
      THE
      TOP OF THE SCHEDULE. ROTATING THE SCHEDULE EACH YEAR ASSURES THAT ONE PRECINCT IS NOT FIRST OR LAST
      EVERY YEAR.
    </p>
    <!-- Is this correct? Precinct = Zone + Ward? I added this, feel free to remove it -->
    <p>*Precinct = Zone + Ward</p>
    <p>The numbers below are a combination of the Zone number and Ward number. For example, Precinct 4-1 is Zone
      4
      and Ward 1, or 4-1.</p>
    <h4 id="update_warning" class="update-warning"></h4>
    <div class="main">
      <ol id="weekly_schedule"></ol>
    </div>
  </div>

</section>
<section>
  <p>Aqua America: 610-328-7718, on Sproul Road</p>
</section>
              
            
!

CSS

              
                *, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-color: #eee;
  margin: 0;
  padding: 0;
}

.container {
  width: 90%;

  margin: 0 auto;
}

h1 {
  text-align: center;
  font-size: 2rem;
}

p {
  font-size: 1.125rem;
}

.main {
  margin: 2em 0;
}

ol {
  margin: 0;
  padding: 0;
  text-align: center;
  list-style-position: inside;
}

ol > li {
  font-size: 0.9375rem;
  margin-bottom: 0.5em;
  margin-left: 1em;
}

.precinct {
  padding-left: 0.5em;
}

ol > li:nth-child(4)::after, ol > li:nth-child(7)::after, ol > li:nth-child(11)::after, ol > li:nth-child(14)::after, ol > li:nth-child(18)::after {
  content: '';
  display: block;
  height: 3px;
  width: 61.8%;
  margin: 0.5em auto 0;
  border-bottom: 1px solid rgb(0, 85, 136);
}

.update-warning {
  font-family: 'Courier New', Courier, monospace;
  color: red;
}

span > .black {
  color: #000;
}

@media (min-width: 25.625em) {
  ol > li {
    font-size: 1rem;
  }
}

@media (min-width: 33.75em) {
  .text {
    text-transform: uppercase;
  }

  .container {
    width: 80%;
    max-width: 1000px;
  }
}

@media (min-width: 47.625em) {

  ol > li {
    font-size: 1.25rem;
  }

  ol > li:nth-child(4)::after, ol > li:nth-child(7)::after, ol > li:nth-child(11)::after, ol > li:nth-child(14)::after, ol > li:nth-child(18)::after {
    width: 40%;
  }
}
              
            
!

JS

              
                // GitHub repo: https://github.com/Kernix13/springfieldleafpickup
// Website: https://kernixwebdesign.com/

let startYr = 2021;

// The 11 year cycle of schedules
const schedules = [
  ['4-1', '3-1', '7-2', '5-1', '6-2', '2-1', '1-3', '4-2', '3-3', '7-7', '5-7', '6-4', '6-3', '2-3', '1-1', '4-3', '3-2', '7-1', '5-2', '6-1', '2-2', '1-2'],
  ['2-2', '1-2', '4-1', '3-1', '7-2', '5-1', '6-2', '2-1', '1-3', '4-2', '3-3', '7-7', '5-7', '6-4', '6-3', '2-3', '1-1', '4-3', '3-2', '7-1', '5-2', '6-1'],
  ['5-2', '6-1', '2-2', '1-2', '4-1', '3-1', '7-2', '5-1', '6-2', '2-1', '1-3', '4-2', '3-3', '7-7', '5-7', '6-4', '6-3', '2-3', '1-1', '4-3', '3-2', '7-1'],
  ['3-2', '7-1', '5-2', '6-1', '2-2', '1-2', '4-1', '3-1', '7-2', '5-1', '6-2', '2-1', '1-3', '4-2', '3-3', '7-7', '5-7', '6-4', '6-3', '2-3', '1-1', '4-3'],
  ['1-1', '4-3', '3-2', '7-1', '5-2', '6-1', '2-2', '1-2', '4-1', '3-1', '7-2', '5-1', '6-2', '2-1', '1-3', '4-2', '3-3', '7-7', '5-7', '6-4', '6-3', '2-3'],
  ['6-3', '2-3', '1-1', '4-3', '3-2', '7-1', '5-2', '6-1', '2-2', '1-2', '4-1', '3-1', '7-2', '5-1', '6-2', '2-1', '1-3', '4-2', '3-3', '7-7', '5-7', '6-4'],
  ['5-7', '6-4', '6-3', '2-3', '1-1', '4-3', '3-2', '7-1', '5-2', '6-1', '2-2', '1-2', '4-1', '3-1', '7-2', '5-1', '6-2', '2-1', '1-3', '4-2', '3-3', '7-7'],
  ['3-3', '7-7', '5-7', '6-4', '6-3', '2-3', '1-1', '4-3', '3-2', '7-1', '5-2', '6-1', '2-2', '1-2', '4-1', '3-1', '7-2', '5-1', '6-2', '2-1', '1-3', '4-2'],
  ['1-3', '4-2', '3-3', '7-7', '5-7', '6-4', '6-3', '2-3', '1-1', '4-3', '3-2', '7-1', '5-2', '6-1', '2-2', '1-2', '4-1', '3-1', '7-2', '5-1', '6-2', '2-1'],
  ['6-2', '2-1', '1-3', '4-2', '3-3', '7-7', '5-7', '6-4', '6-3', '2-3', '1-1', '4-3', '3-2', '7-1', '5-2', '6-1', '2-2', '1-2', '4-1', '3-1', '7-2', '5-1'],
  ['7-2', '5-1', '6-2', '2-1', '1-3', '4-2', '3-3', '7-7', '5-7', '6-4', '6-3', '2-3', '1-1', '4-3', '3-2', '7-1', '5-2', '6-1', '2-2', '1-2', '4-1', '3-1']

];

// Get day of week for November 1st for the current year
const d = new Date();
const year = d.getFullYear();
let currentNovFirst = '11/01/' + year;
let novFirstDay = new Date(currentNovFirst).getDay();

// check the current year and update the startYr variable. This will create an accurate schedule until 2042, but will break the page starting on 1/1/2043.
if (year < 2032) {
  let startYr = 2021;
} else if (year >= 2032 && year <= 2042) {
  let startYr = 2032;
}

// For the current year, find the day of the week for the 1st of Nov then return the date for the first Monday in November 
switch (novFirstDay) {
  case 0:
    weekOne = new Date(`11/1/${year}`)
    break;
  case 1:
    weekOne = new Date(`11/1/${year}`)
    break;
  case 2:
    weekOne = new Date(`11/1/${year}`)
    break;
  case 3:
    weekOne = new Date(`11/1/${year}`)
    break;
  case 4:
    weekOne = new Date(`11/1/${year}`)
    break;
  case 5:
    weekOne = new Date(`11/1/${year}`)
    break;
  case 6:
    weekOne = new Date(`11/1/${year}`)
}


/* CALCULATING AND FORMATTING THE MONDAY DATES FOR THE 6 WEEKS */
let week1 = new Date(), week2 = new Date(), week3 = new Date(), week4 = new Date(), week5 = new Date(), week6 = new Date();

const format = { year: "numeric", month: "short", day: "numeric" };

week1.setTime(weekOne.getTime());
week1Format = week1.toLocaleDateString('en-us', format);

week2.setTime(week1.getTime() + 8 * 86400000);
week2Format = week2.toLocaleDateString('en-us', format);

/* SHOULD BE ABLE TO DO A forEach LOOP HERE */
week3.setTime(week2.getTime() + 7 * 86400000);
week3Format = week3.toLocaleDateString('en-us', format);

week4.setTime(week3.getTime() + 7 * 86400000);
week4Format = week4.toLocaleDateString('en-us', format);

week5.setTime(week4.getTime() + 7 * 86400000);
week5Format = week5.toLocaleDateString('en-us', format);

week6.setTime(week5.getTime() + 7 * 86400000);
week6Format = week6.toLocaleDateString('en-us', format);

/* Calculate 'schedules' index for the current year */
let yearDiff = year - startYr;
let currentYearSchedule = schedules[yearDiff];
let cys = currentYearSchedule;
const ol = document.getElementById("weekly_schedule");

/* Output the schedule and dates into the DOM */
for (let i = 0; i < cys.length; i++) {

  // span.dots is to add the dots that are used on the 2 PDF files I found online. That can be removed and replaced with an underline & underline-offset of 1px #bbb or ccc since the background of the site is #eee
  let outputBegin = `<li><span class="precinct">${cys[i]}</span><span class="dots">.........</span><span class="text">Collected the week of: </span><span class="date"><strong><em>`;

  const weekIndices1 = [0, 1, 2, 3];
  const weekIndices2 = [4, 5, 6];
  const weekIndices3 = [7, 8, 9, 10];
  const weekIndices4 = [11, 12, 13];
  const weekIndices5 = [14, 15, 16, 17];
  // let weekIndices6 = [18, 19, 20, 21];

  if (weekIndices1.includes(i)) {
    let outputEnd = `${week1Format}</em></strong></span></li>`;
    ol.insertAdjacentHTML("beforeend", outputBegin + outputEnd);
  } else if (weekIndices2.includes(i)) {
    let outputEnd = `${week2Format}</em></strong></span></li>`;
    ol.insertAdjacentHTML("beforeend", outputBegin + outputEnd);
  } else if (weekIndices3.includes(i)) {
    let outputEnd = `${week3Format}</em></strong></span></li>`;
    ol.insertAdjacentHTML("beforeend", outputBegin + outputEnd);
  } else if (weekIndices4.includes(i)) {
    let outputEnd = `${week4Format}</em></strong></span></li>`;
    ol.insertAdjacentHTML("beforeend", outputBegin + outputEnd);
  } else if (weekIndices5.includes(i)) {
    let outputEnd = `${week5Format}</em></strong></span></li>`;
    ol.insertAdjacentHTML("beforeend", outputBegin + outputEnd);
  } else {
    let outputEnd = `${week6Format}</em></strong></span></li>`;
    ol.insertAdjacentHTML("beforeend", outputBegin + outputEnd);
  }

};

/*
VARIABLES THAT WILL BREAK THE OUTPUT IF THEY CHANGE:
  1. An increase or decrease in the number of precincts
  2. A change in the order of precincts in the schedules array
  3. Week 1 leaf pickup date other than the first Monday in November
  4. An increase or decrease in the number of weeks for pickup

  VARIABLES THAT WILL BREAK THE OUTPUT IF THEY ARE NOT UPDATED:
  1. startYr - needs to be changed in year 11 for:
  2. yearDiff - this variable will be greater than 10 starting in 2032, therefore startYr has to change or use a loop to subtract 11 from yearDiff and recalculate it to get the correct schedules index
  3. updateDate - depends on the above 2 vars unless a loop is created for yearDiff. If that is done then the warning output below can be deleted.
*/

/* WARNING MESSAGE FOR DATE CHANGES IN LATE 2031 - change 12/01/31 to 12/01/21 to see it */
const updateDate = new Date(`12/01/31`);
const currentDate = new Date();
const updateWarning = document.getElementById("update_warning");

if (currentDate > updateDate) {
  updateWarning.innerHTML = '<span>If you see this message and it is 2032, then the schedule below is WRONG! You have to update the <em class="black">date</em> variable in <em class="black">leafpickup.js</em>. On line 1 of that file you will see: <em class="black">const startYr = 2021</em>. Change the year <em class="black">2021</em> to <em class="black">2032</em> for the schedule to be accurate for the next 11 years. In late <em class="black">2042</em> change it to <em class="black">2043</em> for the next 11 years, and so on... To make this warning message disappear, change the date in the variable at the bottom of the page (<em class="black">const updateDate = new Date(`12/01/21`)</em>) from <em class="black">12/01/31</em> to <em class="black">12/01/42</em>.</span>';
};
              
            
!
999px

Console