Forem: MarceloVarela22377

So Functions and Methods are the Same?

MarceloVarela22377 — Mon, 18 Jan 2021 02:14:13 +0000

The Prologue ... Duh! Doh! Duh!

That was supposed to be like that scary beat drop from the movies... nevermind.

Hello and Welcome, my name is Marcelo Varela, and I'm here to guide you in your journey to being a coding master through these blogs. If you see one of my blogs that triggers curiosity or one that you think can help you in a crunch, don't hesitate to check it out!! In this blog I'm going to let you in on a little secret in JavaScript! That secret is... and you'll know why by the end of this blog.

Lets first learn about some functions and some different types of them.

Functions

Ok lets hop right into this cart on drive into functions.

First off we got to learn what a function is. So what is a function? __A function in programming is a block of code that can be used throughout the entire code. But there is a catch to this, first lets tell you the 4 different types of ways to write a function.

1. Function Declerations

Ok so as we end the first lap the #1 car (Declarations) are your basic functions that can be placed anywhere in the code and be activated if called upon like shown here

racer1();

function racer1(){
  console.log("Im going for 1st place in today's race");
}

racer1();

Both the racer1 above the function and below it will work and return the indicated portion to the console/terminal.

2. Function Expressiosns

Here is where that exception from earlier comes in as the #2 car (Expression) finishes lap 2.

In this type of function it MUST be written above or before the calling of the function. If the function in this form is put below the calling, an error will occur in the console/terminal. An example of how to write the Function Expression is shown below:

const racer2 = function(){
  console.log('Should I try to pass Mickelson on the next turn' );
}

racer2();

If the function is not above the calling in this format of the function, then it will error in the console/terminal

3. Function Arrows

Trying to pass car #2 on the final turn of lap 3 is car #3 (Arrows).

Function Arrows are just another way to write your functions, they must be placed before the calling just like Expressions like shown below.

let racer2Name = Clyde;
const racer3 = () => 'Im going to pass', ${racer2Name}, ', I know it';
console.log(racer3)

Keep in mind that these are just multiple ways to write functions. I could've used any if the previous functions to get the same result in the console/terminal if I just rewrote the code inside the function to the specific formats.

Methods

As were nearing the end of lap 4 car #4 (Methods) has decided to come up from behind and show he is also able to keep up with the group.

So... ready for the secret I said at the beginning of the blog? Well here it is: Methods... ae just another way to wrote functions. :):) All they do is just give the function an ability or a certain thing to do when entered into the console/terminal. Examples include .length , .toUpperCase. Here is an example of a method.


let name = Kirito 
racer4 = name.toUpperCase();
console.log(racer4);

.forEach Method

Another notable method is the .forEach. This method will, when called upon, log all available lists of terms that are available in the function. Here is an example of how you would this:

let mainCharecters = ['Kirito', 'Clyde', 'Natsu', 'Gon', 'Kiliua', 'Asuna', 'Lucy']

const powerMode = (mainCharacters, index) => {
  console.log('${index} - My name is ${mainCharacters}')
}
mainCharacters.forEach(powerMode);

The End... Vrrm! Vrrm! Vrrm!

Do you hear this one, the noise effect I mean. Ok well I guess I might as well tell you how the race ended. It was a four way tie. Each of the cars or Functions reached the best function at the same time. Meaning they are all important to use and that none are more important then the other. In the end not comes to preference on which and when to use them.

For review in this blog I covered for you:

What Functions are,
the 4 types of functions: Decelerations , Expressions, Arrows, and Methods,
and a specific type of method known as .forEach.

Thanks again for popping in and checking out this blog. If you want to talk you can interact with me in the comments and we an talk. If you have tips or questions, lmk in the comments and ill try my best to answer questions. Have a great day or evening!!! See you in the npxt one!!!

Resources

That object over there looks interesting

MarceloVarela22377 — Mon, 18 Jan 2021 02:13:47 +0000

Controller Gang says "Hello" and Welcome

Hello, my name is Marcelo Varela and I am here to guide you on your journey to becoming a coding Master. In my last blog we talked about functions and methods, and today will be talking about ...

Objects!!

Ok, so what are objects? Objects are: a phone, a desk, a shoe. These are all objects and they each have properties and things they can do. Take the phone for Example:

/*
 ______________
 /              \ 
 |  Im A phone  | It has properties of:         Along with things it can do:
 |              | * colors                    * ring
 |              | * size                      * take a picture
 |              | * model                     * play music
 |              |
 |              |
 \ ____________ /
 */

Phones are great examples of objects because of these traits they have. But how do we show objects and all the stuff that goes with them? So how do Objects work in JavaScript you may ask? Well let me show you.

First off we have two different types of objects: Object Literals and Math Objects.

Object Literals

Objects in general are made up of variables that have attributes for example.

