Responsive fylo data storage component

Solution retrospective
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
Please log in to post a comment
Log in with GitHubCommunity feedback
- @mohap710
Love the Draggable Indicator, Nice Work 👌
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord