Category: JavaScript Answers

To get the day of the week, we can use the getDay method with an array of day strings to get the day of the week.

For instance, we can write:

const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

const dt = new Date(2021, 1, 1)
const day = days[dt.getDay()];
console.log(day)

We have the days array with day names in it.

Then create the dt date object with the Date constructor.

Next, we call getDay on dt to get the day index starting with 0 for Sunday to 6 for Saturday.

And we pass that into days to get the day name of the date.

Therefore day is 'Monday' .

Get the Month of the Year

To get the day of the week, we can use the getMonth method with an array of day strings to get the month of the year.

For instance, we can write:

const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const dt = new Date(2021, 1, 1)
const month = months[dt.getMonth()];
console.log(month)

We have the months array with the month names.

We have the days array with day names in it.

Then create the dt date object with the Date constructor.

Next, we call getMonth on dt to get the month index starting with 0 for January to 11 for December.

And we pass that into months to get the day name of the date.

Therefore month is 'February' .

To hide the cursor on a web page with CSS, we can use the cursor property.

For instance, we can write the following HTML:

<div class="nocursor">
   Some stuff
</div>

Then we can hide the cursor when our mouse in the div by writing:

.nocursor {
  cursor: none;
}

Hide the Cursor in a Webpage Using JavaScript

To hide the cursor on a web page with JavaScript, we can use the style.cursor property.

For instance, we can write the following HTML:

<div class="nocursor">
   Some stuff
</div>

Then we can hide the cursor when our mouse in the div by writing:

document.getElementsByClassName('nocursor')[0].style.cursor = 'none';

We get the div with getElementsByClassName .

And we set the style.cursor property of it to 'none' to hide the cursor when our mouse is in the div.

We can use the Math.ceil method to round up to the next multiple of 5 with JavaScript.

For instance, we can write:

const round5 = (x) => {
  return Math.ceil(x / 5) * 5;
}
console.log(round5(18))

We create the round5 function to return the number x divided by 5.

Then we round that number up to the nearest integer with Math.ceil .

Next, we multiply that by 5 to get x rounded up to the nearest integer.

Therefore, the console log logs 20.

We can embed SVGs directly with JSX into our React app.

For instance, we can write:

import React from "react";

const SvgWithXlink = (props) => {
  return (
    <svg
      width="100%"
      height="100%"
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
    >
      <style>{\`.classA { fill:${props.fill} }\`}</style>
      <defs>
        <g id="Port">
          <circle style={{ fill: "inherit" }} r="10" />
        </g>
      </defs>

      <text y="15">black</text>
      <use x="70" y="10" xlinkHref="#Port" />
      <text y="35">{props.fill}</text>
      <use x="70" y="30" xlinkHref="#Port" className="classA" />
      <text y="55">blue</text>
      <use x="70" y="50" xlinkHref="#Port" style={{ fill: "blue" }} />
    </svg>
  );
};

export default function App() {
  return (
    <div className="App">
      <SvgWithXlink fill="green" />
    </div>
  );
}

to embed the SVG in the SvgWithXLink component.

We just put the elements required to embed the SVG into the component.

And we can pass props into the elements as we do with any other HTML elements or components.

We have the circle to add circles.

And the xLinkHref attribute lets us the circle by the id of the g element.

x and y are the coordinates of the location of the elements.

In App , we add SvgWithXLink with the fill prop set to 'green' .

Now we see 3 circles.

We can use the document.getElementsByName to get elements by the value of their name attribute.

For instance, if we have the following HTML:

Account <input type="text" name="acc"  value='abc'/>
Password <input type="password" name="pass" />

Then we can get the value of the first input by writing:

const [acc] = document.getElementsByName("acc")
console.log(acc.value)

We call document.getElementsByName with 'acc' to return a NodeList with all the elements that have the name attribute set to acc .

Then we destructure that to get the first element from the NodeList.

Finally, we get the value of it with acc.value .

Therefore, acc.value is 'abc' .