Movatterモバイル変換

[0]ホーム
URL:

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

Commitf607abb

Browse files
committed
improve tips, add arrows
1 parent8ff4521 commitf607abb

File tree

3 files changed

+233
-43
lines changed

3 files changed

+233
-43
lines changed

‎index.html

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

1414
<divclass="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
<divclass="flow file file-config">config.json</div>
2828
<divclass="flow repo repo-tutorials">Tutorials Repo</div>
2929
<divclass="flow repo repo-coderoad">CodeRoad Repo</div>
30+
<divclass="flow-line flow-line-1"></div>
31+
<divclass="flow-line flow-line-2"></div>
32+
<divclass="flow-line flow-line-3"></div>
33+
<divclass="flow-line flow-line-4"></div>
34+
<divclass="flow-line flow-line-5"></div>
35+
<divclass="flow-line flow-line-6"></div>
36+
<divclass="flow-line flow-line-7"></div>
37+
<divclass="flow-line flow-line-8"></div>
38+
<divclass="flow-line flow-line-9"></div>
39+
<divclass="flow-line flow-line-10"></div>
3040
</div>
3141

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

230+
<footerclass="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
<scripttype="text/javascript"src="index.js"></script>
221252
</body>

‎index.js

Lines changed: 45 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,65 @@
1-
// tips
2-
consttipWrap=document.querySelectorAll('.tip-wrap')[0]
3-
consttipElement=document.querySelectorAll('.tip')[0]
4-
constcloseTipBtn=document.querySelectorAll('.close-tip-btn')[0]
1+
/* GLOBAL FUNCTIONS */
2+
functionupdateTip(key,index){
3+
letcolor
54

6-
// <a href="https://github.com/coderoad/fcc-learn-npm" target="_blank"
5+
if(key==='commitTips'){
6+
color='rgb(255, 153, 255)'
7+
}elseif(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
consttips={
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 ofall theconfig.json filesfrom eachrepo.',// tutorials repo
12-
'Thecoderoadrepo holds all the vscode extension code. Itwill create all the availabletutorialsfromthelist 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, andcoderoad 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 amarkdown file youwillcreateto give your lessons instructions.',// coderoadfile
17-
"A script is used to create this file. And it is linked tofromthe 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, onefrom eachtutorial.',
23+
'TheCode Roadrepo holds all the vscode extension code. Ituses the config.json files from thetutorialsrepo to createthelessons 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, andall 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+
'Themarkdown file you createdescribes the structure of the lessons. A script will be used to create the config.jsonfile 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+
'Asolutioncommit 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 theoverview page, and text.',
31-
'First lesson with a test.',
32-
'You canadd 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 themarkdown.',
42+
'First lesson with a test. "### Step" inside a lesson is where you describe tests, solutions, command scripts and set up code.',
43+
'You canuse 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+
consttipWrap=document.querySelectorAll('.tip-wrap')[0]
49+
consttipElement=document.querySelectorAll('.tip')[0]
50+
constcloseTipBtn=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-
functionupdateTip(key,index){
47-
letcolor
48-
49-
if(key==='commitTips'){
50-
color='rgb(255, 153, 255)'
51-
}elseif(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
constflowchartElements=[
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
constlessonImages=document.querySelectorAll('.lesson-img')
119120
constmarkdownLessonDivs=[
120121
document.querySelectorAll('.lesson-1-markdown'),
@@ -127,6 +128,7 @@ const markdownLessonDivs = [
127128
letlessonImgHighlighted=false
128129
lethighlightedLessonTextIndex=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
constcommitImgGroup=document.querySelectorAll('.commit-img-group')
165167
constmarkdownCommitDivs=[
166168
document.querySelectorAll('.commit-1-markdown'),
@@ -175,6 +177,7 @@ const markdownCommitDivs = [
175177
letcommitImgHighlighted=false
176178
lethighlightedCommitTextIndex=false
177179

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

‎styles.css

Lines changed: 156 additions & 0 deletions
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 solidvar(--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:050px;
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)
[8]ページ先頭
©2009-2025 Movatter.jp