Border is not wrapping around whole div

Question

I had it working earlier at some point but does anyone know why the border isn't wrapping around the whole div when I add new items to the div? I also tried adding a border-bottom to each "item" within the to-do list but whenever I select the "item" div and set a border-bottom, if I add a lot of text within the task, the border doesn't adjust accordingly with the text. Any Ideas?

Here is my work:

https://jsfiddle.net/Nathan269/chzykfx6/86/

// Add To-Do's
var add_todo_btn = document.getElementById('add-btn');
var todo_input = document.getElementById('todo-input');
var list = document.getElementById('list');

add_todo_btn.addEventListener('click', function() {
  var todo = todo_input.value;

  var item = document.createElement('DIV');
  item.classList.add('item');

  var item_text = document.createElement('DIV');
  item_text.classList.add('item-text');
  item_text.textContent = todo;

  var edit_input = document.createElement('INPUT');
  edit_input.classList.add('edit-input');
  edit_input.classList.add('hide');
  edit_input.name = 'edit-input';
  edit_input.type = 'text';
  edit_input.value = todo;

  var edit_input_btn = document.createElement('BUTTON');
  edit_input_btn.textContent = 'UPDATE';
  edit_input_btn.classList.add('action-btn');
  edit_input_btn.classList.add('update-btn');
  edit_input_btn.classList.add('hide');
  edit_input_btn.type = 'button';

  var action_btns = document.createElement('DIV');
  action_btns.classList.add('action-btns');

  var edit_btn = document.createElement('BUTTON');
  edit_btn.classList.add('action-btn');
  edit_btn.classList.add('edit-btn');
  edit_btn.textContent = 'EDIT';

  // Edit To-Do's
  edit_btn.addEventListener('click', function() {
    edit_input.classList.remove('hide');
    item_text.classList.add('hide');
    edit_input_btn.classList.remove('hide');

    edit_input_btn.addEventListener('click', function() {
      item_text.textContent = edit_input.value;
      edit_input.classList.add('hide');
      item_text.classList.remove('hide');
      edit_input_btn.classList.add('hide');
    });
  });

  var remove_btn = document.createElement('BUTTON');
  remove_btn.classList.add('action-btn');
  remove_btn.classList.add('remove-btn');
  remove_btn.textContent = 'REMOVE';

  // Remove To-Do's
  remove_btn.addEventListener('click', function() {
    item.parentNode.removeChild(item);
  });

  action_btns.append(edit_input_btn);
  action_btns.append(remove_btn);
  action_btns.append(edit_btn);
  item.append(item_text);
  item.append(edit_input);
  item.append(action_btns);
  list.append(item);

  todo_input.value = '';
});

body {
  background-color: #323232;
  color: #fff;
} /* body tag */

.app {
  margin: 5%;
} /* main div */

.header {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 30px;
} /* title div */

.input {
  width: 60%;
} /* input tasks div */

.input-element {
  width: 80%;
} /* input field */

.input-btn {
  float: right;
  background-color: #23ba42;
  color: #F1F1F1;
} /* add button */

.input input,
.input-btn,
.item-text,
.action-btns,
.edit-input {
  font-size: 28px;
} /* sets font size */

.todo-list {
  margin-top: 40px;
  width: 60%;
  border: 1px solid #FEBC11;
} /* to-do list div */

.item-text {
  float: left;
  width: 60%;
  word-break: break-all;
} /* task text */

.action-btns {
  float: right;
} /* task action button's div */

.action-btn {
  margin-right: 10px;
} /* individual action buttons */

.remove-btn {
  background-color: #ce0a0a;
  color: #f1f1f1;
  font-size: 18px;
} /* remove action button */

.edit-btn {
  background-color: #cb960d;
  color: #f1f1f1; 
  font-size: 18px;
} /* edit action button */

.update-btn {
  background-color: #23ba42;
  color: #f1f1f1;
  font-size: 18px;
} /* update action button */

.edit-input {
  width: 45%;
} /* edit input field  */

.hide{
  display: none;
} /* hides input field for editing to-do tasks */

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <title>Todo App</title>
  </head>
<body>
  <div class="app">
    <div class="header">
    <h1 class="title">My <span style="color: #FEBC11">To-Do</span> List</h1>
    </div>
    <div class="input">
      <input type="text" name="todo-input" id="todo-input" class="input-element" placeholder="What do you need to do?" />
      <button type="button" name="add-btn" id="add-btn" class="input-btn">
        Add
      </button>
    </div>
    <div class="todo-list" id="list"></div>
  </div>
</body>
</html>

Border is not wrapping around whole div

0 Answers0