JS

Question 1

save to local storage

Answer 1

localStorage.setItem(“key”, value)

Question 2

convert from js object to JSON string

Answer 2

JSON.stringify(myObject)

Question 3

get from local storage

Answer 3

localStorage.getItem(itemKey)

Question 4

Flex

Answer 4

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

Question 5

CSS descendant selectors

Answer 5

space, for example: ul.my-things li , List items that are descendants of the “my-things” list

Question 6

General Sibling combinator selector

Answer 6

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

Question 7

Select all elements that match various combinators (and)

Answer 7

just type them together without spaces

Question 8

apply same css to different selectors (or)

Answer 8

separate them using commas

Question 9

direct child selector

Answer 9

< , just the direct children

Question 10

Css Adjacent Sibling Combinator

Answer 10

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

Question 11

css pseudoclasses

Answer 11

hover, li:hover
:focus (buttons & form inputs when clicked)
:checked
:disabled
li:first-child

Question 12

pseudo class to select the first child, last child, or n child, only child, first of type, last of type

Answer 12

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

Question 13

pseudo selector not

Answer 13

li:not(.green), pseudo selector that doesn’t have the class of green

Question 14

pseudo elements

Answer 14

div.red::before, div.red::after Adds styling before or after de div with a class of red

Question 15

Styling data attribute selectors. simple and with a particular value

Answer 15

[data-red]{ }

[data-red=”true”]{ }

Question 16

attribute selector that matches the beginning

Answer 16

[data-red^=”12”]

Question 17

attribute selector that matches the end

Answer 17

[data-red]$=”69”

<div></div>

Question 18

Red data attribute selector that has 34 somewhere

Answer 18

<div></div>

[data-red]*=”34”

Question 19

Adds a text to an element

Answer 19

element.innerText =”my new text” (visible content in a node)
or element.textContent= “My new text” (all content)

Question 20

clone a template

Answer 20

const template = document.querySelector(“#myTemplate”)
const templateClone = template.content.cloneNode(true)

Question 21

add a newElement to a listElement

Answer 21

listElement.appendChild(newElement)

Question 22

check edge case inside a function where the input text is empty

Answer 22

if(inputText === ‘ ‘) return

Question 23

add to an array

Answer 23

myArray.push(myText)

Question 24

save to local storage, and what if saving an array value

Answer 24

localStorage.setItem(“keyName”, stringValue)

if the stringValue is an array
localStorage.setItem(“keyName”, JSON.stringify(stringValue))

Question 25

load from local storage

Answer 25

function loadItems(){
const storedItems = localStorage.getItems(KEY_NAME)
return JSON.parse(storedItems) || [] // converts to js object or array

}

Question 26

event listener when we interact with a list

Answer 26

list.addEventListener(“change”,e=>{
e.target.matches(“[data-checkbox-name]”)
})

Question 27

create a unique value by milisecond

Answer 27

const uniqueValue = new Date().valueOf().toString()

Question 28

add a data attribute ‘todoId’ in js to an element

Answer 28

element.dataSet.todoId = “123”

Question 29

get the parent of a clicked item

Answer 29

e.target.closest(‘.parentName’)

Question 30

remove an element from the screen

Answer 30

element.remove()

Question 31

get all the buttons dynamically

Answer 31

document.addEventListener(‘click’, e => {
if(!e.target.matches(‘.buttonClass’)) return
})

Question 32

import node js modules

Answer 32

const myExportedThings = require(./user.js)
console.log(myExportedThings.name)

—- file to export:
module.exports{
name: name,
age:age
}

Question 33

hide from the UI, mantain the element space

Answer 33

visibility:hidden/visible

Question 34

hide from the UI, take no space

Answer 34

display:none/block

Question 35

toggle a class called show in js

Answer 35

element.classList.toggle(‘show’)

Question 36

fire once a click event. (should be removed after clicking)

Answer 36

button.addEventListener(‘click’,()=>{
//dostuff
},{once:true})

Question 37

create a button with js and give it the class of red, and attach it to a grid element

Answer 37

const myButton = document.createElement(‘button’)
myButton.classList.add(“red”)
myGrid.appendChild(myButton)

Question 38

Select all dataset with foo

Answer 38

Document.querySelectorAll(“[data-foo]”)

Question 39

fetch request

Answer 39

fetch(“URL”)
.then(
response=>{return response.json() }
.then(
data=>{console.log(data)}
)

Question 40

classList functions

Answer 40

div.classList.add(“foo”)
div.classList.remove(“foo”)
div.classList.toggle(“foo”)
div.classList.replace(“foo”, “bar”)

Question 41

convert string to integer

Answer 41

parseInt(“3”)

Question 42

switch

Answer 42

switch(x){
case “oranges”:
break;
case “apples”:
break;
default;
}

Question 43

make a copy of an object

Answer 43

animal2= JSON.parse(JSON.stringify(animal))

Question 44

agregar y quitar al final de un arreglo

Answer 44

myArray.push(‘red’)
myArray.pop()

Question 45

quitar y poner en el frente de un arreglo

Answer 45

myArray.shift()
myArray.unshift(‘red’)

Question 46

myArray.splice(2,1)

Answer 46

el index en el que queremos quitar, y el numero de elementos. Queremos quitar un elemento en el índice 2. Se modifica el arreglo

Question 47

Var disadvantages

Answer 47

Breaks scope, has hoisting, allowed redeclaration

Question 48

check if a variable is NaN

Answer 48

isNaN(variable)

Question 49

constructor function

Answer 49

function User(name,age){
this.name = name
this.age = age
}

const grace = new User(¨grace¨, 39)

Question 50

class

Answer 50

class User(name,age) {
constructor(){
this.name = name
this.age = age
}
function sayName(){
console.log(this.name)
}
}

const user1 = newUser(“grace”,28)
user1.sayName()

Question 51

code a select element

Answer 51

Red
Green

Question 52

html types <input type=””

Answer 52

text, checkbox, radio, file, tel, url, hidden, color

Question 53

Match a label with an input

Answer 53

The for with the id
Color

Question 54

whats a private variable

Answer 54

a variable only available in its own class starts with #, example #internalOnlyVariable and its not available to the children

Question 55

whats a protected variable

Answer 55

a variable that cant be accessed outside of its class, but can be accessed by the children

Question 56

event que se activa cuando escribes letra por letra en un input

Answer 56

input

Question 57

event que se activa cuando escribes algo en un input y das clic afuera

Answer 57

change

Question 58

Diferencia entre filter y find al filtrar un arreglo de objetos

Answer 58

Filter regresa un arreglo [{}], find regresa el objeto {}

Question 59

Sets the active html element in the document. It can only be applied to one element

Answer 59

Document.querySelector(‘x’).focus()

Question 60

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))

Answer 60

//logs the first to fail or an array with all the resolves [‘1’,’2’,’3’]

Question 61

explain Promise.any

Answer 61

prints the first that succeeds. (only succeed not fail)

Question 62

explain Promise.race

Answer 62

prints the first that succeeds or fails

Question 63

explain Promise.allSettled

Answer 63

waits for all to finish and then gives the status of each[{status: rejected, reason: ‘error on 1’}]

Question 64

code a fetch using async await

Answer 64

async function fetchData(){
const response = await fetch(‘http’)
const data = await response.json()
console.log(data.map(item => data.name))
}

Question 65

post

Answer 65

fetch(‘http:///’,{
headers: {“content-type”:”application/json”},
body: JSON.stringify({ title: ‘new post’}),
method: POST,
})

Question 66

what are the 2 types of fetch requests

Answer 66

async or promise based