A to-do list allows you to manage your task. It is like a note. When you type what needs to be done, for example, meeting at 4PM, you press Enter. On pressing Enter, the task gets added and a section for another task is visible wherein you can type the next task, example, lunch with a colleague at 7PM, etc. Add an Input Text to Enter a Task To add an input task, use the . A placeholder is also set using the placeholder attribute − Style the Input The input is set with the todoInput class. ... Read More

To create a collapsible section with CSS and JavaScript, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .collapse {       background-color: rgb(83, 186, 255);       color: white;       cursor: pointer;       padding: 18px;       width: 100%;       border: none;       text-align: left;       outline: none;       font-size: 18px;    }    .active, .collapse:hover {       background-color: rgb(34, 85, 160);    } ... Read More

A popup appears on the click of a button. Add any key message in it. To close the popup, set a cross symbol on top-right. However, the popups generally close when the mouse cursor is placed somewhere else on the web page. Set a button to open the popup First, create a button that will be clicked by the user to open the popup − Open Popup Set the container for the popup A div is set for the popup. Withing that, a child container is created for the popup content. Within that, set the close symbol using ... Read More

A range slider, is an input field in HTML, that accepts the type as a “range”. It is used to select a numeric value within the given specific range, we can pass the range inside the input field as shown below snippet of code As you can see in the above snippet of code, the type is equal to the range and we provide the min = “0” and max = “100” values, which will be the range of the field. The custom range sliders help customize the field range as per the need. In the following article, ... Read More

Scroll indicator indicates and animates accordingly. When the scroller goes down, the progess bar suggests how many elements are still remaining. When the scroller takes you to the bottom, the scroll indicator i.e., the progress bar also ends. Let us see how to create a scroll indicator with CSS and JavaScript. Fixed header First, set the position of the header to be fixed using the position property with the value fixed. The header will remain fixed even when the web page navigates to the bottom − .header { position: fixed; top: 0; ... Read More

To create a delete confirmation modal with CSS and JavaScript, the code is as follows −Example Live Demo    body {       font-family: Arial, Helvetica, sans-serif;    }    .modal {       text-align: center;       display: none;       position: fixed;       z-index: 1;       padding-top: 100px;       left: 0;       top: 0;       width: 100%;       height: 100%;       background-color: rgba(0, 0, 0, 0.4);    }    .modalContent {       font-size: 20px;   ... Read More

To create a modal box with CSS and JavaScript, the code is as follows −Example Live Demo    body {       font-family: Arial, Helvetica, sans-serif;    }    .modal {       text-align: center;       display: none;       position: fixed;       z-index: 1;       padding-top: 100px;       left: 0;       top: 0;       width: 100%;       height: 100%;       background-color: rgba(0, 0, 0, 0.4);    }    .modalContent {       font-size: 20px;     ... Read More

To sort an HTML table using JavaScript, the code is as follows − JavaScript function to sort an HTML Table Consider the following sort function using JavaScript, that will be used to sort an HTML table.   function sortTable() {     var filterTable, rows, sorted, i, x, y, sortFlag;     filterTable = document.querySelector(".filterTable");     sorted = true;     while (sorted) {      sorted = false;      rows = filterTable.rows;      for (i = 1; i < rows.length - 1; i++) { ... Read More

To sort an HTML list using JavaScript, the code is as follows −Example Live Demo Sorting list example Click to sort Giraffe Camel Dog Lion Cheetah Cat    document .getElementsByTagName("button")[0] .addEventListener("click", sortList);    function sortList() {       var list, i, sortFlag, LiEle, sorted;       list = document.querySelector(".animalList");       sortFlag = true;       while (sortFlag) {          sortFlag = false;          LiEle = list.getElementsByTagName("LI");          for (i = 0; i < LiEle.length - 1; i++) {         ... Read More

To create a filter table with JavaScript, the code is as follows −Example Live Demo    * {       box-sizing: border-box;    }    .searchField {       width: 100%;       font-size: 16px;       padding: 12px 20px 12px 40px;       border: 1px solid #ddd;       margin-bottom: 12px;    }    .birthDayTable {       border-collapse: collapse;       width: 100%;       font-size: 18px;    }    .birthDayTable th, .birthDayTable td {       text-align: left;       padding: 12px;   ... Read More