HTMLDrop.

jQuery starter

jQuery 3 for DOM work, events, and effects, the classic way.

Open in editor Free. No install, no sign-up.

The code

Three files, exactly what you get in the editor.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>jQuery starter</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  </head>
  <body>
    <main class="page">
      <a href="https://jquery.com" target="_blank"
        ><svg class="logo" role="img" viewBox="0 0 128 128">
          <path
            fill="#0868AC"
            d="M9.625 32.181C-1.404 48.032-.031 68.657 8.394 85.501c.2.404.41.801.617 1.198l.394.759.246.437.439.786c.262.461.53.92.804 1.379l.459.756c.304.491.615.976.933 1.46l.398.614c.439.655.888 1.309 1.352 1.951l.039.05.228.308c.401.553.814 1.099 1.232 1.639l.464.59c.373.469.752.935 1.138 1.399l.435.52a75.27 75.27 0 001.586 1.812l.033.033.061.068a80.44 80.44 0 001.612 1.699l.517.521c.423.426.853.845 1.287 1.262l.527.5c.58.547 1.166 1.083 1.764 1.607l.028.022.307.262c.527.456 1.063.909 1.603 1.353l.664.529c.441.354.887.702 1.336 1.044l.714.543c.496.365.995.724 1.499 1.075l.546.387.15.107c.478.329.967.646 1.456.963l.63.42c.75.474 1.51.943 2.279 1.396l.63.355c.565.326 1.134.646 1.71.959.312.168.632.327.946.488.407.213.811.429 1.225.636l.283.137.501.242c.641.306 1.287.607 1.94.897l.41.184a66.92 66.92 0 002.263.941l.551.217c.704.271 1.418.539 2.135.791l.268.093c.787.275 1.581.53 2.381.779l.575.172c.814.245 1.619.538 2.458.693 53.339 9.727 68.833-32.053 68.833-32.053-13.013 16.953-36.111 21.425-57.996 16.446-.829-.187-1.633-.446-2.442-.685l-.609-.185a72.498 72.498 0 01-2.352-.765l-.323-.117a72.245 72.245 0 01-2.074-.769l-.582-.229c-.752-.297-1.5-.607-2.239-.931l-.447-.198a92.857 92.857 0 01-1.889-.879l-.546-.262c-.491-.239-.977-.493-1.461-.743-.324-.171-.654-.332-.975-.51a58.591 58.591 0 01-1.751-.982l-.591-.33a81.221 81.221 0 01-2.28-1.397l-.615-.41a59.283 59.283 0 01-1.623-1.079l-.522-.367a89.287 89.287 0 01-1.534-1.109l-.679-.514a64.473 64.473 0 01-1.384-1.082l-.617-.495a82.693 82.693 0 01-1.724-1.453l-.189-.159a83.466 83.466 0 01-1.812-1.647l-.511-.491c-.441-.42-.875-.843-1.302-1.277l-.51-.509a70.541 70.541 0 01-1.598-1.69l-.079-.084a67.39 67.39 0 01-1.621-1.844l-.424-.504a70.602 70.602 0 01-1.167-1.442l-.427-.532a78.406 78.406 0 01-1.347-1.794c-12.15-16.574-16.516-39.432-6.805-58.204m25.629-2.434c-7.977 11.478-7.543 26.844-1.321 38.983a50.581 50.581 0 003.528 5.889c1.195 1.713 2.52 3.751 4.106 5.127a48.111 48.111 0 001.79 1.858l.472.465a51.69 51.69 0 001.828 1.698l.074.064.018.018a55.268 55.268 0 002.135 1.767l.485.378a54.08 54.08 0 002.233 1.631l.065.049c.336.232.678.448 1.019.672l.483.319c.544.349 1.095.689 1.655 1.015l.235.136c.483.278.972.552 1.463.818l.521.271c.339.177.678.358 1.023.53l.155.07c.703.346 1.412.68 2.136.995l.472.194c.579.246 1.164.486 1.75.71l.75.275c.533.198 1.068.378 1.607.559l.727.233c.767.238 1.525.539 2.324.672 41.183 6.823 50.691-24.886 50.691-24.886-8.57 12.343-25.168 18.233-42.879 13.635a50.376 50.376 0 01-2.333-.674l-.701-.227a45.423 45.423 0 01-1.631-.562l-.736-.274a56.418 56.418 0 01-1.756-.708l-.473-.2a47.728 47.728 0 01-2.148-.999c-.363-.177-.72-.364-1.078-.548l-.622-.32a44.502 44.502 0 01-1.363-.77l-.326-.185a47.844 47.844 0 01-1.651-1.008l-.498-.332a61.759 61.759 0 01-1.069-.707 57.456 57.456 0 01-2.226-1.628l-.501-.395c-7.752-6.12-13.898-14.486-16.819-23.971-3.062-9.836-2.402-20.878 2.903-29.84m22.278-.775c-4.702 6.92-5.164 15.514-1.901 23.156 3.441 8.113 10.491 14.476 18.72 17.495.339.125.679.237 1.022.354l.451.143c.485.152.966.329 1.467.424 22.74 4.394 28.908-11.669 30.549-14.034-5.402 7.779-14.482 9.646-25.623 6.942-.88-.213-1.847-.531-2.695-.832a33.242 33.242 0 01-3.201-1.329 33.215 33.215 0 01-5.612-3.424c-9.969-7.565-16.162-21.994-9.657-33.745"
          /></svg
      ></a>
      <h1>Hello jQuery!</h1>
      <p class="lead">write less, do more.</p>
      <form id="add">
        <input id="task" placeholder="Add a task and press Enter" autocomplete="off" />
        <button>Add</button>
      </form>
      <ul id="tasks">
        <li>Select elements with <code>$('…')</code></li>
        <li>Chain methods together</li>
        <li>Click a task to finish it</li>
      </ul>
    </main>
  </body>
</html>

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: system-ui, sans-serif;
  background: #f4f7fb;
  color: #1b2a41;
}
.page {
  width: min(100% - 32px, 440px);
  text-align: center;
}
.logo {
  width: 200px;
  height: auto;
}
h1 {
  margin: 12px 0 4px;
  font-size: 36px;
}
.lead {
  margin: 0 0 24px;
  color: #0769ad;
  font-style: italic;
}
form {
  display: flex;
  gap: 8px;
}
input {
  flex: 1;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid #c9d6e5;
  border-radius: 8px;
}
button {
  font: inherit;
  font-weight: 600;
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  background: #0769ad;
  color: white;
  cursor: pointer;
}
button:hover {
  background: #0a5a8f;
}
ul {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  text-align: left;
}
li {
  padding: 12px 14px;
  margin-bottom: 8px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px #1b2a4114;
  cursor: pointer;
}
li.done {
  text-decoration: line-through;
  color: #8a99ad;
}
code {
  font-size: 0.9em;
}

$(function () {
  // Add a task.
  $("#add").on("submit", function (event) {
    event.preventDefault();
    const text = $("#task").val().trim();
    if (!text) return;
    $("<li>").text(text).hide().appendTo("#tasks").fadeIn(200);
    $("#task").val("").trigger("focus");
  });

  // Finish a task, then remove it.
  $("#tasks").on("click", "li", function () {
    $(this)
      .toggleClass("done")
      .delay(600)
      .slideUp(200, function () {
        $(this).remove();
      });
  });
});

Questions

Can I use jQuery without a build step?

Yes. This starter loads jQuery straight from a CDN, so it runs in the browser with no npm install, bundler, or config.

How do I start a jQuery project online?

Click Open in editor. HTMLDrop copies this starter into a new drop with index.html, style.css, and script.js, and the preview updates as you edit.

Is it free?

Yes. Public drops, live collaboration, versions, and embeds are free, and you do not need an account to start.

Can I share or embed my jQuery demo?

Yes. Every drop gets a public link and an embed code, and you can invite others to edit it with you in real time.

More starter kits