This is a solution to the Results summary component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Bonus: Use the local JSON data to dynamically populate the content
- Solution URL: Code on Github
- Live Site URL: Deployed on Netlify
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
I'm still learning how to work with animations. I had an idea of which animation I wanted to implement but as I'd never done it before I looked up the solution with Chat GPT.
.result-circle h2 {
color: var(--clr-neutral-100);
font-weight: 800;
font-size: 3.5rem;
margin: 0;
animation: countUp 2s ease-out;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes countUp {
to {
opacity: 1;
}
}
function animateNumber() {
const resultNumberDisplay = document.querySelector('.result-circle h2');
const targetNumber = 76;
let currentNumber = 0;
const intervalId = setInterval(() => {
resultNumberDisplay.textContent = currentNumber;
if (currentNumber === targetNumber) {
clearInterval(intervalId);
}
currentNumber++;
}, 100);
}
- How do I apply opacity to a CSS color variable? - I knew I could assign alpha-values to CSS-variables, but I didn't know how. This article helped me understand how and why.
- Website - Add your name here
- Frontend Mentor - @yourusername
- Twitter - @yourusername