diff --git a/favicon-32x32.png b/favicon-32x32.png
new file mode 100644
index 0000000..4508364
Binary files /dev/null and b/favicon-32x32.png differ
diff --git a/index.html b/index.html
index 8439f69..1548fc6 100644
--- a/index.html
+++ b/index.html
@@ -1,19 +1,19 @@
-
-
-
-
-
- Joke Teller
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ Joke Teller
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
index 7ca38ec..e97f556 100644
--- a/script.js
+++ b/script.js
@@ -1,47 +1,139 @@
const button = document.getElementById('button');
const audioElement = document.getElementById('audio');
+/* var promise = document.querySelector('audio').play();
+if (promise !== undefined) {
+promise.then(_ => {
+// Autoplay started!
+}).catch(error => {
+// Autoplay was prevented.
+// Show a "Play" button so that user can start playback.
+});
+} */
+
+// VoiceRSS Javascript SDK
+const VoiceRSS = {
+ speech: function(e) {
+ this._validate(e),
+ this._request(e)
+ },
+ _validate: function(e) {
+ if (!e)
+ throw "The settings are undefined";
+ if (!e.key)
+ throw "The API key is undefined";
+ if (!e.src)
+ throw "The text is undefined";
+ if (!e.hl)
+ throw "The language is undefined";
+ if (e.c && "auto" != e.c.toLowerCase()) {
+ var a = !1;
+ switch (e.c.toLowerCase()) {
+ case "mp3":
+ a = (new Audio).canPlayType("audio/mpeg").replace("no", "");
+ break;
+ case "wav":
+ a = (new Audio).canPlayType("audio/wav").replace("no", "");
+ break;
+ case "aac":
+ a = (new Audio).canPlayType("audio/aac").replace("no", "");
+ break;
+ case "ogg":
+ a = (new Audio).canPlayType("audio/ogg").replace("no", "");
+ break;
+ case "caf":
+ a = (new Audio).canPlayType("audio/x-caf").replace("no", "")
+ }
+ if (!a)
+ throw "The browser does not support the audio codec " + e.c
+ }
+ },
+ _request: function(e) {
+ var a = this._buildRequest(e)
+ , t = this._getXHR();
+ t.onreadystatechange = function() {
+ if (4 == t.readyState && 200 == t.status) {
+ if (0 == t.responseText.indexOf("ERROR"))
+ throw t.responseText;
+ /* new Audio(t.responseText).play() */
+ audioElement.src = t.responseText;
+ audioElement.play();
+ }
+ }
+ ,
+ t.open("POST", "https://api.voicerss.org/", !0),
+ t.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"),
+ t.send(a)
+ },
+ _buildRequest: function(e) {
+ var a = e.c && "auto" != e.c.toLowerCase() ? e.c : this._detectCodec();
+ return "key=" + (e.key || "") + "&src=" + (e.src || "") + "&hl=" + (e.hl || "") + "&r=" + (e.r || "") + "&c=" + (a || "") + "&f=" + (e.f || "") + "&ssml=" + (e.ssml || "") + "&b64=true"
+ },
+ _detectCodec: function() {
+ var e = new Audio;
+ return e.canPlayType("audio/mpeg").replace("no", "") ? "mp3" : e.canPlayType("audio/wav").replace("no", "") ? "wav" : e.canPlayType("audio/aac").replace("no", "") ? "aac" : e.canPlayType("audio/ogg").replace("no", "") ? "ogg" : e.canPlayType("audio/x-caf").replace("no", "") ? "caf" : ""
+ },
+ _getXHR: function() {
+ try {
+ return new XMLHttpRequest
+ } catch (e) {}
+ try {
+ return new ActiveXObject("Msxml3.XMLHTTP")
+ } catch (e) {}
+ try {
+ return new ActiveXObject("Msxml2.XMLHTTP.6.0")
+ } catch (e) {}
+ try {
+ return new ActiveXObject("Msxml2.XMLHTTP.3.0")
+ } catch (e) {}
+ try {
+ return new ActiveXObject("Msxml2.XMLHTTP")
+ } catch (e) {}
+ try {
+ return new ActiveXObject("Microsoft.XMLHTTP")
+ } catch (e) {}
+ throw "The browser does not support HTTP request"
+ }
+};
+
// Disable/Enable Button
function toggleButton() {
- button.disabled = !button.disabled;
+ button.disabled = !button.disabled;
}
-// VoiceRSS Speech Function
-function tellMe(joke) {
- const jokeString = joke.trim().replace(/ /g, '%20');
- // VoiceRSS Speech Parameters
- VoiceRSS.speech({
- // Normally, don't write out API Keys like this, but an exception made here because it's free.
- key: 'e985f868e96c46d9b0789c3855350152',
- src: jokeString,
- hl: 'en-us',
- r: 0,
- c: 'mp3',
- f: '44khz_16bit_stereo',
- ssml: false,
- });
+
+// Passing Joke to VoiceRSS API
+function tellMe(joke){
+ VoiceRSS.speech({
+ key: '108e0fd9249e4b8db2840b300950c58d',
+ src: joke,
+ hl: 'en-us',
+ r: 0,
+ c: 'mp3',
+ f: '44khz_16bit_stereo',
+ ssml: false
+ });
}
-// Get jokes from Joke API
-async function getJokes() {
- let joke = '';
- const apiUrl = 'https://sv443.net/jokeapi/v2/joke/Programming?blacklistFlags=nsfw,racist,sexist';
- try {
- const response = await fetch(apiUrl);
- const data = await response.json();
- // Assign One or Two Part Joke
- if (data.setup) {
- joke = `${data.setup} ... ${data.delivery}`;
- } else {
- joke = data.joke;
- }
- // Passing Joke to VoiceRSS API
- tellMe(joke);
- // Disable Button
- toggleButton();
- } catch (error) {
- // Catch Error Here
- }
+// Get Jokes from Joke API
+async function getJokes(){
+ let joke = '';
+ const apiUrl = 'https://v2.jokeapi.dev/joke/Programming?blacklistFlags=nsfw,religious,political,racist,sexist,explicit';
+ try {
+ const response = await fetch(apiUrl);
+ const data = await response.json();
+ if (data.setup){
+ joke = `${data.setup} ... ${data.delivery}`;
+ } else {
+ joke = data.joke;
+ }
+ // Text-to-Speech
+ tellMe(joke);
+ // Disable Button
+ toggleButton();
+ } catch (error) {
+ // Catch Errors
+ console.log('whoops,', error); }
}
// Event Listeners
diff --git a/style.css b/style.css
index 7a0be84..2d65230 100644
--- a/style.css
+++ b/style.css
@@ -4,59 +4,59 @@ html {
box-sizing: border-box;
}
-body {
- margin: 0;
- background: #45badd;
-}
-
-.container {
- height: 100vh;
- width: 100vw;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- background: url('./robot.gif');
- background-size: contain;
- background-position: left center;
- background-repeat: no-repeat;
-}
-
-button {
- cursor: pointer;
- outline: none;
- width: 200px;
- height: 50px;
- font-family: Courier, monospace;
- font-size: 20px;
- color: white;
- background: #ff3482;
- border: none;
- border-radius: 5px;
- box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.2);
+body{
+ margin: 0;
+ background: #45badd;
+}
+
+.container{
+ height: 100vh;
+ width: 100vw;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background: url('./robot.gif');
+ background-size: contain;
+ background-position: left center;
+ background-repeat: no-repeat;
+}
+
+button{
+ cursor: pointer;
+ outline: none;
+ width: 200px;
+ height: 50px;
+ font-family: 'Courier New', Courier, monospace;
+ font-size: 20px;
+ color: white;
+ background: #ff3482;
+ border: none;
+ border-radius: 5px;
+ box-shadow: 2px 2px 20px 10px rgba(0,0,0,0.2);
}
button:hover {
- filter: brightness(95%);
+ filter: brightness(105%);
}
button:active {
- transform: scale(0.98);
+ transform: scale(0.98)
}
-button:disabled {
- cursor: default;
- filter: brightness(30%);
+button:disabled{
+ cursor: default;
+ filter: brightness(30%)
}
-/* Media Query: Tablet or Smaller */
-@media screen and (max-width: 1000px) {
- .container {
- background-position: center center;
- background-size: cover;
- }
+/* media Query: tablet or smaller */
+@media screen and (max-width:1000px){
+ .container {
+ background-position: center center;
+ background-size: cover;
+ }
- button {
- box-shadow: 5px 5px 30px 20px rgba(0, 0, 0, 0.5);
- }
-}
+ button {
+ box-shadow: 5px 5px 30px 20px rgba(0,0,0,0.5);
+ }
+}
\ No newline at end of file