100 Days of Code: Day 45

Home / Technology / Web Development / 100 Days of Code: Day 45
I'm back at it again with JavaScript! Plus, I've posted my CSS so everyone can see what goes into customizing a Wordpress theme to make it truly your own (hint: it's a lot).

[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%2245%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”]Start on Basic Data Structure challenges at Free Code Camp[/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”]Share my custom CSS for my website (even though it will probably change by the end of the day)[/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]Today was a very busy, productive day. I watched some random YouTube and Lynda.com videos (all web-development-related, of course), worked on my CV/resume, and started on the Basic Data Structures section from Free Code Camp.

Also, I can hardly believe that it’s already day 45 of this challenge. That is really cool but also a little scary at the same time. I have no intention of stopping after one round, so I guess it doesn’t really matter, but there are still quite a few things I want to get done before day 100.[/vc_column_text][vc_custom_heading text=”The Bad:” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_column_text]I have a habit of making things more complicated than they need to be sometimes. I was reminded of this as I completed one of the array challenges.

Spoiler Alert!

If you don’t want to see my solution to one of the FCC Basic Data Structure challenges, skip ahead to the next section of this post.

The Basic Data Structure challenges are focused primarily on working with arrays and JavaScript objects. I have had trouble with arrays in the past because it just took me forever to understand them. Now, I am a lot more comfortable with them but could still use some practice.

That being said, I found myself flying through the array challenges much faster than I would have anticipated. Everything was going really well. Then I got close to the end of the array challenges and ended up spending almost an hour on one challenge that should have only taken about 5 minutes.

Why’s that, you ask? I decided that I was going to get really stupid and try to do things the hardest way imaginable.

Let me back up for a second so I can tell you what the problem was. It reads:

We have defined a function, filteredArray, which takes arr, a nested array, and elem as arguments, and returns a new array. elem represents an element that may or may not be present on one or more of the arrays nested within arr. Modify the function, using a for loop, to return a filtered version of the passed array such that any array nested within arr containing elem has been removed.

The problem was actually simple. If you’ve never worked with arrays before, maybe not so much, but for me, I immediately knew what I needed to do. Or so I thought.

I started out by creating a for loop to loop through all the elements of the array, then created another for loop to loop through all the elements of the array contained within the array element (treating it like any other multidimensional array), all the while checking to see if the element was found within the array and IF SO,…

Yeah, that’s as far as I got. I knew what I wanted it to do, but for the life of me, I could not actually go through it step-by-step to get there. It was only after going through my code for the 50th time that a little lightbulb went off and I realized I didn’t even NEED to loop through the array elements because I could just use the indexOf() method to see if the element existed and push the array at that index to the new array if the element did not exist.

Basically, I spent an hour on 3 lines of code.

for (let i = 0; i < arr.length; i++) {
     if (arr[i].indexOf(elem) == -1) {
          newArr.push(arr[i]);
     }
}

This is why I continue to code and practice, practice, practice. It’s not just to learn new things but to become more comfortable with existing concepts so that the solutions come more quickly and naturally in the future. The less I have to think and analyze something, the less chance I have of overthinking it. And that comes with experience.

[/vc_column_text][vc_custom_heading text=”Notes/Comments:” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_column_text]I ended up posting my blog update from my phone yesterday, so I didn’t share any of my CSS as promised the day before. I’ll do that now, but before I do, I just want to say that some of it may seem a little weird. The thing is, when you are working with a WordPress theme that someone else created, modifications can sometimes get a little out of hand. This is especially true when you are like me and want things to look and be a certain way, despite what the theme author had in mind.

.mg_pag_wrap {
    text-align: center;
}

.is-cat-link-borders .cat-links a {
    margin: 0px 3px 6px;
    padding: 4px;
    font-weight: 600;
    border-width: 1px;
}

@media screen and (min-width: 768px) {
    .blog-list .hentry-middle {
    padding: 0.5em 2em 3em;
}
    }

.cat-links a:hover {
    background-color: #ff355e;
    color: white;
}

#hirebox {
    padding: 15px; background-color: white; border: solid black 4px; margin:30px auto; width: 60%;
}

#hirebox button {
        width: 150px;
    }

#hirelocation {
    text-align: center; display:block; margin-top:-10px; margin-bottom: 20px;
}

.site-description {
    display: block;
    text-align: center;
    font-weight: 600;
    position: relative;
    top: -10px;
    left: 10px;
}

@media (min-width: 769px) {
    .site-branding img {
        display: block;
        margin: 0px auto;
    }
    
    .site-description {
        position: relative;
        top: -6px;
        left: 0px;
    }
    
    .entry-title {
    font-size: 45px;
    }
    
    .post-header {
        margin-bottom: -60px;
    }
    
    .is-header-row.is-menu-sticky .site-header.smaller .site-title img {
    max-height: 32px;
}
    
    #main {
    padding-top: 160px;
    }
    
}

