DEV Community: Cole Rau

Creating a Short Math Quiz with Bash Scripting

Cole Rau — Sun, 07 Mar 2021 04:12:56 +0000

This article explains how to create and run a short math quiz using Bash scripting.

Step 1: Create a .sh file

In Terminal, navigate to a directory where you'll want to put your Bash script. In that directory, open your preferred text editor and create a quiz.sh file. The .sh lets your text editor know that you're making a Bash shell script file.

Step 2: Write the Bash script

The math quiz Bash script in its entirety looks like this:

1    #!/bin/bash
2
3    quiz() {
4      echo "Starting quiz..."
5      random1=$(($RANDOM / 100))
6      random2=$(($RANDOM / 100))
7      result=$(($random1 + $random2))
8  
9      echo "What is $random1 + $random2?"
10     read response
11     if [ "$response" == $result ]
12     then
13       echo "You got it."
14     else 
15       echo "That is incorrect."
16     fi
17   }
18
19   echo "Begin math quiz? (y/n)"
20   read response
21   if [ "$response" == "y" ] || [ "$response" == "Y" ]
22   then 
23     SECONDS=0
24     quiz
25     echo "The quiz took you $SECONDS seconds to complete."
26   else 
27     echo "Exiting..."
28   fi

HERE IS THE CODE WITHOUT COPYABLE LINE NUMBERS

Step 3: Make the script file executable

In the directory that your script file lives in, enter the command chmod +x yourScriptFile.sh. In the context of this article, since our script file is called quiz.sh, we'll enter chmod +x quiz.sh.

Step 4: Run the script file

In the script file's directory, enter the command ./yourScriptFile.sh. In the context of this article, since our script file is called quiz.sh, we'll enter in ./quiz.sh. Alternatively, we can run the script file with bash quiz.sh.

Bash Script Explanation

In reference to the Bash script below...

1    #!/bin/bash
2
3    quiz() {
4      echo "Starting quiz..."
5      random1=$(($RANDOM / 100))
6      random2=$(($RANDOM / 100))
7      result=$(($random1 + $random2))
8  
9      echo "What is $random1 + $random2?"
10     read response
11     if [ "$response" == $result ]
12     then
13       echo "You got it."
14     else 
15       echo "That is incorrect."
16     fi
17   }
18
19   echo "Begin math quiz? (y/n)"
20   read response
21   if [ "$response" == "y" ] || [ "$response" == "Y" ]
22   then 
23     SECONDS=0
24     quiz
25     echo "The quiz took you $SECONDS seconds to complete."
26   else 
27     echo "Exiting..."
28   fi

...we begin with line 19, where we use echo to output the string "Begin math quiz? (y/n)" to the console.

Before we go further, it's essential to note that #!/bin/bash is written at the top of the file. This is needed so that your computer knows to use the Bash interpreter for your file's code.

Moving on, line 20 initializes a variable response and uses read to let the user input its value. In other words, whatever the user types into the console will become the value of response.

Line 21 starts a conditional statement. If the value of response ($response) is equal to "y" or "Y", the code after the then is executed.

Three things to note:

The variable response is prepended with a $ because in Bash, to get the value of a variable, you need to include a $ before the variable name.
Second, we're not testing for equality with -eq because that is for integer equality tests; here, because we're testing the equality between two strings, == is used.
Third, the quotes around the $response variables on line 21 are there just to prevent bugs.

On line 24, if the user types in "y" or "Y", the quiz function is called. The quiz function is defined in lines 3 - 17.

If the user types in something else, the else code is executed, which just outputs "Exiting..." to the screen. The fi is how you end an if...else conditional code block in Bash.

To gauge how many seconds it took the user to complete the quiz, we declare the built-in variable SECONDS on line 23, give it an initial value of 0, run the quiz function, then when the user is finished with the quiz, we use $SECONDS on line 25 to provide the amount of time elapsed.

The Code Inside the Quiz Function

If the user typed "y" or "Y", the quiz function code will be run. Inside the quiz function, on line 5, we assign a random integer between 0 and 327 to the random1 variable using the following code:

random1=$(($RANDOM / 100))

The $(( )) allows us to perform an arithmetic expression and assign it to a variable.

On line 6, we get a second random integer.

On line 7, we save the sum of the two integers to a variable called result.

From lines 11 - 16, if the user got the question right (if the response variable is equal to the result variable), "You got it." is outputted to the screen. Else, "That is incorrect." is displayed to the user.

Creating a has_many/belongs_to relationship in Rails

Cole Rau — Sun, 28 Feb 2021 07:46:50 +0000

Completed Example Code

This article will cover how to set up a basic Rails relational database. Our example database will have two models (Ruby classes): Person and Interest. We will say that a person has many interests, and an interest belongs to a person. A person will have the attributes name and age; an interest will have the attributes activity_name and person_id.

Below is a visual representation of our database:

Step 1: Navigate to your Rails project or create a new one

You'll want to be inside of your Rails project for the following steps. If you do not have one:

assuming you have Ruby, SQLite3, Node.js, Yarn, and Rails itself downloaded to your computer,
In Terminal, navigate to the folder you want your Rails app to reside in.
Enter the command rails new {lowercase and no spaces app name}
Enter the command cd {lowercase and no spaces app name}
Open up your text editor.

