DEV Community: reduncan

Tech Speak: Terminal Command Aliases

reduncan — Tue, 04 Dec 2018 22:35:31 +0000

Do you ever get tired of typing ../ to go up a level in your folder structure when navigating via the terminal? How about mkdir? Or even clear? If using the terminal for navigating your file structure is supposed to be quick and easy why not make it even easier by aliasing certain commands so that you use less key strokes and use more memorable terms to achieve the same result.

To do this you will want to make sure that you set the aliases on a permanent basis otherwise each time you open a new terminal window you will have to set the aliases again. To set the alias permanently, you will need to create a file that the terminal will read each time it is loaded.

In your terminal type the following commands...

cd ~

This will take you to your root directory.

touch .bash_profile

This will create the file where your aliases are stored and will be read by your terminal each time it is loaded.

open -e .bash_profile

This command will open the new file in your default text editor.

Now that we have the file open in your text editor we can start setting our aliases. In the text file you will create an alias by typing alias followed by the shortcut you want followed by the equal sign and finished up by the actual terminal command.

alias create=mkdir
alias clr=clear
alias .=../

Once you have your aliases, save the file and close it. Reload your terminal and test out your aliases.

And that is how you can alias all of your most used commands to make navigating via the terminal easier.

Until next time :)

My Journey through Javascript: Arrays and Objects

reduncan — Thu, 29 Nov 2018 22:40:18 +0000

Now that we know basic syntax we can talk about more advanced variable types, arrays and methods. We learned in my previous post about Basic Syntax that numbers, strings and booleans are types of variables in JavaScript. However, we also have arrays and objects.

Arrays:

const cars = ['Tesla', 'Ford', 'Honda', 'Jeep'];

list like variables
the length and the type of elements inside an array are not fixed
elements inside of arrays can consist of any type of variable that we have already discussed
arrays are denoted using an open and closing square bracket []
the elements inside of an array are separated by a comma
elements inside of an array can be accessed using bracket notation (cars[1])
the numbering of elements inside of an array begins at 0

Objects:

const car = {
    make: 'Tesla',
    model: 'Model X',
    price: 71,200,
    color: 'red'
};

list of key / value pairs
key / value pairs can consist of any elements, even functions
objects are denoted using opening and closing curly brackets {}
key / value pairs are denoted by stating the key then having a colon followed by the value (make: 'tesla')
each key / value pair is separated by a comma
key / value pairs in an object can be accessed using either dot notation (car.name) or bracket notation (car[name]), but dot notation is the standard

Now we can make it even trickier and have an array of objects. These are formatted by creating an array and each item in the array is an object made of key / value pairs.

const cars = [
    {
        make: 'Tesla',
        model: 'Model X',
        price: 71,200,
        color: 'red'
    },
    {
        make: 'Tesla',
        model: 'Model S',
        price: 65,000,
        color: 'silver'
    },
    {
        make: 'Tesla',
        model: 'Model 3',
        price: 34,200,
        color: 'black'
    }
];

The same properties from above still apply to an array of objects, but the way we access key / value pairs does change. To access the key / value pairs we must use dot and bracket notation. If we wanted to access the price of the Tesla Model S we would type cars[1].model. We have to use bracket notation to access the correct object in the array and dot notation to access the key / value pair inside of the second object.

These are the basics of arrays and objects! Next time we will look at array and object methods.

Until next time :)

Tech Speak: TDD

reduncan — Mon, 26 Nov 2018 21:39:46 +0000

TDD? What is TDD? TDD is an acronym for Test Driven Development. So what is test driven development? It is the practice/programming style where developers do not write production code first, instead they write test for a certain unit within their code. These test encompass all aspects of results that can be returned from the unit. These are known as positive and negative test.

The idea behind TDD is to write only enough unit test to fail, and conversely you only write enough production code for the all test to pass. The kicker is that you are not supposed to write any extra code unless it is needed to pass a test.

There are many different ways to accomplish unit testing, but today we will be discussing Mocha and Chai. Mocha is a feature-rich JS test framework that runs on Node.js and in the browser. Chai is an assertion library that can be paired with any JS testing framework. In simple terms, an assertion library includes functions to verify that the returned values are correct. Now let's at some code...

