𝐄𝐦𝐚𝐢𝐥𝐒𝐞𝐧𝐝𝐞𝐫-𝐖𝐞𝐛-𝐀𝐏𝐈-𝐅𝐫𝐨𝐧𝐭𝐞𝐧𝐝-𝐔𝐬𝐢𝐧𝐠-𝐉𝐚𝐯𝐚𝐬𝐜𝐫𝐢𝐩𝐭

ashish2030 · ashish2030 · commit 6587aafc3322 · 2021-05-19T08:18:19.000+05:30
diff --git a/index.css b/index.css
@@ -0,0 +1,73 @@
+@import url("https://fonts.googleapis.com/css?family=Fjalla+One&display=swap");
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/38816/image-from-rawpixel-id-2210775-jpeg.jpg") center center no-repeat;
+  background-size: cover;
+  width: 100vw;
+  height: 100vh;
+  display: grid;
+  align-items: center;
+  justify-items: center;
+}
+
+.contact-us {
+  background: #f8f4e5;
+  padding: 50px 100px;
+  border: 2px solid black;
+  box-shadow: 15px 15px 1px #ffa580, 15px 15px 1px 2px black;
+}
+
+input {
+  display: block;
+  width: 100%;
+  font-size: 14pt;
+  line-height: 28pt;
+  font-family: "Fjalla One";
+  margin-bottom: 28pt;
+  border: none;
+  border-bottom: 5px solid black;
+  background: #f8f4e5;
+  min-width: 250px;
+  padding-left: 5px;
+  outline: none;
+  color: black;
+}
+
+input:focus {
+  border-bottom: 5px solid #ffa580;
+}
+
+button {
+  display: block;
+  margin: 0 auto;
+  line-height: 28pt;
+  padding: 0 20px;
+  background: #ffa580;
+  letter-spacing: 2px;
+  transition: 0.2s all ease-in-out;
+  outline: none;
+  border: 1px solid black;
+  box-shadow: 3px 3px 1px #95a4ff, 3px 3px 1px 1px black;
+}
+button:hover {
+  background: black;
+  color: white;
+  border: 1px solid black;
+}
+
+::selection {
+  background: #ffc8ff;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus {
+  border-bottom: 5px solid #95a4ff;
+  -webkit-text-fill-color: #2A293E;
+  -webkit-box-shadow: 0 0 0px 1000px #f8f4e5 inset;
+  transition: background-color 5000s ease-in-out 0s;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<link>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="index.css">
+  <title>𝐄𝐦𝐚𝐢𝐥 𝐒𝐞𝐧𝐝𝐞𝐫</title>
+</head>
+<body>
+  <div class="contact-us">
+    <form>
+      <input id="from"placeholder="FROM" required="" type="email" /><input id="password" placeholder="PASSWORD" required="" type="password" /><input id="to"placeholder="TO" required="" type="email" /><input id="subject" placeholder="SUBJECT" required="" type="text" /><input id="Message" name="Message"  placeholder="Message" type="text" /><button type="button" onclick="send()">SEND</button>
+    </form>
+  </div>
+  <script src="index.js"></script>
+  
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,40 @@
+function send()
+{
+ 
+        var from = document.getElementById("from").value;
+        var password = document.getElementById("password").value;
+        var to = document.getElementById("to").value;
+        var subject = document.getElementById("subject").value;
+        var message = document.getElementById("Message").value;
+         var valid=/^[a-zA-Z0-9.!#$%&'+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+        if (subject.length===0||message.length===0||!from.match(valid)||!to.match(valid)) 
+        {
+            alert("Invalid Input")
+        }
+        else {
+    
+            var xhttp = new XMLHttpRequest();
+            xhttp.open("POST", "https://email9876.herokuapp.com/data", true);
+            xhttp.onreadystatechange = function () {
+                if (this.readyState == 4 && this.status == 200) {
+    
+                }
+            };
+    
+    
+            var json = {
+                "from": from,
+                "password": password,
+                "to": to,
+                "subject":subject,
+                "message":message
+            };
+            xhttp.send(JSON.stringify(json));
+
+          
+        }
+    
+        // setTimeout(function () { window.location.reload(); }, 800);
+    
+
+}
