Building ToDo App using Javascript

HTML Code (index.html)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>TODO List using Javascript</title>
  <!-- using font awesome for icons -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
    crossorigin="anonymous">
  <!-- using google font -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,500" rel="stylesheet">
  <!-- importing reset and main css -->
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <div class="container">
    <!-- todo block -->
    <div class="todoBlock">
      <!-- main title holder -->
      <div class="titleHolder">
        <h1>Javascript Todo List</h1>
        <p>We use HTML, CSS and Javascript to build this app.</p>
      </div>
      <!-- todo block -->
      <div class="todoList">
        <!-- form holder -->
        <div class="formHolder">
          <div class="col big">
            <input type="text" id="addInput">
          </div>
          <div class="col">
            <button type="button" id="addBtn" class="btn">Add Item</button>
          </div>
          <div class="col">
            <button type="button" id="toggleBtn" class="btn">Hide List</button>
          </div>
        </div>
        <!-- todo list -->
        <div class="listHolder">
          <ul class="list">
            <!-- looping li -->
            <li>
              <span class="listName">Macbook</span>
              <button class="btn2 remove"></button>
              <button class="btn2 down"></button>
              <button class="btn2 up"></button>
            </li>
            <li>
              <span class="listName">Amazon Firestick</span>
              <button class="btn2 remove"></button>
              <button class="btn2 down"></button>
              <button class="btn2 up"></button>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- importing custom js -->
  <script src="js/main.js"></script>
</body>

</html>

CSS Code (reset.css)
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
html {
 box-sizing: border-box;
}

*, *:before, *:after {
 box-sizing: inherit;
}

* {
  max-height: 1000000px;
  margin: 0;
  padding: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

CSS Code (main.css)
/* general */
body {
  font: 300 18px/1.5 'Roboto', sans-serif;
  color: #333;
  background: #f4f4f4;
}

.container {
  margin: 0 auto;
  max-width: 960px;
  padding: 0 15px;
}

h1 {
  font-size: 32px;
  font-weight: 500;
}

p {
  margin: 0 0 15px;
}

input[type="text"] {
  width: 100%;
  height: 50px;
  border: 1px solid #ccc;
  background: #fff;
  padding: 15px;
  font: 300 18px/1.5 'Roboto', sans-serif;
  transition: border 0.3s linear;
}

input[type="text"]:focus {
  border-color: #19b5fe;
  outline: none;
}

.btn {
  background: #19b5fe;
  border: none;
  padding: 10px;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  height: 50px;
  color: #fff;
  cursor: pointer;
  font: 300 16px/1.5 'Roboto', sans-serif;
  transition: background 0.3s linear;
}

.btn:hover {
  background: #097fb7;
}

.btn2 {
  background: none;
  border: 1px solid #19b5fe;
  padding: 10px;
  display: inline-block;
  vertical-align: top;
  color: #19b5fe;
  cursor: pointer;
  transition: background 0.3s linear, color 0.3s linear;
}

.btn2:hover {
  background: #19b5fe;
  color: #fff;
}

.btn2:before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

.btn2.remove:before {
  content: '\f2ed';
}

.btn2.down:before {
  content: '\f063';
}

.btn2.up:before {
  content: '\f062';
}

/* todo block */
.todoBlock {
  padding: 30px 0;
}

.todoBlock .titleHolder {
  margin: 0 0 40px;
}

.todoBlock h1 {
  margin: 0 0 5px;
}

/* form holder */
.formHolder {
  padding: 25px 0;
  margin: 0 -10px 40px;
  overflow: hidden;
  position: relative;
}

.formHolder:before,
.formHolder:after {
  content: '';
  background: #ccc;
  height: 1px;
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
}

.formHolder:after {
  top: auto;
  bottom: 0;
}

.formHolder .col {
  float: left;
  width: 20%;
  padding: 0 10px;
}

.formHolder .col.big {
  width: 60%;
}

/* list holder */
.listHolder li {
  counter-increment: step-counter;
  overflow: hidden;
  margin: 0 0 20px;
  padding: 0 0 20px 40px;
  position: relative;
  border-bottom: 1px dashed #ccc;
}

/* custom list number */
.listHolder li:before {
  content: counter(step-counter);
  background: #19b5fe;
  color: #fff;
  font-size: 14px;
  padding: 2px 8px;
  border-radius: 3px;
  position: absolute;
  top: 0;
  left: 0;
}

.listHolder .listName {
  float: left;
  padding: 0 10px 0 0;
}

.listHolder .btn2 {
  float: right;
  margin: 0 0 0 10px;
}

Video Tutorial (Part 1)


UPDATED CODE
Javascript Code (main.js)
/* 
1. show / hide content 
-------------------------------------------------------------
*/

// create variables
const toggleBtn = document.querySelector('#toggleBtn');
const divList = document.querySelector('.listHolder');

// using click event
toggleBtn.addEventListener('click', () => {
  if(divList.style.display === 'none') {
    divList.style.display = 'block';
    toggleBtn.innerHTML = 'Hide List';
  } else {
    divList.style.display = 'none';
    toggleBtn.innerHTML = 'Show List';
  }
});


/* 
2. add list items
-------------------------------------------------------------
*/

const addInput = document.querySelector('#addInput');
const addBtn = document.querySelector('#addBtn');

// create function
function addLists() {
  if (addInput.value === '') {
    alert('Enter the list name please!!!');
  } else {
    const ul = divList.querySelector('ul');
    const li = document.createElement('li');
    li.innerHTML = addInput.value;
    addInput.value = '';
    ul.appendChild(li);
  }
}

// adding click event
addBtn.addEventListener('click', () => {
  // call function we created
  addLists();
});

// add list when enter key is pressed
addInput.addEventListener('keyup', (event) => {
  if(event.which === 13) {
    addLists();
  }
});


/* 
3. create action buttons
-------------------------------------------------------------
*/

// create variables
const listUl = document.querySelector('.list');
const lis = listUl.children;

// create buttons and add them in function
function createBtn(li) {
  // create remove button
  const remove = document.createElement('button');
  remove.className = 'btn2 remove';
  li.appendChild(remove);

  // create down button
  const down = document.createElement('button');
  down.className = 'btn2 down';
  li.appendChild(down);

  // create up button
  const up = document.createElement('button');
  up.className = 'btn2 up';
  li.appendChild(up);
}

// use of for loop to add buttons in each <li>
for(var i = 0; i < lis.length; i ++) {
  createBtn(lis[i]);
}

/* 
4. enabling button actions (to move item up, down or delete)
-------------------------------------------------------------
*/

divList.addEventListener('click', (event) => {
  if(event.target.tagName === 'BUTTON') {
    const button = event.target;
    const li = button.parentNode;
    const ul = li.parentNode;

    if(button.className === 'btn2 remove') {
      ul.removeChild(li);
    } else if (button.className === 'btn2 up') {
      const prevLi = li.previousElementSibling;
      if(prevLi) {
        ul.insertBefore(li, prevLi);
      }
    } else if (button.className === 'btn2 down') {
      const nextLi = li.nextElementSibling;
      if(nextLi) {
        ul.insertBefore(nextLi, li);
      }
    }
  }
});

Share this

Related Posts