So you are working for a company that uses TDD and they have asked you write test for a function called getGPA that takes in an array of numbers and returns the average. We have to start by requiring chai and the function we are going to be testing.

const expect = require('chai').expect;
const getGPA = require('./functions.js').getGPA;

We are requiring chai and the expect style, which allows for chainable language so you can construct assertions, and storing it in a variable name expect. We are also requiring the file in our program that houses the function we are going to test and storing in variable that is the same as our function name.

Now that we have required the needed tools for testing we can begin writing our test...

describe('getGPA', function() {

  //Positive Test
  it('should find the average of whole numbers', function() {
  expect(getGPA([2, 4, 3])).to.equal(3);
  });

  it('should find the average of the decimal numbers', function() {
  expect(getGPA([3.4, 2.8, 4.0, 3.9])).to.equal(3.525);
  });

  //Negative Test
  it('should return -1 for numeric non-array inputs', function() {
  expect(getGPA(3.4, 2.8, 4.0, 3.9)).to.equal(-1);
  });

  it('should return -1 for arrays of string', function() {
  expect(getGPA(['hiya', 'pal'])).to.equal(-1);
  });
});

describe is the function that takes in the function you are testing and the functions for testing your function.
it is a function that takes in a string of what the function should do and a function that is constructed using chai.
expect takes in the function you are testing and is chained with functions from the chai library. It is important to note that when passing your function into expect that you pass an argument into the function so it can be tested.
The last part of the function chain is the equal function. The equal function takes in what should be the result of the function as an argument.

And that is how you write a simple test for a unit of your code.

We will look at the second part of testing, writing your code to test, next time.

Until next time :)

Tech Speak: Reset Your Styles

reduncan — Tue, 13 Nov 2018 17:06:31 +0000

You are starting a new project and want to start with a blank canvas. So you create your file structure, build out the html, create the functionality of your website using your preferred programming language and lastly style your web app. As you are styling your web app you notice you are having issues styling your app. You are having to add styles to portions of your website that shouldn't need styling and at times you are having to get creative with styling your page because certain attributes are not responding as they should. Why is that?

Every web browser has it's own set of predefined styles. You can create an html skeleton using just html attribute tags and when you look at it in a browser it will be "styled". Attribute tags such as body, h1 - h6, p, ol, table and ul all have predefined display, margin, padding, borders and font-size styles. You can check out the overview of styles inherited from the browser HERE. While you can override these styles in your css file, what if you don't want padding where the browser put padding? You have to go into your css file and change that value. This can be time consuming and you may have to do this multiple times, which can clutter your code and make it less readable. So how do we solve this issue?

We add a secondary css file to our web app. This css file resets all styles that are inherited from the browser, this file is generally named reset.css. You may be wondering how we know what all to reset. If you want to create your own reset.css file you would have to go through and figure out all the styles that have been inherited from the browser, but this can time consuming as there are many browsers and they all have slightly different default styles. The easiest and quickest way to do this is simple search in your favorite search engine...

Here's a fun tutorial for searching on google.

Now you may be wondering which one to use since there are so many results. That's up to you. Try them out and find the one that works best for you. They all do pretty much the same thing. I prefer to use the meyerweb reset file. It is the first result is widely used by developers.

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

As you can see, there are a lot of styles that have to be reset. The meyerweb reset file also takes into account older browsers that are no longer updated (cough, cough, internet explorer). This file sets everything that is inherited from the browser to 0 or none.

Now that you have added your reset.css file you are free to style your app as you wish without worrying about inherited styles.

Happy Styling and until next time :)

Tech Speak: Declaring a Function

reduncan — Thu, 08 Nov 2018 19:51:27 +0000

How do you make a program do something for you? You declare a function and then later invoke that function. So how do you declare a function?

There are three different ways to declare a function. A Function Declaration, Function Expression and an Arrow Function Expression. Let's take a look at each of these...

Function Declaration:

Using a function declaration defines a named function and is created using the function keyword followed by the name of the function.

function foo (parameter) {
    //statements that handle the parameter(s)
};

