Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
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 a mixed column layout grid with CSS, the code is as follows −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } * { box-sizing: border-box; } .col { color: white; float: left; width: 25%; padding: 10px; } .colContainer:after { content: ""; display: table; clear: both; } @media screen and (max-width: 900px) { .col { width: 50%; } } @media screen and (max-width: 600px) { .col { width: 100%; } } Mixed col Layout Example Resize the screen to see the below divs resize themselves First col Second col Third col Fourth col OutputThe above code will produce the following output −On resizing the screen the 4 column layout will turn 2 column and so on −
To create a list grid view, the code is as follows −Example Live Demo * { box-sizing: border-box; } body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } /* Create two equal columns that floats next to each other */ .column { float: left; width: 50%; padding: 10px; color: white; } /* Clear floats after the columns */ .row:after { content: ""; display: table; ... Read More
To create a 4-column layout grid with CSS, the code is as follows −Example Live Demo body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } * { box-sizing: border-box; } .first, .second, .third, .fourth { float: left; width: 25%; color: white; padding: 10px; height: 500px; text-align: center; } .first { background-color: tomato; } .second { background-color: teal; } .third { background-color: rgb(166, 71, 255); } .fourth { background-color: rgb(255, 71, 194); } .container:after { clear: both; } Four Column grid example Some text on the first div Some text on the second div Some text on the third div Some text on the fourth div OutputThe above code will produce the following output −
To create a 3-column layout grid with CSS, the code is as follows −Example Live Demo body { padding: 1%; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } * { box-sizing: border-box; } .left, .right, .center { float: left; width: 33%; color: white; padding: 10px; height: 500px; text-align: center; } .left { background-color: tomato; } .right { background-color: teal; } .center { background-color: rgb(166, 71, 255); } .container:after { clear: both; } Three Column grid example Some text on the left Some text in center Some text on the right OutputThe above code will produce the following output −
To create a responsive website with Bootstrap 4, the code is as follows −Example Live Demo Bootstrap 4 Website Example body{ height: 100vh; } Website ⇅ Logo Link Link Link Headline 1 Published in January Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias perferendis hic quas praesentium quod totam atque dignissimos nobis numquam consequuntur? Headline 2 Published in march Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam doloribus incidunt voluptatum labore dolorem voluptate iure dicta, dolorum quis maiores. Copyright © Website OutputThe above code will produce the following output −On resizing the screen −
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