application form created with navbar

Author: epythonlab

react/reactapp/package-lock.json

@@ -9,6 +9,7 @@
     "formik": "^2.2.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.8.0",
     "react-router-dom": "^6.9.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4",

react/reactapp/package.json

@@ -40,6 +40,7 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+  
 
   </body>
 </html>

react/reactapp/public/index.html

@@ -31,6 +31,8 @@ function App() {
       <Routes>
         <Route path="dashboard" element={<Dashboard />}>
         </Route>
+      </Routes>
+      <Routes>
         <Route path="application" element={<ApplicationForm />}>
         </Route>
       </Routes>

react/reactapp/src/App.js

@@ -0,0 +1,48 @@
+// CREATE ROUTES FOR DASHBOARD INSIDE App.js
+
+// import route
+// CREATE ROUTES FOR DASHBOARD INSIDE App.js
+import React from 'react';
+// import route
+import {BrowserRouter, Routes, Route} from 'react-router-dom';
+import logo from './logo.svg';
+import './App.css';
+import Login from './components/login/Login'; // Login component from components
+import Dashboard from './components/Dashboard/Dashboard' // import Dashboard component
+import UseToken from './components/useToken';
+import ApplicationForm from './components/Dashboard/ApplicationForm'
+import Navbar from './components/Header/Navbar'
+
+
+
+/* Add BrowserRouter, then add a Routes component as a child
+   in the return method
+   inside of Switch, add a Route with a path for each component
+   that used to route to the endpoints
+*/
+/* you can modify the following component */
+
+function App() {
+
+
+  return (
+    <>
+    <Navbar />
+    <div className="container">
+
+      <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<ApplicationForm />}>
+        </Route>
+      </Routes>
+      <Routes>
+        <Route path="/application" element={<ApplicationForm />}>
+        </Route>
+      </Routes>
+      </BrowserRouter>
+    </div>
+  </>
+  );
+}
+
+export default App;

react/reactapp/src/App2.js

@@ -1,64 +1,33 @@
+
 // create student registration form component
-import './form-style.css';
 import React from 'react';
-/*
-  INSTALL: npm install formik
-  - Formik is the world's most popular open source form library for React and React Native
-  - then, import the module
-*/
-import { Formik, Form, Field, ErrorMessage } from 'formik';
-
-/*
-INSTALL: npm install yup
-
-  - Yup is a schema builder for runtime value parsing and validation.
-  - Define a schema, transform a value to match, assert the shape of an existing value, or both.
-  - Yup schema are extremely expressive and allow modeling complex,
-   interdependent validations, or value transformation
+import './formStyle.css';
 
-*/
-import * as Yup from 'yup';
 
 function ApplicationForm(){
 
-  // validate the form values before submitting
-  const validationSchema = Yup.object().shape({
-    fname: Yup.string().required('Enter First Name'),
-    lname: Yup.string().required('Enter Last Name'),
-    phone: Yup.
-    email: Yup.string()
-      .email('You have entered an invalid email address')
-      .required('Required')
-
-  })
-
   // return the form layout
   return (
     <div class="form-container">
       <div class="title">Application Form</div>
-      <Formik {...props} validationSchema = {validationSchema}>
         <form >
           <div class="user__details">
             <div class="input__box">
               <span class="details">First Name</span>
               <input type="text" name='fname' placeholder="E.g: Asibeh" required />
-              <ErrorMessage name='fname' className='d-block invalid-feedback' component='span' />
             </div>
             <div class="input__box">
               <span class="details">Last Name</span>
               <input type="text" name='lname' placeholder="E.g: Tenager" required />
-              <ErrorMessage name='lname' className='d-block invalid-feedback' component='span' />
             </div>
 
             <div class="input__box">
               <span class="details">Email</span>
               <input type="email" name='email' placeholder="asibeh@gmail.com" required />
-              <ErrorMessage name='email' className='d-block invalid-feedback' component='span' />
             </div>
             <div class="input__box">
               <span class="details">Phone Number</span>
               <input type="tel" name='phone' pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="092-345-6787" required />
-              <ErrorMessage name='phone' className='d-block invalid-feedback' component='span' />
             </div>
           </div>
           <div class="gender__details">
@@ -78,13 +47,9 @@ function ApplicationForm(){
             </div>
           </div>
           <div class="button">
-            <button variant='danger' size='lg'
-              block='block' type="submit" value="Apply" >
-              {props.children}
-            </button>
+            <input type="submit" value="Apply" />
           </div>
         </form>
-      </Formik>
     </div>
   );
 }

react/reactapp/src/components/Dashboard/ApplicationForm.js

@@ -140,6 +140,9 @@ form .button input:hover {
 @media only screen and (max-width: 584px) {
   .form-container {
     max-width: 100%;
+    height: 90%;
+    margin-top: 35%;
+    margin-bottom: 25%;
   }
 
   form .user__details .input__box {
@@ -159,4 +162,5 @@ form .button input:hover {
   .user__details::-webkit-scrollbar {
     width: 0;
   }
+  
 }

react/reactapp/src/components/Dashboard/form-style.css renamed to react/reactapp/src/components/Dashboard/formStyle.css

@@ -0,0 +1,52 @@
+// navigation bar defined below
+// you are not required to install additional library
+// just checkout the css file in nav.css and modify the layout
+
+import React, {useState, useEffect} from 'react'
+import { BrowserRouter, NavLink } from "react-router-dom";
+import './nav.css'
+
+export default function Navbar() {
+  const [toggleMenu, setToggleMenu] = useState(false)
+  const [screenWidth, setScreenWidth] = useState(window.innerWidth)
+
+  useEffect(() =>{
+    document.title = 'Sage Application'
+  })
+  const toggleNav = () => {
+    setToggleMenu(!toggleMenu)
+  }
+
+  useEffect(() => {
+
+    const changeWidth = () => {
+      setScreenWidth(window.innerWidth);
+    }
+
+    window.addEventListener('resize', changeWidth)
+
+    return () => {
+        window.removeEventListener('resize', changeWidth)
+    }
+
+  }, [])
+
+  return (
+
+    <nav>
+      {(toggleMenu || screenWidth > 500) && (
+      <ul className="list">
+      <BrowserRouter>
+      <NavLink to='/application'>
+        <li className="items">Application</li>
+      </NavLink>
+      </BrowserRouter>
+
+        <li className="items">List Applicants</li>
+    </ul>
+      )}
+
+      <button onClick={toggleNav} className="btn">=</button>
+    </nav>
+  )
+}

react/reactapp/src/components/Header/Navbar.js

@@ -0,0 +1,65 @@
+nav {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    height: 50px;
+    background: linear-gradient(45deg, #282c34, #282c34);
+    float: right;
+}
+
+
+.list {
+    list-style-type: none;
+    background: linear-gradient(45deg, #282c34, #282c34);
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+.items {
+    margin-right: 20px;
+    font-size: 20px;
+    text-transform: uppercase;
+    color: #f1f1f1;
+    cursor: pointer;
+    float: right;
+}
+
+.btn {
+    display: none;
+    position: absolute;
+    right: 5px;
+    top: 1px;
+    padding: 4px;
+    color: #fff;
+    font-size: 18px;
+    float: right;
+}
+
+
+@media screen and (max-width: 500px){
+
+    .list {
+        flex-direction: column;
+        height: auto;
+    }
+    .items:nth-child(1){
+        border-top: 1px solid rgba(255, 255, 255, 0.555);
+        margin-top: 50px;
+    }
+    .items {
+        width: 100%;
+        border-top: 1px solid rgba(255, 255, 255, 0.555);
+        text-align: center;
+        margin-right: 0px;
+        padding: 20px 0;
+    }
+    .btn {
+        display: block;
+        float: right;
+        width: 10%;
+
+    }
+
+}

react/reactapp/src/components/Header/nav.css

@@ -3,13 +3,12 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 // import required css file
 import './bmi.css';
-import App from './App';
+import App from './App2';
 import AjaxApi from './AjaxApi';
+import ApplicationForm from './components/Dashboard/ApplicationForm'
 // import your newly created function component here
 import BmiCalculator from './Bmi';
 
-import Login from './components/login/Login'; // Login component from components
-
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
@@ -18,6 +17,7 @@ root.render(
   <React.StrictMode>
       <App />
 
+
   </React.StrictMode>
 );