Skip to content

Commit 0b3539a

Browse files
SoNiC-HeRESoNiC-HeRE
committed
Initial Commit
0 parents  commit 0b3539a

File tree

3 files changed

+330
-0
lines changed

3 files changed

+330
-0
lines changed

‎index.html

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Document</title>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
12+
<body>
13+
<div id="main">
14+
<h1>Text <span>↑</span> Emoji</h1>
15+
<div id="endec-div">
16+
<h3 id="enc-btn">Encrypt Text <span>🔒</span></h3>
17+
<h3 id="dec-btn">Decrypt Emojis <span>🔓</span></h3>
18+
</div>
19+
<div id="encryption">
20+
<h5>1. Type a message</h5>
21+
<textarea placeholder="Message to be encrypted" name="" id="textmsg" cols="30" rows="10"></textarea>
22+
<h5>2. Set a password</h5>
23+
<input placeholder="Example: 1234" type="password" name="" id="password">
24+
<h5>3. Encrypt message</h5>
25+
<button id="encrypt-btn"><span>🔒</span>Encrypt Text</button>
26+
</div>
27+
<div id="decryption">
28+
<h5>1. Paste encrypted message</h5>
29+
<textarea placeholder="Message to be decrypted" name="" id="emojimsg" cols="30" rows="10"></textarea>
30+
<h5>2. Type a password</h5>
31+
<input placeholder="Example: 1234 (Same as Encryption Pass)" type="password" name="" id="finalpassword">
32+
<h5>3. Decrypt Emojis</h5>
33+
<button id="decrypt-btn"><span>🔓</span>Decrypt Text</button>
34+
</div>
35+
<div id="result">
36+
</div>
37+
</div>
38+
<script src="script.js"></script>
39+
</body>
40+
41+
</html>

‎script.js

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
const text = document.querySelector("#textmsg")
2+
const password = document.querySelector('#password')
3+
const result = document.querySelector("#result")
4+
var clutter = "";
5+
var parinam = "";
6+
7+
function encryption() {
8+
9+
document.querySelector("#encrypt-btn").addEventListener("click", function () {
10+
var pass = document.getElementById("password").value;
11+
var input = document.getElementById("textmsg").value;
12+
var str = input.split("")
13+
str.forEach(element => {
14+
clutter += `&#128${(element.charCodeAt())} `
15+
});
16+
17+
document.querySelector("#result").innerHTML = clutter
18+
19+
var dataarr = [];
20+
if(JSON.parse(localStorage.getItem('data1'))){
21+
dataarr = JSON.parse(localStorage.getItem('data1'));
22+
dataarr.push({"pass":pass, "input":input, "clutter":clutter})
23+
}else{
24+
dataarr = [{"pass":pass,"input":input,"clutter":clutter}]
25+
}
26+
localStorage.setItem(`data1`, JSON.stringify(dataarr))
27+
})
28+
29+
}
30+
31+
function decryption() {
32+
document.querySelector("#decrypt-btn").addEventListener("click", function () {
33+
var clutter2 = '';
34+
var input2 = document.querySelector("#emojimsg").value
35+
var finalPass = document.querySelector("#finalpassword").value
36+
var user = JSON.parse(localStorage.getItem('data1'))
37+
console.log(user)
38+
var str2 = input2.split(" ")
39+
str2.forEach(element => {
40+
clutter2 += `&#${(element.codePointAt(0))} `
41+
});
42+
var found;
43+
for(let i of user){
44+
if(i.clutter == clutter2){
45+
found = i;
46+
}
47+
}
48+
if (found.clutter === clutter2) {
49+
console.log("jay ho")
50+
document.querySelector("#result").style.display = `block`
51+
document.querySelector("#result").style.color = `#eee`
52+
53+
document.querySelector("#result").innerHTML = found.input
54+
} else {
55+
document.querySelector("#result").style.display = `block`
56+
document.querySelector("#result").style.color = `red`
57+
document.querySelector("#result").innerHTML = "Wrong password!"
58+
}
59+
})
60+
61+
}
62+
63+
64+
function btnClicking() {
65+
66+
document.querySelector("button").addEventListener("click", function () {
67+
document.querySelector("#result").style.display = "block"
68+
})
69+
document.querySelector("#dec-btn").addEventListener("click", function () {
70+
document.querySelector("#result").style.display = "none"
71+
document.querySelector("#decryption").style.display = "block"
72+
document.querySelector("#encryption").style.display = "none"
73+
document.querySelector("#dec-btn").style.backgroundColor = "#333"
74+
document.querySelector("#enc-btn").style.backgroundColor = "#222"
75+
document.querySelector("#main>h1 span").style.rotate = '270deg'
76+
})
77+
document.querySelector("#enc-btn").addEventListener("click", function () {
78+
document.querySelector("#decryption").style.display = "none"
79+
document.querySelector("#result").style.display = "none"
80+
document.querySelector("#encryption").style.display = "block"
81+
document.querySelector("#dec-btn").style.backgroundColor = "#222"
82+
document.querySelector("#enc-btn").style.backgroundColor = "#333"
83+
document.querySelector("#main>h1 span").style.rotate = '90deg'
84+
85+
})
86+
}
87+
88+
encryption();
89+
90+
decryption()
91+
92+
btnClicking();

