Hello, community!
Any advice on the topics below will be appreciated!!
Happy coding☕️✨
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 :)
Although this was pretty simple, I quite enjoyed writing the javascript for this.
I noticed now afterwards that it does not highlight the correct day as it should. At the moment its highlighting monday instead of sunday, any idea why this might be happening?
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!
This dual background image relative movement was complicated to me, looking forward for reading other solutions
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.