let controllers = {
  consoleLinkedTo: 'XboxOneX',
  controllerColor: 'Ocean Blue',
  controllerTypes: 'elite', 'regular',
}

Then log to the console using the command:

console.log(controllers);

if you wish to log certain attributes of an object, you need to use: .(attribute) command shown here:

console.log(controller.consoleLinkedTo)

The above piece of code is an example of a literal object and their calling to the console.

We can also add methods or internal functions to the attributes inside the objects shown here:

let controllers = {
  consoleLinkedTo: 'XboxOneX',
  controllerColors: 'Ocean Blue','armyGreen','White', 'Black'
  controllerTypes: 'elite', 'regular',
  rightTriggerTap: function (){
    console.log('controller user has tapped right trigger button and fired their weapon');
  },
  leftTriggerTap: function (){
    console.log(`controller user has tapped left trigger button and used their weapons scope`);
  },
}

Math Objects

Math objects are internally defined commands that can be used to implement mathematical properties into code. Some types of Math objects include:

const areaOfController = 6.7in;

console.log(Math.round(radius);

Other Math commands include the implementations of .PI and the numerical value .E using:

console.log(Math.PI);
console.log(Math.E);

Another fun tool ia the .random tag which will grab a random whole number from whatever your boundary number is shown here:

console.log(Math.random * 500))

Too many enemies, need to regroup!!

Let me review what we went over in today's blog:

