Project Ceaser Cipher Conversion Project

Vanilla-JS-Projects/Intermediate/Ceaser-Cipher/README.md

@@ -0,0 +1,64 @@
+<h1 align='center'><b>💥 Ceaser Cipher Conversion 💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+
+
+<div align='center'>
+
+  ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
+  ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
+  ![Javascript](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
+
+</div>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+  <p>This project is a simple HTML and CSS implementation of a Amazon Prime website clone. It aims to replicate the basic structure and styling of the popular entertaining website Amazon Prime.This project Showcases the power of HTML and CSS.</p>
+</div>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+<div>
+  <p>To run this project locally, follow these steps:
+
+- Fork this repository.
+- Clone the forked repository.
+- Open index.html in your web browser to start your culinary exploration.
+
+</p>
+</div>
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+<!-- add the screenshot of the project (Mandatory) -->
+<img src='screenshot.webp'>
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>Damini Chachane</i></b></h4>
+<p align='center'>
+  <a href='linkedin.com/in/damini-chachane-82a210252'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/Damini2004'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>

Vanilla-JS-Projects/Intermediate/Ceaser-Cipher/cipher.css

@@ -0,0 +1,108 @@
+body {
+  font-family: Arial, sans-serif;
+  background-color: whitesmoke; /* Dark background color */
+  color: black; /* Light text color */
+  margin: 0;
+  padding: 0;
+}
+header{
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+  font-size: 20px;
+}
+h1, h2 {
+  text-align: center;
+  color: black; /* Light heading color */
+}
+#theme-toggle{
+  width: 50px;
+  height: 50px;
+justify-items: center;
+}
+.container{
+  display: flex;
+  justify-content: space-around;
+ padding: 50px;
+}
+#decrypt-button{
+  width: 100%;
+  padding: 10px;
+  border: none;
+  background-color: black; /* Button color */
+  color: #fff; /* Light text color */
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+form {
+
+  border:2px solid black;
+  box-shadow: 2px black; /* White shadow */
+  max-width: 400px;
+  margin: 20px ;
+  background:whitesmoke;
+box-shadow: 32px 32pxpx 32px 32px rgba(21, 26, 106, 0.37);/* Dark form background color */
+backdrop-filter: blur(20px);
+-webkit-backdrop-filter: blur(20px);
+padding: 20px;
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
+}
+
+label {
+  font-weight: bold;
+  display: block;
+  margin-bottom: 5px;
+  color: black; /* Light label color */
+}
+
+textarea,
+input[type='number'] {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid black; /* Dark border color */
+  border-radius: 5px;
+  box-sizing: border-box;
+  background-color: white; /* Dark input background color */
+  color: black; /* Light text color */
+}
+
+input[type='submit'] {
+  width: 100%;
+  padding: 10px;
+  border: none;
+  background-color: black; /* Button color */
+  color: #fff; /* Light text color */
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+input[type='submit']:hover {
+  background-color: rgb(72, 22, 22); /* Button hover color */
+}
+
+#output {
+  max-width: 400px;
+  margin: 20px auto;
+  background-color: whitesmoke; /* Dark output background color */
+  padding: 20px;
+  border-radius: 10px;
+  border: 2px solid black;
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); /* White shadow */
+}
+#plaintext{
+  max-width: 400px;
+  margin: 20px ;
+  background-color: whitesmoke; /* Dark output background color */
+  padding: 20px;
+  border-radius: 10px;
+  border: 2px solid black;
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); /* White shadow */
+}
+.output-heading {
+  font-size: 1.2em;
+  color: chocolate; /* Light heading color */
+  margin-bottom: 10px;
+}

Vanilla-JS-Projects/Intermediate/Ceaser-Cipher/index.html

