Programming in JavaScript
Posted by markhwebster on February 3rd, 2018 • 0 Comments
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
#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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
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 |