Roundhouse kicked to the gut

My challenge this time around was to create a random joke generator. I think it was obvious it had to be about Chuck Norris my life would be on the line otherwise. The goals I had in mind were to create an app with a button that would supply the user with a Chuck Norris inspired joke. I created the functionality of that button with these three separate functions:

Using these functions I created a callback function that called all three when the button was clicked which displays a random joke.

To add some more user interaction I created a comment section allowing user opinions to be displayed. After doing research I got help to create this code:

Post comment function

I definitely ran into a few issues when creating the app. First were the event listeners which tell the buttons to execute a task when an action happens. I this case the action is when the button is “clicked”. The event listener method was able to be added to the buttons because the html wasn’t fully loaded. That means there wasn’t a button created yet to add an event to. My solution was to wrap the event listener methods in a window.onload event so the html loads first and creates a button so the javascript can add methods to.

window.onload event

The second problem was creating my jokes and putting them on the DOM. Everytime the user would press the button to generate a joke it would create an ongoing list of joke text crowding the web page instead of getting rid of the last joke and displaying a new one. What I did was hard coded a <p> element and added this to my code:

remove first <p> element of <div>
joke display function

The p.remove took away the first and only <p> element within the <div> container erasing the previous joke within that element and the rest of the function created a new joke.

Overall the creation of the app was an interesting project as it tested my ability to use data from an api.

Ideas cooked in creativity.