Responsive fylo data storage component

Frontend Mentor - Fylo data storage component solution

Hi everybody! 👋

This is a solution to the Fylo data storage component challenge on Frontend Mentor.

Overview

The challenge 🎯

Users should be able to:

• View the optimal layout for the site depending on their device's screen size

Links 🔗

• Solution URL: Github Repository
• Live Site URL: Github Page

My process ⚙️

Built with 🛠️

• Semantic HTML5 markup
• BEM Methodology
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Media Queries
• Javascript

What I learned 📚

This challenge allowed me to learn and practice how to configure an input range and how to use javascript to dynamically update the input color

// Add an event listener for the 'load' event to update values and color on initial load
window.addEventListener('load', () => {
  // Get the current value of the input range as an integer
  const usedValue = parseInt(inputRange.value);
  
  // Update the content of HTML elements with used and remaining values
  storageUsed.innerText = usedValue;
  storageLeft.innerText = 1000 - usedValue;

  // Call the function to update the range color
  updateRangeColor();
});

// Add an event listener to the input range to update values and color
inputRange.addEventListener("input", () => {
  // Get the current value of the input range as an integer
  const usedValue = parseInt(inputRange.value);
  
  // Update the content of HTML elements with used and remaining values
  storageUsed.innerText = usedValue;
  storageLeft.innerText = 1000 - usedValue;

  // Call the function to update the range color
  updateRangeColor();
});

// Function to update the color of the range
function updateRangeColor() {
  // Calculate the percentage of the current value in relation to the maximum value and round the result
  const percent = Math.round((inputRange.value / inputRange.getAttribute('max')) * 100);

  // Update the background style of the input range with a linear gradient
  inputRange.style.background = `linear-gradient(to right, 
    hsl(6, 100%, 80%) 0%, 
    hsl(335, 100%, 65%) ${percent}%, 
    hsl(229, 57%, 11%) ${percent}%, 
    hsl(229, 57%, 11%) 100%)`;
}

Author 🙋🏻‍♂️

• Twitter/X - @agus_firpo
• Frontend Mentor - @Arfirpo
• Linkedin - Agustín Rodrigo Firpo