JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<table>
<tr>
<th class="current">Today</th>
</tr>
<tr>
<td class="current"><div id="today"></div></td>
</tr>
</table>
<br>
<form name="estimatedTime">
<table>
<tr>
<td>Weeks:</td>
<td><input type="text" maxlength=2 id="expTimeinWeeks" name="expTimeinWeeks" value=14></td>
</tr>
<tr>
<td>Date:</td>
<td><input type="date" name="date" id="date"></td>
</tr>
<table>
<input id="update" type="button" onclick="estimateDate(weeks=expTimeinWeeks.value, date=date.value); console.log('Form: ' + date.value);" value="Update"><br>
</form>
<br>
<table>
<tr>
<th class="estimate">Estimate</th>
</tr>
<tr>
<td class="estimate"><div id="expTime"></div></td>
</tr>
</table>
</div>
JavaScript
// Create function to change date.
function estimateDate(weeks=14, date=now) {
console.log("Input: " + date);
// create new variable 'estimate' with current date
var estimate = new Date(date);
console.log("Estimate: " + estimate);
// Convert to days
var inDays = weeks * 7
// Modify variable 'now' to be (current date time)+(expWeeks variable * 7)
estimate.setDate(estimate.getDate()+inDays);
console.log("Modified: " + estimate);
// Modify DOM 'expTime' with the updated date and return it.
return document.getElementById("expTime").innerHTML = estimate.toDateString();
};
// Set variable 'now' to the current date and time.
var now = new Date();
// Set variable 'expWeeks' to the time (in weeks) for an estimate from the text input "expTimeinWeeks"
var expWeeks = document.getElementById('expTimeinWeeks').value;
// Modify DOM 'today' with the current date and time.
document.getElementById("today").innerHTML = now.toDateString();
estimateDate(expWeeks, now);