.

backendstuff/pastEvents2024Form.js

@@ -0,0 +1,38 @@
+//pastEvents2024Form.js
+
+const express = require ('express')
+const app = express()
+const morgan = require('morgan');
+require('dotenv').config();
+const mongoose = require('mongoose');
+const Blog = require('./models/blogs');
+const pastEventsSchema = require('./pastEventsSchema2024');
+
+app.use(express.urlencoded({ extended: true }));
+
+
+mongoose.connect(db, { useNewUrlParser: true, useUnifiedTopology: true })
+.then((result)=> app.listen(3000), console.log('connection successful'))
+
+    .catch((err) => console.log(err));
+
+    app.use(express.static('public'))
+    app.use(morgan('dev'));
+
+
+    app.post('/past-events/2024', (req, res) => {
+        console.log('POST request received');
+
+        const NewEvent = new pastSchema(req.body);
+
+        NewEvent.save() // Save the instance
+        .then((result) => {
+            console.log('success');
+            res.status(201).send(result); // Respond with success
+        })
+        .catch((err) => {
+            console.log(err);
+            res.status(400).send(err); // Respond with error
+        });
+    });
+

backendstuff/pastEventsSchema2024.js

@@ -0,0 +1,48 @@
+//pastEventsSchema2024.js
+
+
+const mongoose = require('mongoose');
+const Schema = mongoose.Schema;
+
+const pastEventsSchema = new Schema({
+    PastTitle: {
+        type: String,
+        required: true
+    },
+    PastDate: {
+        type: String,
+        required: true
+    },
+    PastLocation: {
+        type: String,
+        required: true
+    },
+    PastUrl: {
+        type: String,
+        required: true
+    },
+    PastImg: {
+        type: String,
+        required: true
+    },
+    Past1: {
+        type: String,
+        required: true
+    },
+    Past2: {
+        type: String,
+        required: true
+    },
+    Past3: {
+        type: String,
+        required: true
+    },
+    PmRankDisplay: {
+        type: Boolean,
+        required: true
+    }
+}, { timestamps: true });
+
+const pastSchema = mongoose.model('PastEvents2024', pastEventsSchema)
+
+module.exports = pastEventsSchema;

index js/addEventForm.js

@@ -0,0 +1,63 @@
+//addEventForm.js
+
+document.addEventListener("DOMContentLoaded", function () {
+    const toggleBtn = document.getElementById("toggleBtn");
+    const addEventFormDiv = document.getElementById("addEventForm");
+
+    // Create the form elements
+    const formHTML = `
+        <div id="inputContainer" class="Upcoming-event-form">
+            <form action="/past-events/2024" method="post">
+                <p id="EventTitleUpcoming"></p>
+                <input placeholder="Event Name" type="text" id="PastTitle" name="PastTitle">
+                <br>
+                <p id="EventDateUpcoming"></p>
+                <input placeholder="Event Date(s)" type="text" id="PastDate" name="PastDate">
+                <br>
+                <p id="EventLocationUpcoming"></p>
+                <input placeholder="State" type="text" id="PastLocation" name="PastLocation">
+                <br>
+                <p id=""></p>
+                <input placeholder="Entrant Count" type="text" id="PastEntrantCount" name="PastEntrantCount">
+                <br>
+                <p id="EventUrlUpcoming"></p>
+                <input placeholder="Start.gg" type="text" id="PastUrl" name="PastUrl">
+                <br>
+                <p id="EventImageUpcoming"></p>
+                <input placeholder="Image" type="text" id="PastImg" name="PastImg">
+                <br>
+                <p id="EventDescriptionUpcoming"></p>
+                <input placeholder="1st" type="text" id="Past1" name="Past1">
+                <br>
+                 <p id="EventDescriptionUpcoming"></p>
+                <input placeholder="2nd" type="text" id="Past2" name="Past2">
+                <br>
+                <p id="EventDescriptionUpcoming"></p>
+                <input placeholder="3rd" type="text" id="Past3" name="Past3">
+                <br>
+                <input type="radio" id="PmRankDisplay" name="PmRankDisplay" value="Yes"> Yes
+                <input type="radio" id="PmRankDisplayNo" name="PmRankDisplayNo" value="No"> No
+                <br>
+                <button type="submit" id="SubmitBtn" class="submit-btn">Submit</button>
+            </form>
+        </div>
+    `;
+
+    // Insert the form into the addEventForm div
+    addEventFormDiv.innerHTML = formHTML;
+
+    const inputContainer = document.getElementById("inputContainer");
+
+    toggleBtn.addEventListener("click", function (event) {
+        toggleForm(event);
+    });
+
+    function toggleForm(event) {
+        inputContainer.classList.toggle("hidden");
+        if (inputContainer.classList.contains("hidden")) {
+            toggleBtn.textContent = "Add an Event";
+        } else {
+            toggleBtn.textContent = "Hide Event Form";
+        }
+    }
+});

index js/index.css

@@ -243,17 +243,16 @@ p.event-date {
     padding: 0 30px 0 30px;
     padding-inline-start: unset;
 }
-#EventDateUpcoming, #EventLocationUpcoming, #EventTitleUpcoming, #EventUrlUpcoming, #EventImageUpcoming, #EventDescriptionUpcoming, #EventPassUpcoming {
+#EventDateUpcoming, #EventLocationUpcoming, #EventTitleUpcoming, #EventUrlUpcoming, #EventImageUpcoming, #EventDescriptionUpcoming, #EventPassUpcoming, #EventLocationUpcomingg {
     display: inline;
 }
 #textInputUpcomingTitle, #textInputUpcomingDate, #textInputUpcomingLocation, #textInputUpcomingUrl, #textInputUpcomingImage, #textInputUpcomingDescription, #textPassUpcoming {
     margin: 10px;
 }
 .Upcoming-event-form {
+
     font-size: 25px;
     border-radius: 15px 15px 15px 15px;
-    padding-left: 8px;
-    padding-right: 8px;
     box-shadow: 0 0 3px 0 rgb(0, 196, 16);
         transition: .3s;
         border-inline-color: rgb(113, 36, 255);
@@ -269,11 +268,11 @@ p.event-date {
        box-shadow: 0 0 9px 0  rgb(113, 36, 255);
        border-inline-color: rgb(113, 36, 255);
        border-block-color: green;
-       font-family: 'Nunito';
        height: fit-content; 
-       width: 30%;
-       margin: 10px 0 0 34%;
-
+       width: 10%;
+margin-right: auto;
+margin-left: auto;
+margin-top: 10px;
 }
 .Upcoming-event-form:hover {
     border-style: double;