Sort by tags

I have already coded some tags for my blog with CSS/HTML and I want to take on a next step: sort my articles by tags (as per screenshot below). Once my visitor has clicked one of my tags, I want my blog to display articles tagged by that specific tag (for example: if you click “pasta” tags, you’ll see all the past articles displayed under the tag “pasta.”

I’ve been looking for tutorials and websites about this task, but so far I only found videos that display tags when I type in specific tags (for example: once you enter “IT” in the text box, the “IT” tag appears there). That is not exactly what I was looking for. Does any of you know any video tutorials or websites about this?

FYI - I don’t have any backend programmed for this blog, only the frontend framework is ready.

Hey there Mami! How you doing?

You could do that only client side I think. I never did that though. If you store in an array all the references to posts tagged as pasta (you could try doing that with a html class attribute called pasta and then point to them with JS of course!), you can add an event listener on the button-tag that manipulates the html and re-render the page showing only the posts of the array with the pasta posts.

Remember that an HTML collection is not an array, so you must transform it first.

Does this make any sense? :stuck_out_tongue:

Yup, that makes sense as a theory, although I need to practice it on my editor.

One more question, if I go add an event listener shall I use Java (the only backend language I know) or other client-side languages?

It’s an interesting thing, post your progress and we can work it out together if you meet some issues :wink:

One more question, if I go add an event listener shall I use Java (the only backend language I know) or >other client-side languages?

for JS I meant JavaScript! As I said I think this is doable just client side. A framework like React would be useful here to avoid to re-render the whole page. But in vanilla JS I think it’s doable no probs.

You’ll need these:

1 Like

Have a look at the UIkit framework. It is a big library for both CSS and JS, so you probably can’t quickly see how they did the JS part. But you can have a look at the performance and see that they use classes for the JS (vanilla JS) filters as @usernamegiapreso suggested:
https://getuikit.com/docs/filter

I haven’t yet deployed a React Website. Do you know how big the library is? Whatever the size is, I’d think if that’s all you’d need React for, it might be a little over the top. The Javascript would just be a tiny snippet and I don’t think that such a big difference in performance would be noted, that it would justify to do it with React. But I’m open to be proven wrong…

1 Like

I haven’t yet deployed a React Website.

This could be a perfect toy project. :wink:

But I’m open to be proven wrong…

Maybe you’re right, we should try it out!

1 Like