Using only JS to do this assignment was extremely exhausting especially implementing automatic data loading with out rerendering the full page. I have tried my best to keep the code clean and concise but I have found myself lost most of the time. The class folder contains class object used for the data types I had to handle, render has most of the rendering functions that change the DOM element, handler has the logic handling for events like click
, etc.
I have also added some error handling during the login step but I was not able to create some of the status: 400
errors in my testing. They only seem the occur when the DOM renders wrong elements, which tends to be rare.
I tried my best to keep my code readable but during implementation of automatic data loading but I was not able to keep it consistent causing a mess in the index.js
. I was having trouble with figuring out which state the page was on and which element needed to be added or removed. I have tried my best with the resources I was provide and was able to find, but I am aware that there is a better way we can do this.
I have also added a draft functionality so that a user can have their threads and posts saved as draft and come back later and finish it. My method utilizes localStorage
to save, but I could have used cache storage or like gmail have it saved as draft object on the server, so you can access it on any devices. At the moment when a user logs out all the localStorage
is cleared. Hence, you can only use this functionality as log as you are logged in. I chose this as it was way safer and other users cant access other people drafts.
It was fun to try out vanilla JS to create a website but the amount of content we have to write is unsustainable, which makes me realize why people use libraries and framework for dynamic websites like React
, Vue
and Svelte
.
Implementation | Progress |
---|---|
• Login screen allows user to type username | ✅ |
• Login screen validates username | ✅ |
• Threads list displays list of threads | ✅ |
• New threads can be created successfully | ✅ |
• Thread items can be selected to show posts | ✅ |
• Post listing includes both text and display name | ✅ |
• New posts can be added to a thread | ✅ |
• Users can delete their own threads | ✅ |
• The page automatically loads new data | ✅ |
• Challenge task (optional). Navigation using the History API | ❌ |
I was not able to complete the challenge tasks due to time constraints and being overwhelmed by the History API document.
- Mozilla Foundation. (2023, April 4). JavaScript | MDN. MDN Web Docs. Retrieved April 20, 2023, from https://developer.mozilla.org/en-US/docs/Web/JavaScript
- Mozila Foundation. (2023, March 13). HTML: HyperText Markup Language | MDN. MDN Web Docs. Retrieved April 30, 2023, from https://developer.mozilla.org/en-US/docs/Web/HTML
- Mozila Foundation. (2023, April 15). CSS: Cascading Style Sheets | MDN. MDN Web Docs. Retrieved April 15, 2023, from https://developer.mozilla.org/en-US/docs/Web/CSS