addEventListener to new Items and push to DOM

Question

I'm building todo-list app (javascript) and need to render new items to DOM after adding them.

I have this template

<div class="dropdown_item">
  <p>Lorem ipsum dolor sit.</p>
  <div class="item_action">
    <span class="item_done item_modify">Done</span>
    <span class="item_edit item_modify">Edit</span>
    <span class="item_delete item_modify">Delete</span>
  </div>
</div>

I want to push this template to Dom. but I want to add eventListener(hover over) to <div class="dropdown_item"> to show and Hide <div class="item_action"> and addevenlistener(click) to each <span>for Done,delete and Edit.

what do you recommend ! how to render this items, what is the best way to render it? good performance and nice code.

here is my Code Todo-list

/**
 * Dropdown Componont
 *  
 *@description
 componot structure should be parent with ID and 2 children
 first child the header (event handler)
 second child the body ( display body controlled by header)
 parent > header + body
 * @param {string} id
 */
const dropdown = id => {
  let dropdown = document.getElementById(id).firstElementChild;
  let toggle = Event => {
    dropdown.nextElementSibling.classList.toggle("dropDownToggle");
    Event.preventDefault();
  };
  dropdown.addEventListener("click", toggle);
};
/**  Activeate the dropdown component
 *  there is 2 dropdown lists
 *  firs one for tasks
 * second one for complated tasks
 */
dropdown("todo-list");
dropdown("done-list");

/* 
 *   get,add and show  tasks
 */
const tasks = [];
const setTask = data => tasks.push(data);
// const deleteTask = data => tasks.splice();
const getInputVal = id => document.getElementById(id).value;
const setInputVal = (id, data) => (document.getElementById(id).value = data);
const getLocalTasks = storeName => JSON.parse(localStorage.getItem(storeName));
const setLocalTasks = (storeName, data) => JSON.stringify(localStorage.setItem(storeName, data));
/**
 * Validate Input field if match string and numbers only
 * validate not empty
 *
 * @param {input} data
 * @returns Boolean
 */
const validateInputText = data => {
  const expression = /^[a-zA-Z0-9_ ]*$/;
  let regex = new RegExp(expression);
  if (!data.match(regex) || data == "") {
    alert("Please dont leave the field empty and  use alphanumeric characters only");
    return false;
  }
  return true;
};

/** Render To DOM
 *
 * @param {*} array
 * @param {*} container
 */
const render = data => {
  for (let i = 0; i < data.length; i++) {
    const element = data[i];


  }
};

/**
 *  Dom button
 */
const addButton = document.getElementById("todo-button");
const TaskContainer = document.getElementById("dropdown_body");

/**
 * event handler for button
 * @param {event} e
 */
const newTask = e => {
  let inputValue = getInputVal("todo-input");
  if (validateInputText(inputValue)) {
    setTask(inputValue);
  }
  render(tasks);
};

addButton.addEventListener("click", newTask);

// x.addEventListener("mouseover", myFunction);
// x.addEventListener("click", mySecondFunction);
// x.addEventListener("mouseout", myThirdFunction);
let items = document.getElementsByClassName("dropdown_item");
let items_action = document.getElementsByClassName("item_action");

const enterItem = e => {
  e.target.firstElementChild.nextElementSibling.style.display = "flex";
};
const leaveItem = e => {
  e.target.firstElementChild.nextElementSibling.style.display = "none";
};
const EnterLeaveItem = item => {
  item.addEventListener("mouseenter", enterItem);
  item.addEventListener("mouseleave", leaveItem);
};
for (let i = 0; i < items.length; i++) {
  EnterLeaveItem(items[i]);
}

:root {
  --color-primer: #49b88d;
  --color-second: #3f9c79;
  /* Input-text form  style */
  --form-text-font-size: 1.4rem;
  --form-text-padding: 10px;
  --form-text-border: 1px solid #49b88d;
  --form-text-hover: 1px solid #3f9c79;
  /* btn-bg form  style */
  --btn-color: #efefef;
  --btn-bg: #49b88d;
  --btn-font-size: 2.5rem;
  --btn-bg-hover: #3f9c79;
  --btn-box-shadow-active: inset 0 0 20px #347a5f;
  /* Dropdown Style here */
  /* Dropdown Style here */
  /* Dropdown Style here */
  --dropdown-width: 350px;
  --dropdown-header-bg: skyblue;
  --dropdown-header-bg-hover: #73b0c9;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: 0;
}

.container {
  width: 350px;
  margin: 100px auto;
}

.input-group {
  display: flex;
}

.input-group-text {
  font-size: var(--form-text-font-size);
  border: var(--form-text-border);
  padding: var(--form-text-padding);
}

.input-group-text:hover {
  border: var(--form-text-hover);
}

.input-group-append {
  display: flex;
}

