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 43a2022

Browse files
committed
Add progress bar
1 parent 928d891 commit 43a2022

File tree

3 files changed

+100
-49
lines changed

3 files changed

+100
-49
lines changed

‎css/style.css‎

Lines changed: 36 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,26 @@
1313
}
1414

1515
body {
16+
display: flex;
17+
min-height: 100vh;
18+
flex-direction: column;
1619
background-color: #eee;
1720
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
1821
font-size: 16px;
1922
color: #333;
2023
}
2124

25+
main {
26+
flex: 1;
27+
}
28+
2229
.container {
30+
min-width: 600px;
2331
max-width: 900px;
2432
margin: 0 auto;
2533
}
2634

27-
main {
35+
#area-practica {
2836
display: flex;
2937
flex-direction: column;
3038
}
@@ -33,6 +41,27 @@ main {
3341
opacity: 0;
3442
}
3543

44+
h1 {
45+
text-align: center;
46+
}
47+
48+
/* =================================
49+
PROGRESS BAR
50+
=================================== */
51+
52+
#myProgress {
53+
width: 100%;
54+
background-color: #f44336;
55+
border-radius: 30px;
56+
}
57+
#myBar {
58+
width: 0%;
59+
height: 20px;
60+
background-color: #1976D2;
61+
margin: 10px 0 5px 0;
62+
border-radius: 30px;
63+
}
64+
3665
/* =================================
3766
AREA DE INSTRUCCIONES
3867
=================================== */
@@ -153,15 +182,14 @@ main {
153182
=================================== */
154183
#repository {
155184
height: 250px;
156-
margin: 5px 0 15px 0;
157185
font-size: .9rem;
186+
color: #FFF;
158187
}
159188

160189
#repository .header {
161190
display: flex;
162191
flex-direction: row;
163192
height: 10%;
164-
color: #FFF;
165193
background-color: #424242;
166194
border-top-right-radius: 2px;
167195
border-top-left-radius: 2px;
@@ -199,16 +227,16 @@ main {
199227
}
200228

201229
#repository .repo-status .unstaged {
202-
background-color: #009688;
230+
background-color: #3F51B5;
203231
}
204232

205233
#repository .repo-status .status {
206-
background-color: #4CAF50;
234+
background-color: #2196F3;
207235
border-bottom-left-radius: 2px;
208236
}
209237

210238
#repository .repo-status div.commits {
211-
background-color: #8BC34A;
239+
background-color: #03A9F4;
212240
border-bottom-right-radius: 2px;
213241
}
214242

