DEV Community: coses23298

Form Events

coses23298 — Sat, 06 Feb 2021 15:20:42 +0000

Events Inside Forms

Events inside forms are exactly what they read. Its an even that happens by interacting with the inside of a form

Submit Events

Submit events are events in a form that turn in information from it, like a username and password.
there would be a lot of HTML here so am just going to put the JavaScript and explain what the HTML is

const form = document.querySelector('.signup-form')

form.addEventListener('submit)

so all we have right now is that it notices when you submit something but it wont tell you what it submits because it reloads
so lets make it not reload were also going to make it store a username from the form

const form = document.querySelector('.signup-form');

const username = document.querySelector(#username);

form.addEventListener('submit', e=> {e.preventDefault});

so as I said this code will now save the username and not reload the page which the e.preventDefault will do (for not reloading) and the username const saves the username
we can see what the username is by just typing

console.log(username.value)

Testing RegEx Patterns

now we're going to learn how to use patterns to make sure the usernames are correct
so lets make a pattern to make it so that you cant add special characters and it has to be a certain number of letters long

const pattern = /[a-z] [6,]/
let result = pattern.test(username)

this will make the pattern saying it needs to only be letters and have more than 6

CES conference

coses23298 — Sun, 24 Jan 2021 05:01:35 +0000

Home appliances

In terms of cleaning LG has developed something they call TrueSteam technology where they use steam to clean clothes and dishes.
LG has made a refrigerator that has a small glass window to see what you have inside. also a pretty cool part of it is that its a touchable screen so you just knock twice and it lights up.
The main thing with the fridge is to keep cold inside to make it more effective. by making it so that you don't have to open anything to look in the fridge it keeps cold in.
they have also made the ice maker smaller and make circular ice instead of cubed
they have created a washer and dryer that can tell the cycle you want by the feel of the fabric using AI that learns preferred settings and since the washer and dryer are together the two machine communicate to say what should be done for the clothes
The first home appliance release from Samsung is more focused on lifestyle and its a 4 door fridge that is meant to fit the style of your home. the fridge is meant to be more organized with specific sections

TV's

LG has also come out with a TV so thin it looks like a line from the side. they have also given the TV AI that is capable of making it so that letters and background images and things in different positions like that are processed differently
It auto switches volume so that you don't have to get up when you switch channels you don't have to figure out the correct volume
they also made it much easier to screen mirror from a phone to a TV and vice versa
there us now a game section in options for the TV based on game genre

Vacuums

LG has developed a vacuum that has no cords and has 5 part filtration system. it is supposed to take out most of the allergens and make a cleaner house
Samsung has developed a new vacuum that goes around on its own but the big selling point is the new AI. the new AI is able to detect any object that might be in the way of the vacuum so that it can go around it. they advertised it as being able to see small objects as well so that it doesn't get caught in cloth or some other thing you might've left

Air purifier

The first thing starting off from LG is new home appliances. First is the LG Puri air which is advertised to take out pollution and allergens from the air. It can be a small room, bug office, or hand held device.
One thing they have done is put the Puri air into a mask so you can wear it on the go.
the handheld one is for you to put it down anywhere you go. which is much better than what I thought (to just put it up to your mouth when you need it).

AI

LG has made a hub to connect all of its devices onto one thing so that they can communicate. this means that if you own all of the LG products in one house you can have almost an entire smart house that learns your preferences
Samsung gave a little sneak peak into their facial recognition software by making the hosts face change the face of the Mona Lisa. I've seen software like this before but I feel this is one of the best ones. they have also developed object seeking AI for vacuums so that they don't bump into anything

DOMs

coses23298 — Sat, 16 Jan 2021 16:20:11 +0000

Interacting with the Browser

Interacting with the browser is the best part of JavaScript (in my opinion)
In this section we can learn how to change CSS styles or react to the user clicking and also make annoying popups show up

The DOM Explained

DOM is Document Object Model
it adds changes and removes information from websites
DOM makes it so there is an object "Document" which is everything that shows up in HTML that can be used in JavaScript
If you open the document object in JavaScript you will see a copy of the entire website planted into JavaScript. This is how it's able to change things within HTML, by making a copy of the website and communicating with it

The Query Selector

The query selector is made to reach into the DOM and find the element that you want to get the handle or tag of
you would usually edit the handle/tag but for this section im going to focus on just getting the handle

First lets make out HTML website to see what we want to reach into

<div>
<p>Hello world</p>
<p>lorem ipsum</p>
<p class = "error">this is an error message</p>
</div>
<div class = "error">this is an error</div>

first lets grab the sentence that says "hello world"

const para = document.querySelector('p')
console.log(para)

the query select command says that within the document it should find p
and with this it will find the first p that shows up and show that. but what if we don't want to just the first p what if we want to grab the p with the class of error

const para = document.querysSelector(.error)
console.log(para)

this here will show the first thing that shows the class error
the period before the error makes it so that it knows its a class
but now I want the div tag with the class of error

const para = document.querysSelector(div.error)
console.log(para)

the div before .error will tell it to look for a div and then tell it that it must have the class of error

Adding & Changing Page Content

now lets say I want to change the text or HTML inside elements
so first lets get out HTML

<div>
<p>Hello world</p>
<p>lorem ipsum</p>
<p class = "error">this is an error message</p>
</div>
<div class = "error">this is an error</div>
<div class = "content">
<p>This is content</p>
</div>

so now that we know what we are taking from see how we change it
im going to be changing the first p tag in my html

const para = document.querySelector('p')
para.innerText = "Hows your day been?"

the .innerText is showsing the inner text of the p so if we type out

const para = document.querySelector('p')
console.log(para.innerText)

it will just show the text within p

changing the HTML is almost the same

const para = document.querySelector('p')
para.innerHTML = <p> this is changed now</p>

Getting & Setting Attributes

before I explain how to get and set attributes im going to show some HTML

<h1>The DOM</h1>

<a href= "google.com">link to a website</a>

<p class = "error"> This is an error message</p>

so this is our html but lets say I want to change the link
so lets change it

const link = document.querySelector('a');

console.log(link.getAttribute('href'));
link.setAttribute('href', 'https://www.youtube.com');

next I'm going to show you how to show a specific attribute so we can change it from there

const mssg = document.querySelector('p');

console.log(getAttribute('class'))

now that we have the class its time to change it

msg.setAttribute("class", "success");

and like that it went from an error to a success

Changing CSS Styles

For changing CSS styles we need some new HTML

<h1 style = "color: orange">The Title</h1>

now we have some simple HTML and now we want to change the color of The Title to blue through our JavaScript
lets see how

const title = document.querySelector('h1');
title.setAttribute('style', 'color: blue')

note you can put any CSS in that section but it will replace anything written beforehand
but another important thing is that we can go even deeper into specifics

const title = document.querySelector('h1');
title.style.color = 'blue'

and so this will only change the color and nothing else
also it can work with any style attribute not just color

Event Basics (click events)

Now we are going to see how we can make JavaScript events go off from clicking
the HTML wont be shown for this section because of the length of it but I will explain the events happening

const bttn = document.querySelector('button');

button.addEventListener('click', () => {
console.log('you clicked me');
});

so the object button will be listening for an event. The event being click. whenever it "hears" a click it will put in the console you clicked me
any JavaScript can be written here
this doesn't only work with buttons. anything that can be held in a variable can have a event happen with them

Creating & Removing Elements

this will be a shorter section
to put it simply using the '.remove' on something will remove it so

const bttn = document.querySelector('button');

bttn.addEventListener('click', () => {
bttn.remove();
});

would make it so that when you push the button the button would disappear
and for adding we can use the '.innerHTML' command to make it so that another element is added

Objects in JavaScript

coses23298 — Fri, 08 Jan 2021 20:10:37 +0000

Intro

Objects are a collection of properties

let james = {
name: 'james';
age: 30;
email: 'james@jamesmail.com';
location: 'Britan';
}

so as you can see james here has multiple properties and that makes him an object.
we can also put strings equal things within objects

let james = {
name: 'james';
age: 30;
email: 'james@jamesmail.com';
location: 'Britan';
"Cup o'": 'joe';
}

Accessing values

to access all the values is not that hard its just

console.log(james)

and all of the values will show up
but lets say you only want to access one of the values and not all of them. well we use dot notaion for that

james.name
james.age

this will show just the age and just the name

Adding Properties to an object

By using dot notation we can add variables

let Guitars = {
  Strings: 6;
  in stock: 70;
}

guitars.type = "acoustic";

Bracket notation will also work
bracket notation is just dot notation but with different syntax

let Guitars = {
  Strings: 6;
  in stock: 70;
}

guitar["type"] = "acoustic";

in the same way you can update certain properties and change them with dot and bracket notation

let Guitars = {
  Strings: 6;
  in stock: 70;
}

guitars.strings= 7;

removing properties

using the keyword "Delete" you can delete certain properties

Property check

Checking for properties within objects is pretty easy with the command

prop in objectName

within this you can check if a object has a certain value
so lets check in james

age in james

this will show up as true because the variable age shows up in the object james

For properties in const we have a strange result
putting

const Guitars = {
  Strings: 6;
  in stock: 70;
}

guitars.strings= 7;

this will cause an error, trying to change one of the variables but

let Guitars = {
  Strings: 6;
  in stock: 70;
}

guitars.type= "acoustic";

we can add properties to it with no problem

Functions & Methods

coses23298 — Sat, 05 Dec 2020 20:53:41 +0000

What are functions

functions are one of the most important parts of coding in any programming language. They fall under the objects section which we know are: arrays, object literals, functions, dates, etc..
Functions are like a box with some code in it. The function can activate whenever some certain thing happens. You can call a function to turn on as many times as you want.

Function Declarations & Expressions

Lets start off by making our own function

function greet(){
console.log('Hello there!');
}

Starting off we can see the functions name is 'greet'. Important thing to note is everything in the {} is the code, the curly braces tell where the block of code is. inside the block of code its just saying to put out 'Hello there!',
But if you type that in you wont see it anywhere. we need to call the function so it runs.

greet();

The brackets call the function and the word 'greet' tells that the greet function is the one called.
Once the function is called it shows up in the console
Something you may not know is we can call a function using a variable

const speak = function(){
console.log("What's up")
};

Here you can see the constant 'speak' has a value of a function. So whenever the function is called it will put out the function which will say "What's up" and to call this function is the same way we do with any other function

speak();

Functions are read out before anything else in the JavaScript so it knows to use it later, unless you make a function that is the value to a variable then it will read it in the order give.

Arguments & Parameters

Sometimes we have to pass values into functions. So lets say you want to say hi to someone using their first name. well lets see how that would look

const greet =function(name){
console.log(`Hello ${name}`)
}
greet()

This comes out as 'Hello undefined'. which is not a name (yet) so what we have to do is pass a value into the function to do this is pretty simple

greet('james')

By putting the name in greet we make the variable 'name' = 'james'. The variable will not work outside the function unless you give it an outer value
we can put in multiple values but it gets a bit strange

const greet =function(name, time){
console.log(`Hello ${name} it is ${time}`)
}
greet('james', 'morning')

Multiple variables are read from left to right. so in the function() you have to see the order of variables and give values as needed. The order of variables does not affect anything within the {} because that is the block of code that will be output
another way of setting values in functions is with equals

const greet =function(name = 'james', time = 'night'){
console.log(`Hello ${name} it is ${time}`)
}
greet()

if you give value to

greet()

it will replace whatever value you may have put into the function

Returning Values

We can have functions return values. We can also give functions values to store and used later. An example is it storing measurements of some object. so lets find the area of a circle

const calcArea = function(radius){
let area = 3.14 * radius**2;
console.log(area)
}
calcArea(5);

With some math we can see the area is 78.5 but lets go over what we told the code to do. First we said that the function will output the area. then we told it the area is 3.14 times the radius to the power of 2
and in the bottom we said the area was 5
The problem is that the area only works within the function despite it being a const
So in order to bring it back we use the keyword return and our code looks like this

const calcArea = function(radius){
let area = 3.14 * radius**2;
return area
}
const area = calcArea(5);

now in the system it knows what the area is. In the constant area we know that it will equal the calcArea
it is much easier to directly return the variable by cutting out some fat and having a smooth function like so

const calcArea = function(radius){
return 3.14 * radius**2;
}
const area = calcArea(5);
console.log(area)

Arrow Functions

arrow functions are just like a better way of making functions. lets take our area calculator function and make it into a arrow function

const calcArea = (radius) => {
return 3.14 * radius**2;
};
const area = calcArea(5);
console.log(area)

as you can see there are a lot of elements removed. the '=>' is our arrow in arrow function. in this code we are saying the same as the original. what is 3.14 times the radius to the power of 2. we can simplify this even more so. if you have only one parameter (variable) you can take away the parenthesis. if there is more than one variable or less than one variable you have to have the parentheses

const calcArea = radius => {
return 3.14 * radius**2;
};
const area = calcArea(5);
console.log(area)

since we only have one return in there we can make it even shorter to a point where the function takes one line

const calcArea = radius => 3.14 * radius**2;
const area = calcArea(5);
console.log(area)

and there it is. in calc area, function radius, 3.14 * radius**2.
this is a much easier way of making functions and it cuts down on a lot of space that might be hard to read.

Functions vs Methods

The difference between a method and a function is the way they are defined
lets start off with a simple arrow function and store its results

const = greet = () => 'hello';
let resultOne = greet();
console.log(resultOne);

Lets compare this to a method which uses dot notation

const name = 'james'

let resultTwo = name.toUpperCase()
console.log(resultTwo)

this is still a function telling it to say name which is 'james' and put it into uppercase
you can see that dot notation is much simpler where instead of a full equation for a function we just state what it needs to do.
in both cases we use parenthesis and in both a command is made

Foreach Method & Callbacks

We can make a function that has a function within it. this is called a callback function
lets see an example

const myFunc = (callbackFunc) => {
//this is where we tell it to do something
let value = 50;
callbackFunc(value);
};

myFunc(function(value){
console.log(value)
});

so as you can see we have created our function 'myFunc' and called it back in myFunc() but we're passing in a function as an argument. and telling it to output the value.
lets turn our callback function into a arrow callback function so that there is less clutter

const myFunc = (callbackFunc) => {
//this is where we tell it to do something
let value = 50;
callbackFunc(value);
};

myFunc(value{ console.log(value) });

Lets use methods for a moment. I'm going to create an array of strings and run the forEach method on it which will iterate

(i looked it up it means to read over and over)

the list

let things = ['book', 'car', 'shoe', 'cup', 'doll']

things.forEach(function(){
console.log('something')
});

what this will do is when the array is read over for every item read the function will go once. there are 5 things in this array so it will say 'something' 5 times
if we put our array in as the variable of the function instead it will read out every thing individualy

let things = ['book', 'car', 'shoe', 'cup', 'doll']

things.forEach(function(things){
console.log(things)
});

this can also be turned into a arrow function and can have more than one variable for the function much like things we've already gone over

Control Flow Basics

coses23298 — Sat, 21 Nov 2020 21:23:16 +0000

Control Flow is a way to cycle through and preform code 'for' each part of an array then control flow is the way to do it. It creates conditional statements to help have different variables have different outcomes.

For loops

for(let i = 0; i < 5; i++){
console.log('in loop:', i)
}

This is a simple loop, what loops are supposed to do is go around and around a certain number of times.to make a loop we need the key word 'for' in the beginning then we put parentheses.
The curly braces decide where the block code is 'for' the loop

Inside the parentheses we have 3 different things

We start off with a variable saying that i is going to be equal to 0. this variable keeps track of how many times it's gone through the loop.

Next were asking "is i < 5" if so then it loops again. each time it loops i increases by one value until it is equal to 5.
The i++ is the part of the code that decides it to add one each time, without that it would never add up and the loop wouldn't work.

Lets say you want to know how many things there are in a list. you can create a loop to count each one individually,
so we start off with a constant that has a list

const names = ['Theodore','Henry','Rango'];

for(let i = 0; i < names.length; i++){
console.log(names[i]);
}

this code will tell you the length of the variable names, it will start from the number 0 so it'll go 0, 1, 2. keep in mind of that

While loops

Now we're going over a different kind of loop a while loop. There is no real difference between while and 'for' loops, the only difference is how its written.

let i = 0

while(i < 5){
console.log('in loop:', i);
i++;
}

so instantly you can see that most of the parts of the 'for' loop are moved outside, the variable has been moved to outside of the loop and the addition of i++ is now underneath. this is because in order for a while loop to work the variable you choose must already exist and at the end of the loop it will make sure to count that its done it once

Next we can see a while loop where you can see instead of the number of items in a list, the items within the list

const names = ['billy', 'bob', 'joe']
let i = 0

while(i < names.length){
console.log(names [i])
i++;
}

what will come out of this is the names of the people in the list but not the number of people.

Do while loops

Do while loops are a extension of while loops
the do while loop means that if i < 5 is your limit it will instead make it so that i is less than OR equal to 5, so it will run 5 times instead of just 4

let i = 0;

do {
   i;
  i++;
}
while (i < 10);

what will come out is
0, 1, 2, 3, 4, 5, 6, 7, 8, 9.
Notice it wont show the number 10 but still 10 items come out.

If statements

If statements are conditionals so, If ____ is true then ____, so what will happen is a code block will only activate if the condition is true,
the code does not loop it just happens one time or zero times.
lets make an example

const age = 19

if(age > 20){
console.log('You are over 20 years old')
}

if(age < 20){
console.log('You are under 20 years old')
}

The top code is asking is variable 'age' higher than 20. if age is not higher than 20 then nothing happens
the bottom code asks the opposite
is 'age' less than 20
this is true age = 19, so the code underneath will display. typing this in will only show the code for if they are younger than 20

We can do the same thing for list lengths that we've done before

const colors = ['red', 'orange', 'yellow', 'green'];

if(colors.length > 3){
console.log("Woah that's a lot of colors")
}

so this code is saying:

there are 4 colors
If the number of colors is higher than 3

then you will say "Woah that's a lot of colors"

so as you can see if/then statements are not that difficult

Else & else if

lets say you want your code to say something if the condition is false or doesn't meet up to its rule. to do this we use an else statement
so lets make a simple password check and put in a password that's too short

const pass = 123;

if(pass.length >= 8){
console.log("password is good");
} else{
console.log("password too short")
}

so what's happening here is the first line of the if statements is asking is the passwords greater than or equal to 8. if it is it says "Password is good" if not the else clause fires up and says "Password too short"
The password in this code is set as "123" so it is not long enough

with this code you can change around the limits of the passwords and have different messages show up

Logical operators

logical operators tell you if something is true or false. using math it can tell you if a conclusion is true or false
lets say that x = 6 and y = 3

Operator Description Example
&& and (x < 10 && y > 1) is true
|| or (x == 5 || y == 5) is false
! not !(x == y) is true

Logical NOT

For logical not we execute code if a condition is false

let atk = false
if(!atk){
console.log("Attack missed!!!")
}

so this is saying that atk is false but the conditional is saying if atk is false then say "Attack missed!!!"

Break and continue

for break you put it at the end of your code and it makes the list stop and the loop stops going through

for (int i = 0; i < 10; i++) {
  if (i == 4) {
    break;
  }
  System.out.println(i);
}

a continue makes it so that it will skip 4 and continue going after that

for (int i = 0; i < 10; i++) {
  if (i == 4) {
    continue;
  }
  System.out.println(i);
}

Switch statements

switch statements are made so that you dont have to use the 'else' clause for every single possible option but instead can use the one for it

let grade = 'f'

switch(grade){
case 'a':
console.log("You got a star");
break;
case 'b':
console.log("You got a dwarf star");
break;
case 'c':
console.log("You got a hot ball");
break;
case 'd':
console.log("You got a microwaved rubber ball");
break;
case 'e':
console.log("You got a heated circle");
break;
case 'f':
console.log("You got a :[");
break;
default:
console.log("How did you even do this?")

}

Each case will give a different answer but the main thing is that if you got one of the letter grades you would get a message which is faster than making a bunch of different functions
You might notice the breaks after every case. this makes sure that the code underneath does not run if it has already found its answer

Variables and block slope

everywhere within the {} of a function is the block of the function.
things can go into and out of the block, such as variables values and things like it.
but if outside the block has a definition but inside has a different one. then the block becomes closed off, nothing comes in nothing comes out. and so variables within the block stay in the block

let age = 40
if(true){
let age = 30
console.log(age)
}
console.log(age)

each one of the console.log(age) will have a different answer
during this any variable added to the block will not be affected outside, this even happens if you have multiple variables and some of them are only used inside the block

let age = 40
if(true){
let age = 30
let name = john
console.log(age)
console.log(name)
}
console.log(age)
console.log(name)

JavaScript intro

coses23298 — Thu, 19 Nov 2020 18:55:12 +0000

Adding JavaScript to to a webpage

before we start coding JavaScript we need to link JavaScript to our page.

<script src="script.js"></script>

An important thing about JavaScript linking is that you should always link it inside the body of the site not in the head. This is because the JavaScript can actually take longer to load in the head.

The Browser Console

Websites on browsers like google have developer tools and to go into any website's code you press Ctrl + Shift + I, this should bring up the websites code, network, security etc.
inside the console we can learn important stuff about JavaScript here's how.

console.log(2)
console.log(1)
console.log(3)

console.log() is a function that tells the console what to put down
even though the orders of the numbers are mixed around JavaScript will still always read top to bottom. so what should appear is

2
1
3

Variables, Constants and Comments

variables store values to be used later
there are multiple ways to make a variable so lets start off with the easiest way: let, let gives variables a value.

let age = 25;
console.log(age)

the output of this command would just be the number 25 but that shows that the value of the variable (age) is 25 and since JavaScript works from top to bottom you'll want to put variables pretty high up so their remembered

lets say we want to show multiple variables, well that's easy

let age = 25;
let year = 2005;
console.log(age,year);

with a comma you can put multiple variables on one line.
the output of this command would be 25 2005
since JavaScript reads from top to bottom you can do

let age = 25;
console.log(age)

let age = 30;
console.log(age)

and you'll see that the second line of console.log shows 30 while the first still shows 25.
an important note is that the const command will create an error if you try to give it a new value so

const age = 25;
age = 30
console.log(age)

all that can come out of this is an error

Data Types at a Glance

There are currently 7 types of data in JavaScript:
Number which is just a number
String which is letters to make statements
Boolean is true or false used for evaluating conditions

Null a variable with no value
Undefined is a variable with no determined value
Object a complex data structure
Symbol is used within objects

Strings and String Methods

strings store letters number and more, their a line of text that are held
for strings you always use either double or single quotes
strings can also equal values of variables
so lets make a variable with a value

let john = 'ThatGuy'

so now the variable (john) is equal to 'ThatGuy' so whenever we type out (john) in a console.log 'ThatGuy' will come out
but what if i want to have john's full name on my website

lets learn how to join variables together
and the best way to do this is with string addition

let firstName = 'john'
let lastName = 'johnderson'

let fullName = firstName + lastName;

console.log(fullnName)

after doing this there might not be a space between the names so what people will do is add a space to the equation

let firstName = 'john'
let lastName = 'johnderson'

let fullName = firstName + ' ' + lastName;

console.log(fullnName)

adding that extra space will make it so first and last name are seperated
another important fact is that javascript numbers start at 0
so the command

console.log(fullnName[0])

will give you the first letter in the name with console.log(fullnName[1]) giving you the second letter and so on and so on
as well as the command

console.log(fullName).length

will give you the number of characters within that variable
there is also
lastIndexOf
and
firstIndexOf
lastIndexOf('m') will look for the last time in a variable you type the letter m
firstIndexOf('m) will look for the first time in a variable you the the letter m

slice is a command that slices out certain parts of a variable so in a 30 word vairable if you slice (4,6) it will (starting from position 4) cut in the next 6 things, so everything before and after the slice will be cut out leaving only the slice

replace is a command that replaces the first instance of a character with a character of your choice
so for example
john
replace (o,w)
so his name is now jwhn
its used with variables

Numbers

number as just that, numbers
JavaScript has some calculating abilities but it has its limits
the console can also calculate radius, percent, remainder, and other things like it. most of the math is very 2D shape based
also each equation has its own symbol
addition +
subtraction -
multiplication *
division /
to the power of **
percent %
so lets do some math

let radius = 10;
const pi = 3.14;

let result = pi * radius**2;

then we get the area 314 and so we can see that JavaScript is capable of some pretty complex math but I don't think we can use it to find the square root of -1
Now that we've seen JavaScript do some math lets see how it did it
so we have to go over the order of operations
starting with brackets
then things to the power of
division
multiplication
addition
subtraction

Template Strings

template strings are long equations of variables and strings

const title = 'Welcome';
const author = 'mario';
const likes = 30;

let result = 'the website called ' + title + 'by ' + author + 'has ' likes + ' likes';
console.log(result);

Variables can be added to strings without the addition equation
as so:

let result = 'The blog called ${title} by ${author} has ${likes} likes';
console.log(result);

and the final part is making HTML templates

let html =
<h2>${title}</h2>
<p>By ${author}</p>
<span>This blog has ${likes} likes </span>
console.log(html)

Arrays

arrays are rows or columns of things. it creates a list

let ninjas = ['shaun', 'ryu', 'chun-li']
console.log(ninjas)

if we add [1] to ninjas it makes a new variable and it makes the it so the first list option is shown. but you can also make it into a variable that will show up instead

let ninjas = ['shaun', 'ryu', 'chun-li']
let ninjas[1] = 'ken'
console.log(ninjas[1])

lets make some more lists of things

let ages = [20, 25, 30, 35];
console.log(ages[2]);

you see the number [2] will make only the number 25 show up

lets say that your tired of these lists of similar things you can make lists of strings and numbers

let random = [1, 'john', 3, 'steve', 5];
console.log(random);

by using the .length addition it shows the number of items in the list, so using .length above would show 5 items

let random = [1, 'john', 3, 'steve', 5];
console.log(random.length);

next we can make ways so that everything can be joint using a singular method

let result = random.join(',');
console.log(result)

but now lets mix more than just list items lets mix lists.

let results = random.concat(['john', 'steve'])

Null and Undefined

something with no value or a unknown value, null is intentionally not having a value but undefined is an unintentional lack of value.
first lets make a variable with no value

let age;

when something has no value it will be given its own value automatically 'undefined'
also adding anything by a undefined number it will come out as NaN or Not A Number
if we intentionally make a value null we do something different

let age = Null;

Boolean & Comparisons

Boolean is true and false, its and 1 and 0 of JavaScript and is one of the major parts of it
console.log(true, false) looks like a string when its set up but the way you know this is a command is the lack of quotes
we use Booleans to see if something is true
so lets mess with Booleans

let email = 'john@johnmail.com';

let result = email.includes('@');

console.log(result);

this command searches for a '@' in the variable email, if there is an @ it will come back as true, if not then it will come back as false
also lets say in your code age = 25
you can double check by putting age == 25
the double = means you want to see if age is equal to 25
you change it from a statement to a question
in a similar way if age = 25 you can ask age != 30
which tells the code age isn't 30 right? so it will make sure that age does not equal 30
you can also see if age > 40 or age < 40
these work just as to see whether age is greater or lesser than a number, in this case 40
same things but => or =< is greater than or equal to/ less than or equal to

Loose vs Strict Comparison

loose comparison means two types of the same thing are equal
25 = '25'
strict comparison does not allow this meaning that 25 cannot equal anything but 25

Type Conversion

type conversion changes the type of data on something
an example is something going from string to number
you can add strings of numbers to a number to make it into a number type data

also using the command typeof will tell you the type of data it is

What is flexbox

coses23298 — Wed, 21 Oct 2020 15:01:25 +0000

Flexbox is a container organizer that is used to make anything be in a set order. While lists are only vertical, Flexbox is in any way you set it to be.

How to use

First you make your list of divs
Each div is an individual container for a list item. These divs order and properties is what will decide how it interacts and works on the website.

<div class="flex-container">
  <div>img1</div>
  <div>img2</div>
  <div>img3</div>
</div>

(The class can be whatever you want, as long as you get your CSS right it should work)
before we decide the order of the list we need to set the Flexbox to show up. so in CSS put this in.

.flex-container {
  display: flex;
}

this will display the divs as a flexbox, you can place them in any direction you want.
Next is actually deciding its direction, below is the code for doing so

.flex-container {
  display: flex;
  flex-direction: (enter the direction you want);
}

but this isn't the end how you can change your flexbox to be best for your site. just below are some direction and properties that can be used to determine how the flexbox works

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

Now those are just an order of words. below we get into what each of them mean and how they work on the flexbox

css flex-direction

: defines in which direction the container wants to stack the flex items. like columns and rows, the order within the rows and columns can be reversed.
flex-wrap: flex wrap decides if the row/column you are making will wrap back around if you've reached the end on a side. like how this text just hit the edge of the post and wrapped to the line under.

css flex-flow

: is for setting both the flex-direction and flex-wrap properties in one command.

css justify-content

: will decide which direction the flexbox will lean, its like using padding on text so it sits in a certain position.

css align-items

: is similar to justify-content except that justify-content is a horizontal change while align-items is vertical

css align-content

: is the lines in flexbox relative to each other instead of the ones above that do it relative to its container. here you decide the distance and ways the lines are compared to each other.

Now that you've decided which to use we can explain what that means. Now for my Figma I chose a right facing wrapping image Flexbox. AKA a nice looking list that goes by from left to right. so in the divs you want to put some things. lets say i want to put some images there so id need to go into each individual div and give each one its own image

<div class="flex-container">
  <div><img src="monkey.jpg" alt="monkeyimg"></div>
  <div><img src="giraffe.jpg" alt="giraffeimg"></div>
  <div><img src="zebra.jpg" alt="zebraimg"></div>
</div>

(This list can go on for as long as needed but I'm stopping it at 3 so its easier to read)
Now each of these divs that are within the class "Flex-container" will go with the flexbox you made.

references

https://www.w3schools.com/css/css3_flexbox.asp
also here's an example I made with Figma: https://www.figma.com/file/m5ZzK2tTM0Ft8fWIbF7xcu/climt-chnge-is-baaed
https://SturdyIntentWorker.flexboxpost.repl.co