Skip to content

Commit 59d30f7

Browse files
mrp500mrp500
committed
Encriptador concluido!
1 parent e49f976 commit 59d30f7

File tree

3 files changed

+72
-40
lines changed

3 files changed

+72
-40
lines changed

‎index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
</script>
2222
</head>
2323
<body>
24-
<h1><img class="candado" src="imagenes/candado.svg" draggable="false" oncontextmenu="return false" alt="Candado">
24+
<h1><img class="candado" src="imagenes/candado.svg" alt="Candado">
2525
<span class ="encriptador">Encriptador</span><br>
2626
<span class = "desencriptador">Desencriptador</span>
2727
</h1>
@@ -39,7 +39,7 @@ <h1><img class="candado" src="imagenes/candado.svg" draggable="false" oncontextm
3939
</div>
4040
<div class="output">
4141
<div class="detective">
42-
<img id="clickable-image" src="imagenes/detective.svg" draggable="false" oncontextmenu="return false" alt="Detective" onclick="convertToTextArea();">
42+
<img id="clickable-image" src="imagenes/detective.svg" alt="Detective" onclick="convertToTextArea();">
4343
</div>
4444
<textarea id="result" rows="20" cols="32" class="campotransparente-dos" onclick="convertToTextArea();"></textarea><br>
4545
<div class="divbutton-tres">

‎script.js

