In this code at event listener on incomeList there is if condition. Sometimes this if condition not getting executed even if it is true. Mostly it gets executed after refresh page after that it is not executed.

I am creating a budget code and I am adding income and expense by creating one div,In this div I am adding delete button with class name list and data attribute. and pushing that whole div in income's parent div. and I am adding data attribute to parent div also.

and I want to make those added div deletable whenever the user clicks on delete buttons.

But whenever I am trying to remove the whole parent div by matching its data attribute to delete button data value. the if condition in incomeList event listener is getting executed for once randomly and delete the whole div only for once. I checked the class liston button and it is there still my if (e.target.classList.contains('list')) condition in incomeList event listener not getting executed every time. I don't know why. The issue is in this part. and the full code is below.

incomeList.addEventListener('click', function (e) {
  console.log('I am here');
  if (e.target.classList.contains('list')) {
    let data = e.target.dataset.btn;
    let removeElement = document.querySelector(`#income-${data}`)
    removeElement.remove();
  }
})

let submit = document.querySelector('.add__btn')
let money = document.querySelector('.add .add__value')
let errorMessage = document.querySelector('.error')
let enteredValue = 0;
let descripetion = document.querySelector('.add__description');
let enteredDescription;
let selector = document.querySelector('.add__type');
let incomeObjects = []
let income = document.createElement('LI');
let expenseObjects = []
let incomeIndex = 0;
let expenseIndex = 0;
const incomeList = document.querySelector('.income_list');
const expenseList = document.querySelector('.expenses__title');

function reset() {
  errorMessage.style.display = 'none';
}

class Budget {
  constructor(description, value) {
    this.description = description;
    this.value = value;
  }
}

function addElement(value) {
  let table;
  let parentDiv = document.createElement('DIV');
  let newDivLeft = document.createElement('DIV');
  let newDivRight = document.createElement('DIV');
  let newDivDelete = document.createElement('BUTTON');
  if (value === 'inc') {
    table = document.querySelector('.income_list');
    newDivDelete.setAttribute('class', 'list');
    parentDiv.setAttribute('id', `income-${incomeIndex}`);
    newDivDelete.setAttribute('data-btn', `${incomeIndex}`);
    newDivLeft.innerHTML = `${incomeObjects[incomeIndex].description}`;
    newDivRight.innerHTML = `${incomeObjects[incomeIndex].value}CA$`;
  } else {
    table = document.querySelector('.expenses__list');
    newDivDelete.setAttribute('class', 'list');
    parentDiv.setAttribute('id', `income-${expenseIndex}`);
    newDivDelete.setAttribute('data-btn', `${expenseIndex}`);
    newDivLeft.innerHTML = `${expenseObjects[expenseIndex].description}`;
    newDivRight.innerHTML = `${expenseObjects[expenseIndex].value}CA$`;
  }

  parentDiv.style.display = 'flex'
  parentDiv.style.justifyContent = 'space-between'

  newDivLeft.style.display = 'inline';
  newDivRight.style.display = 'inline';
  newDivDelete.innerHTML = '<i class="fas fa-trash-alt"></i>'

  parentDiv.appendChild(newDivLeft);
  parentDiv.appendChild(newDivRight);
  parentDiv.appendChild(newDivDelete);
  table.appendChild(parentDiv);
}

submit.addEventListener('click', function (e) {
  if (e.target.nodeName === 'I' && selector.value === 'inc' && money.value !== '' &&
    descripetion.value !== '') {
    reset();
    if (money.value < 0) {
      errorMessage.style.display = 'block';
    } else {
      enteredValue = money.value;
      enteredDescription = descripetion.value;

      incomeObjects.push(new Budget(enteredDescription, enteredValue));
      addElement(selector.value);
      incomeIndex++
    }
  } else if (e.target.nodeName === 'I' && selector.value === 'exp' && money.value !== '' &&
    descripetion.value !== '') {
    reset();
    if (money.value < 0) {
      errorMessage.style.display = 'block';
    } else {
      enteredValue = money.value;
      enteredDescription = descripetion.value;

      expenseObjects.push(new Budget(enteredDescription, enteredValue));
      addElement(selector.value);
      expenseIndex++
    }
  }
  money.value = '';
  descripetion.value = '';
})

