<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String Encryption and Decryption</title>
</head>
<body>

<h2>String Encryption and Decryption</h2>

<textarea id="plaintext" rows="4" cols="50">Enter your message here...</textarea><br>
<button onclick="encrypt()">Encrypt</button><br>
<textarea id="ciphertext" rows="4" cols="50" readonly></textarea><br>
<button onclick="decrypt()">Decrypt</button><br>
<textarea id="decryptedtext" rows="4" cols="50" readonly></textarea><br>

<script>
function encrypt() {
    const plaintext = document.getElementById("plaintext").value;
    const encryptedText = btoa(plaintext); // Basic encryption using Base64 encoding
    document.getElementById("ciphertext").value = encryptedText;
}

function decrypt() {
    const encryptedText = document.getElementById("ciphertext").value;
    const decryptedText = atob(encryptedText); // Basic decryption using Base64 decoding
    document.getElementById("decryptedtext").value = decryptedText;
}
</script>

</body>
</html>


index.html

body{
  padding: 25px;
}
.title {
	color: #5C6AC4;
}

styles.css

function showTime() {
	document.getElementById('currentTime').innerHTML = new Date().toUTCString();
}
showTime();
setInterval(function () {
	showTime();
}, 1000);