How to arrange images from oldest to newest and then back again using select (JavaScript)?

Question

I am working a random project, which is a mock website of the One-piece.com. And I have some images in a grid and they are displayed from oldest arc to newest arc. But I want to be able to let users view the images from newest to oldest using the Select attribute in javascript. So please help!!!! thanks

Answer 1

I suggest you should show some of your codes

and the work that you have done so far including the problem that you are facing right now.

It will let us help you on getting through where you are currently stuck.

If you are not sure about where to start, then the idea should be to -

1. You will need a list of image objects which will have a schema like this.

 [{id: 1,src: "...",timestamp: ""},{id:2,src: "...",timestamp: ""}]

2. After getting the list ready, you can bind an option value in a html select tag.

 <select id="sortMode"> <option value="oldestToNewest">Oldest to Newest</option> <option value="newestToOldest" selected="selected">Newest to Oldest</option> </select>

(If you have problem writing your own primitive HTML tags and binding, it's good to use a UI library which will be more convenient. They will usually provide API examples and sample code on how to use props and event etc. Example, https://material-ui.com/components/selects/ )

3. Add an event at the select tag, so that when the value changes, the event listener will trigger to fetch the selected value and sort the list based on whether it is newest to oldest or oldest to newest using the timestamp property of the image object.

4. Re-render the DOM after sorting.

[Note]: This is just an idea on how to achieve the functionalities of your website, you have to decide on what kind of framework or library you should use. React is a good choice in my opinion since you can leave the DOM re-rendering and manipulation to React engine.