Category: JavaScript

To determine date equality with JavaScript, we can convert both dates to timestamps with the getTime method.

Then we can compare them directly since timestamps are integers.

For instance, we can write:

const d1 = new Date(2021, 1, 1)  
const d2 = new Date(2021, 1, 1)  
console.log(d1.getTime() === d2.getTime())

To create 2 dates d1 and d2 with the Date constructor.

We pass in the year, month, and day into the Date constructor to create the JavaScript date objects.

Then we call getTime on each to compare them directly as timestamps.

Therefore, the console log should log true since they are the same dates.

To get the first letter of each word in a string with JavaScript, we can find the first letter of each word with the match method.

Then we can join them together with join .

For instance, we can write:

const str = "Java Script Object Notation";
const matches = str.match(/\b(\w)/g);
const acronym = matches.join('');
console.log(acronym)

We have the str string, which we call match on with the /\b(\w)/g regex pattern to find all the letters that come after a space or the first letter in the string.

The g means we do the search globally.

\w matches letters and \b matches word boundaries.

matches returns all the matched letters in an array, so we can call join with an empty string to join them together into one string.

And therefore, acronym is 'JSON' .

To change input text to upper case with JavaScript, we can use CSS or listen to the keyup event and change the inputted text to upper case in it.

For instance, we can write:

<input style="text-transform: uppercase" type="text" />

to add the text-transform CSS property and set its value to uppercase to turn all the inputted text to upper case.

To do the same thing with JavaScript, we can listen to the keyup event by writing the following HTML:

<input type="text" />

Then we can listen to the keyup event by writing:

const input = document.querySelector('input')  
input.addEventListener('keyup', (e) => {  
  input.value = e.target.value.toUpperCase()  
})

We call document.querySelector to select the input.

Then we call input.addEventListener with 'keyup' to listen to the keyup event.

In the event handler, we assign e.target.value.toUpperCase() to input.value to change the value entered into the input element to upper case.

To call the scrollIntoView method to scroll to an element without the fixed position header covering up the element we scrolled into view, we can set the scroll-margin-top CSS property to make sure the element we want to scroll to isn’t covered by the fixed header.

For instance, if we have:

<div style='position: fixed; width: 100vw; background-color: yellow'>
  header
</div>
<div id='content'>

</div>

Then we add the following JavaScript to create the elements and scroll to the one we want:

const content = document.querySelector('#content')
for (const n of Array(200).fill().map((_, i) => i)) {
  const el = document.createElement('p')
  el.id = `el-${n}`
  el.textContent = n
  content.appendChild(el)
}

const node = document.querySelector('#el-150')
node.scrollIntoView(true);

We get the div with ID content with document.querySelector .

Then we have a for-of loop that loops through the numbers created.

In the loop body, we call document.createElement to create the p elements.

And then we set the ID of the element created with:

el.id = `el-${n}`

We set the text content with:

el.textContent = n

And then we append it to the div with:

content.appendChild(el)

Then we select the element we want to scroll and scroll to it by writing:

const node = document.querySelector('#el-150')
node.scrollIntoView(true);

Finally, to make sure the fixed header doesn’t block the element we’re scrolling to, we write:

#el-150 {
  scroll-margin-top: 3rem;
}

To add SVG elements to existing SVG using DOM manipulation and JavaScript, we can select the svg element.

Then we can create an element with a namespace and put it inside the svg element as its child.

For instance, if we have the following HTML:

<svg></svg>

Then we can select the element and add a path element into it by writing:

const svg = document.querySelector('svg');  
const newElement = document.createElementNS("http://www.w3.org/2000/svg", 'path');  
newElement.setAttribute("d", "M 0 0 L 10 10");   
newElement.style.stroke = "#000";   
newElement.style.strokeWidth = "5px";  
svg.appendChild(newElement);

We call document.querySelector to get the svg element.

Then we call document.createElementNS to create a new path element with a namespace.

Next, we call newElement.setAttribute to add the d attribute to add the path code for the SVG.

Next, we set the stroke property to set the stroke color.

And then we set the strokeWidth property to set the stroke width.

Finally, we call appendChild with newElement to append it as the svgelement’s child.

Now we should see a short diagonal line displayed on the screen.