Coding Notes - freeCodeCamp

Cat Application Thingy

HTML elements have opening tags like < h1> and closing tags like < /h1>

• note: the tags do not have a space between < and h1

Text for an element goes between opening and closing tags

h1 to h6 elements signal importance. lower numbers are higher importance. only one h1 element per page

p element is used to create paragraph of text on websites

Commenting allows one to leave messages without affecting browser display and allows one to make code inactivev.

• HTML comment starts with < ! - - (no spaces) and ends with –>

HTML5 has some elements that identify different content areas. These elements hmake your HTML easier to read and help with SEO

• adding < main > (no spaces) after opening tag and < /main > (no spaces) after an element
  

Above, h2 and main p elements are "Nested" inside of the main element. These should be indented two spaces farther to the right of the element they are nested in. This is calle dindentation and is used to make HTML easier to read

Images can be added to website by using the img element. img elements have opening tag and no closing tag – these types of tags are known as "self closing tags"

Attributes in HTML are special words used inside of opening tag of an element to control its behavior.

• SRC attrib in img element specifies images URL

Alt attributes are displayed if image failes to load. All img elements should have alt attribute

Anchor (a) element links to another page

Link's text must be placed between opening and closing tags of anchor element

Text before anchor and after anchor will determine what gets hyperlinked

Adding target attribute with value _ blank (no space) to the anchor elements opening tab to make link open a new tab

To turn an image into a link:

Section element separates current content from future content

Adding a new section under the first section:

Adding h2 element in the second section:

Adding a third element:

ul element is unordered list:

li element is list item:

Adding new image after unordered list:

Figure element represents self contained content and will allow you to associate an image with a caption. To nest the image into a figure element:

A figure caption is used to add caption to describe images within figure element. The element is figcaption

em element is emphasize. To emphasize a word:

Adding another h3 element:

ol is ordered list element:

Add another figure element after the ordered list:

Nest another img element in the new figure element:

Add alt attribute to new img element:

Add figcaptionelement to new img element:

The strong element is used to indicate that some text is of strong importance or urgent. To make a word strong:

Add another section:

Add h2 element to new section:

Add a web form to collection information about users:

The action attribute indicates where form data should be sent:

Input element enables several ways to collect data from web form. Similar to img elements, input elements are self closing and do not need closing tags

The type attribute enables many kinds of inputs such as password field, reset button, or a control to let users select a file from their computer

Give a name attribute to assign it a value to represent the data being submitted

Placeholder texted used to give hint about what info to enter as input

the required attribute in an input element will make it so users cannot submit form without providing information that is required

The button element creates a clickable button

Something about type attribute, idk:

Radio buttons can be used for questions where you only want one answer out of multiple options

Label elements are used to help associate text for an input element with the input itself.

ID attribute is used to identify specific HTML requirements. each ID attributes value must be unique from all other ID values for the entire page.

Make new radio button

Do another thing:

And another thing:

fieldset eleemnt used to group inputs and labels together in a web form. these are "block-level" elements which means they appear on a new line

legend element acts as a caption for the content in the fieldset element. it gives users context about what htey should enter into that part of the form

add a new fieldset

do a thing:

Checkboxes are also things:

Am tired:

This one was a bit hard:

add name attribute

add another checkbox, for lazy instead of for loving

add another checkbox, this time for energetic, which I currently am not

more stuff:

make button options selected by default:

add a footer element:

add a p element (paragraph) to add some relevant info to footer:

make freecodecamp.org enclosed within anchor element pointed to site

Add head element above the body element, which contains all elements rendered to page

Add title within the head element:

set language to english

do a thing:

enable multiple languages

Introduction to JavaScript

comments

// is an inline comment that will tell JS to ignore remainder of text for current line

/* to open comment for a multi line comment and to close it is */

data types

JS provices eight different data types

1. undefined
2. null
3. boolean
4. string
5. symbol
6. bigint
7. number
8. object

variables

Variables allow computers to store and manipulate data dynamically. This is done through usin ga label to point to data rather than data itself. All 8 data types can be stored as variables; they should be thought of as similar to X and Y in math

Tell JS to create or declare a variable by putting the keyword var in front of it

• statments end with semicolons; variables can be numbers or letters but may not contain spaces or start with a number

Create "myName" variable:

in JS "=" is the assignment operator; we can store value in variable with it. Ex)

Another example:

• this code creates variable named myVar then assigns 5 to myVar. Now when myVar appears in the code again, the program will treat it as if it is 5

Assign the value 7 to variable a:

values of multiple variables can be assigned together though using the assignment operator (=) … ex)
var myVar;
myVar = 5;
var myNum;
myNum = myVar;

