Created
March 4, 2014 00:12
-
-
Save marchawkins/9337521 to your computer and use it in GitHub Desktop.
Using javascript to retrieve a user's time, then convert it to a "fuzzy" value that sounds more conversational (ie. "half past two", "a quarter to seven", etc.). The 'time' is based on the user's system clock. For this test, click the **Get Time** button. The exact time will be displayed in the top field. The "fuzzy" time will be displayed below…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="row"> | |
<div class="col-md-2 col-sm-2 col-xs-2"> | |
<p><button class="btn btn-primary btn-sm" id="get-time-btn"><span>Get Time</span></button></p> | |
</div><!-- .col --> | |
<div class="col-md-10 col-sm-10 col-xs-10"> | |
<div class="panel panel-default"> | |
<div class="panel-heading">Response Status</div> | |
<div class="panel-body"> | |
<p>Exact time: <input id="exact-time" type="text" class="form-control"/></p> | |
<p>Fuzzy time: <textarea id="status" class="form-control"></textarea></p> | |
</div> | |
</div> | |
</div><!-- .col --> | |
</div><!-- .row --> | |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | |
<script> | |
"use strict"; | |
$(document).ready(function() { | |
// record button functionality | |
$("#get-time-btn").click(function(event){ | |
event.preventDefault(); | |
getFuzzyTime(); | |
}); | |
// function to speak a response | |
var speakText = function(response) { | |
// setup synthesis | |
var msg = new SpeechSynthesisUtterance(); | |
var voices = window.speechSynthesis.getVoices(); | |
msg.voice = voices[2]; // Note: some voices don't support altering params | |
msg.voiceURI = 'native'; | |
msg.volume = 1; // 0 to 1 | |
msg.rate = 1; // 0.1 to 10 | |
msg.pitch = 2; // 0 to 2 | |
msg.text = response; | |
msg.lang = 'en-US'; | |
speechSynthesis.speak(msg); | |
} | |
// define the 'what time is it' command/response | |
var getFuzzyTime = function() { | |
var weekdayNames = new Array(7); // create array containing names of days | |
weekdayNames[0] = "Sunday"; | |
weekdayNames[1] = "Monday"; | |
weekdayNames[2] = "Tuesday"; | |
weekdayNames[3] = "Wednesday"; | |
weekdayNames[4] = "Thursday"; | |
weekdayNames[5] = "Friday"; | |
weekdayNames[6] = "Saturday"; | |
var hourNames = new Array(13); // create array containing names of hours | |
hourNames[0] = "twelve"; // we need 'twelve' here to account for 'midnight' (hour 0) | |
hourNames[1] = "one"; | |
hourNames[2] = "two"; | |
hourNames[3] = "three"; | |
hourNames[4] = "four"; | |
hourNames[5] = "five"; | |
hourNames[6] = "six"; | |
hourNames[7] = "seven"; | |
hourNames[8] = "eight"; | |
hourNames[9] = "nine"; | |
hourNames[10] = "ten"; | |
hourNames[11] = "eleven"; | |
hourNames[12] = "twelve"; | |
var minuteNames = new Array(); // arrays for key minute values | |
minuteNames["5"] = 'five'; | |
minuteNames["10"] = 'ten'; | |
minuteNames["15"] = 'quarter'; | |
minuteNames["20"] = 'twenty'; | |
minuteNames["30"] = 'half'; | |
var prefixes = new Array(); | |
prefixes["to"] = 'to'; | |
prefixes["past"] = 'past'; | |
var suffixes = new Array(); // appended to the time string when hour is sharp ( :56 -> :04 ) | |
suffixes["sharp"] = "o'clock"; | |
var d = new Date(); // setup new Date object | |
var hours = d.getHours(); | |
var minutes = d.getMinutes(); | |
var minuteName = d.minuteNames; | |
var exactHours = hours; | |
var exactMinutes = minutes; | |
var meridian = 'am'; | |
var prefix = ''; | |
var suffix = ''; | |
var hourName = ''; | |
if(minutes <= 33) { | |
prefix = prefixes.past; | |
} else { | |
prefix = prefixes.to; | |
minutes = 60 - minutes; | |
hours++; | |
} | |
if(hours >= 12) { | |
hours = hours - 12; | |
exactHours = exactHours - 12; | |
meridian = 'pm'; | |
} | |
hourName = hourNames[hours]; | |
if (minutes < 4) { | |
minuteName = ""; | |
suffix = d.suffixes.sharp; | |
prefix = ""; | |
} else if (minutes < 8) { | |
minuteName = minuteNames['5']; | |
} else if (minutes < 13 ) { | |
minuteName = minuteNames['10']; | |
} else if ( minutes < 18 ) { | |
minuteName = minuteNames['15']; | |
} else if ( minutes < 27 ) { | |
minuteName = minuteNames['20']; | |
} else { | |
minuteName = minuteNames['30']; | |
} | |
var exactTime = exactHours + ':' + exactMinutes + meridian; | |
var fuzzyTime = minuteName + " " + prefix + " " + hourName + " " + suffix; | |
var response = 'It is '+fuzzyTime; | |
$("#exact-time").val(exactTime); // write the exact time for comparison | |
$("#status").text(response); // write the response to screen | |
speakText(response); // speak the response | |
}; | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment