mysql.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>MySQL Commands Reference</title>
  <!-- <link rel="stylesheet" href="style.css" /> -->
  <style>
    body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(to right, #e0f7fa, #e1bee7);
      margin: 0;
      padding: 20px;
    }

    .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 20px;
    }

    h1 {
      text-align: center;
      color: #333;
      margin-bottom: 20px;
      font-size: 2.5rem;
    }

    input[type="text"] {
      width: 100%;
      padding: 15px;
      font-size: 1rem;
      margin-bottom: 30px;
      border: 2px solid #90caf9;
      border-radius: 8px;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    }

    .grid {
      display: grid;
      gap: 20px;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    .card {
      background: white;
      padding: 20px;
      border-left: 4px solid #42a5f5;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      transition: transform 0.2s ease;
    }

    .card:hover {
      transform: translateY(-5px);
    }

    .card h2 {
      margin-top: 0;
      color: #1e88e5;
    }

    .card p {
      color: #555;
      font-size: 0.9rem;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>MySQL Commands Reference</h1>
    <input type="text" id="searchInput" placeholder="Search MySQL command..." onkeyup="filterCommands()" />
    <div id="commandList" class="grid"></div>
  </div>
  <script>
    const commands = [
      { command: "CREATE DATABASE", description: "Creates a new database." },
      { command: "DROP DATABASE", description: "Deletes an existing database." },
      {
        command: "CREATE TABLE",
        description: "Creates a new table within the selected database.",
      },
      {
        command: "DROP TABLE",
        description: "Deletes a table and all of its data.",
      },
      {
        command: "ALTER TABLE",
        description: "Modifies an existing table structure.",
      },
      { command: "RENAME TABLE", description: "Renames a table." },
      {
        command: "TRUNCATE TABLE",
        description:
          "Removes all rows from a table without logging individual row deletions.",
      },
      { command: "INSERT", description: "Adds new data into a table." },
      { command: "REPLACE", description: "Inserts or updates a row in a table." },
      { command: "UPDATE", description: "Modifies existing data within a table." },
      {
        command: "DELETE",
        description: "Deletes rows from a table based on a condition.",
      },
      { command: "SELECT", description: "Retrieves data from one or more tables." },
      {
        command: "WHERE",
        description: "Filters records based on a specific condition.",
      },
      {
        command: "GROUP BY",
        description: "Groups rows that have the same values in specified columns.",
      },
      {
        command: "HAVING",
        description: "Filters groups based on a condition (used with GROUP BY).",
      },
      {
        command: "ORDER BY",
        description: "Sorts the result set by one or more columns.",
      },
      {
        command: "LIMIT",
        description: "Restricts the number of records returned.",
      },
      {
        command: "OFFSET",
        description: "Specifies the starting point within the result set.",
      },
      { command: "JOIN", description: "Combines rows from two or more tables." },
      {
        command: "INNER JOIN",
        description: "Returns rows when there is a match in both tables.",
      },
      {
        command: "LEFT JOIN",
        description:
          "Returns all rows from the left table, and matched rows from the right table.",
      },
      {
        command: "RIGHT JOIN",
        description:
          "Returns all rows from the right table, and matched rows from the left table.",
      },
      {
        command: "FULL JOIN",
        description: "Returns rows when there is a match in one of the tables.",
      },
      {
        command: "CROSS JOIN",
        description: "Returns the Cartesian product of rows from joined tables.",
      },
      {
        command: "UNION",
        description: "Combines the result-set of two or more SELECT statements.",
      },
      {
        command: "UNION ALL",
        description: "Combines result sets but does not remove duplicates.",
      },
      {
        command: "DISTINCT",
        description: "Removes duplicate records from the result set.",
      },
      {
        command: "LIKE",
        description: "Searches for a specified pattern in a column.",
      },
      {
        command: "IN",
        description:
          "Checks whether a value matches any value in a list or subquery.",
      },
      { command: "BETWEEN", description: "Selects values within a given range." },
      { command: "IS NULL", description: "Tests for empty (NULL) values." },
      {
        command: "IS NOT NULL",
        description: "Tests for non-empty (NOT NULL) values.",
      },
      { command: "SHOW DATABASES", description: "Lists all available databases." },
      {
        command: "SHOW TABLES",
        description: "Lists all tables in the selected database.",
      },
      { command: "SHOW COLUMNS", description: "Shows column details of a table." },
      { command: "DESCRIBE", description: "Gives the structure of a table." },
      {
        command: "USE",
        description: "Selects a specific database to run queries on.",
      },
      {
        command: "SET",
        description: "Changes system variables or user-defined variables.",
      },
      {
        command: "SHOW VARIABLES",
        description: "Displays system variable values.",
      },
      { command: "SHOW STATUS", description: "Shows server status information." },
      { command: "FLUSH", description: "Clears or reloads internal caches." },
      {
        command: "GRANT",
        description: "Gives user access privileges to databases/tables.",
      },
      { command: "REVOKE", description: "Removes user access privileges." },
      { command: "CREATE USER", description: "Creates a new MySQL user." },
      { command: "DROP USER", description: "Deletes an existing MySQL user." },
      {
        command: "SET PASSWORD",
        description: "Changes the password for a user account.",
      },
      { command: "EXPLAIN", description: "Analyzes a SQL query execution plan." },
      { command: "START TRANSACTION", description: "Begins a new transaction." },
      { command: "COMMIT", description: "Commits the current transaction." },
      { command: "ROLLBACK", description: "Rolls back the current transaction." },
      {
        command: "SAVEPOINT",
        description: "Sets a savepoint within a transaction.",
      },
      { command: "RELEASE SAVEPOINT", description: "Removes a savepoint." },
      {
        command: "SHOW GRANTS",
        description: "Displays privileges granted to a MySQL user.",
      },
    ];

    const listContainer = document.getElementById("commandList");

    function displayCommands(data) {
      listContainer.innerHTML = "";
      data.forEach((item) => {
        const card = document.createElement("div");
        card.className = "card";
        card.innerHTML = `
      <h2>${item.command}</h2>
      <p>${item.description}</p>
    `;
        listContainer.appendChild(card);
      });
    }

    function filterCommands() {
      const input = document.getElementById("searchInput").value.toLowerCase();
      const filtered = commands.filter((cmd) =>
        cmd.command.toLowerCase().includes(input),
      );
      displayCommands(filtered);
    }

    displayCommands(commands); // Initial render

  </script>
</body>

</html>