1. Overview
| Industry | A private three-room hanok stay (whole-house stays · small gatherings · tea room rental) |
| Purpose | Show the space and surroundings, give the price as soon as dates and guests are entered, and take booking requests |
| Scope | One page · 5 screens · 3 ways to rent |
| Main flow | Choose dates and guests → check price breakdown → save booking request / look up by booking number and phone → cancel booking / choose a way to rent → booking fields for that option |
Booking requests are saved in the browser. They stay in booking lookup after a refresh or a return visit, and overlapping requests for the same dates are blocked.
Connected at rollout: payment and deposit confirmation, date sync with outside booking channels and property management systems, text and email sending, an admin screen (approving and declining requests), and server storage to see the same booking on several devices.
2. Challenges
1. Lodging bookings stop at "So how much is it?"
If weekday and weekend rates, minimum nights and extra guest fees require an inquiry, most guests go to another place. Total and breakdown should appear the moment dates and guests are entered.
2. A private house takes one group at a time.
When requests arrive for dates already booked, each one needs a decline message. Overlapping dates should be blocked at the request step, and open dates found first.
3. Checking a booking afterwards should be easy.
Guests should be able to check and cancel their booking with just the booking number and phone number, so fewer calls and messages need answering.
3. Structure

Everything from the introduction to booking runs on one page. Price calculation, overlap notices and open date search update right inside the booking section, and booking lookup opens over the page without leaving it. Adding `#reservations` to the end of the address opens booking lookup directly.
4. Key Features

Price by dates and guests
Every change to check-in, check-out, or the number of adults and children recalculates the total and breakdown. Weekday nights at ₩890,000, Friday and Saturday nights at ₩1,090,000, and ₩50,000 per person per night above 6 guests are shown line by line (₩ = Korean won). If the stay is shorter than the 2-night minimum or exceeds the maximum (10 guests for the whole house), the reason is shown instead of a price. Choosing a small gathering or tea room rental asks for a single "date of use".

Blocking overlapping dates · finding open dates
If the dates overlap an existing request by even one day, "Those dates are already booked" appears and saving is blocked. Cancelled bookings are left out of this check. "Check open dates" finds the nearest 2 nights with no overlap and fills in the date fields.

Booking request and booking number
After checking the name, phone format, and consent to the privacy and refund policies, saving shows a booking number (TH-sequence) with the dates and amount. The status stays as "Booking requested".

Booking lookup and cancellation
"Check booking" in the header lists bookings newest first, and finds a booking only when both the booking number and phone number match. Dates, nights, guests, amount and requests are kept together, and cancelling changes the status to "Cancelled" and opens the same dates again.
- Space tab galleryThree rooms, the pool, breakfast and a tea field walk are browsed with tabs and left and right buttons, or with a swipe on phones.
- Ways to rentTapping the button on a way-to-rent card scrolls to the booking section with that option selected.
5. Build Notes
Show details
| Responsive | The layout changes at 900px and 520px. On PC, location and booking use 2 columns, and ways to rent and during your stay use 3. On phones everything folds to 1 column, the header keeps only "Check booking" and the language label, and two floating buttons sit at the bottom. |
| Fonts | Body text in Pretendard, English headings in Playfair Display, Korean headings in Gowun Batang (all free open fonts). They are bundled with the site and load without external requests. The Korean fonts keep only the characters used on this site: body text from about 2,000KB to 81KB, and Korean headings from 3,500KB (190 pieces) to a single 43KB file. |
| Images | 10 webp files (including 2 for phones), 909KB in total. First screen and pool at 1344px, rooms at 1000px, portrait photos at 800px. The first-screen photo loads first and the rest load as they come into view; phones get separate 800px versions of the first-screen and pool photos. |
| Motion | Built with CSS and SVG, no library: a first load that draws hand-sketched lines, a title rising in three staggered lines, and gallery transitions that crossfade. Animations stop when the device's reduce-motion setting is on. |
| Accessibility | Guest −/+ buttons, arrow buttons and the logo have labels, and the main content area is marked. Pale description text was adjusted for contrast, and Esc closes windows. Accessibility score: 100. |
| Stack | HTML, CSS and JavaScript (no external libraries). The price is calculated by going through the dates one day at a time and adding the rate for each weekday. Booking requests are saved to and read from browser storage (localStorage). |
6. QA
These results come from running the site on PC 1440 and phone 390 screens and tapping through in the order a real person would. We also checked that saved data can be looked up again after a refresh. (2026-09-23)
| Item | PC 1440 | Phone 390 |
|---|---|---|
| Screen errors | 0 | 0 |
| Broken files | 0 | 0 |
| Horizontal overflow or clipped text | 0 | 0 |
| Function tests | 11 / 11 passed | 11 / 11 passed |
The 11 function tests: browse the gallery photos · choose an option from ways to rent · 2-night minimum notice · price by dates and guests · booking empty-field check · save a booking request · block overlapping dates · find open dates · look up by booking number after refresh · lookup with a wrong phone number · cancel a booking and reopen the dates
Speed and quality scores (out of 100; phone measured on a slow connection)
| Performance | Accessibility | Best Practices | SEO | |
|---|---|---|---|---|
| Phone | 89 | 100 | 100 | 100 |
| PC | 99 | 100 | 100 | 100 |
Phone: first content 1.7s · largest content 3.7s · layout shift 0 · input blocking 0ms PC: first content 0.4s · largest content 0.9s · layout shift 0 · input blocking 0ms
7. Result
Try it live ↗

Privacy Policy