How to add a one-way transition with CSS?

To add a one-way transition with CSS, we use the transition property.

For instance, we write

input {
  background: white;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  -ms-transition: background 0.5s;
  -o-transition: background 0.5s;
  transition: background 0.5s;
}

to transition the background to white with background: white;.

And we add the transition for 0.5 seconds with transition: background 0.5s;.

How to display HTML form as an inline element?

To display HTML form as an inline element, we remove the padding and margin from the form element.

For instance, we write

<form style="margin: 0; padding: 0">
  <p>
    Read this sentence
    <input style="display: inline" type="submit" value="push this button" />
  </p>
</form>

to add a from and set the margin and padding to 0.

And we display the input as an inline element with display: inline.

How to prevent a browser from storing passwords with HTML and JavaScript?

To prevent a browser from storing passwords with HTML and JavaScript, we set the autocomplete attribute to off and change the readonly attribute dynamically.

For instance, we write

<input
  type="text"
  name="username"
  autocomplete="off"
  readonly
  onfocus="this.removeAttribute('readonly');"
/>

to set the autocomplete attribute to off.

And we set the onfocus attribute to JavaScript code that calls removeAttribute on the element to remove the readonly attribute when we focus on it.

How to open a link in a new tab with JavaScript in a Chrome extension?

To open a link in a new tab with JavaScript in a Chrome extension, we call the chrome.tabs.create method.

For instance, we write

{
  //...
  "background": {
    "scripts": ["background.js"]
  }
  //...
}

in manifest.json to add the background.js script as a background script.

Then we write

chrome.browserAction.onClicked.addListener((activeTab) => {
  const url = "http://example.com/";
  chrome.tabs.create({ url });
});

in background.js to add a click listener for our Chrome extension with onClicked.addListener.

In the listener, we call chrome.tabs.create with { url } to open a new tab that goes to the url.

How to avoid decimal values in a number input with JavaScript?

To avoid decimal values in a number input with JavaScript, we use parseInt to convert the value to an integer.

For instance, we write

<input
  type="number"
  oninput="this.value = (parseInt(this.value) || 0)"
  placeholder="0-9"
  autofocus=""
  value="0"
/>

to add a number input with the oninput attribute set to this.value = (parseInt(this.value) || 0).

The code is run as we type.

And it calls parseInt to parse the input value into an integer.

We then assign that as the new input value.

How to replace CSS files on the fly with JavaScript?

To replace CSS files on the fly with JavaScript, we can create a new link element.

For instance, we write

function changeCSS(cssFile, cssLinkIndex) {
  const oldlink = document.getElementsByTagName("link").item(cssLinkIndex);
  const newlink = document.createElement("link");
  newlink.setAttribute("rel", "stylesheet");
  newlink.setAttribute("type", "text/css");
  newlink.setAttribute("href", cssFile);

  document
    .getElementsByTagName("head")
    .item(cssLinkIndex)
    .replaceChild(newlink, oldlink);
}

to add the changeCSS function.

In it, we get the link element and get the link element to replace with the item meethod and the cssLinkIndex index.

Then we create a new link element with createElement.

We add the attributes for the new element with setAttribute.

And then we get the head element with getElementsByTagName and item.

We then call replaceChild to replace the oldLink element with the newLink link element.

How to add an SVG element to an existing SVG using DOM with JavaScript?

To add an SVG element to an existing SVG using DOM with JavaScript, we use the createElementNS method.

For instance, we write

const [svg] = document.getElementsByTagName("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);

to get the svg element with getElementsByTagName.

And then we call createElementNS to create a path element in the "http://www.w3.org/2000/svg" namespace.

Next, we add the d attribute to the path element with setAttribute.

And then we set the stroke and strokeWidth styles on the path element.

Finally, we call svg.appendChild to append newElement to the svg element.

How to add a form tag in each table row in HTML?

To add a form tag in each table row in HTML, we add a form element and reference the form with the form attribute in the inputs.

For instance, we write

<table>
  <tr>
    <td>Id</td>
    <td>Name</td>
    <td>Description</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>
      <form id="form1"><input type="hidden" name="id" value="1" /></form>
    </td>
    <td><input form="form1" type="text" name="name" value="Name" /></td>
    <td>
      <input form="form1" type="text" name="description" value="Description" />
    </td>
    <td><input form="form1" type="submit" value="Save" /></td>
  </tr>
  <tr>
    <td>
      <form id="form2"><input type="hidden" name="id" value="1" /></form>
    </td>
    <td><input form="form2" type="text" name="name" value="Name" /></td>
    <td>
      <input form="form2" type="text" name="description" value="Description" />
    </td>
    <td><input form="form2" type="submit" value="Save" /></td>
  </tr>
</table>

to add a table with the form element in the first td element of each row.

Then we add inputs to the other td elements and reference the form by its ID with the form attribute.