When declaring a function using a function declaration the function is hoisted. Since the function is hoisted, it can be called before the function is defined.

Function Expression:

Using a function expression defines a named or anonymous function by setting the anonymous function equal to a variable.

let foo = function (parameter) {
//statements that handle the parameter(s)
};

When a function is declared using a function expression the function is not hoisted and cannot be called prior to the function being declared.

Arrow Function Expression:

An arrow function expression is defined using a shorthand syntax that does not use the function keyword. Instead it uses arrow notation (=>). However, the function is still set equal to a variable.

let foo = (parameter) => {
//statements that handle the parameter(s)
}

When a function is declared using an arrow function expression the function is again not hoisted and cannot be called before it is defined. Another important thing to note is that arrow functions do not create their own this value. Do not let the this keyword get you bogged down though.

Now that we have added terms like parameter and talked about calling a function lets look at these a bit more...

Parameter(s):

Functions are like ATMs and parameters are like a debit card. You must provide a debit card for an ATM to handle your request for a withdrawal, and functions must be provided with a parameter to return a result. A parameter is the variable that you are passing through the function and is defined inside of the parentheses when declaring the function. When passing a parameter through a function you can pass more than one, you can actually pass up to 255 parameters through a function. To do this the parameters are separated by a comma. Let's look at what parameters look like...

const add = function (num1, num2) {
   let sum = num1 + num2;
   return sum;
};

In the above function, num1 and num2 are the parameters that we are passing through our function that adds two numbers together. Before we move into calling a function let's look at yet another new keyword that was added return.

Return:

Every function must include the keyword return so that the a value is provided from the function. If return is not used the function will always evaluate to undefined. Let's use the function expression from above...

const add = function (num1, num2) {
   let sum = num1 + num2;
};

add(3, 4);
//this function will evaluate to undefined

 const add = function (num1, num2) {
   let sum = num1 + num2;
   return sum;
};

add(3, 4);
//this function will evaluate to 7 as expected

This may not seem very important, but if your function is for a calculator app not having the return keyword in your functions would cause very big problems for your user since the wrong value or no value at all could be output. One last thing to note is that the return keyword stops the function immediately and does not pass that line of code.

Calling a Function:

Calling a function, also known as invoking the function, is how the function is executed. To invoke a function you reference the function name followed by an opening and closing parentheses "()". Inside of the the parentheses following the function name is where you pass through the arguments that fulfill the parameters of the function. If the function does not take in any parameters the parentheses will remain empty.

And that is how a function is declared and invoked.

Until next time :)

Tech Speak: Array Method - .includes

reduncan — Tue, 30 Oct 2018 22:01:56 +0000

When starting to learn JavaScript we learn that getting information out of an array is done using a for loop. We also learned that there is a lot of code involved in writing a for loop. Because there is a lot of code involved in for loops, array methods were created.

Array Methods not only cut down on the amount of code one has to write, it also improves the readability and cleanliness of one's code. There is a whole list of Array Methods, .concat, .filter, .find, .indexOf, .map, and many more. You can find the full list of built in methods by CLICKING HERE. Today we are going to look at the inner workings of .includes.

We have an array of all the plants in our house...

const plants = [
        "cactus", 
        "fern",
        "bonsai",
        "aloe",
        "lily",
        "orchid",
        "fiddle-leaf"
]

We have created an app that our friends can use to see what plants we currently have in our house. To do this we have the below code...

const inHouse = function() {
        htmlStr = '';
        userInput = $(`#input`).val().tolowercase();
        weHave = plants.includes(userInput);
        if (weHave === true) {
            htmlStr += `We have a ${userInput} in our house.`;
        } else {
            htmlStr += `We do not have a ${userInput} in our house.`;
            }
        };

When a friend wants to know if we have a certain plant they go to our app and they type in a plant. Then it tells them whether we have that plant in our home right now or not.

Now lets look at what the code would look like if we did not use .includes but instead used a for loop...

