fix: code snippet can add mood with empty name

docs/tutorial-5.md

@@ -655,15 +655,22 @@ Modal dengan form yang telah kamu buat sebelumnya belum bisa digunakan untuk men
     - `new FormData(document.querySelector('#moodEntryForm'))` digunakan untuk membuat sebuah `FormData` baru yang datanya diambil dari _form_ pada modal. Objek `FormData` dapat digunakan untuk mengirimkan data _form_ tersebut ke server.
     - `document.getElementById("moodEntryForm").reset()` digunakan untuk mengosongkan isi *field* form modal setelah di-*submit*.
 
-2. Tambahkan fungsi `onclick` pada *button* "Add Product" pada modal untuk menjalankan fungsi `addMoodEntry()` dengan menambahkan kode berikut.
+2. Tambahkan sebuah _event listener_ pada form yang ada di modal untuk menjalankan fungsi `addMoodEntry()` dengan menambahkan kode berikut.
     ```html title="main/templates/main.html"
     <script>
     ...
-    document.getElementById("submitMoodEntry").onclick = addMoodEntry
+    document.getElementById("moodEntryForm").addEventListener("submit", (e) => {
+        e.preventDefault();
+        addMoodEntry();
+      })
     </script>
     ```
     **Penjelasan Kode:**
-    - `document.getElementById("submitMoodEntry").onclick = addMoodEntry`: Apabila tombol _save_ pada modal (`<button type="submit" id="submitMoodEntry" form="moodEntryForm" class="bg-indigo-700 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-lg">Save</button>`) di-_click_, maka aplikasi ada akan memanggil fungsi `addMoodEntry()`. 
+    - `document.getElementById("moodEntryForm")`: Mengambil sebuah element dengan id "moodEntryForm" dari DOM yang merupakan elemen form pada modal yang digunakan untuk menambahkan _mood entry_ menggunakan AJAX.
+    - `.addEventListener("submit", ...)`: Menambahkan _event listener_ pada form yang telah diambil/di-_select_ dari DOM pada bagian sebelumnya, lalu menambahkan sebuah fungsi _callback_ yang akan dipanggil ketika form di-_submit_ (yaitu ketika tombol elemen input yang memiliki `type="submit"` diklik).
+    - `(e) => {...`: Merupakan fungsi _callback_ yang diberikan ke _event listener_ fungsi tersebut, kemudian akan dijalankan ketika form di-_submit_ (fungsi ditulis menggunakan notasi _arrow function_ yang baru ditambahkan pada standar ES6 JavaScript. Kamu dapat mengeksplorasi konsep ini lebih lanjut pada [artikel ini](https://www.freecodecamp.org/news/javascript-arrow-functions-in-depth/)).
+    - `e.preventDefault()`: Secara _default_, ketika sebuah form mengalami _event submit_, form tersebut akan berusaha mengirimkan data ke URL yang dimasukkan pada atribut `action` pada tag `form`. Akan tetapi, karena kita menggunakan metode AJAX yang berbeda dengan yang biasa kita gunakan sebelumnya pada Django, kita perlu mematikan _default behavior_ ini menggunakan _method_ `preventdefault()`.
+    - `addMoodEntry()`: Memanggil fungsi untuk menambahkan _mood entry_.
 
 Selamat! Kamu telah berhasil membuat aplikasi yang dapat menambahkan data dengan menggunakan AJAX. Bukalah [http://localhost:8000/](http://localhost:8000/) dan cobalah untuk menambahkan data _mood entry_ baru pada aplikasi. Seharusnya, sekarang aplikasi tidak perlu melakukan *reload* setiap kali data _mood entry_ baru ditambahkan.
 

i18n/en/docusaurus-plugin-content-docs/current/tutorial-5.md

@@ -649,16 +649,23 @@ The modal with the form that you have created previously cannot be used to add d
     - `new FormData(document.querySelector('#moodEntryForm'))` is used to create a new `FormData` object that contains the data from the form in the modal. The `FormData` object can be used to send the form data to the server.
     - `document.getElementById("moodEntryForm").reset()` is used to clear the contents of the field form modal after submitting.
 
-2. Add the `onclick` function to the "Add Product" button in the modal to run the `addMoodEntry()` function with the following code.
+2. Add an event listener to the form in the modal to run the `addMoodEntry()` function with the following code.
     ```html title="main/templates/main.html"
     <script>
     ...
-    document.getElementById("submitMoodEntry").onclick = addMoodEntry
+     document.getElementById("moodEntryForm").addEventListener("submit", (e) => {
+        e.preventDefault();
+        addMoodEntry();
+      })
     </script>
     ```
 
     **Code Explanation:**
-    - `document.getElementById("submitMoodEntry").onclick = addMoodEntry`: When the save button in the modal (`<button type="submit" id="submitMoodEntry" form="moodEntryForm" class="bg-indigo-700 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-lg">Save</button>`) is clicked, then the application will call the `addMoodEntry()` function.
+    - `document.getElementById("moodEntryForm")`: Retrieves an element with the ID "moodEntryForm" from the DOM, which is the form element in the modal used for adding a mood entry using AJAX.
+    - `.addEventListener("submit", ...)`: Adds an event listener to the form that was selected from the DOM in the previous step, then attaches a callback function that will be invoked when the form is submitted (i.e., when the input element with `type="submit"` is clicked).
+    - `(e) => {...`: The callback function provided to the event listener, which will be executed when the form is submitted (the function is written using the arrow function notation introduced in the ES6 standard of JavaScript; you can explore this concept further at [about arrow functions](https://www.freecodecamp.org/news/javascript-arrow-functions-in-depth/)).
+    - `e.preventDefault()`: By default, a form that experiences a submit event will attempt to send data to the URL specified in the `action` attribute of the `form` tag. However, since we are using a different AJAX method than what is typically done in Django, we want to disable this default behavior using the `preventDefault()` method.
+    - `addMoodEntry()`: Calls the function to add a mood entry.
 
 Congratulations! You have successfully created an application that can add data using AJAX. Go to [http://localhost:8000/](http://localhost:8000/) and try to add a new mood entry to the application. Now, the application should not need a reload every time a new mood entry has been added.