How to do stuff

Question 1

How do you center a div

Answer 1

Parent container:
display: flex;
justify-content: center;
align-items: center;

child div:
margin: 0 auto;

Question 2

how do you make an overlay

Answer 2

div -->
.overlay {
background: linear-gradient(rgb(somegray / 60%), rgb(somegray / 60%));
position: absolute;
height: 100%
width: 100%
top: 0;
bottom: 0;
z-index: 1;
display: flex;

}

Question 3

view swapping?

Answer 3

class hidden: –> display: none

query elems you want to swap with

change class names with .className with hidden to hide and no hidden to not

Question 4

@media query to change mobile responsiveness

Answer 4

set regular as width 100% outside of media query and min-width some px for media feature and set css rule inside to change to screen response

mostly has to do with column widths

Question 5

how to remove a parent element when clicking on a child element like a button to delete an entry list

Answer 5

add event listener to button or child element query
get event.target.tagName
make if statement strictly equal to the tagName of the button. and if passes
then query the event.target.closest(parent element selector) in a variable –> will store an element that is closest to that specified selector inner to out
then do that query.remove()

Question 6

How to make DOM “update” in real time without refreshing

Answer 6

Query the current DOM tree or whatever you are trying to update
do element.methods –> (append , remove , replace…) to current DOM tree with whatever child DOM tree you are trying to insert or change

this all needs to be in the handler function for whatever event listener you have on child div

Question 7

How to change value of form preset

what do you need to include in form submit event listener

Answer 7

query the input element or form
then do $form.elements. name attribute value .value = to whatever you want to fill

first include preventDefault() so page does not reload
then at the end include $form.reset() to empty out form values whenever leaving the page

Question 8

how to parse old data from local storage

Answer 8

get data from local storage in variable –> localStorage.getItem( whatever string value )

if that ^^ is not null then we do data === previousdata

Question 9

what are the steps in XMLhttpsrequest

Answer 9

assign to variable new XMLHttpsREquest()

xhr. open(‘GET’, whatever url)
xhr. responseType = ‘json’
xhr. addEventListener(‘load’ handlerFunction)
xhr. send()

Question 10

how to contain an image in a div

–square div / circle div

Answer 10

make parent div position relative and have a defined width and height
make child img object-fit: cover/contain and fill up the div by: width: 100% and height: 100%

for circle make parent and child border-radius: 50%

Question 11

config react projects?

Answer 11

npm init -y –> make package.json

npm install react react-dom –> dependencies

npm install –save-dev webpack webpack-cli babel-loader @babel/core @babel/plugin-transform-react-jsx –> devDependencies

on package json script do watch: “webpack –watch –stats=minimal –mode=development –devtool=source-map”

Question 12

what is the process for auth

Answer 12

take the username and password from req body and filter through argon2.hash( ) then query to data base the hashpassword

for authentication get a select sql queeyr then compare the body password to the sql query withh argon2 verify

for authorization and getting tokens get token from req.headers[‘x-acesss-token’] and do const payload verify with token and put it in req.user for the authorization middlewear

Question 13

how to run data base

Answer 13

make a data base : createdb –> name of data base

npm run db:import –> include script in package.json

pgweb –db=database name –> to run pgweb