Example

I'm making a Rails app called People so I will, in Terminal, navigate to the folder I want my Rails app to be in, then:

run the command rails new people
run the command cd people
run the command code . to open up VSCode.

Step 2: Inside your text editor, create the Person model

In Terminal, in your Rails app directory, enter
rails g model NameOfModel column_name:datatype column_name2:datatype2 --no-test-framework

Example

To make the Person model, I'll enter in Terminal
rails g model Person name:string age:integer --no-test-framework. Now I have a SQLite model called Person that has the attributes name (a string), and age (an integer).

Step 3: Create the Interest model

Follow the instructions in Step 2 but for the Interest model.

Example

To make the Interest model, I'll enter in Terminal
rails g model Interest activity_name:string person_id:integer --no-test-framework. Now I have a SQLite model called Interest that has the attributes activity_name (a string) and person_id (an integer).

The model that "belongs to" another model will have the attribute lowercase other model's name_id. That is why, in our example case, the Interest model has an attribute of person_id.

Step 4: Add the has_many relationship

In the model that "has_many", add the code such that your file looks like this:



class ModelThatHasMany < ApplicationRecord
  has_many :{lowercase name of model this model has many of}
end

Example

Since a person has many interests, we will add the has_many relationship to the Person model.

In app/models/person.rb, I will make the file look like the following:



class Person < ApplicationRecord
  has_many :interests
end

I'm telling Rails that an instance of my Person class will have many interests.

Step 5: Add the belongs_to relationship

Identify the model that belongs to another model.

In the model that belongs to another model, add the following code:



class ModelThatBelongsToAnotherModel < ApplicationRecord
  belongs_to :{name of model this model belongs to}
end

Example

Since an interest belongs to a person, we will add the belongs_to relationship to the Interest model.

In app/models/interest.rb, I will make the file look like the following:



class Interest < ApplicationRecord
  belongs_to :person
end

I'm telling Rails that an instance of my Interest class will belong to a person instance.

Step 6: Run rails db:migrate in Terminal

In Terminal, enter the command rails db:migrate to create your database with the code you've already written.

Step 7: Write some seeds

In db/seeds.rb, create some instances of your classes (models), then type in rails c in Terminal to test out the relationships.

Example

We want to see if a person truly does have many interests and if an interest truly does belong to a person.

To do that, we'll create some seeds to later test out in the rails console.

In db/seeds.rb, add the following code:



# person1 will have an id of 1
person1 = Person.create(name: "Steve", age: 34)
# person2 will have an id of 2
person2 = Person.create(name: "Alex", age: 29)

This code creates two person instances. "Steve" will have an id of 1. "Alex" will have an id of 2.

Now add some more code to the seeds.rb file:



# person1 will have the following interests
interest1 = Interest.create(activity_name: "walking", person_id: 1)
interest2 = Interest.create(activity_name: "playing the viola", person_id: 1)
# person2 will have the following interests
interest3 = Interest.create(activity_name: "reading", person_id: 2)
interest4 = Interest.create(activity_name: "playing the piano", person_id: 2)

This code creates four interest instances. Taking into consideration that "Steve" has an id of 1, since interest1 has a person_id of 1, interest1 will belong to "Steve". Since interest2 has a person_id of 1, interest2 will belong to "Steve". "Steve" now has many interests (interest1 and interest2).

Taking into consideration that "Alex" has an id of 2, since interest3 has a person_id of 2, interest3 will belong to "Alex". Since interest4 has a person_id of 2, interest4 will belong to "Alex". "Alex" now has many interests (interest3 and interest4).

Step 8: Test out the relationships in the Rails console

Entering the rails console will allow us to play around with our model instances and how they are related to each other.

Example

In Terminal, I'll type in rails c to enter the Rails console.

I want to see if my model instances are associated correctly. According to my seeds.rb file, Steve's first interest should be walking. It's relevant to note that Steve has an id of 1. Therefore, if I type into the console Person.first.interests.first.activity_name, "walking" should be returned.

Does the interest of "walking" belong to Steve? To test this out, I'll type into the console Interest.first.person.name. This should return "Steve". (Interest.first is the walking interest since the walking interest has an id of 1).

Completed Example Code

Build process of my first deployed web app

Cole Rau — Sun, 21 Feb 2021 04:54:49 +0000

To solidify my programming skills, I decided to create and deploy a compound interest and amortization calculator.

The app can be found here.
The source code can be found here.

App Overview

In the Compound Interest Calculator, a user can find the compound interest accrued in an investment by supplying the investment's starting amount, interest rate, number of years, and compounding interval (monthly or yearly). If a user wanted to determine their monthly payment on a loan, they could use the Amortization Calculator. The Amortization Calculator will automatically generate an amortization schedule, which each month shows how much of their monthly payment will go toward principal and interest.

useState

The app, which I call Money Calculators, was made with React. I decided to try the useState react hook to add internal state to my functional components. useState allowed me to code the project without a single React class component. Basically, useState creates two variables: a variable that holds a specific slice of the component's current state and a function that will update that state. You can think of a React component's state like a global variable - accessible in any function inside that component.

