Create a Stunning Booking App UI with HTML, CSS, and JavaScript (Source Code Included)

Faraz

By Faraz -

Learn how to create a sleek booking app interface using HTML, CSS, and Javascript. Follow our step-by-step guide and get hands-on with the source code.

Join us on Telegram
Create a Stunning Booking App Interface with HTML, CSS, and JS.webp
Read AlsoCreating a Candy Crush Clone HTML, CSS, and JavaScript Tutorial.jpgCreating a Candy Crush Clone: HTML, CSS, and JavaScript Tutorial (Source Code)

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Preview
  6. Conclusion

In today's digital age, booking apps have become an integral part of our lives, simplifying scheduling appointments, making reservations, and securing services. Whether booking a table at a restaurant, scheduling a fitness class, or reserving a hotel room, these apps offer convenience and efficiency to users worldwide.

In this tutorial, we'll delve into the world of web development and explore how to create a booking app UI from scratch using HTML, CSS, and Javascript. Even if you're new to coding, fear not! We'll guide you through each process step, from setting up your project to adding interactive features that enhance the user experience.

By the end of this tutorial, you'll have the skills and knowledge to craft your booking app interface, ready to impress users with its sleek design and seamless functionality. So let's dive in and unleash your creativity as we embark on this coding journey together!

Source Code

Step 1 (HTML Code):

To begin, create a new directory for your project and set up the necessary files. You'll need an HTML file for the structure, a CSS file for styling, and a Javascript file for adding functionality.

Start by defining the structure of your booking app UI using HTML. This includes elements such as forms for inputting booking details, buttons for submitting bookings, and containers for displaying information.

Here's a breakdown of the HTML code:

1. <!DOCTYPE html>: This declaration specifies the document type and version of HTML being used.

2. <html lang="en">: This is the root element of the HTML document, specifying the language of the document as English.

3. <head>: This section contains metadata about the HTML document, such as character encoding, viewport settings, and links to external resources.

  • <meta charset="UTF-8">: Specifies the character encoding of the document as UTF-8.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Specifies the viewport settings for responsive design.
  • <title>Booking App UI</title>: Sets the title of the web page.
  • <link rel="stylesheet" href="styles.css">: Links an external CSS file (styles.css) for styling the HTML content.

4. <body>: This section contains the main content of the web page.

  • <div class="app-container">: Acts as a container for the entire application.
  • <section class="navigation">: Represents the navigation section of the application.
  • Various navigation links and buttons.
  • <section class="app-actions">: Represents the action buttons and search functionality.
  • Search input, location button, search button, contact actions, and social media links.
  • <section class="app-main">: Represents the main content area of the application.
  • Cards displaying hotel information with images, names, locations, and prices.
  • <div id="modal-window" class="shadow">: Represents a modal window that opens when a card is clicked, displaying detailed information about a specific hotel.
  • Information such as image, name, location, price, description, and reviews are displayed.
  • Options to book the hotel and add it to favorites are provided.
Read AlsoCrafting a Responsive HTML and CSS Footer.jpgCrafting a Responsive HTML and CSS Footer (Source Code)

Step 2 (CSS Code):

Once the structure is in place, use CSS to style the elements and create an appealing visual design. Consider factors such as color scheme, typography, and layout to enhance the user experience.

Here's a breakdown of the CSS code:

1. Importing Fonts: The @import rule imports the Quicksand font family from Google Fonts.

2. Global Styling:

  • *: Applies the following styles to all elements.
  • box-sizing: Ensures that padding and border are included in the element's total width and height.
  • outline: Removes default outline styles.

3. :root: Sets global CSS variables that can be reused throughout the stylesheet. These variables define colors and other design properties.

  • font-family: Sets the default font family to Quicksand or a generic sans-serif if Quicksand is not available.
  • Various custom properties define colors, background colors, border colors, and other design elements.

4. Dark Mode Styling:

  • .dark:root: Overrides the default variables for dark mode.

5. Navigation Styling:

  • .nav-right-side: Styles the right side of the navigation bar.
  • .mode-switch: Styles the dark mode switch button.
  • .nav-link: Styles navigation links.

6. Profile Button Styling:

  • .profile-btn: Styles the profile button with an image.

7. Search Styling:

  • .search-wrapper and .search-input: Styles the search input field and wrapper.

8. App Actions Styling:

  • .app-actions: Styles the container for various actions in the application.

9. Card Styling:

  • .cards-area and .card-wrapper: Styles for the container and individual cards.
  • .card: Styles for card appearance, including background color and border radius.
  • .card-info: Styles for the information section within a card.

10. Modal Styling:

  • .main-modal: Styles for the main modal container.
  • .modal-image-wrapper: Styles for the image container within the modal.
  • .modal-left and .modal-right: Styles for the left and right sides of the modal.
  • .btn-close: Styles for the close button of the modal.

11. Media Queries: Responsive styling for different screen sizes.

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600&display=swap");
* {
  box-sizing: border-box;
  outline: none;
}

:root {
  font-family: "Quicksand", sans-serif;
  --app-bg: #fff;
  --modal-before: rgba(215,215,215,.5);
  --main-font-color: #000;
  --light-font-color: #becaca;
  --main-border-color: #f3f3f3;
  --secondary-border-color: #faeceb;
  --button-bg-light: #f3f3f3;
  --cards-area-bg: #f4f4f6;
  --cards-bg: #fff;
  --buttons-color-primary: #d84851;
  --buttons-color-secondary: #f8e4e5;
  --filter-bg: #fff;
  --search-bg: #fff;
}

.dark:root {
  --app-bg: #0c0c0c;
  --main-font-color: #fff;
  --cards-area-bg: #20222a;
  --cards-bg: #111317;
  --filter-bg: #111317;
  --search-bg: #20222a;
  --modal-before: rgba(0, 0, 0, .8);
}

.nav-right-side {
  display: flex;
}

.mode-switch {
  flex-shrink: 0;
  padding: 0;
  background-color: var(--chat-background);
  border: none;
  color: #ddd;
  outline: none;
  cursor: pointer;
  box-shadow: var(--navigation-box-shadow);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  transform-origin: center;
}
.mode-switch svg {
  width: 0;
  height: 24px;
  transition: all 0.3s ease-in;
  transform-origin: center;
}
.mode-switch .moon {
  opacity: 0;
}
.mode-switch .sun {
  width: 24px;
}

.dark .moon {
  opacity: 1;
  width: 24px;
}

.dark .sun {
  opacity: 0;
  width: 0;
}

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--app-bg);
  transition: 0.2s;
}

a {
  text-decoration: none;
}

button, a {
  cursor: pointer;
}

.app-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.navigation {
  padding: 24px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.app-link {
  font-weight: 600;
  font-size: 20px;
  color: var(--main-font-color);
  line-height: 24px;
}

.navigation-links {
  width: 60%;
  display: flex;
  justify-content: space-between;
  max-width: 420px;
}

.nav-link {
  color: var(--light-font-color);
  font-weight: 500;
  font-size: 14px;
  margin: 0 8px;
  transition: 0.2s;
}
.nav-link.active {
  color: var(--main-font-color);
}
.nav-link:not(.active):hover {
  color: var(--buttons-color-primary);
}

.profile-btn {
  border: 1px solid var(--secondary-border-color);
  background-color: transparent;
  border-radius: 20px;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.2s;
}
.dark .profile-btn {
  background-color: var(--cards-area-bg);
  border-color: var(--cards-area-bg);
}
.profile-btn:hover {
  border-color: var(--buttons-color-primary);
}
.profile-btn span {
  padding: 0 8px;
  font-weight: 500;
  color: var(--buttons-color-primary);
}
.profile-btn img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

section.app-actions {
  padding: 32px 40px 0 40px;
}

.btn-icon {
  width: 16px;
}

.search-wrapper {
  border: none;
  display: flex;
  justify-content: space-between;
  border-radius: 6px;
  max-width: 420px;
  width: 100%;
  overflow: hidden;
  height: 40px;
}

.search-input {
  border-radius: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-shadow: none;
  border-left: none;
  border-right: none;
  background-color: var(--search-bg);
  flex: 1;
  border: 1px solid var(--main-border-color);
  padding: 0 8px;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.dark .search-input {
  border-color: var(--search-bg);
  color: #fff;
}

.loaction-btn {
  border: 1px solid var(--main-border-color);
  background-color: var(--button-bg-light);
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dark .loaction-btn {
  border: none;
  background-color: var(--search-bg);
}

.dark .loaction-btn .btn-icon {
  color: #fff;
}

.search-btn {
  background-color: var(--buttons-color-primary);
  color: #fff;
  border: 1px solid var(--buttons-color-primary);
  padding: 10px 16px;
  font-size: 14px;
}
.dark .search-btn {
  border: none;
}

.app-actions-line {
  display: flex;
  align-items: center;
  margin: 32px 0;
}

.contact-actions {
  display: flex;
  align-items: center;
  margin-left: 32px;
}
.contact-actions span {
  display: block;
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  margin-right: 8px;
}
.dark .contact-actions span {
  color: #fff;
}
.contact-actions.socials .contact-link {
  color: #b9b9b9;
}

.contact-link {
  border: 1px solid var(--main-border-color);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--buttons-color-primary);
  margin: 0 4px;
  flex-shrink: 0;
}

.filter-btn {
  background-color: transparent;
  border: 1px solid var(--main-border-color);
  display: flex;
  align-items: center;
  border-radius: 20px;
  padding: 0;
  padding-right: 8px;
  margin: 0 16px;
  color: var(--buttons-color-primary);
  position: relative;
}
.dark .filter-btn {
  border-color: var(--cards-area-bg);
  background-color: var(--cards-area-bg);
}
.filter-btn.more {
  padding: 0 12px;
}
.filter-btn.more span {
  color: var(--buttons-color-primary);
  padding: 0 4px;
}
.filter-btn.more span:before {
  display: none;
}
.filter-btn.more .filter-icon {
  background-color: transparent;
}

.filter-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  padding: 0 24px 0 8px;
  position: relative;
}
.filter-text:before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  right: 0;
  top: 50%;
  transform: translatey(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.dark .filter-text:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.filter-icon {
  background-color: var(--buttons-color-secondary);
  border-radius: 50%;
  color: var(--buttons-color-primary);
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.filter-line-text {
  font-size: 14px;
  font-weight: 600;
  margin-right: 32px;
  color: var(--main-font-color);
}

.app-main {
  flex: 1;
  overflow: hidden;
  padding: 24px 40px;
  display: flex;
  justify-content: space-between;
}

.cards-area {
  background-color: var(--cards-area-bg);
  padding: 24px;
  height: 100%;
  overflow-y: auto;
  border-radius: 20px;
}

.app-main-left {
  flex: 4;
  display: flex;
  flex-wrap: wrap;
}

.app-main-right {
  flex: 2;
  margin-left: 24px;
  max-width: 400px;
}
.app-main-right .card-image-wrapper {
  max-height: 100%;
  padding: 0;
  height: 100%;
}
.app-main-right .card {
  height: 160px;
}
.app-main-right .card-image-wrapper img {
  margin: 0;
}

.card-wrapper {
  width: 33.3%;
  height: auto;
  padding: 8px;
}

.card {
  background-color: var(--cards-bg);
  border: 3px solid var(--cards-bg);
  border-radius: 10px;
  overflow: hidden;
  display: block;
  transition: transform 0.2s;
}
.card:hover {
  transform: scale(1.02);
}

.card-image-wrapper {
  max-height: 40%;
  border-radius: 10px;
  overflow: hidden;
  border: 3px solid var(--cards-bg);
  height: 0;
  padding-top: calc(591.44 / 1127.34 * 100%);
  background-color: #FAACA8;
  background-image: linear-gradient(19deg, #FAACA8 0%, #DDD6F3 100%);
}
.card-image-wrapper img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
  position: relative;
  margin-top: -60.25%;
}

.card-info {
  background-color: var(--cards-bg);
  padding: 8px 16px;
}

.card-text {
  line-height: 24px;
}
.card-text.big {
  font-size: 16px;
  font-weight: 600;
  color: var(--main-font-color);
}
.card-text.small {
  font-size: 12px;
  color: var(--light-font-color);
  font-weight: 600;
}
.card-text.small span {
  font-size: 12px;
  color: var(--main-font-color);
  font-weight: 600;
  display: inline-block;
  margin-left: 8px;
}

.app-main-right-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  color: var(--main-font-color);
  background-color: var(--cards-area-bg);
}
.app-main-right-header span {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}
.app-main-right-header a {
  font-size: 14px;
  color: var(--buttons-color-primary);
  font-weight: 600;
}

.app-main-right {
  position: relative;
  padding-top: 0;
}
.app-main-right .card-wrapper {
  width: 100%;
  padding: 8px 0;
}
.app-main-right .card {
  display: flex;
}
.app-main-right .card-image-wrapper {
  flex-basis: 40%;
  flex-shrink: 0;
}
.app-main-right .card-image-wrapper img {
  height: 100%;
}

.main-modal {
  width: 98%;
  max-width: 1200px;
  height: 90%;
  background: var(--app-bg);
  border-radius: 20px;
  position: relative;
  display: flex;
  padding: 32px;
}

.btn-close {
  border: none;
  background-color: transparent;
  position: absolute;
  right: 4px;
  top: 4px;
  padding: 0;
  color: #b9b9b9;
}

.hideModal {
  z-index: -1;
  opacity: 0;
  -webkit-animation: hide 0.25s;
          animation: hide 0.25s;
  transform: scale(0);
}

@-webkit-keyframes hide {
  from {
    z-index: 2;
    transform: scale(1);
    opacity: 1;
  }
  to {
    z-index: -1;
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes hide {
  from {
    z-index: 2;
    transform: scale(1);
    opacity: 1;
  }
  to {
    z-index: -1;
    transform: scale(0);
    opacity: 0;
  }
}
.showModal {
  top: 0;
  left: 0;
  opacity: 1;
  z-index: 2;
  -webkit-animation: show 0.2s;
          animation: show 0.2s;
  transform: scale(1);
  position: fixed;
  display: flex;
  justify-content: center;
  padding-top: 56px;
  background-color: var(--modal-before);
  width: 100%;
  height: 100%;
}

@-webkit-keyframes show {
  from {
    transform: scale(0);
    opacity: 0;
    z-index: -1;
  }
  to {
    transform: scale(1);
    opacity: 1;
    z-index: 2;
  }
}

@keyframes show {
  from {
    transform: scale(0);
    opacity: 0;
    z-index: -1;
  }
  to {
    transform: scale(1);
    opacity: 1;
    z-index: 2;
  }
}
.modal-image-wrapper {
  border-radius: 20px;
  overflow: hidden;
  max-height: 50%;
}
.modal-image-wrapper img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

.modal-left {
  flex: 5;
  overflow-y: auto;
}

.modal-image-wrapper {
  margin-bottom: 24px;
}

.modal-info-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.left-side h1 {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  color: var(--main-font-color);
}
.left-side p {
  color: var(--light-font-color);
  font-size: 16px;
  line-height: 24px;
}

.right-side {
  color: var(--main-font-color);
}
.right-side span {
  display: inline-block;
  font-weight: 500;
  font-size: 16px;
  line-height: 32px;
}

.info-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.info-wrapper span {
  display: block;
  font-weight: 500;
  font-size: 14px;
  color: var(--main-font-color);
}

.info-bar {
  display: flex;
  justify-content: space-between;
}

.info-icon {
  background-color: var(--buttons-color-secondary);
  border-radius: 50%;
  color: var(--buttons-color-primary);
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.desc-wrapper .modal-info-header {
  margin-top: 24px;
  flex-direction: column;
}
.desc-wrapper h1 {
  font-size: 24px;
  margin: 0;
  line-height: 32px;
  color: var(--main-font-color);
}
.desc-wrapper p {
  color: var(--light-font-color);
}

.desc-actions {
  display: flex;
  align-items: center;
  margin-top: 32px;
}

.btn-book {
  background-color: var(--buttons-color-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  margin-right: 32px;
  padding: 10px;
  font-size: 14px;
  min-width: 120px;
}

.add-favourite {
  display: flex;
  align-items: center;
}

.add-favourite input {
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute;
}
.add-favourite input:checked + label {
  color: var(--buttons-color-primary);
}
.add-favourite input:checked + label .btn-icon {
  transition: 0.2s;
  color: var(--buttons-color-primary);
  fill: var(--buttons-color-primary);
}

.add-favourite label {
  cursor: pointer;
  color: var(--light-font-color);
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.add-favourite label span {
  display: flex;
  margin-right: 4px;
}

.modal-right {
  background-color: var(--cards-area-bg);
  height: 100%;
  overflow-y: auto;
  border-radius: 20px;
  padding: 0 16px;
  flex: 3;
  max-width: 320px;
  margin-left: 16px;
}
.modal-right .card-wrapper {
  width: 100%;
  padding: 8px 0;
}
.modal-right .card > p {
  font-size: 12px;
  line-height: 16px;
  color: var(--light-font-color);
  margin: 0;
}
.modal-right .card {
  padding: 8px;
}
.modal-right .card:hover {
  transform: scale(1);
}
.modal-right .card .profile-info-wrapper {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
}
.modal-right .card .profile-info-wrapper p {
  font-size: 12px;
  line-height: 16px;
  color: var(--main-font-color);
  margin: 0;
  font-weight: 600;
}

.profile-img-wrapper {
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 8px;
  flex-shrink: 0;
  margin-right: 12px;
}
.profile-img-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.contact-actions-wrapper {
  display: flex;
}

.filter-action-buttons {
  display: flex;
  overflow-x: auto;
  position: relative;
}
.filter-action-buttons button {
  margin-bottom: 4px;
}

.filter-line {
  align-items: flex-start;
}

@media screen and (max-width: 1020px) {
  .app-main-left .card-wrapper {
    width: 50%;
  }

  .app-main-right-header span {
    font-size: 14px;
  }
}
@media screen and (max-width: 990px) {
  .app-main-right {
    display: none;
  }
}
@media screen and (max-width: 780px) {
  .filter-line-text {
    margin-right: 10px;
  }

  .filter-btn {
    margin: 0 8px;
  }

  .modal-left {
    flex-shrink: 0;
    flex-basis: auto;
  }

  .app-actions-line:not(.filter-line) {
    flex-direction: column;
    align-items: flex-start;
  }

  .app-actions-line {
    margin: 16px 0;
  }

  .contact-actions-wrapper {
    margin-top: 12px;
  }
  .contact-actions-wrapper .contact-actions:first-child {
    margin-left: 0;
  }

  .app-main-left .card-wrapper {
    width: 100%;
  }

  .cards-area {
    padding: 0 8px;
  }

  .navigation {
    padding: 24px;
  }

  .app-main, .app-actions {
    padding: 24px;
  }

  section.app-actions {
    padding: 0 24px;
  }

  h1, .modal-left h1 {
    font-size: 16px;
    line-height: 24px;
  }

  .info-wrapper span {
    font-size: 12px;
    white-space: nowrap;
    margin-bottom: 4px;
  }

  .main-modal {
    flex-direction: column;
    overflow-y: auto;
    height: 100%;
    width: 100%;
  }

  #modal-window {
    padding: 0;
  }

  .modal-right {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-top: 16px;
    overflow-y: visible;
  }

  .btn-close {
    right: 0;
    top: 0;
  }
}
@media screen and (max-width: 660px) {
  .navigation-links {
    display: none;
  }
}
@media screen and (max-width: 520px) {
  .app-container {
    overflow: auto;
  }

  .app-main {
    flex: unset;
  }

  .modal-right {
    flex: unset;
  }

  .card:hover {
    transform: scale(1);
  }

  section.app-main {
    overflow: visible;
  }

  .contact-actions span {
    display: none;
  }
}

Step 3 (JavaScript Code):

Next, use Javascript to add interactive features to your booking app UI.

Here's a breakdown of the JS code:

1. DOMContentLoaded Event Listener:

  • This event listener waits for the HTML document to be fully loaded before executing the enclosed function.
  • Inside this function, it selects an element with the class .mode-switch and adds a click event listener to it. When clicked, it toggles the dark class on the <html> element.

2. openModal() Function:

  • This function selects an element with the ID modal-window and adds the class showModal to it, making it visible.

3. closeM() Function:

  • This function removes the class showModal from the element with the ID modal-window, hiding it.

4. mode-switch Event Listener:

  • This event listener attempts to attach a click event listener to elements with the class .mode-switch, but it's done incorrectly. getElementsByClassName returns a collection, not a single element, so the assignment won't work as intended.

5. cardItems Event Listeners:

  • This code selects all elements with the class .main-card.
  • It attaches a click event listener to each of these elements.
  • When clicked, it selects certain elements within the clicked card, such as .cardText-js and .card-price, and updates the text content of elements with classes .modalHeader-js and .amount respectively with the text content of the clicked card's elements.

6. Keyboard Event Listener:

  • Listens for the keydown event on the window.
  • When the escape key (keyCode 27) is pressed, it calls the closeM() function to hide the modal.

7. Window Click Event Listener:

  • Listens for clicks on the window.
  • If the click target is modal (identified by the modal variable), it calls the closeM() function to hide the modal.
document.addEventListener('DOMContentLoaded', function () {
  var modeSwitch = document.querySelector('.mode-switch');

  modeSwitch.addEventListener('click', function () {
    document.documentElement.classList.toggle('dark');
  });
});

function openModal(){
  let modal= document.querySelector('#modal-window');
  modal.classList.add("showModal");
}

function closeM(){
    let m= document.querySelector('#modal-window');
  m.classList.remove("showModal");
}

document.getElementsByClassName('.mode-switch').onclick = function() {
  document.body.classList.toggle('dark');
}

const cardItems = document.querySelectorAll('.main-card');
const modalHeader = document.querySelector('.modalHeader-js');
const modalCardPrice = document.querySelector('.amount');

cardItems.forEach((cardItem) => {
  cardItem.addEventListener('click', function () {
    const cardHeader = cardItem.querySelector('.cardText-js');
    const cardPrice = cardItem.querySelector('.card-price');

    modalHeader.innerText = cardHeader.innerText;
    modalCardPrice.innerText = cardPrice.innerText;
  });
});

window.onkeydown = function (event) {
  if(event.keyCode == 27) {
    closeM();
  }
}

var modal =  document.querySelector('#modal-window');
window.onclick = function (event) {
  if(event.target == modal) {
    closeM();
  }
}

Final Output:

Create a Stunning Booking App Interface with HTML, CSS, and JS.gif
Read Alsobuild a professional article details page from scratch with html, css, and vanilla javascript.jpgBuild a Professional Article Details Page from Scratch with HTML, CSS, and Vanilla JavaScript

Conclusion:

In conclusion, creating a booking app UI using HTML, CSS, and Javascript is a rewarding endeavor that offers both practical skills and creative expression. Throughout this tutorial, we've covered the fundamentals of web development and provided step-by-step guidance on designing and implementing a user-friendly interface.

By following the outlined steps and experimenting with the provided source code, you've gained valuable insights into the process of building a booking app UI from scratch. Whether you're a beginner or an experienced developer, the concepts and techniques explored in this tutorial can be applied to a wide range of projects and customized to suit your specific needs.

Thank you for joining us on this coding journey. We hope you've enjoyed learning and building with us, and we look forward to seeing the amazing creations you'll develop in the future. Happy coding!

Design by: Aybuke Ceylan Oncul

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: booking app ui, html, css, javascript, source code, how to create a booking app ui with html;css;and javascript, step-by-step guide for building a booking app interface, booking app development tutorial with source code
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post