JSFiddle - React, Tailwind, and code Playground

by jarosciak

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Pandiagonal Magic Square Generator</title>
    <style>
      body {
        font-family: sans-serif;
        font-size: 14px;
        text-align: center;
        background-color: #F7F7F7;
      }

      #container {
        margin: 0 auto;
        width: 60%;
        padding: 20px;
        background-color: #FFF;
        border-radius: 10px;
      }

      #title {
        font-size: 20px;
        margin-bottom: 30px;
      }

      #input-form {
        width: 50%;
        margin: 0 auto;
        margin-bottom: 30px;
      }

      .input-field {
        width: 100%;
        height: 25px;
        font-size: 14px;
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #ddd;
      }

      #generate-btn {
        width: 100%;
        background-color: #1E90FF;
        color: #FFF;
        font-size: 16px;
        padding: 10px;
        border-radius: 5px;
        border: none;
        margin-bottom: 30px;
      }

      #magic-square {
        font-size: 16px;
        margin-bottom: 30px;
      }

      #magic-square td {
        padding: 10px;
        border: 1px solid #ddd;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="title">Pandiagonal Magic Square Generator</div>
      <div id="input-form">
        <input type="number" name="dimension" class="input-field" placeholder="Enter square dimension" min="3" max="10" required>
        <button id="generate-btn">Generate</button>
      </div>
      <div id="magic-square"></div>
    </div>
    <script>
      // Get the input field
      const inputField = document.querySelector('input[name="dimension"]');
      // Get the generate button
      const generateBtn = document.querySelector('#generate-btn');

      // Generate the magic square
      function generateMagicSquare(n) {
        let magicSquare = [];
        let num = 1;
        let row = 0;
        let col = Math.floor(n / 2);
        magicSquare[row][col] = num;
  ...