Submit Button

The most challenging part of the project was getting rid of the submit button in my forms. This way, the user can change form input values and immediately see the new result. For instance, if a user has filled out all the form boxes for the compound interest calculator, they will see a number on the screen. If they decide to update a form box, they will get a new compound interest calculation right away.

In the compound interest component, to get rid of the submit button yet still show a compound interest calculation to the user, I did the following:

The compound interest is calculated via a formula that requires four variables. The user provides each of these variables.
Each variable is saved to the compound interest component's internal state
A getFinalAmount function is created. This function produces a compound interest based on the component's state. This function will only return a truthy value (not zero) if all the component's forms are filled out.
In the component's return function, a ternary operator is introduced. If calling getFinalAmount returns a truthy value, a piece of HTML is rendered to the screen that shows the result of the compound interest calculation. If calling getFinalAmount returns a falsy value, a React fragment is rendered. The user will not be able to see this React fragment.

Deploying to Heroku

This was my first time publishing an application of mine to the Internet, so I was pretty nervous putting my app on Heroku because I didn't want to mess anything up. In the end, I succeeded by doing the following:

Make a Heroku account
Download the Heroku CLI
Push your project to GitHub
I built a React app so I followed the steps in this article.
The above article says as a final step to write git push heroku main in Mac Terminal. I needed to change main to master for my project to send to Heroku. So I wrote git push heroku master instead.

Map, Reduce, Filter/Select: Ruby vs. JavaScript

Cole Rau — Sun, 14 Feb 2021 07:41:13 +0000

Map

# Ruby
def addTwoZeros(array)
  array.map { |element| element * 100 }
end 



// JavaScript
const addTwoZeros = array => {
  return array.map((element) => {
    return element * 100
  })
}

The above functions/methods take in a list of numbers, add two zeros to the end of each number, and return a new list of transformed numbers. The main idea behind map is transforming each member in an array and putting it into a new array. This new array will eventually hold a collection of transformed elements in the same order as the original array.

In the Ruby implementation, each element of the array goes through |element| and undergoes the code to the right of |element|. That is, each element goes through the pipes || and gets 100 multiplied to it.

In the JavaScript implementation, the map function gets another function passed to it. Each element of the array gets passed through the (element) of this secondary function. Then the element gets 100 multiplied to it.

Reduce

# Ruby
def getProduct(array)
  array.reduce do |accumulator, element|
    accumulator * element
  end
end 



// JavaScript
const getProduct = array => {
  return array.reduce((accumulator, element) => {
    return accumulator * element
  })
}

The above functions/methods take in an array, multiply all the elements together, then return the result. The main idea behind reduce is taking a bunch of things and reducing them down to a single value.

In the Ruby implementation, each element of the array goes through the element part of |accumulator, element| and gets multiplied to accumulator.

In the JavaScript implementation, the reduce function gets another function passed to it. Each element of the array gets passed through the (element) of this secondary function, then multiplied to accumulator.

Filter/Select

# Ruby
def getOddNums(array)
  array.select { |element| element % 2 != 0 }
end 



// JavaScript
const getOddNums = array => {
  return array.filter((element) => {
    return element % 2 !== 0
  })
}

The above functions/methods take in an array and return only the elements that are odd. The main idea behind filter / select is passing each element to a block; if the element makes the block truthy, the element is added to a new array.

In the JavaScript implementation, the filter function gets another function passed to it. Each element of the array gets passed through the (element) of this secondary function. If the element makes element % 2 !== 0 truthy, then that element is added to a new array. If the element does not make element % 2 !== 0 truthy, the element is not added to the new array.

Syntax Differences: JavaScript vs. Java

Cole Rau — Sun, 07 Feb 2021 04:51:57 +0000

In this post I'll explain some syntactical differences between JavaScript and Java.

Declaring and assigning a variable

// JAVASCRIPT
let watermelon = "good";


// JAVA
String watermelon = "good";

In JavaScript, you can declare a variable with let, const or var. You do not need to specify the variable's data type, like you do in Java. In the Java example above, we need to say the watermelon variable will point to the String, "good".

Printing/logging/outputting something

// JAVASCRIPT
console.log("tomatoes are gross");


// JAVA
System.out.println("tomatoes are gross");

There is just a minor difference between printing in JavaScript vs. Java. Printing the contents of an array works a bit differently in Java compared to JavaScript, which I'll cover later in this post.

Variable interpolation

// JAVASCRIPT
let fruit = "blueberry";
console.log(`My favorite fruit is the ${fruit}`);


// JAVA
String fruit = "blueberry";
System.out.println(
  String.format("My favorite fruit is the %s", fruit)
);

To put a variable in a string:

In JavaScript, inside the console.log, write your string with back ticks; insert ${variableName} where you want your variable to go.
In Java, inside the System.out.println, use String.format() to write your string; insert %s where you want your variable to go; after the ending quotation mark of the string, place a comma then write your variable name.

Declaring, invoking, and printing the return value of a function/method

// JAVASCRIPT
const isEven = (num) => {

  // do something with num and return the result
  return (num % 2 === 0) ? true : false;
}

console.log(isEven(4));




