Free extraordinary web tools: March 2024

Thursday, March 21, 2024

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Text to ASCII Art Converter</title>
    <style>
        body {
  background-color: #f2f2f2;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
}

textarea {
  display: block;
  margin: 0 auto;
  width: 80%;
  min-height: 200px;
  resize: none;
}

button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: #fff;
  font-size: 1.2em;
  cursor: pointer;
}

#output {
  display: block;
  margin: 20px auto;
  white-space: pre;
  font-size: 1.2em;
}

    </style>
  </head>
  <body>
    <h1>Text to ASCII Art Converter</h1>
    <textarea id="input" placeholder="Enter your text here..."></textarea>
    <button id="convert-btn" onclick="convert()">Convert</button>
    <div id="output"></div>
    <script>
        function convert() {
  const input = document.getElementById("input").value;
  const output = document.getElementById("output");
  let result = "";
  
  for (let i = 0; i < input.length; i++) {
    const charCode = input.charCodeAt(i);
    
    if (charCode === 10) { // new line
      result += "<br>";
    } else if (charCode >= 32 && charCode <= 126) { // printable ASCII
      result += String.fromCharCode(9216 + charCode); // convert to block element
    } else { // non-printable ASCII
      result += input[i];
    }
  }
  
  output.innerHTML = result;
}

    </script>
  </body>

</html>

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>System Monitor</title>
  <style>
      * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f1f1f1;
  padding: 20px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0 auto;
  max-width: 800px;
}

.box {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  margin: 20px;
  width: calc(50% - 40px);
  min-width: 300px;
  text-align: center;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.cpu-meter, .memory-meter {
  position: relative;
  height: 40px;
  background-color: #ddd;
  border-radius: 20px;
}

.cpu-bar, .memory-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 20px;
}

.cpu-bar {
  background-color: #fc605b;
}

.memory-bar {
  background-color: #43b581;
}

.percent {
  font-size: 36px;
  font-weight: bold;
  margin-top: 10px;
  color: #666;
}

  </style>
</head>
<body>
  <div class="container">
    <div class="box">
      <div class="title">CPU Usage</div>
      <div class="cpu-meter">
        <div class="cpu-bar" id="cpu-bar"></div>
      </div>
      <div class="percent" id="cpu-percent">0%</div>
    </div>
    <div class="box">
      <div class="title">Memory Usage</div>
      <div class="memory-meter">
        <div class="memory-bar" id="memory-bar"></div>
      </div>
      <div class="percent" id="memory-percent">0%</div>
    </div>
  </div>
  <script>
      // CPU usage
const cpuBar = document.getElementById('cpu-bar');
const cpuPercent = document.getElementById('cpu-percent');

function updateCPUUsage() {
  const randomNum = Math.floor(Math.random() * 101);
  cpuBar.style.width = randomNum + '%';
  cpuPercent.textContent = randomNum + '%';
}

setInterval(updateCPUUsage, 2000);

// Memory usage
const memoryBar = document.getElementById('memory-bar');
const memoryPercent = document.getElementById('memory-percent');

function updateMemoryUsage() {
  const randomNum = Math.floor(Math.random() * 101);
  memoryBar.style.width = randomNum + '%';
  memoryPercent.textContent = randomNum + '%';
}

setInterval(updateMemoryUsage, 3000);

  </script>
</body>
</html>

<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8">
    <title>System Information Tool</title>
    <style>
      /* add your custom styles here */
    </style>
  </head>
  <body>
    <h1>System Information Tool</h1>
    
    <div id="system-info"></div>
    
    <script>
        // get the div where the system info will be displayed
const systemInfoDiv = document.getElementById('system-info');

// create an array with the system info you want to display
const systemInfo = [
  { name: 'Operating System', value: navigator.platform },
  { name: 'Browser', value: navigator.userAgent },
  { name: 'Screen Resolution', value: screen.width + 'x' + screen.height },
  { name: 'Cookies Enabled', value: navigator.cookieEnabled },
  { name: 'Language', value: navigator.language }
];

// create a table to display the system info
const table = document.createElement('table');
table.classList.add('system-info-table');

// create a row for each system info item
systemInfo.forEach((item) => {
  const row = document.createElement('tr');
  row.innerHTML = `<td>${item.name}</td><td>${item.value}</td>`;
  table.appendChild(row);
});

// add the table to the system info div
systemInfoDiv.appendChild(table);

    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stopwatch</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }

    h1 {
      margin-top: 50px;
    }

    #time {
      font-size: 3em;
      margin-top: 30px;
    }

    button {
      font-size: 1.2em;
      margin: 10px;
      padding: 10px 20px;
      border-radius: 5px;
      border: none;
      background-color: #1abc9c;
      color: #fff;
      cursor: pointer;
    }

    button:hover {
      background-color: #16a085;
    }
  </style>
</head>
<body>
  <h1>Stopwatch</h1>
  <div id="time">00:00:00</div>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <button id="reset">Reset</button>

  <script>
    var hours = 0;
    var minutes = 0;
    var seconds = 0;
    var milliseconds = 0;
    var timer;

    function updateTimer() {
      milliseconds += 10;

      if (milliseconds == 1000) {
        milliseconds = 0;
        seconds++;
      }

      if (seconds == 60) {
        seconds = 0;
        minutes++;
      }

      if (minutes == 60) {
        minutes = 0;
        hours++;
      }

      document.getElementById("time").innerHTML = pad(hours) + ":" + pad(minutes) + ":" + pad(seconds);
    }

    function pad(num) {
      if (num < 10) {
        return "0" + num.toString();
      } else {
        return num.toString();
      }
    }

    document.getElementById("start").addEventListener("click", function() {
      timer = setInterval(updateTimer, 10);
    });

    document.getElementById("stop").addEventListener("click", function() {
      clearInterval(timer);
    });

    document.getElementById("reset").addEventListener("click", function() {
      clearInterval(timer);
      hours = 0;
      minutes = 0;
      seconds = 0;
      milliseconds = 0;
      document.getElementById("time").innerHTML = "00:00:00";
    });
  </script>
</body>
</html>

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sort Text Lines</title>
    <style>
        /* Styles for the text area */
        #input-text, #output-text {
            width: 100%;
            height: 150px;
            padding: 10px;
            margin-bottom: 10px;
            box-sizing: border-box;
        }
        /* Styles for the buttons */
        #sort-button, #clear-button {
            display: block;
            margin: 10px auto;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 0 4px #3e8e41;
        }
        #sort-button:hover, #clear-button:hover {
            background-color: #3e8e41;
        }
    </style>
</head>
<body>
    <div>
        <textarea id="input-text" placeholder="Enter your text here"></textarea>
        <button id="sort-button">Sort Lines</button>
        <button id="clear-button">Clear</button>
        <textarea id="output-text" placeholder="Sorted text will appear here" readonly></textarea>
    </div>
    <script>
        // Get the elements
        const inputText = document.getElementById('input-text');
        const outputText = document.getElementById('output-text');
        const sortButton = document.getElementById('sort-button');
        const clearButton = document.getElementById('clear-button');

        // Sort the text lines
        function sortLines() {
            // Get the lines and sort them
            const lines = inputText.value.split('\n').sort();

            // Join the sorted lines and display them
            outputText.value = lines.join('\n');
        }

        // Clear the text areas
        function clearText() {
            inputText.value = '';
            outputText.value = '';
        }

        // Add event listeners to the buttons
        sortButton.addEventListener('click', sortLines);
        clearButton.addEventListener('click', clearText);
    </script>
</body>
</html>

<!DOCTYPE html>

<html>
<head>
	<title>SEO Audit</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
		}

		header {
			background-color: #333;
			color: #fff;
			padding: 20px;
			text-align: center;
		}

		main {
			margin: 20px;
		}

		h1 {
			font-size: 28px;
			margin-top: 0;
		}

		p {
			font-size: 16px;
			line-height: 1.5;
			margin-bottom: 20px;
		}

		table {
			border-collapse: collapse;
			width: 100%;
			margin-bottom: 20px;
		}

		th, td {
			padding: 8px;
			text-align: left;
			border-bottom: 1px solid #ddd;
		}

		th {
			background-color: #f2f2f2;
		}

		@media screen and (max-width: 600px) {
			h1 {
				font-size: 24px;
			}

			p {
				font-size: 14px;
			}
		}
	</style>
</head>
<body>
	<header>
		<h1>SEO Audit</h1>
	</header>
	<main>
		<p>This is a sample SEO audit page. Please enter the URL of the website you want to audit:</p>
		<input type="text" id="url-input">
		<button onclick="runAudit()">Run Audit</button>
		<div id="audit-results"></div>
	</main>
	<script>
		function runAudit() {
			// Get the URL input value
			var url = document.getElementById("url-input").value;

			// Perform the audit
			var auditResults = performAudit(url);

			// Display the results
			displayResults(auditResults);
		}

		function performAudit(url) {
			// Perform the audit logic here and return the results
			var results = {
				title: "Sample Audit Results",
				metaDescription: "This is a sample SEO audit page.",
				h1Tags: [
					"Sample Heading 1",
					"Sample Heading 2"
				],
				pageSpeedScore: 85,
				keywordDensity: 2.5
			};

			return results;
		}

		function displayResults(results) {
			// Display the results in a table
			var html = "<h1>" + results.title + "</h1>";
			html += "<p>" + results.metaDescription + "</p>";
			html += "<table>";
			html += "<tr><th>Heading 1 Tags</th><td>" + results.h1Tags.join(", ") + "</td></tr>";
			html += "<tr><th>Page Speed Score</th><td>" + results.pageSpeedScore + "</td></tr>";
			html += "<tr><th>Keyword Density</th><td>" + results.keywordDensity + "</td></tr>";
			html += "</table>";

			// Add the HTML to the results div
			document.getElementById("audit-results").innerHTML = html;
		}
	</script>
</body>
</html>

<!DOCTYPE html>

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f2f2f2;
        margin: 0;
        padding: 0;
      }

      #container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
      }

      h1 {
        text-align: center;
      }

      input[type="number"] {
        width: 50px;
        margin-right: 10px;
        padding: 5px;
        border-radius: 5px;
        border: none;
        text-align: center;
      }

      input[type="button"] {
        padding: 5px 10px;
        background-color: #4caf50;
        color: #fff;
        border-radius: 5px;
        border: none;
        cursor: pointer;
      }

      #result {
        margin-top: 20px;
        font-size: 24px;
        text-align: center;
      }

      #colorPicker {
        width: 100%;
        height: 200px;
        margin: 20px 0;
        border-radius: 5px;
      }
    </style>
    <title>RGB to HEX Converter</title>
  </head>
  <body>
    <div id="container">
      <h1>RGB to HEX Converter</h1>
      <div>
        <input type="color" id="colorPicker" onchange="updateRGB()">
      </div>
      <div>
        <label>Red:</label>
        <input type="number" id="red" min="0" max="255" value="0" onchange="updateColor()">
        <label>Green:</label>
        <input type="number" id="green" min="0" max="255" value="0" onchange="updateColor()">
        <label>Blue:</label>
        <input type="number" id="blue" min="0" max="255" value="0" onchange="updateColor()">
      </div>
      <div id="result"></div>
    </div>
    <script>
      var colorPicker = document.getElementById("colorPicker");
      var redInput = document.getElementById("red");
      var greenInput = document.getElementById("green");
      var blueInput = document.getElementById("blue");
      var resultDiv = document.getElementById("result");

      function updateRGB() {
        var color = colorPicker.value;
        var rgb = hexToRGB(color);

        redInput.value = rgb.r;
        greenInput.value = rgb.g;
        blueInput.value = rgb.b;

        updateColor();
      }

      function updateColor() {
        var red = redInput.value;
        var green = greenInput.value;
        var blue = blueInput.value;

        var hex = "#" + componentToHex(red) + componentToHex(green) + componentToHex(blue);

        colorPicker.value = hex;

        resultDiv.innerHTML = hex;
      }

      function hexToRGB(hex) {
        var r = parseInt(hex.substring(1, 3), 16);
        var g = parseInt(hex.substring(3, 5), 16);
        var b = parseInt(hex.substring(5, 7), 16);
            return { r: r, g: g, b: b };
  }

  function componentToHex(c) {
    var hex = parseInt(c).toString(16);
    return hex.length == 1 ? "0" + hex : hex;
  }

  updateRGB();
