Do you want to say something positive to a person? Well, lucky for you, the "We are the Champions" web app allows you to do so. Simply type your message, write your name and who you want to address it to, and BAM!, you have written a compliment addressed your intended person on a message board. In addition to writing the message, you can also like it and delete it. (You have the option to like any message but delete only the ones you've written in that browser session.)
This project is meant to teach how to incorporate a Realtime Database (from Firebase) into a project. This is a Scrimba Frontend Development bootcamp project with many enhancements.
Requirements
✅ Build it from "scratch" (using a Figma file)
✅ Follow the design
✅ Utilize Firebase Realtime Database
✅ Update in realtime
Stretch Goals
✅ Add From and To fields
✅ Reverse the order of submitted endorsements
✅ Add liking ability to each endorsement
✅ Make a desktop version
My Additions
✅ Add a delete option to each endorsement
✅ Allow only writer of endorsement to delete it
✅ Make the likes persist across different browser sessions
✅ Change the UI to indicate to the user their liked messages
Live site: https://one-community.netlify.app/
Make the MVP work before I get into the "Stretch Goals" and "My Additions". Additionally, work on a focus-by-focus process i.e. work on all things HTML, CSS, and JS related to the form section first, then do all the endorsement related content second.
HTML, CSS, Vanilla JS, Firebase Realtime Database
When writing to an element's innerHTML, everytime it is overwritten, the event listeners previously associated with the elements in it will be removed.