Home
Blogger Widgets

Riddle of the Day widget for blogger blog

Class with Mason
  1. Navigate to the Theme section in your Blogger dashboard, click on "Customize," then select "Edit HTML." Paste the following code just after the <head> tag and save the template. If you have already done this step for any of other widget on your site then skip it. You only need to do this once for all widgets.

<link href="https://cdn.jsdelivr.net/gh/Mushahid7734/ClasswithMason.com/classwithmason1.1.min.css" rel="stylesheet"  crossorigin="anonymous"/>
Step 2: Paste following html code where you want this widget to appear. Of course the content of your selection etc. 

  <div class="riddle-card">
    <h2>Riddle of the Day</h2>
    <div id="riddle-of-the-day">
      <div class="riddle">Loading...</div>
    </div>
    <button id="show-answer-btn" style="display: none;">Show Answer</button>
    <div id="answer" class="answer" style="display: none;"></div>
  </div>
Step 3: Place below given javascript just below the html code 

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const riddleElement = document.getElementById('riddle-of-the-day');
      const showAnswerBtn = document.getElementById('show-answer-btn');
      const answerElement = document.getElementById('answer');

      fetch('https://riddles-api.vercel.app/random')
        .then(response => response.json())
        .then(data => {
          riddleElement.innerHTML = `<div class="riddle">${data.riddle}</div>`;
          answerElement.textContent = data.answer;
          showAnswerBtn.style.display = 'inline-block';

          showAnswerBtn.addEventListener('click', () => {
            answerElement.style.display = 'block';
            showAnswerBtn.style.display = 'none';
          });
        })
        .catch(error => {
          console.error('Error:', error);
          riddleElement.innerHTML = '<div class="riddle">An error occurred while fetching the riddle.</div>';
        });
    });
  </script>

Demo below

Riddle of the Day

Loading...

Post a Comment