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

undefined
null
boolean
string
symbol
bigint
number
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:

to allow you to use characers you may not othersie be able to type out, such as a carriage return
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