init develop
This commit is contained in:
parent
d5dd591053
commit
e807d8b0b6
280
index.html
Normal file
280
index.html
Normal file
|
|
@ -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>
|
||||
3
js/p5.dom.min.js
vendored
Normal file
3
js/p5.dom.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
28
js/p5.sound.min.js
vendored
Normal file
28
js/p5.sound.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
66
main.js
Normal file
66
main.js
Normal file
|
|
@ -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
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user