Skip to content

becooq81/seat-arrangement

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🎉 Seating Arrangement Web App

I created this website in order to facilitate random seat assignment @ SSAFY 12th. Email me (becooq81@gmail.com) for any feedback or inquiries. Enjoy! 😊

Overview

This web application helps to arrange students into pairs or triplets and display their seating arrangement in a grid format. It includes features for inputting student names, shuffling them into groups, and displaying the results with pairs/triplets colored in pastel. ✨

Live Demo

You can access the live version of the app here. Feel free to try it out and see how it works! 🚀

Features

  • ✍️ Input Management: Easily add, edit, or remove pairs and triplets of student names using text inputs or a textarea. This feature allows you to input groups of names separated by line breaks, commas, or whitespace.
  • 🔄 Shuffling: Randomly shuffle student groups to ensure a varied seating arrangement.
  • 📏 Customizable Grid: Adjust the grid dimensions for seating arrangement (default is 4 rows by 6 columns).
  • 📋 Textarea Input: Input student names in bulk using a textarea where groups are divided by line breaks and names within groups are separated by commas or whitespace. This method simplifies bulk entry and management of student names.
  • 🌈 Pastel Colors: Enjoy visually distinct pairs/triplets colored in pastel shades. 🌈

Make your own version

  1. Clone the Repository
git clone <repository-url>
cd <repository-directory>
  1. Open the Project Open index.html in your preferred web browser. No additional setup or server is required. 🌐

  2. Modify the Code

Just as you like! 🎨

Development

Files Overview

  • 🗂️ index.html: The main HTML file containing the structure of the web app.
  • 🎨 styles.css: Contains the styles and animations used in the application.
  • 💻 script.js: Includes the JavaScript logic for handling input, shuffling, and displaying the seating arrangement.

Customization

  • 📏 Grid Dimensions: Modify the rows and cols variables in script.js to change the grid size.
  • 🏷️ Colors: Customize the pastelColors array in script.js to change the colors used for the seat backgrounds.

About

Arrange your seats in pairs or triplets

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published