Created
March 4, 2014 07:51
-
-
Save marchawkins/9342015 to your computer and use it in GitHub Desktop.
Some simple javascript to retrieve the current date. The 'time' is based on the user's system clock. For this test, click the **Get Date** button. The date will be displayed and spoken to you.
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-date-btn"><span>Get Date</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>Current date: <input id="date" type="text" class="form-control"/></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-date-btn").click(function(event){ | |
event.preventDefault(); | |
getCurrDate(); | |
}); | |
// 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 getCurrDate = 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 monthNames = new Array(12); // create array containing names of months | |
monthNames[0] = "January"; | |
monthNames[1] = "February"; | |
monthNames[2] = "March"; | |
monthNames[3] = "April"; | |
monthNames[4] = "May"; | |
monthNames[5] = "June"; | |
monthNames[6] = "July"; | |
monthNames[7] = "August"; | |
monthNames[8] = "September"; | |
monthNames[9] = "October"; | |
monthNames[10] = "November"; | |
monthNames[11] = "December"; | |
var d = new Date(); // setup new Date object | |
var dayNum = d.getDate(); // get the day of the month | |
var dayName = weekdayNames[d.getDay()]; // get name of the day | |
var monthName = monthNames[d.getMonth()]; // get name of the month | |
var year = d.getFullYear(); // get 4-digit year | |
var ordinal = ""; | |
if(dayNum > 3 && dayNum < 21) { // determine correct ordinal based on day of month | |
ordinal = "th"; | |
} | |
switch (dayNum % 10) { | |
case 1: ordinal = "st"; | |
case 2: ordinal = "nd"; | |
case 3: ordinal = "rd"; | |
default: ordinal = "th"; | |
} | |
var response = dayName + ", " + monthName + " " + dayNum + ordinal +", " + year; | |
$("#date").val(response); // write date | |
speakText(response); // speak the response | |
}; | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment