JSFiddle - React, Tailwind, and code Playground

by matt_the_coder

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Earth Day Celebration</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>Welcome to Our Earth Day Celebration!</h1>
    </header>
    <section>
      <article class="facts">
        <h2>Did You Know?</h2>
        <p>Earth Day was first celebrated on April 22, 1970, and now includes a wide range of events coordinated globally by EARTHDAY.ORG including 1 billion people in more than 193 countries.</p>
      </article>
      <article>
        <h2>Why Celebrate Earth Day?</h2>
        <p>Earth Day is more than just a single day — April 22. It's a day to remind us to take action in our communities and beyond, to protect the environment, restore damaged ecosystems, and live a more sustainable life.</p>
      </article>
      <article>
        <h2>How You Can Help</h2>
        <p>Join us in making a difference! Here are some ways you can contribute to preserving our planet:</p>
        <ul>
          <li>Reduce, reuse, and recycle.</li>
          <li>Volunteer for cleanups in your community.</li>
          <li>Conserve water and electricity.</li>
          <li>Plant a tree.</li>
          <li>Educate others about environmental conservation.</li>
        </ul>
      </article>
      <div class="action-call">
        <h2>Take Action Now</h2>
        <p>Join our Earth Day quiz to test your knowledge and learn more about what you can do to help our planet!</p>
        <a href="#">Start the Quiz!</a>
      </div>
    </section>
    <div class="testimonial">
      <h2>Inspiration Corner</h2>
      <p>"The Earth does not belong to...

CSS

body {
    font-family: 'Arial', sans-serif;
    background-color: #e8f5e9;
    color: #333;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

header {
    position: relative;
    height: 300px;
    background: url('https://i.imgur.com/oLgqwIX.jpeg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}

header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

h1 {
    position: relative;
    z-index: 1; 
}

header, footer {
    background-color: #4caf50;
    color: white;
    padding: 10px 20px;
    text-align: center;
}

h1, h2 {
    margin: 0.5em 0;
    text-align: center;
}

p {
  text-align: center;
}

section {
    margin: 20px 0;

}
#first-article, #second-article {
    background-color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    border-radius: 10px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    margin-bottom: 20px;
    text-align: center;
}

#first-article:hover, #second-article:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px); 
}

.article {
    background-color: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 20px;

}


.action-call a {
    text-decoration: none;
    font-weight: bold;
}

.testimonial, .events {
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 10px;
    margin-bottom: 20px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    text-align: center;
}

.testimonial:hover, .events:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px); 
}


ul {
    padding-left: 20px;
}

.swiper {
    width: 55%;
    height: 200px;
    overflow: hidden;
}

.swiper-slide {
  ...

JavaScript

document.addEventListener("DOMContentLoaded", function() {
    quizGame();
    setupQuizButton();
    setupVisibilityToggles();
    initializeSwiper();
});

function quizGame() {
    const quizLink = document.querySelector('.action-call a');
    const quizContainer = document.createElement('div');
    const actionCallDiv = document.querySelector('.action-call');
    quizContainer.id = 'quiz';
    quizContainer.style.padding = '15px';
    quizContainer.style.marginTop = '40px';
    quizContainer.style.marginBottom = '120px';
    quizContainer.style.border = '1px solid #ccc';
    quizContainer.style.borderRadius = '8px';
    quizContainer.style.backgroundColor = '#f9f9f9';
    quizContainer.style.display = 'none';
    quizLink.parentNode.insertBefore(quizContainer, quizLink.nextSibling);
    
    const questions = [
        { question: "What year was the first Earth Day celebrated?", options: ["1960", "1970", "1980", "1990"], answer: "1970" },
        { question: "Which animal is often used as a symbol of conservation?", options: ["Panda", "Lion", "Elephant", "Rhino"], answer: "Panda" },
        { question: "How much of the Earth's surface is covered by oceans?", options: ["50%", "60%", "70%", "80%"], answer: "70%" },
        { question: "What gas do trees absorb from the atmosphere?", options: ["Oxygen", "Nitrogen", "Carbon Dioxide", "Hydrogen"], answer: "Carbon Dioxide" },
        { question: "What is the main benefit of reducing plastic waste?", options: ["Save energy", "Reduce pollution", "Increase biodiversity", "All of the above"], answer: "All of the above" }
    ];
    let currentQuestion = 0;
    let correctAnswers = 0;

    function showQuestion() {
        quizContainer.innerHTML = `<div>${questions[currentQuestion].question}</div>
            <div style="margin-top: 10px;">` +
            questions[currentQuestion].options.map(option =>
                `<button style="background-color: #4CAF50; border: none; color: white; padding: 10px 20px; margin:...