Skip to content

Commit f607abb

Browse files
moT01moT01
committed
improve tips, add arrows
1 parent 8ff4521 commit f607abb

File tree

3 files changed

+233
-43
lines changed

3 files changed

+233
-43
lines changed

Diff for: ‎index.html

+32-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ <h1 class="header-text">Code Road</h1>
1212
</header>
1313

1414
<div class="title">
15-
Visualization of a Code Road tutorial repo
15+
Visualization of a Code Road tutorial
1616
<br />
1717
Click to see more info
1818
</div>
@@ -27,6 +27,16 @@ <h1 class="header-text">Code Road</h1>
2727
<div class="flow file file-config">config.json</div>
2828
<div class="flow repo repo-tutorials">Tutorials Repo</div>
2929
<div class="flow repo repo-coderoad">CodeRoad Repo</div>
30+
<div class="flow-line flow-line-1"></div>
31+
<div class="flow-line flow-line-2"></div>
32+
<div class="flow-line flow-line-3"></div>
33+
<div class="flow-line flow-line-4"></div>
34+
<div class="flow-line flow-line-5"></div>
35+
<div class="flow-line flow-line-6"></div>
36+
<div class="flow-line flow-line-7"></div>
37+
<div class="flow-line flow-line-8"></div>
38+
<div class="flow-line flow-line-9"></div>
39+
<div class="flow-line flow-line-10"></div>
3040
</div>
3141

3242
<div class="column-wrap">
@@ -217,5 +227,26 @@ <h1 class="header-text">Code Road</h1>
217227
</div>
218228
</main>
219229

230+
<footer class="footer">
231+
<a
232+
class="footer-link"
233+
target="_blank"
234+
href="https://github.com/coderoad/fcc-learn-npm"
235+
>View the Learn NPM repo</a
236+
>
237+
<a
238+
class="footer-link"
239+
target="_blank"
240+
href="https://github.com/coderoad/tutorials"
241+
>View the Tutorials repo</a
242+
>
243+
<a
244+
class="footer-link"
245+
target="_blank"
246+
href="https://github.com/coderoad/coderoad-vscode"
247+
>View the Code Road repo</a
248+
>
249+
</footer>
250+
220251
<script type="text/javascript" src="index.js"></script>
221252
</body>

Diff for: ‎index.js

+45-42
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,65 @@
1-
// tips
2-
const tipWrap = document.querySelectorAll('.tip-wrap')[0]
3-
const tipElement = document.querySelectorAll('.tip')[0]
4-
const closeTipBtn = document.querySelectorAll('.close-tip-btn')[0]
1+
/* GLOBAL FUNCTIONS */
2+
function updateTip(key, index) {
3+
let color
54

6-
// <a href="https://github.com/coderoad/fcc-learn-npm" target="_blank"
5+
if (key === 'commitTips') {
6+
color = 'rgb(255, 153, 255)'
7+
} else if (key === 'lessonTips') {
8+
color = 'rgb(255, 204, 153)'
9+
} else {
10+
color = 'rgb(0, 204, 0)'
11+
}
712

13+
closeTipBtn.style.backgroundColor = color
14+
tipWrap.style.visibility = 'visible'
15+
tipElement.innerHTML = tips[key][index]
16+
}
17+
18+
/* TIPS */
819
const tips = {
920
flowchartTips: [
10-
'A repo for a tutorial consists of two branches. A master branch and a version branch.', // npm repo
11-
'The tutorials repo has a list of all the config.json files from each repo.', // tutorials repo
12-
'The coderoad repo holds all the vscode extension code. It will create all the available tutorials from the list of config.json files.', // coderoad repo
13-
'You will create a CODEROAD.md file on the master branch (example below). It will be used to generate the config.json file.', // master branch
14-
'The version branch (e.g. v0.1.0) hold project files for users, testing files, and coderoad files.', // version branch
15-
'The important part of the project files are the commits used to create them. An individual lesson should have a commit for a test and another for a solution to that test. Click on the commits below to see where they fit in the markdown file.', // project files
16-
'This is a markdown file you will create to give your lessons instructions.', // coderoad file
17-
"A script is used to create this file. And it is linked to from the tutorials repo. It's what the coderoad extension uses to generate the tutorials", // config file
21+
'A repo for a tutorial consists of two branches. A master branch and a version branch.',
22+
'The tutorials repo has a list of config.json files, one from each tutorial.',
23+
'The Code Road repo holds all the vscode extension code. It uses the config.json files from the tutorials repo to create the lessons as shown below. Click them to see what markdown it is using.',
24+
'You will create a CODEROAD.md file on the master branch (example below).',
25+
'The version branch (e.g. v0.1.0) holds Code Road set up code, code to start users off with, and all the tests and solutions.',
26+
'The important part of the project files are the commits used to create them. An individual lesson should have a commit for a test and another for a solution to that test. Click on the commits below to see where they fit in the markdown file.',
27+
'The markdown file you create describes the structure of the lessons. A script will be used to create the config.json file from it.',
28+
'This file also lives on the master branch. It will be added to the tutorials repo.',
1829
],
1930
commitTips: [
2031
'Initial commit to the v0.1.0 branch. It includes the Code Road set up code. Commit hashes added in the setup area will be loaded when the lesson is loaded.',
2132
'A commit with a test goes in the "setup" to run against the users code.',
22-
'A commit for Code Road to run against the tests.',
23-
'A commit with a test for a new lesson. Added in the "setup" area.',
24-
'A commit with a solution for this lesson added to the "solution" area.',
25-
'Another test.',
26-
'Another solution.',
33+
'A solution commit for Code Road to run against the tests.',
34+
'A commit with a test for a new lesson. Added in the setup area.',
35+
'A commit with a solution for this lesson added to the solution area.',
36+
'Test commit for a new lesson.',
37+
'Solution commit for this lesson.',
2738
],
2839
lessonTips: [
29-
'Overview of the tutorial. Displays a list of the titles and a brief decription of each.',
30-
'Optional introduction page has no tests. It consists of a title, a snippet for the overview page, and text.',
31-
'First lesson with a test.',
32-
'You can add more steps for a single set of instructions.',
33-
'Last lesson.',
40+
'Overview of the tutorial. Displays a list of the titles and a brief decription of each. A single "#" in the markdown denotes this lesson.',
41+
'Optional introduction page has no tests. All the other lessons begin with "##" in the markdown.',
42+
'First lesson with a test. "### Step" inside a lesson is where you describe tests, solutions, command scripts and set up code.',
43+
'You can use markdown in your instructions for code blocks and keywords.',
44+
`It isn't shown here, but you can add multiple steps for a single set of instructions by just adding another "### Step" in the markdown.`,
3445
],
3546
}
3647

