100 Days of Code: Day 22
100 Days of Code, Round 1
Goals For Today:[ultimate_icon_list icon_size=”16″ icon_margin=”20″][ultimate_icon_list_item icon_type=”custom” icon_img=”id^4091|url^https://www.blissfullemon.com/wp-content/uploads/2018/05/done.png|caption^null|alt^null|title^done|description^null”]Work on wedding invitation website for 30 Days, 30 Sites challenge[/ultimate_icon_list_item][/ultimate_icon_list]
I am pleasantly surprised by how much I have been able to accomplish today with the wedding invitation website. Not only did I (mostly) resolve my design dilemma from yesterday, but I also managed to knock out almost all the functions for navigating through the site and processing data.
I lost track of time and didn’t do any of the Free Code Camp challenges. Still, I don’t think that’s necessarily bad since, as I said, I got a ton of work done on the site.
The website looks similar to the original design, but I have made a few changes that I am rather happy with.
The login screen looks a lot like the original wireframe design. Instead of adding instructions before the input textbox, however, I decided to just add a little hint at the bottom of the page and let the placeholder text speak for itself.
Once the user successfully enters the password, the invitation appears, as well as buttons for going to the RSVP section, map section, or back to the invitation from anywhere else. I am still not 100% sold on these side tabs, but I like them a lot better than before. I think once I add graphics, as planned, they will look great and be a creative way for the user to interact with the page.
A really cool thing about the countdown is that once the time expires for the user to RSVP to the event, the form fields are completely disabled and the user is shown a message saying that time is up and they will have to contact the wedding coordinator if they wish to attend.
Finally, I decided that it would be better to have a map and link to get directions to the wedding venue in a separate section. That way the user can see where the venue is before committing to attending (or missing) the wedding. For this, I just used an iframe with the embedded map via Google.
- Live Website on GitHub: https://blissfullemon.github.io/WeddingInvitation/index.html
- GitHub Repository: https://github.com/blissfullemon/blissfullemon.github.io/tree/master/WeddingInvitation