// JAVA
public class Main {
  static boolean isEven(int num) {

    // do something with num and return the result
    return (num % 2 == 0) ? true : false;
  }

  public static void main(String[] args) {
    System.out.println(isEven(4));
  }
}

In both languages, we're passing an integer of 4 to the isEven function/method. Then, we determine whether the remainder of the integer divided by 2 is 0. If it is, it's an even number so we return true; else, the integer is not even so we return false.

In JavaScript, you can declare and invoke a function with the following general syntax:

// declare a function called functionName
const functionName = (parameter1, parameter2, ...) => {
  // return something
}

// invoke the function called functionName
functionName(argument1, argument2, ...);

However, in Java, every method needs to be declared within a class (in the above example, the class is Main). Every parameter to a method needs to have a data type. If the method returns something, you need to specify the return value's data type (void means nothing is returned). Every method must be invoked within the main method (The Java compiler will look for a main method before it executes any other code).

The following is the general syntax for declaring and invoking a method in Java:

public class Main {

  // declare a function called functionName
  static returnValueDataType functionName(parameterOneDataType 
  parameterOne, parameterTwoDataType parameterTwo, ...) {

    // return something 

  }


  public static void main(String[] args) {

    // invoke the function called functionName
    functionName(argument1, argument2, ...);
  }
}

Declaring and printing an array

// JAVASCRIPT: 
let array = ["strawberry", "orange", "lemon"];
console.log(array);


// JAVA:
public class Main {
  public static void main(String[] args) {
    String[] array = {"strawberry", "orange", "lemon"};
    for (int i = 0; i < array.length; i++) {
      System.out.println(array[i]);
    }
  }
}

In JavaScript, the elements in an array go inside of square [] brackets. In Java, the elements in an array go inside curly {} braces. Also in Java, you need to specify what data type the elements in the array will be. This is why we write String[] above. The String tells Java the array elements will be Strings. The [] tells Java you're creating an array.

Since Java doesn't natively print out the contents of an array with System.out.println(arrayName), you need to loop through the array, printing each element for each iteration. This is why the above example uses a for loop to print each element in the array.

Checking whether there are any two numbers that will sum up to a given number

Cole Rau — Sun, 31 Jan 2021 05:00:28 +0000

In this article I'll discuss the solution for a common JavaScript interview algorithm:

// In an unsorted array, check whether 
// there are any two numbers that will 
// sum up to a given number. Example:

// sumFinder([6, 4, 3, 2], 9) = true 
// (because 6 + 3 equals 9.)

// sumFinder([6, 4, 3, 2], 2) = false 
// (because nothing in the array plus 
// another number in the array equals 2.)

JavaScript Implementation

function sumFinder(arr, num) {
  let obj = {}
  let diff

  for (let i = 0; i < arr.length; i++) {
    diff = num - arr[i]

    if (obj[diff]) {
      return true
    } else {
      obj[arr[i]] = true
    }
  }
  return false
}

let sumFinderResult = sumFinder([6, 4, 3, 2], 7)
// returns true

let anotherSumFinderResult = sumFinder([6, 4, 3, 2], 1)
// returns false

Short Explanation of the Solution

If the difference between the function's given target number (the number provided by itself in the arguments list) and an element in the array is equal to another element in the array, return true. Else, return false.

Longer Explanation of the Solution

For each element in the array, get the difference between the given number (the number provided by itself in the arguments list) and the current element in the array.
Put the current element into an object as a key.
If any element in the array (if any key in our object) matches the difference between the given number and the new current element, return true.
Else, return false.

An example of the solution using concrete numbers

Let's say sumFinder was called with two parameters: an array of [6, 4, 3, 2], and a given number of 7:

sumFinder([6, 4, 3, 2], 7)

First, according to the above code implementation, an empty object is created, and a diff variable is declared. Then, a for loop is created that loops through each index of the array. The first index points to 6. The line:

diff = num - arr[i]

now translates to:

diff = 7 - 6
// diff is now assigned 1

Since a key of 1 doesn't yet exist in our object, we will insert arr[i], or 6 as a key in our object.

Now on the second loop iteration, our num is 7 (the num never changes). The arr[i] is 4, and the diff is therefore 3. Since 3 is not yet a key in our object, we will add arr[i], or 4 as a key in our object.

On the third loop iteration, our num is 7, the arr[i] is 3, and the diff is therefore 4. This time, 4 is a key in our object, so we return true. We return true because we have successfully figured out that there are two numbers in our array (3 and 4) that will sum up to our given number (7).

Building a simple HTML/JavaScript app from start to finish

Cole Rau — Sun, 24 Jan 2021 02:52:37 +0000

Completed Code

Disclaimer: The following article was written from the perspective of a Visual Studio Code/Mac user.

This article details the process of creating a web app that counts the number of words in a user's input.

Step 1: Create an empty folder (directory) in your text editor and navigate to that folder

Your text editor is the piece of software you use to write your code (e.g., Visual Studio Code, Atom, Sublime Text). You can create an empty folder in your text editor via your computer's Terminal. Open the Terminal and, assuming you are in a fresh Terminal session, type in

mkdir word-counter
cd word-counter

