JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FAQ Submission Example</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .admin-section { margin-top: 40px; }
        .faq-list { margin-top: 20px; }
        .faq-item { border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; }
    </style>
</head>
<body>
    <h1>Ask the Expert</h1>
    <form id="questionForm">
        <label for="email">Email:</label><br>
        <input type="email" id="email" required><br><br>
        
        <label for="question">Question:</label><br>
        <textarea id="question" required></textarea><br><br>
        
        <label for="category">Category:</label><br>
        <select id="category" required>
            <option value="General">General</option>
            <option value="Technical">Technical</option>
            <option value="Support">Support</option>
        </select><br><br>
        
        <button type="submit">Submit Question</button>
    </form>

    <div class="admin-section">
        <h2>Admin Dashboard</h2>
        <div id="faqList" class="faq-list"></div>
    </div>

    <script>
        // Store questions in local storage for demo purposes
        const form = document.getElementById('questionForm');
        const faqList = document.getElementById('faqList');

        function getQuestions() {
            return JSON.parse(localStorage.getItem('questions')) || [];
        }

        function saveQuestions(questions) {
            localStorage.setItem('questions', JSON.stringify(questions));
        }

        function renderFAQList() {
            const questions = getQuestions();
            faqList.innerHTML = '';
            questions.forEach((faq, index) => {
                const faqItem = document.createElement('div');
                faqItem.className = 'faq-item';
                faqItem.innerHTML = `
         ...