Skip to content

Commit

Permalink
refactor: make time a derived value
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorenrui
jorenrui committed Nov 23, 2023
1 parent 52866c5 commit 4a8488a
Showing 1 changed file with 43 additions and 58 deletions.
101 changes: 43 additions & 58 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,7 @@ <h3 class="font-bold font-mono">AirBnB Search Bar:</h3>
showSearch = false;
selectedTab = 'Where';
destination = '';

// TODO: update time logic
time = 'Any week';

totalMonths = 12;
checkIn = '';
checkOut = '';
Expand Down Expand Up @@ -241,7 +239,41 @@ <h3 class="font-bold font-mono">AirBnB Search Bar:</h3>
<input
id="time"
type="text"
:value="time"
:value="if (whenSelectedTab === 'Flexible') {
if (whenHowLong === 'Week') {
selectedMonths.length
? `Week in ${selectedMonths.join(', ')}`
: 'Any week'
} else if (whenHowLong === 'Weekend') {
selectedMonths.length
? `Weekend in ${selectedMonths.join(', ')}`
: 'Any weekend'
} else {
selectedMonths.length
? `Month in ${selectedMonths.join(', ')}`
: 'Any month'
}
} else if (whenSelectedTab === 'Months') {
const dates = getStartAndEndMonth(totalMonths);
const startDate = dates[0];
const endDate = dates[1];
let date = startDate.toLocaleString('default', {
month: 'short',
year: 'numeric',
day: 'numeric',
});
date += ' - ';
date += endDate.toLocaleString('default', {
month: 'short',
year: 'numeric',
day: 'numeric',
});
date
} else {
''
}"
class="bg-transparent pointer-events-none text-ellipsis"
disabled
/>
Expand Down Expand Up @@ -399,41 +431,23 @@ <h3 class="font-bold font-mono">AirBnB Search Bar:</h3>
type="button"
class="py-2 px-6 flex items-center justify-center text-sm text-gray-900 font-medium whitespace-nowrap rounded-full cursor-pointer transition-colors duration-100"
:class="whenSelectedTab === 'Dates' ? 'bg-white ring-1 ring-gray-300' : 'hover:bg-gray-300'"
:click="whenSelectedTab = 'Dates'; selectedTab = 'Check In'; time = ''"
:click="whenSelectedTab = 'Dates'; selectedTab = 'Check In';"
>
Dates
</button>
<button
type="button"
class="py-2 px-6 flex items-center justify-center text-sm text-gray-900 font-medium whitespace-nowrap rounded-full cursor-pointer transition-colors duration-100"
:class="whenSelectedTab === 'Months' ? 'bg-white ring-1 ring-gray-300' : 'hover:bg-gray-300'"
:click="whenSelectedTab = 'Months';
selectedTab = 'When';
const dates = getStartAndEndMonth(totalMonths);
const startDate = dates[0];
const endDate = dates[1];
time = startDate.toLocaleString('default', {
month: 'short',
year: 'numeric',
day: 'numeric',
});
time += ' - ';
time += endDate.toLocaleString('default', {
month: 'short',
year: 'numeric',
day: 'numeric',
});"
:click="whenSelectedTab = 'Months'; selectedTab = 'When';"
>
Months
</button>
<button
type="button"
class="py-2 px-6 flex items-center justify-center text-sm text-gray-900 font-medium whitespace-nowrap rounded-full cursor-pointer transition-colors duration-100"
:class="whenSelectedTab === 'Flexible' ? 'bg-white ring-1 ring-gray-300' : 'hover:bg-gray-300'"
:click="whenSelectedTab = 'Flexible';
selectedTab = 'When';
time = 'Any week'"
:click="whenSelectedTab = 'Flexible'; selectedTab = 'When';"
>
Flexible
</button>
Expand All @@ -451,32 +465,23 @@ <h3 class="font-bold font-mono">AirBnB Search Bar:</h3>
type="button"
class="py-2 px-4 text-base text-gray-900 rounded-full"
:class="whenHowLong === 'Weekend' ? 'ring-2 ring-gray-900' : 'ring-1 ring-gray-200'"
:click="whenHowLong = 'Weekend';
time = selectedMonths.length
? `Weekend in ${selectedMonths.join(', ')}`
: 'Any weekend'"
:click="whenHowLong = 'Weekend';"
>
Weekend
</button>
<button
type="button"
class="py-2 px-4 text-base text-gray-900 rounded-full"
:class="whenHowLong === 'Week' ? 'ring-2 ring-gray-900' : 'ring-1 ring-gray-200'"
:click="whenHowLong = 'Week';
time = selectedMonths.length
? `Week in ${selectedMonths.join(', ')}`
: 'Any week'"
:click="whenHowLong = 'Week';"
>
Week
</button>
<button
type="button"
class="py-2 px-4 text-base text-gray-900 rounded-full"
:class="whenHowLong === 'Month' ? 'ring-2 ring-gray-900' : 'ring-1 ring-gray-200'"
:click="whenHowLong = 'Month';
time = selectedMonths.length
? `Month in ${selectedMonths.join(', ')}`
: 'Any month'"
:click="whenHowLong = 'Month';"
>
Month
</button>
Expand Down Expand Up @@ -520,10 +525,7 @@ <h3 class="font-bold font-mono">AirBnB Search Bar:</h3>
type="button"
class="h-36 w-28 flex flex-col items-center justify-center gap-1 text-center text-gray-900 rounded-2xl"
:class="selectedMonths.includes(month) ? 'ring-2 ring-gray-900' : 'ring-1 ring-gray-200'"
:click="selectedMonths = selectedMonths.toggle(month);
time = selectedMonths.length
? `${whenHowLong} in ${selectedMonths.join(', ')}`
: `Any ${whenHowLong[0].toLowerCase() + whenHowLong.slice(1)}`"
:click="selectedMonths = selectedMonths.toggle(month);"
>
<span :class="selectedMonths.includes(month) ? 'text-gray-900' : 'text-gray-600'">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10" : aria-hidden="true">
Expand Down Expand Up @@ -592,23 +594,6 @@ <h3 class="font-bold font-mono">AirBnB Search Bar:</h3>
totalMonths = Math.round(value.percentage / 100 * 12) === 0
? 12
: Math.round(value.percentage / 100 * 12);
const dates = getStartAndEndMonth(totalMonths);
const startDate = dates[0];
const endDate = dates[1];
// TODO: Make start date and end date global variables instead of using time
time = startDate.toLocaleString('default', {
month: 'short',
year: 'numeric',
day: 'numeric',
});
time += ' - ';
time += endDate.toLocaleString('default', {
month: 'short',
year: 'numeric',
day: 'numeric',
});
$('.slider-fill').style.setProperty('--percentage', value.percentage);
$('.slider-handle').style.left = `${value.left}%`;
Expand Down

0 comments on commit 4a8488a

Please sign in to comment.