JavaScript add 7 days on today date

var date = new Date();
var res = date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000));


JavaScript add 1 month on today date

var date = new Date();
var res = date.setTime(date.getTime() + (30 * 24 * 60 * 60 * 1000));


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]; => {

if ( === "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";
Change your theme color using js

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;
Remove iOS input shadow

as we working on we knew that,

get the exact element where we clicked.

even the smallest element too , like span.



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;


Get as the exact element at which onClick is specified?

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

dd = ‘0’+dd

mm = ‘0 ‘ +mm

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

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

Set Tomorrow Date as a max attribute in HTML

selector: ‘.tooltip’

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

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.

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

Open different tab from a different link For Bootstrap v4.6

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.

Targeting image with extention CSS3

.image img:not([src$=’.png’]){
@include bg;
white-space: wrap;
font-size: 12px;
display: flex;
justify-content: 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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store