const inHouse = function() {
        htmlStr = '';
        weHave = false
        userInput = $(`#input`).val().tolowercase();
        for (let i = 0; i < plants.length; i++) {
            if (plants[i] === userInput) {
                weHave = true
            };
        if (weHave === true) {
            htmlStr += `We have a ${userInput} in our house.`;
        } else {
            htmlStr += `We do not have a ${userInput} in our house.`;
            }
        };

You can see from comparing the 2 blocks of code that we had to add 4 lines of code to figure out if the user's input is included in our array. We added a for loop and inside of the for loop we also added an if statement. While this code is not that difficult to read it does look a lot messier and is hard to follow at first. But the major point here is what is happening inside of .includes.

To achieve .includes:

we first have to add that weHave is false
use a for loop
the for loop is set-up to start at 0 (the index of the first item in the array), iterate through the array for as many times as the array is long (arr.length) and then finally increment i so that we can pull the item for that index off the array
as we iterate through the array we are comparing the userInput against each item in the array
if the first index matches the userInput it will store true in the variable weHave, if the first index does not match userInput it will move to the next index and compare it. It will iterate through the array until it finds a match or the for loop terminates. If it does not find a match and the for loop terminates, weHave remains stored as false.

And that is how .includes works!

Until next time :)

My Journey through Javascript: The Struggle is Real

reduncan — Wed, 12 Sep 2018 18:18:41 +0000

Sorry for the delay in posting. Class has ramped up the last two weeks and my work and social life have also been hectic, so blogging fell to the way side.

I want to take a break from the normal JS post and give a little inspiration for anyone that may be struggling like I have been the past few weeks. Learning something new is hard, learning a new language can be even harder.

