JS Flashcards
save to local storage
localStorage.setItem(“key”, value)
convert from js object to JSON string
JSON.stringify(myObject)
get from local storage
localStorage.getItem(itemKey)
Flex
Container
display:flex
flex-direction: row/column row-reverse
justify-content: space-between
align-items: center, flex-start, flex-end, stretch
Items
flex-shrink
flex-grow
flex-basis
CSS descendant selectors
space, for example: ul.my-things li , List items that are descendants of the “my-things” list
General Sibling combinator selector
Tilde ~ selects all elements that are next siblings of a specified element
li.red ~ li , selects all the li’s that come after an li with a class of red
Select all elements that match various combinators (and)
just type them together without spaces
apply same css to different selectors (or)
separate them using commas
direct child selector
< , just the direct children
Css Adjacent Sibling Combinator
Selects only one sibling that comes after a selector
li.red + li, selects only the one li that comes after the li with the class of red
css pseudoclasses
hover, li:hover
:focus (buttons & form inputs when clicked)
:checked
:disabled
li:first-child
pseudo class to select the first child, last child, or n child, only child, first of type, last of type
li.red:first-child (only selects the first li if it has the class of red)
li:last-child
li:nth-child()
li:only-child (selects the li only if its the only child inside a block)
li:first-of-type (the first item of type li inside a block)
li:nth-of-type()
li:last-of-type
pseudo selector not
li:not(.green), pseudo selector that doesn’t have the class of green
pseudo elements
div.red::before, div.red::after Adds styling before or after de div with a class of red
Styling data attribute selectors. simple and with a particular value
[data-red]{ }
[data-red=”true”]{ }
attribute selector that matches the beginning
[data-red^=”12”]
attribute selector that matches the end
[data-red]$=”69”
<div></div>
Red data attribute selector that has 34 somewhere
<div></div>
[data-red]*=”34”
Adds a text to an element
element.innerText =”my new text” (visible content in a node)
or element.textContent= “My new text” (all content)
clone a template
const template = document.querySelector(“#myTemplate”)
const templateClone = template.content.cloneNode(true)
add a newElement to a listElement
listElement.appendChild(newElement)
check edge case inside a function where the input text is empty
if(inputText === ‘ ‘) return
add to an array
myArray.push(myText)
save to local storage, and what if saving an array value
localStorage.setItem(“keyName”, stringValue)
if the stringValue is an array
localStorage.setItem(“keyName”, JSON.stringify(stringValue))
load from local storage
function loadItems(){
const storedItems = localStorage.getItems(KEY_NAME)
return JSON.parse(storedItems) || [] // converts to js object or array
}
event listener when we interact with a list
list.addEventListener(“change”,e=>{
e.target.matches(“[data-checkbox-name]”)
})
create a unique value by milisecond
const uniqueValue = new Date().valueOf().toString()
add a data attribute ‘todoId’ in js to an element
element.dataSet.todoId = “123”
get the parent of a clicked item
e.target.closest(‘.parentName’)
remove an element from the screen
element.remove()
get all the buttons dynamically
document.addEventListener(‘click’, e => {
if(!e.target.matches(‘.buttonClass’)) return
})
import node js modules
const myExportedThings = require(./user.js)
console.log(myExportedThings.name)
—- file to export:
module.exports{
name: name,
age:age
}
hide from the UI, mantain the element space
visibility:hidden/visible
hide from the UI, take no space
display:none/block
toggle a class called show in js
element.classList.toggle(‘show’)
fire once a click event. (should be removed after clicking)
button.addEventListener(‘click’,()=>{
//dostuff
},{once:true})
create a button with js and give it the class of red, and attach it to a grid element
const myButton = document.createElement(‘button’)
myButton.classList.add(“red”)
myGrid.appendChild(myButton)
Select all dataset with foo
Document.querySelectorAll(“[data-foo]”)
fetch request
fetch(“URL”)
.then(
response=>{return response.json() }
.then(
data=>{console.log(data)}
)
classList functions
div.classList.add(“foo”)
div.classList.remove(“foo”)
div.classList.toggle(“foo”)
div.classList.replace(“foo”, “bar”)
convert string to integer
parseInt(“3”)
switch
switch(x){
case “oranges”:
break;
case “apples”:
break;
default;
}
make a copy of an object
animal2= JSON.parse(JSON.stringify(animal))
agregar y quitar al final de un arreglo
myArray.push(‘red’)
myArray.pop()
quitar y poner en el frente de un arreglo
myArray.shift()
myArray.unshift(‘red’)
myArray.splice(2,1)
el index en el que queremos quitar, y el numero de elementos. Queremos quitar un elemento en el índice 2. Se modifica el arreglo
Var disadvantages
Breaks scope, has hoisting, allowed redeclaration
check if a variable is NaN
isNaN(variable)
constructor function
function User(name,age){
this.name = name
this.age = age
}
const grace = new User(¨grace¨, 39)
class
class User(name,age) {
constructor(){
this.name = name
this.age = age
}
function sayName(){
console.log(this.name)
}
}
const user1 = newUser(“grace”,28)
user1.sayName()
code a select element
Red
Green
html types <input type=””
text, checkbox, radio, file, tel, url, hidden, color
Match a label with an input
The for with the id
Color
whats a private variable
a variable only available in its own class starts with #, example #internalOnlyVariable and its not available to the children
whats a protected variable
a variable that cant be accessed outside of its class, but can be accessed by the children
event que se activa cuando escribes letra por letra en un input
input
event que se activa cuando escribes algo en un input y das clic afuera
change
Diferencia entre filter y find al filtrar un arreglo de objetos
Filter regresa un arreglo [{}], find regresa el objeto {}
Sets the active html element in the document. It can only be applied to one element
Document.querySelector(‘x’).focus()
promises
explain Promise.all
new Promise.all([
Promise.resolve(‘1’),
Promise.reject(‘error on 2’),
Promise.resolve(‘3’),
]).then(messages=> console.log(messages)).catch(error=> console.error(error))
//logs the first to fail or an array with all the resolves [‘1’,’2’,’3’]
explain Promise.any
prints the first that succeeds. (only succeed not fail)
explain Promise.race
prints the first that succeeds or fails
explain Promise.allSettled
waits for all to finish and then gives the status of each[{status: rejected, reason: ‘error on 1’}]
code a fetch using async await
async function fetchData(){
const response = await fetch(‘http’)
const data = await response.json()
console.log(data.map(item => data.name))
}
post
fetch(‘http:///’,{
headers: {“content-type”:”application/json”},
body: JSON.stringify({ title: ‘new post’}),
method: POST,
})
what are the 2 types of fetch requests
async or promise based
