[X(F)] Dynamic Progress Bar Generator v2
| ⚡ Max Power |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<title>Dynamic Bar Row</title>
<style>
table {
width: 100%;
border-collapse: collapse;
font-family: sans-serif;
}
td {
padding: 8px;
vertical-align: middle;
}
.icon {
margin-right: 6px;
}
.bar-container {
background-color: #eee;
border-radius: 6px;
overflow: hidden;
height: 18px;
width: 100%;
}
.bar-fill {
height: 100%;
text-align: right;
padding-right: 6px;
color: #fff;
font-size: 0.8em;
line-height: 18px;
border-radius: 6px;
background-color: #28a745;
transition: width 0.4s ease;
}
</style>
</head>
<body>
<table border="0">
<tr>
<td>
<span class="icon">⚡</span>
<span id="barTitle">Max Power</span>
</td>
<td>
<div class="bar-container" id="barContainer" title="Max Power (83%)">
<div class="bar-fill" id="barFill" style="width: 82%;">Max Power (83%)</div>
</div>
</td>
</tr>
</table>
<div style="margin-top:20px;">
<label>Set Title:</label>
<input type="text" id="titleInput" value="Max Power" />
<br><br>
<label>Set Width (0–100):</label>
<input type="number" id="widthInput" min="0" max="100" value="82" />
<br><br>
<button onclick="updateRow()">Update Row</button>
</div>
<script>
function updateRow() {
const titleVal = document.getElementById('titleInput').value.trim();
const widthVal = Number(document.getElementById('widthInput').value);
const barTitle = document.getElementById('barTitle');
const barFill = document.getElementById('barFill');
const barContainer = document.getElementById('barContainer');
// Clamp width between 0 and 100
let percentage = widthVal;
if (percentage < 0) percentage = 0;
if (percentage > 100) percentage = 100;
// Update title text (outside bar)
barTitle.textContent = titleVal || 'Untitled';
// Update bar fill with combined TITLE + WIDTH
const combinedText = (titleVal || 'Untitled') + ' (' + percentage + '%)';
barFill.style.width = percentage + '%';
barFill.textContent = combinedText;
// Update tooltip
barContainer.setAttribute('title', combinedText);
}
</script>
</body>
</html>
Narration of Dynamic Bar Row Code
The provided HTML document builds a dynamic progress bar row that allows the user to change both the title and the width percentage interactively.
Structure
- Table Layout: A single row (
<tr>) with two cells. The first cell shows an icon ⚡ and a label. The second cell contains the progress bar. - Bar Container: A gray box (
.bar-container) that holds the green bar fill. - Bar Fill: The green bar (
.bar-fill) whose width and text update dynamically.
Styling
- Fonts: Sans-serif for clean readability.
- Bar Container: Light gray background, rounded corners, fixed height.
- Bar Fill: Green background, white text aligned right, smooth transition when width changes.
Initial State
The bar starts at 82% width and displays the text “Max Power (83%)”. The tooltip (title attribute) also shows this combined information.
Interactive Controls
- Text Input: Lets the user set a new title (e.g., “Torque”).
- Number Input: Lets the user set a new width percentage (0–100).
- Button: Runs the JavaScript function
updateRow()to apply changes.
JavaScript Function
The updateRow() function performs the following:
- Reads the title and width values from the inputs.
- Clamps the width between 0 and 100.
- Updates the outside label (
barTitle) with the chosen title. - Updates the bar fill text to show both title and percentage, e.g. “Torque (75%)”.
- Adjusts the bar’s width style and tooltip accordingly.
Result
The progress bar visually grows or shrinks based on the entered percentage, while the text inside the bar always shows the title + percentage combination. The tooltip matches this same combined string.
Comments
Post a Comment