Two weeks ago we started creating our DOM manipulation libraries (don't worry there is a blog post coming soon about this topic) so that our JS files we have been building would actually work dynamically. At first it all made sense and then the struggles rolled in. Linking our dom library to our html file. Referencing our dom library in our JS file. It was all very overwhelming and I couldn't get my head above water no matter how many times I heard it. For the first time on this journey, the thoughts of giving up began popping up in my head. Not just once, but on a daily basis. But I kept telling myself it will all fall in place soon. I would pull out my laptop code some and then test some, and no success or forward progress was being achieved. I was stuck and very frustrated. I knew I couldn't give up though.

So here's how I overcame the frustrations...

Reach out to your peers: Most students in my class are struggling, and some of them have mastered it. I found peers that were making progress, but had not mastered it yet. I wanted to figure it out with them, not just have someone give me the answers. So we put our heads together and made some progress together. We helped each other learn and understand by putting together what we knew and understood individually.
Reach out to someone you know in the field: Don't be afraid to ask friends or acquaintances for help. Most of them will welcome the opportunity to taut their skills and help you. Plus, they have been doing this for years now and can offer a different perspective than what you have learned from others in class. They also generally know how to debug programs which is an added bonus when learning from them. I learned a lot of new tricks for debugging through a friend of mine. Gather all the knowledge you can from whomever you can.
google, google, google: I know it may be daunting to google these concepts, but the more you do it, the more you find resources that you can rely on. Whether it be a blog community like Dev.to or more structured like w3schools, finding resources you understand are so valuable. Not sure what to google? Check out this helpful guide to learning search engine best practices (http://www.informit.com/articles/article.aspx?p=1315437).
Don't be afraid: Throw fear out the window. IT IS OKAY TO ASK FOR HELP!! If you are stuck ask someone for help. If they are judging you for asking for help find someone else. Anyone that is judging you is not looking out for your best interest or theirs. If they can help you, they are helping themselves by reinforcing what they already know. Plus, they are making you better and you will be able to help them one day. Conversely, don't be afraid to help others. We are all on this journey together and need help some times.
Never give up: I know it may be frustrating at times. I know it may not seem worth it at times. Just remember, you can do it. You are learning an entire new language and it's okay not to excel at it when you first start. Things will start clicking and the lightbulb will turn on. It may take time, but the more you talk to people the more times you hear it and can link concepts together to help turn that lighbulb on.

Lastly, remember this. You are doing this to better yourself. Anytime you have started on a new journey for self-improvement it doesn't come easy. It takes adjustments and it takes commitment. Don't give up and keep pushing through.

Until next time :)

My Journey through Javascript: Basic Syntax

reduncan — Thu, 06 Sep 2018 22:32:44 +0000

In my previous post we have learned about flowcharting and it's structure. Don't forget, before you actually start programming you should ALWAYS start with a flow chart in case you get lost in your code. Think of it as your treasure map to Javascript gold.

In this post we are going to look at the syntax for JS and what pieces make up the code for JS.

Lets start by looking at Statements...

A statement is a group of words, numbers and/or operators that perform a specific task. Below is a statement:

x = y + 4

Some of you may be thinking, "hey, that looks a lot like algebra", and you would be correct. Their isn't much of a difference between this statement and an algebraic statement. As we progress we will see statements get much more involved. Now lets break down this statement and look at what makes up a statement.

Statements are made up of expressions. In the statement x = y + 4 there are 4 expressions:

4 is a literal value expression
y is a variable expression
y + 4 is an arithmetic expression
x = y + 4 is an assignment expression

The other type of common expression is a call expression, alert('Hey!'). This is an expression that calls a function.

The assignment expression x = y + 4 also contains operators. There are 2 operators in this expression. The "=" and the "+". An operator is anything that performs actions on variables and values. There are several types of operators:

Assignment Operator: =
Math Operator: + (addition), - (subtraction), * (multiplication) and / (division)
Compound Assignment: +=, -=, *= and /=. These combine a math operator with and assignment operator. (ie. x += 4 is the same as x = x + 4)
Increment/Decrement Operator: ++ and --. These operators either add one or subtract one from the variable.
Equality Operators: == (loose equals. This should rarely be used), === (strict equals), != (loose not equals. This should rarely be used) and !== (strict not equals)
Comparison Operators: < (less than), > (greater than), <= (less than or equal to) and >= (greater than or equal to)
Logical Operators: && (and) and || (or)

We also have types of variables in JS:

Number
String (this is one or more characters, words and sentences)
Boolean (true or false)

To establish variables we use the notation const or let. There is also var, but I have not learned when to use this yet.

Once we compile all of these parts into one we have what is called a block of code. The block of code consist of operators that make up loops and conditionals that instruct our program how to manipulate our variables.

Loops are a block of code that use operators to iterate through a list and perform an action until the condition specified inside the loop fails.

for (let i = 0; i < arr.length; i++) {
}

The word for identifies the type of loop (we have only learned about for loops thus far). The statements inside of the parentheses are the conditions in which the loop will run. Let i = 0 sets the variable i to 0, thus resetting the "counter" of the loop. i < arr.length tells the loop how many times to run. So, if the length of our array or list is 7, it will run our loop 7 times. i++ tells the condition how many increments to increase i for each iteration of the loop. This is the driving force behind a loop, it's what tells our loop to iterate through the loop.

Conditionals are statements that cycle through based on the equality/comparison of statements. They generally run through if/else statements where it cycles through all conditions until a condition is met and then it stops.

if (num1 === 7) {
    console.log('hey')
} else {
    console.log('bye')
}

In the conditional statement above if specifies that this is a conditional statement. The information in the parentheses sets the condition that must be met for the if statement to run. If the condition for the if statement is not met the else statement will run. Once the if or else statement have run the conditional stops and the JS moves to the next block.

The last thing I want to point about about JS syntax is commenting out code. If you want to leave a note about your JS code (which you should to help with readability and understanding of your code you can comment that code out by typing 2 back slashes (//) before the code you want to comment out.

//This is a block of code
for (let i = 0; i < arr.length; i++) {
    render(employeeList[i].name);
    render(employeeList[i].officeNum);
    render(employeeList[i].phoneNum);
    render('-----');
}

This covers the basics of JS syntax that I have learned thus far. Hope you find it helpful!

Until next time :)

My Journey through Javascript: Flowcharting Pt. 2

reduncan — Fri, 31 Aug 2018 18:15:53 +0000

Last post we looked at the basics of flowcharting and how to structure them. This post we will be expanding the basics and getting into more in-depth processes. So let's get started...

FLOWCHARTING Part Deux:

Remember from Part 1, the only real standard in flowcharting is that Loops/Conditionals are denoted by a diamond. With that being said, I do not follow this standard to a "T". In my own little OCD world, I prefer to have a different symbol for each part of my flowchart. So I will be using a diamond for Loops and a rectangle for conditionals. You can do it whichever way your prefer, but your company/employer may have different requirements. As long as you and other developers on your team understand what is going on, you are doing it correctly.

We will be looking at 2 separate flowcharts today, one using a Loop and another using a Loop and a Conditional. Let's start by looking at one with just a Loop...

We are going to flowchart a program that will take in an array of numbers from the user. The program will sum the numbers in the array and render the sum.

Step 1: Start (Start with Start like we always Start)
Step 2: We create an empty array and call it numbers
Step 3: We create a variable called sum and set it equal to zero (we must do this so we have something to begin adding to, otherwise we will add our first number onto itself and our sum will not be accurate)
step 4: We use a listener to obtain our first number (we are also creating the variable userInput1 in this step)
Step 5: We use a second listener to obtain another number (we are also creating the variable userInput2 in this step)
Step 6: We use push to add all of our user input numbers into our array
Step 7: Now we create our Loop, and inside of the Loop we specify the parameters in which the loop will run until it stops
Step 8: We have to add in an operator that will reassign the variable sum as we run our loop
Step 9: We render the sum of the array once the Loop has finished running

Here's what this will look like in an actual flowchart...

Now let's look at an example where we have a pre-made array of student names and their GPAs. We want to run a function where we look through the Object Array and find all students that have a GPA of 3.0 or higher and then render the student names.

Step 1: Start (Start with Start like we always Start)
Step 2: We have a pre-made Object List named studentList and inside of it we have object pairs for name and GPA (note we notate the object pairs in the object out to the right of the array box)
Step 3: We create our Loop that will run through our student list
Step 4: We use a Conditional to check that the student's GPA is 3.0 or higher (note this is inside of the loop)
Step 5: We create another variable, we will call it studentName inside the loop and set it equal to studentList[i].name
Step 6: We render the var studentName, note this is outside of the loop (if the render is inside of the loop, we would run into the issue of it rendering a value each time it ran through the loop)

Here's what this will look like in an actual flowchart...

You can see that this is a much more technical program than the previous one but the flowchart is somewhat easier to chart.

Next post we will take the 3 flowcharts we have created so far and get into the really fun stuff...CODING!

Until next time :)

My Journey through JavaScript: Flowcharting Pt. 1

reduncan — Wed, 29 Aug 2018 20:21:36 +0000

My first blog post :)

