Skip to content

Commit 8ff4521

Browse files
moT01moT01
committed
initial commit
0 parents  commit 8ff4521

23 files changed

+710
-0
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store

‎img/1.1-solution_result.jpg

7.77 KB
Loading

‎img/1.1_result.jpg

7.45 KB
Loading

‎img/1.2-solution_result.jpg

8.19 KB
Loading

‎img/1.2_result.jpg

7.56 KB
Loading

‎img/1.3-solution_result.jpg

7.88 KB
Loading

‎img/1.3_result.jpg

7.39 KB
Loading

‎img/author_result.jpg

77.6 KB
Loading

‎img/description_result.jpg

114 KB
Loading

‎img/init_result.jpg

6.66 KB
Loading

‎img/intro_result.jpg

148 KB
Loading

‎img/keywords_result.jpg

70.4 KB
Loading

‎img/logo.jpg

7.31 KB
Loading

‎img/overview_result.jpg

341 KB
Loading

‎img/solution-1.png

13 KB
Loading

‎img/solution-2.png

19.5 KB
Loading

‎img/solution-3.png

21.7 KB
Loading

‎img/test-1.png

52.4 KB
Loading

‎img/test-2.png

55.9 KB
Loading

‎img/test-3.png

74.8 KB
Loading

‎index.html