first we learned what an object is,
second we learned the two types of objects(literal objects and Math Objects
We also learned how to implement internal functions and methods into our code.
Finally after writing the code we leaned to call them using console.log

Thanks for Reading, controller gang thanks you!

I hope you learned something from this blog and I hope you have a great rest of your day or night. If you ever need help with anything else, don't shy away from shooting me a message down in the comments below.

References

Udemy-

https://www.udemy.com

VSCode-

https://code.visualstudio.com

IronHack Info Doc.-

https://docs.google.com/document/d/1AOAFfkGFjcpUicEB-5pXbGsl53Nib8YoZDCA--A1z8o/edit?

Dev.to
https://dev.to

My precious, I want to Control the Flow of my precious

MarceloVarela22377 — Mon, 23 Nov 2020 14:35:40 +0000

Do you want to Control the Flow of your precious code?

Hi, my name is Marcelo Varela and I'm going to lead you through a short guide on how to do just that in your journey of javascript. So if you're ever in a bunch and forgot how to write something that has to do with Control Flow, never fear because this blog is here!!

Ok now let the fun begin as we dive on in!!

Control Flow

I have said this term once already and hinted at it all over the intro, but what is it? Control Flow is a term used to describe a group of items that effect variables in javascript. The group includes:

//Loops include: 

for(something){

}
while(something){

}

//and 

do(somehting){

}while(something)

//statements include

if(something){

}

if(something){

} else if(something) {

} else(something) {

}

//and 

switch(something){

}

Loops

loops can be useful for the lazy person who doesn't want to rewrite their code multiple times. Just Kidding, well not really, but you get the point, I hope... Looping is actually a very cool and time saving attribute javascript has. Being able to repeat multiple lines of code using only a couple lines of code is very useful.

So like what are the types of Loops?

At the start we saw 3 types of loops, which were: for loops, while loops and do...while loops

The `For Loops` repeats a function however many times the condition sees until it is false. In a `for loop` there are 4 parts:

the variable is: (i = 0;)
the condition is: (i < 8;)
the final expression is: i++
and your output is: console.log('golfers')

for(i = 0; i < 8; i++){
console.log('golfers');
}

The `While Loop` is quite similar to the regular `for loop`__, in fact it has all the same attributes or pieces. But it is formed differently.

const golfers = {"marcelo", "andres", "lance", "hudson", "hans", "sebastion"}
let i = 0;
while(i <golfers.length;){
  console.log(names[i]);
  i++;
}

The last loop function is the `do...while loop`

const workout ={'20 pushups', '1 minute plank', ' 3 dumbell sets', '12 mile Bike Ride'}
do{
  console.log('you still need to do ', workout);
  i++;
} while (i < workout.length)

Statements

All right we got 3 types of these things we all say: Statements. Statements are used to act on true and false situations. Confusing right? Just think of it like saying if I grab the bag then the bag will be lifted. That's the concept. Yea weird how an awkward explanation could mean something so trivial and obvious. So let's get into the names of our items inside the grocery bag so we can start cooking the code.

For today we will be cooking:

`if statements` which tell us what to do if a certain condition is true or false.

const breadColor = 'golden brown';

if(breadColor = 'golden brown'){
  console.log('then the bread is fresh')
}

Next we are serving `else if statements`

const breadColor = 'dark green';

if(breadColor = 'golden brown' || 'brown'){
  console.log('then the bread is fresh')
} else if (breadColor = 'dark green'){
  console.log('bread is molded')
} else {
console.log("that's some weird bread")

The || means we OR, and if you see && it means AND

The final dish for today's main course is switch statements which is another way to say long lists of else if statements in a cleaner way.

const taste = 'sweet';

switch(taste){
  case 'sweet':
    console.log('your food is sweet');
    break;
  case 'sour':
    console.log('your food is sour');
    break;
  case 'bitter':
    console.log('your food is bitter');
    break;
  case 'spicy':
    console.log('your food is spicy');
    break;
  case 'salty':
    console.log('your food is salty');
    break;
  default:
    console.log('your food is bland');

Notable Mentions

Two other things that are important are continue and break

`Continue` is that stain on your shirt you don't want to be seen, or a skip button.

const ballmph = {99, 102, 87, 67, 89, 92, 96, 101}

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

  if(ballmph[i] === 67){
    continue;
  }
  console.log('you threw ', ballmph[I], 'mph')
}

`Break` is your hold up wait a minute your the one I want or the only important one and disregard the others.

const ballmph = {99, 102, 87, 67, 89, 92, 96, 101}

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

  if(ballmph[i] === 102){
    break;
  }
    console.log('you threw the fastest pitch of' , ballmph[i], 'mph')

}

Well we learned a lot about loops and statements along with their uses. Along with that we learned about the uses of && in statements, || in statements, about break's uses and continue's uses.

Thanks for taking the time to read this blog. I hope you have a great day, afternoon, evening or night and I hope that this helps you along in your journey to be a coding master!!

Resources:

https://code.visualstudio.com

https://www.w3schools.com

https://www.udemy.com

https://docs.google.com/document/d/1djb1VATZFbmPwWoLPjwB1MrzYmyxqg3RMUCHKy1f5CI/edit?usp=sharing

What is Flex Box and what is its function?

MarceloVarela22377 — Fri, 23 Oct 2020 01:48:45 +0000

Flexbox, Flexbox, Flexbox

My teammates for this website were Daniel Valle and David Vina. It was a good experience learning and using flexbox, and so this blog is my way of passing on this information to others. Enjoy!!

How do we layout a website using code

Before flexbox was made and became widely used, four other systems were used to program the layouts of websites. These four layout systems were Blocks, Inline, Table, Positioned:

So why do we need flexbox?

Well, flexbox basically allows us(developers) to use all the previous mentioned systems and turn them into one system with multiple elements.
These elements of the flexbox system include:

Flex-Direction: which provides the direction of where the containers information will be positioned. Some direction commands include: Column, Column-reverse, row and row-reverse.
Flex-Wrap: decides wether the container items should wrap or not. Commands include: wrap; nowrap, and wrap-reverse.
Flex-Flow: Combines both flex-direction and flex-wrap into a single command strip or segment.
Justify-Content: is used to align the items inside the container in specific ways. Commands Include center; flex start; flex-end; and space-around;
Align-Items: aligns flex items. Included Commands are: center; flex-start; flex-end; stretch; and baseline;
Align-Content: space-between; space-around; stretch; center; flex-start; and flex-end;

There are also propertied for the items to personalize them even more. The flex item properties are:

A. order
B. flex-grow
C. flex-shrink
D. flex-basis
E. flex
F. align-self

Flexbox replaces the more complicated systems and provides a simple and easier way to auto reposition elements!! Ok!! Now that we'e gotten all the boring definitions out of the way, lets actually use it!!

Ok so how do you start using it?

1st Step:

Lets make a design of what we want our website to look like. (My team and I used www.figma.com for our design) So for our website, my partners and I decided to do a concession stand online store from our school.

This is what our brainstorm of the website looked like:

The Products Page

This is where most of the flexbox was used, designing the layout of the products page and completing the Navbar.

2nd Step:

Next once you are happy with your designs you will go on to start coding the actual website. We used www.repl.it for our website, but you can use any programming site or library you want!!!

#navbar1{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  border: black solid 3px;
  position: sticky;
  top: 0;
  padding: 10px;
  margin:50px;
  background-color: #BDB200;
  border-radius: 10px;

#products-box{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  text-align: center;
  font-size: 20px;
  top: 0;
  background-color: #BDB200;
  border-radius: 15px;
  border: black solid 3px;

These were two snippets from our code where we used Flexbox and its capabilities.

3rd step:

In this step we get to see the finished product. after hours of time and effort your website is completed.

To look at the website, You can use this link:

https://flexboxwebsite.danielvalle2340.repl.co

To view the code use this link:

https://repl.it/@danielvalle2340/Flexboxwebsite#index.html

Well, now You know how the Flexbox system works and can use it in your future projects like we did. I hope that you enjoyed this little blog and have a great day!!