</script>
 </body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Remove Lines Containing</title>
	<style>
		body {
			font-family: Arial, sans-serif;
		}
		.container {
			margin: auto;
			max-width: 600px;
			padding: 20px;
		}
		textarea {
			width: 100%;
			height: 200px;
			padding: 10px;
			box-sizing: border-box;
			margin-bottom: 10px;
		}
		input[type=text] {
			width: 100%;
			padding: 12px 20px;
			margin: 8px 0;
			box-sizing: border-box;
			border: 2px solid #ccc;
			border-radius: 4px;
		}
		input[type=button] {
			background-color: #4CAF50;
			color: white;
			padding: 12px 20px;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			float: right;
		}
		input[type=button]:hover {
			background-color: #45a049;
		}
	</style>
</head>
<body>
	<div class="container">
		<h2>Remove Lines Containing</h2>
		<p>Enter the text and the keyword to remove lines containing it:</p>
		<textarea id="myTextarea" placeholder="Enter text here..."></textarea>
		<input type="text" id="myKeyword" placeholder="Enter keyword...">
		<input type="button" value="Remove Lines" onclick="removeLines()">
	</div>

	<script>
		function removeLines() {
			// Get the text area and keyword input elements
			var textArea = document.getElementById("myTextarea");
			var keyword = document.getElementById("myKeyword").value;

			// Split the text area value into an array of lines
			var lines = textArea.value.split("\n");

			// Loop through the lines array and remove lines containing the keyword
			for (var i = 0; i < lines.length; i++) {
				if (lines[i].indexOf(keyword) !== -1) {
					lines.splice(i, 1);
					i--;
				}
			}

			// Join the lines array back into a string and update the text area value
			textArea.value = lines.join("\n");
		}
	</script>
</body>
</html>

<!DOCTYPE html>

<html>
  <head>
    <title>Pie Chart Maker</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="container">
      <h1>Pie Chart Maker</h1>
      <canvas id="pieChart" width="400" height="400"></canvas>
      <form>
        <label for="data">Enter Data (comma separated)</label>
        <input type="text" id="data" placeholder="e.g. 10, 20, 30, 40">
        <button type="button" onclick="drawChart()">Draw Chart</button>
      </form>
    </div>
    <script>
        function drawChart() {
  var canvas = document.getElementById("pieChart");
  var dataInput = document.getElementById("data");
  var data = dataInput.value.split(",").map(function(item) {
    return parseInt(item);
  });
  var total = data.reduce(function(sum, value) {
    return sum + value;
  }, 0);
  var colors = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#f1c40f", "#e67e22", "#e74c3c"];
  var startAngle = 0;
  var endAngle = 0;
  var ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < data.length; i++) {
    endAngle = startAngle + (data[i] / total) * 2 * Math.PI;
    ctx.fillStyle = colors[i % colors.length];
    ctx.beginPath();
    ctx.moveTo(canvas.width / 2, canvas.height / 2);
    ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, startAngle, endAngle);
    ctx.lineTo(canvas.width / 2, canvas.height / 2);
    ctx.fill();
    startAngle = endAngle;
  }
}

    </script>
  </body>
</html>

<!DOCTYPE html>

