Category: JavaScript Answers

To get an option’s text or value with JavaScript, we can use properties built into the browser to get the options’ text or value.

For instance, we can write:

<form name="foodSelect">
  <select name="mainCourse">
    <option>- select -</option>
    <option value="breakfast">Breakfast</option>
    <option value="lunch">Lunch</option>
    <option value="dinner">Dinner</option>
  </select>
</form>

to create the form with the select dropdown.

Then we get the select by writing:

const select = document.querySelector('select')

select.addEventListener('change', () => {
  const {
    text,
    value
  } = select.options[select.selectedIndex]
  console.log(text, value)
})

We get the select element with document.querySelector .

Then we get the option element that’s selected with:

select.options[select.selectedIndex]

select.selectedIndex has the index of the element that’s selected.

The text property has the text of the option element that’s displayed to the user.

value has the value of the value attribute of the selected option.

To calculate age from date of birth using jQuery, we can use native JavaScript date methods.

For instance, we can write the following HTML:

<div>

</div>

Then we write:

const dt = new Date();
dt.setFullYear(dt.getFullYear() - 18);

$('div').text((dt.getTime() - new Date(1990, 5, 6).getTime() < 0) ? "Under 18" : "Over 18");

to create the dt date object with that we set to 18 years before today.

Then we call text with dt.getTime() — new Date(1990, 5, 6).getTime() < 0) ? “Under 18” : “Over 18” to check if the date is after the day that’s 18 years before today with:

dt.getTime() — new Date(1990, 5, 6).getTime() < 0

If it is, then we set the div’s text to 'Under 18' .

Otherwise, we set it to 'Over 18' .

To determine image dimensions in JavaScript, we can use the Image constructor to create the image object and get the dimensions from there.

For instance, we write:

const img = new Image();
img.src = "https://i.picsum.photos/id/686/200/300.jpg?hmac=KpugvfnM7VFRRbf_yihA6yObvfaWEJEEXeeFEqmVegQ";
img.onload = () => {
  const actualwidth = img.width;
  const actualheight = img.height;
  console.log(actualwidth, actualheight)
}

to create the Image instance and assign it to img .

Next, we set the src property of the image.

Then we set the img.onload property to a function.

In the function, we get the width and height properties of img , which are the width and height of the image respectively.

To convert the day of the year to a date object in JavaScript, we can pass the year into the Date constructor.

For instance, we can write:

const dateFromDay = (year, day) => {
  const date = new Date(year, 0);
  return new Date(date.setDate(day));
}

console.log(dateFromDay(2020, 301))

to create the dateFromDay function that takes the year and day parameters.

We pass the year into the Date constructor when we create the date object.

Then we call setDate with day to set the day of the year.

Therefore, the console log should log:

Tue Oct 27 2020 00:00:00 GMT-0700 (Pacific Daylight Time)

To create a countdown timer using Moment.js, we can use the setInterval function to display the time remaining as time elapses.

For instance, we can write the following HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

<div>

</div>

to add the script tag and div.

Then we write:

const eventTime = 1366549200;
const currentTime = 1366547400;
const diffTime = eventTime - currentTime;
let duration = moment.duration(diffTime * 1000, 'milliseconds');
const interval = 1000;
const countdown = document.querySelector('div')

setInterval(() => {
  duration = moment.duration(duration - interval, 'milliseconds');
  countdown.innerText = duration.hours() + ":" + duration.minutes() + ":" + duration.seconds()
}, interval);

to add the countdown logic.

We have the eventTime and currentTime timestamps in milliseconds.

Then we compute their difference and assigned it to diffTime .

We then call moment.duration to get the duration in milliseconds.

Next, we add:

duration = moment.duration(duration - interval, 'milliseconds');

into the setInterval callback to get the duration remaining.

Then we display the time remaining in the div with:

countdown.innerText = duration.hours() + ":" + duration.minutes() + ":" + duration.seconds()