I pre-apologize for the long winded post, but I figure it’s better to be as specific as possible!
Since it’s the holidays and I’m currently trying to learn javascript, I wanted to try my hand at creating a simple web app that would facilitate matching people for a secret Santa gift exchange.
My goals for app functionality are:
- User can add as many people as they want
- User can remove people
- When user clicks submit button, all participants are randomly matched up and then emailed who they are supposed to get a gift for
- User receives confirmation of all who were matched
- User receives any errors that happened while sending emails
- User can reset page once they are done and submit a new batch of people for a different secret santa
Currently almost everything works! The only thing that is giving me an issue is that even if someone is not successfully emailed, they are still shown as having been emailed. I have commented on this in the code.
There are two main sections of the javascript code.
The first handles adding and deleting additional inputs for participants in the form. This mainly relies on jQuery.
The second is the trickier part that stores the information from the form and then matches people together. This is where I would love to get feedback if possible; especially if there is a better, simpler way to do it! Essentially how it works right now is that the name and email of each individual is stored in an object. An array is created from the names in the object. We then “shuffle” the array so it is in random order.
We then iterate through the array using a for loop. The assign the next name in the array to the current person in the array by pushing the next name to the current person’s object. Next we utilize emailjs.com’s handy API to send an email to each person with the name of who they need to get a gift for.
Once this is all done a results section appears with the names of everyone who was successfully emailed (currently not working properly).
Codepen Example
You can find the javascript in this codepen, as well as a mostly working example (I didn’t enable the emailjs API):
http://codepen.io/kculmback/pen/QGJdeW
I have done my best to provide as thorough explanation of everything in the comments, but please feel free to ask me any questions. I would love any feedback if there are ways to improve the javascript or any suggestions on how to further improve the app! This was largely put together using my own knowledge in combination with various tutorials I found during the project.
If you have any comments on how to improve the CSS or HTML as well, feel free to mention those. But I am mostly concerned with the javascript right now!
Good job. I hope you get the answers you’re looking for. I just started my “Tribute Page” and I’ve been procrastinating for two hours.