@media (max-width: 768px) {
    
    
    #hirebox {
        margin:5px auto; width: 90%;
    }
    
}

.featured-area {
    margin: 20px;
}

.is-header-small .header-wrap, .is-header-row .header-wrap, .is-menu-top .header-wrap, .is-menu-bar .menu-wrap {
  padding-bottom: 10px;
    padding-top: 10px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.07);
}

@media screen and (min-width: 992px) {
 .shopping-cart {
     visibility: hidden;
    }}

.shopping-cart {
    visibility: hidden;
}

.hentry .entry-header:before {
    font-size: 19px;
    color: #e096c1;
    margin-top: -25px;
}

.entry-meta {
    color: #9bc4e5;
}

.is-about-me-widget-round img {
    border-radius: 50%;
    border: 2px solid black;
    max-width: 50%;
    display: block;
    margin: 0 auto 10px;
}

.is-about-me-widget-round {
    text-align: center;
    border: 3px solid black;
    padding: 20px;
}

.related-posts .post-thumbnail .entry-title, .related-posts .post-classic .entry-title {
  font-family: Lora, Sans Serif;  
    font-size: 16px;
}

.related-posts .post-classic .featured-image img {
    margin-bottom: 10px;
border-radius: 50%;
}

.widget_mc4wp_form_widget {
    background-color: transparent;
    background-image: none;
    }

.sidebar .mc4wp-form, .footer-widgets .mc4wp-form {
    padding: 0px;
    background: #fff;
}

body {
    background-color: hsl(178, 60%, 90%);

    background-image: repeating-linear-gradient(180deg,  hsl(178, 60%, 90%), hsl(308, 27%, 90%), hsl(18, 84%, 90%));
}

.is-body-boxed .site, .is-middle-boxed .site-main, .is-content-boxed .content-area {
    box-shadow: 0 0 20px rgba(33, 33, 33, 0.8);
}

.contact-form label.checkbox, .contact-form label.radio {
    text-transform: capitalize;
    margin-top: 5px;
    float: none;
    font-weight: 500;
    display: flex;
    vertical-align: middle;
}

.contact-form textarea {
    resize: none;
    width: 100%;
}

.contact-form label {
  margin-top: 2em;  
    margin-bottom: 1em;
}

.contact-form label span {
    color: #e096c1;
}

h3.widget-title {
    margin-top: 20px;
}

html {
    line-height: 1.5em;
}

pre {
    margin-top: 0px;
    border: none;
    box-shadow: none;
    background-color: #fff;
}

code {
        font-family: monospace;
    margin: auto;
    max-height: 300px;
    width: 90%;
    overflow-y: auto;
    overflow-x: auto;
    font-size: 0.8em;
    display: block;
    background-color: transparent;
    padding: 15px;
    box-shadow: none;
    border: 3px solid #9bc4e5;
}

.code-word {
    font-family: monospace;
    font-size: 0.8em;
    padding: 2px;
    color: #1b7da9;
    border: 1px solid #9bc4e5;
}

blockquote {
    font-size: 1.8em;
    border: 3px solid black;
    width: 80%;
}

blockquote:before {
    content: '“';
    font-family: 'Noto Serif', serif;
    color: #3bb5ff;
}

blockquote:after {
    content: '”';
    font-family: 'Noto Serif', serif;
    color: #3bb5ff;
}

.consoleOutputHeader {
    display: block;
    position: relative;
    top: 25px;
    margin: -65px auto;
    width: 89%; 
    padding: 5px;
    color: #1b7da9;
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: 800;
}

@media (max-width: 560px) {
    .mobileHide {
        display: none;
        visibility: hidden;
    }
}

del {
    font-size: 0.8em;
    text-transform: lowercase;
    text-decoration-color: rgba(0, 0, 0, 0.5);
    color: rgba(0,0,0,0.4);
}

ins {
    display: inline-block;
    position: relative;
    margin-left: 8px;
    margin-right: 3px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
}

.mgi_txt_under {
    text-align: center;
}

@media screen and (min-width: 300px) and (max-width: 800px) {
.is-single-post-title-with-margins .post-header-classic .entry-header, html.is-middle-boxed.is-single-post-title-with-margins .top-content-single .post-header-classic .entry-header:last-child {
    padding: 30px 0;
}}

@media screen and (min-width: 800px) {
.is-single-post-title-with-margins .post-header-classic .entry-header, html.is-middle-boxed.is-single-post-title-with-margins .top-content-single .post-header-classic .entry-header:last-child {
    padding-bottom: 160px;
    padding-top: 60px;
}}

#wpfront-scroll-top-container {
    width: 50px;
    height: 50px;
}

.widget_tag_cloud {
    padding: 10px 20px;
    border: 3px solid black;
    text-align: center;
}

.tagcloud a, .tagged_as a {
    color: #9bc4e5;
}

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

Let's chat!

%d bloggers like this: