Code Challenges

Every company has a different interview process, but one thing that is common among most employers is giving a coding challenge. Also known as code katas, these challenges are used to evaluate both your problem-solving skills as well as your knowledge of the language you are writing it in. There are many common challenges out there and I decided to create a project, where I could collect and solve one of the most well-known code katas. Well, as you guessed, the name of this special project is Challenges.

You can explore various front-end code katas made by me or by my friends, and, in addition, I decided to share some of personal code tasks, gists and snippets, design patterns and solutions for HTML and CSS that I used to during my studying. Hope you'll enjoy this stuff, let's go!

  • Task

    Reverse a String

    • #JS

    Ereburg

    Reverse a String

    Reversing a string is one of the most frequently asked JavaScript question in the technical round of interview. Interviewers may ask you to write different ways to reverse a string, or they may ask you to reverse a string without using in-built methods, or they may even ask you to reverse a string using recursion. Below are my three most interesting ways to solve the problem of reversing a string in JavaScript.

    Provided test cases:

    • reverseString("hello") should return «olleh»
    • reverseString("Howdy") should return «ydwoH»
    • reverseString("Greetings from Earth") should return «htraE morf sgniteerG»

    • 1. Reverse a String With Built-In Functions

      For this solution, we will use three methods:

      • String.prototype.split()
      • Array.prototype.reverse()
      • Array.prototype.join()

      And the final code is:

      function reverseString(str) {
    return str.split("").reverse().join("");
}
reverseString("hello");

    • 2. Reverse a String With a Decrementing For Loop

      First of all we should create an empty string that will host the new created string. Then create the FOR loop. And finally return the reversed string. And this code looks like:

      And the final code is:

      function reverseString(str) {
    var newString = "";
    for (var i = str.length - 1; i >= 0; i--) {
        newString += str[i];
    }
    return newString;
}
reverseString("hello");

    • 3. Reverse a String With Recursion

      For this solution, we will use two methods:

      • String.prototype.substr()
      • String.prototype.charAt()

      And the final code is:

      function reverseString(str) {
    return (str === ' ') ? ' ' :  reverseString(str.substr(1)) + str.charAt(0);
}
reverseString("hello");

        • Task

          Palindrome

          • #JS

          Ereburg

          Check for Palindromes

          Palindrome
          is a word, phrase, number, or other sequence of characters which reads the same backward or forward.

          Well, as you guessed «Palindrome» is another one frequently asked JavaScript question at interviews. Interviewers may ask you to check string for palindromes using in-built methods, or without them. Below are my two ways to solve the problem.

          Provided test cases:

          •  palindrome("race car") //   true
          •  palindrome("not a palindrome") //   false
          •  palindrome("A man, a plan, a canal. Panama") //   true
          •  palindrome("never odd or even") //   true
          •  palindrome("nope") //   false
          •  palindrome("almostomla") //   false
          •  palindrome("My age is 0, 0 si ega ym.") //   true
          •  palindrome("1 eye for of 1 eye.") //   false
          •  palindrome("0_0 (: /- :) 0–0") //   true

          • 1. Check for Palindromes with built-in functions

            For this solution, we will use five methods:

            • String.prototype.toLowerCase()
            • String.prototype.replace()
            • String.prototype.split()
            • Array.prototype.reverse()
            • Array.prototype.join()

            And the final code is:

            function palindrome(str) {
    const re = /[\W_]/g;
    let lowRegStr = str.toLowerCase().replace(re, ' ');
    let reverseStr = lowRegStr.split(' ').reverse().join(' '); 
    return reverseStr === lowRegStr;
}
palindrome("hello");

          • 2. Check for Palindromes with a FOR loop

            Half-indexing (len/2) has benefits when processing large strings. We check the end from each part and divide the number of iterations inside the FOR loop by two.

            And the final code is:

            function palindrome(str) {
    const re = /[^A-Za-z0-9]/g;
    str = str.toLowerCase().replace(re, ' ');
    let len = str.length;
    for (let i = 0; i < len / 2; i++) {
        if (str[i] !== str[len - 1 - i]) {
            return false;
        }
    }
    return true;
}
palindrome("hello");

            • Task

              FizzBuzz

              • #JS

              Ereburg

              FizzBuzz

              The «FizzBuzz» test is an interview question designed to help filter out the 99.5% of programming job candidates which couldn't handle this task. There are many variations of this challenge, but they all typically go something like this: Write a program that prints the numbers from 1 to 100. But for multiples of three print «Fizz» instead of the number and for the multiples of five print «Buzz». For numbers which are multiples of both three and five print «FizzBuzz». — © Some tech specialist at interview.

              I think FizzBuzz is difficult for major programmers for two reasons. First one, because it doesn't match any patterns which are studying on courses from scratch and, the second one, because there's no simple way to solve the code kata with build-in methods and display necessary tests without duplication in any commonly used modern programming languages — FizzBuzz doesn't fit any common pattern of coding structure below.

              if 1 then A 
else if 2 then B
else if 3 then C
else/otherwise D

              That's why I think this makes it a good discriminator, because employer wishes to hire candidates who can think for themselves — not those who are limited to copying solutions from others. Maybe there's no simple and satisfying way out to the code structuring issue, but let me introduce my own solution in JavaScript. You can choose «Fizz» and «Buzz» numbers manualy.

              • Course project

                Canvas Clock

                • #JS

                Ereburg

                Canvas Clock

                The «Canvas Clock» is course project designed to help students to gain expierence with canvas API. <canvas> is an HTML element which can be used to draw graphics via scripting. For instance, it can be used to draw graphs, combine photos, create different animations. On this page the «clock» shows the example of <canvas> implementation which I learned at courses.

                Please upgrade your browser.

              • Course project

                Canvas Ball

                • #JS

                Ereburg

                Canvas Ball

                The «Canvas Ball» is course project designed to help students to gain expierence with canvas API. <canvas> is an HTML element which can be used to draw graphics via scripting. For instance, it can be used to draw graphs, combine photos, create different animations. On this page the bouncing ball animation shows the example of <canvas> implementation which I learned at courses.

                Please upgrade your browser.

              • Course project

                Canvas Wizard

                • #JS

                Ereburg

                Canvas Wizard

                The «Canvas Wizard» is course project designed to help students to gain expierence with canvas API. <canvas> is an HTML element which can be used to draw graphics via scripting. For instance, it can be used to draw graphs, combine photos, create different animations. In this challenge you are allowed to control the wizards' movements inside restricted area. Made just for fun. And works on all devices.

                Little wizardPlease upgrade your browser.

              • Side project

                To-Do List App

                • #JS

                Ereburg

                To-Do List App

                «To-Do List App» is project designed to help me to gain expierence with localStorage API.

              • Side project

                Weather App

                • #JS

                Ereburg

                Weather App

                «Weather App» is project designed to help me to gain expierence with Fetch API.

              • Side project

                Currency Convertor App

                • #JS

                Ereburg

                Currency Convertor App

                «Currency Convertor App» is project designed to help me to gain expierence with Fetch API.