mkdir word-counter will create a new folder called word-counter. cd word-counter will navigate you inside that folder. Now, enter in the command that opens up your text editor. For instance, if you have VSCode, type in

code .

Step 2: Assuming you have pulled up an empty folder in your text editor, create your `index.html` file

Your index.html file will contain your HTML code. Create a new file and call it index.html. Copy and paste the standard HTML boilerplate code below:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
  </head>
  <body>


    <script src="" async defer></script>
  </body>
</html>

Between the body tags (between <body> and </body>) and above the script tag (above <script src="" async defer></script>), type in the following code:

<h1>Word Counter</h1>

This will create a header with the text "Word Counter".
Now we need to make a form for our user's input. Here is the code for that:

    <form id="form">
      <label>Enter text:</label>
      <br />
      <input type="text" id="user-input-box" style="width:650px" />
      <br />
      <br />
      <input type="submit" style="width:200px" value="Get word count" />
    </form>

This code has a label, a text input box, and a submit button. From top to bottom:

<form id="form"> creates an HTML form and gives the entire form an id of "form". We will later use JavaScript to select this form based on its unique id of "form". This HTML tag needs a closing tag of </form>, which we will write when we're done writing the innards of the form.
<label>Enter text:</label> gives the form a label of "Enter text:".
<br /> denotes a new line.
<input type="text" id="user-input-box" style="width:650px" /> creates a text input box with an id of "user-input-box" and stretches its width out to a length of 650 pixels.
<input type="submit" style="width:200px" value="Get word count" /> creates a submit button, stretches it out to 200px in length, and replaces the submit button's text with "Get word count".
</form> closes the form that was opened on the first line (<form id="form">).

Now we need to display the word count to the user via the following code:

<h3 id="word-count-area">The word count is 0.</h3>

(Notice that the word count is initialized to 0. Our future JavaScript code will change that 0 into the proper word count.)

Next, we need to update our HTML script tag to include our soon to be created JavaScript file. We do this by locating this line (just above the </body>):

<script src="" async defer></script>

and adding some text inside the parentheses. Now the line should read:

<script src="index.js" async defer></script>

THE COMPLETED HTML FILE (index.html) SHOULD LOOK LIKE THIS:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
  </head>
  <body>

    <h1>Word Counter</h1>

    <form id="form">
      <label>Enter text:</label>
      <br />
      <input type="text" id="user-input-box" style="width:650px" />
      <br />
      <br />
      <input type="submit" style="width:200px" value="Get word count" />
    </form>

    <br />

    <h3 id="word-count-area">The word count is 0.</h3>

    <script src="index.js" async defer></script>
  </body>
</html>

Step 3: Uh oh, looks like it's JavaScript time

In your text editor, create a new file called index.js. This file will be where our JavaScript code lives.

First, we need to select the appropriate HTML elements with JavaScript. We will begin by selecting our HTML form with this line:

let form = document.getElementById("form");

More exactly, this JavaScript code selects the HTML code with the id of "form".
Now we need to select the user's input box and the area in which we will update the word count. This is accomplished with the following two lines:

let userInputBox = document.getElementById("user-input-box");
let wordCountArea = document.getElementById("word-count-area");

Now we need to add an event listener to our form. Whenever the form's submit button is clicked, we want the code within the event listener function to fire. The foundation of the event listener code is the following:

form.addEventListener("submit", event => {
  // When the form's submit button is clicked, the code in 
  // this area will run. 
})

Now we need to fill in the area where the code will run with some JavaScript. Inside the event listener function:

We'll first prevent the page from refreshing upon submit with this line: event.preventDefault();.
We'll get the user's input with this line: let userInput = userInputBox.value.trim();.
We'll split the user's input string into an array where each word is a separate element in the array with this line: let array = userInput.split(" ");.
We'll get the number of elements in the array with this line: let count = array.length;. This will be our final word count answer.
We'll update the HTML file with the word count by writing this code:

wordCountArea.innerText = `The word count is ${count}.`;

THE COMPLETED JAVASCRIPT FILE (index.js) SHOULD LOOK LIKE THIS:

let form = document.getElementById("form");
let userInputBox = document.getElementById("user-input-box");
let wordCountArea = document.getElementById("word-count-area");

form.addEventListener("submit", event => {
  event.preventDefault();
  let userInput = userInputBox.value.trim();
  let array = userInput.split(" ");
  let count = array.length;
  wordCountArea.innerText = `The word count is ${count}.`;
})

Step 4: Test the app

Open up your app in a new internet browser tab by typing into your text editor's terminal open index.html. See if your app works by entering in a piece of text, clicking the submit button ("Get word count") and verifying that the word count the app displays is correct.

Completed Code

Intro to Google Chrome DevTools

Cole Rau — Sun, 17 Jan 2021 02:26:16 +0000

This article covers the Console, Sources, and Elements tab, and provides instructions for inserting breakpoints to reliably halt your code's execution at a certain line.

Google Chrome DevTools can help with debugging by letting you:

insert breakpoints into your code, which let you determine the value of variables at a certain point in your code's execution flow
alter your app's DOM, or the DOM of any Google Chrome web page
let you execute JavaScript code and see the results of a console.log
display the innards of a resolved promise from a fetch request
warn you of problems with your code
make you the cool hacker kid in middle school

