René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Color match solution","articleBody":"It is indeed a major hassle to match the colors on the jobs, but there is a simple solution. Just hash the id with the last digit to each color, since 4 colors are provided, then we just need to use id % 10 % 10 % 4, then add that selector to each jobItem, add those 4 colors with differnt selector. We just can't guarantee the color is rotated like it was set before.\r\n\r\nJobList.js\r\n```\r\n       \u003cdiv class=\"job-item__badge job-item__badge--color${parseInt(jobItem.id % 10 % 4)}\"\u003e${jobItem.badgeLetters}\u003c/div\u003e\r\n```\r\nJobDetails.js\r\n```\r\n\t\t\t\t\t\t\t\t\t\u003cdiv class=\"job-info__badge job-info__badge--color${parseInt(jobItem.id % 10 % 4)}\"\u003e${jobItem.badgeLetters}\u003c/div\u003e\t\t\t\t\t\t\t\t\t\r\n```\r\nindex.css\r\n```\r\n.job-item__badge {\r\n    font-size: 13px;\r\n    height: 46px;\r\n    width: 38px;\r\n    /* background-color: #8dd335; */\r\n    border-radius: 5px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    font-weight: 600;\r\n    margin-right: 13px;\r\n}\r\n\r\n.job-item__badge--color0 {\r\n    background-color: #8dd335;\r\n}\r\n\r\n.job-item__badge--color1 {\r\n    background-color: #3D87F1;\r\n}\r\n\r\n.job-item__badge--color2 {\r\n    background-color: #D2D631;\r\n}\r\n\r\n.job-item__badge--color3 {\r\n    background-color: #D96A46;\r\n}\r\n\r\n/* .job-item:nth-child(4n+2) .job-item__badge {\r\n    background-color: #3D87F1;\r\n}\r\n\r\n.job-item:nth-child(4n+3) .job-item__badge {\r\n    background-color: #D2D631;\r\n}\r\n\r\n.job-item:nth-child(4n+4) .job-item__badge {\r\n    background-color: #D96A46;\r\n} */\r\n\r\n\r\n\r\n.job-info__badge {\r\n    width: 55px;\r\n    height: 70px;\r\n    /* background-color: #d0d335; */\r\n    border-radius: 5px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 22px;\r\n    font-weight: 600;\r\n    margin-bottom: 13px;\r\n}\r\n\r\n.job-info__badge--color0 {\r\n    background-color: #8dd335;\r\n}\r\n\r\n.job-info__badge--color1 {\r\n    background-color: #3D87F1;\r\n}\r\n\r\n.job-info__badge--color2 {\r\n    background-color: #D2D631;\r\n}\r\n\r\n.job-info__badge--color3 {\r\n    background-color: #D96A46;\r\n}\r\n```\r\n","author":{"url":"https://github.com/Rope-a-dope","@type":"Person","name":"Rope-a-dope"},"datePublished":"2024-06-05T22:58:57.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/7/Professional-JavaScript-Course/issues/7"}