To Do List JS
index.html
:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Javascript Holder</title>
</head>
<body>
<h1>Shopping List</h1>
<h2>Get it done today</h2>
<h2>No excuses</h2>
<input type="text" value="" name="user_input" id="user_input"/>
<button id="button1">Add to list</button>
<ul>
<li>Notebook</li>
<li>Pencil</li>
<li>Highlighter</li>
</ul>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
script.js
:
var buttons = document.querySelectorAll("button");
var button = buttons[0];
var input = document.getElementById("user_input");
var ul = document.querySelector("ul");
var lis = document.querySelectorAll("li");
var listItems = [];
lis.forEach(function (li) {
listItems.push(li.textContent);
});
function isNotBlank() {
return input.value.length > 0;
}
function keyPressEnter() {
return event.keyCode === 13;
}
function elementType() {
return event.path[0].tagName.toLowerCase();
}
function isButtonEvent() {
return elementType() === "button";
}
function isInputEvent() {
return elementType() === "input";
}
function isNewListItem() {
var included = listItems.includes(input.value);
if (included) {
alert(input.value + " is already on the list!");
input.focus();
return false;
} else {
return true;
}
return !listItems.includes(input.value);
}
function isValidlyEntered() {
return isNotBlank() && isNewListItem();
}
function isValidButtonInput() {
return isButtonEvent() && isValidlyEntered();
}
function isValidKeyboardInput() {
return isInputEvent() && keyPressEnter() && isValidlyEntered();
}
function isValidInput() {
return isValidButtonInput() || isValidKeyboardInput();
}
function createListElement() {
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
input.value = "";
}
function addToList() {
if (isValidInput()) {
createListElement();
input.focus();
}
}
button.addEventListener("click", addToList);
input.addEventListener("keypress", addToList);
input.focus();
Published on 22 Dec 2022
all tags
100daysofcode activerecord android annoyances api apt arch array artix atom az3w backend bash blog browser bug callback career ci-cd cli cloud code coding config configuration cp crud cryptography css csv database db design devops django docker email erp feelsgood filter fugitive gif gist git gnome gnome pomodoro grep hebrew http ide isbn-fetcher iso javascript job search js kanban kindle koans learning linkedin linux logger manjaro map markdown microservices mobi mtp neovim nodejs nvchad packages panda pastbin patch portfolio post postgres pytest python rails reduce refactoring reflections rest routes rspec ruby salesforce script scripting security sed shell sql string_replacement study tdd terminal testing tmux ttd version_control vim vim sort walkthrough webdev workflow zsh