Skip to content

Commit cb5850c

Browse files
Avdhesh-VarshneyAvdhesh-Varshney
authored
Merge pull request #147 from Damini2004/Project
Project Ceaser Cipher Conversion Project #127
2 parents ccea2fd + 7984fc0 commit cb5850c

File tree

6 files changed

+417
-0
lines changed

6 files changed

+417
-0
lines changed

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

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<h1 align='center'><b>💥 Ceaser Cipher Conversion 💥</b></h1>
2+
3+
<!-- -------------------------------------------------------------------------------------------------------------- -->
4+
5+
<h3 align='center'>Tech Stack Used 🎮</h3>
6+
7+
8+
<div align='center'>
9+
10+
![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
11+
![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
12+
![Javascript](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
13+
14+
</div>
15+
16+
17+
![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
18+
19+
<!-- -------------------------------------------------------------------------------------------------------------- -->
20+
21+
## :zap: Description 📃
22+
23+
<div>
24+
<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>
25+
</div>
26+
27+
<!-- -------------------------------------------------------------------------------------------------------------- -->
28+
29+
## :zap: How to run it? 🕹️
30+
31+
<div>
32+
<p>To run this project locally, follow these steps:
33+
34+
- Fork this repository.
35+
- Clone the forked repository.
36+
- Open index.html in your web browser to start your culinary exploration.
37+
38+
</p>
39+
</div>
40+
41+
42+
<!-- -------------------------------------------------------------------------------------------------------------- -->
43+
44+
## :zap: Screenshots 📸
45+
<!-- add the screenshot of the project (Mandatory) -->
46+
<img src='screenshot.webp'>
47+
48+
![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
49+
50+
<!-- -------------------------------------------------------------------------------------------------------------- -->
51+
52+
<h4 align='center'>Developed By <b><i>Damini Chachane</i></b></h4>
53+
<p align='center'>
54+
<a href='linkedin.com/in/damini-chachane-82a210252'>
55+
<img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
56+
</a>
57+
<a href='https://github.com/Damini2004'>
58+
<img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
59+
</a>
60+
</p>
61+
62+
<h4 align='center'>Happy Coding 🧑‍💻</h4>
63+
64+
<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>

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

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background-color: whitesmoke; /* Dark background color */
4+
color: black; /* Light text color */
5+
margin: 0;
6+
padding: 0;
7+
}
8+
header{
9+
display: flex;
10+
justify-content: space-between;
11+
padding: 20px;
12+
font-size: 20px;
13+
}
14+
h1, h2 {
15+
text-align: center;
16+
color: black; /* Light heading color */
17+
}
18+
#theme-toggle{
19+
width: 50px;
20+
height: 50px;
21+
justify-items: center;
22+
}
23+
.container{
24+
display: flex;
25+
justify-content: space-around;
26+
padding: 50px;
27+
}
28+
#decrypt-button{
29+
width: 100%;
30+
padding: 10px;
31+
border: none;
32+
background-color: black; /* Button color */
33+
color: #fff; /* Light text color */
34+
border-radius: 5px;
35+
cursor: pointer;
36+
transition: background-color 0.3s;
37+
}
38+
form {
39+
40+
border:2px solid black;
41+
box-shadow: 2px black; /* White shadow */
42+
max-width: 400px;
43+
margin: 20px ;
44+
background:whitesmoke;
45+
box-shadow: 32px 32pxpx 32px 32px rgba(21, 26, 106, 0.37);/* Dark form background color */
46+
backdrop-filter: blur(20px);
47+
-webkit-backdrop-filter: blur(20px);
48+
padding: 20px;
49+
box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
50+
}
51+
52+
label {
53+
font-weight: bold;
54+
display: block;
55+
margin-bottom: 5px;
56+
color: black; /* Light label color */
57+
}
58+
59+
textarea,
60+
input[type='number'] {
61+
width: 100%;
62+
padding: 10px;
63+
margin-bottom: 10px;
64+
border: 1px solid black; /* Dark border color */
65+
border-radius: 5px;
66+
box-sizing: border-box;
67+
background-color: white; /* Dark input background color */
68+
color: black; /* Light text color */
69+
}
70+
71+
input[type='submit'] {
72+
width: 100%;
73+
padding: 10px;
74+
border: none;
75+
background-color: black; /* Button color */
76+
color: #fff; /* Light text color */
77+
border-radius: 5px;
78+
cursor: pointer;
79+
transition: background-color 0.3s;
80+
}
81+
82+
input[type='submit']:hover {
83+
background-color: rgb(72, 22, 22); /* Button hover color */
84+
}
85+
86+
#output {
87+
max-width: 400px;
88+
margin: 20px auto;
89+
background-color: whitesmoke; /* Dark output background color */
90+
padding: 20px;
91+
border-radius: 10px;
92+
border: 2px solid black;
93+
box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); /* White shadow */
94+
}
95+
#plaintext{
96+
max-width: 400px;
97+
margin: 20px ;
98+
background-color: whitesmoke; /* Dark output background color */
99+
padding: 20px;
100+
border-radius: 10px;
101+
border: 2px solid black;
102+
box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); /* White shadow */
103+
}
104+
.output-heading {
105+
font-size: 1.2em;
106+
color: chocolate; /* Light heading color */
107+
margin-bottom: 10px;
108+
}

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

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!doctype html>
2+
<html lang='en'>
3+
<head>
4+
<meta charset='utf-8'>
5+
<title>Caesar Cipher</title>
6+
<link rel="stylesheet" href="style.css" id="theme-style">
7+
</head>
8+
<body>
9+
<header>
10+
<h1>Caesar Cipher</h1>
11+
<button id="theme-toggle">🌗</button>
12+
</header>
13+
14+
15+
16+
<div class="container">
17+
18+
<div>
19+
<form>
20+
<label>Plaintext:</label>
21+
22+
<textarea name='plaintext' placeholder="Add Plaintext here" rows="8" cols="50"></textarea>
23+
<label>Shift:</label>
24+
<input type='number' name='shift' value='5' min='1' max='26'>
25+
<input type='submit' value='Encrypt'>
26+
</form>
27+
<h2>Output</h2>
28+
<div id='output'>
29+
</div>
30+
</div>
31+
32+
<div>
33+
<form>
34+
<label for="ciphertext">Ciphertext:</label>
35+
<textarea id="ciphertext" name="ciphertext" type="text" placeholder="Add Ciphertext here" rows="8" cols="50"></textarea>
36+
37+
<!-- <input type="text" id="ciphertext" name="ciphertext" > -->
38+
<br>
39+
<label for="shift">Shift:</label>
40+
<input type="number" id="shift" name="shift" min="1" max="25" value="3">
41+
<br>
42+
<button type="button" id="decrypt-button">Decrypt</button>
43+
</form>
44+
<h2>Output</h2>
45+
<div id="plaintext"></div>
46+
</div>
47+
48+
</div>
49+
50+
51+
52+
<script src='main.js'></script>
53+
</body>
54+
</html>

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

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
// main.js
2+
const ALPHABET = 'abcdefghijklmnopqrstuvwxyz';
3+
4+
const form = document.querySelector('form');
5+
const plaintextInput = document.querySelector('textarea[name="plaintext"]');
6+
const shiftInput = document.querySelector('input[name="shift"]');
7+
const outputDiv = document.querySelector('#output');
8+
const themeToggle = document.getElementById('theme-toggle');
9+
const themeStyle = document.getElementById('theme-style');
10+
const decryptButton = document.getElementById('decrypt-button');
11+
const ciphertextInput = document.getElementById('ciphertext');
12+
const decryptShiftInput = document.getElementById('shift');
13+
const plaintextOutputDiv = document.getElementById('plaintext');
14+
15+
// Theme changing code
16+
themeToggle.addEventListener('click', function() {
17+
if (themeStyle.getAttribute('href') === 'style.css') {
18+
themeStyle.setAttribute('href', 'cipher.css');
19+
} else {
20+
themeStyle.setAttribute('href', 'style.css');
21+
}
22+
});
23+
24+
// Encrypt code
25+
function encrypt(char, shift) {
26+
if (ALPHABET.includes(char.toLowerCase())) {
27+
const position = ALPHABET.indexOf(char.toLowerCase());
28+
const newPosition = (position + shift) % 26;
29+
return ALPHABET[newPosition];
30+
} else {
31+
return char;
32+
}
33+
}
34+
35+
function encryptText(text, shift) {
36+
return [...text].map(char => encrypt(char, shift)).join('');
37+
}
38+
39+
form.addEventListener('submit', (event) => {
40+
event.preventDefault();
41+
const plaintext = plaintextInput.value;
42+
const shift = Number(shiftInput.value);
43+
const ciphertext = encryptText(plaintext, shift);
44+
outputDiv.innerHTML = ciphertext;
45+
});
46+
47+
// Decrypt code
48+
function decrypt(char, shift) {
49+
if (ALPHABET.includes(char.toLowerCase())) {
50+
const position = ALPHABET.indexOf(char.toLowerCase());
51+
const newPosition = (position - shift + 26) % 26;
52+
return ALPHABET[newPosition];
53+
} else {
54+
return char;
55+
}
56+
}
57+
58+
function decryptText(text, shift) {
59+
return [...text].map(char => decrypt(char, shift)).join('');
60+
}
61+
62+
decryptButton.addEventListener('click', () => {
63+
const ciphertext = ciphertextInput.value;
64+
const shift = Number(decryptShiftInput.value);
65+
const plaintext = decryptText(ciphertext, shift);
66+
plaintextOutputDiv.textContent = plaintext;
67+
});

‎Vanilla-JS-Projects/Intermediate/Ceaser-Cipher/screenshot.webp

33 KB
Binary file not shown.

0 commit comments

Comments
 (0)