Add files via upload

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

App.css

@@ -0,0 +1,122 @@
+*{
+  box-sizing: border-box;
+margin-top: 15px;
+margin-left: 15px;
+margin-right: 15px;
+
+  font-size: 16px;
+  border-radius: 14px;
+}
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+body{
+  background: #152ea8f2;
+  font-family: 'Montserrat';
+}
+.btn{
+  border: 0; 
+  background-color: #F55A00;
+  padding: .5rem;
+  color: #FFFF;
+  margin: 1rem 0;
+  width: 100%;
+  text-transform: uppercase;
+  cursor: pointer;
+  /* change the mouse corsor to finger pointer */
+  transition: 1s background ease;
+  font-size: 20px;
+}
+
+
+/* submit hover over  */
+.btn:hover{
+  background-color: rgb(250, 205, 149);
+  color: #FFF;
+  font-size: 20px;
+  letter-spacing: .2rem;
+}
+.form-box{
+  min-width: 100%;
+  height: 90vh;
+  /* border: dotted #F55A00 5vw; */
+  /* border: 1px solid red; */
+  margin: 0vw;
+  padding: 3vw;
+  background-color: #96bdf0d6;
+
+  /* position:relative for .prevBtn and .nextBtn position:absolute; */
+  position:relative; 
+}
+
+
+
+
+
+.form-box h1{
+  font-size: 35px ;
+  text-align: center;
+  color: #1d2774;
+  margin: 0 0 .5vh 0;
+}
+
+
+
+
+.form-box label{
+  display: block;
+  text-align: center;
+  font-size: 20px;
+  margin: 0 0 2vh 0;
+}
+
+
+
+
+
+.form-box input{
+  display: block;
+  width: 100%;
+  padding: .5rem .8rem .5rem .8rem;
+  margin: .9vw 0;
+  border:0;
+  border-radius: 5px;
+  font-size: 20px;
+}
+
+
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

App.js

@@ -0,0 +1,13 @@
+import logo from './logo.svg';
+import React, {useState} from 'react'
+import './App.css';
+import Inputs from './components/formss';
+
+
+function App() {
+  return (
+    <Inputs/>
+  );
+}
+
+export default App;

App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

README.md

@@ -1,82 +1,70 @@
-# Task: Create a Form and Store Data in Firestore
-
-## Description
-
-The task involves creating a form with specific fields and submitting the form. On submission, the data should be stored in a [Firestore database](https://firebase.google.com/docs/firestore). Yor are also required to create a collection with your first name and branch, following a specific naming convention (mentioned below). I can add some good resources for firebase and form but I want to test your Googling skills. But wherever you fill confused, feel free to ask in WhatsApp group.
-
-## Task Requirements
-
-1. Create a form with the following fields:
-   - **Name**: A field for participants to enter their full name.
-   - **Branch**: A field for participants to enter their branch of study.
-   - **Email**: A field for participants to enter their email address.
-   - **PhoneNumber**: A field for participants to enter their phone number.
-
-2. All fields mentioned above are required, meaning participants must provide information for each field before submitting the form.
-
-3. Implement form validation to ensure that participants provide valid data. For example, validate that the email address follows the proper format, and ensure the phone number is in a valid format as well.
-
-4. Design and implement a user interface (UI) for the form. Participants are free to choose any framework they prefer for building the UI.
-
-5. Configure Firebase Firestore to store the form data. You will provide the participants with the Firebase configuration file that they will need to integrate into their solution.
-
-6. Participants should create a collection in Firestore with the following naming convention:
-   - Collection Name: FirstNameBranch
-   - For example, if a participant's name is "Balveer Singh Rao" and their branch is "Electrical Engineering" the collection name would be "BalveerElectrical".
-
-7. Once participants complete the task,host the form on services like (netlify or vercel) and raise a pull request on this repository with the link of your hosted site in description.
-
-## Deadline
-
-The deadline for completing this task is the end of the day (EOD) on July 13th.
-
-## Additional Notes
-
-- Participants are free to use any framework of their choice for building the form and UI. They can select from popular options such as React, Angular, Vue.js, or any other framework they are comfortable with.
-
-- We encourage you to write clean and well-documented code. This will make reviewing your submissions easier and allow for better evaluation of your skills.
-- Its optional but if you use [react hook form](https://www.react-hook-form.com), it would make form handling and validation lot simpler.
-
-## Firestore config file
-```
-// For Firebase JS SDK v7.20.0 and later, measurementId is optional
-const firebaseConfig = {
-  apiKey: "AIzaSyA0hA2Bc74PEzeuoahNApERIEkxFqv_jSo",
-  authDomain: "techteamexpansion23.firebaseapp.com",
-  projectId: "techteamexpansion23",
-  storageBucket: "techteamexpansion23.appspot.com",
-  messagingSenderId: "542718392377",
-  appId: "1:542718392377:web:bf6178e1b28494fe8c35e8",
-  measurementId: "G-39B1R2EWV2"
-};
-```
-or if you want to use CDN here is the script
-```
-<script type="module">
-  // Import the functions you need from the SDKs you need
-  import { initializeApp } from "https://www.gstatic.com/firebasejs/10.0.0/firebase-app.js";
-  import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.0.0/firebase-analytics.js";
-  // TODO: Add SDKs for Firebase products that you want to use
-  // https://firebase.google.com/docs/web/setup#available-libraries
-
-  // Your web app's Firebase configuration
-  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
-  const firebaseConfig = {
-    apiKey: "AIzaSyA0hA2Bc74PEzeuoahNApERIEkxFqv_jSo",
-    authDomain: "techteamexpansion23.firebaseapp.com",
-    projectId: "techteamexpansion23",
-    storageBucket: "techteamexpansion23.appspot.com",
-    messagingSenderId: "542718392377",
-    appId: "1:542718392377:web:bf6178e1b28494fe8c35e8",
-    measurementId: "G-39B1R2EWV2"
-  };
-
-  // Initialize Firebase
-  const app = initializeApp(firebaseConfig);
-  const analytics = getAnalytics(app);
-</script>
-```
-
-## FAQ
-Q: How would you know wheather you have succesfully connected to database or not?<br>
-A: When we add document to firestore, in response we get a document id, so if you're getting this id that means you have succesfully        connected to database.
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

firebase.js

@@ -0,0 +1,17 @@
+ import firebase from "firebase/app";
+import{ initializeApp } from 'firebase/app';
+import{ getFirestore } from 'firebase/firestore';
+
+const firebaseConfig = {
+    apiKey: "AIzaSyBS1neNURUwWU8I3yjtYNkIHIYevfJ1Zh8",
+    authDomain: "iit-bhu-52d13.firebaseapp.com",
+    databaseURL: "https://iit-bhu-52d13-default-rtdb.firebaseio.com",
+    projectId: "iit-bhu-52d13",
+    storageBucket: "iit-bhu-52d13.appspot.com",
+    messagingSenderId: "635655240313",
+    appId: "1:635655240313:web:a0e0d297abb0ea7d6572a8",
+    measurementId: "G-P44Q6C328N"
+}
+
+const app = initializeApp(firebaseConfig)
+export const db = getFirestore(app)