All solutions

I'd love to see other peoples solutions. When i looked at the site from my iphone the layout was all messed up. Does anyone have any ideas on how to fix that?

Idk why but srcset didn't work for me so I chose this workaround.

Also I only did the Layout for the max screen width of 1440px. Does anyone have an easy solution to make the sizes more responsive for larger screens?

Honestly this is not perfect, but this is as far as I'll take it. Using the Date object, it is possible to get the difference of two dates. However, I couldn't quite find a way to convert this into years months and days without skipping leap years. So, for now I opted to just compare the year, month and day values. I might come back to this and fix it, but I mostly wanted a half decent working site and the weekend is almost over. The way I check the inputs also feels a bit stupid, but should work most of the time. If anyone has any hints or links to resources where I can learn better ways to solve these issues they are always welcome to post them :) Thanks for reviewing :*

Working with fetch APIs nowadays seems pretty comfortable. This exercise was nice, since it was pretty fast to complete and the result is something that can be shown to friends as a complete little widget which requires no further context to work.

I thought if there is a dice it definitely is supposed to be rolled, even if the exercise didn't say so outright. It was enjoyable to find out that the dice roll animation works entirely without js. The slide in on the other hand, technically requires js since i am injecting the paragraph tag new with every dice roll and since it is a new element the css animation gets triggered.

I tried to use radio buttons so that my HTML is more semantic. For some Reason the content is slightly more to the left for Desktop in the given designs, which gave me difficulties in recreating the layout.