To add a degree Celsius symbol into a web page with HTML, we use the ° HTML entity.
For instance, we write
°C
to add the degree Celsius symbol into our web page.
How to add if-else embedding inside HTML with PHP?
To add if-else embedding inside HTML with PHP, we use the short open tag syntax.
For instance, we write
<? if ($condition): ?>
<p>Content</p>
<? elseif ($other_condition): ?>
<p>Other Content</p>
<? else: ?>
<p>Default Content</p>
<? endif; ?>
to add if, elseif, else, and endif clauses in between our HTML code.
How to change the bullet color of an HTML list without using a span with CSS?
To change the bullet color of an HTML list without using a span with CSS, we set the list-style-image property.
For instance, we write
li {
list-style-image: url(images/yourimage.jpg);
}
to set the list-style-image property to url(images/yourimage.jpg) to set the bullet to an image.
How to fix “cursor: pointer” effect in CSS not working?
To fix "cursor: pointer" effect in CSS not working, we should set pointer-events to auto.
For instance, we write
.about > span {
cursor: pointer;
pointer-events: auto;
}
to add pointer-events: auto; to enable mouse events on the span.
Then we add cursor: pointer; to set the cursor to a pointer.
How to detect when CSS property changed using JavaScript?
To detect when CSS property changed using JavaScript, we listen for the DOMAttrModified event.
For instance, we write
document.documentElement.addEventListener(
"DOMAttrModified",
(e) => {
if (e.attrName === "style") {
console.log(e.prevValue, e.newValue);
}
},
false
);
document.documentElement.style.display = "block";
to listen for the DOMAttrModified event on the body element with document.documentElement.addEventListener.
Then we check if the style attribute is changed with e.attrName in the event listener.
We get the previous value of it with e.prevValue and the latest value with e.newValue.
Then when we change the style property, the event will be triggered.
How to get flexbox to include padding in calculations with CSS?
To get flexbox to include padding in calculations with CSS, we use flex-grow with padding.
For instance, we write
.item {
display: flex;
flex: 1;
flex-direction: column;
padding: 0 10px 10px 0;
}
to make the elements with class item a flex container with display: flex;.
We add flex-direction: column; to make the flex direction vertical.
We add flex: 1; to make it stretch with flex-grow with padding being taken accoount in the height calculation.
And then we add padding with padding: 0 10px 10px 0;
How to add horizontal list items with CSS?
To add horizontal list items with CSS, we display the li elements as inline block elements.
For instance, we write
<ul>
<li><a href="#">some item</a></li>
<li><a href="#">another item</a></li>
</ul>
to add a ul with some li elements.
Then we write
ul > li {
display: inline-block;
}
to make the li’s display as inline block elements to make them display horizontally.
How to bind dynamic data to aria-label with Angular?
To bind dynamic data to aria-label with Angular, we use square brackets.
For instance, we write
<div [attr.aria-label]="productDetails?.productName"></div>
to bind the aria-label attribnute to the value of the productDetails?.productName property.
How to focus the input box on page load with HTML?
To focus the input box on page load with HTML, we add the autofocus attribute.
For instance, we write
<input type="text" autofocus />
to add an input with the autofocus attribute to focus on the input when the page loads.
How to get the HTML for a DOM element in JavaScript?
To get the HTML for a DOM element in JavaScript, we use the outerHTML property.
For instance, we write
const el = document.getElementById("foo");
console.log(el.outerHTML);
to get the element with getElementById.
And then we get the code for the element with the outerHTML property.