incomeList.addEventListener('click', function (e) {
  console.log('I am here');
  if (e.target.classList.contains('list')) {
    let data = e.target.dataset.btn;
    let removeElement = document.querySelector(`#income-${data}`)
    removeElement.remove();
  }
})
/**********************************************
*** GENERAL
**********************************************/

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

.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

body {
  color: #555;
  font-family: Open Sans;
  font-size: 16px;
  position: relative;
  height: 100vh;
  font-weight: 400;
}

.right {
  float: right;
}
.red {
  color: #ff5049 !important;
}
.red-focus:focus {
  border: 1px solid #ff5049 !important;
}

/**********************************************
*** TOP PART
**********************************************/

.top {
  height: 40vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
    url(https://practice-project.niziol.ca/back.png);
  background-size: cover;
  background-position: center;
  position: relative;
}

.budget {
  position: absolute;
  width: 350px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

.budget__title {
  font-size: 18px;
  text-align: center;
  margin-bottom: 10px;
  font-weight: 300;
}

.budget__value {
  font-weight: 300;
  font-size: 46px;
  text-align: center;
  margin-bottom: 25px;
  letter-spacing: 2px;
}

.budget__income,
.budget__expenses {
  padding: 12px;
  text-transform: uppercase;
}

.budget__income {
  margin-bottom: 10px;
  background-color: #28b9b5;
}

.budget__expenses {
  background-color: #ff5049;
}

.budget__income--text,
.budget__expenses--text {
  float: left;
  font-size: 13px;
  color: #444;
  margin-top: 2px;
}

.budget__income--value,
.budget__expenses--value {
  letter-spacing: 1px;
  float: left;
}

.budget__income--percentage,
.budget__expenses--percentage {
  float: left;
  width: 34px;
  font-size: 11px;
  padding: 3px 0;
  margin-left: 10px;
}

.budget__expenses--percentage {
  background-color: rgba(255, 255, 255, 0.2);
  text-align: center;
  border-radius: 3px;
}

/**********************************************
*** BOTTOM PART
**********************************************/

/***** FORM *****/
.add {
  padding: 14px;
  border-bottom: 1px solid #e7e7e7;
  background-color: #f7f7f7;
  text-align: center;
}

.error {
  margin: auto;
  display: inline-block;
  margin-top: 20px;
  background-color: #ffcdcd;
  border: 3px solid #c91212;
  padding: 10px;
  color: #c91212;
  border-radius: 5px;
}

.add__container {
  margin: 0 auto;
  text-align: center;
}

.add__type {
  width: 55px;
  border: 1px solid #e7e7e7;
  height: 44px;
  font-size: 18px;
  color: inherit;
  background-color: #fff;
  margin-right: 10px;
  font-weight: 300;
  transition: border 0.3s;
}

.add__description,
.add__value {
  border: 1px solid #e7e7e7;
  background-color: #fff;
  color: inherit;
  font-family: inherit;
  font-size: 14px;
  padding: 12px 15px;
  margin-right: 10px;
  border-radius: 5px;
  transition: border 0.3s;
}

.add__description {
  width: 400px;
}
.add__value {
  width: 100px;
}

.add__btn {
  font-size: 35px;
  background: none;
  border: none;
  color: #28b9b5;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  line-height: 1.1;
  margin-left: 10px;
}

.add__btn:active {
  transform: translateY(2px);
}

.add__type:focus,
.add__description:focus,
.add__value:focus {
  outline: none;
  border: 1px solid #28b9b5;
}

.add__btn:focus {
  outline: none;
}

/***** LISTS *****/
.container {
  width: 1000px;
  margin: 60px auto;
}

.income {
  float: left;
  width: 475px;
  margin-right: 50px;
}

.expenses {
  float: left;
  width: 475px;
}

h2 {
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 15px;
}

.icome__title {
  color: #28b9b5;
}
.expenses__title {
  color: #ff5049;
}

.item {
  padding: 13px;
  border-bottom: 1px solid #e7e7e7;
}

.item:first-child {
  border-top: 1px solid #e7e7e7;
}
.item:nth-child(even) {
  background-color: #f7f7f7;
}

.item__description {
  float: left;
}

.item__value {
  float: left;
  transition: transform 0.3s;
}

.item__percentage {
  float: left;
  margin-left: 20px;
  transition: transform 0.3s;
  font-size: 11px;
  background-color: #ffdad9;
  padding: 3px;
  border-radius: 3px;
  width: 32px;
  text-align: center;
}

.income .item__value,
.income .item__delete--btn {
  color: #28b9b5;
}

.expenses .item__value,
.expenses .item__percentage,
.expenses .item__delete--btn {
  color: #ff5049;
}

.item__delete {
  float: left;
}

.item__delete--btn {
  font-size: 22px;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  display: none;
}

.item__delete--btn:focus {
  outline: none;
}
.item__delete--btn:active {
  transform: translateY(2px);
}

.item:hover .item__delete--btn {
  display: block;
}
.item:hover .item__value {
  transform: translateX(-20px);
}
.item:hover .item__percentage {
  transform: translateX(-20px);
}

.unpaid {
  background-color: #ffdad9 !important;
  cursor: pointer;
  color: #ff5049;
}

.unpaid .item__percentage {
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
}
.unpaid:hover .item__description {
  font-weight: 900;
}

.error {
  display: none;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,600"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
      integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
      crossorigin="anonymous"
    />

    <link type="text/css" rel="stylesheet" href="style.css" />
    <title>Budgety</title>
  </head>
  <body>
    <div class="top">
      <div class="budget">
        <div class="budget__title">
          Available Budget in <span class="budget__title--month">%Month%</span>:
        </div>

        <div class="budget__value">0.00</div>

        <div class="budget__income clearfix">
          <div class="budget__income--text">Income</div>
          <div class="right">
            <div class="budget__income--value">+ 0.00</div>
            <div class="budget__income--percentage">&nbsp;</div>
          </div>
        </div>

        <div class="budget__expenses clearfix">
          <div class="budget__expenses--text">Expenses</div>
          <div class="right clearfix">
            <div class="budget__expenses--value">- 0.00</div>
            <div class="budget__expenses--percentage">0.00%</div>
          </div>
        </div>
      </div>
    </div>

    <div class="bottom">
      <div class="add">
        <div class="add__container">
          <select class="add__type">
            <option value="inc" selected>+</option>
            <option value="exp">-</option>
          </select>
          <input
            type="text"
            class="add__description"
            placeholder="Add description"
          />
          <input type="number" class="add__value" placeholder="Value" />
          <button class="add__btn">
            <i class="ion-ios-checkmark-outline"></i>
          </button>
        </div>
      </div>
      <div class="error">Vaalue can be positive number only.</div>

      <div class="container clearfix">
        <div class="income">
          <h2 class="icome__title">Income</h2>

          <div class="income_list">
            <!--
                        <div class="item clearfix" id="income-0">
                            <div class="item__description">Salary</div>
                            <div class="right clearfix">
                                <div class="item__value">+ 2,100.00</div>
                                <div class="item__delete">
                                    <button class="item__delete--btn">
                                        <i class="ion-ios-close-outline"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="item clearfix" id="income-1">
                            <div class="item__description">Sold car</div>
                            <div class="right clearfix">
                                <div class="item__value">+ 1,500.00</div>
                                <div class="item__delete">
                                    <button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button>
                                </div>
                            </div>
                        </div>
                        -->
          </div>
        </div>

        <div class="expenses">
          <h2 class="expenses__title">Expenses</h2>

          <div class="expenses__list">
            <!--
                        <div class="item clearfix" id="expense-0">
                            <div class="item__description">Apartment rent</div>
                            <div class="right clearfix">
                                <div class="item__value">- 900.00</div>
                                <div class="item__percentage">21%</div>
                                <div class="item__delete">
                                    <button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button>
                                </div>
                            </div>
                        </div>

                        <div class="item clearfix" id="expense-1">
                            <div class="item__description">Grocery shopping</div>
                            <div class="right clearfix">
                                <div class="item__value">- 435.28</div>
                                <div class="item__percentage">10%</div>
                                <div class="item__delete">
                                    <button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button>
                                </div>
                            </div>
                        </div>
                        -->
          </div>
        </div>
      </div>
    </div>

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

1 Answers

0
Dananjaya Ariyasena On Best Solutions

( First of all my english is not good. so sorry in advance if my answer is not clear )As I can see the issue is in delete button. Inside the delete button, you have icon. If the delete button is small or icon is large whenever you click the delete button, event triggers to the icon, because the icon is on top of the button. So the class you are checking is in the parent node. As I have used you can check the parent node also, by using e.target.parentNode.classList. Please ask anything if this answer is not clear. Thank you

let submit = document.querySelector('.add__btn')
let money = document.querySelector('.add .add__value')
let errorMessage = document.querySelector('.error')
let enteredValue = 0;
let descripetion = document.querySelector('.add__description');
let enteredDescription;
let selector = document.querySelector('.add__type');
let incomeObjects = []
let income = document.createElement('LI');
let expenseObjects = []
let incomeIndex = 0;
let expenseIndex = 0;
const incomeList = document.querySelector('.income_list');
const expenseList = document.querySelector('.expenses__title');

function reset() {
  errorMessage.style.display = 'none';
}

class Budget {
  constructor(description, value) {
    this.description = description;
    this.value = value;
  }
}

function addElement(value) {
  let table;
  let parentDiv = document.createElement('DIV');
  let newDivLeft = document.createElement('DIV');
  let newDivRight = document.createElement('DIV');
  let newDivDelete = document.createElement('BUTTON');
  if (value === 'inc') {
    table = document.querySelector('.income_list');
    newDivDelete.setAttribute('class', 'list');
    parentDiv.setAttribute('id', `income-${incomeIndex}`);
    newDivDelete.setAttribute('data-btn', `${incomeIndex}`);
    newDivLeft.innerHTML = `${incomeObjects[incomeIndex].description}`;
    newDivRight.innerHTML = `${incomeObjects[incomeIndex].value}CA$`;
  } else {
    table = document.querySelector('.expenses__list');
    newDivDelete.setAttribute('class', 'list');
    parentDiv.setAttribute('id', `income-${expenseIndex}`);
    newDivDelete.setAttribute('data-btn', `${expenseIndex}`);
    newDivLeft.innerHTML = `${expenseObjects[expenseIndex].description}`;
    newDivRight.innerHTML = `${expenseObjects[expenseIndex].value}CA$`;
  }

  parentDiv.style.display = 'flex'
  parentDiv.style.justifyContent = 'space-between'

  newDivLeft.style.display = 'inline';
  newDivRight.style.display = 'inline';
  newDivDelete.innerHTML = '<i class="fas fa-trash-alt"></i>'

  parentDiv.appendChild(newDivLeft);
  parentDiv.appendChild(newDivRight);
  parentDiv.appendChild(newDivDelete);
  table.appendChild(parentDiv);
}

submit.addEventListener('click', function (e) {
  if (e.target.nodeName === 'I' && selector.value === 'inc' && money.value !== '' &&
    descripetion.value !== '') {
    reset();
    if (money.value < 0) {
      errorMessage.style.display = 'block';
    } else {
      enteredValue = money.value;
      enteredDescription = descripetion.value;

      incomeObjects.push(new Budget(enteredDescription, enteredValue));
      addElement(selector.value);
      incomeIndex++
    }
  } else if (e.target.nodeName === 'I' && selector.value === 'exp' && money.value !== '' &&
    descripetion.value !== '') {
    reset();
    if (money.value < 0) {
      errorMessage.style.display = 'block';
    } else {
      enteredValue = money.value;
      enteredDescription = descripetion.value;

      expenseObjects.push(new Budget(enteredDescription, enteredValue));
      addElement(selector.value);
      expenseIndex++
    }
  }
  money.value = '';
  descripetion.value = '';
})

incomeList.addEventListener('click', function (e) {
  console.log('I am here : event : ' + e.target.classList);
  console.log('I am here : parent : ' + e.target.parentNode.classList.contains('list'));
  if ( e.target.classList.contains('list') || e.target.parentNode.classList.contains('list') ) {
    let data = e.target.dataset.btn;
    let removeElement = document.querySelector(`#income-${data}`)
    removeElement.remove();
  }
})
/**********************************************
*** GENERAL
**********************************************/

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

.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

body {
  color: #555;
  font-family: Open Sans;
  font-size: 16px;
  position: relative;
  height: 100vh;
  font-weight: 400;
}

.right {
  float: right;
}
.red {
  color: #ff5049 !important;
}
.red-focus:focus {
  border: 1px solid #ff5049 !important;
}

/**********************************************
*** TOP PART
**********************************************/

.top {
  height: 40vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
    url(https://practice-project.niziol.ca/back.png);
  background-size: cover;
  background-position: center;
  position: relative;
}

.budget {
  position: absolute;
  width: 350px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

.budget__title {
  font-size: 18px;
  text-align: center;
  margin-bottom: 10px;
  font-weight: 300;
}

.budget__value {
  font-weight: 300;
  font-size: 46px;
  text-align: center;
  margin-bottom: 25px;
  letter-spacing: 2px;
}

.budget__income,
.budget__expenses {
  padding: 12px;
  text-transform: uppercase;
}

.budget__income {
  margin-bottom: 10px;
  background-color: #28b9b5;
}

.budget__expenses {
  background-color: #ff5049;
}

.budget__income--text,
.budget__expenses--text {
  float: left;
  font-size: 13px;
  color: #444;
  margin-top: 2px;
}

.budget__income--value,
.budget__expenses--value {
  letter-spacing: 1px;
  float: left;
}

.budget__income--percentage,
.budget__expenses--percentage {
  float: left;
  width: 34px;
  font-size: 11px;
  padding: 3px 0;
  margin-left: 10px;
}

.budget__expenses--percentage {
  background-color: rgba(255, 255, 255, 0.2);
  text-align: center;
  border-radius: 3px;
}

/**********************************************
*** BOTTOM PART
**********************************************/

/***** FORM *****/
.add {
  padding: 14px;
  border-bottom: 1px solid #e7e7e7;
  background-color: #f7f7f7;
  text-align: center;
}

.error {
  margin: auto;
  display: inline-block;
  margin-top: 20px;
  background-color: #ffcdcd;
  border: 3px solid #c91212;
  padding: 10px;
  color: #c91212;
  border-radius: 5px;
}

.add__container {
  margin: 0 auto;
  text-align: center;
}

.add__type {
  width: 55px;
  border: 1px solid #e7e7e7;
  height: 44px;
  font-size: 18px;
  color: inherit;
  background-color: #fff;
  margin-right: 10px;
  font-weight: 300;
  transition: border 0.3s;
}

.add__description,
.add__value {
  border: 1px solid #e7e7e7;
  background-color: #fff;
  color: inherit;
  font-family: inherit;
  font-size: 14px;
  padding: 12px 15px;
  margin-right: 10px;
  border-radius: 5px;
  transition: border 0.3s;
}

.add__description {
  width: 400px;
}
.add__value {
  width: 100px;
}

.add__btn {
  font-size: 35px;
  background: none;
  border: none;
  color: #28b9b5;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  line-height: 1.1;
  margin-left: 10px;
}

.add__btn:active {
  transform: translateY(2px);
}

.add__type:focus,
.add__description:focus,
.add__value:focus {
  outline: none;
  border: 1px solid #28b9b5;
}

.add__btn:focus {
  outline: none;
}

/***** LISTS *****/
.container {
  width: 1000px;
  margin: 60px auto;
}

.income {
  float: left;
  width: 475px;
  margin-right: 50px;
}

.expenses {
  float: left;
  width: 475px;
}

h2 {
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 15px;
}

.icome__title {
  color: #28b9b5;
}
.expenses__title {
  color: #ff5049;
}

.item {
  padding: 13px;
  border-bottom: 1px solid #e7e7e7;
}

.item:first-child {
  border-top: 1px solid #e7e7e7;
}
.item:nth-child(even) {
  background-color: #f7f7f7;
}

.item__description {
  float: left;
}

.item__value {
  float: left;
  transition: transform 0.3s;
}

.item__percentage {
  float: left;
  margin-left: 20px;
  transition: transform 0.3s;
  font-size: 11px;
  background-color: #ffdad9;
  padding: 3px;
  border-radius: 3px;
  width: 32px;
  text-align: center;
}

.income .item__value,
.income .item__delete--btn {
  color: #28b9b5;
}

.expenses .item__value,
.expenses .item__percentage,
.expenses .item__delete--btn {
  color: #ff5049;
}

.item__delete {
  float: left;
}

.item__delete--btn {
  font-size: 22px;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  display: none;
}

.item__delete--btn:focus {
  outline: none;
}
.item__delete--btn:active {
  transform: translateY(2px);
}

.item:hover .item__delete--btn {
  display: block;
}
.item:hover .item__value {
  transform: translateX(-20px);
}
.item:hover .item__percentage {
  transform: translateX(-20px);
}

.unpaid {
  background-color: #ffdad9 !important;
  cursor: pointer;
  color: #ff5049;
}

.unpaid .item__percentage {
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
}
.unpaid:hover .item__description {
  font-weight: 900;
}

.error {
  display: none;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,600"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
      integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
      crossorigin="anonymous"
    />

    <link type="text/css" rel="stylesheet" href="style.css" />
    <title>Budgety</title>
  </head>
  <body>
    <div class="top">
      <div class="budget">
        <div class="budget__title">
          Available Budget in <span class="budget__title--month">%Month%</span>:
        </div>

        <div class="budget__value">0.00</div>

        <div class="budget__income clearfix">
          <div class="budget__income--text">Income</div>
          <div class="right">
            <div class="budget__income--value">+ 0.00</div>
            <div class="budget__income--percentage">&nbsp;</div>
          </div>
        </div>

        <div class="budget__expenses clearfix">
          <div class="budget__expenses--text">Expenses</div>
          <div class="right clearfix">
            <div class="budget__expenses--value">- 0.00</div>
            <div class="budget__expenses--percentage">0.00%</div>
          </div>
        </div>
      </div>
    </div>

    <div class="bottom">
      <div class="add">
        <div class="add__container">
          <select class="add__type">
            <option value="inc" selected>+</option>
            <option value="exp">-</option>
          </select>
          <input
            type="text"
            class="add__description"
            placeholder="Add description"
          />
          <input type="number" class="add__value" placeholder="Value" />
          <button class="add__btn">
            <i class="ion-ios-checkmark-outline"></i>
          </button>
        </div>
      </div>
      <div class="error">Vaalue can be positive number only.</div>

      <div class="container clearfix">
        <div class="income">
          <h2 class="icome__title">Income</h2>

          <div class="income_list">
            <!--
                        <div class="item clearfix" id="income-0">
                            <div class="item__description">Salary</div>
                            <div class="right clearfix">
                                <div class="item__value">+ 2,100.00</div>
                                <div class="item__delete">
                                    <button class="item__delete--btn">
                                        <i class="ion-ios-close-outline"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="item clearfix" id="income-1">
                            <div class="item__description">Sold car</div>
                            <div class="right clearfix">
                                <div class="item__value">+ 1,500.00</div>
                                <div class="item__delete">
                                    <button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button>
                                </div>
                            </div>
                        </div>
                        -->
          </div>
        </div>

        <div class="expenses">
          <h2 class="expenses__title">Expenses</h2>

          <div class="expenses__list">
            <!--
                        <div class="item clearfix" id="expense-0">
                            <div class="item__description">Apartment rent</div>
                            <div class="right clearfix">
                                <div class="item__value">- 900.00</div>
                                <div class="item__percentage">21%</div>
                                <div class="item__delete">
                                    <button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button>
                                </div>
                            </div>
                        </div>

                        <div class="item clearfix" id="expense-1">
                            <div class="item__description">Grocery shopping</div>
                            <div class="right clearfix">
                                <div class="item__value">- 435.28</div>
                                <div class="item__percentage">10%</div>
                                <div class="item__delete">
                                    <button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button>
                                </div>
                            </div>
                        </div>
                        -->
          </div>
        </div>
      </div>
    </div>

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