100 Days of Code: Day 22

Home / Technology / Web Development / 100 Days of Code: Day 22
Today I tackled a big chunk of the wedding invitation website, including a JavaScript/jQuery countdown timer, disabling and modifying elements using jQuery, and designing almost everything for the final release.

[vc_row css=”.vc_custom_1526680382655{margin-top: 15px !important;margin-bottom: 60px !important;padding-right: 10% !important;padding-left: 10% !important;}”][vc_column][vc_progress_bar values=”%5B%7B%22label%22%3A%22Progress%22%2C%22value%22%3A%2222%22%2C%22color%22%3A%22blue%22%7D%5D” title=”100 Days of Code, Round 1″ percentage_value=”27″ title_color=”#3e3e3e” bar_color=”#1b7da9″ track_height=”20px” track_color=”#e7f6fc” m=”20″ extra_class=”” units=”%”][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Goals For Today:” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][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][vc_custom_heading text=”The Good:” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_column_text]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.[/vc_column_text][vc_custom_heading text=”The Bad:” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_column_text]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.[/vc_column_text][vc_custom_heading text=”Notes/Comments:” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_column_text]The website looks similar to the original design, but I have made a few changes that I am rather happy with.

Login Screen

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.[/vc_column_text][vc_single_image image=”5181″ img_size=”large” alignment=”center” style=”vc_box_outline” onclick=”link_image”][vc_column_text]

Invitation

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.[/vc_column_text][vc_single_image image=”5182″ img_size=”large” alignment=”center” style=”vc_box_outline” onclick=”link_image”][vc_column_text]

RSVP

This is perhaps my favorite part of the page. I have added a fully functional countdown timer using JavaScript and jQuery, as well as a newly designed form for submitting the names, attendance options, and meal option for each guest.[/vc_column_text][vc_single_image image=”5183″ img_size=”large” alignment=”center” style=”vc_box_outline” onclick=”link_image”][vc_column_text]

RSVP (Expired)

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.[/vc_column_text][vc_single_image image=”5185″ img_size=”large” alignment=”center” style=”vc_box_outline” onclick=”link_image”][vc_column_text]

Map

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.[/vc_column_text][vc_single_image image=”5186″ img_size=”large” alignment=”center” style=”vc_box_outline” onclick=”link_image”][vc_custom_heading text=”Important Links” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_column_text]

[/vc_column_text][/vc_column][/vc_row]

Let's chat!

%d bloggers like this: