DEV Community: TakDevelops

Career Pivot into Development Journal, Day 6: JS Practice 5 – sumAll.js

TakDevelops — Thu, 31 Mar 2022 04:47:39 +0000

It's been a few days, I've been quite busy with work so I had to prioritize that first, but I'm so happy I can get back to programming again! :D Moving on to the next exercise...

Understanding the problem

In this exercise, I have to create a function that takes two numbers as parameters, and sums all of the numbers between those two numbers.

Plan

Does the program have a UI? What will it look like? What functionality will it have? No UI
What are the inputs? Will the user enter in data or will you get it from somewhere else? Two numbers in the function parameter. The numbers will be entered when calling the function
What are the outputs? A number, which is the sum of all incremental whole numbers between the two parameters

Pseudocode

Declare a function that takes two parameters, `startNum` and `endNum`. Name it `sumAll`

Create a loop where the initialiser = `startNum` and the condition = `endNum`. Increment the loop.

Declare a variable `sum` and set it equal to 0

Concatenate `i` with `i` and store it in the variable `sum`

Return `sum`

Call the function `sumAll(startNum, endNum)`

Divide & Conquer

Declare a function that takes two parameters, `startNum` and `endNum`. Name it `sumAll`

const sumAll = function(startNum, endNum) {}

Create a loop where the initialiser = `startNum` and the condition = `endNum`. Increment the loop.

