Latest solutions
Sign-up-form, React, TypeScript, Zod validation, react-hook-form, Vite
#accessibility#react#vite#typescriptSubmitted about 2 years agoExpenses Chart Component - Dynamic chart, Accessibility, Flexbox
#accessibility#cube-cssSubmitted almost 3 years agoSingle Price Grid Component - CUBE CSS, custom properties, mobile 1st
#cube-cssSubmitted about 3 years agoInteractive Rating Component - Vanilla JS, CUBE CSS, accessibility
#accessibility#cube-cssSubmitted almost 3 years ago
Latest comments
- @TSune-web@adamwozhere
Hi,
You might find it easier to use a set of radio buttons within your form; you can hide the actual input with CSS then style the label to look like the buttons as in the design. It also makes accessing the data in JS very easy:
<input type="radio" name="rating" value="1" id="rating-1"> <label for="rating-1">1</label> // JavaScript let selectedRating = form.rating.value;
Hope this helps :)
Marked as helpful - @Mountainbeach@adamwozhere
Hi Robin,
I wonder if in the design the blue highlight colour is meant to signify the highest value for that week, but I like the idea of highlighting the current day.
To answer your question; looking on MDN for
Date.getDay()
- you might have missed it; but the zero index starts with Sunday not Monday!So incrementing
i
by one then using modulo%
to keep the value in 0 - 6 range should work:if( (i + 1) % 7 == date.getDay() ) { bars[i].classList.add("today"); }
Hope that helps!
Marked as helpful - @julienjavaloyes@adamwozhere
Looks good! just a couple ideas; with that tricky background, you could try making the background size a fixed scale, although I think it looks quite interesting how it changes with the screen width!
You could also put a slightly smaller max-width on the container to match the desktop view, and a bit of padding on the body so it will shrink it a bit when it goes down to mobile view.