• this declared myVar with no value, then gives value 5, then declare myNum with no value, then gives myNum value of myVar

Assign the contents of variable a to variable b

Variables can be "initialized" in the same line that they are created. EX)
var myVar = 0;

• this creates myVar with value of -

Define a variable of a initialized to value of 9

Strings can also be defined as a variable. A "string literal" is a series of zero or more characters enclosed in single or double quotes. EX)
var myName = "your name";

Create two new string variables: myFirstNname and myLastName and assign them values of first and last name:

Variables have initial value of undefined. doing math on it will give you NaN result, "Not a Number"

Initializae 3 variables a b and c with 5 10 and "I am a"

case sensitivity

ALL VARIABLES AND FUCNTION NAMES ARE CASE SENSITIVE
MYVAR is not MyVar nor myvar. Possible that you have multiple distinct variables with same name but different casing

• strongly rec'd to not use this practice

camelCase is best practice. multi word variable names have first word all lower, then first letter of each subsequent word is capitalized. EX's)
var someVariable;
var anotherVariableName;
var thisCariableNameIsSoLong;

let and const variable creation

In larger codebases var can become troublesome due to how easy it is to overwrite variable declarations. new keywords introduced to declare variables

• keyword let is variable with same name that can only be used once
• keywork const is also new way to declare variables
  • variables declared with const are read only; they assign a constant value; values assigned with const cannot be reassigned

Always use const to declare variables that you don't want to re assign

• common practice of devs to use uppercase variable IDs for immutable values and cameCase for mutable values (objects and arrays)
  
  

numbers

Number is data type in JS for numeric data

• const myVar = 5 + 10;
• const myVar = 12 - 6;
• const myVar = 13 * 13;
• const myVar = 16 / 2;

numeric operators

The "++" operator can add or increment to a variable. Ex)

• i++; // is the equivalent of
• i = i + 1;
  
  
  
  

The "–" operator can decrement or decrease variable by 1. Ex)

• i–; // is the equivalent of
• i = i - 1;
  
  
  
  

Decimals can be stored in variables as well. they are called "floating point" numbers or "floats"

The remainder operator "%" gives the remainder of the two division of two numbers. EX)

• 5 % 2 = 1 because
• Math.floor(5/2) = 2 (Quotient)
• 2 * 2 = 4
• 5 - 4 = 1 (Remainder)

Remainder can be used to check if number is even or odd by checking the remainder of the division of the number by 2. Ex)

• 17 % 2 = 1 (17 is odd)
• 48 % 2 = 0 (48 is even)

Note: remainder operator is sometimes called the modulus operator; this is false; it is similar, but does not work well with negative numbers

compound assignment with augmented addition

common to use assignments to modify the contents of a variable. remember that everything to the right of the equals sign is eval'd first. Ex)

• myVar = myVar = 5 // this adds 5 to myVar

Opeartors which do both a mathematical operation and assignment in one step.

+= operator will do this. ex)

• let myVar = 1;
• myVar += 5;
• console.log(myVar); // 6 would now be displayed in the console

augmented subtraction

-= subtracts a number rom a variable. ex)

• myVar = myVar - 5; // this will subtract 5 from myVar
• myVar -= 5; // this is how to re write it

augmented multiplication

augmented division

escaping literal quotes in strings

strings must start and end with single or double quote. what happens when you need a literal quote inside of string?
to do this you can escape overarching quote with \ before each of the new quotes, to tell JS should appear inside the string as its own string. Ex)

• const sampleStr = "Alan said, "Peter is learning JavaScript".";
• Alan said, "Peter is learning JavaScript". // this would appear in console

quoting strings with single quotes

strings can be single or double quotes, but must be consistent per string. they work the same in JS, unlike other languages. ex)

• const doubleQuoteStr = "This is a string";
• const singleQuoteStr = 'This is also a string';

you might want to use one or the other based on if you want to use both in a string. might happen if you want to save a convo in a string and have the convo in quotes. another use for it would be saving an < a > (no spaces on that tag) tag with various attributes in quotes, all within a string. ex)

• const conversation = 'Finn exclaims to Jacke, "Algebraic!"';
  • this is a problem if you need to use outermost quotes within it
• const goodStr = 'Jake asks Finn, "Hey, let's go on an adventure?"';
• const badStr = 'Finn responds, "Let's go!"';
  • this will return error because no \ in front of the ' of let's
    
    
    
    
    
    

escape sequences in strings

quotes are not only characters that can be escaped inside strings
two reasons to use escaping characters:

1. to allow you to use characers you may not othersie be able to type out, such as a carriage return
2. to allow you to represent multiple quotes in a string without JavaScript misinterpreting what you mean
   
   