@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang='en'>
+<head>
+  <meta charset='utf-8'>
+  <title>Caesar Cipher</title>
+  <link rel="stylesheet" href="style.css" id="theme-style">
+</head>
+<body>
+   <header>
+    <h1>Caesar Cipher</h1>
+    <button id="theme-toggle">🌗</button>
+   </header>
+
+
+
+<div class="container">
+
+    <div>
+    <form>
+        <label>Plaintext:</label>
+
+        <textarea name='plaintext' placeholder="Add Plaintext here" rows="8" cols="50"></textarea>
+        <label>Shift:</label>
+        <input type='number' name='shift' value='5' min='1' max='26'>
+        <input type='submit' value='Encrypt'>
+      </form>
+      <h2>Output</h2>
+      <div id='output'>
+      </div>
+    </div>
+
+    <div>
+        <form>
+            <label for="ciphertext">Ciphertext:</label>
+            <textarea  id="ciphertext" name="ciphertext" type="text" placeholder="Add Ciphertext here" rows="8" cols="50"></textarea>
+
+            <!-- <input type="text" id="ciphertext" name="ciphertext" > -->
+            <br>
+            <label for="shift">Shift:</label>
+            <input type="number" id="shift" name="shift" min="1" max="25" value="3">
+            <br>
+            <button type="button" id="decrypt-button">Decrypt</button>
+          </form>
+          <h2>Output</h2>
+          <div id="plaintext"></div>
+      </div>
+
+</div>
+
+
+
+  <script src='main.js'></script>
+</body>
+</html> 

Vanilla-JS-Projects/Intermediate/Ceaser-Cipher/main.js

@@ -0,0 +1,67 @@
+// main.js
+const ALPHABET = 'abcdefghijklmnopqrstuvwxyz';
+
+const form = document.querySelector('form');
+const plaintextInput = document.querySelector('textarea[name="plaintext"]');
+const shiftInput = document.querySelector('input[name="shift"]');
+const outputDiv = document.querySelector('#output');
+const themeToggle = document.getElementById('theme-toggle');
+const themeStyle = document.getElementById('theme-style');
+const decryptButton = document.getElementById('decrypt-button');
+const ciphertextInput = document.getElementById('ciphertext');
+const decryptShiftInput = document.getElementById('shift');
+const plaintextOutputDiv = document.getElementById('plaintext');
+
+// Theme changing code
+themeToggle.addEventListener('click', function() {
+  if (themeStyle.getAttribute('href') === 'style.css') {
+    themeStyle.setAttribute('href', 'cipher.css');
+  } else {
+    themeStyle.setAttribute('href', 'style.css');
+  }
+});
+
+// Encrypt code
+function encrypt(char, shift) {
+  if (ALPHABET.includes(char.toLowerCase())) {
+    const position = ALPHABET.indexOf(char.toLowerCase());
+    const newPosition = (position + shift) % 26;
+    return ALPHABET[newPosition];
+  } else {
+    return char;
+  }
+}
+
+function encryptText(text, shift) {
+  return [...text].map(char => encrypt(char, shift)).join('');
+}
+
+form.addEventListener('submit', (event) => {
+  event.preventDefault();
+  const plaintext = plaintextInput.value;
+  const shift = Number(shiftInput.value);
+  const ciphertext = encryptText(plaintext, shift);
+  outputDiv.innerHTML = ciphertext;
+});
+
+// Decrypt code
+function decrypt(char, shift) {
+  if (ALPHABET.includes(char.toLowerCase())) {
+    const position = ALPHABET.indexOf(char.toLowerCase());
+    const newPosition = (position - shift + 26) % 26;
+    return ALPHABET[newPosition];
+  } else {
+    return char;
+  }
+}
+
+function decryptText(text, shift) {
+  return [...text].map(char => decrypt(char, shift)).join('');
+}
+
+decryptButton.addEventListener('click', () => {
+  const ciphertext = ciphertextInput.value;
+  const shift = Number(decryptShiftInput.value);
+  const plaintext = decryptText(ciphertext, shift);
+  plaintextOutputDiv.textContent = plaintext;
+});