Posts

Creating a random background color with clickable button

on
0

Creating carousel in html css and javascript

on
0

Creating calculator in html css and javaScrit

on
0

JS Master The JavaScript Fetch API

on
0

Creating Age Calculator in HTML CSS and JavaScript

on
0

What is execCommand() in javaScript

on
0

Creating copy to clipboard in HTML CSS and javaScript

on
0

Creating QR Code Generator in HTML CSS and JavaScript

on
0

Random Quotes Generator Using fetch in HTML CSS and Javascript

on
0

Blogs

Image

How To create a digital-clock in HTML CSS JavaScript

  <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link rel="preconnect" href="https://fonts.googleapis.com">   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap" rel="stylesheet"> <title>Digital Clock</title> <style>  *{     margin: 0;         padding: 0;     }  body{             height: 100vh;             width: 100vw;             background-color: black;            display: flex;            justify-content: center;  ...
Image

LightBox image Galery in html css and javaScript

 Lightbox is a javascript library that displays images and videos by filling the screen, and dimming out the rest of the web page. <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style>         body{             font-family: Verdana, Geneva, Tahoma, sans-serif;             margin: 0;         }         *{             box-sizing: border-box;         }         .row>.column{             padding: 0 8px;         }         .row:after{   ...

Creating a clickable popup box with using html css and javascript

 <DOCTYPE html> <html> <body> <head> <style>  html,body{    margin:0;    padding:0;    font-family:"tahoma";    text-align:center; } #open-modal, #close-modal{    background-color:royalblue;    color:white;    padding:15px;    font-size:20px;    cursor:pointer; } #modal{    background-color:white;    max-width:600px;    margin:0 auto;    padding:20px;    height:200px;    position:relative;    top:30%; } #overlay{   display:none;   width:100%;   height:100%;   position:absolute;   top:0;   left:0;   bottom:0;   right:0;   background:rgba(0,0,0,0.5); } </style> </head>         <div id="overlay">    <div id="modal">       <h2>Contact  Details</h2> <p>Home Sim...