Opening Chrome DevTools

Navigate to a Chrome web page
On Mac, press Command + Option (alt) + J. On Windows, press Control + Shift + J.
(optional) You can double click anywhere on a page and select Inspect.

The Console Tab

This is where you can execute JavaScript code for experimentation purposes or to select and alter a DOM element. Additionally, the result of running console.log will live here.

If too many error messages and warnings clutter up this tab, click the circle with a diagonal line button on the top-left corner to clear the console.

The Sources Tab

Here you can view the contents of your local files and insert breakpoints at specific lines.

The Elements Tab

In this tab the HTML skeleton of the web page is revealed. Click the button on the very top-left corner (the square with an eclipsing mouse cursor) to select an HTML element on your web page. Once selected, the element will be highlighted in the HTML skeleton. To manipulate the DOM, alter some HTML in the skeleton and see the resulting change in the DOM upon pressing Enter.

Inserting A Breakpoint Into Your Code

Breakpoints work just like JavaScript's debugger or Ruby's binding.pry or byebug. However, if you find that your favorite debugging tool is not working, you can count on breakpoints to help you out.

Let's say you navigated to localhost:3000/ on Google Chrome and have opened up the Sources tab in the Chrome DevTools. To insert a breakpoint:

1 - Navigate to the desired file

In the left window of the Sources tab, you will see a list of folders. The localhost:3000/ folder should already be opened and listing its contents. Your current project's files will likely be listed under "Users/{your name}/Projects/{your project's name} in the "localhost:3000/" folder. Follow the tree of folders and files until you get to the file into which you wish to insert a breakpoint.

2 - Insert a breakpoint

In the middle window of the Sources tab, you will see the code from the file selected in the left window of the Sources tab. The code will look familiar as it is the same code you wrote in your local text editor. Click on the line number of the code at which you want to stop the execution flow. For instance, if you want to stop execution at line 36, click on the number 36; a blue rectangle with a pointed right edge should highlight the number you clicked on.

3 - Do something to activate the line of code you just selected

This could be as simple as refreshing the page, or pressing refresh and then clicking on an element in your DOM. In any case, you must first refresh the page.

4 - The execution flow has stopped

You should see a faint yellow box appear on the page that says "Paused in debugger". You can click on the blue "play" icon to resume execution flow.

5 - See the value of your variables

With the execution stopped, you can navigate to the Console tab of the DevTools and type in a variable name to get its current value.

This video demonstrates how to add a breakpoint using Chrome DevTools

How to find the mode (most repeating number) of an array in JavaScript

Cole Rau — Sun, 10 Jan 2021 02:16:24 +0000

Disclaimer: This post assumes the array input will be composed of only positive numbers and there will only be one mode per input (i.e., there will only be one most repeating number).

The findMode Function

function findMode(array) {
  // This function starts by creating an object where the keys are each unique number of the array and the values are the amount of times that number appears in the array.

  let object = {}

  for (let i = 0; i < array.length; i++) {
    if (object[array[i]]) {
      // increment existing key's value
      object[array[i]] += 1
    } else {
      // make a new key and set its value to 1
      object[array[i]] = 1
    }
  }

  // assign a value guaranteed to be smaller than any number in the array
  let biggestValue = -1
  let biggestValuesKey = -1

  // finding the biggest value and its corresponding key
  Object.keys(object).forEach(key => {
    let value = object[key]
    if (value > biggestValue) {
      biggestValue = value
      biggestValuesKey = key
    }
  })

  return biggestValuesKey

}

Function Breakdown

At a high-level, the function:

takes in an array
makes an object where the keys are each unique number of the array and the values are the amount of times that number appears in the array
finds the key that points to the biggest value
returns that key.

Analyzing the findMode function from top to bottom, first we create an empty object and assign it to the "object" variable. Then, to fill up our object, we create a for loop that goes through each member of the array. We want our object to end up looking something like this:

{1: 4, 2: 7, 9: 3}

Each key of the object is a unique number in the array and the key's value is the amount of times that number appears in the array. So in the above example object, the mode would be 2, because it appears the most in the array (7 times).

To get our object to look like that, we introduce an if...else block. For each element in the array input, if the element is already a key in the object, we increment that key's value by one. If the element is not already in the object, we make that element a new key and set its value to one.

This is all taken care of in the following code from the findMode function:

    if (object[array[i]]) {
      // increment existing key's value
      object[array[i]] += 1
    } else {
      // make a new key and set its value to 1
      object[array[i]] = 1
    }

Next, we declare two new variables, biggestValue and biggestValuesKey, and assign them both to -1. It doesn't matter which negative number you assign to these variables, it just has to be the guaranteed smallest number in the array.

Now we need to find the biggest value of our object and return that value's key (the mode). To do that, we receive a new array of our object's keys with Object.keys, passing in our object to the keys method. Then, we iterate through that new array with a .forEach enumerator. Next, we get a value from our object with object[key] and assign it to the new value variable. If that value is greater than the biggestValue variable, our new biggestValue is set to value and our new biggestValuesKey is set to key. The code goes through those steps for each key in the array returned from Object.keys(object). Finally, we return biggestValuesKey, which is the mode.

