• Overview
  • The challenge
  • Screenshot
• My process
  • What I learned

This uses HTML/CSS/JS and the Advice Slip API to generate a random advice upon clicking the dice button.

Users should be able to:

• See hover states for all interactive elements on the page
• Generate a new piece of advice by clicking the dice icon

Took two hours from eyeing the specs of the design, to reviewing how the DOM works, to seeing how to use fetch API. Logging the data in the console really helped with debugging with displaying the content.

These are the example code for using fetch API that I got from the Rapid API documentation.

fetch(`YOUR-API`, {
	method: 'METHOD-NAME',
	body: JSON.stringify({
		payLoadkey: `value`
	})
})
	.then(res => {
		res = res.json();
	})
	.catch(err => {
		console.log(err);
	});