100 Days of Code: Day 31

Home / Technology / Web Development / 100 Days of Code: Day 31
It was a busy day but definitely worth it. I added even more functionality to the Color Helper application from last week and got started on the next FCC project.

[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%2231%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”]Improve the functionality of the Color Helper application[/ultimate_icon_list_item][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”]Start on the next project for the Free Code Camp Responsive Web Design Certification – Build a Product Landing Page[/ultimate_icon_list_item][/ultimate_icon_list][vc_custom_heading text=”The Bad:” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_column_text]I am starting with the bad today, not because it is more important, but because that’s just how my day started.

Today was a bad day for me mentally. It had nothing to do with coding and everything to do with the tragic death of Anthony Bourdain. I know that sounds ridiculous. How can the death of a perfect stranger have such a negative effect on me? I’ve lost more than one person to suicide and it never gets easier to lose friends, family members, or idols to the darkness. No one is untouchable. No one is safe.

But enough of that for now. I got a lot accomplished despite feeling like there was a dark cloud following me.[/vc_column_text][vc_custom_heading text=”The Good:” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_column_text]I worked my booty off today. It is a color inspiration day (the day when I create and queue up another weeks’ worth of color inspiration posts for Color My Life). And because I saved so much time with my handy Color Helper application, I decided to work on that and add some more functionality to it to make it even better.

I also started on the next Free Code Camp project for the Responsive Web Design Certification.[/vc_column_text][vc_custom_heading text=”Notes/Comments:” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_single_image image=”5409″ img_size=”1598×752″ alignment=”center” style=”vc_box_outline” onclick=”link_image”][vc_column_text]

Color Helper Application

I’ll start with the Color Helper application because this is actually what I spent the most time on today. In fact, my JavaScript file is up to 1987 lines of code, which coincidentally enough is the year I was born.

A big chunk of the new code is the Name That Color open source JavaScript code that Chirag Mehta was nice enough to develop and release to the public. I’m using this to add color names to the posts without having to manually look up each name (which takes a really long time, to be honest).

I have created a function that looks at the HEX code entered in each textbox and uses the NTC color functions to search for name and return it in a <div> element on the page.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_wp_text]

function getColors() {

     var n_match;

     color11HEX = $("#color11").val();
     n_match = ntc.name(color11HEX);
     color11Name = n_match[1];
     $('#color11Name').html(color11Name);

     color12HEX = $("#color12").val();
     n_match = ntc.name(color12HEX);
     color12Name = n_match[1];
     $('#color12Name').html(color12Name);

     color13HEX = $("#color13").val();
     n_match = ntc.name(color13HEX);
     color13Name = n_match[1];
     $('#color13Name').html(color13Name);

     color21HEX = $("#color21").val();
     n_match = ntc.name(color21HEX);
     color21Name = n_match[1];
     $('#color21Name').html(color21Name);

     color22HEX = $("#color22").val();
     n_match = ntc.name(color22HEX);
     color22Name = n_match[1];
     $('#color22Name').html(color22Name);

     color23HEX = $("#color23").val();
     n_match = ntc.name(color23HEX);
     color23Name = n_match[1];
     $('#color23Name').html(color23Name);

     color31HEX = $("#color31").val();
     n_match = ntc.name(color31HEX);
     color31Name = n_match[1];
     $('#color31Name').html(color31Name);

     color32HEX = $("#color32").val();
     n_match = ntc.name(color32HEX);
     color32Name = n_match[1];
     $('#color32Name').html(color32Name);

     color33HEX = $("#color33").val();
     n_match = ntc.name(color33HEX);
     color33Name = n_match[1];
     $('#color33Name').html(color33Name);

     color41HEX = $("#color41").val();
     n_match = ntc.name(color41HEX);
     color41Name = n_match[1];
     $('#color41Name').html(color41Name);

     color42HEX = $("#color42").val();
     n_match = ntc.name(color42HEX);
     color42Name = n_match[1];
     $('#color42Name').html(color42Name);

     color43HEX = $("#color43").val();
     n_match = ntc.name(color43HEX);
     color43Name = n_match[1];
     $('#color43Name').html(color43Name);

     color51HEX = $("#color51").val();
     n_match = ntc.name(color51HEX);
     color51Name = n_match[1];
     $('#color51Name').html(color51Name);

     color52HEX = $("#color52").val();
     n_match = ntc.name(color52HEX);
     color52Name = n_match[1];
     $('#color52Name').html(color52Name);

     color53HEX = $("#color53").val();
     n_match = ntc.name(color53HEX);
     color53Name = n_match[1];
     $('#color53Name').html(color53Name);

     colorsChecked = true;

}

[/vc_wp_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]There are new hue checkboxes that, when checked, store those colors in a variable so they can be used in tags.

I also added a few new buttons to the page. The first is a refresh button that just refreshes the browser window so I can easily move on to the next color palette once I am ready. The second is a ‘Name Colors’ button which uses the getColors() function from above to retrieve, store, and display the colors for each HEX code.

It’s still not pretty, but it is working well and getting better and better with every revision.

Free Code Camp Project

I spent some time trying to figure out what product I wanted to create a landing page for, and I ultimately decided to do something completely ridiculous.

spaghetti and meatballs

I have to confess something… I was hungry when I made this decision. I was very hungry, and for some reason, the only thing I could think of was organic beauty products and spaghetti and meatballs.

Guess which idea won. I might be a little ashamed, but not enough to change my mind.

So far I’ve started laying out my elements, like the header, nav menu, and three separate containers for the main content. Tomorrow I will try to get the bulk of the project done so I can finish up and submit it Sunday.[/vc_column_text][/vc_column][/vc_row]

Let's chat!

%d bloggers like this: