Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
To redirect to another webpage using JavaScript, the code is as follows −Example Live Demo Redirect to a Webpage Example Redirect Click the above button to Redirect to another Webpage document .querySelector(".redirectBtn") .addEventListener("click", redirectFunction); function redirectFunction() { location.href("https://tutorialspoint.com/"); } OutputThe above code will produce the following output −On clicking the “Redirect” button we will be redirected to a new site −
To create a speed 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; } Speed Converter Type speed in Kilometer per hour to convert it into meter per hour Kilometer Per Hour Meters Per second: function KmphtoMphConverter(speed) { document.querySelector(".metersPerSecond").innerHTML = speed * 0.277778; } OutputThe above code will produce the following output −On entering some speed in kph −
To create a length 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; } Length Converter Type length in Kilometers to convert it into meters Kilometers Meters: function KmtoMConverter(length) { document.querySelector(".meters").innerHTML=length*1000; } OutputThe above code will produce the following output −On entering length in kilometers −
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 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 −