This was a challenging one - I needed to redo the HTML/CSS a couple of times to get something I thought was clean enough. Not 100% happy with the readability of the HTML/CSS code in the end, but I certainly improved a lot and I'm happy with the final result.
Hi Jeremy,
I checked your .html code, you can use : <img src="./images/icon.svg"> instead of copy pasting whole <svg> code, that will improve HTML readability.
Anyways, your project is awesome ! Happy Coding.
I still don't understand to add data.json to Javascript, I can add it via liveserver but not working at normal browser because of CORS. If anyone has solution about my problem, I will very appreciate it. Thanks!
Hi Naufal.
Nice UI and styling, I honestly like your project. As far as your problem is concerned, you can use fetch like:
fetch("./data.json").then(res => res.json()).then(data => {
// use data here
});
Modifying data.json isn't great option because if .json data is large and complex, it wouldn't be effective and when connecting frontend with backend, you have to work using JSON so it's necessary to understand it.
Let me know if there is any issue or confusion. Happy Coding !
Can anyone tell me how to properly position the dice at the bottom border? The way I did seems so tricky, it can't be the actual way.... Any other way of dynamically setting the aspect-ratio for the background-images? Also some advice on dynamic padding?
You need to make a container and set its position relative, in that container you can have your quote div and dice div, set dice div to absolute, now you can align that dice relative to our main contianer.... What you need to do is, set it to bottom (bottom: 0;) and left : 50%; But this wouldn't solve the problem exactly, do bottom : diceHeight/2 and left : calc(50% - diceHeight/2) e.g If dice's height is 4rem and width is 4rem too, do... bottom : -2rem; left : calc(50% - 2rem) i.e 2rem is half of 4rem which is original height/width this way u can align dice on top of main container, relative to it properly. Also quote doesn't change when you click on dice, implement that if you know... Anyways goodluck !
