“JavaScriptmas 2021” challenges with Scrimba
From 1st to 24th Dec, Scrimba prepared for us 24 challenges from the JavaScript world. Below I present solutions to 12 of them.
1. Candies
n children have got m pieces of candy. They want to eat as much candy as they can, but each child must eat exactly the same amount of candy as any other child. Determine how many pieces of candy will be eaten by all the children together. Individual pieces of candy cannot be split.Example
For n = 3 and m = 10, the output should be candies(n, m) = 9Each child will eat 3 pieces. So the answer is 9.
My explanation
All you need to do here is:
- Divide candies by the number of children;
- Round it down;
- And return result multiply by the number of children.
2. Deposit Profit
You have deposite a specific amount of dollars into your bank account. Each year your ballance increases at the same growth rate. Find out how long it would take for your balance to pass a specific threshold with the assumption that you don't make any additional deposits.Example
For deposite = 100, rate = 20 and threshold = 170, the output should be depositProfit(deposit, rate, threshold) = 3.Each year the amount of money on your account increases by 20%. It means that throughout the years your balance would be: * year 0: 100;
* year 1: 120;
* year 2: 144;
* year 3: 172,8.Thus, it will take 3 years for your balance to pass th threshold, which is the answer.
My explanation
At the start, we need to set two information:
value of the deposit and the number of years needed to achieve the threshold.
Next, we will be using the loop. It will be working as long as we achieve our threshold. Inside each iteration loop will do two things:
- update deposit value based on the formula
- increment years
When the loop will be finished we can return our years.
3. Chunky Monkey
Write a function that splits an array (first argument) into groups the length of size (second argument) and return them as a two-dimensional array.Example
* chunkyMonkey(["a", "b", "c", "d"], 2) should return
[["a", "b"]["c","d"]].
* chunkyMonkey([0, 1, 2, 3, 4, 5], 4) should return
[[0,1,2,3],[4,5]].
My explanation
All you need to do is split the array equally as long as all elements from the primary array will be placed in the new two-dimensional array.
For this solution, I used the while loop, and inside it, I pushed the result of array.splice into the new array which will be my final result. While loop run until the length of the primary array will be bigger than 0 (array splice remove elements from the array on which we used it).
4. Century From Year
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.Example
* For year = 1905, the output should be centuryFromYear(year) = 20;
* For year = 1700, the output should be centuryFromYear(year) = 17.
My explanation
To calculate the century you need to modulo the given year. If the rest is 0 you just return year / 100 if not, you need to calculate it. In order not to use the Math library I used already calculated century modulo in my formula.
But you can also use Math.floor and it will be looks like this:Math.floor(year / 100) + 1
5. Reverse A String
Reverse the provided string
You may need to turn the string into an array before you can reverse it. Your result must be a string.Example
* reverseAString('hello') returns 'olleh';
* reverseAString('Howdy') return 'ydwoH'.
My explanation
You have a couple of ways to do this challenge, but at first, you need to create an array from a string. Looking at my solution, if you prefer for instead of reverseandreduce you can use this:for(let i = arr.length-1 ; i ≥ 0 ; i — )
Inside loop just add each letter to the result.
P.S. If you are not familiar withreduce you can check it here on
MDN web docs I will be using it quite often here 😉
6. Sort By Length
Given an array of strings, sort them in the order of increasing length. If two strings have the same length, their relative order must be the same as in the initial array.Example
For
inputArray= ["abc", "", "aaa", "a", "zz"]
the output should be
sortByLength(inputArray) = ["", "a", "zz", "abc", "aaa"]
My explanation
For this challenge, the best thing will be thesort method. Each time we want to check the length of two strings. If the current string is smaller than the next we should return -1 if is bigger 1 and if both are the same 0;
7. Count Vowel Consonant
You are given a string s that consists of only lowercase English letters. If vowels ('a', 'e', 'i', 'o', and 'u') are given a value of 1 and consonants are given a value of 2, return the sum of all of the letters in the input string.Example
* For s = "abcde", the output should be countVowelConsonant(s) = 8.
My explanation
You need to do three things. At first, you need to define what are vowels.
The next thing will be to create an array from the given string.
Finally, you need to check each letter. It is in vowels add 1 to result,
if not add 2.
8. Rolling Dice
This challenge is quite different because it involving also HTML and CSS.
DESCRIPTION:In this challenge a casino has asked you to make an online dice that works just like it would in real life. Using the pre-made dice face that represents ‘one’, make the faces for ‘two’, ‘three’, ‘four’, ‘five’ and ‘six’. Now when the users clicks the dice on the screen the dice is expected to show one of the faces randomly.DETAILED INSTRUCTIONS:1. pick out the neccesary elements from the HTML
2. Create other 5 dice faces in CSS
3. use eventlisteners on the appropriate div
4. Display dice faces randomly on clickSTRETCH GOALS:- Can you show the number you rolled as a integer along-side the dice face?
- Can you improve the overall design?
My explanation
You have plenty of solutions for this. I will be focused on why I decided to do it in this way.
CSS:
For dice, I decided to use the grid layout. Each dot is in a 3x3 grid and has its own coordinates described in classes: dot-a , dot-b… dot-i To center the dots inside fields I used align-self: centerand justify-self: center
HTML:
For the proper displaying starting face I added class dot-e to the existing dot.
I also added two div blocks with information about how to reroll and the placeholder for information about the number of drawn dots.
JS:DICE_FACE_CONFIG represent information about which dots need to be displayed. In index 0 we have information about one-dot-face, in index 4 about five-dots-face, etc.
Our main function is diceRoll inside it we will:
* drew the number from 1 to 6,
* get dice-face config from DICE_FACE_CONFIG based on drawn number
* clear the previous dice-face by removing all dice child nodes from DOM
* set new face based on config by adding dots with proper “dot-char” classes
* set information about drawn dots number
Remember to hook our diceRoll function with addEventListenerand ‘click’ event on our dice.
9. Sum Odd Fibonacci Numbers
Given a positive integer num, return the sum of all odd Fibonacci numbers that are less than or equal to num.The first two number in the Fibonacci sequence are 1 and 1. Every additional number in the sequence is the sum of two previous numbers. The first six numbers of the Fibonacci sequence are 1, 1, 2, 3, 5, and 8.For example, sumFibs(10) should return 10 because all odd Fibonacci numbers less than or equal to 10 are 1, 1, 3, and 5.Example
* sumOddFibonacciNums(10) should return 10
* sumOddFibonacciNums(1000) should return 1785
* sumOddFibonacciNums(4000000) should return 4613732
My explanation
Each next Fibonacci number is based on two previously that’s why… we need to have stored four numbers: previous, current, next, and number for all odd numbers we will sum.
To get the proper result we need to loop while we get the current value equal to or less than the given number.
Inside the loop, we need to check if the number is odd. If yes we add it to our solution. Before the next loop iteration, we need to update our previous, current, and next values.
10. Adjacent Elements Product
Given an array of integers, find the pair of adjacent elements that has the largest product and return that product.Example
For inputArray = [3, 6, -2, -5, 7, 3], the output should be adjacentElementsProduct(inputArray) = 21.
7 and 3 produce the largest product.
My explanation
You just need to compare all multiplication of the adjacent number and return the biggest. Remember to not initialize the result with 0 value because it always exists the possibility that the biggest multiplication will be a negative number.
11. Avoid Obstacles
You are given an array of integers representing coordinates of obstacles situated on a straight line.Assume that you are jumping from the point with coordinate 0 to the right. You are allowed only to make jumps of the same length represented by some integer.Find the minimal length of the jump enough to avoid all the obstacles.Example
For inputArray = [5, 3, 6, 7, 9], the output should be avoidObstacles(inputArray) = 4.
My explanation
To find the minimal length of the jump at first you need to sort the given array. I used currentPath and jump value to compare with values from the sorted array. If a value exists in the array I increment the jump value and reset the current, if not I check the next value until the last element.
The second (“official”) solution (which I think is better) is to use every method and modulo operation. If the modulo of every element will be different than 0 this will be our jump value.
12. Valid Time
Check if the given string is a correct time representation of the 24-hour clock.Example
* For time = "13:58", the output should be validTime(time) = true;
* For time = "25:51", the output should be validTime(time) = false;
* For time = "02:76", the output should be validTime(time) = false.
My explanation
I used the destructuring assignment together with thesplit method to separate minutes and hours. Now you just need to parse strings to integers and check that they are in the clock range.
And that would be all. Thank you for your attention :)