concatenating strings with plus operator

when + opeartor is used with a string value, it is called the concatenation operator. new strings can be built out of other strings by concatenating them together. ex)

• 'My name is Alan,' + 'I concatenate.'
• const ourStr = "I come first. "= "I come second.";
  • the string I come first. I come second. would be displayed in the console
    
    
    
    

plus equals concatenating

+= can also be used to concatenante a string onto the end of an existing string. this can be helpful to break a long string over several lines.ex)

constructing strings with variables

appending variables to strings

we can append variables to strings useing the += operator. ex)

• const anAdjective = "awesome!";
• let ourStr = "freeCodeCamp is ";
• our Str += anAdjective;
  • ourStr would have the value freeCodeCamp is awesome!.

find the length of a string

you can find the value of a string value by writing .length after the string variable or string literal. ex)

• console.log"Alan Peter".length);
  • the value 10 would be displayed in the console. note that the space between alan and peter is counted

bracket notation

this is a way to get a character at a specific index within a string. JS + most languages start counting at 0. this is called zero based indexing. ex)

• index 0 of the word charles is C
• if const firstName = "Charles" then you get value of first letter of string with firstName[0]
• const firstName = "Charles";
• const firstLetter = firstName[0];
• firstLetter would have a value of the string C

string immutability

string values are immutable – they cannot be altered once created. ex)

• let myStr = "Bob";
• myStr[0] = "J";
  • this cannot change change value of myStr to Job because myStr cannot be altered

the only way to change myStr would be to assign it with a new string. ex)

• let myStr = "Bob";
• myStr = "Job";

bracket notation to find the Nth character in a string

can be used to get characters at other positions than 0
remember computers start counting at 0

bracket notation to find the last character

subtract one from the strings length

bracket notation to find nth to last character

word blanks

ex) const sentence = "It was really " + "hot" + ", and we " + "laughed" + " ourselves " + "silly" + ".";

NOTE: console.log(wordBlanks) was used in order to display the value of wordBlanks which helped me figure out where the spacing issues were on the code

Javascript Arrays

with array variable several pieces of data can be stored in one place

Array nesting is a thing

Access Array Data with Indexes

Modify Array Data with Indexes

• arrays are mutable!
  
  

Multi Dimensional Arrays with Indexes

push() function

push makes appending data to end of an array easy
function is .push()

• it pushes one more more parameters on to the end of an array

pop() function

this can also be used to manipulate data in an array
basically it will take the last element of an array and then return it as a re assigned variable

shift() function

pop function always removes the last element of an array
shift will remove the first instead of last
.shift()

unshift()

unshift is like push except it adds stuff to the beginning of an array rather than to the end of one

Shopping List Challenge

Functions

code can be divided up into reusable parts called functions

Values to Functions with Arguments

Return Value from a Function

Global Scope and Functions

scope is the visibility of variables
variables defined outside of a function have global scope
this means they can be seen everywhere in JS code

• declared variables without let or const automatically created in global scope
  
  
  
  

Local Scope and Functions

variables declared within function and function parameters have local scope.

• only visible within that function
  
  
  
  
  
  

Global vs. Local Scope in Functions

Undefined Value Returned from a Function

Assignment with a Returned Value

Stand in Line Challenge

Boolean Values

these may only be true or false in their value
basically on off switches. true is on; false is off

Conditional Logic / If Statements

Equality Operator

Strict Equality Operator

Practice Value Comparison

Comparison with Inequality Operator

Strict Inequality Operator

Greater Than Operator

Greater Than Or Equal To Operator

Less Than Opeartor

Less Than Or Equal To Operator

Comparisons with the Logical And Operator

Comparisons with the Logical Or Operator

Else Statements

Else If Statements

Logical Order in If Else Statements

Chaining If Else Statements

Golf Game Challenge

Selecting from Many Options with Switch Statements

Adding a Default Option in Switch Statements

Multiple Identical Options in Switch Statements

Replaccing If Else Chains with Switch

Returning Boolean Values from Functions

Return Early Pattern for Functions

Counting Cards Challenge

JavaScript Objects

Accessing Object Properties with Dot Notation

Accessing Object Properties with Bracket Notation

Accessing Object Properties with Variables

Updating Object Properties

Add New Properties to a JavaScript Object

Delete Properties from JS Objects

Using Objects for Lookups

Testing Objects for Properties

Manipulating Complex Objects

Accessing Nested Objects

Acessing Nest Arrays

Record Collection Challenge

• I had to cheat on this to pass challenge and have no idea wtf this means >.<

Iterate with JavaScript While Loops

"While loops" run when specified condition is true and stop when that condition is no longer true