html meta theme-color only supported by chrome android till now.

the color set the background color of your top part of browser

<meta name="theme-color" content="#4285f4">

but how do we switch it from white to dark and vice-versa for darkmode and lightmode?

let meta = document.getElementsByTagName("META");
                         
meta = [...meta];                         meta.map((elem) => {   
                       
   if (elem.name === "theme-color") meta = elem;  
                       
});
                                                                          if (getCookie("theme") === "dark") {  
       meta.content = "#222";           
 } 
else {
      meta.content = "#fff";       
}
//Theme Toggle
  var gettheme = document.querySelector(".theme-switch");                                                          
  getTheme.addEventListener("click", () => {                                  if (getCookie("theme") === "light") {                                   meta.content = "#222"; 
  } 
else {  
   meta.content = "#fff";                           
}
});

Remove iOS input shadow

You’ll need to use -webkit-appearance: none; to override the default IOS styles. However, selecting just the input tag in CSS will not override the default IOS styles, because IOS adds it's styles by using an attribute selector input[type=text]. Therefore your CSS will need to use an attribute selector to override the default IOS CSS styles that have been pre-set.

input[type=text] {   
    /* Remove First */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

as we working on we knew that event.target,

get the exact element where we clicked.

even the smallest element too , like span.

so

event.currentTarget

The EventTarget whose EventListeners are currently being processed.

It gets the exact element where onclick event is begin triggered.

const elemClick= (event) => {

let elem = event.currentTarget;

}

let today = new Date();
let dd = today.getDate();
let mm = today.getMonth() + 1 //jan start from 0
let yyyy = today.getFullYear() ;

if(dd<10){
dd = ‘0’+dd
}

if(mm<10){
mm = ‘0 ‘ +mm
}

today = YYYY + ‘-’+mm +’-’+dd;

document.getElementById(yourelem).attr( ‘max’ , today);

$(document).ready(function(e){
$(‘body’).tooltip({
selector: ‘.tooltip’
});
})

let dollorText = document.querySelectorAll(‘.elem’)
dollorText = […dollorText]
let dollorList = dollorText.length;
dollorText.map((elem,index)=>{
console.log(elem)
})

create other function and call it inside setTimeout function.

thats how you can pass the paramater

when we are using tabs in design. there’s only one active tab at a time. and we set this manually, right.

I’m linking the bootstrap v4.6 tabs link here.

https://getbootstrap.com/docs/4.6/components/navs/#tabs

but what if we want other tabs to be active/shown sometimes.

lets passed the id along with the link from other pages.

<a class=”nav-link “ href=”./navtabs.html#order-tab” >My Order</a>

and at the navtabs.html page put this jquery at the bottom

let hash = window.location.hash;
if (hash) {
// show the tab
$(‘.nav-tabs a[href=”’ + hash + ‘“]’).tab(‘show’);

//clear the hash
hash = null;
}

when images are loading or broken we should put a fancy background-color for users.
But in png even after images are loaded background- color will be too visible, why? because it a png.
we need js to know its loading time.

Here I use CSS: not selector with detecting the Extention property.

.image img:not([src$=’.png’]){
@include bg;
white-space: wrap;
font-size: 12px;
display: flex;
justify-content: center;
align-items:center;
}

it will help you when you are showing input file uploader, where file type can be anything.
solution: wrap everything in image src attribute and use the background property to show other file type but png