Apply CSS via JavaScript

 

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>

Fore more, continue here...

Define own custom HTML element

 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>

 

 

Fore more, continue here...

Show array data without for loop in javascript

 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>

Fore more, continue here...

Generate random string in javascript

Generate random string in JavaScript

 

If you are coding in JavaScript and there are some need to Generate random string then how to Generate random string in JavaScript ?

Here is the few lines of code that is generate random String in JavaScript.

const myRndStr = () => Math.random().toString(36).slice(2)
const sstr1= myRndStr();
console.log(sstr1);

const sstr2= myRndStr();
console.log(sstr2);

const sstr3= myRndStr();
console.log(sstr3);

OUTPUT

Explanation:

In Math.random().toString() you can pass number 36. It is max limit number and you can not pass greater than 36 number. So it will generate a string like "0.1vjydtyngt58" Now you can get all string after that "0.1" using function ".slice(2)" as Math.random().toString(36).slice(2). Then you will get something like this "vjydtyngt58"

If you will pass greater than 36 number then you will see error message "Uncaught RangeError: radix must be an integer at least 2 and no greater than 36"

I have used arrow operator ()=> to generate random string. We can also create it in Vanilla JavaScript as below:

function genRndStr(){
return Math.random().toString(36).slice(2);
}
const str4=genRndStr()
console.log(str4);

Fore more, continue here...

How to add inline javascript using createElement

How to add inline javascript using createElement

Here  are the 2 examples of codes.

Code 1:

<script>
var scriptNode          = document.createElement ("script");
scriptNode.textContent  = "alert('aaa');";
document.head.appendChild (scriptNode);
</script>

Code 2:

<script>
var scriptNode=document.createElement("script");
scriptNode.textContent= "!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,document,'script','https://connect.facebook.net/en_US/fbevents.js');fbq('init',  'mynumber' );fbq('track', 'PageView', {customer_groups: 'Visitatore',default_customer_group: ''});";
document.head.appendChild (scriptNode);
</script>
 

 

 

 

Fore more, continue here...

pass and get data in createElement statement in javascript

How to pass and get data in createElement statement in javascript?

Here is the listed below code:

In "a1.html"
<script>
var myscript= document.createElement('script');
myscript.setAttribute('data-id1','fordata1');
myscript.setAttribute('data-id2','fordata2');
myscript.setAttribute('data-id3','fordata3');
myscript.setAttribute('data-id4','fordata4');
myscript.setAttribute('data-id5','fordata5');
myscript.setAttribute('src','get-id-in-js.js');
document.head.appendChild(myscript);
</script>

 

 In "get-id-in-js.js" file

var scripts=document.getElementsByTagName("script");
console.log(scripts[0].getAttribute("data-id1"));
console.log(scripts[0].getAttribute("data-id2"));
console.log(scripts[0].getAttribute("data-id3"));
console.log(scripts[0].getAttribute("data-id4"));
console.log(scripts[0].getAttribute("data-id5"));

 

 

 

Fore more, continue here...

pass and get data in script tag in javascript

How to pass and get data in script tag in javascript Here is the code: 

In "a1.html"

<script async="" data-id1="fordata1" data-id2="fordata2" data-id3="fordata3" data-id4="fordata4" data-id5="fordata5" src="get-id-in-js.js"></script>
 

 In "get-id-in-js.js" file: 

var scripts=document.getElementsByTagName("script");console.log(scripts[0].getAttribute("data-id1")); console.log(scripts[0].getAttribute("data-id2")); console.log(scripts[0].getAttribute("data-id3")); console.log(scripts[0].getAttribute("data-id4")); console.log(scripts[0].getAttribute("data-id5")); 

 

 

 

Fore more, continue here...

Javascript Events of mousedown mousemove keydown scroll touchstart click keypress touchmove

Javascript Events of mousedown mousemove keydown scroll touchstart click keypress touchmove
<script type="text/javascript">
var sd=!1;
console.log(sd);
function myworker(){
    if(!sd){
        sd=!0;
        console.log("Yes");
        console.log(sd);
    }
}
var myallEvents=["mousedown","mousemove","keydown","scroll","touchstart","click","keypress","touchmove"];
myallEvents.forEach(function(t){window.addEventListener(t,myworker,!1)});
</script>

Fore more, continue here...

Website Speed Optimizer

Website loading speed is slow then lots of your website's web page will is get de-index in Google, yahoo, Bing and many other search engine. If your website's pages will not get index then it will not show in search engine's search result. it means you will never able to show your products etc for consumers. if you needed to increase your website loading speed then please contact us. 

 

Why website speed is important ?
https://developers.google.com/web/updates/2018/07/search-ads-speed

 

If your site is slow then it is not good for your site, because no one like to open slow site.
So you must increase your site speed as much as possible.

By improve site speed you can solve conversion rate issue.

There are many plugins and apps available today, but some time no any plugins and app increase speed of your site. Also some hosting not allow to install speed plugin for ex: WPEngine hosting.

https://www.twine.net/amitt800

Fore more, continue here...

Respect to Baby Girls Girls and Ladies

Respect to Baby Girls, Girls and Ladies.  बच्चियों, लड़कियों और महिलाओं को सम्मान दें इज्ज़त करें |

Respect to Baby Girls, Girls and Ladies.

बच्चियों, लड़कियों और महिलाओं को सम्मान दें इज्ज़त करें |

 

 

 

Fore more, continue here...