I found some code to put a stopwatch on a site page. I want the user to enter their name and the task they are performing and start the timer.
When they stop the timer I want the Name, Task and Time to be sent to a list. I have the Name and Task going to the list but not the time.
Can anyone take a look at my script and tell me what I have to do to write my stopwatch time to the list with the Name and Task?
<div>
<p><label style="width: 100px; height: 50px; font-size: large; font: bold;">Your Name</label>
<input type="text" id="txtName" style="width: 150px;" /></p>
<p><label style="width: 100px; height: 50px; font-size: large; font: bold;">Task</label>
<input type="text" id="txtTask" style="width: 150px;" /></p>
<input type="button" onclick="startWatch()" value="START" />
<input type="button" onclick="stopWatch()" value="STOP" />
<input type="button" onclick="resetWatch()" value="RESET" />
<input type="button" id="btnSave" value="Save" onclick="createListItem();" />
</div>
<p id="res"><span id="min">0</span> : <span id="sec">00</span> : <span id="msec">000</span></p>
<script type="text/javascript">
var timer = null;
var min_txt = document.getElementById("min");
var min = Number(min_txt.innerHTML);
var sec_txt = document.getElementById("sec");
var sec = Number(sec_txt.innerHTML);
var msec_txt = document.getElementById("msec");
var msec = Number(msec_txt.innerHTML);
function stopTimeMilliseconds(timer) {
if (timer) {
clearInterval(timer);
return timer;
}
else return timer;
}
function startTimeMilliseconds() {
var currDate = new Date();
return currDate.getTime();
}
function getElapsedTimeMilliseconds(startMilliseconds) {
if (startMilliseconds > 0) {
var currDate = new Date();
elapsedMilliseconds = (currDate.getTime() - startMilliseconds);
return elapsedMilliseconds;
}
else {
return elapsedMilliseconds = 0;
}
}
function startWatch() {
// START TIMER
timer = stopTimeMilliseconds(timer);
var startMilliseconds = startTimeMilliseconds();
timer = setInterval(function() {
var elapsedMilliseconds = getElapsedTimeMilliseconds(startMilliseconds);
if (msec < 10) {
msec_txt.innerHTML = "00" + msec;
}
else if (msec < 100) {
msec_txt.innerHTML = "0" + msec;
}
else {
msec_txt.innerHTML = msec;
}
if (sec < 10) {
sec_txt.innerHTML = "0" + sec;
}
else {
sec_txt.innerHTML = sec;
}
min_txt.innerHTML = min;
msec = elapsedMilliseconds;
if (min >= 59 && sec >=59 && msec > 900) {
timer = stopTimeMilliseconds(timer);
return true;
}
if (sec > 59) {
sec = 0;
min++;
}
if (msec > 999) {
msec = 0;
sec++;
startWatch();
}
}, 10);
}
function stopWatch() {
// STOP TIMER
timer = stopTimeMilliseconds(timer);
return true;
}
function resetWatch() {
// REZERO TIMER
timer = stopTimeMilliseconds(timer);
msec_txt.innerHTML = "000";
msec = 0;
sec_txt.innerHTML = "00";
sec = 0;
min_txt.innerHTML = "0";
min = 0;
return true;
}
function createListItem() {
var siteUrl = 'My Site URL Goes Here';
var name = document.getElementById('txtName').value;
var task = document.getElementById('txtTask').value;
var time = document.getElementById('min').value;
var clientContext = new SP.ClientContext(siteUrl);
var oList = clientContext.get_web().get_lists().getByTitle('Time Keeper');
var itemCreateInfo = new SP.ListItemCreationInformation();
this.oListItem = oList.addItem(itemCreateInfo);
oListItem.set_item('Task', task);
oListItem.set_item('Time', time);
oListItem.set_item('Name', name);
oListItem.update();
clientContext.load(oListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded() {
alert(oListItem)
alert('Item created Successfully !!!!');
document.getElementById("txtName").value = "";
document.getElementById('txtTask').value = "";
document.getElementById('res').value = "";
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}