JSFiddle - React, Tailwind, and code Playground

by Yeet45687564

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    
    <!-- links the js files -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    
  </head>
  <body>
    <input type="text" id="emailSubject" placeholder="Subject"/>
    <input type="text" id="emailBody" placeholder="Body"/>
    <input type="button" onclick="send()" value="Send"/>
  </body>
  
  <!-- links the js files -->
  <script type="text/javascript" src="https://smtpjs.com/v3/smtp.js"></script>
  <script type="text/javascript" src="script.js"></script>
  
</html>

CSS

html {
  background-color: white;
}

JavaScript

let subject;
let body;

function setValues() {

	// sets the values of the subject and body
	subject = document.getElementById("emailSubject").value;
  body = document.getElementById("emailBody").value;
  
}

function send() {
	setValues();
  
  // sends the email
	Email.send({
  	Host: "smtp.gmail.com",
    Username: "<sender's email address>",
    Password: "<your email password>",
    To: "<recipient's email address>",
    From: "<sender’s email address>",
    Subject: subject,
    Body: body,
  }).then(
  
  	// displays a message if the email was sent
  	message => alert("Your Email was sent.")
    
  );
  
}