Thank you for reading. Please let me know if you have any questions, if there is a better way to find the mode or if I made a mistake somewhere in this post.

How Redux's mapDispatchToProps Works

Cole Rau — Sat, 31 Oct 2020 10:29:49 +0000

Overview

mapDispatchToProps gives your props indirect access to Redux's dispatch function. dispatch passes an action (a JavaScript object) to your reducer so your application’s state can update.

The props that get access to dispatch belong to the file that is written in the Redux connect function's second set of parentheses. For example, in App.js, if you write the line

export default connect(null, mapDispatchToProps)(App);

only the props for App.js will receive indirect access to the dispatch function.

How to Use `mapDispatchToProps`

(The following assumes you are building a React app with a Redux store already configured).

Let's say we are making a React app that will allow us to write reviews for something. To add a new review object to our Redux store, we will do the following in the class component ReviewsContainer.js:

Make sure react-redux is listed in your package.json file. Also, in the terminal inside your project's directory, make sure you have run npm install.
At the top of the file, add the line import { connect } from 'react-redux';. This will grant your file access to Redux's connect function.
At the bottom of the file, add the line export default connect(null, mapDispatchToProps)(ReviewsContainer);. This lets our file use mapDispatchToProps. The null can be replaced with mapStateToProps. The ReviewsContainer part is the name of the file we're working in.
Write your mapDispatchToProps function. This function goes outside of the class. The function returns an object with keys that we'll use later via props. If our goal is to add a review to our Redux store, we could write:

const mapDispatchToProps = dispatch => ({
  addReview: reviewObject => 
(dispatch({ type: "ADD_REVIEW", payload: reviewObject }))
})

The syntax is convoluted but can be understood like this:

