Changed title

README.md

@@ -1,4 +1,4 @@
-# Homework 3 - Software Prototyping ID311
+# Homework 3 - Functions and Recursion
 
 - Learn about functions, recursion and HTML elements.
 - _[Live demo](http://hwdemo.prototyping.id/hw3)_
@@ -16,3 +16,161 @@ In this assignment you are required to understand **functions and recursion**, a
 Clone the repository in your computer and you will find a few files and these instructions.
 
 You are on the `main` branch, but the code for this exercise and the instructions are inside the `develop` branch. Checkout (or switch to) the `develop`branch and you will see the main files `main.js` and `index.html` as well as the rest of the instructions. The file `main.js`contains some stub code to get you started. Do all your commits in the develop branch, then, when you are done, **merge** your changes in the `main` branch, before submitting.
+
+## Overview
+
+### 1. Graphical User Interface
+
+- The user should be able to pick **any two dates between January 1st, 1900, and December 31st, 2100**.
+- The **days available in the dropdown depend on the month and year** that have been selected. For example, if February 1900 is selected, the days in the range 29-31 are not selectable.
+- **If the current day selected does not exist** in the subsequently selected month, the day should be **reset to 1**. For example, if the current selection is January 31, but then the user picks February, the currently selected day (31) is reset to 1.
+- If the start date is after the end date, the day difference is 0.
+- You can access the HTML elements using the document functions `getElementById`, `getElementsByClassName`, `getElementsByName`, `getElementsByTagName`, `getElementsByAttribute`, `querySelector`, etc. Once you have a reference to an HTML _element_, you can access its value as `element.value` and its HTML content with `element.innerHTML`. Here is a list of all the IDs used in the interface.
+- This image shows a list of all the IDs for input elements (in <span style="background:red">red</span>) and for output elements (in <span style="background:green">green</span>). The **inputs** are: `day1`, `month1`, `day2`, `month2` (the dropdowns); `year1` and `year2` (the sliders); `iteration` and `recursion` (the radio buttons); and `button`. The **outputs** are displayed on the right side and they are `date1` and `date2` (they show the selected date in the format _day/month/year_); `weekday1` and `weekday2` (the days of the week for the two dates); and `days` (the computed result).
+
+<p align="center">
+<img src="assets/ids.png" height="450" />
+</p>
+
+### 2. Computing the days between two dates
+
+In this assignment you need to implement the code for different functions. You can create more functions, but the one listed below should also be included.
+
+#### `isLeapYear (year)`
+
+- _Input_: year as number (an integer)
+- _Returns_: boolean
+
+One solar year has the length of 365 days, 5 hours, 48 minutes and 47 seconds. Because this is rather dysfunctional, **a normal year has been given 365 days and a leap year 366 days**. At leap years February 29th is added, which doesn't exist in a normal year. **A leap year is every 4 years, but not every 100 years, then again every 400 years**.
+
+So, notice that 1900 is not a leap year, and so 2100, but 2000 is leap divisible by 400.
+
+The function `isLeapYear` returns true if the supplied year is a leap year (366 days long), otherwise it is a normal year and the function should return false.
+
+**Example**:
+
+```js
+isLeapYear(1980); //-> returns true
+isLeapYear(2014); //-> returns false
+```
+
+---
+
+#### `computeDaysInMonth (month, year)`
+
+- _Input_: month and year as numbers
+- _Returns_: number
+
+Returns the number of days in the selected month. The year is supplied so that in case of leap year, February should return 29 days.
+
+**Example**:
+
+```js
+computeDaysInMonth(2, 1980); //-> returns 29
+computeDaysInMonth(2, 1981); //-> returns 28
+computeDaysInMonth(12, 2018); //-> returns 31
+```
+
+---
+
+#### `computeDaysInYear (year)`
+
+#### `computeDaysSinceBeginningYear (day, month, year)`
+
+#### `computeDaysLeftYear ( day, month, year)`
+
+- _Input_: day, month, year are all number
+- _Returns_: number
+
+`computeDaysInYear` computes the number of days in the year (365 or 366, depending if it is a normal year or a leap year) **that day included**.
+`computeDaysSinceBeginningYear` returns the number of days since the beginning of the year that day **included**.
+`computeDaysLeftYear` returns the number of days left until the end of the year that day **included**.
+
+**Example**:
+
+```js
+computeDaysInYear(2014); //-> returns 365
+computeDaysSinceBeginningYear(31, 1, 2014); //->  returns 31
+computeDaysLeftYear(31, 1, 2014); //-> returns 335
+```
+
+Therefore, **Note that** 31 + 335 **-1** is = 365. The **-1** is needed because we considered the starting date twice (both computeDays functions are until the end day _included_!)
+
+#### `computeDaysBetweenDatesIter (fromDay, fromMonth, fromYear, toDay, toMonth, toYear)`
+
+#### `computeDaysBetweenDatesRec (fromDay, fromMonth, fromYear, toDay, toMonth, toYear)`
+
+- _Input_: fromDay, fromMonth, fromYear, toDay, toMonth, toYear are all Numbers
+- _Returns_: Number
+
+These functions return the number of days between two dates **excluding** the end date. They account for leap years. The first function works using loops to iterate through the years between fromYear and toYear. The second function is recursive and **cannot use** loops, though it might call other functions you developed (see the one above in this list) which contain loops.
+
+**Example**:
+
+```js
+// Iterative
+computeDaysBetweenDatesIter(12, 7, 1910, 23, 4, 2014); //-> returns 37906
+computeDaysBetweenDatesIter(12, 7, 1910, 12, 7, 1910); //-> returns 0 // same date
+computeDaysBetweenDatesIter(15, 6, 2000, 12, 7, 1900); //-> returns 0 // start date > end date
+
+// Recursive
+computeDaysBetweenDatesRec(12, 7, 1910, 23, 4, 2014); //-> returns 37906
+computeDaysBetweenDatesRec(12, 7, 1910, 12, 7, 1910); //-> returns  // same date
+computeDaysBetweenDatesRec(15, 6, 2000, 12, 7, 1900); //-> returns 0 // start date > end date
+```
+
+---
+
+#### `getDayOfWeek (day, month, year)`
+
+- _Input_: day, month, year
+- _Returns_: String
+
+There are 7 days of the week, each indicated using a string: “Mon”, “Tue”, “Wed”, “Thu”, “Fri”, “Sat”, and “Sun”. This function takes the reference date (1 January 1900) and its corresponding day of the week ‘Mon’ (Monday) and uses this information to find the day of the week of the input date (day, month, year). Underneath, you can use either `computeDaysBetweenDatesRec` or `computeDaysBetweenDatesIter`.
+
+**Example**:
+
+```js
+getDayOfWeek(12, 7, 1910); //-> returns as result ‘Tue’ for Tuesday
+getDayOfWeek(29, 2, 1980); //-> returns 'Fri' for Friday
+getDayOfWeek(1, 1, 1900); //-> returns ‘Mon’ for MOnday
+```
+
+---
+
+## Tips
+
+1. It will be easier if you develop the functions in the order they are explained in these instructions. The best practice is to develop pieces of functionalities that you can re-use in other parts of the program. For example, the function `getDayOfWeek` will require you to compute first `computeDaysBetweenDates` (recursive or iterative). So you can call the function `computeDaysBetweenDates` inside the body of the function `getDayOfWeek`. **Avoid copying and pasting**; instead, call functions that you have defined before!
+
+2. `computeDaysBetweenDatesRec` is the hardest of the functions of this assignment. It is a recursive function. Try to identify the base case first. What about the recursive case?
+
+## About grading
+
+The maximum score of this assignment is 100 points, divide in this way:
+
+1. The graphical user interface (input controllers and output text) is working (15%).
+2. All functions **except** `computeDaysBetweenDatesRec` are working (50%).
+3. The function `computeDaysBetweenDatesRec` is working (20%).
+4. Submit your local repository with your code (the hidden .git folder). There should be at least 10 commits in a branch called `develop`, which is finally merged back to `main` (10%).
+5. The [SubmissionNotes](./SubmissionNotes.md) file (5%).
+
+If the program does not compile (e.g., not a valid JavaScript file), the score is 0. If it runs, the score is inversely proportional to the number of errors. If the code has runtime errors (crash), there is a 20-point penalty, plus a penalty for any additional part that cannot be checked.
+
+## How to submit
+
+<p align="center">
+<img src="assets/submission.png" width="600" />
+</p>
+
+1. After completing your code, make sure to fill out the [Submission Notes](./SubmissionNotes.md) with your basic info and indicate whether you received any help. Feel free to add any relevant information.
+2. Zip the folder of this repository containing your solution.
+3. Submit the homework using the class [submission system](https://homework.designware.xyz). Choose `HW3`.
+4. For any problems, feel free to contact the professor or TA via Discord.
+
+**NOTES**
+
+- Only submissions made through the system will be considered (e.g., no direct emails to the TA or Prof).
+- You can resubmit as many times as you want; only the last submission will be considered.
+- Submissions after the deadline (even a few minutes) will receive a penalty of 20%. Submissions made after 24 hours from the deadline will be ignored (score will be 0).
+- Keep a screenshot that proves your completed submission.
+- Coding style may be considered in grading.

index.html

@@ -0,0 +1,280 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="js/p5.js"></script>
+    <script src="js/p5.dom.min.js"></script>
+    <script src="js/p5.sound.min.js"></script>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+
+    <meta charset="utf-8" />
+  </head>
+
+  <body>
+    <div class="container">
+      <main>
+        <!-- TITLE -->
+        <div class="py-5 text-center">
+          <h1 class="d-block mx-auto mb-4 icon">📅</h1>
+          <h2>Day difference calculator</h2>
+          <p class="lead">
+            Select two dates and compute how many days there are in between
+          </p>
+        </div>
+
+        <!-- Controllers and side panel -->
+        <div class="row g-5">
+          <!-- LEFT-SIDE INPUT CONTROLLERS -->
+          <div class="col-md-7 col-lg-8">
+            <form>
+              <!-- Start date -->
+              <h4 class="mb-3">Start date</h4>
+
+              <!-- Day Month Year -->
+              <div class="row g-3">
+                <div class="col-md-3">
+                  <label for="day1" class="form-label">Day</label>
+                  <select class="form-select" id="day1" required>
+                    <option value="1">1</option>
+                    <option value="2">2</option>
+                    <option value="3">3</option>
+                    <option value="4">4</option>
+                    <option value="5">5</option>
+                    <option value="6">6</option>
+                    <option value="7">7</option>
+                    <option value="8">8</option>
+                    <option value="9">9</option>
+                    <option value="10">10</option>
+                    <option value="11">11</option>
+                    <option value="12">12</option>
+                    <option value="13">13</option>
+                    <option value="14">14</option>
+                    <option value="15">15</option>
+                    <option value="16">16</option>
+                    <option value="17">17</option>
+                    <option value="18">18</option>
+                    <option value="19">19</option>
+                    <option value="20">20</option>
+                    <option value="21">21</option>
+                    <option value="22">22</option>
+                    <option value="23">23</option>
+                    <option value="24">24</option>
+                    <option value="25">25</option>
+                    <option value="26">26</option>
+                    <option value="27">27</option>
+                    <option value="28">28</option>
+                    <option value="29">29</option>
+                    <option value="30">30</option>
+                    <option value="31">31</option>
+                  </select>
+                </div>
+
+                <div class="col-md-3">
+                  <label for="month1" class="form-label">Month</label>
+                  <select class="form-select" id="month1" required>
+                    <option value="1">Jan</option>
+                    <option value="2">Feb</option>
+                    <option value="3">Mar</option>
+                    <option value="4">Apr</option>
+                    <option value="5">May</option>
+                    <option value="6">Jun</option>
+                    <option value="7">Jul</option>
+                    <option value="8">Aug</option>
+                    <option value="9">Sep</option>
+                    <option value="10">Oct</option>
+                    <option value="11">Nov</option>
+                    <option value="12">Dec</option>
+                  </select>
+                </div>
+
+                <div class="col-md-6">
+                  <label for="year1" class="form-label">Year</label>
+                  <div class="slider">
+                    <input
+                      type="range"
+                      class="form-range"
+                      min="1900"
+                      max="2100"
+                      value="1900"
+                      id="year1"
+                    />
+                    <span id="year1tooltip" class="yearValue">1900</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- End date -->
+              <h4 class="mt-4 mb-3">End date</h4>
+
+              <!-- Day Month Year -->
+              <div class="row g-3">
+                <div class="col-md-3">
+                  <label for="day2" class="form-label">Day</label>
+                  <select class="form-select" id="day2" required>
+                    <option value="1">1</option>
+                    <option value="2">2</option>
+                    <option value="3">3</option>
+                    <option value="4">4</option>
+                    <option value="5">5</option>
+                    <option value="6">6</option>
+                    <option value="7">7</option>
+                    <option value="8">8</option>
+                    <option value="9">9</option>
+                    <option value="10">10</option>
+                    <option value="11">11</option>
+                    <option value="12">12</option>
+                    <option value="13">13</option>
+                    <option value="14">14</option>
+                    <option value="15">15</option>
+                    <option value="16">16</option>
+                    <option value="17">17</option>
+                    <option value="18">18</option>
+                    <option value="19">19</option>
+                    <option value="20">20</option>
+                    <option value="21">21</option>
+                    <option value="22">22</option>
+                    <option value="23">23</option>
+                    <option value="24">24</option>
+                    <option value="25">25</option>
+                    <option value="26">26</option>
+                    <option value="27">27</option>
+                    <option value="28">28</option>
+                    <option value="29">29</option>
+                    <option value="30">30</option>
+                    <option value="31">31</option>
+                  </select>
+                </div>
+
+                <div class="col-md-3">
+                  <label for="month2" class="form-label">Month</label>
+                  <select class="form-select" id="month2" required>
+                    <option value="1">Jan</option>
+                    <option value="2">Feb</option>
+                    <option value="3">Mar</option>
+                    <option value="4">Apr</option>
+                    <option value="5">May</option>
+                    <option value="6">Jun</option>
+                    <option value="7">Jul</option>
+                    <option value="8">Aug</option>
+                    <option value="9">Sep</option>
+                    <option value="10">Oct</option>
+                    <option value="11">Nov</option>
+                    <option value="12">Dec</option>
+                  </select>
+                </div>
+
+                <div class="col-md-6">
+                  <label for="year2" class="form-label">Year</label>
+                  <div class="slider">
+                    <input
+                      type="range"
+                      class="form-range"
+                      min="1900"
+                      max="2100"
+                      value="1900"
+                      id="year2"
+                    />
+                    <span id="year2tooltip" class="yearValue">1900</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Spacer -->
+              <hr class="my-4" />
+
+              <!-- Checkboxes -->
+              <div class="form-check">
+                <input
+                  class="form-check-input"
+                  type="radio"
+                  name="computingMethod"
+                  value="0"
+                  id="iteration"
+                  checked
+                />
+                <label class="form-check-label">
+                  Compute date difference <b>iteratively</b>
+                </label>
+              </div>
+              <div class="form-check">
+                <input
+                  class="form-check-input"
+                  type="radio"
+                  name="computingMethod"
+                  value="1"
+                  id="recursion"
+                />
+                <label id="calculate_button" class="form-check-label">
+                  Compute date difference <b>recursively</b>
+                </label>
+              </div>
+
+              <!-- Button -->
+              <button
+                id="button"
+                class="w-100 btn btn-primary btn-lg mt-4"
+                type="submit"
+              >
+                Calculate
+              </button>
+            </form>
+          </div>
+
+          <!-- RIGHT-SIDE SUMMARY PANEL -->
+          <div class="col-md-5 col-lg-4 order-md-last">
+            <!-- Summary of results -->
+            <h4 class="d-flex justify-content-between align-items-center mb-3">
+              <span class="text-primary">Summary of results</span>
+            </h4>
+
+            <!-- Groups (rows) wtih info -->
+            <ul class="list-group mb-3">
+              <!-- Starting date -->
+              <li class="list-group-item d-flex justify-content-between lh-sm">
+                <div>
+                  <h6 class="my-0">Starting date day of week</h6>
+                  <small id="date1" class="text-muted"
+                    >day / month / year</small
+                  >
+                </div>
+                <span id="weekday1" class="text-muted">N/A</span>
+              </li>
+
+              <!-- Ending date -->
+              <li class="list-group-item d-flex justify-content-between lh-sm">
+                <div>
+                  <h6 class="my-0">Ending date day of week</h6>
+                  <small id="date2" class="text-muted"
+                    >day / month / year</small
+                  >
+                </div>
+                <span id="weekday2" class="text-muted">N/A</span>
+              </li>
+
+              <!-- Number of days in between -->
+              <li
+                class="list-group-item d-flex justify-content-between bg-light"
+              >
+                <div class="text-success">
+                  <h6 class="my-0">Number of days in between</h6>
+                  <small id="date1" class="text-muted"
+                    >Not including end date</small
+                  >
+                </div>
+                <span id="days" class="text-success">N/A</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </main>
+    </div>
+
+    <!-- Loading up the javascript code -->
+    <script defer type="module" src="./main.js"></script>
+  </body>
+</html>

main.js

@@ -0,0 +1,66 @@
+/**
+ * Homework 3
+ * Name: YOUR NAME
+ * ID: KAIST ID
+ */
+
+const day1 = document.getElementById('day1');
+const button = document.getElementById('button');
+// ... continue by yourself
+
+day1.oninput = function () {
+  const d1 = parseInt(day1.value);
+  console.log(d1);
+};
+
+button.addEventListener('click', function (event) {
+  event.preventDefault();
+  console.log('Click');
+});
+
+// Logic
+function isLeapYear(year) {
+  // PLACEHOLDER
+}
+
+function computeDaysInMonth(month, year) {
+  // PLACEHOLDER
+}
+
+function computeDaysInYear(year) {
+  // PLACEHOLDER
+}
+
+function computeDaysSinceBeginningYear(day, month, year) {
+  // PLACEHOLDER
+}
+
+function computeDaysLeftYear(day, month, year) {
+  // PLACEHOLDER
+}
+
+function computeDaysBetweenDatesIter(
+  fromDay,
+  fromMonth,
+  fromYear,
+  toDay,
+  toMonth,
+  toYear
+) {
+  // PLACEHOLDER
+}
+
+function computeDaysBetweenDatesRec(
+  fromDay,
+  fromMonth,
+  fromYear,
+  toDay,
+  toMonth,
+  toYear
+) {
+  // PLACEHOLDER
+}
+
+function getDayOfWeek(day, month, year) {
+  // PLACEHOLDER
+}

style.css

@@ -0,0 +1,18 @@
+.icon {
+  font-size: 8em;
+}
+
+.form-label {
+  display: block;
+}
+
+.slider {
+  display: flex;
+  align-items: center;
+}
+
+.yearValue {
+  width: 10%;
+  margin-left: 1em;
+  text-align: right;
+}