‎style.css

+197
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family:'Roboto';
6+
color: #fff;
7+
font-weight: 800;
8+
}
9+
html,
10+
body {
11+
height: 100%;
12+
width: 100%;
13+
}
14+
15+
#main{
16+
min-height: 100%;
17+
width: 100%;
18+
background-color: #111;
19+
padding: 100px 0;
20+
display:flex;
21+
align-items: center;
22+
justify-content: center;
23+
flex-direction: column;
24+
}
25+
#main>h1{
26+
font-size: 48px;
27+
display: flex;
28+
align-items: center;
29+
}
30+
#main>h1 span{
31+
margin: 0 55px 0 55px;
32+
display: flex;
33+
align-items: center;
34+
height: 40px;
35+
rotate: 90deg;
36+
transition: 0.3s ease;
37+
}
38+
39+
#main #endec-div{
40+
display: flex;
41+
align-items: center;
42+
justify-content: space-between;
43+
background-color: #222;
44+
border-radius: 10px;
45+
padding: 8px 8px;
46+
width: 25%;
47+
margin: 35px 0;
48+
}
49+
#endec-div h3{
50+
font-size: 17px;
51+
display: flex;
52+
border-radius: 8px;
53+
font-weight: 200;
54+
align-items: center;
55+
cursor: pointer;
56+
padding: 12px 10px;
57+
transition: 0.2s ease;
58+
}
59+
#enc-btn{
60+
background-color: #333;
61+
}
62+
#endec-div h3 span{
63+
display: flex;
64+
align-items: center;
65+
margin-left: 5px;
66+
margin-bottom: 3px;
67+
}
68+
69+
#encryption{
70+
width: 45%;
71+
display: flex;
72+
align-items: flex-start;
73+
flex-direction: column;
74+
justify-content: space-around;
75+
}
76+
77+
#encryption h5{
78+
font-size: 16px;
79+
font-weight: 300;
80+
color: #6e6e6e;
81+
margin-bottom: 13px;
82+
}
83+
#encryption textarea{
84+
width: 100%;
85+
height: 70px;
86+
border: 1px solid #343434;
87+
padding: 10px;
88+
margin-bottom: 30px;
89+
border-radius: 8px;
90+
font-size: 17px;
91+
outline: none;
92+
font-weight: 500;
93+
background-color: #1C1C1C;
94+
}
95+
#encryption input{
96+
width: 100%;
97+
border: 1px solid #343434;
98+
padding: 10px;
99+
margin-bottom: 50px;
100+
border-radius: 8px;
101+
font-size: 16px;
102+
outline: none;
103+
font-weight: 500;
104+
background-color: #1C1C1C;
105+
}
106+
107+
#encryption button{
108+
display: flex;
109+
align-items: center;
110+
color: #6e6e6e;
111+
background-color: #1C1C1C;
112+
113+
border: none;
114+
width: 100%;
115+
justify-content: center;
116+
padding: 10px;
117+
border-radius: 10px;
118+
color: #eee;
119+
font-size: 17px;
120+
font-weight: 100;
121+
}
122+
button span{
123+
display: flex;
124+
margin-right: 20px;
125+
margin-bottom: 6px;
126+
}
127+
128+
#decryption{
129+
width: 45%;
130+
display: flex;
131+
align-items: flex-start;
132+
flex-direction: column;
133+
justify-content: space-around;
134+
display: none;
135+
}
136+
137+
#decryption h5{
138+
font-size: 16px;
139+
font-weight: 300;
140+
color: #6e6e6e;
141+
margin-bottom: 13px;
142+
}
143+
#decryption textarea{
144+
width: 100%;
145+
height: 70px;
146+
border: 1px solid #343434;
147+
padding: 10px;
148+
margin-bottom: 30px;
149+
border-radius: 8px;
150+
font-size: 17px;
151+
outline: none;
152+
font-weight: 500;
153+
background-color: #1C1C1C;
154+
}
155+
#decryption input{
156+
width: 100%;
157+
border: 1px solid #343434;
158+
padding: 10px;
159+
margin-bottom: 50px;
160+
border-radius: 8px;
161+
font-size: 16px;
162+
outline: none;
163+
font-weight: 500;
164+
background-color: #1C1C1C;
165+
}
166+
167+
#decryption button{
168+
display: flex;
169+
align-items: center;
170+
color: #6e6e6e;
171+
background-color: #1C1C1C;
172+
173+
border: none;
174+
width: 100%;
175+
justify-content: center;
176+
padding: 10px;
177+
border-radius: 10px;
178+
color: #eee;
179+
font-size: 17px;
180+
font-weight: 100;
181+
}
182+
button span{
183+
display: flex;
184+
margin-right: 10px;
185+
margin-bottom: 6px;
186+
}
187+
188+
#result{
189+
padding: 20px;
190+
border-radius: 10px;
191+
font-size: 18px;
192+
background-color: #1C1C1C;
193+
border: 1px solid #343434;
194+
width: 45%;
195+
display: none;
196+
margin-top: 40px;
197+
}

0 commit comments

Comments
 (0)