Как обновить функцию sortNotes новыми входными данными?

Question

Я делаю приложение для заметок:

1. Я создал в javascript const 'notes', который содержит массив объектов внутри. Каждый объект имеет заголовок и описание с соответствующими значениями.

2. Создает функцию, назначенную для const 'sortNotes', которая сортирует объекты по алфавиту по его заголовку (от a до z).

3. создал функцию, назначенную для const 'notesOutput', который создает для каждого объекта элемент (h5) для заголовка и a (p) для описания.

4. создал функцию, назначенную для const 'newNote', которая создает новый объект в массиве с такими же свойствами (заголовок и описание)

5. наконец, но не в последнюю очередь,создал слушатель события формы с отправкой события. При нажатии на кнопку «Отправить» необходимо принять значение ввода заголовка и ввода описания.

6. , затем я вызываю функцию «newNote» с правильными аргументами для создания нового объекта. внутри массива. - по-видимому, это работает.

7. Вызывается функция 'notesOutput', чтобы показать в выводе новую заметку с заголовком и описанием - по-видимому, это работает

8. раньше я вызывал функцию sortNotes, которая отвечает за сортировку заметок в алфавитном порядке по алфавиту. Что происходит, это не работает, как я ожидал. Не требуется подсчитывать заметки, которые уже присутствуют в выводе, и заметки, которые создаются заново, поэтому они не очень хорошо организованы. Я полагаю, что мне нужно обновить что-то в этой функции 'sortNotes', отвечающей за sort (), но я не могу понять, что.

const notes = [{
  title: 'Bank',
  description: 'Save 100€ every month to my account'
}, {
  title: 'Next trip',
  description: 'Go to spain in the summer'
}, {
  title: 'Health',
  description: 'Dont´forget to do the exams'
}, {
  title: 'Office',
  description: 'Buy a  better chair and a better table to work'
}]



const sortNotes = function(notes) {
  const organize = notes.sort(function(a, b) {

    if (a.title < b.title) {
      return -1
    } else if (a.title > b.title) {
      return 1
    } else {
      return 0
    }
  })

  return organize
}

sortNotes(notes)


const notesOutput = function(notes) {

  const ps = notes.forEach(function(note) {

    const title = document.createElement('h5')
    const description = document.createElement('p')

    title.textContent = note.title
    description.textContent = note.description

    document.querySelector('#p-container').appendChild(title)
    document.querySelector('#p-container').appendChild(description)
  })

  return ps
}

notesOutput(notes)


const newNote = function(titleInput, descriptionInput) {
  notes.push({
    title: titleInput,
    description: descriptionInput
  })
}



const form = document.querySelector('#form-submit')
const inputTitle = document.querySelector('#form-input-title')

inputTitle.focus()

form.addEventListener('submit', function(e) {
  e.preventDefault()

  const newTitle = e.target.elements.titleNote.value
  const newDescription = e.target.elements.descriptionNote.value

  newNote(newTitle, newDescription)
  sortNotes(notes)
  notesOutput(notes)
  console.log(notes)

  e.target.elements.titleNote.value = ''
  e.target.elements.descriptionNote.value = ''

  inputTitle.focus()

})

* {
  font-family: 'Roboto', sans-serif;
  color: white;
  letter-spacing: .1rem;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  background-color: seagreen;
  padding: 2rem;
}

.container-p {
  padding: 2rem 0;
}

form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

label {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .25rem;
}

input,
textarea {
  width: 100%;
  padding: .5rem;
  margin: 1rem 0;
  color: #0d4927;
  font-weight: bold;
  font-size: 1rem;
}

.container-submit__button {
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #0d4927;
  padding: 1rem 2rem;
  border: 2px solid #0d4927;
  cursor: pointer;
  margin: 1rem 0;
  align-self: flex-end;
}

h1 {
  font-size: 2rem;
  letter-spacing: .3rem;
}

h2 {
  font-size: 1.5rem;
  font-weight: 300;
}

h5 {
  font-size: 1.05rem;
  margin: 1rem 0 .8rem 0;
  padding: .4rem;
  letter-spacing: .12rem;
  display: inline-block;
  border: 2px solid;
}

