Category: JavaScript Answers

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.

Sometimes, we want to create a stopwatch using JavaScript.

In this article, we’ll look at how to create a stopwatch using JavaScript.

Create a Stopwatch Using JavaScript

To create a stopwatch using JavaScript, we can add the HTML and JavaScript code for the timer display and the buttons to start, stop and reset the timer.

For instance, we write:

<h1>
  <span id="hour">00</span> :
  <span id="min">00</span> :
  <span id="sec">00</span> :
  <span id="millisec">00</span>
</h1>

<button onclick="startStop()" id="start">Start</button>
<button onclick="reset()">Reset</button>

to add the HTML code for the stopwatch timer display and the buttons to control the stopwatch.

Then we write:

let x;
let startstop = 0;


const start = () => {
  x = setInterval(timer, 10);
} /* Start */

const stop = () => {
  clearInterval(x);
}

let millisec = 0;
let sec = 0;
let min = 0;
let hour = 0;
let miliSecOut = 0;
let secOut = 0;
let minOut = 0;
let hourOut = 0;

const checkTime = (i) => {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

const timer = () => {
  milliSecOut = checkTime(millisec);
  secOut = checkTime(sec);
  minOut = checkTime(min);
  hourOut = checkTime(hour);

  millisec = ++millisec ;

  if (millisec  === 100) {
    millisec = 0;
    sec = ++sec;
  }

  if (sec == 60) {
    min = ++min;
    sec = 0;
  }

  if (min == 60) {
    min = 0;
    hour = ++hour;

  }


  document.getElementById("millisec").innerHTML = milliSecOut;
  document.getElementById("sec").innerHTML = secOut;
  document.getElementById("min").innerHTML = minOut;
  document.getElementById("hour").innerHTML = hourOut;

}


const reset = () => {
  millisec = 0;
  sec = 0;
  min = 0
  hour = 0;

  document.getElementById("millisec").innerHTML = "00";
  document.getElementById("sec").innerHTML = "00";
  document.getElementById("min").innerHTML = "00";
  document.getElementById("hour").innerHTML = "00";
}


const startStop = () => {
  startstop = startstop + 1;

  if (startstop === 1) {
    start();
    document.getElementById("start").innerHTML = "Stop";
  } else if (startstop === 2) {
    document.getElementById("start").innerHTML = "Start";
    startstop = 0;
    stop();
  }
}

We define x to store the timer for updating the stopwatch time count.

startstop stores the stopwatch toggle state.

Then we create the start function that calls setInterval that calls the timer function every 10 milliseconds to run the timer.

The stop function calls clearInterval to stop the timer.

Next, we define variables to store the elapsed time.

In the timer function, we call checkTime to prepend a 0 before i if i is less than 10 and return that result.

We call that for all time variables in the timer function.

Then we update the millisec variable to update the elapsed time in milliseconds.

Next, we update the millisec, sec, and min variables to update the milliseconds, seconds and minutes parts of the elapsed time respectively.

Then we update the display of the stopwatch by setting the innerHTML property of all the elements.

After that, we define the reset function to reset all the values to 0 and update the corresponding elements.

Next, we create the startStop function to toggle the timer on and off.

If it’s 1, we start the timer by calling the start function.

And we update the start button to show Stop.

If it’s 2, then we update the start button to show Start and we call stop to stop the timer.

And we also reset the startstop state to 0.

startStop and reset are called when we click the Start/Stop and Reset buttons respectively.

Conclusion

To create a stopwatch using JavaScript, we can add the HTML and JavaScript code for the timer display and the buttons to start, stop and reset the timer.