Progress Chart & Data Input

THE CODE & INFORMATION

This code creates an interactive "Progress Chart" dashboard that allows users to visualize progress for three specific web development skills: HTML, CSS, and JavaScript. The interface consists of two main parts: a top section containing number- based input fields where users can type a value between 0 and 100, and a lower section containing visual progress bars that dynamically react to the numbers entered above. It uses a clean, retro-modern aesthetic, leveraging CSS styling for custom progress bar containers, colors, and font styling to create a coherent user interface.

Functionally, the code works by linking the numeric inputs to the visual bars through JavaScript. When a user interacts with an input field (via the oninput event), a function calculates the new width for the corresponding progress bar and updates the text displayed next to it. To ensure reliability, the JavaScript uses a dataMap object that explicitly connects the input IDs to their respective DOM elements (the bars and the percentage labels). Additionally, it includes a safety mechanism that "clamps" the input value, ensuring it always remains between 0 and 100, even if the user tries to type a number outside of that range.

To use this code, simply save it as an .html file (for example, progress.html) and open it in any modern web browser. Once loaded, you will see the three progress indicators. You can immediately begin typing in the number fields labeled HTML, CSS, and JS; as you change the numbers, you will see the colored bars expand or shrink in real-time, and the text labels next to them will update to reflect the exact percentage you provided. It is designed to be plug-and-play, meaning no backend server or external compilation is required to see the changes take effect.

HTML


                <!doctype html>
<html lang="en/US">
  <head>
    <meta charset="UFT-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progress Chart & Data Input</title>
    <link rel="icon" type="image/x-icon" href="https://e-nash.net/photos/modules-favicon.png">
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
  <head>
  <body>
    <div class="wrapper">
      <h1>Progress Chart</h1>
      <div class="input-wrap">
        <hr>
        <span>HTML:</span>
        <input type="number" class="inpnum" min="0" max="100" step="1" value="92" id="0" oninput="setInputData(this.id)">
        <span>CSS:</span>
        <input type="number" class="inpnum" min="0" max="100" step="1" value="85" id="1" oninput="setInputData(this.id)">
        <span>JS:</span>
        <input type="number" class="inpnum" min="0" max="100" step="1" value="67" id="2" oninput="setInputData(this.id)">
      </div>
      <hr>
      <br>
      <label>HTML:</label>
      <div class="input-outer" id="outer1">
        <div class="input" id="html"></div>
      </div>
      <span class="span" id="hyper">92%</span>
      <br>
      <label>CSS:</label>
      <div class="input-outer" id="outer2">
        <div class="input" id="css"></div>
      </div>
      <span class="span" id="cascade">85%</span>
      <br>
      <label>JS:</label>
      <div class="input-outer" id="outer3">
        <div class="input" id="javascript"></div>
      </div>
      <span class="span" id="scripted">67%</span>
    </div>
    <script src="scripts.js"></script>
  </body>
</html>

CSS


                :root {
  --bg-color: #f5f5f5;
  --bg-primary: #d1d1d1;
  --bg-secondary: #e0e0e0;
  --border-light: 3px inset #ffffff;
  --border-dark: 2px solid #878787;
  --btn-border: 3px outset #ffffff; 
  --color-light: #878787;
  --color-dark: #444444;
  --shadow: 3px 4px 15px rgba(0, 0, 0, 0.3);
}

* {
  box-sizing: border-box;
  font-family: "Press Start 2P", VT323, cursive;
}

body {
  height: 98.5vh;
  width: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-color);
  font-size: 16px;
  line-height: 1.5;
}
.wrapper {
  position: relative;
  top: 100px;
  display: block;
  width: 100%;
  max-width: 630px;
  padding: 20px;
  margin: auto;
  background-color: #dddddd;
  border: 1px solid #00cb00;
  border-radius: 20px;
  box-shadow: 2px 2px 10px #555
}
.active.wrapper {
  display: none
}
span {
  color: #007800;
  font-size: 12px;
  font-weight: 700;
}
input[type="number"] {
  margin-right: 5px;
  padding: 5px;
  background-color: #efe;
  border: 1px solid #0c0;
  border-radius: 6px;
  color: #070;
}
hr {
  background-color: #0c0;
  border: 1px solid #0c0;
}
label {
  position: relative;
  top: 0px;
  left: 10px;
  font-weight: 700;
}
label:first-of-type {
  color: #f70;
}
label:nth-of-type(2) {
  color: #07f;
  left: 25px;
}
label:last-of-type {
  color: #f00;
  left: 39px;
}
.input-outer {
  position: relative;
  top: 20px;
  left: 10px;
  display: inline-block;
  width: 60%;
  height: 24px;
  padding: 2px;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
}
#outer1 {
  border: 1px solid #ff7800;
}
#outer2 {
  left: 25px;
  border: 1px solid #0078ff;
}
#outer3 {
  left: 40px;
  border: 1px solid #ff0100;
}
.input {
  width: 0;
  height: 16px;
  padding: 3px;
  margin-top: 1px;
  border-radius: 10px;
}
#html {
  width: 92%;
  background-color: #f70;
}
#css {
  width: 85%;
  background-color: #07f;
}
#javascript {
  width: 67%;
  background-color: #f00;
}
#hyper {
  position: relative;
  top: -5px;
  left: 0px;
}
#cascade {
  position: relative;
  top: -5px;
  left: 15px;
}
#scripted {
  position: relative;
  top: -5px;
  left: 30px;
}

JAVASCRIPT


                    "use strict";

(function () {
    /**
     * Maps the input ID to the corresponding DOM elements for the bars and text.
     * This prevents using fragile index-based lookups and makes the code maintainable.
     */
    const dataMap = {
        "0": {
            bar: document.getElementById('html'),
            text: document.getElementById('hyper')
        },
        "1": {
            bar: document.getElementById('css'),
            text: document.getElementById('cascade')
        },
        "2": {
            bar: document.getElementById('javascript'),
            text: document.getElementById('scripted')
        }
    };

    /**
     * Updates the progress bar width and the percentage text.
     * @param {string} id - The ID of the input element triggering the event.
     */
    const setInputData = function (id) {
        const inputElement = document.getElementById(id);
        if (!inputElement) return;

        const target = dataMap[id];
        if (!target) return;

        // Get value and clamp it between 0 and 100 for safety
        let value = parseInt(inputElement.value, 10);
        if (isNaN(value)) value = 0;
        value = Math.max(0, Math.min(100, value));

        // Update the visual bar width
        target.bar.style.width = value + "%";

        // Update the percentage text
        target.text.textContent = value + "%";
    };

    // Expose the function to the global window object so the inline HTML oninput can call it
    window.setInputData = setInputData;

    // Initialize the bars on page load to match the default values in the HTML
    window.addEventListener('DOMContentLoaded', () => {
        Object.keys(dataMap).forEach(id => setInputData(id));
    });

})();

MENU

THE CODE & INFORMATION

HTML

CSS

JAVASCRIPT

PREVIEW

Progress Chart