Web Development Articles - Page 511 of 1049

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 −

The Google Font is a free font service for computer and web. It launched in the year 2010 and owned by Google. In 2021, open-source icon support was added. It includes 1, 576 font families that includes 352 variable font families. The official website of Google Font is fonts.google.com. Just like the Font Awesome icons, the Google Fonts are added to a website using the element. Let us see how to add and use Google Font on a web page. Features Easily insert Google Fonts on your web page It is having more than 1k font families While ... Read More

We will include a Google Chart to the web page using the google.charts.load(). The draw() method is used to draw the chart. To display, use the BarChart class. First, the chart data is configured. The data of the chart is in a table. Configure the Chart Data Let us first create a function of the chart data. Configure the data to be displayed on the chart. DataTable is a special table structured collection which contains the data of the chart. function drawChart() { var data = google.visualization.arrayToDataTable([ ["Year", "India"], ["2019", 500], ... Read More

A blog layout consists of a header. That header consists of a logo, then the menu, and after that the blog heading, content, etc. With that, the link for some other blogs can also be seen. In the bottom, you have a footer. The footer should have a copyright text. Let us see how to create a blog layout. Create the header The header of a blog consists of a logo on the left and then the website name − Logo ↶ Website Name Position the header Here, we will ... Read More

The zig zag layout would have an image, then text. Next, text, and then image, and it goes on. The responsive zig zag would arrange the text and image according depending on the device, desktop, tablet or mobile. The column will appear on top each other on a smaller device like a mobile. Let us see how to create a responsive zig zag layout with HTML and CSS. Set a container for text We have set a container for text and the class name is given width66. One of them is shown below. The text will take 66% of the ... Read More

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