detroitmi.gov Survey

This project contains a custom HTML component that renders a usability survey.

Project Structure

detroitmi-gov-survey
├── src
│   ├── index.html
│   ├── index.js
│   └── styles
│       └── main.scss
├── build
├── webpack.config.js
├── package.json
└── README.md

Files

• src/index.html: This file is the entry point of the HTML custom component. It contains the HTML structure and markup for rendering the survey component.

• src/index.js: This file is the JavaScript file that handles the logic and behavior of the survey component. It may include event listeners, data manipulation, and rendering functions.

• src/styles/main.scss: This file is the main SCSS file for styling the survey component. It contains the styles and CSS rules specific to the survey component.

• build/: This directory is where the production build of the web component will be generated by Webpack. It will contain the bundled and optimized files ready for distribution.

• webpack.config.js: This file is the configuration file for Webpack. It specifies the entry point, output directory, loaders, and plugins needed to build the production-ready version of the web component.

• package.json: This file is the configuration file for npm. It lists the dependencies and scripts for the project. It may include dependencies for Bootstrap 5, Webpack, and any other libraries or tools required for development.

Usage

To set up the development environment and build the web component, follow these steps:

1. Clone the repository.
2. Install the dependencies by running yarn install.
3. Customize the survey component in src/index.html, src/index.js, and src/styles/main.scss.
4. Build the production-ready version of the web component by running yarn build. The output will be generated in the dist/ directory.
5. Use the survey component in other projects by including the generated files from the dist/ directory.