Welcome!

Support circle 👩🏽‍💻

Week 3 - Project Gallery

Requirements

• Implement CSS Flexbox to create a responsive 1 Directional Layout
• Implement responses to user input in JavaScript using event listeners

• Understand the purpose and benefits of JavaScript functions
• Write JavaScript functions, using parameters for varying arguments

Flexbox

CSS Flexbox allows one-directional responsive layouts

This means you can add layouts to pages, in rows or columns

display: flex;
flex-direction: column;
justify-content: centre;

For getting started, check out:

• freeCodeCamp
• Flexbox Froggy
• Flexbox Zombies

Functions

A function can be defined as a set of instructions to complete a task

A function may take some input and return an output

The benefits of using functions

Define reusable code

Declare code which can be used more than once with different inputs to give different outputs

function addTwoNumbers(num1, num2) {
  return num1 + num2;
}

Modularise our code

Break our code up into sections based on its purpose

For example, if we were building a shopping cart, we might have separate functions to:

• Add an item to the basket when it’s clicked in HTML
• A function which adds up the prices of the items in the basket and returns the cost
• A function to clear the basket when the user completes a purchase

Help us understand our code

Having a well named function is easier to understand than a list of statements

For example, a meaningful name makes it easier to understand what the function does. A function that adds two numbers can be “addTwoNumbers”

Using functions

Step one: Declare the function

function myFunction(parameterOne, parameterTwo) {
  // What my function does
}

function multiplyTwoNumbers(numOne, numTwo) {
  return numOne * numTwo;
}

Step two: Call the function

myFunction(argumentOne, argumentTwo);

function multiplyTwoNumbers(numOne, numTwo) {
  return numOne * numTwo;
}

multiplyTwoNumbers(1, 4);
// returns 5