Suppose you have 2 Div tag. And want the make inner tag center
<div id="d1">
<div id="d2">
</div>
</div>
Then you will use below 1 line css code as below:
style="margin: 0 auto;"
<div id="d1">
<div id="d2" style="margin: 0 auto;" >
</div>
</div>
Change <section> tag's background image at runtime. we assume that <section> tag's "back-img-url" attribute have the image link.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change <section> tag's background image at runtime. we assume that <section> tag's "back-img-url" attribute have the image link. </title>
</head>
<body>
Change <section> tag's background image at runtime. we assume that <section> tag's "back-img-url" attribute have the image link.
<section id="sec" class="image_main-banner-class module-container image-full-width-img text-text good-style fullimg-width-background "
back-img-url="IMAGE-URL">
Test Test Test<br/>Test Test Test<br/>Test Test Test<br/>Test Test Test<br/>Test Test Test<br/>Test Test Test<br/>Test Test Test<br/>
</section>
<script>
try {
let sec = document.getElementsByClassName("image_main-banner-class module-container image-full-width-img text-text good-style fullimg-width-background ");
let img=sec[0].getAttribute("back-img-url");
sec[0].style.backgroundImage = "url('"+img+"')";
} catch (err) { console.log(err); }
let tttt=0
if (window.screen.width < 500) {
tttt=5000;
} else {
tttt=2500;
}
</script>
</body>
</html>
<!doctype html>
<html lang="en-au">
<head>
<meta charset="utf-8">
<title>Homepage</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.story { content-visibility: auto; contain-intrinsic-size: auto 1300px;}
body { font-size: 18px; background: #fdfbfb; padding: 0 2rem; font-family: sans-serif; box-sizing: border-box; line-height: 1.4;}
article { margin: 0 auto; max-width: 960px;}
article p:first-of-type { font-size: 1.2rem;}
blockquote { padding: 2rem; border: 3px dashed rebeccapurple;}
h1 { text-align: center; font-size: 2.75rem;}
a { color: inherit; font-weight: bolder;}
ul { list-style: none;}
nav { display: flex; justify-content: space-between; align-items: center;}
nav ul { list-style: none;}
figure { width: 100%; margin: 0;}
img { width: 100%; max-width: 100%;}
ul { list-style: circle;}
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; margin-bottom: 1rem;}
figcaption { font-size: 80%; background: rebeccapurple; color: white; text-align: center; padding: 1rem; margin: -1rem auto 1rem; z-index: 1; position: relative; width: 80%; max-width: 400px;}
</style>
</head>
<body>
<article>
<h1>The Art of Bug Debugging</h1>
<figure>
<img src="https://picsum.photos/960/550" alt="" />
</figure>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quo
accusantium corrupti magnam, rem non ad dignissimos alias! Voluptas
molestias expedita pariatur temporibus adipisci ab quaerat fugiat
quisquam aliquid ad!
</p>
<blockquote>
Saepe illum rerum quasi sed cum vel, esse iusto fugiat enim aperiam
voluptate qui eius maxime quo eum dicta. Incidunt, nostrum perferendis.
</blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius
consequuntur nulla adipisci ratione velit perspiciatis repellat ipsa
tempore earum hic corporis, provident reprehenderit maiores commodi qui
rerum nisi animi quaerat! Lorem ipsum dolor sit amet consectetur
adipisicing elit. Obcaecati voluptatem officia qui blanditiis et
laudantium, corrupti fuga fugit? Saepe eius sit totam ipsam nesciunt
debitis amet at quos doloribus porro.
</p>
<figure>
<img src="https://picsum.photos/960/550?random=2" alt="" />
<figcaption>
<a href="#">Lorem ipsum</a> dolor sit amet consectetur, adipisicing
elit. Doloremque, praesentium.
</figcaption>
</figure>
<h2>How to inspect the issue</h2>
<div class="story">
<blockquote>
Saepe illum rerum quasi sed cum vel, esse iusto fugiat enim aperiam
voluptate qui eius maxime quo eum dicta. Incidunt, nostrum perferendis.
</blockquote>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
officiis omnis, maiores corporis, commodi temporibus necessitatibus
minus quae et eum repudiandae sequi voluptates magnam consequuntur
</p>
<div class="grid-2">
<figure>
<img src="https://picsum.photos/475?random=1" alt="" />
</figure>
<figure>
<img src="https://picsum.photos/475?random=2" alt="" />
</figure>
</div>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos, vitae,
odit pariatur mollitia facere quo debitis libero optio obcaecati
exercitationem voluptas, beatae fugiat! Optio voluptates at harum eum
ad molestiae. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Blanditiis, accusamus nulla? Delectus atque rerum vitae nostrum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto illum
odio eos dolorum molestias expedita optio cum fugiat illo sequi
veritatis iure alias dolor corrupti eum tempora explicabo, minus quam!
</p>
<ul>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
<li>
Soluta nisi culpa nemo praesentium explicabo itaque aliquam tenetur
quae saepe harum, incidunt consequatur libero?
</li>
<li>Nemo saepe doloremque enim praesentium provident officiis!</li>
</ul>
<p>
Numquam animi repellat exercitationem illo, ipsa facilis dolore quo
sunt cupiditate voluptatum dolorem, asperiores provident porro
excepturi temporibus repellendus iure laboriosam vero
</p>
<div class="grid-2">
<figure>
<img src="https://picsum.photos/475?random=4" alt="" />
<figcaption>
Ipsum veniam saepe atque maxime incidunt hic reprehenderit
consectetur vero.
</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/475?random=5" alt="" />
<figcaption>
Facilis nesciunt perferendis porro asperiores provident.
</figcaption>
</figure>
</div>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum
aliquid natus numquam rerum omnis obcaecati, explicabo quibusdam
assumenda dolorem ut iure modi quod voluptates cum eveniet consectetur
aperiam distinctio nisi.
</p>
</div>
<h2>Don't ask your colleagues for help</h2>
<div class="story">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
officiis omnis, maiores corporis, commodi temporibus necessitatibus
minus quae et eum repudiandae sequi voluptates magnam consequuntur
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, debitis
consequatur beatae veritatis distinctio molestiae nemo! Velit labore
et officiis distinctio. Molestiae minima perspiciatis magni mollitia
dolore. Rem, in consectetur.
</p>
<blockquote>
Saepe illum rerum quasi sed cum vel, esse iusto fugiat enim aperiam
voluptate qui eius maxime quo eum dicta. Incidunt, nostrum perferendis.
</blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto illum
odio eos dolorum molestias expedita optio cum fugiat illo sequi
veritatis iure alias dolor corrupti eum tempora explicabo, minus quam!
</p>
<ul>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
<li>
Soluta nisi culpa nemo praesentium explicabo itaque aliquam tenetur
quae saepe harum, incidunt consequatur libero?
</li>
<li>Nemo saepe doloremque enim praesentium provident officiis!</li>
</ul>
<p>
Numquam animi repellat exercitationem illo, ipsa facilis dolore quo
sunt cupiditate voluptatum dolorem, asperiores provident porro
excepturi temporibus repellendus iure laboriosam vero
</p>
<div class="grid-2">
<figure>
<img src="https://picsum.photos/475?random=6" alt="" />
<figcaption>
Ipsum veniam saepe atque maxime incidunt hic reprehenderit
consectetur vero.
</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/475?random=7" alt="" />
<figcaption>
Facilis nesciunt perferendis porro asperiores provident.
</figcaption>
</figure>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse ipsam
voluptas explicabo optio ullam molestias eaque dicta reiciendis
similique commodi possimus nostrum fugit id illo et, consequatur omnis
labore quasi!
</p>
</div>
<h2>Improve your performance by making som coffee</h2>
<div class="story">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
officiis omnis, maiores corporis, commodi temporibus necessitatibus
minus quae et eum repudiandae sequi voluptates magnam consequuntur
</p>
<ul>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
<li>
Soluta nisi culpa nemo praesentium explicabo itaque aliquam tenetur
quae saepe harum, incidunt consequatur libero?
</li>
<li>Nemo saepe doloremque enim praesentium provident officiis!</li>
</ul>
<blockquote>
Saepe illum rerum quasi sed cum vel, esse iusto fugiat enim aperiam
voluptate qui eius maxime quo eum dicta. Incidunt, nostrum perferendis.
</blockquote>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos, vitae,
odit pariatur mollitia facere quo debitis libero optio obcaecati
exercitationem voluptas, beatae fugiat! Optio voluptates at harum eum
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto illum
odio eos dolorum molestias expedita optio cum fugiat illo sequi
veritatis iure alias dolor corrupti eum tempora explicabo, minus quam!
</p>
<p>
Numquam animi repellat exercitationem illo, ipsa facilis dolore quo
sunt cupiditate voluptatum dolorem, asperiores provident porro
excepturi temporibus repellendus iure laboriosam vero
</p>
<div class="grid-2">
<figure>
<img src="https://picsum.photos/475?random=8" alt="" />
<figcaption>
Ipsum veniam saepe atque maxime incidunt hic reprehenderit
consectetur vero.
</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/475?random=9" alt="" />
<figcaption>
Facilis nesciunt perferendis porro asperiores provident.
</figcaption>
</figure>
</div>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum
aliquid natus numquam rerum omnis obcaecati, explicabo quibusdam
assumenda dolorem ut iure modi quod voluptates cum eveniet consectetur
aperiam distinctio nisi.
</p>
</div>
<h2>Don't forget to deploy to production on Friday!</h2>
<div class="story">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
officiis omnis, maiores corporis, commodi temporibus necessitatibus
minus quae et eum repudiandae sequi voluptates magnam consequuntur
</p>
<div class="grid-2">
<figure>
<img src="https://picsum.photos/475?random=2" alt="" />
</figure>
<figure>
<img src="https://picsum.photos/475?random=3" alt="" />
</figure>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto illum
odio eos dolorum molestias expedita optio cum fugiat illo sequi
veritatis iure alias dolor corrupti eum tempora explicabo, minus quam!
</p>
<blockquote>
Saepe illum rerum quasi sed cum vel, esse iusto fugiat enim aperiam
voluptate qui eius maxime quo eum dicta. Incidunt, nostrum perferendis.
</blockquote>
<p>
Numquam animi repellat exercitationem illo, ipsa facilis dolore quo
sunt cupiditate voluptatum dolorem, asperiores provident porro
excepturi temporibus repellendus iure laboriosam vero
</p>
<div class="grid-2">
<figure>
<img src="https://picsum.photos/475?random=4" alt="" />
<figcaption>
Ipsum veniam saepe atque maxime incidunt hic reprehenderit
consectetur vero.
</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/475?random=5" alt="" />
<figcaption>
Facilis nesciunt perferendis porro asperiores provident.
</figcaption>
</figure>
</div>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum
</p>
</div>
</article>
</body>
</html>
Here is the below code that will load the iframe video when it iframe will be in the viewport.
It is important that to fill the page i have used image tag with width and height.
You can use your own data.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy load iframe video using IntersectionObserver</title>
</head>
<body>
<br/><img width="500" height="500" src="https://imgd.aeplcdn.com/1056x594/n/cw/ec/185315/jupiter-right-side-view-16.jpeg?isig=0&q=80" alt="Sample Image">
<br/><img width="500" height="500" src="https://imgd.aeplcdn.com/1056x594/n/cw/ec/185315/jupiter-right-side-view-16.jpeg?isig=0&q=80" alt="Sample Image">
<br/><img width="500" height="500" src="https://imgd.aeplcdn.com/1056x594/n/cw/ec/185315/jupiter-right-side-view-16.jpeg?isig=0&q=80" alt="Sample Image">
<br/><img width="500" height="500" src="https://imgd.aeplcdn.com/1056x594/n/cw/ec/185315/jupiter-right-side-view-16.jpeg?isig=0&q=80" alt="Sample Image">
<br/><img width="500" height="500" src="https://imgd.aeplcdn.com/1056x594/n/cw/ec/185315/jupiter-right-side-view-16.jpeg?isig=0&q=80" alt="Sample Image">
<iframe allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" title="Title" url-src="PUT-YOUYUBE-VIDEO-LINK-HERE"
id="widget2" data-gtm-yt-inspected-5="true" width="640" height="360" frameborder="0"></iframe>
<script>
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const iframe = entry.target;
//iframe.src = iframe.dataset.src; // Assume if you use data-src for youtube link
iframe.src=iframe.getAttribute('url-src');
observer.unobserve(iframe);
}
});
});
const iframes = document.querySelectorAll('iframe[url-src]');
iframes.forEach(iframe => {
observer.observe(iframe);
});
</script>
</body>
</html>
We can achieve it by 2 method.
1- Standard auto execute function.
2- Arrow function.
<script>
(function() {
const iamvar1= 'Iam var 1';
console.log('Auto Execute 1 function');
})();
</script>
<script>
(()=> {
const iamvar2= 'Iam var 2';
console.log('Auto Execute 2 function');
})();
</script>
You are working on Shopify project with a snippet. In that snippet you want pass value as per your need. So how can you achieve it ?
Let assume that you will use a snippet "rimg-a.liquid" in other liquid file and want to use as below. You want to pass imgurl, class and fetch value.
================================================
content of any liquid file or theme.liquid file in where you want to use rimg-a.liquid snippet file
include 'rimg-a',
imgurl: 'URl-IMAGE',
class: 'feature-mobile',
fetch: 'yes'
================================================
content of rimg-a.liquid file
<img {% if fetch != blank %} fetchpriority="high" decoding="async" {% endif %}
{% if imgurl != blank %}
src="{{ imgurl | split:'?' | first | replace: '2078x2233','390x419' }}"
{% endif %}
{% if class != blank %}class="{{ class }}"{% endif %}
>
You have a website and want to test it's pagespeed performance score at Google Pagespeed Insights test tool. You simply enter the website link and click on analysis to show the speed score result. But after few second you see the error "Unable to resolve <website url> Try checking the for validity Google Pagespeed Insights". You wondering and doubt that is really the website URL existing or not? So for cross checking you enter the website link in browser and see the website is loading.
So now the question is why Google Pagespeed Insight show "Unable to resolve <website url> Try checking the for validity Google Pagespeed Insights" error in result even website is existing?
It is due to too much slow your website. There are some timeout limit in Google Pagespeed test. if your website fetch in that limits time then speed score show else the error "Unable to resolve <website url> Try checking the for validity Google Pagespeed Insights" will show.
So to overcome this problem you need to increase your website speed, so Google Pagespeed Insights able to fetch it and show speed score result.
I am expert in Genuine Website Speed Optimization (Guaranteed REAL Pagespeed Performance 70-90+ Score ), On Page SEO, Off Page SEO, Improve Core Web Vitals, Technical SEO, Website development, Desktop app/software development, Secure website from Hacker, Removing Malware Virus, Debugging, Bug fixing and Data Science. Please contact me for below services.
My services are below :
Genuine & Ethical website speed optimization
Guaranteed Genuine Page Speed Performance 70-80-90+ range score.
I will provide you my Suggestions/Changes to get Guaranteed Genuine 70-80-90+ Range PageSpeed Performance score for your website's homepage at Google PageSpeed Insights.
I have confidently improved many complex website's speed. I know how to improve website speed without install speed plugin/app/extension. If you used many speed plugin/app and professional and still not getting Google PageSpeed Score which you want then contact me for speed of any type website. Please contact me to improve Speed or CORE WEB VITALS of below platform's website:
PHP | SHOPIFY | WORDPRESS | BIGCOMMERCE | MAGENTO | WEBFLOW | WIX | HUBSPOT | SQUARESPACE | BLOGSPOT BLOGGER | WEEBLY | CLICKFUNNEL | ADOBE MUSE | OPENCART | CS CART | PRESTASHOP | MAGENTO | DRUPAL | JAVA | JOOMLA | KAJABI | LIGHTSPEED | MODx | NETO MAROPOST | NODEJS | REACTJS | NEXTJS | BOOTSTRAP | ASP.NET | LARAVEL | CODEIGNITER | Yii | SHOPWARE | SHOPWIRED | VBULLETIN | STATIC HTML Website & And many more platform.
Core Web Vitals
Contact me for improvement of CORE WEB VITALS score of below metrics:
1- First Contentful Paint- FCP
2- Largest Contentful Paint LCP
3- Cumulative Layout Shift - CLS
4- Interaction to Next Paint - INP
5- First Input Delay - FID
6- Time To First Byte - TTFB
7- Total Blocking Time - TBT
8- Google Search Console.
White Hat SEO, Technical SEO
Off Page SEO, On Page SEO and Technical SEO or Digital Marketing of any
type website, Software, Brands. channel etc. I only do White Hat SEO.
Find lost Android Mobile’s location
You have Android mobile and suddenly you lost it then how to find it’s location and Play sound in it so you can find it. here is the some steps:
1- Log on using laptop or any other device at https://www.google.com/android/find
2- After login you will see all the lists of Mobile Devices.
3- Now you can choose any one mobile device which is lost
4- Now you will see 3 options:
A- Play sound
B- Secure device
C- Factory reset device
5- Click on anyone which is suited for you.
Simple Class in JavaScript
Here is the below code that demonstrate that how to create class and how to use it.
<script>
class WORKER {
#step1(){console.log("RUN step1");}
#step2(){console.log("RUN step2");}
#step3(){console.log("RUN step3");}
#step4(){console.log("RUN step4");}
#step5(){console.log("RUN step5");}
init() {
this.#renderHTMLFromURL();
}
#renderHTMLFromURL = () => {
this.#step1();
this.#step2();
this.#step3();
this.#step4();
this.#step5();
}
}
new WORKER().init();
</script>
Run multiple tasks one by one in javascript
Here is the code in JavaScript code that demonstrate how to run multiple tasks one by one.
<script>
const one=()=>{console.log(“I am function One”);}
const two=()=>{console.log(“I am function Two”);}
const three=()=>{console.log(“I am function Three”);}
const four=()=>{console.log(“I am function Four”);}
const yieldToMainThreadWork =()=> {
return new Promise(resolve => {
setTimeout(resolve, 2500);
});
}
//async function runAll () {
const runAll = async ()=>{
const tasks=[one,two,three,four];
while (tasks.length > 0) {
const task = tasks.shift();
task();
await yieldToMainThreadWork();
}
}
runAll();
</script>
here is the code that allow to add dependent script :
<script>
const addDependentScripts = async function( scriptsToAdd ) {
const s=document.createElement('script')
for ( var i = 0; i < scriptsToAdd.length; i++ ) {
let r = await fetch( scriptsToAdd[i] )
s.text += await r.text()
}
document.querySelector('body').appendChild(s)
}
</script>
Uses as below :
<script>
try {
addDependentScripts( [
"https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js",
"https://cdn.mywebshopapp.com/test/a1.js",
"https://cdn.mywebshopapp.com/test/a2.js",
"https://cdn.mywebshopapp.com/test/a3.js",
"https://cdn.mywebshopapp.com/test/a4.js"
] );
}
catch (err) { }
</script>
Multiple attribute passing in querySelectorAll
Here I am demonstrating code to how to pass multiple attributes in querySelectorAll.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multiple attribute passing in querySelectorAll</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="mydiv1" width="200" height="200";> MyDiv1 </div>
<div id="mydiv2" width="200" height="200";> MyDiv2 </div>
<div id="mydiv3" width="200" height="200";> MyDiv3 </div>
<div id="mydiv4" width="200" height="200";> MyDiv4 </div>
<div id="mydiv6" class="class1" width="200" height="200";>My Divclass1</div>
<div id="mydiv6" class="class2" width="200" height="200";>My Divclass2</div>
<div id="mydiv6" class="class3" width="200" height="200";>My Divclass3</div>
<div id="myid1">myid1</div>
<div id="myid2">myid2</div>
<div id="myid3">myid3</div>
<div id="myid4" class="myclass1 myclass2 myclass3">
myid4 myclass1 myclass2 myclass3
</div>
<script>
const Test1=()=>{
document.querySelectorAll("div[id=mydiv1],div[id=mydiv2],div[id=mydiv4]").forEach((elem)=>{
console.log(elem.innerHTML);
});
}
Test1();
function Test2(){
document.querySelectorAll("div[class=class1],div[class=class3]").forEach(function(elem){
console.log(elem.innerHTML);
});
}
Test2();
const Test3=()=>{
document.querySelectorAll("#myid1,#myid2,#myid3").forEach((elem)=>{
console.log(elem.innerHTML);
});
}
Test3();
const Test4=()=>{
document.querySelectorAll(".myclass1.myclass2.myclass3[id=myid4]").forEach((elem)=>{
console.log(elem.innerHTML);
});
}
Test4();
</script>
</body>
</html>
How to make load image fast
Images are main parts of any website, Because It says lots of things than text. So it is important to load it fast as much as fast.
To load image fast use below attributes
<link rel="preload" as="image" href="https://site.com/imgs/image.jpg">
<img fetchpriority="high" decoding="async"
src="https://site.com/imgs/image.jpg"
class="myclass" alt="myimage"
width="765"
height="599">
Enable or Disable files folder structure in website domain
Sometime when you type the url or website domain then files and folder structure show. This is normally for the test servers with no security.
Sometime it is useful for testing of different pages and folder etc, because all files and folder show and user can test any files etc. But if you want to apply the security that no any files and folders show then use below code in .htaccess file. if you have no .htaccess files create it. Code is for show files and directory is :
Options +Indexes
This is for show files and folders.
For do not show files and folders use below code:
Options -Indexes
Here is the example where apply css via JavaScript
<script>
const mstyle = document.head.appendChild(document.createElement(‘style’));
style.textContent = /*this is the css*/`
.myclass {
aspect-ratio: 16 / 9; background-color: #000;
position: relative; display: block; contain: content;
background-position: center center;
background-size: cover;
}
#mydivid {
color:green; opacity: 0;
}
`;
</script>
Define own custom HTML element
Here I am demonstrating how to define your own custom HTML element or control and how to use it.
Define is as <my-test-element-one> </my-test-element-one>
and then use my JavaScript. The complete code it below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<my-test-element-one>
</my-test-element-one>
<script>
class my_test_element_one extends HTMLElement{
connectedCallback(){
this.innerHTML=` <div class="myclass" style=" width:600px;height:500px; background-color:green">
<img src="https://images.pexels.com/photos/267415/pexels-photo-267415.jpeg?auto=compress&cs=tinysrgb&w=300" />
</div>`
}
}
customElements.define('my-test-element-one', my_test_element_one);
</script>
</body>
</html>
Show array data without for loop in javascript
Use below code
<script>
const strs1 = ["one ", "two", "three"];
const newst1 = strs.map(st => { console.log(st)});
const mynum = [1, 2, 3];
const newnum = mynum.map(num => { console.log(num)});
</script>
Posts
All Comments