.btn {
  color: var(--btn-color);
  font-size: var(--btn-font-size);
  background: var(--btn-bg);
  display: inline-block;
  border: 0;
  padding: 1px 15px;
  cursor: pointer;
}

.btn:hover {
  background: var(--btn-bg-hover);
}

.btn:active {
  box-shadow: var(--btn-box-shadow-active);
}


/* Dropdown list component */


/* Dropdown list component */


/* Dropdown list component */


/* Dropdown list component */


/* Dropdown list component */


/* Dropdown list component */


/* Dropdown list component */


/* Dropdown list component */


/* Dropdown list component */


/* Dropdown list component */

* {
  box-sizing: border-box;
}

body {
  background: #ebebeb;
}

.dropdown {
  width: var(--dropdown-width);
  margin: 100px auto;
  box-shadow: 0 5px 5px #cbcbcb;
}

.dropdown_header {
  background: var(--dropdown-header-bg);
}

.dropdown_header:hover {
  background: var(--dropdown-header-bg-hover);
}

.dropdown_btn {
  display: block;
  margin: 0;
  padding: 13px;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

.dropdown_btn:link,
.dropdown_btn:visited,
.dropdown_btn:active {
  color: inherit;
}

.dropdown_btn::after {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.dropdown_item {
  position: relative;
  width: 100%;
  border: 1px solid #ccc;
}

.dropdown_item p {
  text-align: center;
  padding: 20px 13px;
  margin: 0;
}

.dropDownToggle {
  display: none;
  overflow: hidden;
}


/* Modify and actions for Items inside Dropdown list */

.item_action {
  display: none;
  width: 100%;
  height: 100%;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  background: rgb(255, 255, 255);
  z-index: 10;
}

.item_modify {
  padding: 10px 0;
  display: inline-block;
  margin: 10px 5px;
  text-align: center;
  width: 60px;
  height: 70%;
  cursor: pointer;
}

.item_done {
  background: #49b88d;
}

.item_edit {
  background: #49b1b8;
}

.item_delete {
  background: rgb(232, 104, 95);
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<div class="container">
  <!-- form Field-->
  <!-- form Field-->
  <!-- form Field-->
  <div class="input-group">
    <div class="input-group-field">
      <input type="text" id="todo-input" class="input-group-text" placeholder="ex: words" title="click here to add" required>
    </div>
    <div class="input-group-append" id="todo-button">
      <button class="btn btn-icon" type="button" role="button">+</button>
    </div>
  </div>

  <!-- Current Tasks -->
  <!-- Current Tasks -->
  <div class="dropdown" id="todo-list">
    <div class="dropdown_header">
      <a class="dropdown_btn" href="#" title="click to dropdown the list"> Todo list </a>
    </div>
    <div class="dropdown_body" id="uncomplated-body">
      <div class="dropdown_item">
        <p>Lorem ipsum dolor sit.</p>
        <div class="item_action">
          <span class="item_done item_modify">Done</span>
          <span class="item_edit item_modify">Edit</span>
          <span class="item_delete item_modify">Delete</span>
        </div>
      </div>
      <div class="dropdown_item">
        <p>Lorem ipsum dolor sit.</p>
        <div class="item_action">
          <span class="item_done item_modify">Done</span>
          <span class="item_edit item_modify">Edit</span>
          <span class="item_delete item_modify">Delete</span>
        </div>
      </div>
      <div class="dropdown_item">
        <p>Lorem ipsum dolor sit.</p>
        <div class="item_action">
          <span class="item_done item_modify">Done</span>
          <span class="item_edit item_modify">Edit</span>
          <span class="item_delete item_modify">Delete</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Complated Tasks -->
  <!-- Complated Tasks -->
  <div class="dropdown" id="done-list">
    <div class="dropdown_header">
      <a class="dropdown_btn" href="#" title="click to dropdown the list">complated </a>
    </div>
    <div class="dropdown_body" id="done-Body">
      <div class="dropdown_item">
        <p>Lorem ipsum dolor sit.</p>
        <div class="item_action">
          <span class="item_done item_modify">Undo</span>
          <span class="item_delete item_modify">Delete</span>
        </div>
      </div>
      <div class="dropdown_item">
        <p>Lorem ipsum dolor sit.</p>
        <div class="item_action">
          <span class="item_done item_modify">Undo</span>
          <span class="item_delete item_modify">Delete</span>
        </div>
      </div>
    </div>
  </div>

</div>

Sounds like a marvellous job for jQuery. Also you should spell "Completed" with an "e" — mplungjan, Mar 01 '18 at 15:19
https://stackoverflow.com/questions/25248286/native-js-equivalent-to-jquery-delegation — mplungjan, Mar 01 '18 at 15:30

addEventListener to new Items and push to DOM

0 Answers0