Gothic Poems to Love & Liberty

A hauntingly beautiful collection of poetry that explores love, freedom, and the shadows of the soul.

📖 Paperback: $7.99
Buy on Amazon
Gothic Poems to Love and Liberty
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

Your questions, insights, and feedback inspire us and help make this space vibrant and engaging. Every comment shows us that our content is reaching you, motivating us to keep writing and sharing more.

Here’s how you can contribute:

Ask Freely: If you’re curious about something, don’t hesitate to ask!
Help Others: Know the answer to someone’s question? Share your knowledge and insights.
Be Respectful: Share your views in a kind and constructive way.
Stay Relevant: Keep the discussion focused and helpful for everyone.

Let’s make this a space where everyone feels welcome to share their thoughts. Thank you for being part of our community!