Category: JavaScript Answers

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.

To add a select element programmatically with JavaScript, we can use the document.createElement method to create elements.

Then we can use the appendChild method to append child elements into the parent element.

For instance, we can write the following HTML:

<div>

</div>

to add the parent element for the select element.

Then we can add the select element with the option elements in it by writing:

const myParent = document.querySelector('div');
const array = ["Volvo", "Saab", "Mercades", "Audi"];

const selectList = document.createElement("select");
selectList.id = "mySelect";
myParent.appendChild(selectList);

for (const a of array) {
  const option = document.createElement("option");
  option.value = a;
  option.text = a;
  selectList.appendChild(option);
}

We get the div with:

const myParent = document.querySelector('div');

Then we create the select element with:

const selectList = document.createElement("select");

Then we set the id attribute of the select element with:

selectList.id = "mySelect";

Then we append the select element as a child of the div with:

myParent.appendChild(selectList);

Next, we add the option elements into the select element by writing:

for (const a of array) {
  const option = document.createElement("option");
  option.value = a;
  option.text = a;
  selectList.appendChild(option);
}

We loop through the array with the for-of loop.

In the loop body, we call document.createElement with 'option' to create the option element.

We set option.value to set the value attribute of the option element.

And we set the text property to set the option text to display.

Next, we call selectList.appendChild with option to append option to the select element as its child.