René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"How do we implement the bookmark click function like the one in React and Next JS Course?","articleBody":"I implemented the bookmark clickhandler in rmtdev project and it works. But now I want it to work like the rmtdev project in React and Next JS course? How shoud we do that? I tried different solution and none worked like expected. \r\n\r\nThis code will have problem. When we click the bookmark icon, it will show like this without the \"#\" in the url.\r\n![image](https://github.com/ByteGrad/Professional-JavaScript-Course/assets/38259673/d786dd27-4e13-41e2-8366-e4f20e5000a7). \r\n\r\n```\r\njobListSearchEl.addEventListener(\"click\", (event) =\u003e {\r\n  if (event.target.classList.contains(\"job-item__bookmark-icon\")) {\r\n    bookmarkClickHandler(event);\r\n  }else{\r\n  clickHandler(event)\r\n}\r\n});\r\n```\r\n\r\n\r\nThis is my bookmarkclickhandler and it works.\r\n```\r\nimport {\r\n  state,\r\n  bookmarksBtnEl,\r\n  jobDetailsEl,\r\n  jobListBookmarksEl,\r\n  jobListSearchEl,\r\n} from \"../common.js\";\r\nimport renderJobList from \"./JobList.js\";\r\n\r\nconst bookmarkClickHandler = (event, bookmarkTag = \"item\") =\u003e {\r\n  if (!event.target.className.includes(\"bookmark\")) {\r\n    return;\r\n  }\r\n\r\n  if (state.bookmarkJobItems.some((jobItem) =\u003e jobItem.id === state.activeJobItem.id)) {\r\n    state.bookmarkJobItems = state.bookmarkJobItems.filter((jobItem) =\u003e jobItem.id !== state.activeJobItem.id);\r\n  } else {\r\n  \tstate.bookmarkJobItems.push(state.activeJobItem);\r\n  }\r\n\r\n\tlocalStorage.setItem(\"bookmarkJobItems\", JSON.stringify(state.bookmarkJobItems));\r\n\tdocument.querySelector(`.job-${bookmarkTag}__bookmark-icon`).classList.toggle(`job-${bookmarkTag}__bookmark-icon--bookmarked`);\r\n\trenderJobList();\r\n  renderJobList(\"bookmarks\");\r\n};\r\n\r\nconst mouseEnterHandler = () =\u003e {\r\n  bookmarksBtnEl.classList.add(\"bookmarks-btn--active\");\r\n  jobListBookmarksEl.classList.add(\"job-list--visible\");\r\n  renderJobList(\"bookmarks\");\r\n};\r\n\r\nconst mouseLeaveHandler = () =\u003e {\r\n  bookmarksBtnEl.classList.remove(\"bookmarks-btn--active\");\r\n  jobListBookmarksEl.classList.remove(\"job-list--visible\");\r\n};\r\n\r\nbookmarksBtnEl.addEventListener(\"mouseenter\", mouseEnterHandler);\r\njobListBookmarksEl.addEventListener(\"mouseleave\", mouseLeaveHandler);\r\njobListBookmarksEl.addEventListener(\"click\", (event) =\u003e {\r\n  bookmarkClickHandler(event);\r\n});\r\njobListSearchEl.addEventListener(\"click\", (event) =\u003e {\r\n  bookmarkClickHandler(event); \r\n});\r\njobDetailsEl.addEventListener(\"click\", (event) =\u003e {\r\n  bookmarkClickHandler(event, \"info\");\r\n});\r\n\r\nexport default bookmarkClickHandler;\r\n```","author":{"url":"https://github.com/Rope-a-dope","@type":"Person","name":"Rope-a-dope"},"datePublished":"2024-06-05T23:11:37.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3},"url":"https://github.com/8/Professional-JavaScript-Course/issues/8"}