Full Stack Asp.Net Core App (Bootcamp Project) - Part 4 - The Front-End

This is the continuation of thrid part of the series.
https://dev.to/zoltanhalasz/full-stack-asp-net-core-app-bootcamp-project-part-3-the-web-api-iao

As mentioned, all html, css and javascript is written manually (without frameworks) in the application. The html and css will not be explained here, instead, we will focus to describe in more detail the front-end Javascript (DOM manipulation) from the Notes html page, which is the main area of the whole application.

This html / javascript was learned as a bootcamp, it's not perfect, just an attempt to show the capabilities of JS in the browser, together with AJAX (Fetch API).

I recommend that the following material is reviewed before reading further:

1. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
2. https://mydev-journey.blogspot.com/2020/02/expense-tracker-from-traversy-media.html
3. https://mydev-journey.blogspot.com/2020/02/full-stack-mini-todo-app-with.html
4. https://mydev-journey.blogspot.com/2020/02/mybooklist-another-traversy-tutorial.html

Link to Github Repo of notes page:
https://github.com/zoltanhalasz/SmartNotes/blob/master/SmartNotes/Pages/Notes.cshtml

The below will be a succinct description of the existing html/javascript code of the notes page.

a. ) The whole start of the action is bootstrapped at the bottom of the page:

   <script>
        window.onload = () => {
            //initialization of functions and showing the notes
            getNotesForUser(myLoginUser, "Desc","(empty)");
            showColorPicker();
            addClickListeners();         
        }
    </script>

b.) there are two variables in the pagemodel, and these will be taken to the front-end and injected in the javascript code:

• user email - to be displayed at the top of the page: Welcome @Model.LoginUserEmail!
• user id, which is crucial in the operation of notes: var myLoginUser = @Model.LoginUserID;

c.) in the top of the page, will be a form for the filtering and ordering of notes (div id="header")

d.) in the main of the html page, we will have a form id="new-note" that will save the new notes.
The onsubmit function is written below, saves the new notes (plus images, colors).

e.) below the main form we will have the list of notes displayed using getNotesForUser function.
This has a fetch with promise, and in the "then", we retrieve the images for the user. Both on the retrieved notes and images array, the insertNotesList(displayNotesList(notes, imgList)) is called which draws the list of notes and pictures.

f.) displayNote function will take the note with id x, and its pictures, and draws the container for the note, inserting pictures.
Note: if there are multiple pictures (allowed to update), the user is allowed to navigate between them, using clicks on the pictures. To see how it's done, please study getCarousel function.

g.) deleting a note: using the trash sign, we have a click event handler createDeleteNote on it. This will create a popup, and if "yes" is chosen, the removeNote function will delete the note from the Dom and back-end.

h.) editing a note: on the pencil icon of a note, createPopin function is invoked upon click, which will display a small form that will give the possibility to change title, content, delete pictures (all), add picture (only 1), and save the note.

i.) change the color of a note: also in the form (new note) and within each individual note: see getColorPickerHtml function. It will display a list of colors, which will change the background color of selected note, and save the color on the back-end for future use.

j.) pin-unpin: this functionality will pin a note, that means it will be shown first, irrespective of sorting/ordering of notes. The pinning will be done also on the back-end, marking the pinned property of a note also in the database. See function pinNote, and also the back-end API with the route: /api/Notes/pinnote

k.) search function - on key press in the search box, the page will send the query to the back-end using the fetch api in getNotesForUser

            getNotesForUser(myLoginUser, ordering, searchterm);

The web API behind this fetch, is able to sort the result using ordering, and find only those notes which have searchterm in title or content. The default searchterm is (empty) which will do no filtering by keyword.

l.) ordering function - in the header (Desc is default, Asc can be chosen). See above point k).

m.) error message functionality: in case of an error while saving/updating a note, a popup will appear, represented by the function: showErrorMessage.

I know, there are lots of points of improvement on the front-end, that was more or less the content of the bootcamp, and I re-created the project for two purposes: practice my Asp.Net Core Web-Api (as opposed to node.js in bootcamp), and Vanilla Javascript skills. Please feel free to comment or come with your own tutorial.

I might come with a next part of the tutorial, mentioning items that have been left out, or going in more detail in another less discussed area.