feat: created a server containing lesson_22 files and alterations alongside node express and various package additions for Feature/lesson_24 (#577)

* feat: adds joseph's_template folder with copied files of template folder, modifies only the styles.css inside joseph's_template folder. lesson_22 -JosephCaballero

* feat: modifies styles.css to enhance webpage

* modifies styles.css inside joseph's template. working on 'buttons' in the programs section

* modifies styles.css in josephs_template folder. highlights the 'buttons'. lesson_22 -JosephCaballero

* feat: modifies styles.css more and index.html
breifly. adds index.js files and packages inside
package.json/package-lock.json. adds folder to
hold files being used in index.js. lesson_24
-JosephCaballero

* fix: deletes extra file. lesson_24 -JosephCaballero

* chore: gets rid of boilterplate code and deleted some javadocs i want to expand on into the future. lesson_24 -JosephCaballero

* chore: moves folder from lesson_22 into lesson_24. lesson_24 -JosephCaballero

Author: Josephcabs

lesson_24/josephs_template/index.js

@@ -0,0 +1,131 @@
+const morgan = require("morgan"); 
+const path = require("path"); 
+var debug = require('debug')('myapp:server'); 
+const bodyParser = require('body-parser');
+const express = require("express")
+
+const PORT = process.env.PORT || 5500;
+const app = express() 
+
+app.use(morgan("dev")); 
+app.use(express.static(path.join(__dirname, "public")));
+app.use(bodyParser.urlencoded({ extended: true}));
+
+
+app.post('/signUp.html', (req, res) =>{
+    res.status(200).send(`
+        <title>Sign Up Page</title>
+        <div>
+            <div id="grid">
+                <div id="holder">
+                <form action="/signUp2.html" method="POST">
+                    <input name="nameInput" id="myInput" type="text" placeholder="Enter Full Name" required>
+                    <input name="emailInput" type="email" placeholder="Email Address">
+                        <button>
+                            Submit Form
+                        </button>
+                        </form>
+                        <form action="index.html" method="GET">
+                        <button>
+                            Back to main page
+                        </button>
+                </form>
+                </div>
+            </div>
+        </div>
+
+        <style>
+            body {
+                background-color: #880808;
+            }
+            form{
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+            }
+
+            #grid{
+                display: grid;
+                grid-template-columns: 33.3% 33.3% 33.3%;
+                grid-template-rows: 50% 50% 50%;
+            }
+
+            #holder{
+                grid-column-start: 2;
+                grid-row-start: 2;
+            }
+                
+            input{
+                text-align: center;
+                padding: 1em 1.5em;
+                border-radius: 9em;
+                background: linear-gradient(to left, #333, #333 50%, #eee 100%, #333 85%);
+                font: 700 1.5em / 1.25 ubuntu, sans-serif;
+                text-transform: uppercase;
+                margin: 10px;
+            }
+            button:hover{
+                cursor: pointer;
+            }
+
+            button{
+                text-align: center;
+                padding: 1em 1.5em;
+                border-radius: 9em;
+                background: linear-gradient(to left, #333, #333 50%, #eee 100%, #333 85%);
+                font: 700 1.5em / 1.25 ubuntu, sans-serif;
+                text-transform: uppercase;
+            }
+        </style>
+        `);
+});
+app.post('/signUp2.html', (req, res) => {
+    const nameInput = req.body.nameInput;
+    console.log(nameInput);
+    const emailValue = req.body.emailInput;
+    res.status(200).send(`
+        <title>Retrieval Page</title>
+        <div style="display: flex; justify-content: center; ">
+            <form action="signUp.html" method="POST">
+                <br>
+                <button>
+                    Return back to page
+                </button>
+            </form>
+        </div>
+        <div style="display: flex; flex-direction: column; padding:0px" >
+            <h1>You have submitted good job <br/>
+            The information you put in: <br/> ${nameInput}<br/> ${emailValue}</h1>
+        </div>
+        <style>
+            h1{
+                text-align: center;
+                background-color: gray;
+            }
+            body{
+                background-color: #880808;
+            }
+
+            button{
+                display: grid;
+                grid-auto-flow: column;
+                grid-gap: .5em;
+                padding: 1em 1.5em;
+                border-radius: 9em;
+                background: linear-gradient(to left, #333, #333 50%, #eee 100%, #333 85%);
+                font: 700 1.5em / 1.25 ubuntu, sans-serif;
+                text-transform: uppercase;
+            }
+                
+            button:hover{
+                cursor: pointer;
+            }
+        </style>
+        `);
+})
+
+app.listen(PORT, () => {
+    console.log(PORT);
+ debug(`Server listening on http://localhost:${PORT}`);
+});