html: basic input text field in a form


<form action="/restaurants">
 <label for="name-input">Name</label>
 <input id="name-input" type="text" name="name">
 <input type="submit" value="Submit">

html meta tag with the text shown in Google results


  <title>main thing in google results</title>
    content="text appearing below the link"
 <!-- ... -->

box model properties sequence

From inside to outside:

  1. content
  2. padding
  3. border
  4. margin

Four types of CSS length units


Options for justify-content for flex-items


Site to resize images


How to prevent the default behavior of an event from happening?

Using the preventDefault() function in an event.


  (event) => event.preventDefault()

How to append content into a DOM element?

Using insertAdjacentHTML():



location can be:

<-- beforebegin -->
  <-- afterbegin -->
  the content
  <-- beforeend -->
<-- afterend -->

Get all the properties of an Object in JS

Only the keys:


The array of key-value pairs:

// [ [key1, value1], [keyN, valueN] ]

3 basic steps of using JS in frontend


  1. get an element
  2. add an event listener to the element
  3. assign a callback function to be triggered by an event

CSS to use on background images to improve contrast?


.banner {
      rgba(0,0,0,0.8) 0%,
      rgba(0,0,0,0.2) 50%
    ), url('background.jpg');
  background-size: cover;

JS: add/remove CSS classes



3 most used DOM events


click  # any visible element
submit # form
keyup  # window / any focused element

Change style via JS

::<CSS-property> = <value>

// examples = 'none' = '#fce'

3 main steps of DOM manipulation


  1. select one or more elements - usually with document.querySelector() or .getElementById().
  2. define a function to execute
  3. define which event, happening in which element, should trigger the function (probably acting in another element)

StimulusJS key concepts


  1. Controllers
  2. Actions
  3. Targets

mnemonic: CAT 🐱

Stimulus' core purpose

Automatically connect DOM elements to JavaScript objects (called controllers)

Stimulus: marking an HTML element to be the controller

Example to connect a div with the hello_controller.js:

<div data-controller="hello">

Stimulus controller "header"


// src/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  // ...

Connect a Stimulus action to a button's click


<div data-controller="hello">
  <input type="text">
  <button data-action="click->hello#greet">Greet</button>

NOTE: the action must be in the controller's tree.

Stimulus: steps to set an element as a target


  1. mark as target in the html
  2. grab in the controller.js

Stimulus: mark an HTML element as a target


<div data-controller="hello">
 <input data-hello-target="nameInput" type="text">

Stimulus: grab the targets in the controller


export default class extends Controller {
  // the target name goes as an element of `targets`
  static targets = [ "nameInput" ]
  greet() {
    // and it's accessible by `this.${targetName}Target`
    const element = this.nameInputTarget
<!-- basicblock-end -->


<!--  basicblock-start -->
## Selector Specificity Ranking
1. `!important`
2. inline
3. id
4. class
5. element
<!-- basicblock-end -->