index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Mini Projects</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
        background: #f4f5f7;
        color: #1f2328;
      }

      header {
        padding: 48px 16px 24px;
        text-align: center;
      }

      header h1 {
        margin: 0 0 8px;
        font-size: 2rem;
      }

      header p {
        margin: 0;
        color: #57606a;
      }

      .apps {
        list-style: none;
        margin: 0 auto;
        padding: 0 16px 48px;
        max-width: 1000px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 16px;
      }

      .apps a {
        display: block;
        height: 100%;
        padding: 18px;
        background: #fff;
        border: 1px solid #d0d7de;
        border-radius: 10px;
        color: inherit;
        text-decoration: none;
        transition: border-color 0.15s, transform 0.15s;
      }

      .apps a:hover,
      .apps a:focus-visible {
        border-color: #0969da;
        transform: translateY(-2px);
      }

      .apps h2 {
        margin: 0 0 6px;
        font-size: 1.1rem;
        color: #0969da;
      }

      .apps p {
        margin: 0;
        font-size: 0.95rem;
        color: #57606a;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>JavaScript Mini Projects</h1>
      <p>14 small browser apps in plain HTML, CSS and JavaScript.</p>
    </header>
    <ul class="apps">
      <li>
        <a href="bill-split/">
          <h2>Bill Split</h2>
          <p>Splits a bill and tip between a number of people.</p>
        </a>
      </li>
      <li>
        <a href="blobmaker/">
          <h2>Blobmaker</h2>
          <p>Shapes a blob with sliders and copies the CSS border-radius.</p>
        </a>
      </li>
      <li>
        <a href="card-hover-effect/">
          <h2>Card Hover Effect</h2>
          <p>A card that flips on hover, in pure CSS.</p>
        </a>
      </li>
      <li>
        <a href="copy-to-clipboard/">
          <h2>Copy to Clipboard</h2>
          <p>Copies text with the Clipboard API and confirms it.</p>
        </a>
      </li>
      <li>
        <a href="currency-converter/">
          <h2>Currency Converter</h2>
          <p>Converts between currencies using fixed sample rates; you can add your own.</p>
        </a>
      </li>
      <li>
        <a href="dice-game/">
          <h2>Dice Game</h2>
          <p>Two players roll dice and the game keeps score.</p>
        </a>
      </li>
      <li>
        <a href="digital-clock/">
          <h2>Digital Clock</h2>
          <p>A live 12-hour clock.</p>
        </a>
      </li>
      <li>
        <a href="guess-the-number/">
          <h2>Guess the Number</h2>
          <p>Guess a number from 1 to 100 with higher/lower hints.</p>
        </a>
      </li>
      <li>
        <a href="infinite-scroll/">
          <h2>Infinite Scroll</h2>
          <p>Loads more posts from a public API as you scroll.</p>
        </a>
      </li>
      <li>
        <a href="multi-typing/">
          <h2>Multi Typing</h2>
          <p>A typewriter effect that cycles through words.</p>
        </a>
      </li>
      <li>
        <a href="password-validation/">
          <h2>Password Validation</h2>
          <p>Shows which password rules are met as you type.</p>
        </a>
      </li>
      <li>
        <a href="product-slider/">
          <h2>Product Slider</h2>
          <p>A landing page with a scrollable product carousel.</p>
        </a>
      </li>
      <li>
        <a href="string-transformers/">
          <h2>String Transformers</h2>
          <p>Converts a sentence to camel, Pascal, snake and kebab case.</p>
        </a>
      </li>
      <li>
        <a href="todo-list/">
          <h2>To-do List</h2>
          <p>Add, complete and delete tasks, saved in your browser.</p>
        </a>
      </li>
    </ul>
  </body>
</html>