https://github.com/hoangsonww/beautiful-form
✒️ This repository features a beautifully designed form capable of generating interesting quotes and stories based on user inputs. It combines aesthetic appeal with interactive storytelling, providing a unique platform for users to explore creativity and inspiration.
https://github.com/hoangsonww/beautiful-form
beautiful-form css3 form form-builder form-validation forms html5 javascript quote-generator quotes quotes-application story storyboard storybook storytelling web-development
Last synced: 7 months ago
JSON representation
✒️ This repository features a beautifully designed form capable of generating interesting quotes and stories based on user inputs. It combines aesthetic appeal with interactive storytelling, providing a unique platform for users to explore creativity and inspiration.
- Host: GitHub
- URL: https://github.com/hoangsonww/beautiful-form
- Owner: hoangsonww
- License: apache-2.0
- Created: 2023-04-05T05:18:56.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-12T06:57:16.000Z (over 1 year ago)
- Last Synced: 2025-04-11T04:36:08.952Z (7 months ago)
- Topics: beautiful-form, css3, form, form-builder, form-validation, forms, html5, javascript, quote-generator, quotes, quotes-application, story, storyboard, storybook, storytelling, web-development
- Language: HTML
- Homepage: https://hoangsonww.github.io/Beautiful-Form/
- Size: 11.7 KB
- Stars: 20
- Watchers: 9
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Form a Story App
## Overview
"Form a Story" is an interactive web application that allows users to input their ideas through a form and generate a custom story based on their inputs. This application utilizes HTML forms to capture user input on various elements such as animals, adjectives, numbers, and more, which are then creatively incorporated into a pre-defined story template.
## Features
- User-friendly form interface to input story elements.
- Customizable story outcomes based on user input.
- Supports various input types including text, number, radio buttons, and dropdown lists.
- Use of HTML5 validation to ensure all required fields are filled.
- Motivational quotes and meaningful messages to enrich the user experience.
## Prerequisites
- A modern web browser capable of rendering HTML5 and CSS3.
## Setup and Installation
No installation is required. Follow these steps to get started with "Form a Story":
1. Clone or download this repository to your local machine.
2. Locate the downloaded folder and open the HTML file named `index.html` (assuming the entry point of the app is `index.html`, as the provided code snippet does not specify).
3. Open `index.html` with your preferred web browser to start using the application.
## How to Use
1. **Fill the Form**: Complete each field in the form according to the prompts. Each field is designed to capture a unique element of the story you're about to create.
2. **Choose Wisely**: For fields with options, such as the "Relative speed" dropdown or the "Yes or No" radio buttons, your choices will significantly impact the direction or outcome of your story.
3. **Submit Your Story**: Once you've filled all required fields, click on the "Form My Story!" button at the bottom of the form.
4. **Read Your Story**: Upon submission, your inputs are compiled to form a unique story. Navigate to the story display page (assumed `story.html` as per your form's action attribute) to enjoy your creation.
## Customization
To customize the story template or add more input fields:
1. Edit the `story.html` file to modify the story template.
2. Add or remove input fields in the `index.html` file to adjust the details that can be customized by the user.
3. Ensure to update the CSS file `style.css` for any layout or styling adjustments.
## Contributing
We welcome contributions to improve the "Form a Story" app, whether it's adding new features, enhancing the story template, or improving the design. Please fork the repository, make your changes, and submit a pull request with a detailed description of your updates.