Frontend Tricks
A clickable label with a checkbox
We can actually just put the label element around the checkbox to accomplish the same thing. So when we click "Select" it will select the checkbox.
<label>
<input type="checkbox" name="checkbox" id="checkbox_id" value="value" />Select
</label>
We don't need to click on the checkbox we can check a checkbox just by clicking on the label.
Datalist element
The <datalist> tag is used to provide an "autocomplete" feature for <input>elements. We will see a drop-down list of pre-defined options as you type.
<input list="tags" name="tag" id="tag" />
<datalist id="tags">
<option value="a"></option>
<option value="apple"></option>
<option value="block"></option>
<option value="b"></option>
<option value="city"></option>
<option value="canvas"></option>
<option value="center"></option>
</datalist>
Console.table
This method writes a table in the console view.
let emp1 = { name: "John", age: 34 };
let emp2 = { name: "Samuel", age: 54 };
let emp3 = { name: "Alex", age: 28 };
console.table([emp1, emp2, emp3]);
Math.round & Math.floor alternatives
The round() method rounds a number to the nearest integer.
console.log(Math.round(30.33));
the output will be 30, the same result can be obtained by using +.5|0
console.log(30.33 + 0.5 | 0);
The floor() method rounds a number downwards to the nearest integer, and returns the result.
console.log(Math.floor(201.2));
the output will be 201, the same result can be obtained by using 0|
console.log(0 | 201.2);
Writing mode
This property specifies whether lines of text are laid out horizontally or vertically. The default value is "horizontal-tb"
<p style="writing-mode: horizontal-tb">Horizontal text</p>
<p style="writing-mode: vertical-rl">Vertical text</p>
If we enter the URL "data:text/html, <html contenteditable>" and hit the return key. It will turn Chrome into a notepad
Comments
Post a Comment