{"id":1830,"date":"2018-02-03T20:59:40","date_gmt":"2018-02-03T20:59:40","guid":{"rendered":"http:\/\/websterart.com\/wordpress\/?p=1830"},"modified":"2018-02-04T20:55:29","modified_gmt":"2018-02-04T20:55:29","slug":"programming-in-javascript","status":"publish","type":"post","link":"https:\/\/websterart.com\/wordpress\/2018\/02\/programming-in-javascript\/","title":{"rendered":"Programming in JavaScript"},"content":{"rendered":"<p>I&#8217;ve been studying JavaScript full time for a month. Sounds boring, but it&#8217;s something that should help make me a more valuable programmer. I take lots of breaks as they say it&#8217;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.<\/p>\n<p>I like the way JavaScript blends my existing web knowledge with dynamic functionality. I was working on a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/JavaScript\/Building_blocks\/conditionals\" target=\"_blank\" rel=\"noopener\">calendar lesson<\/a> that dynamically populates a calendar with the correct number of days in a month. I didn&#8217;t like the example in the lesson because they had 4 days in a week, which was just dumb.<\/p>\n<p>I&#8217;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.<\/p>\n\n<!-- iframe plugin v.6.0 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"http:\/\/websterart.com\/html\/study-js-calendar.html\" width=\"350\" height=\"380\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<p>The relevant html:<\/p>\n<pre class=\"lang:default decode:true \">    &lt;select id=\"theCalendar\"&gt;\r\n      &lt;option value=\"\"&gt;--choose--&lt;\/option&gt;\r\n      &lt;option value=\"january\"&gt;January&lt;\/option&gt;\r\n      &lt;option value=\"february\"&gt;February&lt;\/option&gt;\r\n      &lt;option value=\"march\"&gt;March&lt;\/option&gt;\r\n      &lt;option value=\"april\"&gt;April&lt;\/option&gt;\r\n      &lt;option value=\"may\"&gt;May&lt;\/option&gt;\r\n      &lt;option value=\"june\"&gt;June&lt;\/option&gt;\r\n      &lt;option value=\"july\"&gt;July&lt;\/option&gt;\r\n      &lt;option value=\"august\"&gt;August&lt;\/option&gt;\r\n      &lt;option value=\"september\"&gt;September&lt;\/option&gt;\r\n      &lt;option value=\"october\"&gt;October&lt;\/option&gt;\r\n      &lt;option value=\"november\"&gt;November&lt;\/option&gt;\r\n      &lt;option value=\"december\"&gt;December&lt;\/option&gt;\r\n\r\n    &lt;\/select&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>The important css:<\/p>\n<pre class=\"lang:default decode:true\">    \r\n     #calendar {\r\n      display: grid;\r\n      grid-template-columns: 14.08% 14.08% 14.08% 14.08% 14.08% 14.08% 14.08%;\r\n      grid-template-rows: 44px 44px 44px 44px 44px;\r\n      grid-row-gap: 1px;\r\n      grid-column-gap: 1px;\r\n      background-color: rgb(180, 181, 181);\r\n      margin: 0;\r\n      padding: 0.2em;\r\n      \/* width: 370px; *\/\r\n    }\r\n    #calendar li {\r\n      width: auto;\r\n      height: auto;\r\n      background-color: white;\r\n      display: flex;\r\n      align-items: center;\/*vertical*\/\r\n      justify-content: center;\/*horeeeeezontal*\/\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>The JavaScript:<\/p>\n<pre class=\"lang:default decode:true \">var select = document.querySelector('select');\r\nvar h1 = document.querySelector('h1');\r\n\r\n\/\/begin random number generator\r\nfunction random(number) {\r\n\r\n  \/\/ the plus 1 keeps the number 1 or higher\r\n  return Math.floor(Math.random()*(number+1));\r\n}\r\n function bgChange(){\r\n   \/\/ ie: rgb(200, 156, 50)\r\n  return 'rgb(' + random(255) + ', ' + random(255) + ', ' + random(255) + ')';\r\n}\r\n\r\nvar calendar = document.getElementById('calendar');\r\n\r\n\r\n\r\nselect.addEventListener('change', createCalendar);\r\nvar days = 0;\r\nfunction createCalendar(){\r\n  var choice = select.value;\r\n  calendar.innerHTML = '';\r\n  if(choice === 'january' || choice === 'march' ||\r\n  choice === 'may' || choice === 'july' ||\r\n  choice === 'august' || choice === 'october' ||\r\n   choice === 'december' ) {\r\n    days = 31;\r\n  } else if (choice === 'april' || choice === 'june' ||\r\n   choice === 'september' || choice === 'november'){\r\n    days = 30;\r\n  } else if (choice === 'february'){\r\n    days = 28;\r\n  } else {\r\n    days = 0;\r\n  }\r\n  for(let i = 1; i &lt; days+1; i++){\/\/darn start at zero problem fixed by adding 1\r\n\r\n  \/\/makes virtual &lt;li&gt;&lt;\/li&gt; but doesn't use it in DOM yet\r\n    var listItem = document.createElement(\"li\");\r\n\r\n    \/\/makes a virtual text element from current value of i, but doesn't use it in DOM yet\r\n    var whichDay = document.createTextNode(i);\r\n\r\n    \/\/ appends or inserts day of month  \"i\" in virtual &lt;li&gt;i&lt;\/li&gt;\r\n    listItem.appendChild(whichDay);\r\n\r\n    \/\/inserts the virtual \"li\" with day of month into &lt;ul&gt; dom element so it can be seen\r\n    calendar.appendChild(listItem);\r\n  }\r\n\r\n\r\n  \/\/console.log(days);\r\n  \/\/console.log(choice);\r\n  switch (choice) {\r\n    case 'january':\r\n      h1.textContent ='January';\r\n      break;\r\n    case 'february':\r\n      h1.textContent ='February';\r\n      break;\r\n    case 'march':\r\n      h1.textContent ='March';\r\n      break;\r\n    case 'april':\r\n      h1.textContent ='April';\r\n      break;\r\n    case 'may':\r\n      h1.textContent ='May';\r\n      break;\r\n    case 'june':\r\n      h1.textContent ='June';\r\n      break;\r\n    case 'july':\r\n      h1.textContent ='July';\r\n      break;\r\n    case 'august':\r\n      h1.textContent ='August';\r\n      break;\r\n    case 'september':\r\n      h1.textContent ='September';\r\n      break;\r\n    case 'october':\r\n      h1.textContent ='October';\r\n      break;\r\n    case 'november':\r\n      h1.textContent ='November';\r\n      break;\r\n    case 'december':\r\n      h1.textContent ='December';\r\n      break;\r\n    default:\r\n      h1.textContent ='make a choice';\r\n  }\r\n  \/\/ rgb(200, 156, 50) begin random color clicker function on &lt;li&gt;\r\n\r\n\r\n   \/\/cycles thru all the &lt;li&gt; and makes an array\r\n  var lis = document.querySelectorAll('li');\r\n\r\n  \/\/loops thru all the &lt;li&gt; and sets up onclick\r\n  for (let i = 0; i &lt; lis.length; i++){\r\n    lis[i].onclick = function(e) {\r\n      \/*'e' basically means 'this'. So they click a calendar day,\r\n      the &lt;li&gt;, via this\/e feels it. To the &lt;li&gt; it adds style=\"background-color: rgb();\"\r\n      and uses an rgb value of bgChange(), which is a function that\r\n      returns rgb(200, 156, 50), or random values of those\r\n      *\/\r\n      e.target.style.backgroundColor = bgChange();\r\n    }\r\n\r\n  }\r\n\r\n}\/\/end createCalendar function\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve been studying JavaScript full time for a month. Sounds boring, but it&#8217;s something that should help make me a more valuable programmer. I take lots of breaks as they say it&#8217;s not healthy to stare at a computer for too long. I run downstairs for more coffee, walk out to the shed to do [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,179],"tags":[182],"class_list":["post-1830","post","type-post","status-publish","format-standard","hentry","category-blog","category-programming","tag-css-display-grid-calendar"],"_links":{"self":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/posts\/1830","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/comments?post=1830"}],"version-history":[{"count":6,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/posts\/1830\/revisions"}],"predecessor-version":[{"id":1836,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/posts\/1830\/revisions\/1836"}],"wp:attachment":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/media?parent=1830"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/categories?post=1830"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/tags?post=1830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}