Lines changed: 36 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,3 @@
1-
document.getElementById('clickable-image').addEventListener('click', function() {
2-
document.querySelector('.button-tres').style.visibility = 'visible';
3-
});
4-
5-
document.getElementById('result').addEventListener('click', function() {
6-
document.querySelector('.button-tres').style.visibility = 'visible';
7-
});
8-
console.log()
9-
101
document.getElementById('result').addEventListener('blur', function() {
112
var resultTextArea = document.getElementById('result');
123
var image = document.getElementById('clickable-image');
@@ -59,35 +50,48 @@ function decryptText() {
5950
}
6051
}
6152

62-
document.querySelector('.button-tres').addEventListener('click', function() {
53+
document.getElementById('result').addEventListener('input', function() {
6354
var image = document.getElementById('clickable-image');
64-
image.style.display = 'none';
55+
var resultTextArea = document.getElementById('result');
56+
if (resultTextArea.value.trim() !== '') {
57+
image.style.display = 'none';
58+
} else {
59+
image.style.display = 'block';
60+
}
6561
});
6662

63+
/*document.getElementById('result').addEventListener('input', function() {
64+
var button = document.querySelector('.button-tres');
65+
var resultTextArea = document.getElementById('result');
66+
if (resultTextArea.value.trim() !== '') {
67+
button.style.visibility = 'visible'; // Hacer visible el botón cuando se empiece a escribir en el área de texto
68+
} else {
69+
button.style.visibility = 'hidden'; // Ocultar el botón si el área de texto está vacía
70+
}
71+
});*/
6772

68-
function convertToTextArea() {
69-
var image = document.getElementById('clickable-image');
70-
var textArea = document.getElementById('result');
71-
image.style.display = 'none';
72-
textArea.style.display = 'block';
73-
textArea.focus();
74-
}
75-
76-
77-
function hideImageAndFocusTextarea(event) {
73+
document.getElementById('result').addEventListener('input', function() {
7874
var image = document.getElementById('clickable-image');
79-
var textarea = document.getElementById('result');
80-
image.style.display = 'none';
81-
textarea.focus();
82-
}
83-
84-
document.getElementById('clickable-image').onclick = hideImageAndFocusTextarea;
85-
86-
document.getElementById('result').addEventListener('blur', function() {
75+
var button = document.querySelector('.button-tres');
8776
var resultTextArea = document.getElementById('result');
88-
var image = document.getElementById('clickable-image');
89-
if (resultTextArea.value.trim() === '') {
90-
image.style.display = 'block';
77+
if (resultTextArea.value.trim() !== '') {
78+
button.style.visibility = 'visible';
79+
image.style.display = 'none'; // Ocultar la imagen del detective si el área de texto tiene cualquier tipo de actividad
80+
} else {
81+
button.style.visibility = 'hidden';
82+
image.style.display = 'block'; // Mostrar la imagen del detective si el área de texto está vacía
9183
}
9284
});
9385

86+
document.getElementById('result').addEventListener('change', function() {
87+
var image = document.getElementById('clickable-image');
88+
var button = document.querySelector('.button-tres');
89+
var resultTextArea = document.getElementById('result');
90+
if (resultTextArea.value.trim() !== '') {
91+
button.style.visibility = 'visible';
92+
image.style.display = 'none'; // Ocultar la imagen del detective si el área de texto tiene cualquier tipo de actividad
93+
} else {
94+
button.style.visibility = 'hidden';
95+
image.style.display = 'block'; // Mostrar la imagen del detective si el área de texto está vacía
96+
}
97+
});

‎styles.css

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,12 @@ h1 {
66
margin-top: 10px;
77
margin-bottom: 20px;
88
font-weight: bold;
9+
pointer-events: none;
10+
user-select: none;
11+
-webkit-user-select: none;
12+
-moz-user-select: none;
13+
-ms-user-select: none;
14+
user-select: none;
915
}
1016

1117
.desencriptador {
@@ -17,6 +23,8 @@ h1 {
1723
height: 60px;
1824
transform: translate(0px, 35px);
1925
filter: invert(58%) sepia(34%) saturate(841%) hue-rotate(189deg) brightness(115%) contrast(101%);
26+
pointer-events: none;
27+
user-select: none;
2028
-webkit-user-select: none;
2129
-moz-user-select: none;
2230
-ms-user-select: none;
@@ -40,11 +48,17 @@ body {
4048
font-family: 'Montserrat', sans-serif;
4149
font-weight: bold;
4250
background-color: none;
51+
user-select: none;
52+
-webkit-user-select: none;
53+
-moz-user-select: none;
54+
-ms-user-select: none;
55+
user-select: none;
4356
}
4457

4558
.campotransparente-uno::placeholder {
4659
color: rgb(82, 142, 255, 0.75);
47-
60+
pointer-events: none;
61+
user-select: none;
4862
}
4963

5064
.output {
@@ -60,6 +74,11 @@ body {
6074
background-color: none;
6175
border-radius: 50px;
6276
box-shadow: 2px 5px 10px 2px rgba(0, 0, 0, 0.5);
77+
user-select: none;
78+
-webkit-user-select: none;
79+
-moz-user-select: none;
80+
-ms-user-select: none;
81+
user-select: none;
6382
}
6483

6584
.campotransparente-uno {
@@ -107,10 +126,7 @@ body {
107126
position: absolute;
108127
margin-left: 6%;
109128
margin-top: 6%;
110-
-webkit-user-select: none;
111-
-moz-user-select: none;
112-
-ms-user-select: none;
113-
user-select: none;
129+
pointer-events: none;
114130
}
115131

116132
p {
@@ -119,6 +135,12 @@ p {
119135
margin-top: 15px;
120136
margin-bottom: 10px;
121137
text-align: center;
138+
pointer-events: none;
139+
user-select: none;
140+
-webkit-user-select: none;
141+
-moz-user-select: none;
142+
-ms-user-select: none;
143+
user-select: none;
122144
}
123145

124146
.circulo-exclamacion {
@@ -148,7 +170,9 @@ p {
148170
}
149171

150172
.button-uno:hover {
173+
transition: 0.1s all;
151174
background-color: rgb(207, 66, 0);
175+
transform: scale(1.1);
152176
}
153177

154178
.button-dos {
@@ -170,7 +194,9 @@ p {
170194
}
171195

172196
.button-dos:hover {
197+
transition: 0.1s all;
173198
background-color: rgb(207, 66, 0);
199+
transform: scale(1.1);
174200
}
175201

176202
.divbutton-tres {
@@ -204,7 +230,9 @@ p {
204230
}
205231

206232
.button-tres:hover {
207-
background-color: rgb(207, 66, 0); /* Puedes utilizar cualquier color deseado */
233+
transition: 0.1s all;
234+
background-color: rgb(207, 66, 0);
235+
transform: scale(1.1);
208236
}
209237

210238
@media screen and (max-width: 720px) {

0 commit comments

Comments
 (0)