A JavaScript library providing interactive lists

Related tags

Learning resource javascript lists website list drag-and-drop interactive javascript-library easy-to-use expandable hacktoberfest hacktoberfest2021
Overview

ListExtender.js

Demo GIF

https://www.julienbl.me/ListExtender/

Install

Static (recommended)

<script
  defer
  type="text/javascript"
  src="https://www.julienbl.me/ListExtender/lib/ListExtender.min.js"
></script>

Node

npm i list-extender

Getting Started

  1. Create a ListExtender object
const myList = new ListExtender();
  1. Append your list to some parent container in the DOM
myList.appendTo("#containerId");

And that's it! You now have a working extending list in your website!
From here you can customize the list however you see fit. A good place to start would be setting the placeholder and input type.

myList.setPlaceholder("Placeholder Text");
myList.setInputType("email");

For more instructions on using the library, visit:

https://julienbl.me/ListExtender/documentation.html

Comments
  • Add new themes

    Add new themes

    At the bottom of the library in the theme object, create your own theme and push it to the library! This issue is always open and is perfect for beginners.

    good first issue always open hacktoberfest 
    opened by JLambertazzo 9
  • Extend theme API to include delete button

    Extend theme API to include delete button

    Currently the library allows for styling the lists very easily, this functionality should be extended to cover the styles of the delete button.

    For motivation, think of how you could make our newest example (Todo list on the bottom of examples page) work without needing so much code.

    enhancement good first issue hacktoberfest 
    opened by JLambertazzo 5
  • Implement theme API for delete button

    Implement theme API for delete button

    • Add setDelBtnTheme(btnTheme)
    • Add three demo btn themes ("default", "cream", and "todo")

    This PR is intended to close #33

    hacktoberfest-approved hacktoberfest-accepted 
    opened by basil08 4
  • Changed layout of buttons in small screens

    Changed layout of buttons in small screens

    Now when screen size is less than 640px , the heading is center aligned, and the buttons from the nav are hidden and showed below the 2nd heading to make the nav-bar less crowded.

    opened by Ashley936 4
  • Add option for strikethrough on completion

    Add option for strikethrough on completion

    Add option which is false by default. When option is true, when pressing the delete button first strike through the element, and next time delete is pressed remove it. A list with both of these options should behave as follows:

    1. The list contains some element
    2. Pressing the delete button on the element adds the strikethrough style to that element
    3. Pressing the delete button a second time remove the striked element from the list
    enhancement hacktoberfest 
    opened by JLambertazzo 2
  • Add example todo list

    Add example todo list

    hi @JLambertazzo , i had added new example #3 just modified file examples.html & examples.js i hope that you can merged this too, thanks before! :smiley:

    opened by haidarrifki 1
  • Indented Lists

    Indented Lists

    When editing an element, pressing tab should nest the element in a sub-list and shift+tab should remove one level of nesting if one exists.

    Expected behaviour:

    • One
    • Two
    • [Editing this]

    <TAB>

    • One
    • Two
      • [Editing this]

    <SHIFT+TAB>

    • One
    • Two
    • [Editing this]
    opened by JLambertazzo 0
  • Color coding for list items

    Color coding for list items

    Add an optional (false by default) button to the list that will change the priority of the list item. Priority should be indicated by some kind of colour code and if possible the colours can be set by the user.

    enhancement good first issue hacktoberfest 
    opened by JLambertazzo 1
  • Key attribute of list elements does not account for deleted entries

    Key attribute of list elements does not account for deleted entries

    When an item is deleted from the middle of the list, say the following list:

    1. item1
    2. item2 <- this one will be removed
    3. item3 The resulting list is
    4. item1
    5. item3 <- this element still has key=3, should be key=2
    enhancement good first issue hacktoberfest 
    opened by JLambertazzo 5
Owner
Julien Bertazzo Lambert
Computer Science and Economics student at the University of Toronto
Julien Bertazzo Lambert
GitHub
Boiler is a utility library that makes every day tasks in JavaScript easier by providing over 115 methods

Boiler is a utility library that makes every day tasks in JavaScript easier by providing over 115 methods that work on arrays, collections, functions, numbers, objects, and strings. It's the JavaScript equivalent of a Swiss Army Knife.

Wil 42 Nov 1, 2022
Tiny JavaScript library (1kB) by CurrencyRate.today, providing simple way and advanced number, money and currency formatting and removes all formatting/cruft and returns the raw float value.

Zero dependency tiny JavaScript library (1kB bytes) by CurrencyRate.today, providing simple way and advanced number, money and currency formatting and removes all formatting/cruft and returns the raw float value.

