Build a DOM Manipulation CRUD App Using Vanilla Javascript Playground in Browser Full Project For Beginners

Build a DOM Manipulation CRUD App Using Vanilla Javascript Playground in Browser Full Project For Beginners

 

Welcome folks today in this blog post we will be building a dom manipulation crud app using vanilla javascript playground in browser. All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<h1>JavaScript Playground</h1>   
<p>DOM Manipulation Practice</p>
<div id="listDiv">
  <p id="hiddenMsgSpan"></span>
  <ul id="list">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
  </ul>
  <div id="addItemDiv">
    <input type="text" id="addItemInput">
    <button id="addItemButton">Add item</button>
  </div> <!--/.addItemDiv-->
  <button id="removeItemButton">Remove last item</button>
  <button id="toggleListButton">Hide list</button>
</div> <!--/.listDiv-->
<div id="footer">
  <p>Created by Nicole Archambault for independent JavaScript practice</p>
</div>

<script src="app.js"></script>
</body>
</html>

 

 

 

And now make a style.css file and copy paste the following code

 

 

style.css

 

 

@import url('https://fonts.googleapis.com/css?family=Raleway:100,300');
 body {
     font-family: Raleway, sans serif;
     font-weight: 100;
     line-height: 1.5em;
}
 h1 {
     color: #8b7199;
     font-weight: 300;
}
 h1 + p {
     font-weight: bold;
}
 #hiddenMsgSpan {
     font-size: 0.85em;
     font-style: italic;
}
 button {
     color: white;
     cursor: pointer;
     outline: none;
     background-color: #9fcdd8;
     border-radius: 5px;
     border-style: none;
     padding: 5px;
     margin-bottom: 0.35em;
}
 .remove, .down, .up {
     padding: 6px;
}
 .remove, #removeItemButton {
     background: #b24747;
}
 #removeItemButton {
     display: block;
     margin-top: 5px;
}
 input {
     border-radius: 5px;
     border-style: none;
     border: 1px #9fcdd8 solid;
     padding: 5px;
}
 #list {
     padding-left: 0;
     list-style: none;
}
 #list > li {
     display: flex;
     align-items: center;
     margin-bottom: 0.35em;
}
 #list > li button:first-child {
     margin-left: auto;
}
 #list > li > button + button {
     margin-left: 0.5em;
}
 #footer > p {
     font-size: 0.8em;
}

 

See also  Node.js Glob Module Example to Print Names of All Files inside a Directory Using Javascript Full Example For Beginners

 

And now make a script.js file and copy paste the following code

 

 

script.js

 

 

const removeLi = document.querySelector(".remove");
const addItemInput = document.querySelector("#addItemInput");
const removeItemButton = document.querySelector("#removeItemButton");
const addItemButton = document.querySelector("#addItemButton");
const toggleListButton = document.querySelector("#toggleListButton");
const listDiv = document.querySelector("#listDiv");
const list = document.querySelector("#list");
const allLi = list.children;
const lastListItem = list.lastElementChild;
const firstListItem = list.firstElementChild;
const hiddenMsgDiv = document.querySelector("#hiddenMsgDiv");
const hiddenMsg = "List is currently hidden. Click below to show."

function attachListItemButtons(li) {
  let up = document.createElement("button");
    up.textContent = "Up";
    up.className = "up";
    if (li !== firstListItem) {
      li.appendChild(up);
    }
  let down = document.createElement("button");
    down.textContent = "Down";
    down.className = "down";
    if (li !== lastListItem) {
      li.appendChild(down);
    }
  let remove = document.createElement("button");
    remove.textContent = "Remove";
    remove.className = "remove";
    li.appendChild(remove);
}

function addNewItem() {
  let newItemName = addItemInput.value;
  let newItem = document.createElement("li");
  if (newItemName && event.target.id == "addItemButton" || event.which == 13 && newItemName) {
    newItem.textContent = newItemName;
    attachListItemButtons(newItem);
    list.appendChild(newItem);
    addItemInput.value = '';
  }
}

function removeItem(li) {
  if (event.target.className == "remove") {
    let targetLi = event.target.parentNode; //List item itself, including buttons
    list.removeChild(targetLi);
  } else {
    list.removeChild(li);
  }
}

// Check if li is the first or last child of ul
function isFirstLastLi(li) {
  if (li !== lastListItem) {
    document.querySelector(".down").style.display = "none";
  } else if (li !== firstListItem) {
      document.querySelector(".up").style.display = "none";
  } else {
      document.querySelector(".up").style.display = "inline-block";
      document.querySelector(".down").style.display = "inline-block";
    }
}

function moveItem() {
  let targetLi = event.target.parentNode; //list item itself, including buttons
  if (event.target.className == "up") {
    let prevLi = targetLi.previousElementSibling;
    if (prevLi) {
      isFirstLastLi(prevLi);
      list.insertBefore(targetLi, prevLi);
    }
  }
  if (event.target.className == "down") {
    let nextLi = targetLi.nextElementSibling;
    if (nextLi) {
      isFirstLastLi(nextLi);
      list.insertBefore(nextLi, targetLi);
    }
  }
}

function removeLastItem() {
  let lastItem = list.lastElementChild;
  list.removeChild(lastItem);
}

function toggleList() {
  if (list.style.display !== "none") {
    list.style.display = "none";
    hiddenMsgSpan.textContent = hiddenMsg;
    toggleListButton.textContent = "Show list";
  } else {
    hiddenMsgSpan.textContent = "";
    list.style.display = "block";
    toggleListButton.textContent = "Hide list";
}
}

// Attach buttons to all existing list items
for (i = 0; i < allLi.length; i++) {
  attachListItemButtons(allLi[i]);
}


/*--- EVENT LISTENERS ---*/
list.addEventListener("click", removeItem);
list.addEventListener("click", moveItem);
addItemButton.addEventListener("click", addNewItem);
addItemInput.addEventListener("keyup", addNewItem);
removeItemButton.addEventListener("click", removeLastItem);
toggleListButton.addEventListener("click", toggleList);

 

See also  Build a Classic Hand Cricket Multiplayer Game in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

And now if you open index.html file inside the browser you will see the below screenshot

 

 

Leave a Reply