+221
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
<!DOCTYPE html>
2+
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="styles.css" />
5+
<title>CodeRoad Tutorial Visualization</title>
6+
</head>
7+
8+
<body>
9+
<header class="header">
10+
<img class="header-img" src="img/logo.jpg" />
11+
<h1 class="header-text">Code Road</h1>
12+
</header>
13+
14+
<div class="title">
15+
Visualization of a Code Road tutorial repo
16+
<br />
17+
Click to see more info
18+
</div>
19+
20+
<main class="main">
21+
<div class="flowchart">
22+
<div class="flow flow-main-repo">Learn NPM Repo</div>
23+
<div class="flow branch branch-master">master</div>
24+
<div class="flow branch branch-version">v0.1.0</div>
25+
<div class="flow file file-project">Project Files</div>
26+
<div class="flow file file-coderoad">CODEROAD.md</div>
27+
<div class="flow file file-config">config.json</div>
28+
<div class="flow repo repo-tutorials">Tutorials Repo</div>
29+
<div class="flow repo repo-coderoad">CodeRoad Repo</div>
30+
</div>
31+
32+
<div class="column-wrap">
33+
<div class="column column-1">
34+
<div class="commit-img-group commit-img-group-1">
35+
<img class="commit-img" src="img/init_result.jpg" />
36+
</div>
37+
<div class="commit-img-group commit-img-group-2">
38+
<img class="commit-img" src="img/1.1_result.jpg" />
39+
<img class="commit-img" src="img/test-1.png" />
40+
</div>
41+
<div class="commit-img-group commit-img-group-3">
42+
<img class="commit-img" src="img/1.1-solution_result.jpg" />
43+
<img class="commit-img" src="img/solution-1.png" />
44+
</div>
45+
<div class="commit-img-group commit-img-group-4">
46+
<img class="commit-img" src="img/1.2_result.jpg" />
47+
<img class="commit-img" src="img/test-2.png" />
48+
</div>
49+
<div class="commit-img-group commit-img-group-5">
50+
<img class="commit-img" src="img/1.2-solution_result.jpg" />
51+
<img class="commit-img" src="img/solution-2.png" />
52+
</div>
53+
<div class="commit-img-group commit-img-group-6">
54+
<img class="commit-img" src="img/1.3_result.jpg" />
55+
<img class="commit-img" src="img/test-3.png" />
56+
</div>
57+
<div class="commit-img-group commit-img-group-7">
58+
<img class="commit-img" src="img/1.3-solution_result.jpg" />
59+
<img class="commit-img" src="img/solution-3.png" />
60+
</div>
61+
</div>
62+
<div class="column column-2">
63+
<div class="markdown-filename">
64+
<a
65+
href="https://github.com/coderoad/fcc-learn-npm/blob/master/CODEROAD.md"
66+
target="_blank"
67+
>COADROAD.md</a
68+
>
69+
</div>
70+
<pre class="markdown-pre">
71+
<div class="lesson-1-markdown"># Learn NPM package json</div>
72+
73+
<div class="lesson-1-markdown">> The Node Package Manager (NPM) is a command-line tool used by developers to share and control modules (or packages) of JavaScript code written for use with Node.js.</div>
74+
75+
```config
76+
config:
77+
testRunner:
78+
command: npm run programmatic-test
79+
repo:
80+
uri: https://github.com/coderoad/fcc-learn-npm
81+
branch: v0.1.0
82+
dependencies:
83+
- name: node
84+
version: ^10
85+
```
86+
87+
<div class="lesson-1-markdown lesson-2-markdown">## Intro</div>
88+
89+
<div class="lesson-1-markdown">> Introduction to the package.json</div>
90+
91+
<div class="lesson-2-markdown">When starting a new project, NPM generates a package.json file. This file lists the package dependencies for your project. Since NPM packages are regularly updated, the package.json file allows you to set specific version numbers for each dependency. This ensures that updates to a package don't break your project.
92+
93+
NPM saves packages in a folder named node_modules. These packages can be installed in two ways:
94+
95+
- globally in a root node_modules folder, accessible by all projects.
96+
- locally within a project's own node_modules folder, accessible only to that project.
97+
98+
Most developers prefer to install packages local to each project to create a separation between the dependencies of different projects.
99+
100+
The `package.json` file is the center of any Node.js project or NPM package. It stores information about your project, similar to how the &lt;head&gt; section of an HTML document describes the content of a webpage. It consists of a single JSON object where information is stored in key-value pairs. There are only two required fields; "name" and "version", but it’s good practice to provide additional information about your project that could be useful to future users or maintainers.
101+
If you look at the file tree of your project, you will find the package.json file on the top level of the tree. This is the file that you will be improving in the next couple of challenges.</div>
102+
103+
<div class="lesson-1-markdown lesson-3-markdown">## Author</div>
104+
105+
<div class="lesson-1-markdown">> Package.json author</div>
106+
107+
<div class="lesson-3-markdown">One of the most common pieces of information in this file is the `author` field. It specifies who created the project, and can consist of a string or an object with contact or other details. An object is recommended for bigger projects, but a simple string like the following example will do for this project.
108+
109+
```json
110+
"author": "Jane Doe",
111+
```</div>
112+
113+
### Step 1
114+
115+
```config
116+
setup:
117+
files:
118+
- package.json
119+
commits:
120+
<div class="commit-1-markdown"> - '26e502d'</div>
121+
<div class="commit-2-markdown"> - 'e39ab72'</div>
122+
commands:
123+
- npm install
124+
solution:
125+
files:
126+
- package.json
127+
commits:
128+
<div class="commit-3-markdown"> - '72fa9de'</div>
129+
```
130+
131+
<div class="lesson-3-markdown">Add your name as the `author` of the project in the package.json file.</div>
132+
133+
<div class="lesson-3-markdown">**Note:** Remember that you’re writing JSON, so all field names must use double-quotes (") and be separated with a comma (,).</div>
134+
135+
<div class="lesson-1-markdown lesson-4-markdown">## Description</div>
136+
137+
<div class="lesson-1-markdown">> Package.json description</div>
138+
139+
<div class="lesson-4-markdown">The next part of a good package.json file is the `description` field; where a short, but informative description about your project belongs.
140+
If you some day plan to publish a package to NPM, this is the string that should sell your idea to the user when they decide whether to install your package or not. However, that’s not the only use case for the description, it’s a great way to summarize what a project does. It’s just as important in any Node.js project to help other developers, future maintainers or even your future self understand the project quickly.
141+
142+
Regardless of what you plan for your project, a description is definitely recommended.
143+
144+
Here's an example:
145+
146+
```json
147+
"description": "A project that does something awesome",
148+
```</div>
149+
150+
### Step 1
151+
152+
```config
153+
setup:
154+
files:
155+
- package.json
156+
commits:
157+
<div class="commit-4-markdown"> - '64bd78f'</div>
158+
solution:
159+
files:
160+
- package.json
161+
commits:
162+
<div class="commit-5-markdown"> - '7888392'</div>
163+
```
164+
165+
<div class="lesson-4-markdown">Add a `description` to the package.json file of your project.</div>
166+
167+
<div class="lesson-4-markdown">**Note:** Remember to use double-quotes for field-names (") and commas (,) to separate fields.</div>
168+
169+
<div class="lesson-1-markdown lesson-5-markdown">## Keywords</div>
170+
171+
<div class="lesson-1-markdown">> Package.json keywords</div>
172+
173+
<div class="lesson-5-markdown">The `keywords` field is where you can describe your project using related keywords.
174+
175+
Here's an example:
176+
177+
```json
178+
"keywords": [ "descriptive", "related", "words" ],
179+
```
180+
181+
As you can see, this field is structured as an array of double-quoted strings.</div>
182+
183+
### Step 1
184+
185+
```config
186+
setup:
187+
files:
188+
- package.json
189+
commits:
190+
<div class="commit-6-markdown"> - '54540f6'</div>
191+
solution:
192+
files:
193+
- package.json
194+
commits:
195+
<div class="commit-7-markdown"> - '803ab94'</div>
196+
```
197+
198+
<div class="lesson-5-markdown">Add an array of suitable strings to the `keywords` field in the package.json file of your project.</div>
199+
200+
<div class="lesson-5-markdown">One of the keywords should be "freecodecamp".</div>
201+
</pre>
202+
</div>
203+
<div class="column column-3">
204+
<img class="lesson-img" src="img/overview_result.jpg" />
205+
<img class="lesson-img" src="img/intro_result.jpg" />
206+
<img class="lesson-img" src="img/author_result.jpg" />
207+
<img
208+
class="lesson-img description-img"
209+
src="img/description_result.jpg"
210+
/>
211+
<img class="lesson-img keywords-img" src="img/keywords_result.jpg" />
212+
</div>
213+
</div>
214+
<div class="tip-wrap">
215+
<div class="tip"></div>
216+
<span class="close-tip-btn">x</span>
217+
</div>
218+
</main>
219+
220+
<script type="text/javascript" src="index.js"></script>
221+
</body>

0 commit comments

Comments
 (0)