Skip to content

Instantly share code, notes, and snippets.

@marchawkins
Created March 4, 2014 00:12
Show Gist options
  • Save marchawkins/9337521 to your computer and use it in GitHub Desktop.
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…
<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