Author: John Au-Yeung

Sometimes, we want to get the next letter of the alphabet in JavaScript.

In this article, we’ll look at how to get the next letter of the alphabet in JavaScript.

Get the Next Letter of the Alphabet in JavaScript

To get the next letter of the alphabet in JavaScript, we can use the String.fromCharCode static string method and the charCodeAt string instance method.

For instance, we write:

const str = 'a'
const nextLetter = String.fromCharCode(str.charCodeAt(str.length - 1) + 1)
console.log(nextLetter)

to define the str string.

Then we call str.charCodeAt(str.length - 1) to get the character code of the last character of the string.

Next, we add 1 to the returned character code and call String.fromCharCode to return the letter corresponding to that character code.

Finally, we assign the returned value to nextLetter.

Therefore, we should see that nextLetter is 'b' from the console log.

Conclusion

To get the next letter of the alphabet in JavaScript, we can use the String.fromCharCode static string method and the charCodeAt string instance method.

Sometimes, we want to make a progress bar with HTML and JavaScript.

In this article, we’ll look at how to make a progress bar with HTML and JavaScript.

Make a Progress Bar with HTML and JavaScript

To make a progress bar with HTML and JavaScript, we can set the width of a div to be a percentage of its containing div.

For instance, we write:

<div id="container" style="width: 100%; height: 5px; border: 1px solid black;">
  <div id="progress-bar" style="width:10%; background-color: green; height:5px;"></div>
</div>

to add the outer and inner divs for the progress bar.

We set the background color of the inner div to make the progress bar show.

Then we write:

let width = 0;
const progressBar = document.getElementById('progress-bar')
window.onload = (e) => {
  setInterval(() => {
    width = width >= 100 ? 0 : width + 5;
    progressBar.style.width = width + '%';
  }, 200);
}

We define the width variable to set the width of the inner div.

Then we select the progress bar’s inner div with document.getElementById.

Next, we set the window.onload property to a function that updates the width of the inner div when the page loads.

To do this, we call setInterval with a callback that sets the width.

If width is bigger than or equal to 100, we reset it to 0.

Otherwise, we add 5 to width and assign it to width.

Next, we set the style.width property of the inner div to width percent to update the bar’s length as a percentage of the width of the outer div.

We pass in 200 as the 2nd argument of setInterval to update the width every 200 milliseconds.

Therefore, now we should see the progress bar being filled and emptied periodically.

Conclusion

To make a progress bar with HTML and JavaScript, we can set the width of a div to be a percentage of its containing div.

Sometimes, we want to take today’s date and add 1 day to it with JavaScript.

In this article, we’ll look at how to take today’s date and add 1 day to it with JavaScript.

Take Today’s Date and Add 1 Day to it with JavaScript

To take today’s date and add 1 day to it with JavaScript, we can create a new date with the timestamp set to 1 day after today.

To do this, we write:

const tomorrow = new Date((new Date()).valueOf() + 1000 * 3600 * 24);
console.log(tomorrow)

We add:

(new Date()).valueOf() 

to get the timestamp of today’s date time in milliseconds.

Then we add the number of milliseconds for 1 day by adding 1000 * 3600 * 24.

Then we use all that as the argument of the Date constructor.

Therefore, tomorrow is:

Sun Sep 12 2021 11:03:06 GMT-0700 (Pacific Daylight Time)

if the current date and time is Sep 11, 2021, 11:03:06 Pacific Time.

Conclusion

To take today’s date and add 1 day to it with JavaScript, we can create a new date with the timestamp set to 1 day after today.