<div class="container" id="app-container">
  <h1>NOTES APP</h1>
  <h2>Take notes and never forget</h2>
  <div id="p-container" class="container-p">

  </div>

  <div class="container-submit" id="app-container-submit">

    <form action="" id="form-submit">
      <label for="">Title</label>
      <input type="text" class="input-title" id="form-input-title" name="titleNote">
      <label for="">Description</label>
      <textarea name="descriptionNote" id="form-input-description" cols="30" rows="10"></textarea>
      <button class="container-submit__button" id="app-button" type="submit">Add Notes</button>
    </form>

  </div>
</div>

Answer 1

• sort сортирует массив на месте, поэтому вам не нужна функция, которая что-то возвращает в никуда

• В вашем сортировке учитывается регистр. Удалите toLowerCase, если вы хотите снова сделать его чувствительным к регистру

• НЕ передавайте заметки в функции. Это должен быть глобальный объект

• Очистить контейнер перед выводом

• Нет необходимости возвращать вещи, которые не используются

let notes = [{
  title: 'Bank',
  description: 'Save 100€ every month to my account'
}, {
  title: 'Office',
  description: 'Buy a  better chair and a better table to work'
}, {
  title: 'Health',
  description: 'Dont´forget to do the exams'
}, {
  title: 'Next trip',
  description: 'Go to spain in the summer'
}]

const sortNotes = function(a, b) {
  if (a.title.toLowerCase() < b.title.toLowerCase()) {
    return -1
  } else if (a.title.toLowerCase() > b.title.toLowerCase()) {
    return 1
  } else {
    return 0
  }
}

const notesOutput = function() {
  document.querySelector('#p-container').innerHTML = "";
  notes.sort(sortNotes)
  notes.forEach(function(note) {
    const title = document.createElement('h5')
    const description = document.createElement('p')
    title.textContent = note.title
    description.textContent = note.description
    document.querySelector('#p-container').appendChild(title)
    document.querySelector('#p-container').appendChild(description)
  })
}

const newNote = function(titleInput, descriptionInput) {
  notes.push({
    title: titleInput,
    description: descriptionInput
  })
}

const form = document.querySelector('#form-submit')
const inputTitle = document.querySelector('#form-input-title')

form.addEventListener('submit', function(e) {
  e.preventDefault()

  const newTitle = e.target.elements.titleNote.value
  const newDescription = e.target.elements.descriptionNote.value

  newNote(newTitle, newDescription)
  notesOutput(notes)


  e.target.elements.titleNote.value = ''
  e.target.elements.descriptionNote.value = ''

  inputTitle.focus()

})

notesOutput()
inputTitle.focus()

* {
  font-family: 'Roboto', sans-serif;
  color: white;
  letter-spacing: .1rem;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  background-color: seagreen;
  padding: 2rem;
}

.container-p {
  padding: 2rem 0;
}

form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

label {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .25rem;
}

input,
textarea {
  width: 100%;
  padding: .5rem;
  margin: 1rem 0;
  color: #0d4927;
  font-weight: bold;
  font-size: 1rem;
}

.container-submit__button {
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #0d4927;
  padding: 1rem 2rem;
  border: 2px solid #0d4927;
  cursor: pointer;
  margin: 1rem 0;
  align-self: flex-end;
}

h1 {
  font-size: 2rem;
  letter-spacing: .3rem;
}

h2 {
  font-size: 1.5rem;
  font-weight: 300;
}

h5 {
  font-size: 1.05rem;
  margin: 1rem 0 .8rem 0;
  padding: .4rem;
  letter-spacing: .12rem;
  display: inline-block;
  border: 2px solid;
}

<div class="container" id="app-container">
  <h1>NOTES APP</h1>
  <h2>Take notes and never forget</h2>
  <div id="p-container" class="container-p">

  </div>

  <div class="container-submit" id="app-container-submit">

    <form action="" id="form-submit">
      <label for="">Title</label>
      <input type="text" class="input-title" id="form-input-title" name="titleNote">
      <label for="">Description</label>
      <textarea name="descriptionNote" id="form-input-description" cols="30" rows="10"></textarea>
      <button class="container-submit__button" id="app-button" type="submit">Add Notes</button>
    </form>

  </div>
</div>