JSFiddle - React, Tailwind, and code Playground

by cwhong

HTML

<!-- used ChatGPT -->
<!DOCTYPE html>
<html>
<head>
  <title>Change Text and Background Color using jQuery</title>
  <style>
    body {
      font-size: 16px;
      background-color: #fff;
    }
    button {
      margin: 10px;
      padding: 10px 20px;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1 id="title">change the size!</h1>
  <button id="small-btn">Small</button>
  <button id="medium-btn">Medium</button>
  <button id="large-btn">Large</button>
  <br>
  <h1 id="title">change the background color!</h1>
  <button id="red-btn">Red</button>
  <button id="green-btn">Green</button>
  <button id="blue-btn">Blue</button>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

CSS

body {
  font-size: 16px;
  background-color: #fff;
}
button {
  margin: 10px;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

JavaScript

$(document).ready(function() {
  $('#small-btn').click(function() {
    $('#title').css('font-size', '16px');
  });

  $('#medium-btn').click(function() {
    $('#title').css('font-size', '24px');
  });

  $('#large-btn').click(function() {
    $('#title').css('font-size', '32px');
  });

  $('#red-btn').click(function() {
    $('body').css('background-color', 'red');
  });

  $('#green-btn').click(function() {
    $('body').css('background-color', 'green');
  });

  $('#blue-btn').click(function() {
    $('body').css('background-color', 'blue');
  });
});