To create a temperature converter with HTML and JavaScript, the code is as follows −Example Live Demo    body{       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    }    input,span{       font-size: 20px;    } Temperature Converter Type Temperature in celcius to convert it into fahrenheit Celcius Fahrenheit:    function CtoFConverter(temp) {       document.querySelector(".fahrenheit").innerHTML=(temp-32)/1.8;    } OutputThe above code will produce the following output −On entering temperature in celcius −

To create a weight converter with HTML and JavaScript, the code is as follows −Example Live Demo    body{       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    }    input,span{       font-size: 20px;    } Weight Converter Type weight in kg to convert it into grams Kilogram Grams:    function KgtoGConverter(weight) {       document.getElementById("outputGrams").innerHTML=weight*1000;    } OutputThe above code will produce the following output −On typing some weight in KGs −

To create animations using JavaScript, the code is as follows −Example Live Demo    body{       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    }    button{       padding:10px;       font-size: 18px;       background-color: blue;       color:white;       border:none;       margin-bottom:10px;    }    .Animation {       width: 60px;       height: 60px;       position: absolute;       background-color: rgb(134, 25, 207);    } Animation using JS example Start Animation    function startAnimation() {       var elem = document.querySelector(".Animation");       var pos = 0;       var id = setInterval(frame, 10);       function frame() {          if (pos == 450) {             clearInterval(id);          } else {             pos++;             elem.style.borderRadius = pos/14 + 'px';             elem.style.left = pos + 'px';          }       }    } OutputThe above code will produce the following output −On clicking the “Start Animation” button −

To create and use syntax highligher, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .colorLinks {       color: rgb(131, 44, 212);       text-decoration: none;       font-size: 20px;       font-weight: bold;    }    .setColor {       margin: 20px;       padding: 10px;       border: none;       font-size: 18px;       background-color: rgb(226, 43, 89);       color: white;    } Syntax Highlighting example Go to google.com Go to facebook.com Click Here Click the above button to highlight the links    var anchrorRg = /[^

To use media queries with JavaScript, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       color: white;       padding: 20px;    } Using media queries with JavaScript Example Resize the screen to see the color change from blue to red    var mediaQuery = window.matchMedia("(max-width: 700px)");    function setColor(mediaQuery) {       if (mediaQuery.matches) {          document.body.style.backgroundColor = "red";       } else {          document.body.style.backgroundColor = "blue";       }    }    setColor(mediaQuery);    mediaQuery.addListener(myFunction); OutputThe above code will produce the following output on window size greater than 700px −On resizing the browser window size less than 700px −

To create a draggable HTML element with JavaScript and CSS, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .dragDiv {       position: absolute;       z-index: 9;       text-align: center;       border: 1px solid #d3d3d3;       padding: 30px;       cursor: move;       z-index: 10;       background-color: rgb(108, 24, 177);       color: #fff;       font-size: 20px;       font-weight: 500;    } ... Read More

To close list items with JavaScript, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    * {       box-sizing: border-box;    }    ul {       list-style-type: none;       padding: 0;       margin: 0;    }    ul li {       border: 1px solid rgb(221, 221, 221);       background-color: #5a5cec;       color: white;       padding: 12px;       text-decoration: none;       font-size: 18px; ... Read More

On any thoughts and quotes website, you must have seen the quote slideshow that includes the quote, the celeb name who gave the same quote and the slider. This slider allows moving to the left or right slideshow by clicking separate buttons like arrow keys. Let us see how to create a quotes slideshow with CSS and JavaScript. Set the parent div The div includes the container for the slideshow, the quotes, and the previous and next buttons as well. The quotes are set using the elements. The celeb name who gave the same quote is set as a ... Read More

On a website, in the bottom-right, you must have seen a popup chat windows. Can be mostly seen on a website hosting website. This allows a user to directly ask sales questions before buying the product. Such popup chat window can be easily created on a web page with CSS. Let us see how. Create the chat button First, create a button using the element − Chat Position the chat button To position the chat button, use the position property with the value fixed. The right and bottom properties are used to position and place the button on bottom-right − .openChatBtn { background-color: ... Read More

We will create a coming soon page with a timer. The timer is set using the setInterval() function. The time is fetched using the getTime() function. Set the div We have set the image as a div class. Rest, the coming soon text and the timer is placed within it − COMING SOON Place the Image The image is now placed using the background-image property. The position is set using the background-position property” .bgimg { background-image: url("https://images.pexels.com/photos/117602/pexels-photo-117602.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"); height: ... Read More