So, the first thing is that, we have done a great work by adding that specific tour
in that tours section, but I am not able to see any image of that tour and I am not
able to use that tour. So, what I want is that I will also be allowed to host that
specific tour which I have added. And also, what we can do is that, like I have
added a bigger domain, like there are bigger domain sectors of Dubai, Switzerland,
and Mexico, in the available tour section. Like, if I add another tour, like
currently I have added Ireland as the domain, so, what we can do is that we can
also add Ireland to add the right side of this tour. And we can use arrows at the
right and the left side to scroll to the next tour, as this next domain, you know,
what I am trying to say. And also that the domain should have, should show the
images as well as the details, and it should have that explore button. And the next
is...
The next thing which I want you to be given is that, what we can have is, you can,
like currently I have added a tour in the item section, but I have to tell you that
I am not able to put that tour, so what we can do is that, whenever I click on the
explore button of that final tour, I would be redirected to a new page, like
currently we have a localhost 5173 slash Switzerland and localhost 5173 slash Dubai
and Mexico, so we can also have localhost 5173 slash that specific tour to a domain
which I have added, like currently I have added Ireland, so it can be like Ireland,
and then there would be details like explore that specific tour by currently
Ireland, so explore Ireland and then there would be the tours which I have added in
the Ireland section.
In the next section, we will be having all the information related to that tour.
Like, if I click on Central Lines Tour No. 1, then it is going to be more
complicated. Because, like, this is a part of that tour. So, I have already
provided you with that tour details. So, if you are on that tour, then in the first
we have tour name and price per person, I have already provided you. Then, what we
can do is, we can ask you, like, how many destinations are you going to visit? So,
if, for example, if I say 5 destinations, then you will be asking me, like details
of those 5 destinations. And, let me say, around 5.
If I am giving you the details of those 5 tours, then like I would be giving the
names of those 5 tours and details related to those, not 5 tours, 5 destinations.
So you would, and you also providing you the big details of those destinations, so
at that time you would only be showing those 5 locations or however, as many
locations as I have said you in that tour section. No details and also the features
we offer section would be I think same for every tour, just the name of the
destinations would be changing and also we will have only Checkout 2.0 button on
clicking on page by clicking on which I would be redirected to the next page which
would be the Checkout, Visit Checkout 2 page.
So here what we will be having is that the like visit checkout two page would be
same like you would be only filling the details related to the tours like the title
which I have already provided you then the top rated and number of stars number of
reviews and the activity activity provided below which will be showing the images
which I have already provided you with related to that specific tour and then will
be the big detail of that tour which I have already provided you then about this
activity section would be same for all the tours and highlighted reviews would also
be same then will come the select participants and date here the part selection of
the participants like adult x1 x2 x3 or how many adults would be not be a drop down
it will be like a text box on in which the user will be entering the number of the
tickets he want to book and yeah here you will apply those conditions of the number
of the minimum tickets I am applying you someone to select and the date of that
tour when they wanna go on that tour make sure that these dates are in between
those specific date of the starting and ending which I have provided you and in
eternity section I have already provided within with allocations we are gonna visit
and there be detailed you would be showing only this and yeah everything would be
same as check visit checkout to page is showing just you have to fix the bit
detailing.
And also what you would be doing is that we have to perform this whole work in the
form of steps like little little small small steps after performing each step you
would be asking me that should I proceed to the next step and all that stuff you
know which we are what we are doing like I and you would be giving me a bit like I
am making this function I am implementing this functionality I have removed this
reading this function reading this functionality reading this page and all that
stuff so that it will be more convenient for me to find out that whether you are
still implementing on the work and you are working or are you stuck so yeah that's
it we have to implement all this.
Task 1: Build a Collapsible Sidebar
Description:
Create a sidebar section that can open and close when the user clicks a button.
The sidebar should includeg
\ A placeholder for a logo at the toi
\ A list of 4–5 links with iconq
\ A button to toggle the sidebar open or closed
Focus on clean layout and smooth open/close animation.
Tools & Libraries:
HTML CSS JavaScript
Covered Topics
HTML | CSS | JavaScript | Component Layout | Animation | Toggle Logic
Bonus:
Make the sidebar is responsive on mobile screens.