Yurii De 11 Nov 8, 2022
Javascript Library providing form validation helpers

Javascript-Form-Validation Javascript Library providing form validation helpers Table of contents Installation Usage Include Library Use components Co

Benoit Gambier 13 Mar 25, 2022
Drag and drop library for two-dimensional, resizable and responsive lists

DEPRECATED This project is no longer maintained, please consider using react-grid-layout instead. GridList Drag and drop library for a two-dimensional

Hootsuite 3.6k Dec 14, 2022
A pure CSS library for radial lists and menus

Radial menu and radial list A pure CSS library for inline lists and menus around a circle, flexible and customizable A radial layout organizes a list

Fabio Vitali 10 Aug 15, 2022
Providing a complete list of Kurdish (ckb) Alphabet for developing purposes

Providing complete information on Arabic-based Kurdish Alphabets (CKB) Kurdish Alphabet Arabic-based Kurdish Characters Character Unicode Code Point N

Dolan Hêriş 4 Aug 6, 2022
Cod-mods-wiki - A wiki dedicated to providing technical and general purpose information on Call of Duty Modding with a focus on the Black Ops III Mod Tools

Welcome to the CoD Mods Wiki Welcome to the main repository for the CoD Mods Wik

Philip 9 Dec 9, 2022
An extension to Panic's Nova editor currently providing an alternative file browser.

Explorer.novaextension Welcome to the repository of the Explorer Nova extension. The actual extension and its README can be found only one directory a

null 7 Nov 14, 2022
Cloudy is a set of constructs for the AWS Cloud Development Kit that aim to improve the DX by providing a faster and type-safe code environment.

cloudy-ts These packages aren't yet published on npm. This is still highly experimental. Need to figure out a few things before releasing the first ve

Cristian Pallarés 5 Nov 3, 2022
💡 Providing equitable access to human useable Web3 data.

?? Providing equitable access to human useable Web3 data. Unidata The beauty of Web3 is that everyone owns their data, but accessing and displaying ow

DIYgod 264 Jan 2, 2023
💡 Providing easy access to human-friendly Web3 data.

?? Providing easy access to human friendly Web3 data. Unidata Docs The beauty of Web3 is that everyone owns their data, but accessing and displaying o

Natural Selection Labs 263 Dec 29, 2022
A tiny foundation that providing nested state-based routing for complex web application.

StateMan stateman: A tiny foundation that provides nested state-based routing for complex web applications. stateman is highly inspired by ui-router;

ZhengHaibo 390 Dec 20, 2022
MySQL meets Jupyter notebooks. Grasp provides a new way to learn and write SQL, by providing a coding-notebook style with runnable blocks, markdown documentation, and shareable notebooks. ✨

A New Way to Write & Learn SQL Report Bug · Request Feature Table of Contents About The Project Built With Getting Started Prerequisites Installation

Lakshya 7 Sep 1, 2022
The Bookstore is a website where the user can display a list of books, add a book by providing a title, an author, and selecting from the categories, and remove a selected book.

Bookstore The Book Store is a website where the user can display a list of books, add a book and remove a selected book. Microverse's Bookstore API wa

Virag Kormoczy 9 Jan 1, 2023
Email Genie Allows autocomplete on email field by providing a list of domain suggestions (gmail.com, outlook.com, etc.).

Allows users to easily and quickly complete an email field by providing a list of domain suggestions (gmail.com, outlook.com, etc.). This package stands out for its flexibility, its compatibility with libraries / frameworks, but especially its use of basic HTML and Javascript functionalities that maximize the native behavior of desktop AND mobile browsers.

Simon Arnold 3 Oct 4, 2022
This is a website for solving IT issues and providing IT solutions as answers to submitted tickets from clients. It is a project from Software Interns Team in Safecotech Internship Program 2022.

CONNECT IT-Solutions Table of Contents Built With Getting Started Description Documentation Commit History Screenshots Contributors Built With : Node

null 4 Sep 24, 2022
A file-sharing app providing end-to-end encryption of data.

secsend secsend is a file-sharing app providing end-to-end encryption of data. It provides a web application and a command-line interface (CLI). demo.

Adrien Guinet 28 Dec 22, 2022
Exposes theming options available in Joy UI by providing color palette and typography controls.

Joy Theme Creator Note: Joy UI is currently in alpha - some things may not be finished or working as expected. This project exposes the theming option

Oliver Benns 10 Dec 28, 2022
curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.

What is it ? Shaders are the new front-end web developpment big thing, with the ability to create very powerful 3D interactions and animations. A lot

Martin Laxenaire 1.4k Jan 1, 2023