Skip to content

Latest commit

 

History

History
27 lines (21 loc) · 1.35 KB

README.md

File metadata and controls

27 lines (21 loc) · 1.35 KB

Movie Seat Booking

Project Preview

Summary

A movie seat selection UI with TS/Sass that uses local storage to persist data/selection in the browser.

How to Install

  • git clone this repo
  • No hard dependencies required to run so no need for npm/yarn installs.
  • Just open the index.html file or use server of your choice.
  • Note: If modifying the file, and you have TS already installed, you can just call tsc --watch in the root project directory to compile your js into appropriate dir.
  • I'd recommend using the VSCode Sass Plugin as well.

Project Todos

  • Adding styling/logic around Continue button.
  • Enhance UI; maybe movie poster preview.

Project Insights

  • Using nth-of-type() and last-of-type()
  • Also using border-top-radius-right and left for shaping the individual corners.
  • using :not(.className):hover to control hover on things not of the specified type, in our case
  • using perspective property combined with rotateX to give a 3d-effect for the screen.
  • I ran into a slight "bug" where we didn't have a fixed width for the container, making it grow/contract based on length of our p tag, so I added a min-width to the container.
  • localStorage is quite simple to use, setItem and getItem for setting and getting values from localStorage. localStorage.clear() to clear all records stored.