Scribd
Upload
5 views

op (1)

The document contains two HTML applications: a Square and Cube Calculator and a Text Grow and Shrink tool. The calculator allows users to input a start and end number to display their squares and cubes in a table, while the text tool animates text size and color based on user input and speed settings. Both applications utilize Tailwind CSS for styling and JavaScript for functionality.

Uploaded by

anandprafull007
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

op (1)

The document contains two HTML applications: a Square and Cube Calculator and a Text Grow and Shrink tool. The calculator allows users to input a start and end number to display their squares and cubes in a table, while the text tool animates text size and color based on user input and speed settings. Both applications utilize Tailwind CSS for styling and JavaScript for functionality.

Uploaded by

anandprafull007
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

<!

DOCTYPE html>
<html>
<head>
<title>Square and Cube Calculator</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap
" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
.input-range {
width: 200px;
}
.result-table {
margin-top: 20px;
border-collapse: collapse;
width: 100%;
max-width: 600px;
}
.result-table th, .result-table td {
border: 1px solid #e5e7eb;
padding: 8px;
text-align: center;
}
.result-table th {
background-color: #f9fafb;
font-weight: 600;
}
.result-table tbody tr:nth-child(odd) {
background-color: #f3f4f6;
}
</style>
</head>
<body class="bg-gray-100 flex justify-center items-center min-h-screen">
<div class="bg-white p-8 rounded-lg shadow-md text-center">
<h1 class="text-2xl font-semibold text-gray-800 mb-6">Square and Cube
Calculator</h1>
<div class=" flex flex-col sm:flex-row items-center justify-center
space-x-4 mb-6">
<label for="start" class="block text-gray-700 text-sm font-
bold">Start:</label>
<input type="number" id="start" class="input-range border rounded-
md py-2 px-3 text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-
500">
<label for="end" class="block text-gray-700 text-sm font-
bold">End:</label>
<input type="number" id="end" class="input-range border rounded-md
py-2 px-3 text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="flex justify-center space-x-4 mt-6">
<button onclick="calculateAndDisplay()" class="bg-blue-500
hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none
focus:shadow-outline">Calculate</button>
<button onclick="resetCalculator()" class="bg-gray-300 hover:bg-
gray-400 text-gray-800 font-bold py-2 px-4 rounded-md focus:outline-none
focus:shadow-outline">Reset</button>
</div>
<div id="results" class="mt-6">
<table class="result-table">
<thead>
<tr>
<th>Number</th>
<th>Square</th>
<th>Cube</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>

<script>
function calculateAndDisplay() {
const start = parseInt(document.getElementById("start").value);
const end = parseInt(document.getElementById("end").value);
const resultsDiv = document.getElementById("results");
const tableBody = resultsDiv.querySelector("tbody");
tableBody.innerHTML = "";

if (isNaN(start) || isNaN(end)) {
resultsDiv.innerHTML = "<p class='text-red-500'>Please enter
valid numbers for start and end.</p>";
return;
}

if (start > end) {


resultsDiv.innerHTML = "<p class='text-red-500'>Start value
must be less than or equal to end value.</p>";
return;
}
let tableHTML = "";

for (let i = start; i <= end; i++) {


const square = i * i;
const cube = i * i * i;
tableHTML += `
<tr>
<td>${i}</td>
<td>${square}</td>
<td>${cube}</td>
</tr>
`;
}

tableBody.innerHTML = tableHTML;
}

function resetCalculator() {
document.getElementById("start").value = "";
document.getElementById("end").value = "";
document.getElementById("results").querySelector("tbody").innerHTM
L = "";
const resultsDiv = document.getElementById("results").innerHTML =
"";
}
</script>
</body>
</html>

6b) Text Resizer

<!DOCTYPE html>
<html>
<head>
<title>Text Grow and Shrink</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap
" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
#text-display {
font-size: 10pt;
color: red;
transition: font-size 0.1s ease, color 0.5s ease;
}
#controls {
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
#start-stop {
padding: 0.5rem 1rem;
border-radius: 0.375rem;
background-color: #3b82f6;
color: #fff;
font-weight: 600;
cursor: pointer;
border: none;
box-shadow: 0 0 5px #0000002e;
}
#start-stop:hover {
background-color: #2563eb;
}
#start-stop.paused {
background-color: #808080;
color: #fff;
}
#start-stop.paused:hover {
background-color: #808080;
}
#speed-control {
padding: 0.5rem;
border-radius: 0.375rem;
border: 1px solid #d1d5db;
width: 200px;
}
#text-input {
padding: 0.5rem;
border-radius: 0.375rem;
border: 1px solid #d1d5db;
width: 200px;
}
</style>
</head>
<body class="bg-gray-100 flex justify-center items-center min-h-screen">
<div class="bg-white p-8 rounded-lg shadow-md text-center">
<h1 class="text-2xl font-semibold text-gray-800 mb-6">Text Grow and
Shrink</h1>
<div id="text-display">TEXT-GROWING</div>
<div id="controls">
<input type="text" id="text-input" placeholder="Enter text"
value="TEXT-GROWING">
<select id="speed-control">
<option value="100">Fast</option>
<option value="200">Medium</option>
<option value="300">Slow</option>
</select>
<button id="start-stop">Start</button>
</div>
</div>

<script>
let fontSize = 10;
let growing = true;
let animationInterval;
let isRunning = false;
let fadeValue = 0;
const textDisplay = document.getElementById("text-display");
const startStopButton = document.getElementById("start-stop");
const speedControl = document.getElementById("speed-control");
const textInput = document.getElementById("text-input");

function updateText() {
if (!isRunning) return;

textDisplay.style.fontSize = `${fontSize}pt`;
textDisplay.style.color = `rgb(255, ${255 - fadeValue}, ${255 -
fadeValue})`;

if (growing) {
fontSize += 2;
fadeValue += 10;
if (fontSize >= 50) {
growing = false;
textDisplay.textContent = textInput.value;
textDisplay.style.color = "blue";
fadeValue = 0;
}
} else {
fontSize -= 2;
fadeValue += 10;
if (fontSize <= 10) {
growing = true;
textDisplay.textContent = textInput.value;
textDisplay.style.color = "red";
fadeValue = 0;
}
}
}

function toggleAnimation() {
let speed = parseInt(speedControl.value);
if (isRunning) {
clearInterval(animationInterval);
isRunning = false;
startStopButton.textContent = "Start";
startStopButton.classList.add('paused');
} else {
animationInterval = setInterval(updateText, speed);
isRunning = true;
startStopButton.textContent = "Stop";
startStopButton.classList.remove('paused');
textDisplay.textContent = textInput.value;
}
}

startStopButton.addEventListener("click", toggleAnimation);
textDisplay.textContent = textInput.value;
</script>
</body>
</html>

You might also like