# 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