Webster Art

I’ve been studying JavaScript full time for a month. Sounds boring, but it’s something that should help make me a more valuable programmer. I take lots of breaks as they say it’s not healthy to stare at a computer for too long. I run downstairs for more coffee, walk out to the shed to do pull ups, do my 50 daily sit ups, or pedal my schwinn airdyne for a lunch break.

I like the way JavaScript blends my existing web knowledge with dynamic functionality. I was working on a calendar lesson that dynamically populates a calendar with the correct number of days in a month. I didn’t like the example in the lesson because they had 4 days in a week, which was just dumb.

I’ve been keeping an eye on the latest trends and remembered that css grids could make a nice calendar. Here it is, with the code down below. I also added in a random color generator for the days. Click a day, and the background color of that list item will change.

The relevant html:

    <select id="theCalendar">
      <option value="">--choose--</option>
      <option value="january">January</option>
      <option value="february">February</option>
      <option value="march">March</option>
      <option value="april">April</option>
      <option value="may">May</option>
      <option value="june">June</option>
      <option value="july">July</option>
      <option value="august">August</option>
      <option value="september">September</option>
      <option value="october">October</option>
      <option value="november">November</option>
      <option value="december">December</option>

    </select>

 

The important css:

    
     #calendar {
      display: grid;
      grid-template-columns: 14.08% 14.08% 14.08% 14.08% 14.08% 14.08% 14.08%;
      grid-template-rows: 44px 44px 44px 44px 44px;
      grid-row-gap: 1px;
      grid-column-gap: 1px;
      background-color: rgb(180, 181, 181);
      margin: 0;
      padding: 0.2em;
      /* width: 370px; */
    }
    #calendar li {
      width: auto;
      height: auto;
      background-color: white;
      display: flex;
      align-items: center;/*vertical*/
      justify-content: center;/*horeeeeezontal*/
      margin: 0;
      padding: 0;
    }

 

The JavaScript:

var select = document.querySelector('select');
var h1 = document.querySelector('h1');

//begin random number generator
function random(number) {

  // the plus 1 keeps the number 1 or higher
  return Math.floor(Math.random()*(number+1));
}
 function bgChange(){
   // ie: rgb(200, 156, 50)
  return 'rgb(' + random(255) + ', ' + random(255) + ', ' + random(255) + ')';
}

var calendar = document.getElementById('calendar');



select.addEventListener('change', createCalendar);
var days = 0;
function createCalendar(){
  var choice = select.value;
  calendar.innerHTML = '';
  if(choice === 'january' || choice === 'march' ||
  choice === 'may' || choice === 'july' ||
  choice === 'august' || choice === 'october' ||
   choice === 'december' ) {
    days = 31;
  } else if (choice === 'april' || choice === 'june' ||
   choice === 'september' || choice === 'november'){
    days = 30;
  } else if (choice === 'february'){
    days = 28;
  } else {
    days = 0;
  }
  for(let i = 1; i < days+1; i++){//darn start at zero problem fixed by adding 1

  //makes virtual <li></li> but doesn't use it in DOM yet
    var listItem = document.createElement("li");

    //makes a virtual text element from current value of i, but doesn't use it in DOM yet
    var whichDay = document.createTextNode(i);

    // appends or inserts day of month  "i" in virtual <li>i</li>
    listItem.appendChild(whichDay);

    //inserts the virtual "li" with day of month into <ul> dom element so it can be seen
    calendar.appendChild(listItem);
  }


  //console.log(days);
  //console.log(choice);
  switch (choice) {
    case 'january':
      h1.textContent ='January';
      break;
    case 'february':
      h1.textContent ='February';
      break;
    case 'march':
      h1.textContent ='March';
      break;
    case 'april':
      h1.textContent ='April';
      break;
    case 'may':
      h1.textContent ='May';
      break;
    case 'june':
      h1.textContent ='June';
      break;
    case 'july':
      h1.textContent ='July';
      break;
    case 'august':
      h1.textContent ='August';
      break;
    case 'september':
      h1.textContent ='September';
      break;
    case 'october':
      h1.textContent ='October';
      break;
    case 'november':
      h1.textContent ='November';
      break;
    case 'december':
      h1.textContent ='December';
      break;
    default:
      h1.textContent ='make a choice';
  }
  // rgb(200, 156, 50) begin random color clicker function on <li>


   //cycles thru all the <li> and makes an array
  var lis = document.querySelectorAll('li');

  //loops thru all the <li> and sets up onclick
  for (let i = 0; i < lis.length; i++){
    lis[i].onclick = function(e) {
      /*'e' basically means 'this'. So they click a calendar day,
      the <li>, via this/e feels it. To the <li> it adds style="background-color: rgb();"
      and uses an rgb value of bgChange(), which is a function that
      returns rgb(200, 156, 50), or random values of those
      */
      e.target.style.backgroundColor = bgChange();
    }

  }

}//end createCalendar function