Add Class to Body Jquery

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>


<div class="container">
  <h1>jQuery Add Class to Body</h1>
  <p class="subtitle">Dynamically add and remove classes from the body element</p>

  <div class="demo-section">
    <h2>
      <ion-icon name="color-palette-outline"></ion-icon>
      Theme Switcher Demo
    </h2>
    <p style="font-size: 14px; color: #666; margin-bottom: 20px;">
      Click the buttons below to add different theme classes to the body element
    </p>
    <div class="button-grid">
      <button class="btn" id="defaultBtn">
        <ion-icon name="sunny-outline"></ion-icon>
        Default Theme
      </button>
      <button class="btn btn-dark" id="darkBtn">
        <ion-icon name="moon-outline"></ion-icon>
        Dark Theme
      </button>
      <button class="btn btn-warm" id="warmBtn">
        <ion-icon name="flame-outline"></ion-icon>
        Warm Theme
      </button>
      <button class="btn btn-cool" id="coolBtn">
        <ion-icon name="snow-outline"></ion-icon>
        Cool Theme
      </button>
      <button class="btn btn-nature" id="natureBtn">
        <ion-icon name="leaf-outline"></ion-icon>
        Nature Theme
      </button>
      <button class="btn btn-sunset" id="sunsetBtn">
        <ion-icon name="partly-sunny-outline"></ion-icon>
        Sunset Theme
      </button>
    </div>

    <div class="status-display">
      <h3>Current Body Classes:</h3>
      <div class="class-list" id="classList">
        <span class="class-tag">No theme classes</span>
      </div>
    </div>
  </div>

  <div class="code-section">
    <h2>
      <ion-icon name="code-slash-outline"></ion-icon>
      jQuery Methods
    </h2>

    <h3 style="color: #333; margin: 20px 0 10px; font-size: 16px;">Basic Usage:</h3>
    <div class="code-block">
      <span class="comment">// Add a single class to body</span>
      $(<span class="string">'body'</span>).<span class="function">addClass</span>(<span class="string">'dark-theme'</span>);

      <span class="comment">// Add multiple classes</span>
      $(<span class="string">'body'</span>).<span class="function">addClass</span>(<span class="string">'dark-theme mobile-view'</span>);

      <span class="comment">// Remove a class</span>
      $(<span class="string">'body'</span>).<span class="function">removeClass</span>(<span class="string">'dark-theme'</span>);

      <span class="comment">// Toggle a class</span>
      $(<span class="string">'body'</span>).<span class="function">toggleClass</span>(<span class="string">'dark-theme'</span>);

      <span class="comment">// Check if body has a class</span>
      <span class="keyword">if</span> ($(<span class="string">'body'</span>).<span class="function">hasClass</span>(<span class="string">'dark-theme'</span>)) {
      console.<span class="function">log</span>(<span class="string">'Dark theme is active'</span>);
      }

      <span class="comment">// Remove all theme classes and add new one</span>
      $(<span class="string">'body'</span>).<span class="function">removeClass</span>().<span class="function">addClass</span>(<span class="string">'new-theme'</span>);
    </div>

    <h3 style="color: #333; margin: 20px 0 10px; font-size: 16px;">Advanced Usage:</h3>
    <div class="code-block">
      <span class="comment">// Remove specific classes and add new one</span>
      $(<span class="string">'body'</span>)
      .<span class="function">removeClass</span>(<span class="string">'dark-theme warm-theme cool-theme'</span>)
      .<span class="function">addClass</span>(<span class="string">'nature-theme'</span>);

      <span class="comment">// Conditional class adding</span>
      <span class="keyword">var</span> isDarkMode = <span class="keyword">true</span>;
      $(<span class="string">'body'</span>).<span class="function">toggleClass</span>(<span class="string">'dark-theme'</span>, isDarkMode);

      <span class="comment">// Add class with callback function</span>
      $(<span class="string">'body'</span>).<span class="function">addClass</span>(<span class="keyword">function</span>() {
      <span class="keyword">return</span> <span class="string">'theme-'</span> + <span class="keyword">new</span> Date().<span class="function">getHours</span>();
      });

      <span class="comment">// Get all classes on body</span>
      <span class="keyword">var</span> classes = $(<span class="string">'body'</span>).<span class="function">attr</span>(<span class="string">'class'</span>);
      console.<span class="function">log</span>(classes);
    </div>
  </div>

  <div class="info-box">
    <h3>
      <ion-icon name="information-circle-outline"></ion-icon>
      Key jQuery Methods
    </h3>
    <ul>
      <li><strong>.addClass()</strong> - Adds one or more classes to selected elements</li>
      <li><strong>.removeClass()</strong> - Removes one or more classes from elements</li>
      <li><strong>.toggleClass()</strong> - Toggles classes on/off</li>
      <li><strong>.hasClass()</strong> - Checks if element has a specific class</li>
      <li><strong>.attr('class')</strong> - Gets all classes as a string</li>
    </ul>
  </div>

  <div class="info-box">
    <h3>
      <ion-icon name="bulb-outline"></ion-icon>
      Common Use Cases
    </h3>
    <ul>
      <li><strong>Theme Switching:</strong> Toggle between light/dark themes</li>
      <li><strong>Responsive Design:</strong> Add classes based on screen size</li>
      <li><strong>Page States:</strong> Indicate loading, error, or success states</li>
      <li><strong>Navigation:</strong> Add classes when menu is open/closed</li>
      <li><strong>Animations:</strong> Trigger CSS animations by adding classes</li>
      <li><strong>Scroll States:</strong> Add classes when user scrolls past certain point</li>
    </ul>
  </div>