<html>
<head>
	<meta charset="UTF-8">
	<title>OPML to JSON Converter</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100vh;
			background-color: #f5f5f5;
		}

		h1 {
			margin-top: 0;
		}

		textarea {
			width: 100%;
			height: 300px;
			padding: 10px;
			border: 1px solid #ccc;
			border-radius: 4px;
			resize: none;
			box-sizing: border-box;
		}

		button {
			background-color: #4CAF50;
			color: white;
			padding: 10px 20px;
			border: none;
			border-radius: 4px;
			cursor: pointer;
		}

		button:hover {
			background-color: #3e8e41;
		}

		.output {
			margin-top: 20px;
			width: 100%;
			padding: 10px;
			border: 1px solid #ccc;
			border-radius: 4px;
			box-sizing: border-box;
			white-space: pre-wrap;
			word-wrap: break-word;
			background-color: #fff;
		}

		@media screen and (min-width: 768px) {
			.container {
				width: 50%;
			}
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>OPML to JSON Converter</h1>
		<textarea id="opml-input" placeholder="Paste your OPML code here"></textarea>
		<button onclick="convert()">Convert</button>
		<div class="output" id="json-output"></div>
	</div>

	<script>
		function convert() {
			var opmlInput = document.getElementById("opml-input").value;
			var jsonOutput = document.getElementById("json-output");

			try {
				var xml = new DOMParser().parseFromString(opmlInput, "text/xml");
				var outline = xml.getElementsByTagName("outline")[0];
				var json = convertOutline(outline);
				jsonOutput.innerHTML = JSON.stringify(json, null, 4);
			} catch (e) {
				jsonOutput.innerHTML = "Error: " + e.message;
			}
		}

		function convertOutline(outline) {
			var json = {};
			for (var i = 0; i < outline.attributes.length; i++) {
				json[outline.attributes[i].name] = outline.attributes[i].value;
			}
			if (outline.hasChildNodes()) {
				json.children = [];
				for (var i = 0; i < outline.childNodes.length; i++) {
					var child = outline.childNodes[i];
					if (child.nodeName === "outline") {
						json.children.push(convertOutline(child));
					}
				}
			}
			return json;
		}
	</script>
</body>
</html>

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nameserver Lookup</title>
</head>
<body>
  <h1>Nameserver Lookup</h1>
  <form>
    <label for="domain">Enter a domain:</label>
    <input type="text" id="domain" placeholder="example.com" required>
    <button type="submit" id="submit-btn">Lookup</button>
  </form>
  <div id="result"></div>
  <script>
      const form = document.querySelector('form');
const input = document.querySelector('#domain');
const result = document.querySelector('#result');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const domain = input.value.trim();
  if (domain === '') {
    alert('Please enter a domain name');
    return;
  }
  const url = `https://api.hackertarget.com/dnslookup/?q=${domain}`;

  fetch(url)
    .then(response => response.text())
    .then(data => {
      result.innerHTML = `<pre>${data}</pre>`;
    })
    .catch(error => {
      result.innerHTML = `<p>Oops! Something went wrong. Please try again later.</p>`;
      console.error(error);
    });
});

  </script>
</body>
</html>

<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8">
    <title>Mortgage Calculator</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f2f2f2;
      }
      .calculator {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
      }
      input[type="number"] {
        width: 100%;
        padding: 12px;
        margin: 8px 0;
        box-sizing: border-box;
        border: none;
        border-radius: 4px;
        background-color: #f2f2f2;
      }
      label {
        font-size: 18px;
        font-weight: bold;
      }
      button {
        background-color: #4CAF50;
        color: white;
        padding: 12px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 18px;
      }
      button:hover {
        background-color: #3e8e41;
      }
      .result {
        margin-top: 20px;
        font-size: 24px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="calculator">
      <h1>Mortgage Calculator</h1>
      <form>
        <label for="loanAmount">Loan Amount:</label>
        <input type="number" id="loanAmount" placeholder="Enter loan amount...">
        <label for="interestRate">Interest Rate (%):</label>
        <input type="number" id="interestRate" placeholder="Enter interest rate...">
        <label for="loanTerm">Loan Term (years):</label>
        <input type="number" id="loanTerm" placeholder="Enter loan term...">
        <button type="button" onclick="calculate()">Calculate</button>
      </form>
      <div class="result" id="result"></div>
    </div>
    <script>
        function calculate() {
  var loanAmount = document.getElementById("loanAmount").value;
  var interestRate = document.getElementById("interestRate").value / 100 / 12;
  var loanTerm = document.getElementById("loanTerm").value * 12;
  var monthlyPayment = (loanAmount * interestRate) / (1 - Math.pow(1 + interestRate, -loanTerm));
  var totalPayment = monthlyPayment * loanTerm;
  document.getElementById("result").innerHTML = "Monthly Payment: $" + monthlyPayment.toFixed(2) + "<br>Total Payment: $" + totalPayment.toFixed(2);
}

    </script>
  </body>
</html>

<!DOCTYPE html>

<html>
  <head>
    <title>Line Graph Maker</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.graph-container {
  margin-bottom: 20px;
}

.form-container {
  display: flex;
  flex-direction: column;
}

label {
  font-weight: bold;
  margin-bottom: 5px;
}

input[type="text"] {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

button {
  padding: 10px;
  border-radius: 5px;
  border: none;
  background-color: #4CAF50;
  color: #fff;
  cursor: pointer;
}

button:hover {
  background-color: #3e8e41;
}

    </style>
  </head>
  <body>
    <div class="container">
      <h1>Line Graph Maker</h1>
      <div class="graph-container">
        <canvas id="myChart"></canvas>
      </div>
      <div class="form-container">
        <form>
          <label for="dataset">Enter Dataset:</label>
          <input type="text" id="dataset" placeholder="Enter comma separated values" required>
          <label for="labels">Enter Labels:</label>
          <input type="text" id="labels" placeholder="Enter comma separated labels" required>
          <button type="button" onclick="createChart()">Create Chart</button>
        </form>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        function createChart() {
  // Get data from form
  var dataset = document.getElementById("dataset").value;
  var labels = document.getElementById("labels").value;

  // Split data into arrays
  var datasetArray = dataset.split(",");
  var labelsArray = labels.split(",");

  // Create chart
  var ctx = document.getElementById("myChart").getContext("2d");
  var myChart = new Chart(ctx, {
    type: "line",
    data: {
      labels: labelsArray,
      datasets: [
        {
          label: "My Dataset",
          data: datasetArray,
          borderColor: "rgba(75, 192, 192, 1)",
          backgroundColor: "rgba(75, 192, 192, 0.2)",
          borderWidth: 1
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        yAxes: [
          {
            ticks: {
              beginAtZero: true
            }
          }
        ]
      }
    }
  });
}

    </script>
  </body>
</html>

<!DOCTYPE html>

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    /* Responsive layout - makes the margin calculator look good on any device */
    * {
      box-sizing: border-box;
    }

    /* Style the input fields */
    input[type=text] {
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      resize: vertical;
    }

    /* Style the calculate button */
    .calculate-btn {
      background-color: #4CAF50;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-top: 10px;
    }

    /* Add a red border to the input fields if they are invalid */
    .invalid {
      border: 2px solid red;
    }

    /* Add a green border to the input fields if they are valid */
    .valid {
      border: 2px solid green;
    }
  </style>
</head>
<body>

  <h2>Margin Calculator</h2>

  <form>
    <label for="cost-price">Cost Price:</label>
    <input type="text" id="cost-price" name="cost-price" placeholder="Enter the cost price">

    <label for="selling-price">Selling Price:</label>
    <input type="text" id="selling-price" name="selling-price" placeholder="Enter the selling price">

    <button type="button" class="calculate-btn" onclick="calculateMargin()">Calculate Margin</button>
  </form>

  <p id="result"></p>

  <script>
    function calculateMargin() {
      var costPrice = document.getElementById("cost-price");
      var sellingPrice = document.getElementById("selling-price");
      var result = document.getElementById("result");

      // Check if the input fields are empty
      if (costPrice.value === "" || sellingPrice.value === "") {
        costPrice.classList.add("invalid");
        sellingPrice.classList.add("invalid");
        result.innerHTML = "Please fill in all fields.";
        result.style.color = "red";
      } else {
        costPrice.classList.remove("invalid");
        sellingPrice.classList.remove("invalid");

        // Check if the input values are valid numbers
        if (isNaN(costPrice.value) || isNaN(sellingPrice.value)) {
          costPrice.classList.add("invalid");
          sellingPrice.classList.add("invalid");
          result.innerHTML = "Please enter valid numbers.";
          result.style.color = "red";
        } else {
          costPrice.classList.add("valid");
          sellingPrice.classList.add("valid");

          // Calculate the margin
          var margin = ((sellingPrice.value - costPrice.value) / costPrice.value) * 100;
          result.innerHTML = "Margin: " + margin.toFixed(2) + "%";
          result.style.color = "green";
        }
      }
    }
  </script>

</body>
</html>

<!DOCTYPE html>

<html>
<head>
  <title>HEX to RGB Color Converter</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
      padding: 20px;
    }
    
    h1 {
      text-align: center;
      margin-bottom: 30px;
    }
    
    #color-picker {
      width: 100%;
      height: 200px;
      margin-bottom: 30px;
    }
    
    #rgb-result {
      font-size: 24px;
      text-align: center;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>HEX to RGB Color Converter</h1>
  <input type="color" id="color-picker" onchange="convertHexToRgb()">
  <div id="rgb-result"></div>

  <script>
    function convertHexToRgb() {
      // Get the selected color from the color picker
      const hexColor = document.getElementById("color-picker").value;
      
      // Convert the HEX color to RGB
      const r = parseInt(hexColor.substring(1, 3), 16);
      const g = parseInt(hexColor.substring(3, 5), 16);
      const b = parseInt(hexColor.substring(5, 7), 16);
      
      // Display the RGB result
      const rgbResult = document.getElementById("rgb-result");
      rgbResult.textContent = `RGB: ${r}, ${g}, ${b}`;
    }
  </script>
</body>
</html>

<!DOCTYPE html>

<html>
  <head>
    <title>Fancy Font Generator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
      }
      
      h1 {
        margin-top: 50px;
        font-size: 3em;
      }
      
      #input-text {
        width: 90%;
        max-width: 600px;
        margin: 50px auto;
        font-size: 1.5em;
        padding: 10px;
        border-radius: 10px;
        border: none;
        box-shadow: 0 0 5px rgba(0,0,0,0.5);
      }
      
      #output-text {
        width: 90%;
        max-width: 600px;
        margin: 0 auto;
        font-size: 3em;
        padding: 20px;
        border-radius: 10px;
        border: none;
        box-shadow: 0 0 5px rgba(0,0,0,0.5);
      }
      
      #change-style-button {
        display: block;
        margin: 50px auto;
        font-size: 1.2em;
        padding: 10px;
        border-radius: 10px;
        border: none;
        background-color: #f00;
        color: #fff;
        cursor: pointer;
      }
      
      @media screen and (max-width: 768px) {
        #input-text, #output-text {
          width: 100%;
          font-size: 1.2em;
        }
        
        #change-style-button {
          font-size: 1em;
        }
      }
    </style>
  </head>
  <body>
    <h1>Fancy Font Generator</h1>
    <input type="text" id="input-text" placeholder="Type your text here...">
    <div id="output-text"></div>
    <button id="change-style-button">Change Style</button>
    
    <script>
      const input = document.getElementById('input-text');
      const output = document.getElementById('output-text');
      const styles = [
        {
          name: 'Fancy',
          fontFamily: '"Lucida Console", Monaco, monospace',
          color: '#f00',
          textShadow: '2px 2px #000, -2px -2px #000, 2px -2px #000, -2px 2px #000',
        },
        {
          name: 'Serif',
          fontFamily: 'Georgia, serif',
          color: '#00f',
          textShadow: '2px 2px #000',
        },
        {
          name: 'Sans-serif',
          fontFamily: 'Helvetica, Arial, sans-serif',
          color: '#0f0',
          textShadow: '1px 1px #000, -1px -1px #000',
        },
        {
          name: 'Script',
          fontFamily: 'Brush Script MT, cursive',
          color: '#ff0',
          textShadow: '2px 2px #000, -2px -2px #000',
        },
      ];
      let currentStyleIndex = 0;
      
      function applyStyle() {
        const style = styles[currentStyleIndex];
        output.innerHTML = input.value.split('').map(char => `<span class="fancy" style="font-family: ${style.fontFamily}; color: ${style.color}; text-shadow: ${style.textShadow};">${char}</span>`).join('');
}
  function changeStyle() {
    currentStyleIndex = (currentStyleIndex + 1) % styles.length;
    applyStyle();
  }
  
  applyStyle();
  
  document.getElementById('change-style-button').addEventListener('click', changeStyle);
</script>
  </body>
</html>

<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8">
    <title>Doughnut Chart Maker</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .chart-container {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

.form-container {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

canvas {
  max-width: 100%;
}

    </style>
  </head>
  <body>
    <div class="chart-container">
      <canvas id="doughnut-chart"></canvas>
    </div>
    <div class="form-container">
      <form>
        <label for="chart-title">Chart Title:</label>
        <input type="text" id="chart-title" name="chart-title">
        <br>
        <label for="chart-labels">Chart Labels:</label>
        <input type="text" id="chart-labels" name="chart-labels">
        <br>
        <label for="chart-data">Chart Data:</label>
        <input type="text" id="chart-data" name="chart-data">
        <br>
        <button type="button" id="create-chart">Create Chart</button>
      </form>
    </div>
    <script>
        // Get the canvas element and initialize the Chart object
var canvas = document.getElementById('doughnut-chart');
var ctx = canvas.getContext('2d');
var chart;

// Add event listener to create chart button
var createChartBtn = document.getElementById('create-chart');
createChartBtn.addEventListener('click', function() {
  // Get chart data from form inputs
  var chartTitle = document.getElementById('chart-title').value;
  var chartLabels = document.getElementById('chart-labels').value.split(',');
  var chartData = document.getElementById('chart-data').value.split(',');

  // Create the chart
  if (chart) {
    chart.destroy();
  }
  chart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: chartLabels,
      datasets: [{
        label: chartTitle,
        data: chartData,
        backgroundColor: [
          '#FF6384',
          '#36A2EB',
          '#FFCE56',
          '#4BC0C0',
          '#9966FF',
          '#FF66CC',
          '#C9CBCF',
          '#666699',
          '#FF9900',
          '#33CC99'
        ]
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false
    }
  });
});

    </script>
  </body>
</html>

<!DOCTYPE html>

<html>
<head>
	<title>Dividend Calculator</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			font-family: Arial, sans-serif;
			background-color: #f2f2f2;
			margin: 0;
			padding: 0;
		}

		.container {
			max-width: 800px;
			margin: 0 auto;
			padding: 20px;
			background-color: #fff;
			box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
			border-radius: 5px;
		}

		h1 {
			text-align: center;
			margin-top: 0;
		}

		.form-group {
			margin-bottom: 20px;
		}

		label {
			display: block;
			margin-bottom: 5px;
		}

		input[type="number"] {
			width: 100%;
			padding: 10px;
			border-radius: 5px;
			border: none;
			box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
		}

		button {
			background-color: #4CAF50;
			color: #fff;
			padding: 10px;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			transition: background-color 0.3s;
		}

		button:hover {
			background-color: #3e8e41;
		}

		.result {
			font-size: 24px;
			font-weight: bold;
			text-align: center;
			margin-top: 20px;
			color: #4CAF50;
		}

		@media (max-width: 768px) {
			.container {
				max-width: 100%;
				padding: 10px;
			}

			h1 {
				font-size: 24px;
			}

			input[type="number"] {
				padding: 5px;
			}

			button {
				padding: 5px;
			}

			.result {
				font-size: 18px;
			}
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>Dividend Calculator</h1>
		<div class="form-group">
			<label for="amount">Enter investment amount:</label>
			<input type="number" id="amount" placeholder="Enter investment amount">
		</div>
		<div class="form-group">
			<label for="dividend">Enter dividend per share:</label>
			<input type="number" id="dividend" placeholder="Enter dividend per share">
		</div>
		<div class="form-group">
			<label for="shares">Enter number of shares:</label>
			<input type="number" id="shares" placeholder="Enter number of shares">
		</div>
		<button onclick="calculateDividend()">Calculate Dividend</button>
		<div class="result" id="result"></div>
	</div>

	<script>
		function calculateDividend() {
			var amount = document.getElementById("amount").value;
			var dividend = document.getElementById("dividend").value;
			var shares = document.getElementById("shares").value;
			var dividendAmount = dividend * shares;
			var dividendYield = (dividendAmount / amount) * 100
;
var result = document.getElementById("result");
result.innerHTML = "Dividend amount: $" + dividendAmount.toFixed(2) + "<br>Dividend yield: " + dividendYield.toFixed(2) + "%";
}
</script>

</body>
</html>

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Discounted Cash Flow Calculator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f7f7f7;
      margin: 0;
      padding: 0;
    }

    #wrapper {
      max-width: 700px;
      margin: 0 auto;
      padding: 20px;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    h1 {
      text-align: center;
    }

    label {
      display: block;
      margin-bottom: 5px;
    }

    input[type="number"] {
      width: 100%;
      padding: 8px;
      border-radius: 5px;
      border: none;
      margin-bottom: 10px;
    }

    button[type="submit"] {
      background-color: #4CAF50;
      color: #fff;
      border: none;
      padding: 10px;
      border-radius: 5px;
      cursor: pointer;
    }

    button[type="submit"]:hover {
      background-color: #3e8e41;
    }

    #result {
      margin-top: 20px;
      font-size: 24px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <h1>Discounted Cash Flow Calculator</h1>
    <form onsubmit="return calculateDiscountedCashFlow()">
      <label for="initialInvestment">Initial Investment</label>
      <input type="number" id="initialInvestment" required>
      <label for="cashFlows">Cash Flows</label>
      <textarea id="cashFlows" rows="5" required></textarea>
      <label for="discountRate">Discount Rate (%)</label>
      <input type="number" id="discountRate" required>
      <button type="submit">Calculate Discounted Cash Flow</button>
    </form>
    <div id="result"></div>
  </div>
  <script>
    function calculateDiscountedCashFlow() {
      var initialInvestment = document.getElementById("initialInvestment").value;
      var cashFlows = document.getElementById("cashFlows").value.split('\n');
      var discountRate = document.getElementById("discountRate").value;

      var discountedCashFlow = parseInt(initialInvestment);
      for (var i = 0; i < cashFlows.length; i++) {
        discountedCashFlow += parseInt(cashFlows[i]) / Math.pow(1 + (discountRate / 100), i+1);
      }

      document.getElementById("result").innerHTML = "Discounted Cash Flow: â‚¹" + discountedCashFlow.toFixed(2);

      return false;
    }
  </script>
</body>
</html>

<!DOCTYPE html>

<html>
<head>
  <title>Decimal to Binary Converter</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
    }
    
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 100px;
    }
    
    h1 {
      color: #333;
      margin-bottom: 20px;
    }
    
    .text-area {
      width: 400px;
      height: 200px;
      padding: 10px;
      border: 2px solid #ccc;
      border-radius: 4px;
      resize: none;
    }
    
    .convert-button {
      padding: 10px 20px;
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      background-color: #4CAF50;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .convert-button:hover {
      background-color: #45a049;
    }
    
    .result {
      margin-top: 20px;
      font-size: 18px;
      font-weight: bold;
      color: #333;
      white-space: pre-wrap;
    }
    
    @media screen and (max-width: 480px) {
      .text-area {
        width: 250px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Decimal to Binary Converter</h1>
    <textarea id="inputDecimal" class="text-area" placeholder="Enter decimal number"></textarea>
    <button onclick="convertToBinary()" class="convert-button">Convert</button>
    <div id="result" class="result"></div>
  </div>

  <script>
    function convertToBinary() {
      var inputDecimal = document.getElementById("inputDecimal").value;
      var decimal = parseInt(inputDecimal);
      var binary = decimal.toString(2);

      document.getElementById("result").textContent = "Binary representation: " + binary;
    }
  </script>
</body>
</html>

<!DOCTYPE html>

<html>
<head>
  <title>Decimal to Binary Converter</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
    }
    
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 100px;
    }
    
    h1 {
      color: #333;
      margin-bottom: 20px;
    }
    
    .text-area {
      width: 400px;
      height: 200px;
      padding: 10px;
      border: 2px solid #ccc;
      border-radius: 4px;
      resize: none;
    }
    
    .convert-button {
      padding: 10px 20px;
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      background-color: #4CAF50;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .convert-button:hover {
      background-color: #45a049;
    }
    
    .result {
      margin-top: 20px;
      font-size: 18px;
      font-weight: bold;
      color: #333;
      white-space: pre-wrap;
    }
    
    @media screen and (max-width: 480px) {
      .text-area {
        width: 250px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Decimal to Binary Converter</h1>
    <textarea id="inputDecimal" class="text-area" placeholder="Enter decimal number"></textarea>
    <button onclick="convertToBinary()" class="convert-button">Convert</button>
    <div id="result" class="result"></div>
  </div>

  <script>
    function convertToBinary() {
      var inputDecimal = document.getElementById("inputDecimal").value;
      var decimal = parseInt(inputDecimal);
      var binary = decimal.toString(2);

      document.getElementById("result").textContent = "Binary representation: " + binary;
    }
  </script>
</body>
</html>

<!DOCTYPE html>

<html>
<head>
  <title>Decimal to Binary Converter</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
    }
    
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 100px;
    }
    
    h1 {
      color: #333;
      margin-bottom: 20px;
    }
    
    .text-area {
      width: 400px;
      height: 200px;
      padding: 10px;
      border: 2px solid #ccc;
      border-radius: 4px;
      resize: none;
    }
    
    .convert-button {
      padding: 10px 20px;
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      background-color: #4CAF50;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .convert-button:hover {
      background-color: #45a049;
    }
    
    .result {
      margin-top: 20px;
      font-size: 18px;
      font-weight: bold;
      color: #333;
      white-space: pre-wrap;
    }
    
    @media screen and (max-width: 480px) {
      .text-area {
        width: 250px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Decimal to Binary Converter</h1>
    <textarea id="inputDecimal" class="text-area" placeholder="Enter decimal number"></textarea>
    <button onclick="convertToBinary()" class="convert-button">Convert</button>
    <div id="result" class="result"></div>
  </div>

  <script>
    function convertToBinary() {
      var inputDecimal = document.getElementById("inputDecimal").value;
      var decimal = parseInt(inputDecimal);
      var binary = decimal.toString(2);

      document.getElementById("result").textContent = "Binary representation: " + binary;
    }
  </script>
</body>
</html>

<!DOCTYPE html>

<html>
<head>
  <title>Decimal to Text Converter</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
      padding: 20px;
    }
    
    .container {
      max-width: 800px;
      margin: 0 auto;
    }
    
    h1 {
      color: #333;
      margin-bottom: 20px;
    }
    
    .input-field {
      width: 100%;
      padding: 10px;
      border: 2px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    
    .convert-button {
      margin-top: 10px;
      padding: 10px 20px;
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      background-color: #4CAF50;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .convert-button:hover {
      background-color: #45a049;
    }
    
    .result {
      margin-top: 20px;
      border: 2px solid #ccc;
      border-radius: 4px;
      padding: 10px;
      background-color: #fff;
    }
    
    .error {
      color: #ff0000;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Decimal to Text Converter</h1>
    <input id="inputDecimal" class="input-field" type="text" placeholder="Enter decimal representation">
    <button onclick="convertToText()" class="convert-button">Convert</button>
    <div id="result" class="result"></div>
  </div>

  <script>
    function convertToText() {
      var inputDecimal = document.getElementById("inputDecimal").value;
      var decimalArray = inputDecimal.trim().split(" ");
      var text = "";

      for (var i = 0; i < decimalArray.length; i++) {
        var decimalCode = parseInt(decimalArray[i], 10);
        text += String.fromCharCode(decimalCode);
      }

      document.getElementById("result").textContent = "Text: " + text;
    }
  </script>
</body>
</html>

<!DOCTYPE html>

<html>
<head>
	<meta charset="UTF-8">
	<title>OPML to JSON Converter</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100vh;
			background-color: #f5f5f5;
		}

		h1 {
			margin-top: 0;
		}

		textarea {
			width: 100%;
			height: 300px;
			padding: 10px;
			border: 1px solid #ccc;
			border-radius: 4px;
			resize: none;
			box-sizing: border-box;
		}

		button {
			background-color: #4CAF50;
			color: white;
			padding: 10px 20px;
			border: none;
			border-radius: 4px;
			cursor: pointer;
		}

		button:hover {
			background-color: #3e8e41;
		}

		.output {
			margin-top: 20px;
			width: 100%;
			padding: 10px;
			border: 1px solid #ccc;
			border-radius: 4px;
			box-sizing: border-box;
			white-space: pre-wrap;
			word-wrap: break-word;
			background-color: #fff;
		}

		@media screen and (min-width: 768px) {
			.container {
				width: 50%;
			}
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>OPML to JSON Converter</h1>
		<textarea id="opml-input" placeholder="Paste your OPML code here"></textarea>
		<button onclick="convert()">Convert</button>
		<div class="output" id="json-output"></div>
	</div>

	<script>
		function convert() {
			var opmlInput = document.getElementById("opml-input").value;
			var jsonOutput = document.getElementById("json-output");

			try {
				var xml = new DOMParser().parseFromString(opmlInput, "text/xml");
				var outline = xml.getElementsByTagName("outline")[0];
				var json = convertOutline(outline);
				jsonOutput.innerHTML = JSON.stringify(json, null, 4);
			} catch (e) {
				jsonOutput.innerHTML = "Error: " + e.message;
			}
		}

		function convertOutline(outline) {
			var json = {};
			for (var i = 0; i < outline.attributes.length; i++) {
				json[outline.attributes[i].name] = outline.attributes[i].value;
			}
			if (outline.hasChildNodes()) {
				json.children = [];
				for (var i = 0; i < outline.childNodes.length; i++) {
					var child = outline.childNodes[i];
					if (child.nodeName === "outline") {
						json.children.push(convertOutline(child));
					}
				}
			}
			return json;
		}
	</script>
</body>
</html>

<!DOCTYPE html>

<html>
<head>
  <title>Hexadecimal to Octal Converter</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
      padding: 20px;
    }
    
    .container {
      max-width: 800px;
      margin: 0 auto;
    }
    
    h1 {
      color: #333;
      margin-bottom: 20px;
    }
    
    .input-field {
      width: 100%;
      padding: 10px;
      border: 2px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    
    .convert-button {
      margin-top: 10px;
      padding: 10px 20px;
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      background-color: #4CAF50;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .convert-button:hover {
      background-color: #45a049;
    }
    
    .result {
      margin-top: 20px;
      border: 2px solid #ccc;
      border-radius: 4px;
      padding: 10px;
      background-color: #fff;
    }
    
    .error {
      color: #ff0000;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Hexadecimal to Octal Converter</h1>
    <input id="inputHex" class="input-field" type="text" placeholder="Enter hexadecimal number">
    <button onclick="convertToOctal()" class="convert-button">Convert</button>
    <div id="result" class="result"></div>
  </div>

  <script>
    function convertToOctal() {
      var inputHex = document.getElementById("inputHex").value;
      var hex = inputHex.trim();
      var octal = "";
      var isValid = /^[0-9A-Fa-f]+$/.test(hex);

      if (isValid) {
        var decimal = parseInt(hex, 16);
        octal = decimal.toString(8);

        document.getElementById("result").textContent = "Octal representation: " + octal;
      } else {
        document.getElementById("result").innerHTML = '<span class="error">Invalid hexadecimal number</span>';
      }
    }
  </script>
</body>
</html>

Monday, March 18, 2024

Compound Annual Growth Rate Calculator

Color Scheme Generator

AND Calculator

Input 1: Input 2:

Output:

Random Word Generator

Enter the number of words you want to generate:

Countdown Timer

Days

Hours

Minutes

Seconds

Password Generator

Password Length:

Include Uppercase Letters

Include Lowercase Letters

Include Numbers

Include Symbols

Generated Password:

Sales Tax Calculator

ASCII to Binary Converter

Binary to ASCII Converter

Decimal to Binary Converter

Decimal to Text Converter

Octal to Hexadecimal Converter

Octal to Text Converter

Text to ASCII Converter

Text to Octal Converter

Text to Hexadecimal Converter

AdSense Revenue Calculator

Pageviews: Clicks: Cost Per Click (CPC): Click-Through Rate (CTR):

Fake Address Generator

Text Generator

Enter Text: