Joke-teller with Javascript

Joke-teller is a project with Javascript,based on VoiceRSS API and Joke API. 

Joke API 

VoiceRSS API

CODE SEPERATE BELOW:

HTML

The image is the initial pic,and it will replace to a gif file in JS.

The audio is the joke fetched from JokeAPI ,which is being hidden.

When click the button,the image will animate and the audio will play.

And the config.js file is for storage of API key,because of the security problem when deploying to Github.

CSS

Import the google font if you want.

Center the items inside of container.

Give button the stylish,such as hover,active and disabled.

When hovring button,the background dime.

When activing button,the size shrink.

When disable the button, the background dime further.

This is the responsive screen setting as you need.

JAVASCRIPT

First,get the APIKey from Voice RSS. After register, you will get free APIKey.
Choose the language of yours to download the SDK.

This code will generate the audio from text.

First , get the DOM from html.

Copy the code from document.

Asynchronous converting text-to-speech and play.  The "key" is for your private API Key,which I save it in the config.js and link in the html.

config.js

copy your key in the "".

When open the developer tool in browser,you won't see the key in the source file.When deploy to Github,just can ignore the config.js file.

In the voice RSS SDK, change the audioElement src to play,not play right away.

In order to get the joke text,with the JokeAPI, set the customer selections and click "send request".

Copy the URL in the apiUrl to fetch the data.

Because it will random jokes of single or two parts,it will have a problem when fetch the attribute"joke" when two part joke happend.

Two part

single 

So it's neccessary to decide the type of data, you can use typeof(),or if...else to decide the exsit of setup. Then excute the tellMe(). 

When click the button, the button is disabled which has the stylish in css file.

And Run the animateGif() to change the image src.When the button is disabled,the image change to gif,likewise.

Call the eventLisentner .

Deploy the project in Github with .gitignore.

Before doing anything,the files contains config.js file.

Then build the file named .gitignore and write down the file name,config,js.

After that,track the files,it won't show.

CODE Github