100 Days of Code: Day 21

Home / Technology / Web Development / 100 Days of Code: Day 21
Today was all about the wedding invitation website for 30 Days, 30 Sites. I am faced with some important design decisions and on the fence about what approach to take.

[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%2221%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 finished the wireframe diagrams for the second 30 Days, 30 Sites challenge. I also started coding the HTML, basic CSS, and JavaScript for the site.[/vc_column_text][vc_custom_heading text=”The Bad:” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_column_text]I discovered a major downside to the whole “waiting until the blank canvas is ready” approach to my design. It worked really well for the Sparrow Photography website, but not as much this time around. Basically, now that I am over halfway through coding this website, I am realizing the design I had in my mind originally is not really what I want.[/vc_column_text][vc_custom_heading text=”Notes/Comments:” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_column_text]The Wedding Invitation is a single page layout where elements of the page are hidden and replaced as needed. When the page loads, the user is shown a box containing instructions and a password input box.[/vc_column_text][vc_single_image image=”5172″ img_size=”full” add_caption=”yes” style=”vc_box_outline” onclick=”link_image”][vc_column_text]

var password = "100DAYS";

function verifyPassword() {
     var passwordEntered = document.getElementById("txt-password").value;

     if (passwordEntered.length !=0&& passwordEntered !=undefined) {
          if (passwordEntered.toUpperCase() === password) {

               showInvitation();
          } else {
          document.getElementById("login-error").innerHTML = "Sorry, you entered an incorrect password. Please try again.";
          }
     } else {
          document.getElementById("login-error").innerHTML = "You must enter a password to continue.";
     }
}

function showInvitation() {
     document.getElementById("password-body").style.display = "none";
     document.getElementById("invitation-body").style.display = "block";
}

[/vc_column_text][vc_column_text]Note: as you can see from the script above, I am using an unsecured method of setting and verifying the password. I would never do this in a real-world scenario. I promise I am not that dumb. I’m only doing it this way now to make sure that everyone can easily find the password without physically putting it on the page.

After successfully entering the password, the contents of the box disappear and are replaced with the invitation details. At the bottom of the page, there is a button labeled ‘RSVP’ where the user will be able to access a form to RSVP to the wedding.[/vc_column_text][vc_single_image image=”5171″ img_size=”full” add_caption=”yes” style=”vc_box_outline” onclick=”link_image”][vc_column_text]This is where I’ve run into trouble with the design.

My original plan was for the next part of the design to be another box that slides down from behind the invitation, showing the RSVP form. However, after creating it (with the exception of the actual animation itself), I realized that I don’t like the design as much as I thought I would.

I haven’t quite decided what I am going to do instead. I think the problem may be in that little RSVP tab that is shown in the previous image. I might change it so it matches the card that is pulled down, so it has a more cohesive design.

Another option is to change my original concept and just have the RSVP form take the place of the invitation contents, essentially keeping everything contained within a single box.

Either way, I am going to decide something tomorrow and just do it. After all, it doesn’t pay to be indecisive.[/vc_column_text][vc_single_image image=”5173″ img_size=”full” add_caption=”yes” style=”vc_box_outline” onclick=”link_image”][vc_column_text]Finally, once the user submits the RSVP form, the contents are replaced with a confirmation message and additional details like contact information and directions.[/vc_column_text][vc_single_image image=”5170″ img_size=”full” add_caption=”yes” style=”vc_box_outline” onclick=”link_image”][vc_column_text]It’s worth noting that the designs shown are intentionally boring and vague. Regardless of what I decide to do about the bottom card, I am planning to incorporate graphics and a lovely color scheme into the design. I will probably use some graphics with a transparent background and position them on top of the boxes for a layered, more complete design.[/vc_column_text][/vc_column][/vc_row]

Let's chat!

%d bloggers like this: