myntsu / random-number-generator

🎲 Random number generator web-app

Random Number Generator with Toast Notification

This project is a simple web application that generates a random number with a specified number of digits and provides an option to copy the number to the clipboard. It also displays a toast notification when the number is successfully copied.

Features

• Random Number Generation: Select the number of digits (between 3 and 10) for the random number using a slider.
• Clipboard Copy: Click a button to copy the generated number to the clipboard.
• Toast Notification: A toast message is displayed when the number is copied, confirming the action.

Technologies Used

• HTML5: Structuring the content and layout.
• CSS3: Styling the user interface with transitions and responsive design.
• JavaScript: Handling the logic for generating numbers, copying to the clipboard, and displaying the toast notification.

Getting Started

Prerequisites

You will need a modern web browser to view and interact with the application. No additional installations are required.

Installation

1. Clone the repository to your local machine using:

   git clone https://github.com/yourusername/random-number-generator.git

2. Navigate to the project directory:

   cd random-number-generator

3. Open the index.html file in your preferred web browser:

   • On macOS or Linux:

     open index.html

   • On Windows:

     start index.html

Usage

1. Adjust the Slider: Use the slider to select the number of digits for the random number. The range is from 3 to 10 digits.

2. Generate the Number: Click the "Generate" button to produce a random number with the specified number of digits. The generated number will be displayed in the designated paragraph.

3. Copy to Clipboard: Click the copy button (clipboard icon) next to the generated number. This action will copy the number to the clipboard.

4. Toast Notification: A toast message will appear at the bottom of the screen indicating that the number has been copied to the clipboard. The message disappears after 2 seconds.

Code Explanation

HTML Structure

• Slider Input: The <input> element with type range is used for selecting the number of digits. It has the attribute data-slider-number for easy access in JavaScript.

• Paragraph for Result: The <p> element with data-result attribute displays the generated random number.

• Dialog for Toast: The <dialog> element with data-toast attribute acts as a toast notification to provide feedback to the user when the number is copied.

JavaScript Logic

• Event Listeners:

  • Slider Change: Updates the displayed number of digits dynamically as the slider is moved.
  • Generate Button Click: Generates a random number with the selected number of digits and updates the result paragraph.
  • Copy Button Click: Copies the displayed number to the clipboard using the Clipboard API and shows a toast notification.

• Random Number Generation:

  • A random number is generated by shuffling an array of digits and slicing it to match the selected number of digits.

• Toast Notification:

  • The <dialog> element is shown and hidden using its native show() and close() methods to display the toast notification.

CSS Styling

• Responsive Design: Flexbox is used to center the content, ensuring the application looks good on various screen sizes.

• Transitions: CSS transitions are used to smoothly show and hide the toast notification.

Contributing

If you'd like to contribute, please fork the repository and use a feature branch. Pull requests are warmly welcome.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/YourFeature)
3. Commit your Changes (git commit -m 'Add Some Feature')
4. Push to the Branch (git push origin feature/YourFeature)
5. Open a Pull Request