The function takes in an argument of dispatch and returns an object with a key of addReview. (dispatch is provided by Redux's connect function).

The addReview key points to a value which is an anonymous function. The anonymous function returns an expression that uses the dispatch function to send an action to the reducer. The action is this part: { type: "ADD_REVIEW", payload: reviewObject }. Your reducer will expect an action.type of 'ADD_REVIEWS' and an action.payload of reviewObject. The word "payload" just means the data, the meat and potatoes, that is given to the reducer.

To actually add a review, we could call this.props.addReview(reviewObject) somewhere in our ReviewsContainer class. This will invoke the following anonymous function:

reviewObject => ( dispatch({ type: "ADD_REVIEW", payload: reviewObject }) )

(This function is the value of the addReview key of our mapDispatchToProps function).

We can give that function a review object, which can be retrieved by using action.payload in the reducer.

(optional) If you want to add another key-value pair in your mapDispatchToProps function, you could write the following, which will create a deleteReview action you can send to your reducer:

const mapDispatchToProps = dispatch => ({
  addReview: reviewObject => (
    dispatch({ type: "ADD_REVIEW", payload: reviewObject })
  ),

  deleteReview: id => (
    dispatch({ type: "DELETE_REVIEW", payload: id })
  )

})

Conclusion

mapDispatchToProps is a function that one writes to dispatch actions to the reducer. mapDispatchToProps itself returns an object with any number of key-value pairs. Each key points to an anonymous function declaration that will dispatch an action object to the reducer. To invoke the anonymous function, you can call this.props.<keyOfAnonymousFunction>() somewhere in your class.

In the end, ReviewsContainer.js looks like this:

import React, { Component } from 'react';
import { connect } from 'react-redux';

class ReviewsContainer extends Component {

  render() {

    let reviewObject = {content: "good"}

    return (
      <div>

        {this.props.addReview(reviewObject)}
        {this.props.deleteReview({id: 5})}
      </div>
    )
  }
}

const mapDispatchToProps = dispatch => ({
  addReview: reviewObject => (
    dispatch({ type: "ADD_REVIEW", payload: reviewObject })
  ),

  deleteReview: id => (
    dispatch({ type: "DELETE_REVIEW", payload: id })
  )

})

export default connect(null, mapDispatchToProps)(ReviewsContainer);

Photo Rover - Flatiron School Final Project

Cole Rau — Thu, 29 Oct 2020 00:41:48 +0000

App Overview

Source Code

Photo Rover is a web app that uses NASA's Mars Rover Photos API to receive a daily-updating collection of photos from Mars. The photos are taken by NASA's Curiosity rover. A lot of photos feature Martian geology. The rover is also fond of selfies.

In Photo Rover, a user can view pictures of Mars by selecting a specific Earth date. If they like a photo, they can save it to their library. A link to their saved photo is persisted in a SQLite database.

The app uses a React/Redux frontend, Redux Thunk to send asynchronous API calls, and a Ruby on Rails JSON API backend to handle user accounts and their respective actions.

App Execution Flow (Initial Photo Retrieval)

In the React frontend, we start in index.js, where the Redux store is configured, and App.js is rendered.
In App.js, all the routes are set up with React Router. When App.js mounts, an action is dispatched to receive photos of Mars from yesterday. The action sends a GET request to NASA's database. The action uses fetch and waits for a resolved promise to send to the reducer.
The reducer takes the list of photo objects from the action and stores them in state. Each photo object has its own link to retrieve itself from the Internet.
App.js then receives the updated state that contains the photo objects. It renders PhotosList.js and sends it props containing the photo objects.
PhotosList.js receives the props and iterates through them, passing each photo object to the Photo.js component.
Photo.js takes the photo object it received from props and passes the image URL from the object to an HTML img element. This causes the photo to render on the web DOM.
The photo is rendered with a button that, upon being clicked by a logged-in user, will cause that photo to be associated with that user. The user can retrieve that photo by going to their Saved Photos library and clicking "Refresh Saved Photos".

My Flatiron School JavaScript Project

Cole Rau — Wed, 16 Sep 2020 22:24:14 +0000

source code • demo

Project Description

I made an in-browser game using JavaScript, HTML, and CSS (which comprise the frontend); and a Ruby on Rails JSON API (the backend). The frontend uses the backend to alter elements on the DOM. My frontend code utilizes Object-Orientation, and the backend code is organized using REST and the MVC pattern.

The goal of the game is to move the player (using the keyboard as a controller) to the goal. Along the way, the user must avoid the red squares, which briskly bounce up and down on the screen. The player's position will reset should a collision occur with a red square.

The game has collision detection between the player object and the enemy objects. Collision detection is also incorporated when the player and enemies hit the game screen edges, and when the player touches the goal.

How the game works

An HTML canvas is made. Its 2d context is selected by JavaScript.
The Game class is created and a new instance is instantiated.
The start method is called on the Game instance.
A gameLoop function is created and called. gameLoop uses requestAnimationFrame recursively to clear, update, and draw on the game screen every frame.
The Player class object moves by changing the pixels of its position. To move diagonally, the x and y position are both updated.
The InputHandler class listens for a keydown event, and calls the appropriate player movement function based on the key that was pressed. InputHandler also listens for a keyup event, and will call the stop function on the player object when a key is released.
The Enemy class changes its y-position every frame to move up and down. When it hits the edges of the game screen, its position is multiplied by -1 to cause it to change direction.
When the player bumps into an enemy, the player's position is set to x = 0 and y = 0.
When the player makes contact with the goal, an alert to the user is displayed telling them they won the game. The number of levels completed is incremented by 1, and the player's position is reset.

How signing up and logging in works

JavaScript Event listeners wait for a click of an account form's submit button.
The username provided by the user is sent to the Ruby on Rails backend via a fetch request.
If the user wants to log in, Rails attempts to match the username string with a username in its SQLite database. If the user wants to sign up, Rails will create a user object based on the username it receives. However, if the username is blank or if it already exists, Rails will not create a new user object and the end-user will not be able to sign up.
In the frontend, the DOM elements for the username and number of levels completed are updated based on the JSON that Rails gives back. The comment feature of the application also uses this asynchronous AJAX technique to render comments and to send a post request to the backend if a logged-in user wants to compose a new comment.

DEV Community: Cole Rau

Creating a Short Math Quiz with Bash Scripting

Step 1: Create a .sh file

Step 2: Write the Bash script

Step 3: Make the script file executable

Step 4: Run the script file

Bash Script Explanation

The Code Inside the Quiz Function

Creating a has_many/belongs_to relationship in Rails

Step 1: Navigate to your Rails project or create a new one

Example

Step 2: Inside your text editor, create the Person model

Example

Step 3: Create the Interest model

Example

Step 4: Add the has_many relationship

Example

Step 5: Add the belongs_to relationship

Example

Step 6: Run rails db:migrate in Terminal

Step 7: Write some seeds

Example

Step 8: Test out the relationships in the Rails console

Example

Build process of my first deployed web app

App Overview

useState

Submit Button

Deploying to Heroku

Map, Reduce, Filter/Select: Ruby vs. JavaScript

Map

Reduce

Filter/Select

Syntax Differences: JavaScript vs. Java

Declaring and assigning a variable

Printing/logging/outputting something

Variable interpolation

Declaring, invoking, and printing the return value of a function/method

Declaring and printing an array

Checking whether there are any two numbers that will sum up to a given number

JavaScript Implementation

Short Explanation of the Solution

Longer Explanation of the Solution

An example of the solution using concrete numbers

Building a simple HTML/JavaScript app from start to finish

Step 1: Create an empty folder (directory) in your text editor and navigate to that folder

Step 2: Assuming you have pulled up an empty folder in your text editor, create your index.html file

Step 3: Uh oh, looks like it's JavaScript time

Step 4: Test the app

Intro to Google Chrome DevTools

Opening Chrome DevTools

The Console Tab

The Sources Tab

The Elements Tab

Inserting A Breakpoint Into Your Code

How to find the mode (most repeating number) of an array in JavaScript

The findMode Function

Function Breakdown

How Redux's mapDispatchToProps Works

Overview

How to Use mapDispatchToProps

Conclusion

Photo Rover - Flatiron School Final Project

App Overview

Source Code

App Execution Flow (Initial Photo Retrieval)

My Flatiron School JavaScript Project

source code • demo

Project Description

How the game works

How signing up and logging in works

Step 2: Assuming you have pulled up an empty folder in your text editor, create your `index.html` file

How to Use `mapDispatchToProps`