Node.js path selection
📦 Node.js-> Command Line
✨ The Prompt Phrase
[Environment]::SetEnvironmentVariable("Path", "C:\Program Files\nodejs;" + [Environment]::GetEnvironmentVariable("Path", "User"), "User")
💻 Code Preview
📦 All-in-One Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Node.js PATH Configuration</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--node: #68a063;
--cyan: #06b6d4;
--purple: #8b5cf6;
--pink: #ec4899;
--orange: #f97316;
--yellow: #eab308;
--bg: #0f172a;
--card: #1e293b;
--text: #e2e8f0;
}
body {
font-family: 'Poppins', sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
line-height: 1.6;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 20px;
}
/* Header */
header {
text-align: center;
padding: 40px 20px;
background: linear-gradient(135deg, rgba(104,160,99,0.2), rgba(6,182,212,0.2));
border-radius: 20px;
margin-bottom: 30px;
border: 1px solid rgba(104,160,99,0.3);
}
.logo {
font-size: 4rem;
margin-bottom: 15px;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
h1 {
font-size: 2rem;
background: linear-gradient(135deg, var(--node), var(--cyan));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 10px;
}
.subtitle { color: #94a3b8; }
.badge {
display: inline-block;
background: linear-gradient(135deg, var(--purple), var(--pink));
padding: 8px 20px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
margin-top: 15px;
}
/* Main Command Section */
.main-command {
background: var(--card);
border-radius: 16px;
padding: 25px;
margin-bottom: 25px;
border: 2px solid var(--node);
position: relative;
overflow: hidden;
}
.main-command::before {
content: '⭐ KEY COMMAND';
position: absolute;
top: 0;
right: 0;
background: linear-gradient(135deg, var(--orange), var(--yellow));
color: #000;
padding: 5px 15px;
font-size: 0.75rem;
font-weight: 700;
border-radius: 0 14px 0 10px;
}
.main-command h2 {
color: var(--cyan);
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.cmd-box {
background: #0f172a;
border-radius: 12px;
overflow: hidden;
margin: 15px 0;
}
.cmd-header {
background: #1a1a2e;
padding: 10px 15px;
display: flex;
align-items: center;
gap: 8px;
}
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot.r { background: #ff5f56; }
.dot.y { background: #ffbd2e; }
.dot.g { background: #27ca40; }
.cmd-body {
padding: 20px;
font-family: 'Fira Code', monospace;
font-size: 0.85rem;
overflow-x: auto;
line-height: 1.8;
}
.kw { color: var(--purple); }
.str { color: var(--yellow); }
.method { color: var(--pink); }
.comment { color: #6b7280; }
.copy-btn {
background: linear-gradient(135deg, var(--node), var(--cyan));
border: none;
padding: 12px 25px;
border-radius: 10px;
color: white;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
margin-top: 15px;
transition: transform 0.2s, box-shadow 0.2s;
}
.copy-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(104,160,99,0.3);
}
/* Cards */
.card {
background: var(--card);
border-radius: 16px;
padding: 25px;
margin-bottom: 20px;
border: 1px solid rgba(255,255,255,0.1);
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-5px);
}
.card h2 {
color: var(--cyan);
margin-bottom: 15px;
font-size: 1.3rem;
display: flex;
align-items: center;
gap: 10px;
}
.card p { color: #94a3b8; margin-bottom: 15px; }
/* Code blocks */
.code {
background: #0f172a;
border-radius: 10px;
padding: 15px;
font-family: 'Fira Code', monospace;
font-size: 0.85rem;
margin: 15px 0;
overflow-x: auto;
border: 1px solid rgba(255,255,255,0.1);
}
/* Breakdown grid */
.breakdown {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
margin: 20px 0;
}
.breakdown-item {
background: rgba(255,255,255,0.05);
padding: 15px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.1);
cursor: pointer;
transition: all 0.3s;
}
.breakdown-item:hover {
border-color: var(--cyan);
background: rgba(6,182,212,0.1);
}
.breakdown-item code {
display: block;
color: var(--pink);
font-family: 'Fira Code', monospace;
margin-bottom: 8px;
font-size: 0.9rem;
}
.breakdown-item span {
color: #94a3b8;
font-size: 0.85rem;
}
/* Steps */
.steps { margin: 20px 0; }
.step {
display: flex;
gap: 15px;
padding: 18px;
background: rgba(255,255,255,0.03);
border-radius: 12px;
margin-bottom: 12px;
border: 1px solid rgba(255,255,255,0.05);
cursor: pointer;
transition: all 0.3s;
}
.step:hover {
transform: translateX(8px);
border-color: var(--node);
background: rgba(104,160,99,0.1);
}
.step-num {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--node), var(--cyan));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
flex-shrink: 0;
}
.step-content h4 { margin-bottom: 5px; }
.step-content p { color: #64748b; font-size: 0.9rem; margin: 0; }
/* Info boxes */
.info {
padding: 18px;
border-radius: 12px;
margin: 15px 0;
display: flex;
gap: 12px;
}
.info.tip {
background: rgba(104,160,99,0.15);
border-left: 4px solid var(--node);
}
.info.warn {
background: rgba(234,179,8,0.15);
border-left: 4px solid var(--yellow);
}
.info-icon { font-size: 1.3rem; }
/* Interactive terminal */
.terminal {
background: #0a0a0f;
border-radius: 12px;
overflow: hidden;
margin: 20px 0;
}
.term-header {
background: #1a1a2e;
padding: 10px 15px;
display: flex;
align-items: center;
gap: 8px;
}
.term-body {
padding: 20px;
font-family: 'Fira Code', monospace;
font-size: 0.85rem;
min-height: 150px;
}
.term-line { margin-bottom: 8px; }
.prompt { color: var(--cyan); }
.run-btn {
background: linear-gradient(135deg, var(--purple), var(--pink));
border: none;
padding: 10px 20px;
border-radius: 8px;
color: white;
font-weight: 600;
cursor: pointer;
margin-top: 10px;
}
/* Quiz */
.quiz {
background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(236,72,153,0.1));
border-radius: 16px;
padding: 25px;
border: 2px solid rgba(139,92,246,0.3);
}
.quiz h3 { margin-bottom: 20px; }
.quiz-opt {
padding: 15px;
background: var(--card);
border-radius: 10px;
margin-bottom: 10px;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 12px;
}
.quiz-opt:hover {
border-color: var(--purple);
transform: translateX(5px);
}
.quiz-opt.correct {
border-color: var(--node);
background: rgba(104,160,99,0.2);
}
.quiz-opt.wrong {
border-color: #ef4444;
background: rgba(239,68,68,0.2);
}
.opt-letter {
width: 30px;
height: 30px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.quiz-result {
margin-top: 15px;
padding: 15px;
border-radius: 10px;
text-align: center;
display: none;
}
.quiz-result.show { display: block; }
/* Toast */
.toast {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: var(--card);
padding: 15px 25px;
border-radius: 12px;
border: 2px solid var(--node);
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
transition: transform 0.4s;
z-index: 1000;
}
.toast.show {
transform: translateX(-50%) translateY(0);
}
/* Footer */
footer {
text-align: center;
padding: 40px 20px;
color: #64748b;
border-top: 1px solid rgba(255,255,255,0.1);
margin-top: 40px;
}
@media (max-width: 600px) {
.breakdown { grid-template-columns: 1fr; }
h1 { font-size: 1.5rem; }
.cmd-body { font-size: 0.75rem; }
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">🛤️</div>
<h1>Node.js PATH Configuration</h1>
<p class="subtitle">Configure PATH for command line execution & version checking</p>
<div class="badge">📚 Part 1 of Series</div>
</header>
<!-- MAIN COMMAND -->
<div class="main-command">
<h2>🔧 The PowerShell Command</h2>
<p>This command adds Node.js to your User PATH, enabling you to run <code style="color: var(--cyan);">node</code> and <code style="color: var(--cyan);">npm</code> from any directory.</p>
<div class="cmd-box">
<div class="cmd-header">
<div class="dot r"></div>
<div class="dot y"></div>
<div class="dot g"></div>
<span style="flex:1; text-align:center; color:#64748b; font-size:0.8rem;">PowerShell</span>
</div>
<div class="cmd-body">
<span class="comment"># Add Node.js to User PATH</span><br>
[<span class="method">Environment</span>]::<span class="method">SetEnvironmentVariable</span>(<br>
<span class="str">"Path"</span>,<br>
<span class="str">"C:\Program Files\nodejs;"</span> +<br>
[<span class="method">Environment</span>]::<span class="method">GetEnvironmentVariable</span>(<span class="str">"Path"</span>, <span class="str">"User"</span>),<br>
<span class="str">"User"</span><br>
)
</div>
</div>
<button class="copy-btn" onclick="copyCommand()">
<span id="copyIcon">📋</span>
<span id="copyText">Copy Command</span>
</button>
</div>
<!-- COMMAND BREAKDOWN -->
<div class="card">
<h2>🔍 Command Breakdown</h2>
<p>Understanding each part of the PowerShell command:</p>
<div class="breakdown">
<div class="breakdown-item" onclick="showToast('[Environment] - .NET class for environment access')">
<code>[Environment]</code>
<span>.NET Framework class for environment variables</span>
</div>
<div class="breakdown-item" onclick="showToast('SetEnvironmentVariable creates or modifies variables')">
<code>::SetEnvironmentVariable()</code>
<span>Method to set an environment variable</span>
</div>
<div class="breakdown-item" onclick="showToast('Path is the variable name we are modifying')">
<code>"Path"</code>
<span>The name of the variable to modify</span>
</div>
<div class="breakdown-item" onclick="showToast('This is the Node.js installation directory')">
<code>"C:\Program Files\nodejs;"</code>
<span>Node.js directory (note the semicolon)</span>
</div>
<div class="breakdown-item" onclick="showToast('GetEnvironmentVariable retrieves existing PATH')">
<code>::GetEnvironmentVariable()</code>
<span>Gets current PATH to append to</span>
</div>
<div class="breakdown-item" onclick="showToast('User scope = only your account, Machine = all users')">
<code>"User"</code>
<span>Scope: User-level (not system-wide)</span>
</div>
</div>
</div>
<!-- WHAT IS PATH -->
<div class="card">
<h2>📍 What is PATH?</h2>
<p>PATH is an environment variable that tells your operating system where to look for executable programs. Without it, you'd need to type the full path every time!</p>
<div class="info tip">
<span class="info-icon">💡</span>
<div>
<strong>Analogy:</strong> PATH is like your phone's contact list. Instead of memorizing phone numbers, you search by name. PATH lets you "call" programs by name!
</div>
</div>
<div class="code">
<span class="comment"># Without PATH:</span><br>
<span style="color:#ef4444;">"C:\Program Files\nodejs\node.exe" --version</span><br><br>
<span class="comment"># With PATH configured:</span><br>
<span style="color:var(--node);">node --version</span>
</div>
</div>
<!-- STEP BY STEP -->
<div class="card">
<h2>📋 Step-by-Step Guide</h2>
<div class="steps">
<div class="step" onclick="showToast('Press Win+X and select Terminal (Admin)')">
<div class="step-num">1</div>
<div class="step-content">
<h4>Open PowerShell as Administrator</h4>
<p>Press Win + X → Select "Terminal (Admin)" or "PowerShell (Admin)"</p>
</div>
</div>
<div class="step" onclick="showToast('Paste the command and press Enter')">
<div class="step-num">2</div>
<div class="step-content">
<h4>Run the Command</h4>
<p>Copy the SetEnvironmentVariable command and paste it</p>
</div>
</div>
<div class="step" onclick="showToast('PATH changes need a fresh terminal session')">
<div class="step-num">3</div>
<div class="step-content">
<h4>Restart Terminal</h4>
<p>Close ALL terminal windows and open a new one</p>
</div>
</div>
<div class="step" onclick="showToast('If you see a version number, it worked!')">
<div class="step-num">4</div>
<div class="step-content">
<h4>Verify Installation</h4>
<p>Run: node --version</p>
</div>
</div>
</div>
</div>
<!-- VERIFICATION -->
<div class="card">
<h2>✅ Verify Configuration</h2>
<p>After restarting your terminal, run these commands:</p>
<div class="code">
<span class="comment"># Check Node.js version</span><br>
node --version<br>
<span style="color:var(--node);"># Expected: v20.x.x</span>
</div>
<div class="code">
<span class="comment"># Check NPM version</span><br>
npm --version<br>
<span style="color:var(--node);"># Expected: 10.x.x</span>
</div>
<div class="code">
<span class="comment"># View your current PATH</span><br>
[Environment]::GetEnvironmentVariable("Path", "User")
</div>
<!-- Interactive Demo -->
<h3 style="margin-top: 25px; margin-bottom: 15px;">🖥️ Interactive Demo</h3>
<div class="terminal">
<div class="term-header">
<div class="dot r"></div>
<div class="dot y"></div>
<div class="dot g"></div>
<span style="flex:1; text-align:center; color:#64748b; font-size:0.8rem;">PowerShell</span>
</div>
<div class="term-body" id="termBody">
<div class="term-line"><span class="prompt">PS C:\></span> _</div>
</div>
</div>
<button class="run-btn" onclick="runDemo()">▶️ Run Demo</button>
</div>
<!-- USER VS MACHINE -->
<div class="card">
<h2>⚖️ User vs Machine PATH</h2>
<p>The command uses "User" scope. Here's the difference:</p>
<div class="breakdown">
<div class="breakdown-item">
<code>👤 "User"</code>
<span>Only your account. No admin needed. Recommended!</span>
</div>
<div class="breakdown-item">
<code>🖥️ "Machine"</code>
<span>All users. Requires Administrator privileges.</span>
</div>
</div>
<div class="info warn">
<span class="info-icon">⚠️</span>
<div>
<strong>For Machine PATH:</strong> You MUST run PowerShell as Administrator, or it will fail!
</div>
</div>
<div class="code">
<span class="comment"># Machine-wide PATH (requires Admin)</span><br>
[Environment]::SetEnvironmentVariable(<br>
"Path",<br>
"C:\Program Files\nodejs;" +<br>
[Environment]::GetEnvironmentVariable("Path", "Machine"),<br>
"Machine"<br>
)
</div>
</div>
<!-- TROUBLESHOOTING -->
<div class="card">
<h2>🔧 Troubleshooting</h2>
<div class="steps">
<div class="step">
<div class="step-num">!</div>
<div class="step-content">
<h4>"node" is not recognized</h4>
<p>Close ALL terminals and open a fresh one. PATH changes need new sessions.</p>
</div>
</div>
<div class="step">
<div class="step-num">!</div>
<div class="step-content">
<h4>Node.js not at default location</h4>
<p>Change "C:\Program Files\nodejs" to your actual installation path.</p>
</div>
</div>
<div class="step">
<div class="step-num">!</div>
<div class="step-content">
<h4>Permission denied</h4>
<p>For Machine PATH, run PowerShell as Administrator.</p>
</div>
</div>
</div>
<div class="code">
<span class="comment"># Check if Node.js folder exists</span><br>
Test-Path "C:\Program Files\nodejs"<br>
<span style="color:var(--node);"># Returns True or False</span>
</div>
</div>
<!-- QUIZ -->
<div class="quiz">
<h3>🧠 Quick Quiz</h3>
<p style="margin-bottom: 20px;">What does the "User" parameter specify?</p>
<div class="quiz-opt" onclick="checkQuiz(this, false)">
<span class="opt-letter">A</span>
<span>The username to run the command as</span>
</div>
<div class="quiz-opt" onclick="checkQuiz(this, true)">
<span class="opt-letter">B</span>
<span>The scope - affects only current user's PATH</span>
</div>
<div class="quiz-opt" onclick="checkQuiz(this, false)">
<span class="opt-letter">C</span>
<span>The type of variable being created</span>
</div>
<div class="quiz-opt" onclick="checkQuiz(this, false)">
<span class="opt-letter">D</span>
<span>The folder where Node.js is installed</span>
</div>
<div class="quiz-result" id="quizResult"></div>
</div>
<footer>
<p>🎉 Part 1 Complete! You now know how to configure Node.js PATH.</p>
<p style="margin-top: 10px; font-size: 0.9rem;">Continue to Part 2 for GUI-based configuration →</p>
</footer>
</div>
<div class="toast" id="toast"></div>
<script>
const mainCmd = '[Environment]::SetEnvironmentVariable("Path", "C:\\Program Files\\nodejs;" + [Environment]::GetEnvironmentVariable("Path", "User"), "User")';
function copyCommand() {
navigator.clipboard.writeText(mainCmd);
document.getElementById('copyIcon').textContent = '✅';
document.getElementById('copyText').textContent = 'Copied!';
showToast('Command copied to clipboard!');
setTimeout(() => {
document.getElementById('copyIcon').textContent = '📋';
document.getElementById('copyText').textContent = 'Copy Command';
}, 2000);
}
function showToast(msg) {
const toast = document.getElementById('toast');
toast.textContent = '✨ ' + msg;
toast.classList.add('show');
setTimeout(() => toast.classList.remove('show'), 2500);
}
function runDemo() {
const body = document.getElementById('termBody');
body.innerHTML = '<div class="term-line"><span class="prompt">PS C:\\></span> </div>';
const lines = [
{ text: '[Environment]::SetEnvironmentVariable(...)', delay: 500 },
{ text: '', delay: 300 },
{ text: '# Command executed successfully!', color: 'var(--node)', delay: 800 },
{ text: '', delay: 200 },
{ text: 'PS C:\\> node --version', delay: 600 },
{ text: 'v20.10.0', color: 'var(--node)', delay: 500 },
{ text: '', delay: 200 },
{ text: 'PS C:\\> npm --version', delay: 600 },
{ text: '10.2.3', color: 'var(--node)', delay: 500 },
{ text: '', delay: 200 },
{ text: '✅ Node.js is now in your PATH!', color: 'var(--node)', delay: 500 }
];
let total = 0;
lines.forEach((line, i) => {
total += line.delay;
setTimeout(() => {
const div = document.createElement('div');
div.className = 'term-line';
div.innerHTML = `<span style="color: ${line.color || '#94a3b8'}">${line.text}</span>`;
body.appendChild(div);
body.scrollTop = body.scrollHeight;
if (i === lines.length - 1) {
showToast('Demo complete! 🎉');
}
}, total);
});
}
function checkQuiz(el, correct) {
const opts = document.querySelectorAll('.quiz-opt');
opts.forEach(o => {
o.style.pointerEvents = 'none';
o.classList.remove('correct', 'wrong');
});
el.classList.add(correct ? 'correct' : 'wrong');
if (!correct) {
opts[1].classList.add('correct');
}
const result = document.getElementById('quizResult');
result.className = 'quiz-result show';
result.style.background = correct ? 'rgba(104,160,99,0.2)' : 'rgba(239,68,68,0.2)';
result.innerHTML = correct
? '🎉 Correct! "User" specifies the scope - only your user account is affected.'
: '❌ Not quite. "User" specifies the scope of the PATH variable.';
}
</script>
</body>
</html>
Live Preview