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;.
To add line break using only CSS, we display elements as block elements.
For instance, we write
h4 {
display: block;
}
to display h4 elements as block elements.
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.
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.
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.
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.
To select an element that has a certain class with CSS, we use a period.
For instance, we write
.myClass {
color: green;
}
to select the elements with class myClass with .myClass.
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.
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.
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> </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.
