index.html

<!DOCTYPE html>
<html lang="es">
    <title>Jokes' API</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/css/botton.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <script defer src="js/index.js"></script>
</head>
<body>
    <main>
      <div class="weather">

      </div>
        <cite>A joke here</cite>

        <!--  buttons -->
        <section>
          <h2>How bad is this joke?</h2>
          <form>
              <fieldset>
                <input name="animals" type="radio" value="1" id="bad">
                <label for="bad">Bad!</label>
                <legend class="emoticon">😕</legend>
              </fieldset>
              <fieldset>
                <input name="animals" type="radio" value="2" id="normal">
                <label for="normal">mmmg</label>
                <legend class="emoticon">🤨</legend>
              </fieldset>
              <fieldset>
                <input name="animals" type="radio" value="3" id="good">
                <label for="good">Good</label>
                <legend class="emoticon">😂</legend>
              </fieldset>
            </form>
          </section>
        </div>


        <button class="more-jokes" type="button">Next bad joke</button>
    </main>
</body>
</html>