Programming

Online PNG Image to WebP Converter | PNG to WebP Converter

by
Online PNG Image to WebP Converter

Online PNG Image to WebP Converter | PNG to WebP Converter <!DOCTYPE html><html><head><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>PNG to WebP Converter</title><link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css”><style>#image-preview {max-width: 100%;height: auto;}</style></head><body><div class=”container”><h1 class=”center-align”>PNG to WebP Converter</h1><div class=”row”><div class=”col s12″><div class=”card”><div class=”card-content”><div class=”file-field input-field”><div class=”btn”><span>Choose PNG</span><input type=”file” accept=”image/png” id=”png-file” /></div><div class=”file-path-wrapper”><input class=”file-path validate” type=”text” placeholder=”Select a PNG file” /></div></div><div class=”center-align”><button class=”btn waves-effect waves-light” … Read more

Unit converter

by
HTML code of Unit converter

HTML code of Unit converter <!DOCTYPE html><html><head><title>Unit Converter</title><!– Add Materialize CSS –><link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css”></head><body><div class=”container”><h1 class=”center-align”>Unit Converter</h1><div class=”row”><div class=”input-field col s6″><select id=”fromUnit”><option value=”kilometer”>Kilometer</option><option value=”meter”>Meter</option><option value=”centimeter”>Centimeter</option><option value=”decimeter”>Decimeter</option><option value=”millimeter”>Millimeter</option><option value=”angstrom”>Angstrom</option><option value=”mile”>Mile</option><option value=”fathom”>Fathom</option><option value=”yard”>Yard</option><option value=”foot”>Foot</option><option value=”hand”>Hand</option><option value=”inch”>Inch</option><option value=”finger”>Finger</option><option value=”bamboo”>Bamboo</option><option value=”barleycorn”>Barleycorn</option></select><label for=”fromUnit”>From:</label></div><div class=”input-field col s6″><select id=”toUnit”><option value=”kilometer”>Kilometer</option><option value=”meter”>Meter</option><option value=”centimeter”>Centimeter</option><option value=”decimeter”>Decimeter</option><option value=”millimeter”>Millimeter</option><option value=”angstrom”>Angstrom</option><option value=”mile”>Mile</option><option value=”fathom”>Fathom</option><option value=”yard”>Yard</option><option value=”foot”>Foot</option><option value=”hand”>Hand</option><option value=”inch”>Inch</option><option value=”finger”>Finger</option><option … Read more

iFrame Generator – Free Online iFrame Code Generator

by
Free Online iFrame Code Generator

HTML code of iFrame Generator – Free Online iFrame Code Generator Width: <input type=”text” name=”width” id=”iframewidth” />px<br/>Height : <input type=”text” name=”height” id=”iframeheight” />px<br/>URL: <input type=”text” name=”url” id=”url”><br/><br/><button id=”generate”>Generate Iframe</button><br/>iFrame Code<br/><textarea id=”iframecode” style=”width:100%; height:150px;”></textarea><scriptsrc=”https://code.jquery.com/jquery-3.6.0.min.js” integrity=”sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=”crossorigin=”anonymous”></script> Java Script code: $(function() {$(“#generate”).click(function() {var width = $(“#iframewidth”).val();var height = $(“#iframeheight”).val();var url = $(“#url”).val();$(“#iframecode”).val(“<iframe src=’”+url+”‘ width=’”+width+”‘ height=’”+height+”‘></iframe>”);});});

About Us Generator for Website

by
About Us Generator for Website

HTML code of About Us Generator for Website <!DOCTYPE html> <html lang=”en”><head><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>About Us Generator</title><style>body {font-family: Arial, sans-serif;background-color: #f4f4f4;}.container {max-width: 600px;margin: 50px auto;background-color: #fff;padding: 20px;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}label {font-weight: bold;}textarea {width: 100%;height: 200px;margin-top: 10px;}button {padding: 10px 20px;background-color: #007bff;color: #fff;border: none;border-radius: 5px;cursor: pointer;}button:hover {background-color: #0056b3;}.copy-btn {display: block;margin-top: 10px;padding: … Read more

HDFC SIP Calculator Code | Calculate Returns on SIP Investments

by
HDFC SIP Calculator Code

HTML code of HDFC SIP Calculator Code | Calculate Returns on SIP Investments <!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>SIP Calculator (INR)</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;background-color: #f4f4f4;}.container {max-width: 500px;margin: 50px auto;background-color: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}h2 {text-align: center;margin-bottom: 20px;}label {display: block;margin-bottom: 10px;}input[type=”number”] {width: 100%;padding: 8px;border: 1px solid #ccc;border-radius: 4px;}input[type=”submit”] … Read more

Day Counter – Day Difference Calculator

by
Day Difference Calculator

HTML code of Day Counter – Day Difference Calculator <!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>Day Difference Calculator</title><style>/* Optional CSS styling for the calculator *//* You can customize this according to your website’s design */body {font-family: Arial, sans-serif;}.calculator-container {max-width: 400px;margin: 0 auto;padding: 20px;background-color: #f9f9f9;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}input[type=”date”] {width: 100%;padding: 10px;margin-bottom: … Read more

All Countries Random User Generator

by
All Countries Random User Generator

HTML code of All Countries Random User Generator <!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>Random User Generator</title><style>body {font-family: Arial, sans-serif;}.user-info {display: flex;flex-wrap: wrap;gap: 10px;}.user-info img {width: 150px;height: 150px;border-radius: 50%;}.user-info .info {display: flex;flex-direction: column;gap: 5px;}.user-info .info span {font-weight: bold;}</style></head><body><h1>Random User Generator</h1><div class=”user-info”><img id=”user-picture” src=”” alt=”User Picture”><div class=”info”><span>Name:</span><span id=”user-name”></span><span>Email:</span><span id=”user-email”></span><span>Phone:</span><span id=”user-phone”></span><span>Cell:</span><span id=”user-cell”></span><span>Address:</span><span id=”user-address”></span></div></div><button id=”generate-user”>Generate Now</button><script>const generateUserButton = … Read more

Birth Day Calculator | Online Age Calculator

by
Online Age Calculator

HTML code of Birth Day Calculator | Online Age Calculator <script>var mS = [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’];var dat = new Date();var curday = dat.getDate();var curmon = dat.getMonth() + 1;var curyear = dat.getFullYear();var startyear = dat.getFullYear()-100;var endyear = dat.getFullYear();function checkleapyear(datea) {if (datea.getYear() % 4 == 0) {if (datea.getYear() … Read more

How to Create Normal Calculator through HTML

by
Create Normal Calculator through HTML

How to Create Normal Calculator through HTML MTML code for Calculator: <!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>User-Friendly Calculator</title><link rel=”stylesheet” href=”styles.css”></head><body><div class=”calculator”><input type=”text” id=”display” placeholder=”0″ disabled><div class=”buttons”><button id=”clear”>C</button><button id=”backspace”>⌫</button><button>%</button><button>÷</button><button>7</button><button>8</button><button>9</button><button>×</button><button>4</button><button>5</button><button>6</button><button>-</button><button>1</button><button>2</button><button>3</button><button>+</button><button class=”double”>0</button><button>.</button><button class=”double”>=</button></div></div><script src=”script.js”></script></body></html> CSS code for Calculator body {display: flex;justify-content: center;align-items: center;height: 340vh;background-color: #f0f0f0;margin: 0;font-family: ‘Arial’, sans-serif;} .calculator {width: 265px;padding: 20px;background: #fff;border-radius: 18px;box-shadow: 0 4px 10px … Read more