48+
const tipWrap = document.querySelectorAll('.tip-wrap')[0]
49+
const tipElement = document.querySelectorAll('.tip')[0]
50+
const closeTipBtn = document.querySelectorAll('.close-tip-btn')[0]
51+
3752
closeTipBtn.addEventListener('click', () => {
3853
// remove flowchart highlighting
3954
flowchartElements.forEach(item => {
4055
item.classList.remove('highlight-flow-item')
4156
})
4257

58+
// hide tip
4359
tipWrap.style.visibility = 'hidden'
4460
})
4561

46-
function updateTip(key, index) {
47-
let color
48-
49-
if (key === 'commitTips') {
50-
color = 'rgb(255, 153, 255)'
51-
} else if (key === 'lessonTips') {
52-
color = 'rgb(255, 204, 153)'
53-
} else {
54-
color = 'rgb(0, 204, 0)'
55-
}
56-
57-
closeTipBtn.style.backgroundColor = color
58-
tipWrap.style.visibility = 'visible'
59-
tipElement.innerHTML = tips[key][index]
60-
}
61-
62-
// flowchart highlighting
62+
/* FLOWCHART HIGHLIGHTING */
6363
const flowchartElements = [
6464
document.querySelectorAll('.flow-main-repo')[0],
6565
document.querySelectorAll('.repo-tutorials')[0],
@@ -71,6 +71,7 @@ const flowchartElements = [
7171
document.querySelectorAll('.file-config')[0],
7272
]
7373

74+
// add click events for flowchart elements
7475
flowchartElements.forEach((el, index) => {
7576
el.addEventListener('click', () => {
7677
// update tip
@@ -114,7 +115,7 @@ flowchartElements.forEach((el, index) => {
114115
})
115116
})
116117

117-
// lesson highlighting
118+
/* LESSON HIGHLIGHTING */
118119
const lessonImages = document.querySelectorAll('.lesson-img')
119120
const markdownLessonDivs = [
120121
document.querySelectorAll('.lesson-1-markdown'),
@@ -127,6 +128,7 @@ const markdownLessonDivs = [
127128
let lessonImgHighlighted = false
128129
let highlightedLessonTextIndex = false
129130

131+
// add click events for lesson images
130132
lessonImages.forEach((img, index) => {
131133
img.addEventListener('click', () => {
132134
// update tip
@@ -160,7 +162,7 @@ lessonImages.forEach((img, index) => {
160162
})
161163
})
162164

163-
// Commit highlighting
165+
/* COMMIT HIGHLIGHTING */
164166
const commitImgGroup = document.querySelectorAll('.commit-img-group')
165167
const markdownCommitDivs = [
166168
document.querySelectorAll('.commit-1-markdown'),
@@ -175,6 +177,7 @@ const markdownCommitDivs = [
175177
let commitImgHighlighted = false
176178
let highlightedCommitTextIndex = false
177179

180+
// add click events for commit images
178181
commitImgGroup.forEach((img, index) => {
179182
img.addEventListener('click', () => {
180183
// update tip

Diff for: ‎styles.css

+156
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,142 @@ a {
148148
left: 1075px;
149149
}
150150

151+
.flow-line {
152+
position: absolute;
153+
background-color: black;
154+
}
155+
156+
.flow-line-1 {
157+
top: 125px;
158+
left: 210px;
159+
width: 200px;
160+
height: 2px;
161+
transform: rotate(-35deg);
162+
}
163+
164+
.flow-line-2 {
165+
top: 125px;
166+
left: 420px;
167+
width: 200px;
168+
height: 2px;
169+
transform: rotate(35deg);
170+
}
171+
172+
.flow-line-3 {
173+
top: 260px;
174+
left: 220px;
175+
width: 2px;
176+
height: 80px;
177+
}
178+
179+
.flow-line-4 {
180+
top: 390px;
181+
left: 220px;
182+
width: 2px;
183+
height: 100px;
184+
}
185+
186+
.flow-line-4::after {
187+
content: '';
188+
background-color: black;
189+
position: absolute;
190+
left: -3px;
191+
bottom: 0;
192+
border-top: 10px solid black;
193+
border-left: 5px solid white;
194+
border-right: 5px solid white;
195+
}
196+
197+
.flow-line-5 {
198+
top: 300px;
199+
left: 500px;
200+
width: 120px;
201+
height: 2px;
202+
transform: rotate(-45deg);
203+
}
204+
205+
.flow-line-6 {
206+
top: 300px;
207+
left: 620px;
208+
width: 170px;
209+
height: 2px;
210+
transform: rotate(30deg);
211+
}
212+
213+
.flow-line-7 {
214+
top: 365px;
215+
left: 635px;
216+
width: 105px;
217+
height: 2px;
218+
}
219+
220+
.flow-line-7::after {
221+
content: '';
222+
background-color: black;
223+
position: absolute;
224+
right: 0;
225+
top: -3px;
226+
border-left: 10px solid black;
227+
border-top: 5px solid white;
228+
border-bottom: 5px solid white;
229+
}
230+
231+
.flow-line-8 {
232+
top: 265px;
233+
left: 760px;
234+
width: 150px;
235+
height: 2px;
236+
transform: rotate(100deg);
237+
}
238+
239+
.flow-line-8::after {
240+
content: '';
241+
background-color: black;
242+
position: absolute;
243+
top: -3px;
244+
border-right: 10px solid black;
245+
border-top: 5px solid white;
246+
border-bottom: 5px solid white;
247+
}
248+
249+
.flow-line-9 {
250+
top: 210px;
251+
left: 970px;
252+
width: 100px;
253+
height: 2px;
254+
transform: rotate(35deg);
255+
}
256+
257+
.flow-line-9::after {
258+
content: '';
259+
background-color: black;
260+
position: absolute;
261+
right: 0;
262+
top: -3px;
263+
border-left: 10px solid black;
264+
border-top: 5px solid white;
265+
border-bottom: 5px solid white;
266+
}
267+
268+
.flow-line-10 {
269+
top: 350px;
270+
left: 1160px;
271+
width: 75px;
272+
height: 2px;
273+
transform: rotate(90deg);
274+
}
275+
276+
.flow-line-10::after {
277+
content: '';
278+
background-color: black;
279+
position: absolute;
280+
right: 0;
281+
top: -4px;
282+
border-left: 10px solid black;
283+
border-top: 5px solid white;
284+
border-bottom: 5px solid white;
285+
}
286+
151287
/* columns */
152288
.column-wrap {
153289
width: var(--min-width);
@@ -277,3 +413,23 @@ a {
277413
border: 6px solid var(--highlight-color2);
278414
padding: 0;
279415
}
416+
417+
/* footer */
418+
.footer {
419+
margin-top: 200px;
420+
display: flex;
421+
align-items: center;
422+
justify-content: space-between;
423+
background-color: var(--main-color);
424+
width: 100%;
425+
min-width: var(--min-width);
426+
height: 60px;
427+
}
428+
429+
.footer-link {
430+
margin: 0 50px;
431+
color: white;
432+
cursor: pointer;
433+
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
434+
'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
435+
}

0 commit comments

Comments
 (0)