Dad Jokes Generator JS project

index.html

<div class="container">
	<h3>Don't laugh challenge</h3>
	<div id="joke" class="joke"></div>
	<button id="get_joke" class="btn">Get Another Joke</button>
</div>

script.js

const jokeEl = document.getElementById('joke');
const get_joke = document.getElementById('get_joke');

get_joke.addEventListener('click', getJoke);

getJoke();

async function getJoke() {
	const jokeRes = await fetch('https://icanhazdadjoke.com/', {
		headers: {
			'Accept': 'application/json'
		}
	});
	const joke = await jokeRes.json();
	jokeEl.innerHTML = joke.joke;
}

style.css

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
	box-sizing: border-box;
}

body {
	background-color: #686de0;
	font-family: 'Muli', sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	margin: 0;
}

.container {
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 10px 20px rgba(0,0,0,0.1), 0 6px 6px rgba(0,0,0,0.1);
	padding: 50px 20px;
	text-align: center;
	max-width: 100%;
	width: 800px;
}

h3 {
	opacity: 0.5;
	letter-spacing: 2px;
	margin: 0;
}

.joke {
	font-size: 30px;
	letter-spacing: 1px;
	line-height: 40px;
	margin: 50px auto;
	max-width: 600px;
}

.btn {
	background-color: #9F68E0;
	border: 0;
	border-radius: 10px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1), 0 6px 6px rgba(0,0,0,0.1);
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	padding: 14px 40px;
}

.btn:active {
	transform: scale(0.98);
}

.btn:focus {
	outline: 0;
}