I have found through leading some study groups in my bootcamp that I reinforce what I have learned by explaining it to others. So I have decided to start writing blog post as well to further build on my understanding.

So here we go...

FLOWCHARTING:

When I first started flowcharting I HATED it! But it was a necessary evil at first and now it is something I do every time I start working through a problem. While there isn't necessarily a standard for flowcharting, what I understand is that the only standard is that loops/conditionals are labeled the same way across all flowcharts. Loops/conditionals are denoted by a diamond. Now that we have the boring stuff out of the way let's get to flowcharting!

Here is a very simple flow chart example (we will get into more difficult ones as we move further into this series). We want to take in 2 numbers from the user, add the numbers together and then render the result.

Step 1: Start (start with start like we always start)
Step 2: We will need two listeners
Step 3: These two listeners will take in two numbers one will be stored as input1 and the second will be stored as input2.
Step 4: We need an operator to handle the adding
Step 5: We need to render the result.

Now lets look at this in an actual flowchart...

In step 1 we added our start bubble so we know where our program starts. (In between step 1 and step 2 I went ahead and added an empty variable for my result so I can keep track of variables that I will need later on in the flowchart. You can also define this variable in step 4). In step 2 we added two listeners which indicate we need our program to ask the user for information. In step 3 we take the user information and store it in variables called input1 and input 2. Now that we have our user information we can move to step 4. In step 4 we use the variable result that was previously created (if you wanted to create your result variable in this step, the inside would be number: result = input1 + input2) and add an arithmatic operator to add the two user input variables together. In step five we render the result variable.

There you have your, albeit simple, flowchart. They get much more difficult as the task you need to achieve becomes more involved. In our next post we will dig deeper into flowcharting and look at loops and conditionals.

Until next time :)