Git Product home page Git Product logo

romenr1 / registration-form-using-firebase-and-localstorage Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 5 KB

this is a JavaScript registration form that utilizes Firebase for data storage. The form allows users to input their name, phone number, email, password, gender, and work/student status. The form data is validated, and if the inputs are valid, the data is stored in both the local storage and the Firebase Realtime Database.

JavaScript 44.81% HTML 36.50% CSS 18.68%
firebase firebase-realtime-database form registration-form

registration-form-using-firebase-and-localstorage's Introduction

Firebase Registration Form

This is a JavaScript registration form that utilizes Firebase for data storage. The form allows users to input their name, phone number, email, password, gender, and work/student status. The form data is validated, and if the inputs are valid, the data is stored in both the local storage and the Firebase Realtime Database.

Firebase Configuration

To connect the registration form with your Firebase project, you need to provide the Firebase configuration. Update the firebaseConfig object in the code with your own Firebase project credentials. You can find these credentials in your Firebase project settings.

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DATABASE_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

Usage

To use the registration form, follow these steps:

  1. Open the index.html file in a web browser.
  2. Fill out the registration form with your name, phone number, email, password, gender, and work/student status.
  3. Click the "Submit" button to validate the form inputs.
  4. If the inputs are valid, the form data will be stored in both the local storage and the Firebase Realtime Database.
  5. If the inputs are invalid, an alert message will be displayed.

Form Validation

The registration form performs validation on the following inputs:

  • Email: The email input is validated using a regular expression pattern. It should be in the format [email protected].
  • Password: The password input is validated to ensure it has a minimum length of 8 characters.
  • Phone: The phone input is validated using a regular expression pattern. It should contain only numeric characters.

If any of the validation checks fail, an alert message will be displayed.

Database Storage

The form data is stored in two places:

  1. Local Storage: The form data is stored in the local storage using the localStorage.setItem() function. The data is retrieved and updated as an array in the local storage.
  2. Firebase Realtime Database: The form data is also stored in the Firebase Realtime Database using the database.ref().push() function. The data is pushed to the "form-data" node in the database.

Dependencies

The registration form relies on Firebase for data storage. Make sure to include the Firebase JavaScript SDK in your project. You can include it by adding the following script tag in your HTML file, preferably before the script that contains the form code.

<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js"></script>

License

Feel free to use and modify the code according to your needs. Contributions are welcome!

Credits

This registration form application was created by Romen Rakholiya.

You can find the original source code and more projects on GitHub.

If you have any questions or suggestions, please feel free to reach out to me at [[email protected]].

registration-form-using-firebase-and-localstorage's People

Contributors

romenr1 avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.