https://github.com/drkpxl/randomname

A lightweight, interactive web app for randomly selecting names from a list with features like confetti effects, local storage for name persistence, and a responsive, user-friendly design.
https://github.com/drkpxl/randomname

Last synced: 23 days ago
JSON representation

A lightweight, interactive web app for randomly selecting names from a list with features like confetti effects, local storage for name persistence, and a responsive, user-friendly design.

• Host: GitHub
• URL: https://github.com/drkpxl/randomname
• Owner: drkpxl
• Created: 2024-11-20T22:48:06.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2024-11-21T22:26:23.000Z (about 1 month ago)
• Last Synced: 2024-11-29T22:12:33.410Z (27 days ago)
• Language: JavaScript
• Homepage: https://random.drkpxl.com
• Size: 199 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
# Random Name Selector

A lightweight, interactive web app for randomly selecting names from a list with features like confetti effects, local storage for name persistence, and a responsive, user-friendly design. 

Use it today: https://random.drkpxl.com

## Features

- **Random Name Selection:** Pick a random name from a user-defined list. Names are removed from the list once selected.

- **Local Storage:** Automatically saves the name list locally for future sessions.

- **Confetti Animation:** Celebrate selections with fun, customizable confetti effects.

- **Responsive Design:** Works seamlessly on desktop and mobile devices.

- **Customizable Backgrounds:** Dynamic gradient backgrounds for a vibrant user experience.

## Tech Stack

- **HTML, CSS, JavaScript:** Core technologies for the frontend.

- **Nginx:** Lightweight web server for hosting the application.

- **Docker:** Containerization for easy deployment and scalability.

## Installation

1. **Clone the Repository:**

   ```bash

   git clone https://github.com/yourusername/random-name-selector.git

   cd random-name-selector

   ```

2. `docker-compose up --build`

3. Open your browser and navigate to http://localhost:4020

## File Structure

- `index.html`: The main HTML file for the app.

- `styles.css`: Custom styles for the app's UI.

- `script.js`: JavaScript for interactivity and logic.

- `Dockerfile`: Configuration file for building the Docker image.

- `docker-compose.yml`: Defines services and container settings.

## Usage

1. Add names to the list in the text area.

2. Press the Randomize button to pick a name.

3. Celebrate the selection with confetti effects.

4. Names are automatically saved locally and removed once selected.

## Customization

### Confetti Effects

To modify the confetti behavior, edit the launchConfetti function in script.js.

### Background Gradients

Customize the background gradients by updating the gradients array in script.js.

## Credits

Code: Steven Hubert  

Font: Atkinson Hyperlegible  

Confetti Library: Canvas Confetti