@@ -257,12 +285,10 @@ main {
257285
=================================== */
258286

259287
footer {
260-
position: absolute;
261-
bottom: 0;
262-
width: 100%;
263288
font-size: .8rem;
264289
padding: 10px;
265-
background-color: #ddd;
290+
background-color: #03A9F4;
291+
color: #EEE;
266292
}
267293

268294
/* =================================

‎index.html‎

Lines changed: 46 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -13,53 +13,60 @@
1313
<link rel="stylesheet" href="./css/style.css">
1414
</head>
1515
<body>
16-
17-
<main class="container">
18-
<h1>GitHub Tutorial</h1>
19-
<section id="leccion">
20-
<div id="instrucciones">
21-
<h3 id="instruccion"><span class="orden"></span> - <span class="titulo">Instrucciones</span></h3>
22-
<div class="tareas">
23-
<!-- Tareas cargadas como parrafos desde JSON -->
24-
</div>
25-
<button class="comando"></button>
26-
</div>
27-
<div id="terminal">
28-
<div class="console-area">
29-
<!-- <div class="line"> -->
30-
<p>Presiona Enter para ingresar tus comandos.</p>
31-
<!-- </div> -->
32-
<div class="current-line">
33-
<span class="line-marker">満 </span><textarea id="console-input" autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck="false"></textarea>
34-
</div>
35-
</div>
16+
<main>
17+
<div class="container">
18+
<div id="myProgress">
19+
<div id="myBar"></div>
3620
</div>
21+
</div>
3722

38-
<div id="repository">
39-
<divclass="header">
40-
<pclass="title"></p>
41-
<div class="buttons">
42-
<i class="fa fa-window-minimize" aria-hidden="true"></i>
43-
<i class="fa fa-window-maximize" aria-hidden="true"></i>
44-
<iclass="fa fa-window-close close" aria-hidden="true"></i>
23+
<div id="area-practica" class="container">
24+
<h1>GitHub Tutorial</h1>
25+
<sectionid="leccion">
26+
<div id="instrucciones">
27+
<h3id="instruccion"><span class="orden"></span> - <spanclass="titulo">Instrucciones</span></h3>
28+
<div class="tareas">
29+
<!-- Tareas cargadas como parrafos desde JSON -->
4530
</div>
31+
<button class="comando"></button>
4632
</div>
47-
<div class="repo-status">
48-
<div class="unstaged">
49-
<h3>Unstaged Files</h3>
50-
<ul></ul>
33+
<div id="terminal">
34+
<div class="console-area">
35+
<!-- <div class="line"> -->
36+
<p>Presiona Enter para ingresar tus comandos.</p>
37+
<!-- </div> -->
38+
<div class="current-line">
39+
<span class="line-marker">満 </span><textarea id="console-input" autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck="false"></textarea>
40+
</div>
5141
</div>
52-
<div class="status">
53-
<h3>Status</h3>
54-
<ul></ul>
42+
</div>
43+
44+
<div id="repository">
45+
<div class="header">
46+
<p class="title"></p>
47+
<div class="buttons">
48+
<i class="fa fa-window-minimize" aria-hidden="true"></i>
49+
<i class="fa fa-window-maximize" aria-hidden="true"></i>
50+
<i class="fa fa-window-close close" aria-hidden="true"></i>
51+
</div>
5552
</div>
56-
<div class="commits">
57-
<h3>Commits</h3>
58-
<ul></ul>
53+
<div class="repo-status">
54+
<div class="unstaged">
55+
<h3>Unstaged Files</h3>
56+
<ul></ul>
57+
</div>
58+
<div class="status">
59+
<h3>Status</h3>
60+
<ul></ul>
61+
</div>
62+
<div class="commits">
63+
<h3>Commits</h3>
64+
<ul></ul>
65+
</div>
5966
</div>
6067
</div>
61-
</div>
62-
</section>
68+
</section>
69+
</div>
6370
</main>
6471

6572
<footer>

‎js/main.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,8 @@
7474
var config = JSON.parse(file).config;
7575

7676
var leccionActual = 1;
77+
var avanceActual = 0;
78+
var leccionPorcentaje = 100 / getObjLength(lecciones);
7779

7880
var consoleArea = document.querySelector('.console-area');
7981
var textarea = document.querySelector('#console-input');
@@ -153,6 +155,10 @@
153155
// Mostrar resultado
154156
if (passOrFail == 'pass') {
155157
// PASSED
158+
// Actualizar barra de progreso
159+
avanceActual += leccionPorcentaje;
160+
document.querySelector('#myBar').style.width = avanceActual + "%";
161+
// Mensajes de exito
156162
for (var i = 0; i < lecciones[leccionActual].successMessages.length; i++) {
157163
let parrafo = createElementNode("p", lecciones[leccionActual].successMessages[i]);
158164
consoleArea.appendChild(parrafo);
@@ -259,6 +265,18 @@
259265
}
260266
}
261267

268+
function getObjLength(obj) {
269+
let count = 0;
270+
let i;
271+
272+
for (i in obj) {
273+
if (obj.hasOwnProperty(i)) {
274+
count++;
275+
}
276+
}
277+
return count;
278+
}
279+
262280
document.querySelector('.comando').addEventListener('click', () => {
263281
textarea.value = "";
264282
textarea.classList.add("typed");

0 commit comments

Comments
(0)

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