yallacodecom · MoatazAbdAlmageed · Apr 27, 2020
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@ In this repo you will find some given express server configured to make some bas
 
 1. After cloning the repo and installing the dependancies in the server folder, you should next [setup mongodb](https://docs.mongodb.com/manual/installation/) locally and copy the connection url to the required place in `server/models/mongo.config.js` then run `npm start` in the server folder (btw, cors are enabled so you can run server if you want on a separate port).
 2. Implement the frontend code to make it work with the following functionalities:
-   - [ ] Submit a video request. (API: POST -> `/video-request`)
+   - [x] Submit a video request. (API: POST -> `/video-request`)
    - [ ] Show list of requests below the form. (API: GET -> `/video-request`)
    - [ ] Vote up and down on each request. (API: PUT -> `/video-request/vote`)
    - [ ] Sorting options `new first` the default one, and `top voted first`.

diff --git a/index.html b/index.html
@@ -9,10 +9,11 @@
       href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
     />
   </head>
+  <script src="scripts/main.js"></script>
   <body>
     <div class="container my-5">
       <div class="formContainer my-5">
-        <form action="" method="POST">
+        <form onsubmit="return submitVideo()" method="POST">
           <div class="row">
             <div class="col-md">
               <div class="form-group">
@@ -84,7 +85,7 @@
               </div>
             </div>
           </div>
-
+          <p id="message"></p>
           <button type="submit" class="btn btn-success mt-3">
             Send video request
           </button>

diff --git a/scripts/main.js b/scripts/main.js
@@ -0,0 +1,42 @@
+const url = "http://localhost:7777";
+function postAjax(url, data, success) {
+  var params =
+    typeof data == "string"
+      ? data
+      : Object.keys(data)
+          .map(function (k) {
+            return encodeURIComponent(k) + "=" + encodeURIComponent(data[k]);
+          })
+          .join("&");
+
+  var xhr = window.XMLHttpRequest
+    ? new XMLHttpRequest()
+    : new ActiveXObject("Microsoft.XMLHTTP");
+  xhr.open("POST", url);
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState > 3 && xhr.status == 200) {
+      success(xhr.responseText);
+    }
+  };
+  xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+  xhr.send(params);
+  return xhr;
+}
+
+function submitVideo() {
+  var form = document.querySelector("form"),
+    formData = new FormData(form);
+
+  var video = {};
+
+  formData.forEach((value, key) => {
+    video[key] = value;
+  });
+  postAjax(`${url}/video-request`, video, function (data) {
+    console.log(data);
+    document.getElementById("message").innerText =
+      "Video Submitted successfully";
+  });
+  return false;
+}
diff --git a/server/models/mongo.config.js b/server/models/mongo.config.js
@@ -1,7 +1,7 @@
 const mongoose = require('mongoose');
 mongoose.Promise = require('bluebird');
 
-const mongodbUrl = ''; // TODO: PUT YOUR VALID MONGODB CONNECTION URL HERE <-
+const mongodbUrl = 'mongodb://127.0.0.1:27017/';
 
 if (!mongodbUrl) {
   console.log('\x1b[33m%s\x1b[0m','Please set the mongodb connection first in -> "server/models/mongo.config.js"\n');