Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit c97d834

Browse files
committed
Terminal improvement, add button typing action
1 parent dede204 commit c97d834

File tree

3 files changed

+102
-58
lines changed

3 files changed

+102
-58
lines changed

‎css/style.css‎

Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -59,27 +59,29 @@ main {
5959
}
6060

6161
.console-area {
62-
height: 250px;
62+
display: flex;
63+
flex-direction: column;
64+
font-size: .8rem;
65+
height: 300px;
6366
padding: 10px 20px;
6467
font-family: 'Source Code Pro', monospace;
6568
background-color: hsl(220, 13%, 18%);
66-
overflow-y: auto;
69+
overflow: auto;
6770
color: #eee;
6871
font-size: .8rem;
69-
letter-spacing: .5px;
72+
letter-spacing: .5px!important;
7073
}
7174

72-
.console-area .line,
7375
.console-area .current-line {
7476
width: 100%;
75-
margin-top: 10px;
77+
margin-top: 15px;
7678
display: flex;
7779
flex-direction: row;
7880
}
7981

80-
.console-area .line {
81-
display: flex;
82-
flex-direction: column;
82+
.console-area >* {
83+
margin-top:5px;
84+
width:100%;
8385
}
8486

8587
.empty-p {
@@ -96,12 +98,14 @@ main {
9698
}
9799

98100
.error, .success {
99-
margin-top: 10px;
101+
margin-top: 5px;
100102
margin-left: 15px;
101103
}
102104

103105
.console-area textarea {
104-
font-size: .8rem;
106+
height: 43.4px;
107+
overflow: auto;
108+
font-family: 'Source Code Pro', monospace !important;
105109
width: 100%;
106110
resize: none;
107111
background-color: transparent;
@@ -118,4 +122,17 @@ main {
118122

119123
footer {
120124
padding: 10px;
121-
}
125+
}
126+
127+
128+
129+
130+
.typed {
131+
white-space: nowrap;
132+
overflow: hidden;
133+
animation: type 5s steps(60, end);
134+
}
135+
136+
@keyframes type{
137+
from { width: 0; }
138+
}

‎index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,11 @@ <h3 id="instruccion"><span class="orden"></span> - <span class="titulo">Instrucc
2626
</div>
2727
<div id="terminal">
2828
<div class="console-area">
29-
<div class="line">
29+
<!-- <div > -->
3030
<p>Presiona Enter para ingresar tus comandos.</p>
31-
</div>
31+
<!-- </div> -->
3232
<div class="current-line">
33-
<span>$ </span><textarea id="console-input"></textarea>
33+
<span>$ </span><textarea id="console-input"spellcheck="false"></textarea>
3434
</div>
3535
</div>
3636
</div>

‎js/main.js‎

Lines changed: 71 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,27 @@
88

99
( () => {
1010
var file = `{
11-
"1": {
12-
"orden": "1.1",
13-
"titulo": "Got 15 minutes and want to learn Git?",
14-
"tareas": [
15-
"Git allows groups of people to work on the same documents (often code) at the same time, and without stepping on each other's toes. It's a distributed version control system.",
16-
"Our terminal prompt below is currently in a directory we decided to name 'octobox'. To initialize a Git repository here, type the following command:"
17-
],
18-
"comando": "git init",
19-
"errorMessages": ["fatal: Not a git repository (or any of the parent directories): .git"],
20-
"error": "Did not create a Git repo",
21-
"successMessages": ["Initialized empty Git repository in /.git/"],
22-
"success": "Success!",
23-
"repoStatus": "Empty"
11+
"config": {
12+
"errorComando": "comand not found"
13+
},
14+
"lecciones": {
15+
"1": {
16+
"orden": "1.1",
17+
"titulo": "Got 15 minutes and want to learn Git?",
18+
"tareas": [
19+
"Git allows groups of people to work on the same documents (often code) at the same time, and without stepping on each other's toes. It's a distributed version control system.",
20+
"Our terminal prompt below is currently in a directory we decided to name 'octobox'. To initialize a Git repository here, type the following command:"
21+
],
22+
"comando": "git init",
23+
"errorMessages": ["fatal: Not a git repository (or any of the parent directories): .git"],
24+
"alert": "Did not create a Git repo",
25+
"successMessages": ["Initialized empty Git repository in /.git/"],
26+
"repoStatus": "Empty"
27+
}
2428
}
2529
}`;
26-
var lecciones = JSON.parse(file);
30+
var lecciones = JSON.parse(file).lecciones;
31+
var config = JSON.parse(file).config;
2732

2833
var leccionActual = 0;
2934

@@ -59,51 +64,68 @@
5964
function mostrarResultado(passOrFail) {
6065
// Mostrar resultado
6166
if (passOrFail == 'pass') {
67+
// PASSED
6268
for (var i = 0; i < lecciones[leccionActual].successMessages.length; i++) {
6369
let parrafo = crearParrafo(lecciones[leccionActual].successMessages[i]);
64-
consoleArea.lastElementChild.appendChild(parrafo);
70+
consoleArea.appendChild(parrafo);
6571
}
66-
let parrafo = crearParrafo(lecciones[leccionActual].success);
72+
let parrafo = crearParrafo("Success!");
73+
console.log(parrafo);
6774
parrafo.classList.add('success');
68-
consoleArea.lastElementChild.appendChild(parrafo);
75+
consoleArea.appendChild(parrafo);
6976
// Siguiente leccion
7077
leccionActual++;
7178
} else {
72-
for (var i = 0; i < lecciones[leccionActual].errorMessages.length; i++) {
73-
let parrafo = crearParrafo(lecciones[leccionActual].errorMessages[i]);
74-
consoleArea.lastElementChild.appendChild(parrafo);
79+
// FAILED
80+
if (RegExp("(git)", "g").test(textarea.value.trim())) {
81+
for (var i = 0; i < lecciones[leccionActual].errorMessages.length; i++) {
82+
let parrafo = crearParrafo(lecciones[leccionActual].errorMessages[i]);
83+
consoleArea.appendChild(parrafo);
84+
}
85+
} else {
86+
let comandError = crearParrafo(textarea.value + ": " + config.errorComando);
87+
consoleArea.lastElementChild.appendChild(comandError);
88+
console.log(RegExp("(git)", "g").test(textarea.value.trim()));
7589
}
76-
let parrafo = crearParrafo(lecciones[leccionActual].error);
90+
// Red error message
91+
let parrafo = crearParrafo(lecciones[leccionActual].alert);
7792
parrafo.classList.add('error');
78-
consoleArea.lastElementChild.appendChild(parrafo);
93+
consoleArea.appendChild(parrafo);
7994
}
95+
// let parrafoVacio = document.createElement("p");
96+
// parrafoVacio.classList.add('empty-p');
97+
// consoleArea.appendChild(parrafoVacio);
8098
}
8199

82100
function cambiarLineaActual(passOrFail) {
83101
let lineaActual = document.querySelector('.current-line');
84102
let parrafo = crearParrafo("$ " + textarea.value);
85-
let parrafoVacio = document.createElement("p");
86-
parrafoVacio.classList.add('empty-p');
87-
parrafoVacio.classList.innerHTML = " ";
88-
lineaActual.innerHTML = "";
89-
90-
lineaActual.appendChild(parrafo);
91-
lineaActual.appendChild(parrafoVacio);
92-
lineaActual.classList.remove('current-line');
93-
lineaActual.classList.add('line');
94-
95-
mostrarResultado(passOrFail);
96-
97-
let div = document.createElement("div");
98-
consoleArea.appendChild(div);
99-
100-
consoleArea.lastElementChild.classList.add('current-line');
101-
lineaActual = document.querySelector('.current-line');
102-
lineaActual.innerHTML = '<span>$ </span><textarea id="console-input"></textarea>';
103-
// Ayudar listener para el textarea
104-
addTextareaListener();
105-
textarea.value = "";
106-
textarea.focus();
103+
parrafo.style.marginTop = "15px";
104+
parrafo.style.marginBottom = "15px";
105+
// let parrafoVacio = document.createElement("p");
106+
// parrafoVacio.classList.add('empty-p');
107+
consoleArea.removeChild(lineaActual);
108+
109+
consoleArea.appendChild(parrafo);
110+
// consoleArea.appendChild(parrafoVacio);
111+
consoleArea.classList.remove('current-line');
112+
// lineaActual.classList.add('line');
113+
114+
setTimeout(function() {
115+
mostrarResultado(passOrFail);
116+
let div = document.createElement("div");
117+
consoleArea.appendChild(div);
118+
119+
consoleArea.lastElementChild.classList.add('current-line');
120+
consoleArea.lastElementChild.style.marginTop = "15px";
121+
lineaActual = document.querySelector('.current-line');
122+
lineaActual.innerHTML = '<span>$ </span><textarea id="console-input" spellcheck="false"></textarea>';
123+
// Ayudar listener para el textarea
124+
addTextareaListener();
125+
textarea.value = "";
126+
textarea.focus();
127+
}, 2000);
128+
107129
}
108130

109131
function crearParrafo(texto) {
@@ -148,6 +170,11 @@
148170
});
149171
}
150172

173+
document.querySelector('.comando').addEventListener('click', () => {
174+
textarea.classList.add("typed");
175+
textarea.value = lecciones[leccionActual].comando;
176+
});
177+
151178
// Actualizar instrucciones al cargar
152179
actualizarInstrucciones();
153180
// Ayudar listener para el textarea al cargar

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /