100 Days of Code: Day 63

Home / Technology / Web Development / 100 Days of Code: Day 63
Today I spent time on Bootstrap, jQuery, Sass, and JavaScript as I completed 3 FCC sections and some of the arcade challenges at CodeSignal (formerly CodeFights).

[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%2263%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”]Complete the FCC Bootstrap challenges[/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”]Complete the FCC jQuery challenges[/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”]Complete the FCC Sass challenges[/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”]Complete the ‘Intro: The Journey Begins‘ section of the CodeSignal Arcade[/ultimate_icon_list_item][/ultimate_icon_list][vc_column_text]

Room To Wiggle

I set out this morning with the idea that I would try to complete an average of one section from the Front End Libraries Certification every day for the next week, after which I would start on the Front End Libraries projects. Then I realized I already knew two of the first 3 sections, so I would just do those and get ahead of schedule. I don’t know anything about the topics from here on out, so it gives me some wiggle room if it takes a little longer to grasp the concepts.

Too Much Sass

Once I finished the first two sections – Bootstrap and jQuery – I figured I still had plenty of time so I would get started on something I’ve always wanted to learn – Sass.

Within just a few minutes, I was wishing I’d called it quits for the day.

If you don’t know anything about web development, this may be a little confusing so I will try to keep it as simple as possible. Behind almost every website is a stylesheet (or several stylesheets) written in a language called CSS (short for Cascading Style Sheets). All the colors, fonts, borders, spacing, layout, etc. are largely a result of CSS.

CSS is pretty powerful. BUT… 11 years ago, someone decided it wasn’t powerful enough. They wanted to be able to do more with it. So another styling language, Sass, was created. It is extremely powerful, even more than normal CSS.

Browsers understand CSS. They see something like p {color: red} and inherently know what to do with it (turn the text red). With Sass, it’s a little different. Sass has to be precompiled (meaning it’s compiled before being used) and turned into normal CSS so the browser knows how to read it.

This is simple enough… except when it isn’t.

Apparently, there are some issues with the compiler being used by Free Code Camp for their Sass challenges. With almost every single question, I had to constantly modify my code and try to look up why it wasn’t working, just to be able to submit the challenges. Sometimes this meant changing my character spacing because if it wasn’t perfect, it wouldn’t work properly. Sometimes it was just a matter of hitting submit 900 times until it finally worked. There were even a few questions that I had to go into incognito mode in Chrome just to submit because there was some sort of interference being caused by my browser extensions.

By the time I was finished, I was pretty much done with Sass for the time being. I am not giving up on it completely, but we are not friends right now.

More JavaScript on CodeSignal

I’ve been a member of CodeFights for a little while now but never really tried to complete any of the challenges. Then yesterday I got an email telling me they changed their name to CodeSignal and made a few big updates to the site. So, I thought I’d give it a shot.

It turns out this is exactly what I need to get a little more practice with JavaScript. And later on, if I decide to do the challenges in a different programming language, I can come back and start all over again.

If you’re on CodeSignal, I’d love to be friends.[/vc_column_text][vc_column_text el_class=”spoiler”]

Spoiler Alert!

I want to share more of my solutions to these coding challenges, so I thought I might start at the beginning with these CodeSignal challenges that I completed last night (the first one) and today (the last two). You can also view my solutions on the CodeSignal website under my profile.

Challenge #1: add

Directive:

Write a function that returns the sum of two numbers.

Input/Output Requirements:
  • [execution time limit] 4 seconds
  • [input] integer param1
    Guaranteed constraints: -1000 ≤ param1 ≤ 1000
  • [input] integer param2
    Guaranteed constraints: -1000 ≤ param2 ≤ 1000
  • [output] integer – the sum of the two inputs
Solution:
function add(param1, param2) {
     return param1 + param2;
}

Challenge #2: centuryFromYear

Directive:

Given a year, return the century it is in. The first century spans from the year 1 up to and including the year 100, the second – from the year 101 up to and including the year 200, etc.

Input/Output Requirements:
  • [execution time limit] 4 seconds
  • [input] integer year – a positive integer, designating the year
    Guaranteed constraints: 1 ≤ year ≤ 2005
  • [output] integer – the number of the century the year is in
Solution:
function centuryFromYear(year) {
    
    let century;
    
    if (year <= 100) { century = 1; } 
    else if (year % 100 == 0) { century = (year / 100); } 
    else if (year >= 101 && year % 100 != 0) {
        century = Math.floor(year / 100) + 1;
    }
    
    return century;
}

centuryFromYear(1905);
console.log(centuryFromYear(1905));

Challenge #3: checkPalindrome

Directive:

Given the string, check if it is a palindrome. A palindrome is a string that reads the same left-to-right and right-to-left.

Input/Output Requirements:
  • [execution time limit] 4 seconds
  • [input] string inputString – a non-empty string consisting of lowercase characters
    Guaranteed constraints: 1 ≤ inputString.length ≤ 105
  • [output] boolean – true if inputString is a palindrome, false otherwise.
Solution:
function checkPalindrome(inputString) {
  let inputArr = inputString.split('');
  let reverseArr = inputArr.reverse();
  
  if (inputString === reverseArr.join('')) {
      return true;
  } else {
      return false;
  }
  
}
let answer = checkPalindrome('aabaa');
console.log(answer);

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

Let's chat!

%d bloggers like this: