0% found this document useful (0 votes)

6 views76 pages

HTML Coding

The document is an HTML template for a daily life assistant application featuring various tools such as a digital clock, calendar, weather updates, to-do list, notes, calculator, unit converter, world clock, random quotes, Pomodoro timer, password generator, BMI calculator, and a rock-paper-scissors game. Each tool is designed with user-friendly interfaces and interactive elements to enhance daily productivity. The layout utilizes Tailwind CSS for styling and includes JavaScript functionalities for dynamic content updates.

Uploaded by

nagarlaxmi122

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

6 views76 pages

HTML Coding

Uploaded by

nagarlaxmi122

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>My Daily Life Assistant</title>
<script src="[Link]
<link href="[Link]
family=Inter:wght@400;600&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
</style>
</head>
<body class="bg-gradient-to-tl from-purple-400 to-pink-300
min-h-screen flex justify-center items-center py-10">
<div class="container bg-white rounded-lg shadow-md p-6
w-4/5 max-w-2xl">
<h1 class="text-2xl font-semibold text-center text-gray-
800 mb-4 bg-gradient-to-r from-indigo-300 to-blue-300 bg-
clip-text text-transparent">My Daily Life Assistant</h1>
<p class="text-gray-600 text-center mb-6">Your one-stop
solution for a smoother day.</p>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3

gap-4">
<div class="bg-white rounded-lg p-4 shadow-sm
hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">Digital Clock</h2>
<div id="digital-clock" class="text-xl text-center text-
blue-600 font-mono">00:00:00</div>
</div>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">Calendar</h2>
<div id="calendar" class="text-sm text-gray-
600"></div>
</div>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">Weather</h2>
<div id="weather-info" class="text-sm text-gray-
600">Loading...</div>
</div>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">To-Do List</h2>
<ul id="todo-list" class="space-y-2"></ul>
<div class="flex space-x-2 mt-2">
<input type="text" id="todo-input"
placeholder="Add a task" class="flex-1 rounded-md border-
gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-
500 text-sm">
<button id="add-todo-button" class="bg-blue-500
hover:bg-blue-600 text-white rounded-md px-3 py-1 text-sm
shadow-md focus:outline-none focus:ring-2 focus:ring-blue-
500 focus:ring-opacity-50">Add</button>
</div>
</div>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">Notes</h2>
<textarea id="notes-text" placeholder="Write your
notes here..." class="w-full h-24 rounded-md border-gray-300
shadow-sm focus:border-blue-500 focus:ring-blue-500 text-
sm"></textarea>
<button id="save-notes-button" class="bg-green-500
hover:bg-green-600 text-white rounded-md px-3 py-1 mt-2
text-sm shadow-md focus:outline-none focus:ring-2
focus:ring-green-500 focus:ring-opacity-50">Save
Notes</button>
</div>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">Calculator</h2>
<div id="calculator" class="text-sm">
<input type="text" id="calculator-display"
class="w-full rounded-md border-gray-300 shadow-sm text-
right p-2 mb-2 text-lg font-mono" value="0" readonly>
<div class="grid grid-cols-4 gap-2">
<button class="bg-gray-200 hover:bg-gray-300
text-gray-700 rounded-md px-3 py-2 text-lg shadow-sm
focus:outline-none focus:ring-2 focus:ring-gray-200"
onclick="[Link]('7')">7</button>
<button class="bg-gray-200 hover:bg-gray-300
text-gray-700 rounded-md px-3 py-2 text-lg shadow-sm
focus:outline-none focus:ring-2 focus:ring-gray-200"
onclick="[Link]('8')">8</button>
<button class="bg-gray-200 hover:bg-gray-300
text-gray-700 rounded-md px-3 py-2 text-lg shadow-sm
focus:outline-none focus:ring-2 focus:ring-gray-200"
onclick="[Link]('9')">9</button>
<button class="bg-yellow-400 hover:bg-yellow-
500 text-white rounded-md px-3 py-2 text-lg shadow-sm
focus:outline-none focus:ring-2 focus:ring-yellow-400"
onclick="[Link]('/')">÷</button>
<button class="bg-gray-200 hover:bg-gray-300
text-gray-700 rounded-md px-3 py-2 text-lg shadow-sm
focus:outline-none focus:ring-2 focus:ring-gray-200"
onclick="[Link]('4')">4</button>
<button class="bg-gray-200 hover:bg-gray-300
text-gray-700 rounded-md px-3 py-2 text-lg shadow-sm
focus:outline-none focus:ring-2 focus:ring-gray-200"
onclick="[Link]('5')">5</button>
<button class="bg-gray-200 hover:bg-gray-300
text-gray-700 rounded-md px-3 py-2 text-lg shadow-sm
focus:outline-none focus:ring-2 focus:ring-gray-200"
onclick="[Link]('6')">6</button>
<button class="bg-yellow-400 hover:bg-yellow-
500 text-white rounded-md px-3 py-2 text-lg shadow-sm
focus:outline-none focus:ring-2 focus:ring-yellow-400"
onclick="[Link]('*')">×</button>
<button class="bg-gray-200 hover:bg-gray-300
text-gray-700 rounded-md px-3 py-2 text-lg shadow-sm
focus:outline-none focus:ring-2 focus:ring-gray-200"
onclick="[Link]('1')">1</button>
<button class="bg-gray-200 hover:bg-gray-300
text-gray-700 rounded-md px-3 py-2 text-lg shadow-sm
focus:outline-none focus:ring-2 focus:ring-gray-200"
onclick="[Link]('2')">2</button>
<button class="bg-gray-200 hover:bg-gray-300
text-gray-700 rounded-md px-3 py-2 text-lg shadow-sm
focus:outline-none focus:ring-2 focus:ring-gray-200"
onclick="[Link]('3')">3</button>
<button class="bg-yellow-400 hover:bg-yellow-
500 text-white rounded-md px-3 py-2 text-lg shadow-sm
focus:outline-none focus:ring-2 focus:ring-yellow-400"
onclick="[Link]('-')">-</button>
<button class="bg-gray-200 hover:bg-gray-300
text-gray-700 rounded-md px-3 py-2 text-lg shadow-sm
focus:outline-none focus:ring-2 focus:ring-gray-200"
onclick="[Link]('0')">0</button>
<button class="bg-gray-200 hover:bg-gray-300
text-gray-700 rounded-md px-3 py-2 text-lg shadow-sm
focus:outline-none focus:ring-2 focus:ring-gray-200"
onclick="[Link]()">.</button>
<button class="bg-yellow-400 hover:bg-yellow-
500 text-white rounded-md px-3 py-2 text-lg shadow-sm
focus:outline-none focus:ring-2 focus:ring-yellow-400"
onclick="[Link]('+')">+</button>
<button class="bg-red-500 hover:bg-red-600
text-white rounded-md px-3 py-2 text-lg shadow-sm
focus:outline-none focus:ring-2 focus:ring-red-500"
onclick="[Link]()">C</button>
<button class="bg-green-500 hover:bg-green-
600 text-white rounded-md px-3 py-2 text-lg shadow-sm
focus:outline-none focus:ring-2 focus:ring-green-500 col-
span-2" onclick="[Link]()">=</button>
</div>
</div>
</div>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">Unit Converter</h2>
<div class="grid grid-cols-2 gap-2">
<input type="number" id="unit-converter-input"
placeholder="Value" class="rounded-md border-gray-300
shadow-sm focus:border-blue-500 focus:ring-blue-500 text-
sm">
<select id="unit-converter-from" class="rounded-
md border-gray-300 shadow-sm focus:border-blue-500
focus:ring-blue-500 text-sm">
<option value="meters">Meters</option>
<option
value="kilometers">Kilometers</option>
<option value="feet">Feet</option>
<option value="miles">Miles</option>
</select>
<select id="unit-converter-to" class="rounded-md
border-gray-300 shadow-sm focus:border-blue-500
focus:ring-blue-500 text-sm">
<option value="meters">Meters</option>
<option
value="kilometers">Kilometers</option>
<option value="feet">Feet</option>
<option value="miles">Miles</option>
</select>
<button id="convert-units-button" class="bg-
indigo-500 hover:bg-indigo-600 text-white rounded-md px-3
py-1 text-sm shadow-md focus:outline-none focus:ring-2
focus:ring-indigo-500 focus:ring-opacity-50 col-span-
2">Convert</button>
</div>
<div id="unit-converter-result" class="mt-2 text-sm
text-gray-600 font-medium"></div>
</div>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">World Clock</h2>
<div id="world-clock-container" class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-sm font-medium text-gray-
600">New York:</span>
<span id="new-york-time" class="text-sm text-
blue-600 font-mono">Loading...</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm font-medium text-gray-
600">London:</span>
<span id="london-time" class="text-sm text-
blue-600 font-mono">Loading...</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm font-medium text-gray-
600">Tokyo:</span>
<span id="tokyo-time" class="text-sm text-blue-
600 font-mono">Loading...</span>
</div>
</div>
</div>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">Random Quote</h2>
<div id="random-quote" class="text-sm italic text-
gray-700 text-center">Loading...</div>
<button id="new-quote-button" class="bg-purple-
500 hover:bg-purple-600 text-white rounded-md px-3 py-1
mt-2 text-sm shadow-md focus:outline-none focus:ring-2
focus:ring-purple-500 focus:ring-opacity-50 w-full">New
Quote</button>
</div>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">Pomodoro Timer</h2>
<div class="text-center">
<div id="pomodoro-timer" class="text-3xl font-
mono text-red-500">25:00</div>
<div class="flex justify-center space-x-2 mt-2">
<button id="start-pomodoro-button" class="bg-
green-500 hover:bg-green-600 text-white rounded-md px-3
py-1 text-sm shadow-md focus:outline-none focus:ring-2
focus:ring-green-500 focus:ring-opacity-50">Start</button>
<button id="pause-pomodoro-button"
class="bg-yellow-500 hover:bg-yellow-600 text-white
rounded-md px-3 py-1 text-sm shadow-md focus:outline-
none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-
50">Pause</button>
<button id="reset-pomodoro-button" class="bg-
red-500 hover:bg-red-600 text-white rounded-md px-3 py-1
text-sm shadow-md focus:outline-none focus:ring-2
focus:ring-red-500 focus:ring-opacity-50">Reset</button>
</div>
</div>
</div>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">Password Generator</h2>
<div class="flex space-x-2">
<input type="text" id="password-length"
placeholder="Length (8-64)" class="flex-1 rounded-md
border-gray-300 shadow-sm focus:border-blue-500
focus:ring-blue-500 text-sm" value="12">
<button id="generate-password-button"
class="bg-teal-500 hover:bg-teal-600 text-white rounded-md
px-3 py-1 text-sm shadow-md focus:outline-none focus:ring-2
focus:ring-teal-500
focus:ring-opacity-50">Generate</button>
</div>
<div id="generated-password" class="mt-2 text-sm
text-gray-600 font-mono"></div>
</div>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">BMI Calculator</h2>
<div class="grid grid-cols-2 gap-2">
<input type="number" id="bmi-height"
placeholder="Height (cm)" class="rounded-md border-gray-
300 shadow-sm focus:border-blue-500 focus:ring-blue-500
text-sm">
<input type="number" id="bmi-weight"
placeholder="Weight (kg)" class="rounded-md border-gray-
300 shadow-sm focus:border-blue-500 focus:ring-blue-500
text-sm">
<button id="calculate-bmi-button" class="bg-pink-
500 hover:bg-pink-600 text-white rounded-md px-3 py-1 text-
sm shadow-md focus:outline-none focus:ring-2 focus:ring-
pink-500 focus:ring-opacity-50 col-span-2">Calculate
BMI</button>
</div>
<div id="bmi-result" class="mt-2 text-sm text-gray-
600 font-medium"></div>
</div>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">Rock Paper Scissors</h2>
<div class="text-center space-x-2 my-2">
<button data-choice="rock" class="bg-gray-300
hover:bg-gray-400 text-gray-700 rounded-md px-3 py-1 text-
sm shadow-md focus:outline-none focus:ring-2 focus:ring-
gray-300">Rock</button>
<button data-choice="paper" class="bg-gray-300
hover:bg-gray-400 text-gray-700 rounded-md px-3 py-1 text-
sm shadow-md focus:outline-none focus:ring-2 focus:ring-
gray-300">Paper</button>
<button data-choice="scissors" class="bg-gray-300
hover:bg-gray-400 text-gray-700 rounded-md px-3 py-1 text-
sm shadow-md focus:outline-none focus:ring-2 focus:ring-
gray-300">Scissors</button>
</div>
<div id="game-result" class="text-center text-sm
text-gray-600 font-medium"></div>
</div>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">Age Calculator</h2>
<div class="grid grid-cols-1 gap-2">
<input type="date" id="age-calculator-input"
class="rounded-md border-gray-300 shadow-sm
focus:border-blue-500 focus:ring-blue-500 text-sm">
<button id="calculate-age-button" class="bg-
indigo-500 hover:bg-indigo-600 text-white rounded-md px-3
py-1 text-sm shadow-md focus:outline-none focus:ring-2
focus:ring-indigo-500 focus:ring-opacity-50">Calculate
Age</button>
</div>
<div id="age-calculator-result" class="mt-2 text-sm
text-gray-600 font-medium"></div>
</div>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">Random Number Generator</h2>
<div class="flex space-x-2">
<input type="number" id="random-number-min"
placeholder="Min" class="flex-1 rounded-md border-gray-
300 shadow-sm focus:border-blue-500 focus:ring-blue-500
text-sm" value="1">
<input type="number" id="random-number-max"
placeholder="Max" class="flex-1 rounded-md border-gray-
300 shadow-sm focus:border-blue-500 focus:ring-blue-500
text-sm" value="100">
</div>
<button id="generate-random-number-button"
class="bg-blue-500 hover:bg-blue-600 text-white rounded-
md px-3 py-1 mt-2 text-sm shadow-md focus:outline-none
focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 w-
full">Generate</button>
<div id="random-number-result" class="mt-2 text-
sm text-gray-600 font-medium"></div>
</div>
<div class="bg-white rounded-lg p-4 shadow-sm
hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">Tip Calculator</h2>
<div class="grid grid-cols-1 gap-2">
<input type="number" id="tip-amount"
placeholder="Bill Amount" class="rounded-md border-gray-
300 shadow-sm focus:border-blue-500 focus:ring-blue-500
text-sm">
<input type="number" id="tip-percentage"
placeholder="Tip (%)" class="rounded-md border-gray-300
shadow-sm focus:border-blue-500 focus:ring-blue-500 text-
sm" value="15">
<button id="calculate-tip-button" class="bg-green-
500 hover:bg-green-600 text-white rounded-md px-3 py-1
text-sm shadow-md focus:outline-none focus:ring-2
focus:ring-green-500 focus:ring-opacity-50">Calculate
Tip</button>
</div>
<div id="tip-result" class="mt-2 text-sm text-gray-
600 font-medium"></div>
</div>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">Text Analyzer</h2>
<textarea id="text-analyzer-input"
placeholder="Enter text to analyze..." class="w-full h-24
rounded-md border-gray-300 shadow-sm focus:border-blue-
500 focus:ring-blue-500 text-sm"></textarea>
<button id="analyze-text-button" class="bg-purple-
500 hover:bg-purple-600 text-white rounded-md px-3 py-1
mt-2 text-sm shadow-md focus:outline-none focus:ring-2
focus:ring-purple-500 focus:ring-opacity-50 w-full">Analyze
Text</button>
<div id="text-analyzer-result" class="mt-2 text-sm
text-gray-600 font-medium space-y-1"></div>
</div>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">Grocery List</h2>
<ul id="grocery-list" class="space-y-2">
</ul>
<div class="flex space-x-2 mt-2">
<input type="text" id="grocery-input"
placeholder="Add item" class="flex-1 rounded-md border-
gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-
500 text-sm">
<button id="add-grocery-button" class="bg-blue-
500 hover:bg-blue-600 text-white rounded-md px-3 py-1 text-
sm shadow-md focus:outline-none focus:ring-2 focus:ring-
blue-500 focus:ring-opacity-50">Add</button>
</div>
</div>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">Website Speed Test</h2>
<input type="url" id="speed-test-url"
placeholder="Enter website URL" class="rounded-md border-
gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-
500 text-sm w-full mb-2">
<button id="run-speed-test-button" class="bg-
yellow-500 hover:bg-yellow-600 text-white rounded-md px-3
py-1 text-sm shadow-md focus:outline-none focus:ring-2
focus:ring-yellow-500 focus:ring-opacity-50 w-full">Test
Speed</button>
<div id="speed-test-result" class="mt-2 text-sm text-
gray-600 font-medium"></div>
</div>
<button id="back-to-top" class="hidden fixed bottom-4
right-4 bg-indigo-500 hover:bg-indigo-600 text-white
rounded-full p-2 text-lg shadow-md focus:outline-none
focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50
transition duration-300">↑</button>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">Image Resizer</h2>
<input type="file" id="image-resizer-input"
accept="image/*" class="mb-2 text-sm">
<div class="flex space-x-2 mb-2">
<input type="number" id="image-width"
placeholder="Width" class="flex-1 rounded-md border-gray-
300 shadow-sm focus:border-blue-500 focus:ring-blue-500
text-sm" value="300">
<input type="number" id="image-height"
placeholder="Height" class="flex-1 rounded-md border-gray-
300 shadow-sm focus:border-blue-500 focus:ring-blue-500
text-sm" value="200">
</div>
<button id="resize-image-button" class="bg-green-
500 hover:bg-green-600 text-white rounded-md px-3 py-1
text-sm shadow-md focus:outline-none focus:ring-2
focus:ring-green-500 focus:ring-opacity-50">Resize
Image</button>
<div id="image-resizer-result" class="mt-2 text-sm
text-gray-600"></div>
</div>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">Color Picker</h2>
<input type="color" id="color-picker"
value="#ff0000" class="w-full h-8 rounded-md mb-2">
<div id="color-picker-result" class="mt-2 text-sm
text-gray-600 font-mono">Selected Color: #ff0000</div>
</div>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">Drawing Pad</h2>
<canvas id="drawing-pad" width="400"
height="200" class="border border-gray-300 rounded-md
cursor-crosshair bg-gray-50"></canvas>
<div class="flex space-x-2 mt-2">
<input type="color" id="drawing-color"
value="#000000" class="w-8 h-8 rounded-md">
<input type="range" id="brush-size" min="1"
max="50" value="5" class="w-24">
<button id="clear-canvas-button" class="bg-red-
500 hover:bg-red-600 text-white rounded-md px-3 py-1 text-
sm shadow-md focus:outline-none focus:ring-2 focus:ring-
red-500 focus:ring-opacity-50">Clear</button>
</div>
</div>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">QR Code Generator</h2>
<input type="text" id="qr-code-data"
placeholder="Enter data for QR code" class="rounded-md
border-gray-300 shadow-sm focus:border-blue-500
focus:ring-blue-500 text-sm w-full mb-2">
<button id="generate-qr-code-button" class="bg-
indigo-500 hover:bg-indigo-600 text-white rounded-md px-3
py-1 text-sm shadow-md focus:outline-none focus:ring-2
focus:ring-indigo-500 focus:ring-opacity-50 w-full">Generate
QR Code</button>
<div id="qr-code-result" class="mt-2 text-sm text-
gray-600"></div>
</div>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">URL Shortener</h2>
<input type="url" id="url-shortener-input"
placeholder="Enter URL to shorten" class="rounded-md
border-gray-300 shadow-sm focus:border-blue-500
focus:ring-blue-500 text-sm w-full mb-2">
<button id="shorten-url-button" class="bg-pink-500
hover:bg-pink-600 text-white rounded-md px-3 py-1 text-sm
shadow-md focus:outline-none focus:ring-2 focus:ring-pink-
500 focus:ring-opacity-50 w-full">Shorten URL</button>
<div id="url-shortener-result" class="mt-2 text-sm
text-gray-600 font-medium"></div>
</div>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">Sound Player</h2>
<input type="file" id="sound-file-input"
accept="audio/*" class="mb-2 text-sm">
<div class="flex space-x-2">
<button id="play-sound-button" class="bg-green-
500 hover:bg-green-600 text-white rounded-md px-3 py-1
text-sm shadow-md focus:outline-none focus:ring-2
focus:ring-green-500 focus:ring-opacity-50">Play</button>
<button id="pause-sound-button" class="bg-
yellow-500 hover:bg-yellow-600 text-white rounded-md px-3
py-1 text-sm shadow-md focus:outline-none focus:ring-2
focus:ring-yellow-500 focus:ring-opacity-50">Pause</button>
</div>
<div id="sound-player-status" class="mt-2 text-sm
text-gray-600"></div>
</div>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">Countdown Timer</h2>
<input type="number" id="countdown-time"
placeholder="Seconds" class="rounded-md border-gray-300
shadow-sm focus:border-blue-500 focus:ring-blue-500 text-
sm mb-2" value="60">
<div class="flex space-x-2">
<button id="start-countdown-button" class="bg-
green-500 hover:bg-green-600 text-white rounded-md px-3
py-1 text-sm shadow-md focus:outline-none focus:ring-2
focus:ring-green-500 focus:ring-opacity-50">Start</button>
<button id="stop-countdown-button" class="bg-
red-500 hover:bg-red-600 text-white rounded-md px-3 py-1
text-sm shadow-md focus:outline-none focus:ring-2
focus:ring-red-500 focus:ring-opacity-50">Stop</button>
</div>
<div id="countdown-display" class="mt-2 text-2xl
text-center font-mono text-blue-600">00:00</div>
</div>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">Text to Speech</h2>
<textarea id="tts-text" placeholder="Enter text to
speak..." class="w-full h-24 rounded-md border-gray-300
shadow-sm focus:border-blue-500 focus:ring-blue-500 text-
sm"></textarea>
<button id="speak-button" class="bg-teal-500
hover:bg-teal-600 text-white rounded-md px-3 py-1 mt-2
text-sm shadow-md focus:outline-none focus:ring-2
focus:ring-teal-500 focus:ring-opacity-50
w-full">Speak</button>
</div>
<div class="bg-white rounded-lg p-4 shadow-sm
hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">System Checker</h2>
<ul class="list-disc list-inside space-y-1 text-sm text-
gray-700" id="system-info">
<li>Loading...</li>
</ul>
</div>

<div class="bg-white rounded-lg p-4 shadow-sm

hover:shadow-md transition duration-300">
<h2 class="text-lg font-semibold text-gray-700 mb-
2">Currency Converter</h2>
<div class="grid grid-cols-2 gap-2">
<input type="number" id="currency-converter-
input" placeholder="Amount" class="rounded-md border-
gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-
500 text-sm" value="1">
<select id="currency-converter-from"
class="rounded-md border-gray-300 shadow-sm
focus:border-blue-500 focus:ring-blue-500 text-sm">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
<option value="JPY">JPY</option>
<option value="CAD">CAD</option>
</select>
<select id="currency-converter-to"
class="rounded-md border-gray-300 shadow-sm
focus:border-blue-500 focus:ring-blue-500 text-sm">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
<option value="JPY">JPY</option>
<option value="CAD">CAD</option>
</select>
<button id="convert-currency-button" class="bg-
indigo-500 hover:bg-indigo-600 text-white rounded-md px-3
py-1 text-sm shadow-md focus:outline-none focus:ring-2
focus:ring-indigo-500 focus:ring-opacity-50 col-span-
2">Convert</button>
</div>
<div id="currency-converter-result" class="mt-2 text-
sm text-gray-600 font-medium"></div>
</div>
</div>
</div>
<script>
// 1. Digital Clock
function updateDigitalClock() {
const now = new Date();
const hours = String([Link]()).padStart(2, '0');
const minutes = String([Link]()).padStart(2,
'0');
const seconds = String([Link]()).padStart(2,
'0');
[Link]('digital-clock').textContent
= `${hours}:${minutes}:${seconds}`;
}
updateDigitalClock();
setInterval(updateDigitalClock, 1000);

// 2. Calendar
function displayCalendar() {
const now = new Date();
const year = [Link]();
const month = [Link]('default', { month:
'long' });
const day = [Link]();
const weekday = [Link]('default',
{ weekday: 'long' });
[Link]('calendar').textContent = `$
{weekday}, ${day} ${month} ${year}`;
}
displayCalendar();

// 3. Weather Forecast (Replace with actual API call)

function getWeather() {
// Replace with a real weather API call. This is a
placeholder.
const weatherData = {
city: "Example City",
temperature: 25,
condition: "Sunny",
humidity: 60,
windSpeed: 10
};

// 4. To-Do List
const todoList = [Link]('todo-list');
const todoInput = [Link]('todo-
input');
const addTodoButton = [Link]('add-
todo-button');

[Link]('click', () => {
const todoText = [Link]();
if (todoText !== '') {
const li = [Link]('li');
[Link] = "flex justify-between items-center bg-
gray-100 rounded-md p-2";
[Link] = `<span class="text-sm text-gray-
700">${todoText}</span>
<button class="bg-red-500 hover:bg-red-
600 text-white rounded-md px-2 py-1 text-xs shadow-md
focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-
opacity-50" onclick="removeTodo(this)">Remove</button>`;
[Link](li);
[Link] = '';
saveTodos();
}
});

function removeTodo(buttonElement) {
[Link]();
saveTodos();
}

function saveTodos() {
const todos = [Link]([Link]).map(li =>
[Link]('span').textContent);
[Link]('todos', [Link](todos));
}

// 5. Notes App
const notesTextarea = [Link]('notes-
text');
const saveNotesButton =
[Link]('save-notes-button');

[Link] = [Link]('notes') || '';

[Link]('click', () => {
[Link]('notes', [Link]);
alert('Notes saved!');
});

// 6. Calculator
const calculator = {
display: [Link]('calculator-
display'),
currentInput: '0',
previousInput: null,
operator: null,

updateDisplay() {
[Link] = [Link] === '0' ? '0' :
[Link];
},

appendNumber(number) {
if ([Link] === '0' || [Link] ===
'Infinity' || [Link] === '-Infinity' ||
isNaN(parseFloat([Link]))) {
[Link] = number;
} else {
[Link] += number;
}
[Link]();
},

appendDecimal() {
if (![Link]('.')) {
[Link] += '.';
[Link]();
}
},

clearDisplay() {
[Link] = '0';
[Link] = null;
[Link] = null;
[Link]();
},

performOperation(operator) {
if ([Link] !== null && [Link] !==
null) {
[Link]();
}
[Link] = operator;
[Link] = [Link];
[Link] = '0';
[Link]();
},

calculateResult() {
if ([Link] === null || [Link] ===
null) return;

const prev = parseFloat([Link]);

const current = parseFloat([Link]);
if (isNaN(prev) || isNaN(current)) return;

let result = 0;
switch ([Link]) {
case '+':
result = prev + current;
break;
case '-':
result = prev - current;
break;
case '*':
result = prev * current;
break;
case '/':
if (current === 0) {
[Link] = 'Infinity';
[Link]();
return;
}
result = prev / current;
break;
}

[Link] = String(result);
[Link] = null;
[Link] = null;
[Link]();
}
};

// 7. Unit Converter
const unitConverterInput =
[Link]('unit-converter-input');
const unitConverterFrom =
[Link]('unit-converter-from');
const unitConverterTo = [Link]('unit-
converter-to');
const convertUnitsButton =
[Link]('convert-units-button');
const unitConverterResult =
[Link]('unit-converter-result');

const conversionFactors = {
meters: {
kilometers: 0.001,
feet: 3.28084,
miles: 0.000621371
},
kilometers: {
meters: 1000,
feet: 3280.84,
miles: 0.621371
},
feet: {
meters: 0.3048,
kilometers: 0.0003048,
miles: 0.0001893939
},
miles: {
meters: 1609.34,
kilometers: 1.60934,
feet: 5280
}
};

[Link]('click', () => {
const value = parseFloat([Link]);
const fromUnit = [Link];
const toUnit = [Link];

if (isNaN(value)) {
[Link] = 'Please enter a
valid number.';
return;
}

if (fromUnit === toUnit) {

[Link] = `${value} $
{fromUnit} is equal to ${value} ${toUnit}`;
return;
}

const result = value * conversionFactors[fromUnit]

[toUnit];
[Link] = `${value} $
{fromUnit} is equal to ${[Link](4)} ${toUnit}`;
});

// 8. World Clock
function updateWorldClock() {
const now = new Date();

// New York (EST)

// London (GMT)
const londonTime = new Date([Link]('en-
US', { timeZone: 'Europe/London' }));
const londonHours =
String([Link]()).padStart(2, '0');
const londonMinutes =
String([Link]()).padStart(2, '0');
[Link]('london-time').textContent
= `${londonHours}:${londonMinutes}`;
// Tokyo (JST)
const tokyoTime = new Date([Link]('en-
US', { timeZone: 'Asia/Tokyo' }));
const tokyoHours =
String([Link]()).padStart(2, '0');
const tokyoMinutes =
String([Link]()).padStart(2, '0');
[Link]('tokyo-time').textContent =
`${tokyoHours}:${tokyoMinutes}`;
}
updateWorldClock();
setInterval(updateWorldClock, 60000); // Update every
minute

// 9. Random Quote Generator

const randomQuoteDisplay =
[Link]('random-quote');
const newQuoteButton =
[Link]('new-quote-button');
const quotes = [
"The only way to do great work is to love what you do.
- Steve Jobs",
"The best way to predict the future is to invent it. -
Alan Kay",
"Strive not to be a success, but rather to be of value. -
Albert Einstein",
"It always seems impossible until it's done. - Nelson
Mandela",
"The only limit to our realization of tomorrow will be
our doubts of today. - Franklin D. Roosevelt",
"The future belongs to those who believe in the
beauty of their dreams. - Eleanor Roosevelt",
"Life is what happens when you're busy making other
plans. - John Lennon",
"The greatest glory in living lies not in never falling, but
in rising every time we fall. - Nelson Mandela",
"The purpose of our lives is to be happy. - Dalai Lama",
"Get busy living or get busy dying. - Stephen King"
];

function displayRandomQuote() {
const randomIndex = [Link]([Link]() *
[Link]);
[Link] =
quotes[randomIndex];
}
displayRandomQuote();
[Link]('click',
displayRandomQuote);

// 10. Pomodoro Timer

const pomodoroTimerDisplay =
[Link]('pomodoro-timer');
const startPomodoroButton =
[Link]('start-pomodoro-button');
const pausePomodoroButton =
[Link]('pause-pomodoro-button');
const resetPomodoroButton =
[Link]('reset-pomodoro-button');

let timerInterval;
let timeRemaining = 25 * 60; // 25 minutes in seconds
let isPaused = false;

function pausePomodoroTimer() {
isPaused = true;
clearInterval(timerInterval);
}

function resetPomodoroTimer() {
isPaused = true;
clearInterval(timerInterval);
timeRemaining = 25 * 60;
updatePomodoroTimerDisplay();
}

[Link]('click',
startPomodoroTimer);
[Link]('click',
pausePomodoroTimer);
[Link]('click',
resetPomodoroTimer);

// 11. Simple Password Generator

const passwordLengthInput =
[Link]('password-length');
const generatePasswordButton =
[Link]('generate-password-button');
const generatedPasswordDisplay =
[Link]('generated-password');

function generatePassword() {
const length = parseInt([Link]);
if (isNaN(length) || length < 8 || length > 64) {
[Link] = 'Error:
Length must be between 8 and 64.';
return;
}

const charset =
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUV
WXYZ0123456789!@#$%^&*()_+~`|}{[]:;?><,./-=";
let password = "";
for (let i = 0; i < length; i++) {
password +=
[Link]([Link]([Link]() * [Link]));
}
[Link] = password;
}

[Link]('click',
generatePassword);

// 12. BMI Calculator

const bmiHeightInput = [Link]('bmi-
height');
const bmiWeightInput = [Link]('bmi-
weight');
const calculateBmiButton =
[Link]('calculate-bmi-button');
const bmiResultDisplay =
[Link]('bmi-result');

function calculateBMI() {
const height = parseFloat([Link]) / 100;
// Convert cm to meters
const weight = parseFloat([Link]);

if (isNaN(height) || isNaN(weight) || height <= 0 ||

weight <= 0) {
[Link] = 'Please enter valid
height and weight.';
return;
}

const bmi = weight / (height * height);

let category = "";

if (bmi < 18.5) {

category = "Underweight";
} else if (bmi < 25) {
category = "Normal weight";
} else if (bmi < 30) {
category = "Overweight";
} else {
category = "Obese";
}

[Link] = `Your BMI is $

{[Link](2)}, which is considered ${category}.`;
}

[Link]('click',
calculateBMI);
// 13. Rock Paper Scissors Game
const rockPaperScissorsButtons =
[Link]('[data-choice]');
const gameResultDisplay =
[Link]('game-result');

const choices = ['rock', 'paper', 'scissors'];

[Link](button => {
[Link]('click', () => {
const playerChoice = [Link];
const computerChoice =
choices[[Link]([Link]() * [Link])];

let result = "";

if (playerChoice === computerChoice) {
result = "It's a tie!";
} else if (
(playerChoice === 'rock' && computerChoice ===
'scissors') ||
(playerChoice === 'paper' && computerChoice ===
'rock') ||
(playerChoice === 'scissors' && computerChoice
=== 'paper')
){
result = "You win!";
} else {
result = "You lose!";
}

[Link] = `You chose $

{playerChoice}, computer chose ${computerChoice}. $
{result}`;
});
});

// 14. Age Calculator

const ageCalculatorInput =
[Link]('age-calculator-input');
const calculateAgeButton =
[Link]('calculate-age-button');
const ageCalculatorResult =
[Link]('age-calculator-result');

[Link]('click', () => {
const birthDate = new Date([Link]);
const today = new Date();

if (isNaN([Link]())) {
[Link] = 'Please enter a
valid date.';
return;
}

let age = [Link]() - [Link]();

const monthDiff = [Link]() -
[Link]();
if (monthDiff < 0 || (monthDiff === 0 &&
[Link]() < [Link]())) {
age--;
}

[Link] = `Your age is ${age}

years.`;
});

// 15. Random Number Generator

const randomNumberMinInput =
[Link]('random-number-min');
const randomNumberMaxInput =
[Link]('random-number-max');
const generateRandomNumberButton =
[Link]('generate-random-number-
button');
const randomNumberResultDisplay =
[Link]('random-number-result');

[Link]('click',
() => {
const min = parseInt([Link]);
const max = parseInt([Link]);

if (isNaN(min) || isNaN(max) || min >= max) {

[Link] = 'Please
enter a valid range (min < max).';
return;
}

const randomNumber = [Link]([Link]() *

(max - min + 1)) + min;
[Link] = `Random
number: ${randomNumber}`;
});

// 16. Simple Tip Calculator

const tipAmountInput = [Link]('tip-
amount');
const tipPercentageInput =
[Link]('tip-percentage');
const calculateTipButton =
[Link]('calculate-tip-button');
const tipResultDisplay = [Link]('tip-
result');

[Link]('click', () => {
const billAmount = parseFloat([Link]);
const tipPercentage =
parseFloat([Link]);

if (isNaN(billAmount) || isNaN(tipPercentage) ||
billAmount <= 0 || tipPercentage < 0) {
[Link] = 'Please enter valid bill
amount and tip percentage.';
return;
}

const tipAmount = billAmount * (tipPercentage / 100);

const totalAmount = billAmount + tipAmount;
[Link] = `Tip: $$
{[Link](2)}, Total: $${[Link](2)}`;
});

// 17. Text Analyzer (Word Count, Character Count)

const textAnalyzerInput =
[Link]('text-analyzer-input');
const analyzeTextButton =
[Link]('analyze-text-button');
const textAnalyzerResultDisplay =
[Link]('text-analyzer-result');

[Link]('click', () => {
const text = [Link];
const wordCount = [Link]().split(/\
s+/).filter(Boolean).length;
const characterCount = [Link];

const resultHTML = `
<p>Word Count: ${wordCount}</p>
<p>Character Count: ${characterCount}</p>
`;
[Link] = resultHTML;
});

// 18. Online Grocery List

const groceryList = [Link]('grocery-
list');
const groceryInput =
[Link]('grocery-input');
const addGroceryButton =
[Link]('add-grocery-button');

[Link]('click', () => {
const itemText = [Link]();
if (itemText !== '') {
const li = [Link]('li');
[Link] = "flex justify-between items-center bg-
gray-100 rounded-md p-2";
[Link] = `<span class="text-sm text-gray-
700">${itemText}</span>
<button class="bg-red-500 hover:bg-red-
600 text-white rounded-md px-2 py-1 text-xs shadow-md
focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-
opacity-50"
onclick="removeGroceryItem(this)">Remove</button>`;
[Link](li);
[Link] = '';
saveGroceries();
}
});

function removeGroceryItem(buttonElement) {
[Link]();
saveGroceries();
}

function saveGroceries() {
const groceries =
[Link]([Link]).map(li =>
[Link]('span').textContent);
[Link]('groceries',
[Link](groceries));
}

// 19. Website Speed Test

const speedTestUrlInput =
[Link]('speed-test-url');
const runSpeedTestButton =
[Link]('run-speed-test-button');
const speedTestResultDisplay =
[Link]('speed-test-result');

[Link]('click', () => {
const url = [Link]();
if (url === '') {
[Link] = 'Please enter a
URL.';
return;
}

[Link] = 'Testing speed...';

// In a real application, you would use a server-side API
(like PageSpeed Insights)
// to get the actual speed. This is a placeholder.
setTimeout(() => {
const randomSpeed = ([Link]() *
3).toFixed(2); // Simulate a speed between 0 and 3 seconds
[Link] = `Website
speed: ${randomSpeed} seconds (Simulated)`;
}, 2000); // Simulate a 2-second delay
});

// 20. Back to Top Button

const backToTopButton =
[Link]('back-to-top');

[Link]('scroll', () => {
if ([Link] > 200) {
[Link]('hidden');
} else {
[Link]('hidden');
}
});

[Link]('click', () => {
[Link]({ top: 0, behavior: 'smooth' });
});

// 21. Image Resizer

const imageResizerInput =
[Link]('image-resizer-input');
const imageWidthInput =
[Link]('image-width');
const imageHeightInput =
[Link]('image-height');
const resizeImageButton =
[Link]('resize-image-button');
const imageResizerResultDisplay =
[Link]('image-resizer-result');

[Link]('click', () => {
const file = [Link][0];
const width = parseInt([Link]);
const height = parseInt([Link]);

if (!file) {
[Link] = 'Please
select an image.';
return;
}

if (isNaN(width) || isNaN(height) || width <= 0 ||

height <= 0) {
[Link] = 'Please
enter valid width and height.';
return;
}

const reader = new FileReader();

[Link] = (e) => {
const img = new Image();
[Link] = () => {
const canvas = [Link]('canvas');
[Link] = width;
[Link] = height;
const ctx = [Link]('2d');
[Link](img, 0, 0, width, height);

// 22. Color Picker

const colorPicker = [Link]('color-
picker');
const colorPickerResultDisplay =
[Link]('color-picker-result');

[Link]('change', (event) => {

const selectedColor = [Link];
[Link] = `Selected Color:
${selectedColor}`;
[Link] = selectedColor;
});

// 23. Simple Drawing Pad

const drawingPad = [Link]('drawing-
pad');
const drawingColorInput =
[Link]('drawing-color');
const brushSizeInput =
[Link]('brush-size');
const clearCanvasButton =
[Link]('clear-canvas-button');
const ctx = [Link]('2d');

let isDrawing = false;

let brushColor = '#000000';
let brushSize = 5;

[Link] = brushColor;
[Link] = brushSize;
[Link] = 'round';

function startDrawing(event) {
isDrawing = true;
const x = [Link];
const y = [Link];
[Link]();
[Link](x, y);
}

function draw(event) {
if (!isDrawing) return;
const x = [Link];
const y = [Link];
[Link](x, y);
[Link]();
}
function stopDrawing() {
isDrawing = false;
[Link]();
}

[Link]('mousedown',
startDrawing);
[Link]('mousemove', draw);
[Link]('mouseup', stopDrawing);
[Link]('mouseout', stopDrawing);

[Link]('click', () => {
[Link](0, 0, [Link],
[Link]);
});

// 24. QR Code Generator

const qrCodeDataInput = [Link]('qr-
code-data');
const generateQrCodeButton =
[Link]('generate-qr-code-button');
const qrCodeResultDisplay =
[Link]('qr-code-result');
[Link]('click', () => {
const data = [Link]();
if (!data) {
[Link] = 'Please enter
data to generate QR code.';
return;
}

// Use a third-party library (e.g., [Link]) to generate

the QR code.
// This is a placeholder for the library call.
const qrcode = new
QRCode([Link]('div'));
[Link](data);
const img = qrcode._el.firstChild; // Get the image
element
[Link]('rounded-md', 'mt-2', 'max-w-full'); //
Add classes
[Link] = '';
[Link](img);

});
// 25. URL Shortener
const urlShortenerInput =
[Link]('url-shortener-input');
const shortenUrlButton =
[Link]('shorten-url-button');
const urlShortenerResultDisplay =
[Link]('url-shortener-result');

[Link]('click', () => {
const url = [Link]();
if (!url) {
[Link] = 'Please
enter a URL to shorten.';
return;
}

// 26. Basic Sound Player

const soundFileInput =
[Link]('sound-file-input');
const playSoundButton =
[Link]('play-sound-button');
const pauseSoundButton =
[Link]('pause-sound-button');
const soundPlayerStatus =
[Link]('sound-player-status');
let audio;

[Link]('change', (event) => {

const file = [Link][0];
if (!file) return;

if (![Link]('audio/')) {
[Link] = 'Invalid file type.
Please select an audio file.';
[Link] = '';
return;
}

const reader = new FileReader();

[Link] = (e) => {
if (audio) {
[Link]();
[Link] = '';
}
audio = new Audio([Link]);
[Link] = 'Ready to play.';
};
[Link](file);
});

[Link]('click', () => {
if (!audio) {
[Link] = 'No audio file
loaded.';
return;
}
[Link]();
[Link] = 'Playing...';
});

[Link]('click', () => {
if (!audio) {
[Link] = 'No audio file
loaded.';
return;
}
[Link]();
[Link] = 'Paused.';
});

// 27. Simple Countdown Timer

const countdownTimeInput =
[Link]('countdown-time');
const countdownDisplay =
[Link]('countdown-display');
const startCountdownButton =
[Link]('start-countdown-button');
const stopCountdownButton =
[Link]('stop-countdown-button');
let countdownInterval;
let timeRemainingCountdown;

function startCountdown() {
const duration = parseInt([Link]);
if (isNaN(duration) || duration <= 0) {
[Link] = 'Invalid input.';
return;
}

timeRemainingCountdown = duration;
updateCountdownDisplay();
countdownInterval = setInterval(() => {
if (timeRemainingCountdown > 0) {
timeRemainingCountdown--;
updateCountdownDisplay();
} else {
clearInterval(countdownInterval);
[Link] = 'Time\'s up!';
}
}, 1000);
}

function stopCountdown() {
clearInterval(countdownInterval);
}

[Link]('click',
startCountdown);
[Link]('click',
stopCountdown);

// 28. Text to Speech Converter

const ttsTextarea = [Link]('tts-text');
const speakButton = [Link]('speak-
button');

[Link]('click', () => {
const text = [Link]();
if (!text) {
alert('Please enter text to speak.');
return;
}

const utterance = new

SpeechSynthesisUtterance(text);
[Link](utterance);
});

// 29. Simple System Checker

const systemInfoDisplay =
[Link]('system-info');

function displaySystemInfo() {
const info = `
<li><strong>Platform:</strong> $
{[Link]}</li>
<li><strong>Browser:</strong> $
{[Link]}</li>
<li><strong>Language:</strong> $
{[Link]}</li>
<li><strong>Online:</strong> ${[Link] ?
'Yes' : 'No'}</li>
<li><strong>Cookies Enabled:</strong> $
{[Link] ? 'Yes' : 'No'}</li>
`;
[Link] = info;
}

displaySystemInfo();

// 30. Currency Converter

const currencyConverterInput =
[Link]('currency-converter-input');
const currencyConverterFrom =
[Link]('currency-converter-from');
const currencyConverterTo =
[Link]('currency-converter-to');
const convertCurrencyButton =
[Link]('convert-currency-button');
const currencyConverterResult =
[Link]('currency-converter-result');

// Replace with a real currency conversion API.

const exchangeRates = {
USD: { EUR: 0.85, GBP: 0.75, JPY: 110.50, CAD: 1.25 },
EUR: { USD: 1.18, GBP: 0.88, JPY: 130.29, CAD: 1.47 },
GBP: { USD: 1.33, EUR: 1.14, JPY: 147.33, CAD: 1.66 },
JPY: { USD: 0.00905, EUR: 0.00767, GBP: 0.00679, CAD:
0.0113 },
CAD: { USD: 0.80, EUR: 0.68, GBP: 0.60, JPY: 88.40 },
};

[Link]('click', () => {
const amount =
parseFloat([Link]);
const fromCurrency = [Link];
const toCurrency = [Link];

if (isNaN(amount) || amount <= 0) {

[Link] = 'Please enter
a valid amount.';
return;
}

if (fromCurrency === toCurrency) {

[Link] = `${amount} $
{fromCurrency} is equal to ${amount} ${toCurrency}`;
return;
}

const rate = exchangeRates[fromCurrency]

[toCurrency];
if (rate === undefined) {
[Link] = 'Currency
conversion not supported.';
return;
}
const result = amount * rate;
[Link] = `${amount} $
{fromCurrency} is equal to ${[Link](2)} ${toCurrency}`;
});
</script>
</body>
</html>

Java Time Class Implementation Guide
No ratings yet
Java Time Class Implementation Guide
9 pages
CL 171
No ratings yet
CL 171
40 pages
Employee Timekeeping System Overview
No ratings yet
Employee Timekeeping System Overview
3 pages
Shrishti Themed Digital Clock
No ratings yet
Shrishti Themed Digital Clock
2 pages
JSP Examples: Hello World, Date, Math, Login
No ratings yet
JSP Examples: Hello World, Date, Math, Login
5 pages
Madp 17
No ratings yet
Madp 17
1 page
Object-Oriented Programming Examples
No ratings yet
Object-Oriented Programming Examples
11 pages
Preemptive Priority Scheduling Java
No ratings yet
Preemptive Priority Scheduling Java
7 pages
Java Applet: Analog Clock Design
No ratings yet
Java Applet: Analog Clock Design
3 pages
Android Time Picker Implementation
No ratings yet
Android Time Picker Implementation
5 pages
JavaScript World Clock App
No ratings yet
JavaScript World Clock App
16 pages
Java Applet Analog Clock Program
No ratings yet
Java Applet Analog Clock Program
3 pages
Automatic Timetable Generator Design
No ratings yet
Automatic Timetable Generator Design
16 pages
Java Program: Personal Info & Schedule
No ratings yet
Java Program: Personal Info & Schedule
2 pages
Java Date Time API Overview
No ratings yet
Java Date Time API Overview
44 pages
Prototype Evaluation for Calendar App
No ratings yet
Prototype Evaluation for Calendar App
42 pages
Oracle Configurator Setup Guide
No ratings yet
Oracle Configurator Setup Guide
29 pages
Android Time and Date Picker Example
No ratings yet
Android Time and Date Picker Example
6 pages
Jave GUI Practice Lab 0
No ratings yet
Jave GUI Practice Lab 0
1 page
Java Alarm Clock Implementation
No ratings yet
Java Alarm Clock Implementation
1 page
AWS Account Setup for COSC2626/2640
No ratings yet
AWS Account Setup for COSC2626/2640
8 pages
Interactive Seasonal Clock Code Guide
No ratings yet
Interactive Seasonal Clock Code Guide
6 pages
Understanding DOM for Web Development
No ratings yet
Understanding DOM for Web Development
2 pages
Android TimePicker: Clock & Spinner Modes
No ratings yet
Android TimePicker: Clock & Spinner Modes
7 pages
Java Graphics Programming Overview
No ratings yet
Java Graphics Programming Overview
29 pages
Java Form Design Micro Project Report
No ratings yet
Java Form Design Micro Project Report
17 pages
Manually Writing Swing Code
No ratings yet
Manually Writing Swing Code
1 page
Java Login GUI Explanation
No ratings yet
Java Login GUI Explanation
2 pages
Java GUI Components and Layouts Guide
No ratings yet
Java GUI Components and Layouts Guide
19 pages
Documento
No ratings yet
Documento
2 pages
Digital Clock Code in HTML/CSS/JS
No ratings yet
Digital Clock Code in HTML/CSS/JS
4 pages
Payroll System Class Design Overview
No ratings yet
Payroll System Class Design Overview
36 pages
TaskJuggler Tutorial: First Project Guide
No ratings yet
TaskJuggler Tutorial: First Project Guide
15 pages
Understanding Java Methods Basics
No ratings yet
Understanding Java Methods Basics
9 pages
.NET Component Development Guide
100% (1)
.NET Component Development Guide
24 pages
Clock in Another Language
No ratings yet
Clock in Another Language
2 pages
Java Application for Bill & Converter
No ratings yet
Java Application for Bill & Converter
66 pages
Mango JavaScript Overview and Functions
No ratings yet
Mango JavaScript Overview and Functions
15 pages
Creating Custom Data Types in Java
No ratings yet
Creating Custom Data Types in Java
2 pages
JSP Program Flow Control Techniques
No ratings yet
JSP Program Flow Control Techniques
9 pages
Java Class Methods for Geometry and Time
No ratings yet
Java Class Methods for Geometry and Time
11 pages
ITEP Syllabus Overview
No ratings yet
ITEP Syllabus Overview
10 pages
Android AlarmManager Task Setup Guide
No ratings yet
Android AlarmManager Task Setup Guide
5 pages
Java Swing GUI Programming Lab Guide
No ratings yet
Java Swing GUI Programming Lab Guide
3 pages
Scheduling Recurring Tasks in Java Applications
No ratings yet
Scheduling Recurring Tasks in Java Applications
9 pages
17 Mainactivity Java
No ratings yet
17 Mainactivity Java
3 pages
Understanding Classes and Functions in Python
No ratings yet
Understanding Classes and Functions in Python
16 pages
Understanding Classes and Functions in Python
No ratings yet
Understanding Classes and Functions in Python
16 pages
Open Telekom Cloud Pricing Overview
No ratings yet
Open Telekom Cloud Pricing Overview
14 pages
Java Animation Techniques Explained
No ratings yet
Java Animation Techniques Explained
18 pages
Java Thread Creation Explained
No ratings yet
Java Thread Creation Explained
1 page
Handling 'str' Attribute Errors in Python
No ratings yet
Handling 'str' Attribute Errors in Python
63 pages
Prototyping vs Planning in Python
No ratings yet
Prototyping vs Planning in Python
22 pages
Go Time Package Examples
No ratings yet
Go Time Package Examples
2 pages
Python Classes and Objects Overview
No ratings yet
Python Classes and Objects Overview
27 pages
UpdatePanel Animation in ASP.NET AJAX
No ratings yet
UpdatePanel Animation in ASP.NET AJAX
2 pages
Telrad CTSS 3-Day Course Outline
No ratings yet
Telrad CTSS 3-Day Course Outline
4 pages
Java Date and Calendar Utilities Guide
No ratings yet
Java Date and Calendar Utilities Guide
7 pages
Runner's Training Log Management System
No ratings yet
Runner's Training Log Management System
75 pages
Simple JavaScript Calculator UI
No ratings yet
Simple JavaScript Calculator UI
2 pages
Systems Analysis Project Report 2022
No ratings yet
Systems Analysis Project Report 2022
22 pages
CADworx Structure Editor Users Guide
100% (2)
CADworx Structure Editor Users Guide
113 pages
Excel 2010 Exam 77-882 Skills Overview
No ratings yet
Excel 2010 Exam 77-882 Skills Overview
4 pages
CSIT114 Lab 2: System Analysis Tasks
No ratings yet
CSIT114 Lab 2: System Analysis Tasks
7 pages
Using State of Art Technologies in Generating Customized Output
No ratings yet
Using State of Art Technologies in Generating Customized Output
39 pages
LLM AI Security & Governance Checklist
No ratings yet
LLM AI Security & Governance Checklist
6 pages
Ruby Memory Profiling with Memprof
100% (5)
Ruby Memory Profiling with Memprof
142 pages
Microsoft Office Overview and Features
No ratings yet
Microsoft Office Overview and Features
40 pages
IoT-Based Automatic Pet Feeder Design
No ratings yet
IoT-Based Automatic Pet Feeder Design
8 pages
Microsoft Word Skills Checklist
No ratings yet
Microsoft Word Skills Checklist
3 pages
User Deletion in Hibernate App
No ratings yet
User Deletion in Hibernate App
3 pages
2.4 GHz MMIC Amplifier Design Guide
No ratings yet
2.4 GHz MMIC Amplifier Design Guide
7 pages
Moiz Khan: Frontend Engineer Profile
No ratings yet
Moiz Khan: Frontend Engineer Profile
1 page
Overview of Artificial Intelligence Types
No ratings yet
Overview of Artificial Intelligence Types
18 pages
GNS3 Static Routing Lab Guide
No ratings yet
GNS3 Static Routing Lab Guide
18 pages
Unit 2 Domain of Iot
No ratings yet
Unit 2 Domain of Iot
9 pages
Facebook Password Strength Checker
No ratings yet
Facebook Password Strength Checker
4 pages
Minneapolis Police Records Request Form
No ratings yet
Minneapolis Police Records Request Form
2 pages
BBST Foundations 2
No ratings yet
BBST Foundations 2
41 pages
AI Resume Analyzer for Job Seekers
No ratings yet
AI Resume Analyzer for Job Seekers
14 pages
AR vs VR: Key Differences Explained
No ratings yet
AR vs VR: Key Differences Explained
4 pages
HMI Connection to LOGO! 0BA7 Guide
No ratings yet
HMI Connection to LOGO! 0BA7 Guide
12 pages
Eco Green Project Software Analysis Guide
No ratings yet
Eco Green Project Software Analysis Guide
22 pages
ECCAIRS 5: Data Environment Overview
No ratings yet
ECCAIRS 5: Data Environment Overview
21 pages
Computing Infrastructure Analysis Report
No ratings yet
Computing Infrastructure Analysis Report
8 pages
VxWorks Semaphore Operations Explained
No ratings yet
VxWorks Semaphore Operations Explained
15 pages
EITI Beneficial Ownership Declaration Form
No ratings yet
EITI Beneficial Ownership Declaration Form
14 pages
Top Tech Interview Questions 2023
No ratings yet
Top Tech Interview Questions 2023
18 pages
Cybersecurity DDoS Attack Analysis
No ratings yet
Cybersecurity DDoS Attack Analysis
52 pages
DDAT 5.X User Reference Guide
No ratings yet
DDAT 5.X User Reference Guide
129 pages

HTML Coding

Uploaded by

HTML Coding

Uploaded by

<!

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3

<div class="bg-white rounded-lg p-4 shadow-sm

<div class="bg-white rounded-lg p-4 shadow-sm

<div class="bg-white rounded-lg p-4 shadow-sm

<div class="bg-white rounded-lg p-4 shadow-sm

<div class="bg-white rounded-lg p-4 shadow-sm

<div class="bg-white rounded-lg p-4 shadow-sm

<div class="bg-white rounded-lg p-4 shadow-sm

<div class="bg-white rounded-lg p-4 shadow-sm

<div class="bg-white rounded-lg p-4 shadow-sm

<div class="bg-white rounded-lg p-4 shadow-sm

<div class="bg-white rounded-lg p-4 shadow-sm

<div class="bg-white rounded-lg p-4 shadow-sm

<div class="bg-white rounded-lg p-4 shadow-sm

<div class="bg-white rounded-lg p-4 shadow-sm

<div class="bg-white rounded-lg p-4 shadow-sm

<div class="bg-white rounded-lg p-4 shadow-sm

<div class="bg-white rounded-lg p-4 shadow-sm

<div class="bg-white rounded-lg p-4 shadow-sm

<div class="bg-white rounded-lg p-4 shadow-sm

<div class="bg-white rounded-lg p-4 shadow-sm

<div class="bg-white rounded-lg p-4 shadow-sm

<div class="bg-white rounded-lg p-4 shadow-sm

<div class="bg-white rounded-lg p-4 shadow-sm

<div class="bg-white rounded-lg p-4 shadow-sm

<div class="bg-white rounded-lg p-4 shadow-sm

<div class="bg-white rounded-lg p-4 shadow-sm

// 3. Weather Forecast (Replace with actual API call)

[Link] = [Link]('notes') || '';

const prev = parseFloat([Link]);

if (fromUnit === toUnit) {

const result = value * conversionFactors[fromUnit]

// New York (EST)

// 9. Random Quote Generator

// 10. Pomodoro Timer

// 11. Simple Password Generator

// 12. BMI Calculator

if (isNaN(height) || isNaN(weight) || height <= 0 ||

const bmi = weight / (height * height);

if (bmi < 18.5) {

[Link] = `Your BMI is $

const choices = ['rock', 'paper', 'scissors'];

let result = "";

[Link] = `You chose $

// 14. Age Calculator

let age = [Link]() - [Link]();

[Link] = `Your age is ${age}

// 15. Random Number Generator

if (isNaN(min) || isNaN(max) || min >= max) {

const randomNumber = [Link]([Link]() *

// 16. Simple Tip Calculator

const tipAmount = billAmount * (tipPercentage / 100);

// 17. Text Analyzer (Word Count, Character Count)

// 18. Online Grocery List

// 19. Website Speed Test

[Link] = 'Testing speed...';

// 20. Back to Top Button

// 21. Image Resizer

if (isNaN(width) || isNaN(height) || width <= 0 ||

const reader = new FileReader();

const resizedImageURL = [Link]();

// 22. Color Picker

[Link]('change', (event) => {

// 23. Simple Drawing Pad

let isDrawing = false;

[Link]('change', (event) =>

// 24. QR Code Generator

// Use a third-party library (e.g., [Link]) to generate

// Use a URL shortening service API (like [Link],

// 26. Basic Sound Player

[Link]('change', (event) => {

const reader = new FileReader();

// 27. Simple Countdown Timer

// 28. Text to Speech Converter

const utterance = new