Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="todo">
  <ul role="list"></ul>
  <button type="button" class="btn btn-add">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    Add item
  </button>
</div>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@layer reset, presentationstyles, demo;

/* These are the demo styles, the basic styling of ul and li can be found in presentationstyles layer to remove the clutter and keep to the essentials here of @starting-style and the animations */
@layer demo {
  ul {
    & li {
      opacity: 1;
      transform: translate(0, 0);
      transition: transform 0.5s ease-out, border-radius 0.5s,
        opacity 0.3s linear, background-color 0.3s ease-out;
      @starting-style {
        opacity: 0;
        transform: translate(0, 50%);
      }
      &.removing {
        opacity: 0;
        transform: translate(-100%, 0);
        ~ li {
          transition: translate 0.5s ease-out;
          translate: 0 -100%;
        }
      }
    }
    &:has(.removing) + .btn-add {
      transition: translate 0.5s ease-out;
      translate: 0 -100%;
    }
    &:empty + button.btn-add {
      border-radius: 10px;
    }
  }
}

@layer presentationstyles {
  .todo {
    width: 100%;
    max-width: 600px;
  }

  input {
    border-width: 0 0 1px 0;
    border-style: dashed;
    border-color: white;
    background: none;
    padding: 10px 0;
    color: white;
    font-size: 1.1rem;
    &:focus {
      outline: 0;
    }
    &::placeholder {
      color: #ddd;
    }
  }

  /* Basic ul and li styling to remove clutter from demo essentials */

  ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    & li {
      display: grid;
      grid-template-columns: 1fr 20px;
      gap: 5px;
      background: darkcyan;
      padding: 6px 16px;
      &:first-child {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      }
      &:focus-within {
        background: #381d2a;
      }
    }
  }

  /* button styling */
  .btn {
    display: inline-block;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: "Roboto", sans-serif;
    font-size: 1.2rem;
    & svg {
      width: 20px;
      aspect-ratio: 1;
    }
    &.btn-add {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: center;
      gap: 10px;
      padding: 16px 20px;
      align-items: center;
      width: 100%;
      color: white;
      background: #004643;
      border-radius: 0 0 10px 10px;
      transition: background 0.3s;
      &:is(:hover, :focus) {
        background: #07716c;
      }
    }
    &.btn-remove {
      color: white;
      & svg {
        width: 20px;
      }
    }
  }
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    padding: 1vmax;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    font-family: "Roboto", sans-serif;
    background: #faf4d3;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 1vw,
        #f6be9a 1vw,
        #f6be9a 50%
      ),
      repeating-linear-gradient(
        45deg,
        #faf4d3,
        #faf4d3 1vw,
        #f6be9a 1vw,
        #f6be9a 50%
      );
    background-size: 5vw 5vw, 3.5vw 2.5vw;
  }

  .sr-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}

              
            
!

JS

              
                const button = document.querySelector("button");
const list = document.querySelector("ul");

// Create a function to add a new list item
function addListItem() {
  const listItem = document.createElement("li");

  // Create an input element for the list item
  const input = document.createElement("input");
  input.type = "text";
  input.placeholder = "Enter a new to-do item";
  input.ariaLabel = "To-do item";

  // Add the input element to the list item
  listItem.appendChild(input);

  // Add a remove button to the list item
  const removeButton = document.createElement("button");
  removeButton.classList.add("btn", "btn-remove");
  removeButton.ariaLabel = "Remove";
  // Set the innerHTML of the remove button to the SVG code
  removeButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
</svg>
`;
  listItem.appendChild(removeButton);

  // Add the list item to the list
  list.appendChild(listItem);
  input.focus();

  // Add an event listener to the remove button
  removeButton.addEventListener("click", () => {
    // Remove the list item from the list
    listItem.classList.add("removing");
    setTimeout(() => {
      listItem.remove();
    }, 500);
  });
}

// Add an event listener to the button for the click event
button.addEventListener("click", addListItem);

              
            
!
999px

Console