Headstorm · johnjoestar · Mar 8, 2022
diff --git a/README2.md b/README2.md
@@ -0,0 +1,7 @@
+# Frontend Challenge
+
+I completed the front end challenge through HTML and CSS. I tried my best to implement the reCaptcha v3 verification. I started learning front end programming this semester, so looks-wise it is not pretty. 
+
+# Backend Challenge
+
+I tried the backend challenge, but I was not able to complete it. Any tips to complete it would be greatly appreciated.
diff --git a/backend/package.json b/backend/package.json
@@ -0,0 +1,15 @@
+{
+    "name": "backendchallenge",
+    "version": "1.0.0",
+    "description": "",
+    "main": "server.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "start": "node server.js"
+    },
+    "author": "John Jo",
+    "license": "ISC",
+    "dependencies": {
+        "express": "^4.17.3"
+    }
+}
diff --git a/backend/server.js b/backend/server.js
@@ -0,0 +1,20 @@
+const express = require('express');
+const app = express();
+app.use(express.json());
+
+let num = [];
+
+app.get('/data', function(req, res) {
+    res.json(num);
+});
+
+app.post('/data', function(req, res) {
+
+});
+
+app.patch('/data', function(req, res) {
+
+});
+
+const port = process.env.PORT || 8080;
+app.listen(port, () => console.log(`Listening on port ${port}..`));
diff --git a/frontend/index.html b/frontend/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang = "en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title> Headstorm </title>
+    <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
+    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
+    <link rel="stylesheet" href="style.css" />
+
+</head>
+
+    <body>
+        <h1> Headstorm </h1>
+        <h2> Contact Us</h2>
+        <form id = "contact"> 
+            <label for = "fname"> First Name</label><br>
+            <input type = "text" id = "fname" name = "fname" /><br>
+            <label for = "lname"> Last Name</label><br> 
+            <input type = "text" id = "lname" name = "lname" /><br>
+            <label for = "email"> Email</label><br>
+            <input type = "text" id = "email" name = "email" /><br>
+            <label for = "number"> Number</label><br>
+            <input type = "text" id = "number" name = "number"/><br>
+            <button class="g-recaptcha"
+                data-sitekey="6LfuT8QeAAAAAF79Xo1I-6Rjvzozrg0dUua0T-ph"
+                data-callback="onSubmit"> Submit </button>
+        </form>
+
+        <script> 
+            var recaptcha = "";
+            function submitContactInfo() {
+                if(recaptcha.length == 0) {
+                    console.log("Recaptcha verification unsuccessful");
+                }
+                var fname = document.getElementById("fname").value;
+                var lname = document.getElementById("lname").value;
+                var email = document.getElementById("email").value;
+                var number = document.getElementById("number").value;
+
+                if (fname.length == 0) {
+                    console.log("First name is left blank");
+                }
+                if (lname.length == 0) {
+                    console.log("Last name is left blank");
+                }
+                if (email.length == 0 || email.indexOf("@") == -1) {
+                    console.log("Enter valid email");
+                }
+                if (number.length != 10) {
+                    console.log("Enter valid phone number")
+                }
+            }
+
+            function onSubmit(token) {
+                recaptcha = token;
+                submitContactInfo();
+            }
+        </script>
+    </body>
+</html>
diff --git a/frontend/style.css b/frontend/style.css
@@ -0,0 +1,8 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    justify-content: center;
+    background: #91BAD6
+}