Author: John Au-Yeung

We can get today’s date with the moment function.

And then we can format it into a human-readable date string with the format method.

For instance, we can write:

const today = moment();
console.log(today.format('YYYY-MM-DD'))

to create the today variable that’s set to a moment object with today’s date.

And then we call format with 'YYYY-MM-DD' to format the date to YYYY-MM-DD format.

Get Tomorrow’s Date

We can get tomorrow’s date with the moment function and the add method.

And then we can format it into a human-readable date string with the format method.

For instance, we can write:

const tomorrow = moment().add(1, 'days');
console.log(tomorrow.format('YYYY-MM-DD'))

to create the tomorrow variable that’s set to a moment object with today’s date.

Then we call add with 1 and 'days' to add one day to today.

And then we call format with 'YYYY-MM-DD' to format the date to YYYY-MM-DD format.

Get Yesterday’s Date

We can get tomorrow’s date with the moment function and the add method.

And then we can format it into a human-readable date string with the format method.

For instance, we can write:

const yesterday = moment().add(-1, 'days');
console.log(yesterday.format('YYYY-MM-DD'))

to create the tomorrow variable that’s set to a moment object with today’s date.

Then we call add with -1 and 'days' to subtract one day to today.

And then we call format with 'YYYY-MM-DD' to format the date to YYYY-MM-DD format.

The easiest way to add an input box with a clear button is to add an input element with the type attribute set to search .

For instance, we can write:

<input type="search" />

Then when we type into the input box, we see the clear button displayed.

And we can click on it to clear its value.

Use CSS Styles

We can also add an input box with CSS.

For instance, we can write:

<form>
  <input type="text" placeholder=" " />
  <button type="reset">&times;</button>
</form>

Then we can style the input to add a clear button with:

form {
  position: relative;
  width: 200px;
}
`
form input {
  width: 100%;
  padding-right: 20px;
  box-sizing: border-box;
}
`
form input:placeholder-shown+button {
  opacity: 0;
  pointer-events: none;
}
`
form button {
  position: absolute;
  border: none;
  display: block;
  width: 15px;
  height: 15px;
  line-height: 16px;
  font-size: 12px;
  border-radius: 50%;
  top: 0;
  bottom: 0;
  right: 5px;
  margin: auto;
  background: #ddd;
  padding: 0;
  outline: none;
  cursor: pointer;
  transition: .1s;
}

We select the button in the form with CSS with the form button selector.

And we set its position to absolute to make the button stay in place.

Then we set width and height to fit inside the input box.

We also set the background to add a background.

To add the ‘x’ inside the button, we use the &times HTML entity.

The button should have reset as the value of the type attributes to clear the button’s value when we click it.

We can listen to the submit event of the form to watch for presses of the form submit button.

For instance, if we have the following form:

<form>
  <input type="text" name="name">
  <input type="submit" name="submit">
</form>

Then we can write:

const form = document.querySelector("form")
form.addEventListener("submit", (e) => {
  e.preventDefault();
  const formData = new FormData(form)
  console.log(formData.entries())
});

to listen to the form submit event and get the data from the form with the FormData constructor.

We get the form with document.querySelector .

Then we call addEventListener on it with 'submit' as the first argument.

The 2nd argument of addEventListener is a callback that processes the form when it’s submitted.

In the callback, we call e.preventDefault() to stop the server-side form submission behavior.

Then we use the FormData constructor with the form element we selected to get its value.

And then we use the entries method to get the entered value.

It returns the iterator with the key-value pairs of the form values.

The key of each entry is the name attribute value of the field.

And the value is the value.

So if we entered ‘aaa’ into the text field, we get:

[
  [
    "name",
    "aaa"
  ]
]

as the result returned by entries .

We can use the ResizeObserver to watch for an element’s resizing.

For instance, if we have the following div:

<div style='background-color: yellow'>
  hello world
</div>

Then we can use it by writing:

const div = document.querySelector('div')
const resizeObserver = new ResizeObserver(() => {
  console.log(div.clientHeight);
});

resizeObserver.observe(div);

setTimeout(() => {
  div.style.height = '200px'
}, 1000)

We get the div with the document.querySelector method.

Then we use the ResizeObserver by instantiating it with a callback.

In the callback, we log the clientHeight to log the height of the div.

Next, we call resizeObserver.observe to watch the div for size changes.

Then we call setTimeout with a callback to set the height of the div to '200px' .

So we should see that the console log will first log 18 and then log 200 since we change the size of the div to 200px high 1 second after setTimeout is called.

We can use the quadraticCurveTo method that comes with the canvas context object to draw a curve through n points.

To use it, we can first write the following HTML:

<canvas width="200" height="200"></canvas>

Then we can use it by writing:

const points = [{
  x: 1,
  y: 1
}, {
  x: 20,
  y: 30
}, {
  x: 30,
  y: 40
}, {
  x: 40,
  y: 20
}, {
  x: 50,
  y: 60
}]

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext("2d")
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);

for (const point of points) {
  const xMid = (point.x + point.x) / 2;
  const yMid = (point.y + point.y) / 2;
  const cpX1 = (xMid + point.x) / 2;
  const cpX2 = (xMid + point.x) / 2;
  ctx.quadraticCurveTo(cpX1, point.y, xMid, yMid);
  ctx.quadraticCurveTo(cpX2, point.y, point.x, point.y);
}
ctx.stroke();

We have the points array that has the x and y coordinates of some points.

Then we get the canvas with document.querySelector .

Next, we call the getContext method to get the context object.

Then we call beginPath to start drawing.

And then we call moveTo to move to the first point.

Next, we call quadraticCurveTo to draw the curve from the first point that we calculated from the (cpX1 , point.y) to (xMid ,yMid).

Then we draw the curve from (cpX2 , point.y ) to (point.x , point.y ).

cpX1 and cpX2 are the center points of x and y for the line segment between one point and the next.

And finally, we call stroke to draw the line onto the screen.