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.
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.
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.
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.
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.
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;
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.
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.
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.
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.