<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>농담 제조기.</title>
    <link rel="icon" type="image/png" href="favicon.png">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <button id="button">농담 하나 해줘.</button>
        <audio id="audio" controls hidden></audio>
    </div>
    <!-- Script -->
    <script src="voiceRSS.js"></script>
    <script src="script.js"></script>
</body>

</html>
/* ROBOT.GIF from Giphy - https://giphy.com/gifs/robot-cinema-4d-eyedesyn-3o7abtn7DuREEpsyWY */

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: 20px;
  box-shadow: 8px 8px 20px 10px rgba(227, 6, 6, 0.3);
}

button:hover {
  filter: brightness(80%);
}

button:active {
  transform: scale(1.2);
}

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;
  }

  button {
    box-shadow: 5px 5px 30px 20px rgba(0, 0, 0, 0.5);
  }
}
const button = document.getElementById('button');
const audioElement = document.getElementById('audio');

// 활성/비활성, 항상 값의 역을 받는다.
function toggleButton() {
  button.disabled = !button.disabled;
}

// VoiceRSS api 활용.
function tellMe(joke) {
  const jokeString = joke.trim().replace(/ /g, '%20');
  // VoiceRSS Speech Parameters
  VoiceRSS.speech({
    key: 'YOUR_API_KEY_HERE',
    src: jokeString,
    hl: 'en-us',
    r: 0,
    c: 'mp3',
    f: '44khz_16bit_stereo',
    ssml: false,
  });
}

// 농담 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;
    }
    // VoiceRSS API에게 농담 전달.
    tellMe(joke);
    // 버튼 비활성화
    toggleButton();
  } catch (error) {
    // Catch Error Here
  }
}

// Event Listeners
button.addEventListener('click', getJokes);
audioElement.addEventListener('ended', toggleButton);
//ended는 재생이 종료되었을 떄의 이벤트이다.
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.