tag:blogger.com,1999:blog-29824624477041535382025-10-11T09:44:09.488-07:00Web Healer Coding Concept Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.comBlogger330125tag:blogger.com,1999:blog-2982462447704153538.post-83376651879446942782025-02-08T21:46:00.001-08:002025-02-08T21:46:06.699-08:00how to Casting Variables During Mathematical Operation in Python<h4 style="text-align: left;"><span style="font-family: verdana;"> how to Casting Variables During Mathematical Operation in Python</span></h4><p><span style="font-family: verdana;">It is very easy to cast variables during mathematical operation using python see the below code</span></p><div style="background-color: #1f1f1f; color: #cccccc; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #9cdcfe;">a</span> <span style="color: #d4d4d4;">=</span> <span style="color: #b5cea8;">100</span></div><div><span style="color: #9cdcfe;">b</span> <span style="color: #d4d4d4;">=</span> <span style="color: #b5cea8;">15.12</span></div><div><span style="color: #9cdcfe;">y</span> <span style="color: #d4d4d4;">=</span> <span style="color: #9cdcfe;">a</span> <span style="color: #d4d4d4;">+</span><span style="color: #9cdcfe;">b</span></div><div><span style="color: #dcdcaa;">print</span>(<span style="color: #9cdcfe;">y</span>)</div><div><span style="color: #dcdcaa;">print</span>(<span style="color: #4ec9b0;">type</span>(<span style="color: #9cdcfe;">y</span>))</div></div><div class="blogger-post-footer">Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.</div>Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.com0tag:blogger.com,1999:blog-2982462447704153538.post-17346241691144721872025-02-08T11:22:00.005-08:002025-02-08T11:26:16.806-08:00List to Tuple and Tuple to List Type Casting in Python<p><span style="font-family: verdana;"> Here is the Code to type cast the different type to Data lists into another</span></p><p><span style="font-family: verdana;">Using Blow code we are converting Tuple to List and List to Tuple using Python</span></p><h2 style="text-align: left;"><span style="font-family: verdana;"><b><span style="color: red;">Note:</span></b> <span style="color: #800180;">we can convert or Cast Collection of Number into Collection of Numbers not single value.</span></span></h2><div style="background-color: #1f1f1f; color: #cccccc; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #9cdcfe;">my_list</span> <span style="color: #d4d4d4;">=</span>[<span style="color: #b5cea8;">1</span>,<span style="color: #b5cea8;">2</span>,<span style="color: #b5cea8;">3</span>,<span style="color: #b5cea8;">4</span>,<span style="color: #b5cea8;">5</span>]</div><div><span style="color: #9cdcfe;">my_tuple</span> <span style="color: #d4d4d4;">=</span>(<span style="color: #b5cea8;">1</span>,<span style="color: #b5cea8;">2</span>,<span style="color: #b5cea8;">3</span>,<span style="color: #b5cea8;">4</span>,<span style="color: #b5cea8;">5</span>)</div><div><span style="color: #dcdcaa;">print</span>(<span style="color: #4ec9b0;">type</span>(<span style="color: #9cdcfe;">my_list</span>))</div><div><span style="color: #dcdcaa;">print</span>(<span style="color: #4ec9b0;">type</span>(<span style="color: #9cdcfe;">my_tuple</span>))</div><div><span style="color: #9cdcfe;">my_tuple_to_list</span> <span style="color: #d4d4d4;">=</span> <span style="color: #4ec9b0;">list</span>(<span style="color: #9cdcfe;">my_tuple</span>)</div><div><span style="color: #9cdcfe;">my_list_to_tuple</span><span style="color: #d4d4d4;">=</span> <span style="color: #4ec9b0;">tuple</span>(<span style="color: #9cdcfe;">my_list</span>)</div><div><span style="color: #dcdcaa;">print</span>(<span style="color: #4ec9b0;">type</span>(<span style="color: #9cdcfe;">my_tuple_to_list</span>))</div><div><span style="color: #dcdcaa;">print</span>(<span style="color: #4ec9b0;">type</span>(<span style="color: #9cdcfe;">my_list_to_tuple</span>))</div></div><div class="blogger-post-footer">Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.</div>Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.com0tag:blogger.com,1999:blog-2982462447704153538.post-72597017280334268322025-02-08T11:13:00.004-08:002025-02-08T11:13:53.054-08:00How to Convert String into Float or Integer using Python<p><span style="font-family: verdana;"> Converting String Data type into Float or Integer data type is very easy in Python, you just need to copy or paste the below code and use it.</span></p><div style="background-color: #1f1f1f; color: #cccccc; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #9cdcfe;">number</span> <span style="color: #d4d4d4;">=</span> <span style="color: #ce9178;">"330"</span></div><div><span style="color: #9cdcfe;">_intNumber</span> <span style="color: #d4d4d4;">=</span><span style="color: #4ec9b0;">int</span>(<span style="color: #9cdcfe;">number</span>)</div><div><span style="color: #9cdcfe;">_floatNumber</span> <span style="color: #d4d4d4;">=</span> <span style="color: #4ec9b0;">float</span>(<span style="color: #9cdcfe;">number</span>)</div><div><span style="color: #dcdcaa;">print</span>(<span style="color: #9cdcfe;">_intNumber</span>)</div><div><span style="color: #dcdcaa;">print</span>(<span style="color: #9cdcfe;">_floatNumber</span>)</div></div><div class="blogger-post-footer">Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.</div>Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.com0tag:blogger.com,1999:blog-2982462447704153538.post-12728875300728824612025-02-08T11:07:00.003-08:002025-02-08T11:07:16.797-08:00How to Convert Integer or Float into String using Python<p> Here is the Code to convert Integer Data type or Float Data type into String Data Type</p><div style="background-color: #1f1f1f; color: #cccccc; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #9cdcfe;">number_int</span> <span style="color: #d4d4d4;">=</span> <span style="color: #b5cea8;">10</span></div><div><span style="color: #9cdcfe;">number_float</span> <span style="color: #d4d4d4;">=</span> <span style="color: #b5cea8;">10.10</span></div><div><span style="color: #9cdcfe;">numberInt_string</span> <span style="color: #d4d4d4;">=</span><span style="color: #4ec9b0;">str</span>(<span style="color: #9cdcfe;">number_int</span>)</div><div><span style="color: #9cdcfe;">numberFloat_string</span> <span style="color: #d4d4d4;">=</span><span style="color: #4ec9b0;">str</span>(<span style="color: #9cdcfe;">number_float</span>)</div><div><span style="color: #dcdcaa;">print</span>(<span style="color: #9cdcfe;">numberFloat_string</span>)</div><div><span style="color: #dcdcaa;">print</span>(<span style="color: #9cdcfe;">numberInt_string</span>)</div></div><div class="blogger-post-footer">Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.</div>Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.com0tag:blogger.com,1999:blog-2982462447704153538.post-42002052266218018282025-02-08T10:59:00.007-08:002025-02-08T10:59:57.221-08:00How to Convert Float Data Type into Integer Data type using Python<p><span style="font-family: verdana;"> Converting Float data Type into Integer Data Type is very easy in Python,</span></p><p><span style="font-family: verdana;">there is Built-in Function available in Python to convert Float Data into Integer Data type int<b>(someValue)</b></span></p><h2 style="text-align: left;"><span style="font-family: verdana;">Here is the Code </span></h2><div style="background-color: #1f1f1f; color: #cccccc; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #9cdcfe;">_isFloat</span> <span style="color: #d4d4d4;">=</span> <span style="color: #b5cea8;">3.56</span></div><div><span style="color: #9cdcfe;">_isInteger</span> <span style="color: #d4d4d4;">=</span> <span style="color: #4ec9b0;">int</span>(<span style="color: #9cdcfe;">_isFloat</span>)</div><div><span style="color: #dcdcaa;">print</span>(<span style="color: #4ec9b0;">type</span>(<span style="color: #9cdcfe;">_isInteger</span>))</div></div><div class="blogger-post-footer">Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.</div>Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.com0tag:blogger.com,1999:blog-2982462447704153538.post-8370504538050171002025-02-08T10:52:00.003-08:002025-02-08T10:52:28.184-08:00What is Type Casting in Python<p><span style="font-family: verdana;"> Type Casting is a Process to convert one data type into another data type.</span></p><p><span style="font-family: verdana;">there are several ways to convert one data type into another data type i.e Integer to Float, Float to Integer, Integer data type or Float Data type into String Data type in Python.</span></p><h3 style="text-align: left;"><span style="font-family: verdana;"><b>For Example : Converting Integer Data Type into Float</b></span></h3><div style="background-color: #1f1f1f; color: #cccccc; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #9cdcfe;">isNumber</span> <span style="color: #d4d4d4;">=</span><span style="color: #b5cea8;">10</span></div><div><br /></div><div><span style="color: #9cdcfe;">isFloat</span> <span style="color: #d4d4d4;">=</span> <span style="color: #4ec9b0;">float</span>(<span style="color: #9cdcfe;">isNumber</span>)</div><div><span style="color: #dcdcaa;">print</span>(<span style="color: #9cdcfe;">isFloat</span>)</div></div><p><br /></p><div class="blogger-post-footer">Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.</div>Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.com0tag:blogger.com,1999:blog-2982462447704153538.post-69436608693546192402025-01-27T07:09:00.000-08:002025-01-27T07:09:43.666-08:00Domain Age Checker Tool Code<p><span style="font-family: verdana;"> Below is the complete responsive code for a "Domain Age Checker Tool." The tool is styled with colorful elements, uses JavaScript for functionality, and incorporates the <code>Tailwind CSS</code> library for responsive and attractive styling.</span></p><p><span style="font-family: verdana;">You can add this code to an <code>index.html</code> file, and it will work directly with Tailwind's CDN</span></p><pre class="brush:c#"><p><span style="font-family: verdana;"><!DOCTYPE html></span></p><p><span style="font-family: verdana;"><html lang="en"></span></p><p><span style="font-family: verdana;"><head></span></p><p><span style="font-family: verdana;"> <meta charset="UTF-8"></span></p><p><span style="font-family: verdana;"> <meta name="viewport" content="width=device-width, initial-scale=1.0"></span></p><p><span style="font-family: verdana;"> <title>Domain Age Checker Tool</title></span></p><p><span style="font-family: verdana;"> <script src="https://cdn.tailwindcss.com"></script></span></p><p><span style="font-family: verdana;"> <style></span></p><p><span style="font-family: verdana;"> body {</span></p><p><span style="font-family: verdana;"> background: linear-gradient(to bottom, #4facfe, #00f2fe);</span></p><p><span style="font-family: verdana;"> }</span></p><p><span style="font-family: verdana;"> </style></span></p><p><span style="font-family: verdana;"></head></span></p><p><span style="font-family: verdana;"><body class="min-h-screen flex items-center justify-center text-gray-800"></span></p><p><span style="font-family: verdana;"> <div class="w-full max-w-md bg-white rounded-2xl shadow-lg p-6"></span></p><p><span style="font-family: verdana;"> <h1 class="text-2xl font-bold text-center text-blue-600 mb-6">Domain Age Checker</h1></span></p><p><span style="font-family: verdana;"> <form id="domainForm" class="flex flex-col space-y-4"></span></p><p><span style="font-family: verdana;"> <input</span></p><p><span style="font-family: verdana;"> type="text"</span></p><p><span style="font-family: verdana;"> id="domainInput"</span></p><p><span style="font-family: verdana;"> class="border border-gray-300 rounded-lg p-3 w-full focus:ring-2 focus:ring-blue-500 outline-none"</span></p><p><span style="font-family: verdana;"> placeholder="Enter domain (e.g., example.com)"</span></p><p><span style="font-family: verdana;"> required</span></p><p><span style="font-family: verdana;"> /></span></p><p><span style="font-family: verdana;"> <button</span></p><p><span style="font-family: verdana;"> type="submit"</span></p><p><span style="font-family: verdana;"> class="bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition"</span></p><p><span style="font-family: verdana;"> ></span></p><p><span style="font-family: verdana;"> Check Age</span></p><p><span style="font-family: verdana;"> </button></span></p><p><span style="font-family: verdana;"> </form></span></p><p><span style="font-family: verdana;"> <div id="result" class="mt-6 hidden"></span></p><p><span style="font-family: verdana;"> <h2 class="text-xl font-semibold text-gray-700">Domain Age Result:</h2></span></p><p><span style="font-family: verdana;"> <p id="ageOutput" class="mt-2 text-lg text-gray-800"></p></span></p><p><span style="font-family: verdana;"> </div></span></p><p><span style="font-family: verdana;"> <div id="error" class="mt-6 hidden text-red-500 font-medium"></div></span></p><p><span style="font-family: verdana;"> </div></span></p><p><span style="font-family: verdana;"><br /></span></p><p><span style="font-family: verdana;"> <script></span></p><p><span style="font-family: verdana;"> // JavaScript functionality</span></p><p><span style="font-family: verdana;"> document.getElementById("domainForm").addEventListener("submit", async (e) => {</span></p><p><span style="font-family: verdana;"> e.preventDefault();</span></p><p><span style="font-family: verdana;"><br /></span></p><p><span style="font-family: verdana;"> const domainInput = document.getElementById("domainInput").value.trim();</span></p><p><span style="font-family: verdana;"> const resultDiv = document.getElementById("result");</span></p><p><span style="font-family: verdana;"> const errorDiv = document.getElementById("error");</span></p><p><span style="font-family: verdana;"> const ageOutput = document.getElementById("ageOutput");</span></p><p><span style="font-family: verdana;"><br /></span></p><p><span style="font-family: verdana;"> // Reset previous results</span></p><p><span style="font-family: verdana;"> resultDiv.classList.add("hidden");</span></p><p><span style="font-family: verdana;"> errorDiv.classList.add("hidden");</span></p><p><span style="font-family: verdana;"><br /></span></p><p><span style="font-family: verdana;"> if (!domainInput) {</span></p><p><span style="font-family: verdana;"> errorDiv.textContent = "Please enter a valid domain name.";</span></p><p><span style="font-family: verdana;"> errorDiv.classList.remove("hidden");</span></p><p><span style="font-family: verdana;"> return;</span></p><p><span style="font-family: verdana;"> }</span></p><p><span style="font-family: verdana;"><br /></span></p><p><span style="font-family: verdana;"> try {</span></p><p><span style="font-family: verdana;"> // Fake API call to calculate domain age (Replace with a real API if needed)</span></p><p><span style="font-family: verdana;"> const domainAge = calculateDomainAge(domainInput);</span></p><p><span style="font-family: verdana;"><br /></span></p><p><span style="font-family: verdana;"> if (domainAge) {</span></p><p><span style="font-family: verdana;"> ageOutput.textContent = `${domainInput} is approximately ${domainAge} years old.`;</span></p><p><span style="font-family: verdana;"> resultDiv.classList.remove("hidden");</span></p><p><span style="font-family: verdana;"> } else {</span></p><p><span style="font-family: verdana;"> errorDiv.textContent = "Unable to fetch domain age. Please try again.";</span></p><p><span style="font-family: verdana;"> errorDiv.classList.remove("hidden");</span></p><p><span style="font-family: verdana;"> }</span></p><p><span style="font-family: verdana;"> } catch (error) {</span></p><p><span style="font-family: verdana;"> errorDiv.textContent = "An error occurred. Please try again.";</span></p><p><span style="font-family: verdana;"> errorDiv.classList.remove("hidden");</span></p><p><span style="font-family: verdana;"> }</span></p><p><span style="font-family: verdana;"> });</span></p><p><span style="font-family: verdana;"><br /></span></p><p><span style="font-family: verdana;"> // Example domain age calculation function</span></p><p><span style="font-family: verdana;"> function calculateDomainAge(domain) {</span></p><p><span style="font-family: verdana;"> // Simulate a random age for demonstration purposes</span></p><p><span style="font-family: verdana;"> const randomYears = Math.floor(Math.random() * 20) + 1; // Random between 1 and 20 years</span></p><p><span style="font-family: verdana;"> return randomYears;</span></p><p><span style="font-family: verdana;"> }</span></p><p><span style="font-family: verdana;"> </script></span></p><p><span style="font-family: verdana;"></body></span></p><p><span style="font-family: verdana;"></span></p><p><span style="font-family: verdana;"></html></span></p><div><br /></div></pre><div class="blogger-post-footer">Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.</div>Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.com0tag:blogger.com,1999:blog-2982462447704153538.post-44555163179185433592025-01-27T03:30:00.000-08:002025-01-27T03:30:54.036-08:00Power Converter Tool Code<p><span style="font-family: verdana;"> This code provides a functional and responsive Power Converter Tool. It uses Bootstrap for styling and responsiveness, and the JavaScript handles the conversion logic. You can open this in any modern browser to use the tool. </span></p><pre class="brush:c#"><p><!DOCTYPE html></p><p><html lang="en"></p><p><head></p><p> <meta charset="UTF-8"></p><p> <meta name="viewport" content="width=device-width, initial-scale=1.0"></p><p> <title>Power Converter Tool</title></p><p> <!-- Bootstrap CSS --></p><p> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"></p><p> <style></p><p> body {</p><p> background: linear-gradient(to right, #6a11cb, #2575fc);</p><p> color: white;</p><p> font-family: Arial, sans-serif;</p><p> }</p><p> .converter-card {</p><p> background-color: #ffffff;</p><p> color: #333;</p><p> border-radius: 10px;</p><p> box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);</p><p> padding: 20px;</p><p> }</p><p> .btn-custom {</p><p> background-color: #6a11cb;</p><p> border: none;</p><p> color: white;</p><p> padding: 10px 15px;</p><p> border-radius: 5px;</p><p> }</p><p> .btn-custom:hover {</p><p> background-color: #2575fc;</p><p> }</p><p> </style></p><p></head></p><p><body></p><p> <div class="container my-5"></p><p> <h1 class="text-center mb-4">Power Converter Tool</h1></p><p> <div class="row justify-content-center"></p><p> <div class="col-md-6"></p><p> <div class="converter-card"></p><p> <form id="powerConverterForm"></p><p> <div class="mb-3"></p><p> <label for="inputValue" class="form-label">Enter Value:</label></p><p> <input type="number" class="form-control" id="inputValue" placeholder="Enter power value" required></p><p> </div></p><p> <div class="mb-3"></p><p> <label for="inputUnit" class="form-label">From Unit:</label></p><p> <select class="form-select" id="inputUnit" required></p><p> <option value="watts">Watts (W)</option></p><p> <option value="kilowatts">Kilowatts (kW)</option></p><p> <option value="megawatts">Megawatts (MW)</option></p><p> <option value="horsepower">Horsepower (HP)</option></p><p> </select></p><p> </div></p><p> <div class="mb-3"></p><p> <label for="outputUnit" class="form-label">To Unit:</label></p><p> <select class="form-select" id="outputUnit" required></p><p> <option value="watts">Watts (W)</option></p><p> <option value="kilowatts">Kilowatts (kW)</option></p><p> <option value="megawatts">Megawatts (MW)</option></p><p> <option value="horsepower">Horsepower (HP)</option></p><p> </select></p><p> </div></p><p> <button type="submit" class="btn btn-custom w-100">Convert</button></p><p> </form></p><p> <div class="mt-4"></p><p> <h5>Result:</h5></p><p> <p id="result" class="fs-5 text-success"></p></p><p> </div></p><p> </div></p><p> </div></p><p> </div></p><p> </div></p><p> <!-- Bootstrap JS --></p><p> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script></p><p> <script></p><p> // Conversion factors</p><p> const conversionFactors = {</p><p> watts: 1,</p><p> kilowatts: 1000,</p><p> megawatts: 1000000,</p><p> horsepower: 745.7</p><p> };</p><p> document.getElementById("powerConverterForm").addEventListener("submit", function(event) {</p><p> event.preventDefault();</p><p> const inputValue = parseFloat(document.getElementById("inputValue").value);</p><p> const inputUnit = document.getElementById("inputUnit").value;</p><p> const outputUnit = document.getElementById("outputUnit").value;</p><p> if (isNaN(inputValue)) {</p><p> document.getElementById("result").textContent = "Please enter a valid number.";</p><p> return;</p><p> }</p><p> // Convert input value to watts</p><p> const valueInWatts = inputValue * conversionFactors[inputUnit];</p><p> // Convert watts to the desired output unit</p><p> const convertedValue = valueInWatts / conversionFactors[outputUnit];</p><p> document.getElementById("result").textContent = `${inputValue} ${inputUnit} = ${convertedValue.toFixed(2)} ${outputUnit}`;</p><p> });</p><p> </script></p><p></body></p><p></html></p><div><br /></div></pre><div class="blogger-post-footer">Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.</div>Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.com0tag:blogger.com,1999:blog-2982462447704153538.post-24818280294653025802025-01-27T03:01:00.001-08:002025-01-27T03:01:41.970-08:00Barcode Decoder Tool Code<pre class="brush:c#">
<p> <!DOCTYPE html></p><p><html lang="en"></p><p><head></p><p> <meta charset="UTF-8"></p><p> <meta name="viewport" content="width=device-width, initial-scale=1.0"></p><p> <title>QR Code Decoder Tool</title></p><p> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"></p><p> <script src="https://cdn.jsdelivr.net/npm/@zxing/library@0.19.0/umd/index.min.js"></script></p><p> <style></p><p> body {</p><p> background: linear-gradient(to right, #ff9a9e, #fad0c4);</p><p> color: #333;</p><p> font-family: Arial, sans-serif;</p><p> min-height: 100vh;</p><p> display: flex;</p><p> justify-content: center;</p><p> align-items: center;</p><p> margin: 0;</p><p> }</p><p> .container {</p><p> background: #ffffff;</p><p> padding: 20px;</p><p> border-radius: 15px;</p><p> box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);</p><p> max-width: 500px;</p><p> width: 90%;</p><p> }</p><p> .btn-primary {</p><p> background: #6a11cb;</p><p> background: -webkit-linear-gradient(to right, #6a11cb, #2575fc);</p><p> background: linear-gradient(to right, #6a11cb, #2575fc);</p><p> border: none;</p><p> }</p><p> .btn-primary:hover {</p><p> opacity: 0.9;</p><p> }</p><p> #video {</p><p> width: 100%;</p><p> border-radius: 10px;</p><p> margin-top: 10px;</p><p> }</p><p> .result {</p><p> margin-top: 15px;</p><p> font-size: 1.2rem;</p><p> font-weight: bold;</p><p> color: #2575fc;</p><p> text-align: center;</p><p> word-break: break-word;</p><p> }</p><p> </style></p><p></head></p><p><body></p><p> <div class="container text-center"></p><p> <h1 class="mb-4">QR Code Decoder</h1></p><p> <div></p><p> <video id="video" autoplay muted playsinline></video></p><p> </div></p><p> <div class="mt-4"></p><p> <button id="startButton" class="btn btn-primary mb-2">Start Camera</button></p><p> <button id="stopButton" class="btn btn-secondary mb-2">Stop Camera</button></p><p> </div></p><p> <div class="result" id="result">Scan a QR code to see the result here!</div></p><p> </div></p><p><br /></p><p> <script></p><p> const codeReader = new ZXing.BrowserQRCodeReader();</p><p> const videoElement = document.getElementById('video');</p><p> const resultElement = document.getElementById('result');</p><p> const startButton = document.getElementById('startButton');</p><p> const stopButton = document.getElementById('stopButton');</p><p> </p><p> let stream = null;</p><p><br /></p><p> async function startCamera() {</p><p> try {</p><p> const devices = await codeReader.listVideoInputDevices();</p><p> if (devices.length === 0) {</p><p> resultElement.textContent = 'No camera found!';</p><p> return;</p><p> }</p><p> stream = await navigator.mediaDevices.getUserMedia({ video: { deviceId: devices[0].deviceId } });</p><p> videoElement.srcObject = stream;</p><p><br /></p><p> codeReader.decodeFromVideoDevice(devices[0].deviceId, videoElement, (result, err) => {</p><p> if (result) {</p><p> resultElement.textContent = `Decoded Text: ${result.text}`;</p><p> } else if (err && !(err instanceof ZXing.NotFoundException)) {</p><p> console.error(err);</p><p> }</p><p> });</p><p> } catch (err) {</p><p> console.error(err);</p><p> resultElement.textContent = 'Error starting camera!';</p><p> }</p><p> }</p><p><br /></p><p> function stopCamera() {</p><p> if (stream) {</p><p> const tracks = stream.getTracks();</p><p> tracks.forEach(track => track.stop());</p><p> stream = null;</p><p> videoElement.srcObject = null;</p><p> codeReader.reset();</p><p> resultElement.textContent = 'Camera stopped.';</p><p> }</p><p> }</p><p><br /></p><p> startButton.addEventListener('click', startCamera);</p><p> stopButton.addEventListener('click', stopCamera);</p><p> </script></p><p></body></p><p></html></p><div><br /></div></pre><div class="blogger-post-footer">Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.</div>Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.com0tag:blogger.com,1999:blog-2982462447704153538.post-65696691673476725082025-01-26T11:30:00.000-08:002025-01-26T11:32:03.665-08:00How to Save Data Into Database from Web Form Using Python<p><span style="font-family: verdana;"> Here’s a comprehensive Python script to collect data from a form (Form1) and store it into a test database using a relational database management system like SQLite. The example below uses Flask for the web framework to handle the form submission and SQLAlchemy for database interaction.</span></p><h3><span style="font-family: verdana;">Steps Covered</span></h3><ol><li><span style="font-family: verdana;"><strong>Set up Flask app</strong> to handle HTTP requests.</span></li><li><span style="font-family: verdana;"><strong>Create a database</strong> with SQLAlchemy.</span></li><li><strong><span style="font-family: verdana;">Define the form and database model.</span></strong></li><li><span style="font-family: verdana;"><strong>Store submitted data</strong> into the database.</span></li></ol><h2 style="text-align: left;"><span style="font-family: verdana;">PYthon Code to Handle HTTP Request</span></h2><div><span style="font-family: verdana;"><pre class="brush:c#"><div>from flask import Flask, render_template, request, redirect, url_for</div><div>from flask_sqlalchemy import SQLAlchemy</div><div><br /></div><div>app = Flask(__name__)</div><div><br /></div><div># Configure the SQLite database</div><div>app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db'</div><div>app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False</div><div>db = SQLAlchemy(app)</div><div><br /></div><div># Define the database model</div><div>class FormData(db.Model):</div><div> id = db.Column(db.Integer, primary_key=True)</div><div> name = db.Column(db.String(100), nullable=False)</div><div> email = db.Column(db.String(120), nullable=False)</div><div> message = db.Column(db.Text, nullable=True)</div><div><br /></div><div> def __repr__(self):</div><div> return f"<FormData {self.name}>"</div><div><br /></div><div># Initialize the database</div><div>with app.app_context():</div><div> db.create_all()</div><div><br /></div><div># Route for the form</div><div>@app.route('/', methods=['GET', 'POST'])</div><div>def form1():</div><div> if request.method == 'POST':</div><div> # Collect form data</div><div> name = request.form['name']</div><div> email = request.form['email']</div><div> message = request.form.get('message', '')</div><div><br /></div><div> # Validate required fields</div><div> if not name or not email:</div><div> return "Name and Email are required!", 400</div><div><br /></div><div> # Save to database</div><div> form_data = FormData(name=name, email=email, message=message)</div><div> db.session.add(form_data)</div><div> db.session.commit()</div><div><br /></div><div> return redirect(url_for('thank_you'))</div><div><br /></div><div> return render_template('form.html')</div><div><br /></div><div># Thank you page</div><div>@app.route('/thank-you')</div><div>def thank_you():</div><div> return "<h1>Thank you for your submission!</h1>"</div><div><br /></div><div># View stored data (optional)</div><div>@app.route('/view-data')</div><div>def view_data():</div><div> all_data = FormData.query.all()</div><div> return render_template('view_data.html', data=all_data)</div><div><br /></div><div>if __name__ == '__main__':</div><div> app.run(debug=True)</div></pre><br/><h2 style="text-align: left;">Create a file named <code>form.html</code> in the <code>templates</code> directory:</h2><pre class="brush:c#"><div><div><!DOCTYPE html></div><div><html lang="en"></div><div><head></div><div> <meta charset="UTF-8"></div><div> <meta name="viewport" content="width=device-width, initial-scale=1.0"></div><div> <title>Form</title></div><div></head></div><div><body></div><div> <h1>Submit Your Information</h1></div><div> <form method="POST" action="/"></div><div> <label for="name">Name:</label></div><div> <input type="text" id="name" name="name" required></div><div> <br><br></div><div><br /></div><div> <label for="email">Email:</label></div><div> <input type="email" id="email" name="email" required></div><div> <br><br></div><div><br /></div><div> <label for="message">Message:</label></div><div> <textarea id="message" name="message"></textarea></div><div> <br><br></div><div><br /></div><div> <button type="submit">Submit</button></div><div> </form></div><div></body></div><div></html></div></div><div><br /></div></pre><h3 style="text-align: left;">Create a file named <code>view_data.html</code> in the <code>templates</code> directory</h3><div><pre class="brush:c#"><div><!DOCTYPE html></div><div><html lang="en"></div><div><head></div><div> <meta charset="UTF-8"></div><div> <meta name="viewport" content="width=device-width, initial-scale=1.0"></div><div> <title>View Data</title></div><div></head></div><div><body></div><div> <h1>Submitted Data</h1></div><div> <table border="1"></div><div> <thead></div><div> <tr></div><div> <th>ID</th></div><div> <th>Name</th></div><div> <th>Email</th></div><div> <th>Message</th></div><div> </tr></div><div> </thead></div><div> <tbody></div><div> {% for item in data %}</div><div> <tr></div><div> <td>{{ item.id }}</td></div><div> <td>{{ item.name }}</td></div><div> <td>{{ item.email }}</td></div><div> <td>{{ item.message }}</td></div><div> </tr></div><div> {% endfor %}</div><div> </tbody></div><div> </table></div><div></body></div><div></html></div></div><div><br /></div></pre><div><ol style="text-align: left;"><li>Install All Packages i.e pip install flask flask-sqlalchemy.</li><li>Run the Application python app.py</li><li>Open your browser at <code>http://127.0.0.1:5000/</code>.</li></ol></div></span></div><div class="blogger-post-footer">Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.</div>Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.com0tag:blogger.com,1999:blog-2982462447704153538.post-7012289278343819392025-01-26T10:41:00.000-08:002025-01-26T11:04:54.755-08:00How to Submit Data From One Form to Another Form Using Python<p><span style="font-family: verdana;"> Here’s a solution for your request with HTML, CSS, JavaScript, and Python. This implementation includes a form with validation on the client side (using JavaScript) and displays the data on a second page using Python's Flask framework.</span></p><h2 style="text-align: left;"><span style="font-family: verdana;">Directory Structure</span></h2><pre class="brush:c#"><div><div>project/</div><div>│</div><div>├── templates/</div><div>│ ├── form1.html</div><div>│ └── form2.html</div><div>├── static/</div><div>│ ├── style.css</div><div>├── app.py</div></div><div><br /></div></pre><div><h3><code><span style="font-family: verdana;">form1.html</span></code></h3><p><span style="font-family: verdana;">The first page with the form and client-side validation.</span></p><pre class="brush:c#"><p><span style="font-family: verdana;"><!DOCTYPE html></span></p><p><span style="font-family: verdana;"><html lang="en"></span></p><p><span style="font-family: verdana;"><head></span></p><p><span style="font-family: verdana;"> <meta charset="UTF-8"></span></p><p><span style="font-family: verdana;"> <meta name="viewport" content="width=device-width, initial-scale=1.0"></span></p><p><span style="font-family: verdana;"> <title>Form Page</title></span></p><p><span style="font-family: verdana;"> <link rel="stylesheet" href="/static/style.css"></span></p><p><span style="font-family: verdana;"> <script defer src="/static/validation.js"></script></span></p><p><span style="font-family: verdana;"></head></span></p><p><span style="font-family: verdana;"><body></span></p><p><span style="font-family: verdana;"> <div class="container"></span></p><p><span style="font-family: verdana;"> <h1>Fill Out the Form</h1></span></p><p><span style="font-family: verdana;"> <form id="userForm" action="/submit" method="POST" enctype="multipart/form-data"></span></p><p><span style="font-family: verdana;"> <label for="firstName">First Name:</label></span></p><p><span style="font-family: verdana;"> <input type="text" id="firstName" name="first_name" required></span></p><p><span style="font-family: verdana;"> <label for="lastName">Last Name:</label></span></p><p><span style="font-family: verdana;"> <input type="text" id="lastName" name="last_name" required></span></p><p><span style="font-family: verdana;"> <label for="mi">Middle Initial:</label></span></p><p><span style="font-family: verdana;"> <input type="text" id="mi" name="mi" maxlength="1"></span></p><p><span style="font-family: verdana;"> <label for="gender">Gender:</label></span></p><p><span style="font-family: verdana;"> <select id="gender" name="gender" required></span></p><p><span style="font-family: verdana;"> <option value="">Select</option></span></p><p><span style="font-family: verdana;"> <option value="Male">Male</option></span></p><p><span style="font-family: verdana;"> <option value="Female">Female</option></span></p><p><span style="font-family: verdana;"> <option value="Other">Other</option></span></p><p><span style="font-family: verdana;"> </select></span></p><p><span style="font-family: verdana;"> <label for="city">City:</label></span></p><p><span style="font-family: verdana;"> <input type="text" id="city" name="city" required></span></p><p><span style="font-family: verdana;"> <label for="state">State:</label></span></p><p><span style="font-family: verdana;"> <input type="text" id="state" name="state" required></span></p><p><span style="font-family: verdana;"> <label for="zip">Zip Code:</label></span></p><p><span style="font-family: verdana;"> <input type="text" id="zip" name="zip" pattern="\d{5}" required></span></p><p><span style="font-family: verdana;"> <label for="address">Address:</label></span></p><p><span style="font-family: verdana;"> <textarea id="address" name="address" required></textarea></span></p><p><span style="font-family: verdana;"> <label for="email">Email:</label></span></p><p><span style="font-family: verdana;"> <input type="email" id="email" name="email" required></span></p><p><span style="font-family: verdana;"> <label for="picture">Upload Picture:</label></span></p><p><span style="font-family: verdana;"> <input type="file" id="picture" name="picture" accept="image/*" required></span></p><p><span style="font-family: verdana;"> <button type="submit">Submit</button></span></p><p><span style="font-family: verdana;"> </form></span></p><p><span style="font-family: verdana;"> </div></span></p><p><span style="font-family: verdana;"></body></span></p><p><span style="font-family: verdana;"></span></p><p><span style="font-family: verdana;"></html></span></p></div></pre><div><h3><code><span style="font-family: verdana;">validation.js</span></code></h3><p><span style="font-family: verdana;">JavaScript for client-side validation.</span></p><pre class="brush:c#"><p><span style="font-family: verdana;">document.getElementById("userForm").addEventListener("submit", function (event) {</span></p><p><span style="font-family: verdana;"> const firstName = document.getElementById("firstName").value.trim();</span></p><p><span style="font-family: verdana;"> const lastName = document.getElementById("lastName").value.trim();</span></p><p><span style="font-family: verdana;"> const email = document.getElementById("email").value.trim();</span></p><p><span style="font-family: verdana;"> const zip = document.getElementById("zip").value.trim();</span></p><p><span style="font-family: verdana;"> if (firstName === "" || lastName === "" || email === "" || !/^\d{5}$/.test(zip)) {</span></p><p><span style="font-family: verdana;"> alert("Please fill out all fields correctly.");</span></p><p><span style="font-family: verdana;"> event.preventDefault();</span></p><p><span style="font-family: verdana;"> }</span></p><p><span style="font-family: verdana;"></span></p><p><span style="font-family: verdana;">});</span></p></div></pre><div><h3><code><span style="font-family: verdana;">style.css</span></code></h3><p><span style="font-family: verdana;">CSS for styling the form.</span></p><pre class="brush:c#"><p><span style="font-family: verdana;">body {</span></p><p><span style="font-family: verdana;"> font-family: Arial, sans-serif;</span></p><p><span style="font-family: verdana;"> margin: 0;</span></p><p><span style="font-family: verdana;"> padding: 0;</span></p><p><span style="font-family: verdana;"> background-color: #f4f4f9;</span></p><p><span style="font-family: verdana;">}</span></p><p><span style="font-family: verdana;">.container {</span></p><p><span style="font-family: verdana;"> width: 50%;</span></p><p><span style="font-family: verdana;"> margin: 50px auto;</span></p><p><span style="font-family: verdana;"> background: #fff;</span></p><p><span style="font-family: verdana;"> padding: 20px;</span></p><p><span style="font-family: verdana;"> border-radius: 8px;</span></p><p><span style="font-family: verdana;"> box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);</span></p><p><span style="font-family: verdana;">}</span></p><p><span style="font-family: verdana;">h1 {</span></p><p><span style="font-family: verdana;"> text-align: center;</span></p><p><span style="font-family: verdana;"> color: #333;</span></p><p><span style="font-family: verdana;">}</span></p><p><span style="font-family: verdana;">form label {</span></p><p><span style="font-family: verdana;"> display: block;</span></p><p><span style="font-family: verdana;"> margin: 10px 0 5px;</span></p><p><span style="font-family: verdana;"> font-weight: bold;</span></p><p><span style="font-family: verdana;">}</span></p><p><span style="font-family: verdana;">form input, form textarea, form select, form button {</span></p><p><span style="font-family: verdana;"> width: 100%;</span></p><p><span style="font-family: verdana;"> padding: 10px;</span></p><p><span style="font-family: verdana;"> margin-bottom: 15px;</span></p><p><span style="font-family: verdana;"> border: 1px solid #ccc;</span></p><p><span style="font-family: verdana;"> border-radius: 4px;</span></p><p><span style="font-family: verdana;">}</span></p><p><span style="font-family: verdana;">form button {</span></p><p><span style="font-family: verdana;"> background-color: #5cb85c;</span></p><p><span style="font-family: verdana;"> color: #fff;</span></p><p><span style="font-family: verdana;"> border: none;</span></p><p><span style="font-family: verdana;"> cursor: pointer;</span></p><p><span style="font-family: verdana;"> font-size: 16px;</span></p><p><span style="font-family: verdana;">}</span></p><p><span style="font-family: verdana;">form button:hover {</span></p><p><span style="font-family: verdana;"> background-color: #4cae4c;</span></p><p><span style="font-family: verdana;"></span></p><p><span style="font-family: verdana;">}</span></p></pre><h3 style="text-align: left;"><span style="font-family: verdana;"><b>App.Py</b></span></h3><p><span style="font-family: verdana;">Flask backend to handle form submission and display data on the second page.</span></p><pre class="brush:c#"><p><span style="font-family: verdana;">from flask import Flask, render_template, request</span></p><p><span style="font-family: verdana;"><br /></span></p><p><span style="font-family: verdana;">app = Flask(__name__)</span></p><p><span style="font-family: verdana;"><br /></span></p><p><span style="font-family: verdana;">@app.route("/")</span></p><p><span style="font-family: verdana;">def form():</span></p><p><span style="font-family: verdana;"> return render_template("form1.html")</span></p><p><span style="font-family: verdana;"><br /></span></p><p><span style="font-family: verdana;">@app.route("/submit", methods=["POST"])</span></p><p><span style="font-family: verdana;">def submit():</span></p><p><span style="font-family: verdana;"> data = request.form</span></p><p><span style="font-family: verdana;"> picture = request.files["picture"]</span></p><p><span style="font-family: verdana;"> picture.save("static/" + picture.filename)</span></p><p><span style="font-family: verdana;"> return render_template("form2.html", data=data, picture=picture.filename)</span></p><p><span style="font-family: verdana;"><br /></span></p><p><span style="font-family: verdana;">if __name__ == "__main__":</span></p><p><span style="font-family: verdana;"></span></p><p><span style="font-family: verdana;"> app.run(debug=True)</span></p></pre><h3 style="text-align: left;"><span style="font-family: verdana;">Form-2.HTML</span></h3><p><span style="font-family: verdana;">The second page that displays the submitted data.</span></p><pre class="brush:c#"><p><span style="font-family: verdana;"><!DOCTYPE html></span></p><p><span style="font-family: verdana;"><html lang="en"></span></p><p><span style="font-family: verdana;"><head></span></p><p><span style="font-family: verdana;"> <meta charset="UTF-8"></span></p><p><span style="font-family: verdana;"> <meta name="viewport" content="width=device-width, initial-scale=1.0"></span></p><p><span style="font-family: verdana;"> <title>Submitted Data</title></span></p><p><span style="font-family: verdana;"> <link rel="stylesheet" href="/static/style.css"></span></p><p><span style="font-family: verdana;"></head></span></p><p><span style="font-family: verdana;"><body></span></p><p><span style="font-family: verdana;"> <div class="container"></span></p><p><span style="font-family: verdana;"> <h1>Submitted Information</h1></span></p><p><span style="font-family: verdana;"> <p><strong>First Name:</strong> {{ data["first_name"] }}</p></span></p><p><span style="font-family: verdana;"> <p><strong>Last Name:</strong> {{ data["last_name"] }}</p></span></p><p><span style="font-family: verdana;"> <p><strong>Middle Initial:</strong> {{ data["mi"] }}</p></span></p><p><span style="font-family: verdana;"> <p><strong>Gender:</strong> {{ data["gender"] }}</p></span></p><p><span style="font-family: verdana;"> <p><strong>City:</strong> {{ data["city"] }}</p></span></p><p><span style="font-family: verdana;"> <p><strong>State:</strong> {{ data["state"] }}</p></span></p><p><span style="font-family: verdana;"> <p><strong>Zip:</strong> {{ data["zip"] }}</p></span></p><p><span style="font-family: verdana;"> <p><strong>Address:</strong> {{ data["address"] }}</p></span></p><p><span style="font-family: verdana;"> <p><strong>Email:</strong> {{ data["email"] }}</p></span></p><p><span style="font-family: verdana;"> <p><strong>Picture:</strong></p></span></p><p><span style="font-family: verdana;"> <img src="/static/{{ picture }}" alt="Uploaded Picture" style="max-width: 100%; height: auto;"></span></p><p><span style="font-family: verdana;"> </div></span></p><p><span style="font-family: verdana;"></body></span></p><p><span style="font-family: verdana;"></span></p><p><span style="font-family: verdana;"></html></span></p></div></pre><div><span style="font-family: verdana;">Save these files as described in the structure and run the Flask app. Access <code>http://127.0.0.1:5000</code> in your browser to see the form. When the form is submitted, the second page will display the submitted data in a styled format.</span></div><div class="blogger-post-footer">Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.</div>Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.com0tag:blogger.com,1999:blog-2982462447704153538.post-17927461424244029162025-01-26T09:56:00.000-08:002025-01-26T09:56:01.954-08:00Remove Lines Containing Tool Code<p><span style="font-family: verdana;"> Here’s a complete responsive code for a <strong>"Remove Lines Containing" Tool</strong>. The tool will allow users to input text, specify a keyword (or multiple keywords), and remove lines containing those keywords. We'll use <strong>HTML</strong>, <strong>CSS</strong>, and <strong>JavaScript</strong>. For a polished design, we'll use <strong>Tailwind CSS</strong> and optionally include <strong>Alpine.js</strong> for interactivity.</span></p><p><span style="font-family: verdana;">This code includes:</span></p><ol><li><span style="font-family: verdana;">Input text area for pasting text.</span></li><li><span style="font-family: verdana;">A keyword input field.</span></li><li><span style="font-family: verdana;">A "Remove Lines" button.</span></li></ol><pre class="brush:c#"><div><span style="font-family: verdana;"><div><!DOCTYPE html></div><div><html lang="en"></div><div><br /></div><div><head></div><div> <meta charset="UTF-8"></div><div> <meta name="viewport" content="width=device-width, initial-scale=1.0"></div><div> <title>Remove Lines Containing Tool</title></div><div> <script src="https://cdn.tailwindcss.com"></script></div><div></head></div><div><br /></div><div><body class="bg-gradient-to-br from-blue-100 to-indigo-200 min-h-screen flex items-center justify-center"></div><div><br /></div><div> <div class="container mx-auto p-4"></div><div> <!-- Card Container --></div><div> <div class="bg-white shadow-lg rounded-2xl p-6 max-w-3xl mx-auto"></div><div> <h1 class="text-2xl font-bold text-indigo-600 text-center mb-6">Remove Lines Containing Tool</h1></div><div> <!-- Input Section --></div><div> <div></div><div> <label for="inputText" class="block text-gray-700 font-medium mb-2">Paste your text below:</label></div><div> <textarea id="inputText" rows="6" class="w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none mb-4" placeholder="Enter your text here..."></textarea></div><div> </div></div><div> <!-- Keyword Input --></div><div> <div></div><div> <label for="keyword" class="block text-gray-700 font-medium mb-2">Enter keywords (comma-separated):</label></div><div> <input id="keyword" type="text" class="w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none mb-4" placeholder="e.g., error, warning, skip"></div><div> </div></div><div> <!-- Button --></div><div> <button id="removeLinesButton" class="w-full bg-indigo-500 text-white font-medium py-3 rounded-lg shadow-md hover:bg-indigo-600 focus:ring-4 focus:ring-indigo-300 mb-4 transition-all"></div><div> Remove Lines</div><div> </button></div><div> <!-- Result Section --></div><div> <div></div><div> <label for="outputText" class="block text-gray-700 font-medium mb-2">Filtered text:</label></div><div> <textarea id="outputText" rows="6" class="w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none bg-gray-50" placeholder="Filtered text will appear here..." readonly></textarea></div><div> </div></div><div> </div></div><div> </div></div><div><br /></div><div> <script></div><div> // JavaScript Logic for Removing Lines</div><div> document.getElementById("removeLinesButton").addEventListener("click", () => {</div><div> const inputText = document.getElementById("inputText").value;</div><div> const keywords = document.getElementById("keyword").value.split(",").map(k => k.trim()).filter(k => k);</div><div> const outputTextArea = document.getElementById("outputText");</div><div><br /></div><div> if (!inputText) {</div><div> alert("Please enter some text.");</div><div> return;</div><div> }</div><div><br /></div><div> if (keywords.length === 0) {</div><div> alert("Please enter at least one keyword.");</div><div> return;</div><div> }</div><div><br /></div><div> // Split input into lines and filter based on keywords</div><div> const filteredLines = inputText</div><div> .split("\n")</div><div> .filter(line => !keywords.some(keyword => line.includes(keyword)));</div><div><br /></div><div> // Update the output textarea</div><div> outputTextArea.value = filteredLines.join("\n");</div><div> });</div><div> </script></div><div><br /></div><div></body></div><div><br /></div><div></html></div><div><br /></div></span></div></pre><div class="blogger-post-footer">Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.</div>Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.com0tag:blogger.com,1999:blog-2982462447704153538.post-78676403992706527032025-01-26T09:49:00.000-08:002025-01-26T09:49:58.524-08:00Sort Text Lines Tool Code<p style="text-align: justify;"><span style="font-family: verdana;"> Here's the complete code for a responsive and colorful "Sort Text Lines Tool." It includes features like case sensitivity, removing duplicate lines, and sorting in ascending or descending order.</span></p><pre class="brush:c#"><p style="text-align: justify;"><span style="font-family: verdana;"><!DOCTYPE html></span></p><p style="text-align: justify;"><span style="font-family: verdana;"><html lang="en"></span></p><p style="text-align: justify;"><span style="font-family: verdana;"><head></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> <meta charset="UTF-8"></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> <meta name="viewport" content="width=device-width, initial-scale=1.0"></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> <title>Sort Text Lines Tool</title></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> <style></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> body {</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> color: #fff;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> font-family: 'Arial', sans-serif;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> padding: 20px;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> }</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> .container {</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> background: #ffffff1a;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> backdrop-filter: blur(10px);</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> border-radius: 15px;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> padding: 20px;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> }</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> textarea {</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> resize: none;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> }</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> .btn-primary {</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> background-color: #ff6f61;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> border-color: #ff6f61;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> }</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> .btn-primary:hover {</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> background-color: #ff4c3a;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> border-color: #ff4c3a;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> }</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> .btn-secondary {</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> background-color: #f8c22e;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> border-color: #f8c22e;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> color: #fff;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> }</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> .btn-secondary:hover {</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> background-color: #e6ae0c;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> border-color: #e6ae0c;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> }</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> .form-check-label {</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> color: #fff;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> }</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> .footer {</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> margin-top: 20px;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> text-align: center;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> font-size: 0.9rem;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> }</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> </style></span></p><p style="text-align: justify;"><span style="font-family: verdana;"></head></span></p><p style="text-align: justify;"><span style="font-family: verdana;"><body></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> <div class="container"></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> <h1 class="text-center mb-4">Sort Text Lines Tool</h1></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> <div class="mb-3"></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> <label for="textInput" class="form-label">Enter Text Lines:</label></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> <textarea id="textInput" class="form-control" rows="8" placeholder="Enter text here..."></textarea></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> </div></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> <div class="mb-3"></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> <div class="form-check"></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> <input type="checkbox" id="ignoreCase" class="form-check-input"></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> <label for="ignoreCase" class="form-check-label">Ignore Case</label></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> </div></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> <div class="form-check"></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> <input type="checkbox" id="uniqueLines" class="form-check-input"></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> <label for="uniqueLines" class="form-check-label">Remove Duplicate Lines</label></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> </div></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> </div></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> <div class="d-flex justify-content-between"></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> <button id="sortAscBtn" class="btn btn-primary">Sort Ascending</button></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> <button id="sortDescBtn" class="btn btn-secondary">Sort Descending</button></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> </div></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> <div class="footer"></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> <p>Created with ❤️ by Your Name</p></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> </div></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> </div></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> <script></span></p><p style="text-align: justify;"><span style="font-family: verdana;"> document.getElementById('sortAscBtn').addEventListener('click', () => {</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> const input = document.getElementById('textInput').value;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> const ignoreCase = document.getElementById('ignoreCase').checked;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> const uniqueLines = document.getElementById('uniqueLines').checked;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> let lines = input.split('\n');</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> if (uniqueLines) {</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> lines = [...new Set(lines)];</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> }</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> lines.sort((a, b) => {</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> if (ignoreCase) {</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> return a.localeCompare(b, undefined, { sensitivity: 'base' });</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> }</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> return a.localeCompare(b);</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> });</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> document.getElementById('textInput').value = lines.join('\n');</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> });</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> document.getElementById('sortDescBtn').addEventListener('click', () => {</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> const input = document.getElementById('textInput').value;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> const ignoreCase = document.getElementById('ignoreCase').checked;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> const uniqueLines = document.getElementById('uniqueLines').checked;</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> let lines = input.split('\n');</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> if (uniqueLines) {</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> lines = [...new Set(lines)];</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> }</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> lines.sort((a, b) => {</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> if (ignoreCase) {</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> return b.localeCompare(a, undefined, { sensitivity: 'base' });</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> }</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> return b.localeCompare(a);</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> });</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> document.getElementById('textInput').value = lines.join('\n');</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> });</span></p><p style="text-align: justify;"><span style="font-family: verdana;"> </script></span></p><p style="text-align: justify;"><span style="font-family: verdana;"></body></span></p><p style="text-align: justify;"><span style="font-family: verdana;"></span></p><p style="text-align: justify;"><span style="font-family: verdana;"></html></span></p><div style="text-align: justify;"><br /></div></pre><div class="blogger-post-footer">Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.</div>Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.com0tag:blogger.com,1999:blog-2982462447704153538.post-26221244031677804232025-01-26T05:50:00.000-08:002025-01-26T05:50:14.833-08:00Website Tester Tool Code<p> Website tester tool is a smart tool to test on different devices i.e Laptop, IPhone, Desktop and Mobile Phone, this tool is written in Javascript, HTML and Css.</p><p><br /></p><pre class="brush:c#"><p><!DOCTYPE html></p><p><html lang="en"></p><p><head></p><p> <meta charset="UTF-8"></p><p> <meta name="viewport" content="width=device-width, initial-scale=1.0"></p><p> <title>Responsive Website Tester Tool</title></p><p> <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/3.3.2/tailwind.min.css" rel="stylesheet"></p><p> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script></p><p> <style></p><p> body {</p><p> background: linear-gradient(135deg, #84fab0, #8fd3f4);</p><p> font-family: 'Arial', sans-serif;</p><p> }</p><p> iframe {</p><p> border: 4px solid #333;</p><p> border-radius: 10px;</p><p> }</p><p> </style></p><p></head></p><p><body class="flex flex-col items-center min-h-screen p-4"></p><p> <h1 class="text-3xl font-bold text-white mb-6">Responsive Website Tester</h1></p><p> <div class="w-full max-w-4xl p-6 bg-white rounded-lg shadow-lg"></p><p> <form id="testerForm" class="flex flex-col md:flex-row md:items-center gap-4"></p><p> <input </p><p> type="url" </p><p> id="websiteUrl" </p><p> class="flex-grow border border-gray-300 rounded-lg px-4 py-2" </p><p> placeholder="Enter website URL" </p><p> required></p><p> <select </p><p> id="deviceSelector" </p><p> class="border border-gray-300 rounded-lg px-4 py-2"></p><p> <option value="375x812">iPhone X (375x812)</option></p><p> <option value="360x640">Galaxy S9 (360x640)</option></p><p> <option value="768x1024">iPad (768x1024)</option></p><p> <option value="1440x900">Laptop (1440x900)</option></p><p> <option value="1920x1080">Desktop (1920x1080)</option></p><p> </select></p><p> <button </p><p> type="submit" </p><p> class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition"></p><p> Test</p><p> </button></p><p> </form></p><p> <div id="testerFrameContainer" class="mt-6 hidden"></p><p> <iframe </p><p> id="testerFrame" </p><p> class="w-full h-[500px]" </p><p> title="Responsive Website Tester"></p><p> </iframe></p><p> </div></p><p> </div></p><p> <footer class="mt-auto text-sm text-white">Made with ❤️ by [Your Name]</footer></p><p><br /></p><p> <script></p><p> const testerForm = document.getElementById('testerForm');</p><p> const websiteUrl = document.getElementById('websiteUrl');</p><p> const deviceSelector = document.getElementById('deviceSelector');</p><p> const testerFrameContainer = document.getElementById('testerFrameContainer');</p><p> const testerFrame = document.getElementById('testerFrame');</p><p> testerForm.addEventListener('submit', (e) => {</p><p> e.preventDefault();</p><p> const url = websiteUrl.value.trim();</p><p> if (!url) {</p><p> Swal.fire({</p><p> icon: 'error',</p><p> title: 'Oops...',</p><p> text: 'Please enter a valid URL!',</p><p> });</p><p> return;</p><p> }</p><p> const [width, height] = deviceSelector.value.split('x');</p><p> testerFrame.src = url.startsWith('http') ? url : `https://${url}`;</p><p> testerFrame.style.width = `${width}px`;</p><p> testerFrame.style.height = `${height}px`;</p><p> testerFrameContainer.classList.remove('hidden');</p><p> });</p><p> </script></p><p></body></p><p></html></p><div><br /></div></pre><div class="blogger-post-footer">Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.</div>Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.com0tag:blogger.com,1999:blog-2982462447704153538.post-5722539411583191902025-01-26T05:02:00.000-08:002025-01-26T05:02:19.743-08:00Pie Chart Maker Tool Code<p> With the Help of this code you can make Pie chart tool, you can enter values and can draw pie charts in web, mobile applications, this code is written in Javascript, HTML and Css.</p><pre class="brush:c#"><p><!DOCTYPE html></p><p><html lang="en"></p><p><head></p><p> <meta charset="UTF-8"></p><p> <meta name="viewport" content="width=device-width, initial-scale=1.0"></p><p> <title>Pie Chart Maker Tool</title></p><p> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script></p><p> <style></p><p> body {</p><p> font-family: Arial, sans-serif;</p><p> margin: 0;</p><p> padding: 0;</p><p> display: flex;</p><p> flex-direction: column;</p><p> align-items: center;</p><p> background: #f7f9fc;</p><p> color: #333;</p><p> }</p><p> h1 {</p><p> margin: 20px 0;</p><p> color: #4a90e2;</p><p> }</p><p> .chart-container {</p><p> width: 90%;</p><p> max-width: 600px;</p><p> margin: 20px auto;</p><p> background: #ffffff;</p><p> box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);</p><p> border-radius: 10px;</p><p> padding: 20px;</p><p> }</p><p> .inputs {</p><p> margin-bottom: 20px;</p><p> }</p><p> .inputs input {</p><p> width: calc(50% - 10px);</p><p> padding: 10px;</p><p> margin: 5px;</p><p> border: 1px solid #ddd;</p><p> border-radius: 5px;</p><p> }</p><p> .inputs button {</p><p> width: 100%;</p><p> padding: 10px;</p><p> background: #4a90e2;</p><p> color: white;</p><p> border: none;</p><p> border-radius: 5px;</p><p> cursor: pointer;</p><p> transition: background 0.3s ease;</p><p> }</p><p> .inputs button:hover {</p><p> background: #357ac9;</p><p> }</p><p> .chart {</p><p> margin-top: 20px;</p><p> }</p><p> .footer {</p><p> margin-top: 20px;</p><p> text-align: center;</p><p> font-size: 0.9rem;</p><p> color: #666;</p><p> }</p><p> @media (max-width: 600px) {</p><p> .inputs input {</p><p> width: 100%;</p><p> }</p><p> }</p><p> </style></p><p></head></p><p><body></p><p> <h1>Pie Chart Maker Tool</h1></p><p> <div class="chart-container"></p><p> <div class="inputs"></p><p> <input type="text" id="label" placeholder="Enter Label (e.g., Category 1)" /></p><p> <input type="number" id="value" placeholder="Enter Value (e.g., 50)" /></p><p> <button onclick="addData()">Add Data</button></p><p> </div></p><p> <canvas id="pieChart" class="chart"></canvas></p><p> <button onclick="resetChart()" style="margin-top: 10px;">Reset Chart</button></p><p> </div></p><p> <div class="footer"></p><p> <p>Designed with ❤️ using HTML, CSS, and Chart.js</p></p><p> </div></p><p> <script></p><p> const ctx = document.getElementById('pieChart').getContext('2d');</p><p> const pieChart = new Chart(ctx, {</p><p> type: 'pie',</p><p> data: {</p><p> labels: [],</p><p> datasets: [{</p><p> data: [],</p><p> backgroundColor: [],</p><p> }],</p><p> },</p><p> options: {</p><p> responsive: true,</p><p> plugins: {</p><p> legend: {</p><p> position: 'top',</p><p> },</p><p> },</p><p> },</p><p> });</p><p> function getRandomColor() {</p><p> const letters = '0123456789ABCDEF';</p><p> let color = '#';</p><p> for (let i = 0; i < 6; i++) {</p><p> color += letters[Math.floor(Math.random() * 16)];</p><p> }</p><p> return color;</p><p> }</p><p> function addData() {</p><p> const label = document.getElementById('label').value;</p><p> const value = document.getElementById('value').value;</p><p> if (label && value) {</p><p> pieChart.data.labels.push(label);</p><p> pieChart.data.datasets[0].data.push(parseFloat(value));</p><p> pieChart.data.datasets[0].backgroundColor.push(getRandomColor());</p><p> pieChart.update();</p><p> document.getElementById('label').value = '';</p><p> document.getElementById('value').value = '';</p><p> } else {</p><p> alert('Please enter both label and value.');</p><p> }</p><p> }</p><p> function resetChart() {</p><p> pieChart.data.labels = [];</p><p> pieChart.data.datasets[0].data = [];</p><p> pieChart.data.datasets[0].backgroundColor = [];</p><p> pieChart.update();</p><p> }</p><p> </script></p><p></body></p><p></html></p><div><br /></div><p><br /></p></pre><div class="blogger-post-footer">Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.</div>Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.com0tag:blogger.com,1999:blog-2982462447704153538.post-11204876467510548122025-01-26T04:53:00.000-08:002025-01-26T04:53:30.214-08:00Line Graph Tool Code<p> Line Graph Tool is very useful tool that we use for data analysis in our web and mobile applications,</p><p>here is the complete working code of line graph tool written in Javascript, HTML and css.</p><pre class="brush:c#"><p><!DOCTYPE html></p><p><html lang="en"></p><p><head></p><p> <meta charset="UTF-8"></p><p> <meta name="viewport" content="width=device-width, initial-scale=1.0"></p><p> <title>Line Graph Maker Tool</title></p><p> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script></p><p> <style></p><p> body {</p><p> font-family: Arial, sans-serif;</p><p> margin: 0;</p><p> padding: 0;</p><p> background-color: #f4f4f9;</p><p> }</p><p> .container {</p><p> max-width: 1200px;</p><p> margin: 20px auto;</p><p> padding: 20px;</p><p> background: #ffffff;</p><p> border-radius: 10px;</p><p> box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);</p><p> }</p><p> h1 {</p><p> text-align: center;</p><p> color: #333;</p><p> }</p><p> .form-section {</p><p> margin-bottom: 30px;</p><p> }</p><p> .form-group {</p><p> margin-bottom: 15px;</p><p> }</p><p> label {</p><p> display: block;</p><p> margin-bottom: 5px;</p><p> color: #555;</p><p> }</p><p> input[type="text"], input[type="number"] {</p><p> width: 100%;</p><p> padding: 10px;</p><p> border: 1px solid #ccc;</p><p> border-radius: 5px;</p><p> }</p><p> .buttons {</p><p> display: flex;</p><p> gap: 10px;</p><p> justify-content: center;</p><p> margin-top: 20px;</p><p> }</p><p> button {</p><p> padding: 10px 20px;</p><p> font-size: 16px;</p><p> color: #fff;</p><p> background-color: #007bff;</p><p> border: none;</p><p> border-radius: 5px;</p><p> cursor: pointer;</p><p> transition: background-color 0.3s;</p><p> }</p><p> button:hover {</p><p> background-color: #0056b3;</p><p> }</p><p> canvas {</p><p> margin-top: 20px;</p><p> }</p><p> .table-container {</p><p> overflow-x: auto;</p><p> margin-top: 20px;</p><p> }</p><p> table {</p><p> width: 100%;</p><p> border-collapse: collapse;</p><p> margin-bottom: 20px;</p><p> }</p><p> th, td {</p><p> border: 1px solid #ccc;</p><p> padding: 10px;</p><p> text-align: center;</p><p> }</p><p> th {</p><p> background-color: #007bff;</p><p> color: #fff;</p><p> }</p><p> td {</p><p> background-color: #f9f9f9;</p><p> }</p><p> </style></p><p></head></p><p><body></p><p> <div class="container"></p><p> <h1>Line Graph Maker Tool</h1></p><p> <div class="form-section"></p><p> <div class="form-group"></p><p> <label for="labels">Enter Labels (comma-separated):</label></p><p> <input type="text" id="labels" placeholder="e.g., Jan, Feb, Mar"></p><p> </div></p><p> <div class="form-group"></p><p> <label for="data">Enter Data Points (comma-separated):</label></p><p> <input type="text" id="data" placeholder="e.g., 10, 20, 30"></p><p> </div></p><p> <div class="form-group"></p><p> <label for="title">Graph Title:</label></p><p> <input type="text" id="title" placeholder="e.g., Monthly Sales"></p><p> </div></p><p> <div class="form-group"></p><p> <label for="color">Line Color:</label></p><p> <input type="color" id="color" value="#007bff"></p><p> </div></p><p> <div class="buttons"></p><p> <button id="generate">Generate Graph</button></p><p> <button id="reset">Reset</button></p><p> </div></p><p> </div></p><p> <canvas id="lineGraph" width="400" height="200"></canvas></p><p> </div></p><p> <script></p><p> const generateButton = document.getElementById('generate');</p><p> const resetButton = document.getElementById('reset');</p><p> const labelsInput = document.getElementById('labels');</p><p> const dataInput = document.getElementById('data');</p><p> const titleInput = document.getElementById('title');</p><p> const colorInput = document.getElementById('color');</p><p> const ctx = document.getElementById('lineGraph').getContext('2d');</p><p> let chartInstance;</p><p> function generateGraph() {</p><p> const labels = labelsInput.value.split(',').map(label => label.trim());</p><p> const data = dataInput.value.split(',').map(value => parseFloat(value.trim()));</p><p> const title = titleInput.value;</p><p> const color = colorInput.value;</p><p><br /></p><p> if (chartInstance) {</p><p> chartInstance.destroy();</p><p> }</p><p> chartInstance = new Chart(ctx, {</p><p> type: 'line',</p><p> data: {</p><p> labels: labels,</p><p> datasets: [{</p><p> label: title || 'My Line Graph',</p><p> data: data,</p><p> borderColor: color,</p><p> borderWidth: 2,</p><p> fill: false,</p><p> }]</p><p> },</p><p> options: {</p><p> responsive: true,</p><p> plugins: {</p><p> legend: {</p><p> display: true</p><p> },</p><p> tooltip: {</p><p> enabled: true</p><p> }</p><p> },</p><p> scales: {</p><p> x: {</p><p> title: {</p><p> display: true,</p><p> text: 'Labels'</p><p> }</p><p> },</p><p> y: {</p><p> title: {</p><p> display: true,</p><p> text: 'Values'</p><p> }</p><p> }</p><p> }</p><p> }</p><p> });</p><p> }</p><p> function resetForm() {</p><p> labelsInput.value = '';</p><p> dataInput.value = '';</p><p> titleInput.value = '';</p><p> colorInput.value = '#007bff';</p><p> if (chartInstance) {</p><p> chartInstance.destroy();</p><p> }</p><p> }</p><p> generateButton.addEventListener('click', generateGraph);</p><p> resetButton.addEventListener('click', resetForm);</p><p> </script></p><p></body></p><p></html></p><div><br /></div></pre><div class="blogger-post-footer">Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.</div>Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.com0tag:blogger.com,1999:blog-2982462447704153538.post-70354787635974896452025-01-25T05:34:00.000-08:002025-01-25T05:34:01.164-08:00Audio Recorder Tool Code<p> Audio Recorder Tool is a smart tool written in Javascript, HTML and CSS, that has the ability to record your voice and download it accordingly.</p><pre class="brush:c#"><p><!DOCTYPE html></p><p><html lang="en"></p><p><head></p><p> <meta charset="UTF-8"></p><p> <meta name="viewport" content="width=device-width, initial-scale=1.0"></p><p> <title>Audio Recorder Tool</title></p><p> <style></p><p> body {</p><p> font-family: Arial, sans-serif;</p><p> display: flex;</p><p> flex-direction: column;</p><p> justify-content: center;</p><p> align-items: center;</p><p> height: 100vh;</p><p> margin: 0;</p><p> background: linear-gradient(135deg, #6a11cb, #2575fc);</p><p> color: #fff;</p><p> }</p><p> .recorder {</p><p> text-align: center;</p><p> background: #fff;</p><p> color: #000;</p><p> border-radius: 12px;</p><p> padding: 20px;</p><p> box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);</p><p> }</p><p> .recorder button {</p><p> background-color: #6a11cb;</p><p> color: #fff;</p><p> border: none;</p><p> padding: 10px 20px;</p><p> margin: 10px;</p><p> font-size: 16px;</p><p> border-radius: 8px;</p><p> cursor: pointer;</p><p> transition: background-color 0.3s ease;</p><p> }</p><p> .recorder button:hover {</p><p> background-color: #2575fc;</p><p> }</p><p> .recorder button:disabled {</p><p> background-color: #ccc;</p><p> cursor: not-allowed;</p><p> }</p><p> .recorder audio {</p><p> margin-top: 20px;</p><p> width: 100%;</p><p> }</p><p> </style></p><p></head></p><p><body></p><p> <div class="recorder"></p><p> <h1>Audio Recorder Tool</h1></p><p> <button id="startBtn">Start Recording</button></p><p> <button id="stopBtn" disabled>Stop Recording</button></p><p> <audio id="audioPlayback" controls></audio></p><p> <a id="downloadLink" style="display:none;" download="recording.wav">Download Recording</a></p><p> </div></p><p> <script></p><p> let mediaRecorder;</p><p> let recordedChunks = [];</p><p> const startBtn = document.getElementById('startBtn');</p><p> const stopBtn = document.getElementById('stopBtn');</p><p> const audioPlayback = document.getElementById('audioPlayback');</p><p> const downloadLink = document.getElementById('downloadLink');</p><p> startBtn.addEventListener('click', async () => {</p><p> try {</p><p> const stream = await navigator.mediaDevices.getUserMedia({ audio: true });</p><p> mediaRecorder = new MediaRecorder(stream);</p><p> mediaRecorder.ondataavailable = event => {</p><p> if (event.data.size > 0) {</p><p> recordedChunks.push(event.data);</p><p> }</p><p> };</p><p> mediaRecorder.onstop = () => {</p><p> const blob = new Blob(recordedChunks, { type: 'audio/wav' });</p><p> const audioURL = URL.createObjectURL(blob);</p><p> audioPlayback.src = audioURL;</p><p> downloadLink.href = audioURL;</p><p> downloadLink.style.display = 'inline-block';</p><p> };</p><p> mediaRecorder.start();</p><p> startBtn.disabled = true;</p><p> stopBtn.disabled = false;</p><p> downloadLink.style.display = 'none';</p><p> recordedChunks = [];</p><p> } catch (err) {</p><p> alert('Error accessing microphone: ' + err.message);</p><p> }</p><p> });</p><p> stopBtn.addEventListener('click', () => {</p><p> mediaRecorder.stop();</p><p> startBtn.disabled = false;</p><p> stopBtn.disabled = true;</p><p> });</p><p> </script></p><p></body></p><p></html></p><div><br /></div></pre><div class="blogger-post-footer">Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.</div>Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.com0tag:blogger.com,1999:blog-2982462447704153538.post-32240877091812191502025-01-25T04:53:00.000-08:002025-01-25T04:53:32.033-08:00Doughnut Chart Maker Tool Code<p>Here is the Free Doughnut Chart Maker Tool Code, it will draw a doughnut chart after collecting values from user, you can use this tool for draw sales reports or any reports to see growth, this tool is written in Javascript, HTML and css. </p><pre class="c#"><p><!DOCTYPE html></p><p><html lang="en"></p><p><head></p><p> <meta charset="UTF-8"></p><p> <meta name="viewport" content="width=device-width, initial-scale=1.0"></p><p> <title>Doughnut Chart Maker Tool</title></p><p> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script></p><p> <style></p><p> body {</p><p> font-family: Arial, sans-serif;</p><p> margin: 0;</p><p> padding: 0;</p><p> box-sizing: border-box;</p><p> background: linear-gradient(135deg, #ff9a9e, #fad0c4);</p><p> color: #333;</p><p> }</p><p> .container {</p><p> display: flex;</p><p> flex-direction: column;</p><p> align-items: center;</p><p> justify-content: center;</p><p> min-height: 100vh;</p><p> padding: 20px;</p><p> }</p><p> .chart-container {</p><p> width: 100%;</p><p> max-width: 600px;</p><p> margin-bottom: 20px;</p><p> background: white;</p><p> border-radius: 12px;</p><p> padding: 20px;</p><p> box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);</p><p> }</p><p> .form-container {</p><p> width: 100%;</p><p> max-width: 600px;</p><p> background: white;</p><p> border-radius: 12px;</p><p> padding: 20px;</p><p> box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);</p><p> }</p><p> .form-group {</p><p> margin-bottom: 15px;</p><p> }</p><p> .form-group label {</p><p> display: block;</p><p> margin-bottom: 5px;</p><p> font-weight: bold;</p><p> }</p><p> .form-group input {</p><p> width: calc(100% - 12px);</p><p> padding: 8px;</p><p> border: 1px solid #ddd;</p><p> border-radius: 8px;</p><p> outline: none;</p><p> font-size: 14px;</p><p> }</p><p> .add-data-button {</p><p> display: inline-block;</p><p> margin: 10px 0;</p><p> padding: 10px 20px;</p><p> background: #34d399;</p><p> color: white;</p><p> border: none;</p><p> border-radius: 8px;</p><p> cursor: pointer;</p><p> transition: all 0.3s ease;</p><p> }</p><p> .add-data-button:hover {</p><p> background: #059669;</p><p> }</p><p> .generate-button {</p><p> display: block;</p><p> width: 100%;</p><p> margin: 20px 0;</p><p> padding: 10px 20px;</p><p> background: #2563eb;</p><p> color: white;</p><p> border: none;</p><p> border-radius: 8px;</p><p> cursor: pointer;</p><p> font-size: 16px;</p><p> font-weight: bold;</p><p> transition: all 0.3s ease;</p><p> }</p><p> .generate-button:hover {</p><p> background: #1d4ed8;</p><p> }</p><p> .data-container {</p><p> margin-top: 20px;</p><p> }</p><p> </style></p><p></head></p><p><body></p><p> <div class="container"></p><p> <div class="chart-container"></p><p> <canvas id="doughnutChart"></canvas></p><p> </div></p><p> <div class="form-container"></p><p> <h2>Add Data for Doughnut Chart</h2></p><p> <div class="form-group"></p><p> <label for="label">Label</label></p><p> <input type="text" id="label" placeholder="Enter label (e.g., Sales, Expenses)"></p><p> </div></p><p> <div class="form-group"></p><p> <label for="value">Value</label></p><p> <input type="number" id="value" placeholder="Enter value"></p><p> </div></p><p> <button class="add-data-button" onclick="addData()">Add Data</button></p><p> <div class="data-container" id="dataContainer"></div></p><p> <button class="generate-button" onclick="generateChart()">Generate Chart</button></p><p> </div></p><p> </div></p><p> <script></p><p> let data = [];</p><p> let labels = [];</p><p> let chartInstance = null;</p><p> function addData() {</p><p> const labelInput = document.getElementById('label');</p><p> const valueInput = document.getElementById('value');</p><p> const label = labelInput.value.trim();</p><p> const value = parseFloat(valueInput.value);</p><p> if (label && !isNaN(value)) {</p><p> labels.push(label);</p><p> data.push(value);</p><p> labelInput.value = '';</p><p> valueInput.value = '';</p><p> updateDataContainer();</p><p> } else {</p><p> alert('Please provide valid label and value.');</p><p> }</p><p> }</p><p> function updateDataContainer() {</p><p> const dataContainer = document.getElementById('dataContainer');</p><p> dataContainer.innerHTML = '';</p><p> labels.forEach((label, index) => {</p><p> const dataItem = document.createElement('p');</p><p> dataItem.textContent = `${label}: ${data[index]}`;</p><p> dataContainer.appendChild(dataItem);</p><p> });</p><p> }</p><p> function generateChart() {</p><p> const ctx = document.getElementById('doughnutChart').getContext('2d');</p><p> if (chartInstance) {</p><p> chartInstance.destroy();</p><p> }</p><p> chartInstance = new Chart(ctx, {</p><p> type: 'doughnut',</p><p> data: {</p><p> labels: labels,</p><p> datasets: [{</p><p> data: data,</p><p> backgroundColor: [</p><p> '#f87171', '#fb923c', '#facc15', '#34d399', '#60a5fa', '#a78bfa', '#f472b6'</p><p> ],</p><p> hoverOffset: 4</p><p> }]</p><p> },</p><p> options: {</p><p> responsive: true,</p><p> plugins: {</p><p> legend: {</p><p> position: 'bottom'</p><p> }</p><p> }</p><p> }</p><p> });</p><p> }</p><p> </script></p><p></body></p><p></html></p><div><br /></div></pre><div class="blogger-post-footer">Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.</div>Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.com0tag:blogger.com,1999:blog-2982462447704153538.post-32003070344676897012025-01-24T22:42:00.000-08:002025-01-24T22:42:59.970-08:00SEO Audit Tool Code<p>By SEO Audit Tool code you can add functionality of seo audit and analyze any website to your website for free. this cool tool will provide basic analysis for the website how your website is performing for search engines.</p><p>COPY AND PASTE CODE</p><pre class="brush:c#"><p><!DOCTYPE html></p><p><html lang="en"></p><p><head></p><p> <meta charset="UTF-8"></p><p> <meta name="viewport" content="width=device-width, initial-scale=1.0"></p><p> <title>SEO Audit Tool</title></p><p> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script></p><p> <style></p><p> body {</p><p> font-family: Arial, sans-serif;</p><p> margin: 0;</p><p> padding: 0;</p><p> background-color: #f9fafb;</p><p> }</p><p><br /></p><p> header {</p><p> background: linear-gradient(to right, #4caf50, #81c784);</p><p> color: white;</p><p> text-align: center;</p><p> padding: 1rem;</p><p> }</p><p><br /></p><p> .container {</p><p> max-width: 800px;</p><p> margin: 2rem auto;</p><p> padding: 1rem;</p><p> background: white;</p><p> box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);</p><p> border-radius: 10px;</p><p> }</p><p><br /></p><p> .input-group {</p><p> display: flex;</p><p> flex-wrap: wrap;</p><p> margin-bottom: 1rem;</p><p> }</p><p><br /></p><p> .input-group input {</p><p> flex: 1;</p><p> padding: 0.5rem;</p><p> font-size: 1rem;</p><p> border: 1px solid #ddd;</p><p> border-radius: 5px 0 0 5px;</p><p> }</p><p><br /></p><p> .input-group button {</p><p> padding: 0.5rem 1rem;</p><p> background: #4caf50;</p><p> color: white;</p><p> border: none;</p><p> border-radius: 0 5px 5px 0;</p><p> cursor: pointer;</p><p> font-size: 1rem;</p><p> }</p><p><br /></p><p> .input-group button:hover {</p><p> background: #388e3c;</p><p> }</p><p><br /></p><p> .results {</p><p> margin-top: 2rem;</p><p> }</p><p><br /></p><p> .results .result-card {</p><p> padding: 1rem;</p><p> margin-bottom: 1rem;</p><p> background: #e8f5e9;</p><p> border-left: 5px solid #4caf50;</p><p> border-radius: 5px;</p><p> box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);</p><p> }</p><p><br /></p><p> .results .result-card h4 {</p><p> margin: 0 0 0.5rem 0;</p><p> font-size: 1.2rem;</p><p> }</p><p><br /></p><p> .results .result-card p {</p><p> margin: 0;</p><p> color: #555;</p><p> }</p><p><br /></p><p> footer {</p><p> text-align: center;</p><p> padding: 1rem;</p><p> background: #4caf50;</p><p> color: white;</p><p> position: relative;</p><p> bottom: 0;</p><p> width: 100%;</p><p> }</p><p><br /></p><p> @media (max-width: 600px) {</p><p> .input-group {</p><p> flex-direction: column;</p><p> }</p><p><br /></p><p> .input-group input {</p><p> border-radius: 5px;</p><p> margin-bottom: 0.5rem;</p><p> }</p><p><br /></p><p> .input-group button {</p><p> border-radius: 5px;</p><p> }</p><p> }</p><p> </style></p><p></head></p><p><body></p><p> <header></p><p> <h1>SEO Audit Tool</h1></p><p> <p>Analyze your website's SEO performance</p></p><p> </header></p><p><br /></p><p> <div class="container"></p><p> <div class="input-group"></p><p> <input type="text" id="urlInput" placeholder="Enter website URL"></p><p> <button onclick="performAudit()">Run Audit</button></p><p> </div></p><p><br /></p><p> <div class="results" id="results"></p><p> <p>Enter a URL and click "Run Audit" to see the results.</p></p><p> </div></p><p> </div></p><p><br /></p><p> <footer></p><p> <p>&copy; 2025 SEO Audit Tool. All rights reserved.</p></p><p> </footer></p><p><br /></p><p> <script></p><p> async function performAudit() {</p><p> const url = document.getElementById('urlInput').value;</p><p> const resultsDiv = document.getElementById('results');</p><p><br /></p><p> if (!url) {</p><p> resultsDiv.innerHTML = '<p style="color: red;">Please enter a valid URL.</p>';</p><p> return;</p><p> }</p><p><br /></p><p> resultsDiv.innerHTML = '<p>Loading results...</p>';</p><p><br /></p><p> try {</p><p> // Mock API response since no actual endpoint is provided</p><p> const mockResponse = {</p><p> title: 'Test Website Title',</p><p> description: 'This is a sample meta description for the website.',</p><p> keywords: ['SEO', 'Audit', 'Tool'],</p><p> loadTime: '2.5s',</p><p> mobileFriendly: true,</p><p> };</p><p><br /></p><p> // Simulate API call</p><p> const data = mockResponse; // Replace with actual API call: await axios.get('/api/audit?url=' + encodeURIComponent(url));</p><p><br /></p><p> // Render results</p><p> resultsDiv.innerHTML = `</p><p> <div class="result-card"></p><p> <h4>Title</h4></p><p> <p>${data.title}</p></p><p> </div></p><p> <div class="result-card"></p><p> <h4>Meta Description</h4></p><p> <p>${data.description}</p></p><p> </div></p><p> <div class="result-card"></p><p> <h4>Keywords</h4></p><p> <p>${data.keywords.join(', ')}</p></p><p> </div></p><p> <div class="result-card"></p><p> <h4>Page Load Time</h4></p><p> <p>${data.loadTime}</p></p><p> </div></p><p> <div class="result-card"></p><p> <h4>Mobile Friendly</h4></p><p> <p>${data.mobileFriendly ? 'Yes' : 'No'}</p></p><p> </div></p><p> `;</p><p> } catch (error) {</p><p> resultsDiv.innerHTML = '<p style="color: red;">Error fetching audit results. Please try again later.</p>';</p><p> }</p><p> }</p><p> </script></p><p></body></p><p></html></p><p> </p></pre><div class="blogger-post-footer">Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.</div>Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.com0tag:blogger.com,1999:blog-2982462447704153538.post-79638409962475717962025-01-24T06:57:00.000-08:002025-01-24T06:57:09.455-08:00JSON to Text Tool code<p><span style="font-family: verdana;"> JSON to Text Tool code is written in css, Javascript and html.</span></p><pre class="brush:c#"><p><!DOCTYPE html></p><p><html lang="en"></p><p><head></p><p> <meta charset="UTF-8"></p><p> <meta name="viewport" content="width=device-width, initial-scale=1.0"></p><p> <title>JSON to Text Tool</title></p><p> <style></p><p> body {</p><p> font-family: Arial, sans-serif;</p><p> margin: 0;</p><p> padding: 0;</p><p> display: flex;</p><p> flex-direction: column;</p><p> align-items: center;</p><p> background: #f3f4f6;</p><p> color: #333;</p><p> }</p><p><br /></p><p> header {</p><p> width: 100%;</p><p> background: linear-gradient(90deg, #4caf50, #2196f3);</p><p> color: #fff;</p><p> padding: 20px 0;</p><p> text-align: center;</p><p> box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);</p><p> }</p><p><br /></p><p> header h1 {</p><p> margin: 0;</p><p> font-size: 2em;</p><p> }</p><p><br /></p><p> main {</p><p> width: 90%;</p><p> max-width: 800px;</p><p> margin: 20px auto;</p><p> padding: 20px;</p><p> background: #fff;</p><p> border-radius: 8px;</p><p> box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);</p><p> }</p><p><br /></p><p> .input-section, .output-section {</p><p> margin-bottom: 20px;</p><p> }</p><p><br /></p><p> label {</p><p> display: block;</p><p> font-weight: bold;</p><p> margin-bottom: 8px;</p><p> }</p><p><br /></p><p> textarea {</p><p> width: 100%;</p><p> height: 150px;</p><p> padding: 10px;</p><p> font-size: 1em;</p><p> border: 1px solid #ddd;</p><p> border-radius: 4px;</p><p> resize: none;</p><p> }</p><p><br /></p><p> textarea:focus {</p><p> border-color: #2196f3;</p><p> outline: none;</p><p> box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);</p><p> }</p><p><br /></p><p> button {</p><p> background: #4caf50;</p><p> color: #fff;</p><p> border: none;</p><p> padding: 10px 20px;</p><p> font-size: 1em;</p><p> border-radius: 4px;</p><p> cursor: pointer;</p><p> transition: background 0.3s ease;</p><p> }</p><p><br /></p><p> button:hover {</p><p> background: #45a049;</p><p> }</p><p><br /></p><p> pre {</p><p> background: #f1f1f1;</p><p> padding: 10px;</p><p> border-radius: 4px;</p><p> overflow-x: auto;</p><p> white-space: pre-wrap;</p><p> word-wrap: break-word;</p><p> border: 1px solid #ddd;</p><p> }</p><p><br /></p><p> .error {</p><p> color: #e53935;</p><p> font-weight: bold;</p><p> }</p><p> </style></p><p></head></p><p><body></p><p> <header></p><p> <h1>JSON to Text Tool</h1></p><p> </header></p><p> <main></p><p> <div class="input-section"></p><p> <label for="json-input">Enter JSON:</label></p><p> <textarea id="json-input" placeholder="Paste your JSON here..."></textarea></p><p> </div></p><p> <button id="convert-btn">Convert to Text</button></p><p> <div class="output-section"></p><p> <label for="text-output">Resulting Text:</label></p><p> <pre id="text-output">Your output will appear here...</pre></p><p> </div></p><p> </main></p><p><br /></p><p> <script></p><p> document.getElementById('convert-btn').addEventListener('click', () => {</p><p> const jsonInput = document.getElementById('json-input').value;</p><p> const textOutput = document.getElementById('text-output');</p><p><br /></p><p> try {</p><p> const parsedJSON = JSON.parse(jsonInput);</p><p> const formattedText = JSON.stringify(parsedJSON, null, 2);</p><p> textOutput.textContent = formattedText;</p><p> textOutput.classList.remove('error');</p><p> } catch (error) {</p><p> textOutput.textContent = 'Invalid JSON! Please check your input.';</p><p> textOutput.classList.add('error');</p><p> }</p><p> });</p><p> </script></p><p></body></p><p></html></p><div><br /></div></pre><div class="blogger-post-footer">Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.</div>Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.com0tag:blogger.com,1999:blog-2982462447704153538.post-43286901989174312772025-01-24T06:50:00.000-08:002025-01-24T06:50:57.199-08:00JSON to CSV Converter Tool Code<p><span style="font-family: verdana;"> JSON to CSV Converter Tool Code is written in HTML, Javascript, Css and JSON.</span></p><p><span style="font-family: verdana;"><br /></span></p><pre class="brush:c#"><p><!DOCTYPE html></p><p><html lang="en"></p><p><head></p><p> <meta charset="UTF-8"></p><p> <meta name="viewport" content="width=device-width, initial-scale=1.0"></p><p> <title>JSON to CSV Converter</title></p><p> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"></p><p> <style></p><p> body {</p><p> font-family: Arial, sans-serif;</p><p> margin: 0;</p><p> padding: 0;</p><p> background-color: #f5f5f5;</p><p> display: flex;</p><p> justify-content: center;</p><p> align-items: center;</p><p> height: 100vh;</p><p> }</p><p> .container {</p><p> width: 90%;</p><p> max-width: 600px;</p><p> background: #ffffff;</p><p> box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);</p><p> border-radius: 8px;</p><p> padding: 20px;</p><p> text-align: center;</p><p> }</p><p> h1 {</p><p> color: #333;</p><p> margin-bottom: 20px;</p><p> }</p><p> textarea {</p><p> width: 100%;</p><p> height: 150px;</p><p> border: 1px solid #ddd;</p><p> border-radius: 6px;</p><p> padding: 10px;</p><p> resize: none;</p><p> font-size: 14px;</p><p> color: #333;</p><p> }</p><p> button {</p><p> background-color: #4CAF50;</p><p> color: white;</p><p> border: none;</p><p> padding: 10px 20px;</p><p> border-radius: 6px;</p><p> cursor: pointer;</p><p> font-size: 16px;</p><p> margin-top: 10px;</p><p> transition: background-color 0.3s ease;</p><p> }</p><p> button:hover {</p><p> background-color: #45a049;</p><p> }</p><p> .error {</p><p> color: red;</p><p> font-size: 14px;</p><p> margin-top: 10px;</p><p> }</p><p> .success {</p><p> color: green;</p><p> font-size: 14px;</p><p> margin-top: 10px;</p><p> }</p><p> .download-link {</p><p> display: block;</p><p> margin-top: 15px;</p><p> color: #007BFF;</p><p> text-decoration: none;</p><p> }</p><p> .download-link:hover {</p><p> text-decoration: underline;</p><p> }</p><p> </style></p><p></head></p><p><body></p><p> <div class="container"></p><p> <h1>JSON to CSV Converter</h1></p><p> <textarea id="jsonInput" placeholder="Paste your JSON here..."></textarea></p><p> <button id="convertBtn">Convert to CSV</button></p><p> <div class="error" id="error"></div></p><p> <div class="success" id="success"></div></p><p> <a id="downloadLink" class="download-link" style="display: none;">Download CSV</a></p><p> </div></p><p><br /></p><p> <script></p><p> document.getElementById('convertBtn').addEventListener('click', () => {</p><p> const jsonInput = document.getElementById('jsonInput').value;</p><p> const errorDiv = document.getElementById('error');</p><p> const successDiv = document.getElementById('success');</p><p> const downloadLink = document.getElementById('downloadLink');</p><p><br /></p><p> errorDiv.textContent = '';</p><p> successDiv.textContent = '';</p><p> downloadLink.style.display = 'none';</p><p><br /></p><p> try {</p><p> const jsonData = JSON.parse(jsonInput);</p><p><br /></p><p> if (!Array.isArray(jsonData)) {</p><p> throw new Error('JSON must be an array of objects.');</p><p> }</p><p><br /></p><p> const headers = Object.keys(jsonData[0]);</p><p> const csvRows = [headers.join(",")];</p><p><br /></p><p> jsonData.forEach(obj => {</p><p> const values = headers.map(header => {</p><p> const escaped = ('' + (obj[header] || '')).replace(/"/g, '""');</p><p> return `"${escaped}"`;</p><p> });</p><p> csvRows.push(values.join(","));</p><p> });</p><p><br /></p><p> const csvData = csvRows.join("\n");</p><p> const blob = new Blob([csvData], { type: 'text/csv' });</p><p> const url = URL.createObjectURL(blob);</p><p><br /></p><p> downloadLink.href = url;</p><p> downloadLink.download = 'output.csv';</p><p> downloadLink.style.display = 'block';</p><p> downloadLink.textContent = 'Download CSV';</p><p><br /></p><p> successDiv.textContent = 'Conversion successful!';</p><p> } catch (error) {</p><p> errorDiv.textContent = error.message;</p><p> }</p><p> });</p><p> </script></p><p></body></p><p></html></p><div><br /></div></pre><div class="blogger-post-footer">Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.</div>Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.com0tag:blogger.com,1999:blog-2982462447704153538.post-23256051224280480102025-01-24T06:47:00.000-08:002025-01-24T06:47:00.329-08:00XML to JSON Tool Code<p><span style="font-family: verdana;">XML to JSON Tool Code is written in Javascript, HTML and css.</span></p><p><br /></p><pre class="brush:c#"><p> <!DOCTYPE html></p><p><html lang="en"></p><p><head></p><p> <meta charset="UTF-8"></p><p> <meta name="viewport" content="width=device-width, initial-scale=1.0"></p><p> <title>XML to JSON Tool</title></p><p> <style></p><p> body {</p><p> font-family: Arial, sans-serif;</p><p> background-color: #f4f4f9;</p><p> margin: 0;</p><p> padding: 0;</p><p> display: flex;</p><p> flex-direction: column;</p><p> align-items: center;</p><p> justify-content: center;</p><p> height: 100vh;</p><p> }</p><p><br /></p><p> .container {</p><p> background: #ffffff;</p><p> border-radius: 8px;</p><p> box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);</p><p> padding: 20px;</p><p> max-width: 800px;</p><p> width: 90%;</p><p> }</p><p><br /></p><p> h1 {</p><p> text-align: center;</p><p> color: #4CAF50;</p><p> }</p><p><br /></p><p> textarea {</p><p> width: 100%;</p><p> height: 150px;</p><p> padding: 10px;</p><p> margin: 10px 0;</p><p> border: 1px solid #ddd;</p><p> border-radius: 4px;</p><p> font-family: monospace;</p><p> font-size: 14px;</p><p> }</p><p><br /></p><p> button {</p><p> background-color: #4CAF50;</p><p> color: white;</p><p> border: none;</p><p> border-radius: 4px;</p><p> padding: 10px 20px;</p><p> cursor: pointer;</p><p> font-size: 16px;</p><p> }</p><p><br /></p><p> button:hover {</p><p> background-color: #45a049;</p><p> }</p><p><br /></p><p> .output {</p><p> background: #f9f9f9;</p><p> padding: 10px;</p><p> border: 1px solid #ddd;</p><p> border-radius: 4px;</p><p> font-family: monospace;</p><p> font-size: 14px;</p><p> white-space: pre-wrap;</p><p> }</p><p><br /></p><p> .error {</p><p> color: red;</p><p> font-size: 14px;</p><p> }</p><p><br /></p><p> .controls {</p><p> display: flex;</p><p> justify-content: space-between;</p><p> gap: 10px;</p><p> flex-wrap: wrap;</p><p> }</p><p><br /></p><p> .controls button {</p><p> flex: 1;</p><p> }</p><p><br /></p><p> @media (max-width: 600px) {</p><p> textarea {</p><p> height: 120px;</p><p> }</p><p> }</p><p> </style></p><p></head></p><p><body></p><p> <div class="container"></p><p> <h1>XML to JSON Converter</h1></p><p> <textarea id="xmlInput" placeholder="Paste your XML here..."></textarea></p><p> <div class="controls"></p><p> <button id="convertBtn">Convert to JSON</button></p><p> <button id="clearBtn">Clear</button></p><p> <button id="downloadBtn">Download JSON</button></p><p> </div></p><p> <div id="outputSection"></p><p> <h3>Output:</h3></p><p> <div id="jsonOutput" class="output"></div></p><p> <p id="error" class="error"></p></p><p> </div></p><p> </div></p><p><br /></p><p> <script></p><p> document.getElementById('convertBtn').addEventListener('click', () => {</p><p> const xmlInput = document.getElementById('xmlInput').value;</p><p> const jsonOutput = document.getElementById('jsonOutput');</p><p> const errorOutput = document.getElementById('error');</p><p><br /></p><p> jsonOutput.textContent = '';</p><p> errorOutput.textContent = '';</p><p><br /></p><p> try {</p><p> const parser = new DOMParser();</p><p> const xmlDoc = parser.parseFromString(xmlInput, 'application/xml');</p><p><br /></p><p> if (xmlDoc.getElementsByTagName('parsererror').length) {</p><p> throw new Error('Invalid XML format.');</p><p> }</p><p><br /></p><p> const obj = xmlToJson(xmlDoc);</p><p> jsonOutput.textContent = JSON.stringify(obj, null, 2);</p><p> } catch (e) {</p><p> errorOutput.textContent = e.message;</p><p> }</p><p> });</p><p><br /></p><p> document.getElementById('clearBtn').addEventListener('click', () => {</p><p> document.getElementById('xmlInput').value = '';</p><p> document.getElementById('jsonOutput').textContent = '';</p><p> document.getElementById('error').textContent = '';</p><p> });</p><p><br /></p><p> document.getElementById('downloadBtn').addEventListener('click', () => {</p><p> const jsonOutput = document.getElementById('jsonOutput').textContent;</p><p><br /></p><p> if (!jsonOutput) {</p><p> alert('No JSON to download.');</p><p> return;</p><p> }</p><p><br /></p><p> const blob = new Blob([jsonOutput], { type: 'application/json' });</p><p> const url = URL.createObjectURL(blob);</p><p> const link = document.createElement('a');</p><p> link.href = url;</p><p> link.download = 'converted.json';</p><p> link.click();</p><p> URL.revokeObjectURL(url);</p><p> });</p><p><br /></p><p> function xmlToJson(xml) {</p><p> const obj = {};</p><p><br /></p><p> if (xml.nodeType === 1) { // Element</p><p> if (xml.attributes.length > 0) {</p><p> obj['@attributes'] = {};</p><p> for (let j = 0; j < xml.attributes.length; j++) {</p><p> const attribute = xml.attributes.item(j);</p><p> obj['@attributes'][attribute.nodeName] = attribute.nodeValue;</p><p> }</p><p> }</p><p> } else if (xml.nodeType === 3) { // Text</p><p> return xml.nodeValue.trim();</p><p> }</p><p><br /></p><p> if (xml.hasChildNodes()) {</p><p> for (let i = 0; i < xml.childNodes.length; i++) {</p><p> const item = xml.childNodes.item(i);</p><p> const nodeName = item.nodeName;</p><p><br /></p><p> if (typeof obj[nodeName] === 'undefined') {</p><p> const nodeValue = xmlToJson(item);</p><p> if (nodeValue) {</p><p> obj[nodeName] = nodeValue;</p><p> }</p><p> } else {</p><p> if (!Array.isArray(obj[nodeName])) {</p><p> obj[nodeName] = [obj[nodeName]];</p><p> }</p><p> const nodeValue = xmlToJson(item);</p><p> if (nodeValue) {</p><p> obj[nodeName].push(nodeValue);</p><p> }</p><p> }</p><p> }</p><p> }</p><p><br /></p><p> return Object.keys(obj).length ? obj : null;</p><p> }</p><p> </script></p><p></body></p><p></html></p><div><br /></div></pre><div class="blogger-post-footer">Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.</div>Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.com0tag:blogger.com,1999:blog-2982462447704153538.post-91131391682199997542025-01-24T06:40:00.000-08:002025-01-24T06:40:46.229-08:00JSON to XML Converter Tool Code<p><span style="font-family: verdana;">JSON to XML Converter Tool Code Written in HTML Javascript and Css. </span></p><p><span style="font-family: verdana;"><br /></span></p><pre class="brush:c#"><p><!DOCTYPE html></p><p><html lang="en"></p><p><head></p><p> <meta charset="UTF-8"></p><p> <meta name="viewport" content="width=device-width, initial-scale=1.0"></p><p> <title>JSON to XML Converter</title></p><p> <style></p><p> body {</p><p> font-family: Arial, sans-serif;</p><p> margin: 0;</p><p> padding: 0;</p><p> background-color: #f4f4f9;</p><p> }</p><p> .container {</p><p> max-width: 1200px;</p><p> margin: 20px auto;</p><p> padding: 20px;</p><p> background-color: #ffffff;</p><p> border-radius: 8px;</p><p> box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);</p><p> }</p><p> h1 {</p><p> text-align: center;</p><p> color: #4a90e2;</p><p> }</p><p> textarea {</p><p> width: 100%;</p><p> height: 200px;</p><p> margin: 10px 0;</p><p> padding: 10px;</p><p> border: 1px solid #ccc;</p><p> border-radius: 5px;</p><p> font-size: 14px;</p><p> resize: vertical;</p><p> }</p><p> button {</p><p> background-color: #4a90e2;</p><p> color: #fff;</p><p> border: none;</p><p> padding: 10px 20px;</p><p> font-size: 16px;</p><p> border-radius: 5px;</p><p> cursor: pointer;</p><p> margin: 10px 0;</p><p> display: inline-block;</p><p> }</p><p> button:hover {</p><p> background-color: #357ab8;</p><p> }</p><p> .output {</p><p> background-color: #f9f9f9;</p><p> padding: 15px;</p><p> border: 1px solid #ddd;</p><p> border-radius: 5px;</p><p> overflow-x: auto;</p><p> }</p><p> .error {</p><p> color: red;</p><p> font-weight: bold;</p><p> }</p><p> </style></p><p></head></p><p><body></p><p> <div class="container"></p><p> <h1>JSON to XML Converter</h1></p><p> <textarea id="jsonInput" placeholder="Enter JSON here..."></textarea></p><p> <button id="convertButton">Convert to XML</button></p><p> <div class="output" id="xmlOutput"></div></p><p> </div></p><p> <script></p><p> function jsonToXml(json) {</p><p> const convert = (obj, root = true) => {</p><p> let xml = '';</p><p> for (let key in obj) {</p><p> if (obj.hasOwnProperty(key)) {</p><p> const value = obj[key];</p><p> if (Array.isArray(value)) {</p><p> value.forEach(item => {</p><p> xml += `<${key}>${convert(item, false)}</${key}>`;</p><p> });</p><p> } else if (typeof value === 'object' && value !== null) {</p><p> xml += `<${key}>${convert(value, false)}</${key}>`;</p><p> } else {</p><p> xml += `<${key}>${value}</${key}>`;</p><p> }</p><p> }</p><p> }</p><p> return root ? `<?xml version="1.0" encoding="UTF-8"?>\n<root>${xml}</root>` : xml;</p><p> };</p><p> return convert(json);</p><p> }</p><p> document.getElementById('convertButton').addEventListener('click', () => {</p><p> const input = document.getElementById('jsonInput').value;</p><p> const outputElement = document.getElementById('xmlOutput');</p><p> outputElement.innerHTML = '';</p><p> try {</p><p> const json = JSON.parse(input);</p><p> const xml = jsonToXml(json);</p><p> const formattedXml = xml.replace(/</g, '&lt;').replace(/>/g, '&gt;');</p><p> outputElement.innerHTML = `<pre>${formattedXml}</pre>`;</p><p> outputElement.classList.remove('error');</p><p> } catch (error) {</p><p> outputElement.textContent = 'Invalid JSON input! Please provide a valid JSON object.';</p><p> outputElement.classList.add('error');</p><p> }</p><p> });</p><p> </script></p><p></body></p><p></html></p><div><br /></div></pre><div class="blogger-post-footer">Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.</div>Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.com0tag:blogger.com,1999:blog-2982462447704153538.post-24065114951333994892025-01-24T06:29:00.000-08:002025-01-24T06:29:43.601-08:00Binary to Octal Converter Tool Code<p><span style="font-family: verdana;">Binary to Octal Converter Tool Code written in HTML, JavaScript and Css. </span></p><pre class="brush:c#"><p><!DOCTYPE html></p><p><html lang="en"></p><p><br /></p><p><head></p><p> <meta charset="UTF-8"></p><p> <meta name="viewport" content="width=device-width, initial-scale=1.0"></p><p> <title>Binary to Octal Converter</title></p><p> <style></p><p> body {</p><p> font-family: Arial, sans-serif;</p><p> margin: 0;</p><p> padding: 0;</p><p> background-color: #f4f4f9;</p><p> display: flex;</p><p> justify-content: center;</p><p> align-items: center;</p><p> height: 100vh;</p><p> }</p><p><br /></p><p> .container {</p><p> background: #ffffff;</p><p> box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);</p><p> padding: 30px;</p><p> border-radius: 10px;</p><p> width: 100%;</p><p> max-width: 400px;</p><p> text-align: center;</p><p> }</p><p><br /></p><p> h1 {</p><p> color: #5e5e5e;</p><p> }</p><p><br /></p><p> input[type="text"] {</p><p> width: 80%;</p><p> padding: 10px;</p><p> margin: 10px 0;</p><p> border: 2px solid #ddd;</p><p> border-radius: 5px;</p><p> font-size: 16px;</p><p> outline: none;</p><p> transition: border-color 0.3s;</p><p> }</p><p><br /></p><p> input[type="text"]:focus {</p><p> border-color: #3498db;</p><p> }</p><p><br /></p><p> button {</p><p> background-color: #3498db;</p><p> color: white;</p><p> padding: 12px 20px;</p><p> border: none;</p><p> border-radius: 5px;</p><p> font-size: 18px;</p><p> cursor: pointer;</p><p> width: 100%;</p><p> margin-top: 10px;</p><p> transition: background-color 0.3s;</p><p> }</p><p><br /></p><p> button:hover {</p><p> background-color: #2980b9;</p><p> }</p><p><br /></p><p> .output {</p><p> margin-top: 20px;</p><p> padding: 10px;</p><p> background-color: #e8f4f8;</p><p> border-radius: 5px;</p><p> color: #333;</p><p> font-size: 18px;</p><p> word-wrap: break-word;</p><p> border: 1px solid #ccc;</p><p> }</p><p><br /></p><p> .error {</p><p> color: red;</p><p> font-size: 16px;</p><p> margin-top: 10px;</p><p> }</p><p><br /></p><p> @media (max-width: 600px) {</p><p> .container {</p><p> padding: 20px;</p><p> }</p><p><br /></p><p> h1 {</p><p> font-size: 24px;</p><p> }</p><p><br /></p><p> input[type="text"] {</p><p> width: 90%;</p><p> }</p><p><br /></p><p> button {</p><p> font-size: 16px;</p><p> }</p><p> }</p><p> </style></p><p></head></p><p><br /></p><p><body></p><p><br /></p><p> <div class="container"></p><p> <h1>Binary to Octal Converter</h1></p><p> <input type="text" id="binaryInput" placeholder="Enter binary number"></p><p> <button onclick="convertBinaryToOctal()">Convert</button></p><p> <div id="result" class="output"></div></p><p> <div id="error" class="error"></div></p><p> </div></p><p><br /></p><p> <script></p><p> function convertBinaryToOctal() {</p><p> const binaryInput = document.getElementById('binaryInput').value;</p><p> const errorDiv = document.getElementById('error');</p><p> const resultDiv = document.getElementById('result');</p><p> errorDiv.innerHTML = '';</p><p> resultDiv.innerHTML = '';</p><p><br /></p><p> // Check if the input is a valid binary number</p><p> if (!/^[01]+$/.test(binaryInput)) {</p><p> errorDiv.innerHTML = 'Please enter a valid binary number.';</p><p> return;</p><p> }</p><p><br /></p><p> // Convert binary to octal</p><p> const decimal = parseInt(binaryInput, 2);</p><p> const octal = decimal.toString(8);</p><p><br /></p><p> resultDiv.innerHTML = `Octal: ${octal}`;</p><p> }</p><p> </script></p><p><br /></p><p></body></p><p><br /></p><p></html></p><div><br /></div></pre><div class="blogger-post-footer">Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.</div>Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.com0tag:blogger.com,1999:blog-2982462447704153538.post-1071537936226338042025-01-24T06:24:00.000-08:002025-01-24T06:24:38.686-08:00Octal to Decimal Converter Tool Code<p> <span style="font-family: verdana;">Octal to Decimal Converter Tool Code Written HTML Javascript and css.</span></p><p><br /></p><pre class="brush:c#"><p><!DOCTYPE html></p><p><html lang="en"></p><p><head></p><p> <meta charset="UTF-8"></p><p> <meta name="viewport" content="width=device-width, initial-scale=1.0"></p><p> <title>Octal to Decimal Converter</title></p><p> <style></p><p> body {</p><p> font-family: Arial, sans-serif;</p><p> background-color: #f5f5f5;</p><p> display: flex;</p><p> justify-content: center;</p><p> align-items: center;</p><p> height: 100vh;</p><p> margin: 0;</p><p> color: #333;</p><p> }</p><p><br /></p><p> .container {</p><p> background-color: #fff;</p><p> padding: 30px;</p><p> border-radius: 8px;</p><p> box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);</p><p> width: 100%;</p><p> max-width: 400px;</p><p> text-align: center;</p><p> }</p><p><br /></p><p> h1 {</p><p> color: #4CAF50;</p><p> font-size: 2em;</p><p> }</p><p><br /></p><p> label {</p><p> display: block;</p><p> margin-bottom: 10px;</p><p> font-size: 1.1em;</p><p> }</p><p><br /></p><p> input[type="text"] {</p><p> width: 100%;</p><p> padding: 10px;</p><p> margin-bottom: 20px;</p><p> border: 1px solid #ddd;</p><p> border-radius: 4px;</p><p> font-size: 1em;</p><p> outline: none;</p><p> }</p><p><br /></p><p> input[type="text"]:focus {</p><p> border-color: #4CAF50;</p><p> }</p><p><br /></p><p> .button {</p><p> background-color: #4CAF50;</p><p> color: #fff;</p><p> padding: 12px 20px;</p><p> border: none;</p><p> border-radius: 4px;</p><p> cursor: pointer;</p><p> font-size: 1.1em;</p><p> transition: background-color 0.3s;</p><p> }</p><p><br /></p><p> .button:hover {</p><p> background-color: #45a049;</p><p> }</p><p><br /></p><p> .result {</p><p> margin-top: 20px;</p><p> font-size: 1.2em;</p><p> font-weight: bold;</p><p> color: #333;</p><p> }</p><p><br /></p><p> .error {</p><p> color: red;</p><p> font-size: 1.1em;</p><p> font-weight: bold;</p><p> }</p><p><br /></p><p> /* Responsive Design */</p><p> @media (max-width: 480px) {</p><p> .container {</p><p> padding: 20px;</p><p> }</p><p><br /></p><p> h1 {</p><p> font-size: 1.8em;</p><p> }</p><p><br /></p><p> input[type="text"], .button {</p><p> font-size: 1em;</p><p> }</p><p> }</p><p> </style></p><p></head></p><p><body></p><p> <div class="container"></p><p> <h1>Octal to Decimal Converter</h1></p><p> <label for="octalInput">Enter Octal Number:</label></p><p> <input type="text" id="octalInput" placeholder="Enter an octal number" /></p><p> <button class="button" onclick="convertToDecimal()">Convert</button></p><p><br /></p><p> <div id="errorMessage" class="error"></div></p><p> <div id="result" class="result"></div></p><p> </div></p><p><br /></p><p> <script></p><p> function convertToDecimal() {</p><p> const octalInput = document.getElementById('octalInput').value;</p><p> const errorMessage = document.getElementById('errorMessage');</p><p> const result = document.getElementById('result');</p><p><br /></p><p> // Clear previous results and errors</p><p> result.textContent = '';</p><p> errorMessage.textContent = '';</p><p><br /></p><p> // Check if the input is a valid octal number</p><p> if (!/^[0-7]+$/.test(octalInput)) {</p><p> errorMessage.textContent = 'Please enter a valid octal number (digits 0-7 only).';</p><p> return;</p><p> }</p><p><br /></p><p> // Convert octal to decimal</p><p> const decimalResult = parseInt(octalInput, 8);</p><p> result.textContent = `Decimal: ${decimalResult}`;</p><p> }</p><p> </script></p><p></body></p><p></html></p><div><br /></div></pre><div class="blogger-post-footer">Learn Web Technologies for Free. Learn C#, LINQ, ASP.NET MVC, .NET Core, jQuery, JavaScript, Angular, Node.js, HTTPS, Python, Sass, D3.js, and many more latest technologies using easy tutorials.</div>Adminhttp://www.blogger.com/profile/14280783619524319019noreply@blogger.com0