const sumAll = function(startNum, endNum) {
    for (let i = startNum; i <= endNum; i++) {
}

Declare a variable `sum` and set it equal to 0

const sumAll = function(startNum, endNum) {
    let sum = 0;
    for (let i = startNum; i <= endNum; i++) {}
}

Concatenate `i` with `i` and store it in the variable `sum`

const sumAll = function(startNum, endNum) {
    let sum = 0;
    for (let i = startNum; i <= endNum; i++) {
        sum += i;
}
}

Return `sum`

const sumAll = function(startNum, endNum) {
    let sum = 0;
    for (let i = startNum; i <= endNum; i++) {
        sum += i;
    }
    return sum;
};

Call the function `sumAll(startNum, endNum)`

const sumAll = function(startNum, endNum) {
    let sum = 0;
    for (let i = startNum; i <= endNum; i++) {
        sum += i;
    }
    return sum;
};

sumAll(1,5);

Putting it to the test

There are 6 tests that I need to pass:

sums numbers within the range (1 ms)
Works with large numbers
Works with larger number first (1 ms)
Returns ERROR with negative numbers
Returns ERROR with non-number parameters
Returns ERROR with non-number parameters (1 ms)

Let's tackle these, starting from all the tests that should return ERROR. The first two tests have already passed based on our code above. To pass the rest of the tests, we need to use if...else statements in our sumAll function

Returns ERROR with negative numbers

if (startNum < 0 || endNum < 0) {
        return 'ERROR';
    }

Returns ERROR with non-number parameters

if (startNum < 0 || endNum < 0 || typeof(startNum) !== 'number' || typeof(endNum) !== 'number') {
        return 'ERROR';
    }

Works with larger number first (1 ms)

Working with larger number first means startNum > endNum. For this, we need to reverse the loop that we had above. Instead of incrementing, we will decrement

if (startNum < 0 || endNum < 0 || typeof(startNum) !== 'number' || typeof(endNum) !== 'number') {
        return 'ERROR';
    } else if (startNum > endNum) {
        for (let i = startNum; i >= endNum; i--) {
            sum += i;
        }
        return sum
    }

Finally, we add in the incremental for loop we had above

const sumAll = function(startNum, endNum) {
    let sum = 0;
    if (startNum < 0 || endNum < 0 || typeof(startNum) !== 'number' || typeof(endNum) !== 'number') {
        return 'ERROR';
    } else if (startNum < endNum) {
        for (let i = startNum; i <= endNum; i++) {
            sum += i;
        }
        return sum;
    } else if (startNum > endNum) {
        for (let i = startNum; i >= endNum; i--) {
            sum += i;
        }
        return sum
    }
};

✓ sums numbers within the range (1 ms)
✓ works with large numbers
✓ works with larger number first
✓ returns ERROR with negative numbers
✓ returns ERROR with non-number parameters
✓ returns ERROR with non-number parameters

All test have passed! On to the next exercise...

Career Pivot into Development Journal, Day 5: JS Practice 3 – reverseString.js

TakDevelops — Wed, 23 Mar 2022 13:10:21 +0000

On to the next exercise...

Understanding the problem

Create a function that takes a user’s string input and reverses the string. For example. reverseString(’hello there’) returns 'ereht olleh’

Plan

Does program have a UI? What will it look like? What functionality will the interface have? Sketch this out on paper. The program does not have a UI. It’ll run in the console.
What are the inputs? Will the user enter data or will you get input from somewhere else? The user will input a string when prompted
What’s the desired output? The reverse of the string that the user inputed

Pseudocode

Declare a function `reverseString` that takes the parameter `string`

Create a loop that splices out each character of the string, starting from the last character

Concatenate each character at every loop and store this in a variable called `stringReversed`

Return `stringReversed`

prompt the user to enter a string and store it in a variable called `string`

Call the function `reverseString(string)`

Divide and Conquer

Declare a function `reverseString` that takes the parameter `string`

const reverseString = function(string) {}

Create a loop that splices out each character of the string, starting from the last character

for (i = string.length - 1; i >= 0; i--) {}

We set the first loop to begin at the last character of the string. string.length gives the number of characters in a string, but the actual index of the last character is string.length. We run the loop until the last character which is at index 0.

Concatenate each character at every loop and store this in a variable called `stringReversed`

let stringReversed = '';

stringReversed += string[i];

Return `stringReversed`

return stringReversed;

Prompt the user to enter a string and store it in a variable called `string`

string = prompt('Enter a word or short sentence below');

Call the function `reverseString(string)`

reverseString(string);

Putting it all together

const reverseString = function(string) {
    let stringReversed = '';
    for (let i = string.length -1; i >= 0; i--) {
        stringReversed += string[i];
    }
    return stringReversed;
};

string = prompt('Enter any word or short sentence below');
reverseString (string);

Career Pivot into Development Journal, Day 4: JS Practice 2 – repeatString.js

TakDevelops — Tue, 22 Mar 2022 02:16:29 +0000

_Just finished Fundamentals 4 of The Odin Project...now onto the practice section. _

repeatString assignment link

Understanding the Problem

Write a function that repeats a string a given number of times, both parameters inputted by the user. In other words, the string will be repeated, or concatenated, next to each other num number of times

Plan

Does program have a UI? What will it look like? What functionality will the interface have? Sketch this out on paper. No UI
What are the inputs? Will the user enter data or will you get input from somewhere else? - string = any string that a user inputs when prompted - num = any number the user inputs when prompted
What’s the desired output? A string that concatenates itself n number of times

Pseudocode

Prompt the user to input a string and store this value in the variable `string`

Prompt the user to input a number and store this value in the variable `num`

Concatenate the `string` `num` number of times by looping `num` number of times, and save it to a variable

return the concatenated string

Divide and Conquer

Let's start with the most straight forward subproblems first...

Prompt the user to input a string and store this value in the variable `string`

string = prompt('Enter a string');

Prompt the user to input a number and store this value in the variable `num`

num = prompt('Enter a number');

Now let's figure out the more complex algorithm

Concatenate the `string` `num` number of times by looping `num` number of times, and save it to a variable

Let's create a loop first

for (let i = 0; i < num; i++) {

}

We'll declare a variable to store the concatenated string, then concatenate this with the user's input string

for (let i = 0; i < num; i++) {
    let concatenatedString = '';
    concatenatedString += string;
}

The value of concatenatedString should initially be empty because on the first loop, we want concatenatedString to only return one string.

return the concatenated string

for (let i = 0; i < num; i++) {
    let concatenatedString = '';
    concatenatedString += string;
}
    return concatenatedString;

We want the final value of concatenatedString to be returned at the end of the loop.

Putting it all together

const repeatString = function(string, num) {
    let concatenatedString = '';
    for (i = 0; i < num; i++) {
        concatenatedString += string;
    }
    return concatenatedString;
};

string = prompt('Enter one word below');
num = prompt('Enter a number below');

repeatString(string, num);

Explaining the algorithm in plain english

We declared a function repeatString initially that takes the parameters string and num.

Inside this function, we declare a variable called concatenatedString. It's initial value is set as an empty string

Then a loop loops num number of times and concatenates concatenatedString to string. In the first loop since concatenatedString is initially empty, an empty string '' is concatenated with the string input

So let's assume the string parameter = hey

In the first loop, concatenatedString = '' + hey which = hey.

In the second loop, the expression concatenatedString += string equals concatenatedString = hey + hey

Etc etc. When the loop ends the final value of concatenatedString is returned

Career Pivot into Development Journal, Day 3: Arrays & Array Methods

TakDevelops — Wed, 16 Mar 2022 13:43:08 +0000

Key Points:

Damn, array methods are pretty powerful!
An array is a special type of variable, an ordered collection of items (strings, numbers, or other things)
Array indexes start with 0. [0] is the first element. [1] is the second element.
Arrays allow us to deal with a large quantity of strings and numbers.
Array methods allow us to manipulate arrays.

Arrays

This is how we declare an array:

const cars = ['Saab', 'Volvo', 'BMW'];

Arrays are also unaffected by spaces and line breaks:

const cars = [
  'Saab',
  'Volvo',
  'BMW'
];

Change an Array Element

We can target a specific element by its index and change it:

const cars = ['Saab','Volvo', 'BMW'];
cars [0] = 'Toyota';

Accessing the First Array Element

const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits[0];

Accessing the Last Array Element

const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits[fruits.length - 1];

fruits.length gives us the number of elements in the array. In the case, there are 4 elements. However, the 4th index in this array is non-existent since the indexes are from 0-3. Therefore, we must subtract 1 to access the last array element.

Adding Array Elements

const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits.push('Kiwi');

Difference Between Arrays and Objects

Arrays are a type of object. However, the difference is that array items are indexed with numbers, whereas objects are indexed with names.

Array Methods

`toString()`

Converts an array to a string of (comma separated) array values:

const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits.toString() // Banana,Orange,Apple,Mango;

`join()`

Behaves like toString() but we can specify a separator:

const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits.join(', '); // 'Banana', 'Orange', 'Apple', 'Mango'

`pop()`

Popping in Javascript means taking out elements. Think of it like "popping" out elements from an array. This method "pops" out the last element:

const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits.pop(); // 'Mango'
fruits; // ['Banana', 'Orange', 'Apple']

`push()`

Pushing in Javascript means adding element. Think of it like "pushing" in a new element into an existing array. This method pushes a new element to the end of the array:

const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits.push('Kiwi'); // 5
fruits; // ['Banana', 'Orange', 'Apple', 'Mango', 'Kiwi']

`shift()`

Similar to popping, but works on the first element instead of the last:

const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits.shift(); // 'Banana'
fruits; // ['Orange', 'Apple', 'Mango']

`unshift()`

Similar to pushing, but adds elements to the beginning instead of end of array:

const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits.unshift('Lemon'); // 5
fruits; // ['Lemon', 'Banana', 'Orange', 'Apple', 'Mango']

`concat()`

Allows us to combine (concatenate) multiple arrays together:

const arr1 = ['Apple', 'Microsoft', 'Amazon'];
const arr2 = ['Netflix', 'Google', 'Facebook'];

arr1.concat(arr2); // ['Apple', 'Microsoft', 'Amazon', 'Netflix', 'Google', 'Facebook']

We can combine as many arrays as we want:

const arr1 = ['Apple', 'Microsoft', 'Amazon'];
const arr2 = ['Netflix', 'Google', 'Facebook'];
const arr3 = ['Tesla', 'Samsung', 'Huawei'];

arr1.concat(arr2, arr3); // ['Apple', 'Microsoft', 'Amazon', 'Netflix', 'Google', 'Facebook', 'Tesla', 'Samsung', 'Huawei']

`splice()`

Career Pivot into Development Journal, Day 2.1: Rock, Paper Scissors (cont.)

TakDevelops — Tue, 15 Mar 2022 09:46:41 +0000

Next, let's tackle this subproblem:

If the user wins, alert the string ‘You Win!’
and add 1 point to the user
then return the current score of the user and the computer

If the computer wins, alert the string ‘Boohoo, you lost to the computer.’
and add 1 point to the user
then return the current score of the user and the computer

If the user and computer draw, alert the string ‘It’s a draw’

This subproblem can be broken down into further subproblems to simplify out task. Let's first solve If the user wins, alert the string ‘You Win!’, If the computer wins, alert the string ‘Boohoo, you lost to the computer.’, If the user and computer draw, alert the string ‘It’s a draw’.

Write a function that will play a single round of Rock Paper Scissors taking two parameters, playerSelection and computerSelection, and return a winner or loser.

let playRound = function (playerSelection, computerSelection) {
    if (playerSelection === computerSelection) {
        alert ('It\'s a draw!');
    } else if (playerSelection === 'rock' && computerSelection === 'paper') {
        alert ('Sorry, you lose! Paper beats rock.');
    } else if (playerSelection === 'rock' && computerSelection === 'scissors') {
        alert ('You win! Scissors beats rock.')
    } else if (playerSelection === 'paper' && computerSelection === 'rock') {
        alert ('You win! Paper beats rock.');
    } else if (playerSelection === 'paper' && computerSelection === 'scissors') {
        alert ('Sorry, you lose! Scissors beats paper');
    } else if (playerSelection === 'scissors' && computerSelection === 'paper') {
        alert ('You win! Scissors beats paper');
    } else if (playerSelection === 'scissors' && computerSelection === 'rock') {
        alert ('Sorry, you lose! Rock beats scissors');
    }
}

Now, we can move on to solving adding 1 point to the user when the user wins, and adding 1 point to the computer when the computer wins.

First, we must declare two variables that stores the respective scores:

let playerScore = 0;
let computerScore = 0;

We can then use += 1 to add 1 point to what playerScore or computerScore was previously equal to:

let playRound = function (playerSelection, computerSelection) {
    if (playerSelection === computerSelection) {
        alert ('It\'s a draw!');
    } else if (playerSelection === 'rock' && computerSelection === 'paper') {
        computerScore += 1;
        alert ('Sorry, you lose! Paper beats rock.');
    } else if (playerSelection === 'rock' && computerSelection === 'scissors') {
        playerScore += 1;
        alert ('You win! Scissors beats rock.')
    } else if (playerSelection === 'paper' && computerSelection === 'rock') {
        playerScore += 1;
        alert ('You win! Paper beats rock.');
    } else if (playerSelection === 'paper' && computerSelection === 'scissors') {
        computerScore += 1;
        alert ('Sorry, you lose! Scissors beats paper');
    } else if (playerSelection === 'scissors' && computerSelection === 'paper') {
        playerScore += 1;
        alert ('You win! Scissors beats paper');
    } else if (playerSelection === 'scissors' && computerSelection === 'rock') {
        computerScore += 1;
        alert ('Sorry, you lose! Rock beats scissors');
    }
}

Finally, return the playerScore and computerScore after 1 round:

let playRound = function (playerSelection, computerSelection) {
    if (playerSelection === computerSelection) {
        alert ('It\'s a draw!');
        return (`There is no change in score. Your score = ${playerScore}. Computer's score = ${computerScore}`);
    } else if (playerSelection === 'rock' && computerSelection === 'paper') {
        computerScore += 1;
        alert ('Sorry, you lose! Paper beats rock.');
        return (`Your score = ${playerScore}. Computer's score = ${computerScore}`);
    } else if (playerSelection === 'rock' && computerSelection === 'scissors') {
        playerScore += 1;
        alert ('You win! Scissors beats rock.')
        return (`Your score = ${playerScore}. Computer's score = ${computerScore}`);
    } else if (playerSelection === 'paper' && computerSelection === 'rock') {
        playerScore += 1;
        alert ('You win! Paper beats rock.');
        return (`Your score = ${playerScore}. Computer's score = ${computerScore}`);
    } else if (playerSelection === 'paper' && computerSelection === 'scissors') {
        computerScore += 1;
        alert ('Sorry, you lose! Scissors beats paper');
        return (`Your score = ${playerScore}. Computer's score = ${computerScore}`);
    } else if (playerSelection === 'scissors' && computerSelection === 'paper') {
        playerScore += 1;
        alert ('You win! Scissors beats paper');
        return (`Your score = ${playerScore}. Computer's score = ${computerScore}`);
    } else if (playerSelection === 'scissors' && computerSelection === 'rock') {
        computerScore += 1;
        alert ('Sorry, you lose! Rock beats scissors');
        return (`Your score = ${playerScore}. Computer's score = ${computerScore}`);
    }
}

Next, we'll tackle `Loop for 5 rounds`

This was provided by The Odin Project:

for (let i = 0; i < 5; i++) {
   // your code here!
}

Add in all the above code except for let playerScore = 0; and let computerScore = 0;. For the sake of keeping this post short, please view the solution on my GitHub repo.

Lastly, we'll announce the winner of the entire game by comparing the user and computer's final scores:

 (playerScore > computerScore) ? alert (`Congratulations, you beat the computer! Your score = ${playerScore}. Computer's score = ${computerScore}` ) : alert (`Boohoooooo, you lost to the computer. Your score = ${playerScore}. Computer's score = ${computerScore}. Refresh and try to win again!`);

and...we're done with my first ever Javascript project!

Phew, that was a little challenging but very rewarding. This is the beginning of many...

Live preview (make sure to open up console first before navigating to this link)
Code

Career Pivot into Development Journal, Day 2: Rock, Paper Scissors

TakDevelops — Tue, 15 Mar 2022 06:13:58 +0000

Understanding The Problem

Create a program that takes a user’s input of either Rock, Paper, or Scissors, and play this again a computer that randomly generates Rock, Paper, or Scissors. If the player wins 1 round, add 1 point to the player. If the computer wins 1 round, add 1 point to the player. Play 5 rounds and announce the winner with the most points after 5 rounds

Plan

Does program have a UI? What will it look like? What functionality will the interface have? Sketch this out on paper. No UI as this will be played in the console
What are the inputs? Will the user enter data or will you get input from somewhere else? User enters in ‘Rock’, ‘Paper’, or ‘Scissors’ when prompted
What’s the desired output? A string announcing the winner of the round, A point added to the winner. A final string announcement of the winner at the end of 5 rounds
Given input X, what are the steps necessary to return output Y?

Pseudocode

When the user inputs a string of ‘rock’, ‘paper’, or ‘scissors’

Call the computer’s random selection of ‘rock’, ‘paper’, or ‘scissors’

Compare the user’s input with the computer’s random selection

If the user wins, alert the string ‘You Win!’
and add 1 point to the user
then return the current score of the user and the computer

If the computer wins, alert the string ‘Boohoo, you lost to the computer.’
and add 1 point to the user
then return the current score of the user and the computer

If the user and computer draw, alert the string ‘It’s a draw’

Loop for 5 rounds

If the user’s final score is greater than the computer’s final score
alert ‘Congratulations, you beat the computer!

If the computer’s final score is greater than the user’s final score
alert ‘Sorry, you lost to the computer...’

Divde & Conquer

Now, let's pick the simplest subproblem from the pseudocode above to solve.

Let's start with `Call the computer’s random selection of ‘rock’, ‘paper’, or ‘scissors’`

In order to do this, we first have to create a variable with an array of strings that can be selected upon:

const options = ['rock', 'paper', 'scissors'];

Then, we can use Math.random to generate a random number between 0 and <1, then multiply by options.length (which equals 3):

Math.random() * options.length

This gives a number between 0 and 3. However in the options array, we can only index 0, 1, and 2 for 'rock', 'paper', scissors' respectively. So we can use Math.floor to round down to the nearest integer:

Math.floor(Math.random() * options.length)

To select a random item from the array:

options[Math.floor(Math.random() * options.length)];

Then, declare a function and return the entire expression above in the function:

let computerPlay = function () {
    return options[Math.floor(Math.random() * options.length)];
};

Next, let's tackle the subproblem `When the user inputs a string of ‘rock’, ‘paper’, or ‘scissors’`

We want to display a prompt, and ensure that it's case-insensitive (so users can input rock, ROCK, RocK or any other variation).

First, declare a variable that stores the prompt input value:

let playerSelection = prompt ('Rock, Paper, or Scissors?');

To ensure it's case insensitive, make all characters in the string that passes through prompt into playerSelection lower case:

let playerPlay = playerSelection.toLowerCase();

Then set playerSelection = playerPlay:

playerSelection = playerPlay;

To be continued...

DEV Community: TakDevelops

Career Pivot into Development Journal, Day 6: JS Practice 5 – sumAll.js

Understanding the problem

Plan

Pseudocode

Divide & Conquer

Declare a function that takes two parameters, startNum and endNum. Name it sumAll

Create a loop where the initialiser = startNum and the condition = endNum. Increment the loop.

Declare a variable sum and set it equal to 0

Concatenate i with i and store it in the variable sum

Return sum

Call the function sumAll(startNum, endNum)

Putting it to the test

Returns ERROR with negative numbers

Returns ERROR with non-number parameters

Works with larger number first (1 ms)

Career Pivot into Development Journal, Day 5: JS Practice 3 – reverseString.js

Understanding the problem

Plan

Pseudocode

Divide and Conquer

Declare a function reverseString that takes the parameter string

Create a loop that splices out each character of the string, starting from the last character

Concatenate each character at every loop and store this in a variable called stringReversed

Return stringReversed

Prompt the user to enter a string and store it in a variable called string

Call the function reverseString(string)

Putting it all together

Career Pivot into Development Journal, Day 4: JS Practice 2 – repeatString.js

Understanding the Problem

Plan

Pseudocode

Divide and Conquer

Prompt the user to input a string and store this value in the variable string

Prompt the user to input a number and store this value in the variable num

Concatenate the string num number of times by looping num number of times, and save it to a variable

return the concatenated string

Putting it all together

Explaining the algorithm in plain english

Career Pivot into Development Journal, Day 3: Arrays & Array Methods

Arrays

Change an Array Element

Accessing the First Array Element

Accessing the Last Array Element

Adding Array Elements

Difference Between Arrays and Objects

Array Methods

toString()

join()

pop()

push()

shift()

unshift()

concat()

splice()

Career Pivot into Development Journal, Day 2.1: Rock, Paper Scissors (cont.)

Next, let's tackle this subproblem:

Next, we'll tackle Loop for 5 rounds

Lastly, we'll announce the winner of the entire game by comparing the user and computer's final scores:

Career Pivot into Development Journal, Day 2: Rock, Paper Scissors

Understanding The Problem

Plan

Pseudocode

Divde & Conquer

Let's start with Call the computer’s random selection of ‘rock’, ‘paper’, or ‘scissors’

Next, let's tackle the subproblem When the user inputs a string of ‘rock’, ‘paper’, or ‘scissors’

Declare a function that takes two parameters, `startNum` and `endNum`. Name it `sumAll`

Create a loop where the initialiser = `startNum` and the condition = `endNum`. Increment the loop.

Declare a variable `sum` and set it equal to 0

Concatenate `i` with `i` and store it in the variable `sum`

Return `sum`

Call the function `sumAll(startNum, endNum)`

Declare a function `reverseString` that takes the parameter `string`

Concatenate each character at every loop and store this in a variable called `stringReversed`

Return `stringReversed`

Prompt the user to enter a string and store it in a variable called `string`

Call the function `reverseString(string)`

Prompt the user to input a string and store this value in the variable `string`

Prompt the user to input a number and store this value in the variable `num`

Concatenate the `string` `num` number of times by looping `num` number of times, and save it to a variable

`toString()`

`join()`

`pop()`

`push()`

`shift()`

`unshift()`

`concat()`

`splice()`

Next, we'll tackle `Loop for 5 rounds`

Let's start with `Call the computer’s random selection of ‘rock’, ‘paper’, or ‘scissors’`

Next, let's tackle the subproblem `When the user inputs a string of ‘rock’, ‘paper’, or ‘scissors’`