Programming Challenge 11

by André Schappo

HTML

<div style="display:none;">

  Internationalised Programming Challenge 11
  تحدي البرمجة الدولية 11
  
  There are many calendar systems. The most widely used is the Gregorian calendar.
  
  When you click the button in the Results window, bottom right, my code will record your date and time and then display your date and time using different calendars. The first two text boxes use the Gregorian calendar.
  
  Your tasks are:
  1️⃣ identify the calendars used in text boxes ③ thru ⑧
  2️⃣ the last text box contains my own custom date. Which culture(s) would use such a calendar?
  3️⃣ add further text boxes where each uses a different calendar for display of your date and time
  4️⃣ make your own custom calendar. You could, for instance, make a custom calendar which starts when you were born. So, when you were 2 months old the date in your custom calendar would be year 0 and month 2. That is the age convention in the UK but in South Korea the birth date year would be 1.
  
  Note: There are differences between browsers with respect to how they display the date and time.
  
  I will not be giving my solution(s) to this challenge to anyone but I happy to guide people to solution(s) with a series of clues, one clue at a time. So, if you cannot solve this challenge, please email me or if you do not know my email address, tweet me @andreschappo or contact me on Weibo 微博 @schappo for a clue. It is my belief and personal experience that you will learn much more this way rather than me just giving you my solution(s).
  
  Please let me know if you find any typos or bugs.

  André Schappo

</div>

<input type="button" value="I would be most grateful if you clicked me" class="단추" onclick="writeDates();" />

<br /><br />
<input type="text" id="日期一" class="dateClass" size="40" readonly />
<br /><br />
<input type="text" id="日期二" class="dateClass" size="40" readonly />
<br /><br />
<input type="text" id="日期三" class="dateClass" size="40" readonly />
<br /><br />
<input...

CSS

body{
  background-color:Thistle;
}
.dateClass{
  font-size:18pt;
  text-align:center;
  margin-left:0.6em;
  padding-left:0;
}
.단추{
  font-family:monospace;
  margin:2px 0 0 2px;
  font-size:14pt;
  border-radius:12px;
  box-shadow: 3px 3px gray;
  background-color:LightPink;
}
.단추:hover{
  background-color:#ffffbb;
  cursor:pointer;
}
.图像{
  vertical-align:text-bottom;
}

JavaScript

function getAnimal(datey){
  var startDate="",
      endDate="",
      中国新年=
        [
          {"动物":"🐓",
           "开始日期":"January 28, 2017",
           "结束日期":"February 16, 2018"
          },
          {"动物":"🐕",
           "开始日期":"February 16, 2018",
           "结束日期":"February 5, 2019"
          },
          {"动物":"🐖",
           "开始日期":"February 5, 2019",
           "结束日期":"January 25, 2020"
          },
          {"动物":"🐀",
           "开始日期":"January 25, 2020",
           "结束日期":"February 12, 2021"
          },
          {"动物":"🐂",
           "开始日期":"February 12, 2021",
           "结束日期":"February 1, 2022"
          },
          {"动物":"🐅",
           "开始日期":"February 1, 2022",
           "结束日期":"January 22, 2023"
          },
          {"动物":"🐇",
           "开始日期":"January 22, 2023",
           "结束日期":"February 10, 2024"
          },
          {"动物":"🐉",
           "开始日期":"February 10, 2024",
           "结束日期":"January 29, 2025"
          },
          {"动物":"🐍",
           "开始日期":"January 29, 2025",
           "结束日期":"February 17, 2026"
          },
          {"动物":"🐎",
           "开始日期":"February 17, 2026",
           "结束日期":"February 6, 2027"
          },
          {"动物":"🐐",
           "开始日期":"February 6, 2027",
           "结束日期":"January 26, 2028"
          },
          {"动物":"🐒",
           "开始日期":"January 26, 2028",
           "结束日期":"February 13, 2029"
          }
        ];
  
  for(var i=0;i<中国新年.length;i++){
    startDate=new Date(Date.parse(中国新年[i].开始日期));
    endDate=new Date(Date.parse(中国新年[i].结束日期));
    if(datey>=startDate&&datey<=endDate)return 中国新年[i].动物;
  }
}

function customDate(datey){
  var dateyMilliseconds=datey.getTime(),
      中国时区差异毫秒=8*60*60*1000,
      browserTimezoneDiffMilliseconds=datey.getTimezoneOffset()*60*1000,
      datey2=new Date(dateyMilliseconds+中国时区差异毫秒+browserTimezoneDiffMilliseconds),
      html='<input type="text" class="dateClass" size="40" value='
          +getAnimal(datey2)
          +"年"
         ...