</div>

 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            transition: all 0.5s ease;
        }

        /* Body classes for different themes */
        body.dark-theme {
            background: linear-gradient(135deg, #232526 0%, #414345 100%);
        }

        body.warm-theme {
            background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
        }

        body.cool-theme {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        body.nature-theme {
            background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
        }

        body.sunset-theme {
            background: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%);
        }

        .container {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            padding: 50px 40px;
            width: 100%;
            max-width: 800px;
        }

        h1 {
            font-size: 32px;
            color: #333;
            margin-bottom: 10px;
            text-align: center;
            font-weight: 600;
        }

        .subtitle {
            color: #666;
            font-size: 15px;
            margin-bottom: 40px;
            text-align: center;
        }

        .demo-section {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 30px;
            margin-bottom: 25px;
        }

        .demo-section h2 {
            font-size: 20px;
            color: #36d1dc;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .button-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }

        .btn {
            background: linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%);
            color: white;
            border: none;
            border-radius: 12px;
            padding: 14px 24px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(54, 209, 220, 0.4);
        }

        .btn:active {
            transform: translateY(0);
        }

        .btn-dark {
            background: linear-gradient(135deg, #232526 0%, #414345 100%);
        }

        .btn-warm {
            background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
        }

        .btn-cool {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .btn-nature {
            background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
        }

        .btn-sunset {
            background: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%);
        }

        .btn-secondary {
            background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
        }

        .code-section {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 30px;
            margin-bottom: 25px;
        }

        .code-section h2 {
            font-size: 20px;
            color: #36d1dc;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .code-block {
            background: #2d2d2d;
            color: #f8f8f2;
            padding: 20px;
            border-radius: 10px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            overflow-x: auto;
            margin: 15px 0;
            line-height: 1.8;
        }

        .code-block .comment {
            color: #6272a4;
        }

        .code-block .keyword {
            color: #ff79c6;
        }

        .code-block .function {
            color: #50fa7b;
        }

        .code-block .string {
            color: #f1fa8c;
        }

        .info-box {
            background: #e1f5fe;
            border-left: 4px solid #36d1dc;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
        }

        .info-box h3 {
            color: #36d1dc;
            margin-bottom: 10px;
            font-size: 18px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .info-box ul {
            margin-left: 20px;
            color: #555;
            line-height: 1.8;
        }

        .info-box li {
            margin: 8px 0;
        }

        .status-display {
            background: white;
            padding: 20px;
            border-radius: 10px;
            margin-top: 20px;
            border: 2px solid #e0e0e0;
        }

        .status-display h3 {
            font-size: 16px;
            color: #333;
            margin-bottom: 10px;
        }

        .class-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }

        .class-tag {
            background: #36d1dc;
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
        }

        @media (max-width: 768px) {
            .container {
                padding: 30px 20px;
            }

            h1 {
                font-size: 26px;
            }

            .button-grid {
                grid-template-columns: 1fr;
            }
        }

  $(document).ready(function() {
            // Function to update class display
            function updateClassDisplay() {
                var bodyClasses = $('body').attr('class');
                var classList = $('#classList');
                
                if (!bodyClasses || bodyClasses.trim() === '') {
                    classList.html('<span class="class-tag">No theme classes</span>');
                } else {
                    var classArray = bodyClasses.split(' ');
                    var html = '';
                    classArray.forEach(function(className) {
                        html += '<span class="class-tag">' + className + '</span>';
                    });
                    classList.html(html);
                }
            }

            // Default theme button
            $('#defaultBtn').click(function() {
                $('body').removeClass('dark-theme warm-theme cool-theme nature-theme sunset-theme');
                updateClassDisplay();
            });

            // Dark theme button
            $('#darkBtn').click(function() {
                $('body')
                    .removeClass('warm-theme cool-theme nature-theme sunset-theme')
                    .addClass('dark-theme');
                updateClassDisplay();
            });

            // Warm theme button
            $('#warmBtn').click(function() {
                $('body')
                    .removeClass('dark-theme cool-theme nature-theme sunset-theme')
                    .addClass('warm-theme');
                updateClassDisplay();
            });

            // Cool theme button
            $('#coolBtn').click(function() {
                $('body')
                    .removeClass('dark-theme warm-theme nature-theme sunset-theme')
                    .addClass('cool-theme');
                updateClassDisplay();
            });

            // Nature theme button
            $('#natureBtn').click(function() {
                $('body')
                    .removeClass('dark-theme warm-theme cool-theme sunset-theme')
                    .addClass('nature-theme');
                updateClassDisplay();
            });

            // Sunset theme button
            $('#sunsetBtn').click(function() {
                $('body')
                    .removeClass('dark-theme warm-theme cool-theme nature-theme')
                    .addClass('sunset-theme');
                updateClassDisplay();
            });

            // Initialize display
            updateClassDisplay();
        });