Start the Node.js REPL (Read-Eval-Print Loop) interactive shell
📦 Node.js-> Command Line
✨ The Prompt Phrase
node
💻 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 - Start the Node.js REPL (Read-Eval-Print Loop) interactive shell - Interactive Tutorial</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--bg-primary: #0a0e27;
--bg-secondary: #151932;
--bg-card: #1e2139;
--accent-purple: #a855f7;
--accent-blue: #3b82f6;
--accent-green: #10b981;
--accent-red: #ef4444;
--accent-yellow: #f59e0b;
--accent-cyan: #06b6d4;
--text-primary: #f8fafc;
--text-secondary: #94a3b8;
--gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
--gradient-node: linear-gradient(135deg, #68d391 0%, #38b2ac 100%);
--shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* Hero Section */
.hero {
text-align: center;
padding: 100px 20px;
background: var(--gradient-node);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="2" fill="white" opacity="0.1"/></svg>');
animation: float 20s linear infinite;
}
@keyframes float {
from { transform: translateY(0); }
to { transform: translateY(-100px); }
}
.hero-content {
position: relative;
z-index: 1;
}
.command-display {
display: inline-block;
background: rgba(0, 0, 0, 0.3);
padding: 30px 60px;
border-radius: 15px;
font-family: 'Fira Code', monospace;
font-size: 3.5rem;
margin: 30px 0;
border: 2px solid rgba(255, 255, 255, 0.2);
animation: pulse 2s ease-in-out infinite;
letter-spacing: 0.1em;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.hero h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 20px;
animation: slideDown 0.8s ease-out;
}
.hero p {
font-size: 1.3rem;
opacity: 0.95;
animation: slideUp 0.8s ease-out;
}
@keyframes slideDown {
from { transform: translateY(-50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes slideUp {
from { transform: translateY(50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* Progress Bar */
.progress-container {
position: sticky;
top: 0;
width: 100%;
height: 5px;
background: var(--bg-secondary);
z-index: 1000;
}
.progress-bar {
height: 100%;
background: var(--gradient-3);
width: 0%;
transition: width 0.3s ease;
}
/* Section Styles */
.section {
margin: 60px 0;
animation: fadeIn 0.8s ease-out;
animation-fill-mode: both;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.section-title {
font-size: 2.5rem;
margin-bottom: 30px;
background: var(--gradient-3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline-block;
}
.card {
background: var(--bg-card);
border-radius: 20px;
padding: 40px;
margin: 30px 0;
box-shadow: var(--shadow);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4);
}
/* Code Block */
.code-block {
background: #1e1e1e;
border-radius: 15px;
padding: 25px;
margin: 20px 0;
position: relative;
overflow: hidden;
font-family: 'Fira Code', monospace;
}
.code-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.code-lang {
color: var(--accent-green);
font-weight: 600;
}
.copy-btn {
background: var(--accent-purple);
color: white;
border: none;
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.copy-btn:hover {
background: var(--accent-blue);
transform: scale(1.05);
}
.copy-btn.copied {
background: var(--accent-green);
}
pre {
margin: 0;
overflow-x: auto;
}
code {
color: #e0e0e0;
font-size: 0.95rem;
line-height: 1.6;
}
.code-comment {
color: #6a9955;
}
.code-keyword {
color: #569cd6;
}
.code-string {
color: #ce9178;
}
.code-function {
color: #dcdcaa;
}
.code-number {
color: #b5cea8;
}
.repl-prompt {
color: var(--accent-green);
}
.repl-output {
color: var(--accent-cyan);
}
/* Steps */
.steps {
counter-reset: step-counter;
}
.step {
background: var(--bg-secondary);
border-radius: 15px;
padding: 30px;
margin: 20px 0;
position: relative;
padding-left: 80px;
transition: all 0.3s ease;
}
.step:hover {
background: var(--bg-card);
transform: translateX(10px);
}
.step::before {
counter-increment: step-counter;
content: counter(step-counter);
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: var(--gradient-node);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
}
.step h3 {
color: var(--accent-green);
margin-bottom: 10px;
}
/* Interactive Demo */
.demo-container {
background: var(--bg-secondary);
border-radius: 20px;
padding: 40px;
margin: 30px 0;
}
.repl-simulator {
background: #1e1e1e;
border-radius: 15px;
padding: 20px;
font-family: 'Fira Code', monospace;
margin: 20px 0;
min-height: 200px;
}
.repl-header {
display: flex;
gap: 8px;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.repl-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.repl-dot.red { background: #ff5f56; }
.repl-dot.yellow { background: #ffbd2e; }
.repl-dot.green { background: #27c93f; }
.repl-content {
color: #e0e0e0;
line-height: 1.8;
}
.repl-input-line {
display: flex;
align-items: center;
margin: 10px 0;
}
.repl-input {
background: transparent;
border: none;
color: var(--text-primary);
font-family: 'Fira Code', monospace;
font-size: 0.95rem;
outline: none;
flex: 1;
margin-left: 10px;
}
.demo-button {
background: var(--gradient-node);
color: white;
border: none;
padding: 15px 40px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 10px;
margin: 10px;
}
.demo-button:hover {
transform: scale(1.05);
box-shadow: 0 10px 30px rgba(104, 211, 145, 0.4);
}
/* Tabs */
.tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.tab {
padding: 12px 24px;
background: var(--bg-secondary);
border: none;
border-radius: 10px;
color: var(--text-primary);
cursor: pointer;
transition: all 0.3s ease;
font-size: 1rem;
}
.tab:hover {
background: var(--bg-card);
}
.tab.active {
background: var(--gradient-node);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeIn 0.5s ease-out;
}
/* Accordion */
.accordion-header {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: var(--bg-secondary);
border-radius: 12px;
margin: 15px 0;
transition: all 0.3s ease;
}
.accordion-header:hover {
background: var(--bg-card);
}
.accordion-icon {
transition: transform 0.3s ease;
font-size: 1.2rem;
}
.accordion-icon.active {
transform: rotate(180deg);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.accordion-content.active {
max-height: 2000px;
}
.accordion-body {
padding: 20px;
background: var(--bg-secondary);
border-radius: 12px;
margin-top: 5px;
}
/* Tips */
.tip {
background: rgba(59, 130, 246, 0.1);
border-left: 4px solid var(--accent-blue);
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
.tip::before {
content: '💡 ';
font-size: 1.5rem;
}
.warning {
background: rgba(239, 68, 68, 0.1);
border-left: 4px solid #ef4444;
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
.warning::before {
content: '⚠️ ';
font-size: 1.5rem;
}
.success {
background: rgba(16, 185, 129, 0.1);
border-left: 4px solid var(--accent-green);
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
.success::before {
content: '✅ ';
font-size: 1.5rem;
}
.info {
background: rgba(6, 182, 212, 0.1);
border-left: 4px solid var(--accent-cyan);
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
.info::before {
content: '🔍 ';
font-size: 1.5rem;
}
/* Quiz */
.quiz-container {
background: var(--bg-card);
border-radius: 20px;
padding: 40px;
margin: 30px 0;
}
.quiz-question {
margin: 30px 0;
}
.quiz-question h3 {
color: var(--accent-purple);
margin-bottom: 20px;
}
.quiz-options {
display: flex;
flex-direction: column;
gap: 15px;
}
.quiz-option {
background: var(--bg-secondary);
padding: 20px;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.quiz-option:hover {
border-color: var(--accent-blue);
transform: translateX(10px);
}
.quiz-option.correct {
border-color: var(--accent-green);
background: rgba(16, 185, 129, 0.1);
}
.quiz-option.incorrect {
border-color: #ef4444;
background: rgba(239, 68, 68, 0.1);
}
.quiz-feedback {
margin-top: 15px;
padding: 15px;
border-radius: 10px;
display: none;
}
.quiz-feedback.show {
display: block;
animation: slideIn 0.5s ease-out;
}
@keyframes slideIn {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
.quiz-feedback.correct {
background: rgba(16, 185, 129, 0.1);
border-left: 4px solid var(--accent-green);
}
.quiz-feedback.incorrect {
background: rgba(239, 68, 68, 0.1);
border-left: 4px solid #ef4444;
}
/* Cheat Sheet */
.cheat-sheet {
background: var(--gradient-node);
border-radius: 20px;
padding: 40px;
margin: 30px 0;
}
.cheat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 30px;
}
.cheat-item {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 20px;
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.cheat-item h4 {
color: #fff;
margin-bottom: 10px;
font-weight: 600;
}
.cheat-item code {
background: rgba(0, 0, 0, 0.3);
padding: 2px 8px;
border-radius: 5px;
font-size: 0.9rem;
}
.badge {
display: inline-block;
padding: 5px 15px;
background: var(--gradient-2);
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
margin: 5px;
}
.highlight {
color: var(--accent-green);
font-weight: 600;
}
.comparison-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.comparison-table th,
.comparison-table td {
padding: 15px;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.comparison-table th {
background: var(--bg-secondary);
color: var(--accent-green);
font-weight: 600;
}
.comparison-table tr:hover {
background: rgba(255, 255, 255, 0.05);
}
/* Footer */
.footer {
text-align: center;
padding: 40px 20px;
background: var(--bg-secondary);
margin-top: 80px;
}
.footer p {
color: var(--text-secondary);
margin: 10px 0;
}
/* Confetti */
.confetti {
position: fixed;
width: 10px;
height: 10px;
z-index: 9999;
}
@keyframes confetti-fall {
to {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
/* Responsive */
@media (max-width: 768px) {
.hero h1 {
font-size: 2rem;
}
.command-display {
font-size: 2.5rem;
padding: 20px 40px;
}
.hero p {
font-size: 1rem;
}
.section-title {
font-size: 1.8rem;
}
.card {
padding: 25px;
}
.step {
padding-left: 70px;
}
.step::before {
width: 40px;
height: 40px;
font-size: 1.2rem;
}
}
</style>
</head>
<body>
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>
<div class="hero">
<div class="hero-content">
<h1>🚀 Master the Node.js REPL</h1>
<div class="command-display">node</div>
<p>Your interactive JavaScript playground! 🎮</p>
</div>
</div>
<div class="container">
<!-- What Is It Section -->
<section class="section" id="what-is-it">
<h2 class="section-title">🤔 What Is It?</h2>
<div class="card">
<p style="font-size: 1.2rem; margin-bottom: 20px;">
<strong>node</strong> (when run without arguments) starts the <span class="highlight">REPL</span> - an interactive JavaScript playground! 🎪
</p>
<p style="margin-bottom: 20px;">
REPL stands for <strong>Read-Eval-Print Loop</strong>. It's like having a conversation with JavaScript - you type code, it runs immediately, shows you the result, and waits for more!
</p>
<div class="info">
<strong>Think of it like this:</strong> The REPL is like a JavaScript calculator on steroids! You can test code snippets, experiment with functions, and see results instantly without creating files. 🧪
</div>
<div style="margin-top: 30px;">
<h3 style="color: var(--accent-cyan); margin-bottom: 15px;">What does REPL mean?</h3>
<ul style="margin-left: 30px; line-height: 2;">
<li><strong>Read</strong>: Takes your JavaScript code input</li>
<li><strong>Eval</strong>: Evaluates (executes) the code</li>
<li><strong>Print</strong>: Prints the result to the console</li>
<li><strong>Loop</strong>: Repeats the process, waiting for more input</li>
</ul>
</div>
</div>
</section>
<!-- Why Use It Section -->
<section class="section" id="why-use-it">
<h2 class="section-title">✨ Why Use the REPL?</h2>
<div class="card">
<div class="cheat-grid">
<div class="cheat-item">
<h4>⚡ Quick Testing</h4>
<p>Test JavaScript code instantly without creating files!</p>
</div>
<div class="cheat-item">
<h4>🧪 Experimentation</h4>
<p>Try out new APIs, libraries, and language features safely.</p>
</div>
<div class="cheat-item">
<h4>🎓 Learning</h4>
<p>Perfect for learning JavaScript - see results immediately!</p>
</div>
<div class="cheat-item">
<h4>🐛 Debugging</h4>
<p>Test small pieces of code to isolate bugs.</p>
</div>
<div class="cheat-item">
<h4>🔍 Exploration</h4>
<p>Explore Node.js modules and their methods interactively.</p>
</div>
<div class="cheat-item">
<h4>💻 Calculator++</h4>
<p>Use it as a powerful calculator with JavaScript's math functions!</p>
</div>
</div>
</div>
</section>
<!-- How Does It Work Section -->
<section class="section" id="how-it-works">
<h2 class="section-title">⚙️ How Does It Work?</h2>
<div class="card">
<p style="margin-bottom: 30px;">Let's start the REPL and explore! 🚀</p>
<div class="steps">
<div class="step">
<h3>Open Your Terminal</h3>
<p>Open Terminal (Mac/Linux) or Command Prompt/PowerShell (Windows).</p>
</div>
<div class="step">
<h3>Type 'node' and Press Enter</h3>
<p>Simply type <code>node</code> and hit Enter. You'll see the REPL prompt: <code>></code></p>
</div>
<div class="step">
<h3>Start Coding!</h3>
<p>Type any JavaScript expression and press Enter. The result appears immediately!</p>
</div>
<div class="step">
<h3>Exit When Done</h3>
<p>Type <code>.exit</code> or press <code>Ctrl+C</code> twice to exit the REPL.</p>
</div>
</div>
<div class="success" style="margin-top: 30px;">
<strong>Pro Tip:</strong> The REPL remembers variables you declare during the session, so you can build on previous commands!
</div>
</div>
</section>
<!-- Live Demo Section -->
<section class="section" id="demo">
<h2 class="section-title">🎮 Interactive REPL Simulator</h2>
<div class="demo-container">
<h3 style="margin-bottom: 20px;">Try the REPL right here! 🎯</h3>
<p style="margin-bottom: 30px;">Click the examples below or type your own JavaScript code!</p>
<div style="display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px;">
<button class="demo-button" onclick="runReplCommand('2 + 2')">
<span>▶️</span>
<span>2 + 2</span>
</button>
<button class="demo-button" onclick="runReplCommand('Math.random()')">
<span>🎲</span>
<span>Random Number</span>
</button>
<button class="demo-button" onclick="runReplCommand('[1,2,3].map(x => x * 2)')">
<span>🔢</span>
<span>Array Map</span>
</button>
<button class="demo-button" onclick="clearRepl()">
<span>🗑️</span>
<span>Clear</span>
</button>
</div>
<div class="repl-simulator">
<div class="repl-header">
<div class="repl-dot red"></div>
<div class="repl-dot yellow"></div>
<div class="repl-dot green"></div>
</div>
<div class="repl-content" id="replContent">
<div style="color: var(--text-secondary); margin-bottom: 10px;">Welcome to Node.js REPL v20.0.0</div>
<div style="color: var(--text-secondary); margin-bottom: 15px;">Type ".help" for more information.</div>
</div>
<div class="repl-input-line">
<span class="repl-prompt">></span>
<input type="text" class="repl-input" id="replInput" placeholder="Type JavaScript code here..." onkeypress="handleReplEnter(event)">
</div>
</div>
<div class="tip">
<strong>Try these commands:</strong> <code>console.log("Hello!")</code>, <code>let x = 10</code>, <code>"hello".toUpperCase()</code>, <code>Date.now()</code>
</div>
</div>
</section>
<!-- Code Examples Section -->
<section class="section" id="code-examples">
<h2 class="section-title">💻 Real REPL Examples</h2>
<div class="card">
<p style="margin-bottom: 30px;">Here's what using the REPL looks like in practice! 🎬</p>
<div class="tabs">
<button class="tab active" onclick="switchTab('basic')">Basic Math</button>
<button class="tab" onclick="switchTab('variables')">Variables</button>
<button class="tab" onclick="switchTab('functions')">Functions</button>
<button class="tab" onclick="switchTab('modules')">Modules</button>
</div>
<div id="basic" class="tab-content active">
<h3 style="color: var(--accent-green); margin-bottom: 15px;">Basic Calculations</h3>
<div class="code-block">
<div class="code-header">
<span class="code-lang">Node.js REPL</span>
<button class="copy-btn" onclick="copyCode(this, 'basic-code')">📋 Copy</button>
</div>
<pre><code id="basic-code"><span class="repl-prompt">></span> 5 + 3
<span class="repl-output">8</span>
<span class="repl-prompt">></span> 10 * 2
<span class="repl-output">20</span>
<span class="repl-prompt">></span> Math.sqrt(16)
<span class="repl-output">4</span>
<span class="repl-prompt">></span> Math.PI
<span class="repl-output">3.141592653589793</span></code></pre>
</div>
<p style="margin-top: 15px;">Perfect for quick calculations and testing math operations! 🧮</p>
</div>
<div id="variables" class="tab-content">
<h3 style="color: var(--accent-green); margin-bottom: 15px;">Working with Variables</h3>
<div class="code-block">
<div class="code-header">
<span class="code-lang">Node.js REPL</span>
<button class="copy-btn" onclick="copyCode(this, 'var-code')">📋 Copy</button>
</div>
<pre><code id="var-code"><span class="repl-prompt">></span> <span class="code-keyword">let</span> name = <span class="code-string">"Alice"</span>
<span class="repl-output">undefined</span>
<span class="repl-prompt">></span> name
<span class="repl-output">'Alice'</span>
<span class="repl-prompt">></span> name.toUpperCase()
<span class="repl-output">'ALICE'</span>
<span class="repl-prompt">></span> <span class="code-keyword">let</span> age = <span class="code-number">25</span>
<span class="repl-output">undefined</span>
<span class="repl-prompt">></span> `${name} is ${age} years old`
<span class="repl-output">'Alice is 25 years old'</span></code></pre>
</div>
<p style="margin-top: 15px;">Variables persist throughout your REPL session! 📦</p>
</div>
<div id="functions" class="tab-content">
<h3 style="color: var(--accent-green); margin-bottom: 15px;">Defining Functions</h3>
<div class="code-block">
<div class="code-header">
<span class="code-lang">Node.js REPL</span>
<button class="copy-btn" onclick="copyCode(this, 'func-code')">📋 Copy</button>
</div>
<pre><code id="func-code"><span class="repl-prompt">></span> <span class="code-keyword">function</span> <span class="code-function">greet</span>(name) {
... <span class="code-keyword">return</span> <span class="code-string">`Hello, ${name}!`</span>
... }
<span class="repl-output">undefined</span>
<span class="repl-prompt">></span> <span class="code-function">greet</span>(<span class="code-string">"World"</span>)
<span class="repl-output">'Hello, World!'</span>
<span class="repl-prompt">></span> <span class="code-keyword">const</span> <span class="code-function">square</span> = x => x * x
<span class="repl-output">undefined</span>
<span class="repl-prompt">></span> <span class="code-function">square</span>(<span class="code-number">5</span>)
<span class="repl-output">25</span></code></pre>
</div>
<p style="margin-top: 15px;">Notice the <code>...</code> prompt for multi-line input! ⚡</p>
</div>
<div id="modules" class="tab-content">
<h3 style="color: var(--accent-green); margin-bottom: 15px;">Using Node.js Modules</h3>
<div class="code-block">
<div class="code-header">
<span class="code-lang">Node.js REPL</span>
<button class="copy-btn" onclick="copyCode(this, 'mod-code')">📋 Copy</button>
</div>
<pre><code id="mod-code"><span class="repl-prompt">></span> <span class="code-keyword">const</span> fs = <span class="code-function">require</span>(<span class="code-string">'fs'</span>)
<span class="repl-output">undefined</span>
<span class="repl-prompt">></span> fs.existsSync(<span class="code-string">'./package.json'</span>)
<span class="repl-output">true</span>
<span class="repl-prompt">></span> <span class="code-keyword">const</span> path = <span class="code-function">require</span>(<span class="code-string">'path'</span>)
<span class="repl-output">undefined</span>
<span class="repl-prompt">></span> path.join(<span class="code-string">'/home'</span>, <span class="code-string">'user'</span>, <span class="code-string">'file.txt'</span>)
<span class="repl-output">'/home/user/file.txt'</span></code></pre>
</div>
<p style="margin-top: 15px;">Test Node.js modules before using them in your code! 📚</p>
</div>
</div>
</section>
<!-- REPL Commands Section -->
<section class="section" id="repl-commands">
<h2 class="section-title">🎯 Special REPL Commands</h2>
<div class="card">
<p style="margin-bottom: 30px;">The REPL has special commands that start with a dot! 🔮</p>
<table class="comparison-table">
<thead>
<tr>
<th>Command</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.help</code></td>
<td>Show all REPL commands</td>
<td>Lists available commands</td>
</tr>
<tr>
<td><code>.exit</code></td>
<td>Exit the REPL</td>
<td>Closes the session</td>
</tr>
<tr>
<td><code>.break</code></td>
<td>Exit multi-line input</td>
<td>Cancel incomplete code</td>
</tr>
<tr>
<td><code>.clear</code></td>
<td>Reset REPL context</td>
<td>Clears all variables</td>
</tr>
<tr>
<td><code>.save filename</code></td>
<td>Save session to file</td>
<td><code>.save session.js</code></td>
</tr>
<tr>
<td><code>.load filename</code></td>
<td>Load file into REPL</td>
<td><code>.load script.js</code></td>
</tr>
<tr>
<td><code>.editor</code></td>
<td>Enter editor mode</td>
<td>Write multi-line code easily</td>
</tr>
</tbody>
</table>
<div class="tip" style="margin-top: 30px;">
<strong>Keyboard Shortcuts:</strong> Use <code>Ctrl+C</code> twice to exit, <code>Tab</code> for autocomplete, and <code>↑/↓</code> arrows for command history!
</div>
</div>
</section>
<!-- Common Mistakes Section -->
<section class="section" id="mistakes">
<h2 class="section-title">❌ Common Mistakes</h2>
<div class="card">
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><strong>1. Forgetting to Declare Variables</strong></span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<div class="accordion-body">
<div class="warning">
<strong>Mistake:</strong> Using variables without <code>let</code>, <code>const</code>, or <code>var</code>
</div>
<div class="code-block" style="margin-top: 15px;">
<pre><code><span class="repl-prompt">></span> x = 10 <span class="code-comment">// ❌ Creates global variable</span>
<span class="repl-output">10</span>
<span class="repl-prompt">></span> <span class="code-keyword">let</span> x = 10 <span class="code-comment">// ✅ Properly declared</span>
<span class="repl-output">undefined</span></code></pre>
</div>
<p style="margin-top: 15px;"><strong>Solution:</strong> Always use <code>let</code> or <code>const</code> to declare variables!</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><strong>2. Expecting File System Access</strong></span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<div class="accordion-body">
<div class="warning">
<strong>Confusion:</strong> The REPL runs in the current directory
</div>
<p style="margin-top: 15px;">When you use <code>require()</code> or file operations, paths are relative to where you started the REPL, not where Node.js is installed.</p>
<div class="tip" style="margin-top: 15px;">
<strong>Check your location:</strong> Use <code>process.cwd()</code> to see the current working directory!
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><strong>3. Not Using .editor for Multi-line Code</strong></span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<div class="accordion-body">
<div class="warning">
<strong>Problem:</strong> Writing complex multi-line code can be awkward
</div>
<div class="success" style="margin-top: 15px;">
<strong>Solution:</strong> Use <code>.editor</code> command to enter editor mode! Press <code>Ctrl+D</code> when done.
</div>
<div class="code-block" style="margin-top: 15px;">
<pre><code><span class="repl-prompt">></span> .editor
<span class="code-comment">// Entering editor mode (Ctrl+D to finish, Ctrl+C to cancel)</span>
<span class="code-keyword">function</span> <span class="code-function">complexFunction</span>() {
<span class="code-keyword">const</span> data = [];
<span class="code-keyword">for</span> (<span class="code-keyword">let</span> i = <span class="code-number">0</span>; i < <span class="code-number">10</span>; i++) {
data.push(i * <span class="code-number">2</span>);
}
<span class="code-keyword">return</span> data;
}
<span class="code-comment">// Press Ctrl+D</span></code></pre>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><strong>4. Redeclaring Variables with let/const</strong></span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<div class="accordion-body">
<div class="warning">
<strong>Error:</strong> Can't redeclare the same variable with let/const
</div>
<div class="code-block" style="margin-top: 15px;">
<pre><code><span class="repl-prompt">></span> <span class="code-keyword">let</span> x = <span class="code-number">5</span>
<span class="repl-output">undefined</span>
<span class="repl-prompt">></span> <span class="code-keyword">let</span> x = <span class="code-number">10</span> <span class="code-comment">// ❌ Error!</span>
<span class="code-error">Uncaught SyntaxError: Identifier 'x' has already been declared</span>
<span class="repl-prompt">></span> x = <span class="code-number">10</span> <span class="code-comment">// ✅ Just reassign</span>
<span class="repl-output">10</span></code></pre>
</div>
<p style="margin-top: 15px;"><strong>Solution:</strong> Use <code>.clear</code> to reset, or just reassign without <code>let</code>/<code>const</code>!</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><strong>5. Not Knowing How to Exit</strong></span>
<span class="accordion-icon">▼</span>
</div>
<div class="accordion-content">
<div class="accordion-body">
<div class="warning">
<strong>Stuck in REPL?</strong> Here are all the ways to exit!
</div>
<ul style="margin-left: 30px; margin-top: 15px; line-height: 2;">
<li>Type <code>.exit</code> and press Enter</li>
<li>Press <code>Ctrl+C</code> twice</li>
<li>Press <code>Ctrl+D</code> (Unix/Mac) or <code>Ctrl+Z</code> then Enter (Windows)</li>
<li>Type <code>process.exit()</code></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pro Tips Section -->
<section class="section" id="pro-tips">
<h2 class="section-title">🚀 Pro Tips</h2>
<div class="card">
<div class="cheat-grid">
<div class="cheat-item">
<h4>⌨️ Tab Completion</h4>
<p>Press <code>Tab</code> to autocomplete variable names, methods, and properties!</p>
</div>
<div class="cheat-item">
<h4>📜 Command History</h4>
<p>Use <code>↑</code> and <code>↓</code> arrows to navigate through previous commands.</p>
</div>
<div class="cheat-item">
<h4>🔍 Underscore Variable</h4>
<p><code>_</code> holds the result of the last expression! Try <code>5 + 5</code> then <code>_ * 2</code></p>
</div>
<div class="cheat-item">
<h4>💾 Save Your Session</h4>
<p>Use <code>.save filename.js</code> to save your REPL session for later!</p>
</div>
<div class="cheat-item">
<h4>📂 Load Files</h4>
<p><code>.load script.js</code> executes a file in the REPL context!</p>
</div>
<div class="cheat-item">
<h4>🎨 Custom REPL</h4>
<p>Create <code>~/.node_repl_history</code> to persist history across sessions!</p>
</div>
</div>
<div class="tip" style="margin-top: 30px;">
<strong>🎓 Advanced Tip:</strong> Use <code>global</code> object to access global variables, and <code>process</code> for environment info!
</div>
<div class="success" style="margin-top: 20px;">
<strong>💡 Quick Debugging:</strong> Copy-paste problematic code into REPL to test it in isolation!
</div>
<div class="info" style="margin-top: 20px;">
<strong>🔮 Hidden Gem:</strong> Type <code>_error</code> to see the last error that occurred!
</div>
</div>
</section>
<!-- Quiz Section -->
<section class="section" id="quiz">
<h2 class="section-title">🎯 Knowledge Check Quiz</h2>
<div class="quiz-container">
<p style="margin-bottom: 30px;">Test your REPL mastery! Click on the correct answer. 🧠</p>
<div class="quiz-question">
<h3>Question 1: What does REPL stand for?</h3>
<div class="quiz-options">
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">
A) Run-Execute-Print-Loop
</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 1)">
B) Read-Eval-Print-Loop
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">
C) Repeat-Evaluate-Process-Loop
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 1)">
D) Read-Execute-Parse-Loop
</div>
</div>
<div class="quiz-feedback" id="feedback1"></div>
</div>
<div class="quiz-question">
<h3>Question 2: How do you exit the Node.js REPL?</h3>
<div class="quiz-options">
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">
A) Type "quit"
</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 2)">
B) Type .exit or press Ctrl+C twice
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">
C) Close the terminal window
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 2)">
D) Type "stop"
</div>
</div>
<div class="quiz-feedback" id="feedback2"></div>
</div>
<div class="quiz-question">
<h3>Question 3: What does the underscore (_) represent in the REPL?</h3>
<div class="quiz-options">
<div class="quiz-option" onclick="checkAnswer(this, false, 3)">
A) A placeholder for undefined
</div>
<div class="quiz-option" onclick="checkAnswer(this, true, 3)">
B) The result of the last expression
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 3)">
C) A special variable for errors
</div>
<div class="quiz-option" onclick="checkAnswer(this, false, 3)">
D) The current line number
</div>
</div>
<div class="quiz-feedback" id="feedback3"></div>
</div>
<div id="quizScore" style="margin-top: 30px; padding: 20px; background: var(--bg-secondary); border-radius: 12px; display: none;">
<h3 style="color: var(--accent-green);">🎉 Quiz Complete!</h3>
<p id="scoreText" style="font-size: 1.2rem; margin-top: 10px;"></p>
</div>
</div>
</section>
<!-- Cheat Sheet Section -->
<section class="section" id="cheat-sheet">
<h2 class="section-title">📚 Quick Reference Cheat Sheet</h2>
<div class="cheat-sheet">
<h3 style="margin-bottom: 20px;">Save this for later! 🔖</h3>
<div class="cheat-grid">
<div class="cheat-item">
<h4>🚀 Start REPL</h4>
<p><code>node</code></p>
<p style="font-size: 0.85rem; margin-top: 5px;">Opens interactive shell</p>
</div>
<div class="cheat-item">
<h4>🚪 Exit REPL</h4>
<p><code>.exit</code> or <code>Ctrl+C</code> (×2)</p>
<p style="font-size: 0.85rem; margin-top: 5px;">Close the session</p>
</div>
<div class="cheat-item">
<h4>❓ Get Help</h4>
<p><code>.help</code></p>
<p style="font-size: 0.85rem; margin-top: 5px;">Show all commands</p>
</div>
<div class="cheat-item">
<h4>🧹 Clear Context</h4>
<p><code>.clear</code></p>
<p style="font-size: 0.85rem; margin-top: 5px;">Reset all variables</p>
</div>
<div class="cheat-item">
<h4>✏️ Editor Mode</h4>
<p><code>.editor</code></p>
<p style="font-size: 0.85rem; margin-top: 5px;">Multi-line editing</p>
</div>
<div class="cheat-item">
<h4>💾 Save Session</h4>
<p><code>.save file.js</code></p>
<p style="font-size: 0.85rem; margin-top: 5px;">Save to file</p>
</div>
<div class="cheat-item">
<h4>📂 Load File</h4>
<p><code>.load file.js</code></p>
<p style="font-size: 0.85rem; margin-top: 5px;">Execute file in REPL</p>
</div>
<div class="cheat-item">
<h4>🔙 Last Result</h4>
<p><code>_</code></p>
<p style="font-size: 0.85rem; margin-top: 5px;">Previous expression result</p>
</div>
<div class="cheat-item">
<h4>⌨️ Autocomplete</h4>
<p><code>Tab</code></p>
<p style="font-size: 0.85rem; margin-top: 5px;">Complete names/methods</p>
</div>
<div class="cheat-item">
<h4>📜 History</h4>
<p><code>↑ / ↓</code></p>
<p style="font-size: 0.85rem; margin-top: 5px;">Navigate commands</p>
</div>
<div class="cheat-item">
<h4>🛑 Break Input</h4>
<p><code>.break</code> or <code>Ctrl+C</code></p>
<p style="font-size: 0.85rem; margin-top: 5px;">Cancel multi-line</p>
</div>
<div class="cheat-item">
<h4>🌍 Current Dir</h4>
<p><code>process.cwd()</code></p>
<p style="font-size: 0.85rem; margin-top: 5px;">Show working directory</p>
</div>
</div>
<div style="margin-top: 30px; padding: 20px; background: rgba(255,255,255,0.1); border-radius: 12px;">
<h4 style="color: #fff; margin-bottom: 15px;">🎯 Common Use Cases</h4>
<p>✅ Quick calculations: <code>Math.pow(2, 10)</code></p>
<p>✅ Test string methods: <code>"hello".toUpperCase()</code></p>
<p>✅ Array operations: <code>[1,2,3].map(x => x * 2)</code></p>
<p>✅ Date manipulation: <code>new Date().toISOString()</code></p>
<p>✅ Module testing: <code>require('fs').existsSync('file.txt')</code></p>
</div>
</div>
</section>
<!-- Summary Section -->
<section class="section" id="summary">
<h2 class="section-title">🎓 What You've Learned</h2>
<div class="card">
<h3 style="margin-bottom: 20px;">Congratulations! You're now a REPL master! 🏆</h3>
<div style="display: grid; gap: 20px;">
<div style="display: flex; align-items: start; gap: 15px;">
<span style="font-size: 2rem;">✅</span>
<div>
<strong>What the REPL is</strong> - An interactive JavaScript shell for testing code instantly
</div>
</div>
<div style="display: flex; align-items: start; gap: 15px;">
<span style="font-size: 2rem;">✅</span>
<div>
<strong>How to use it</strong> - Start with <code>node</code>, type code, see results immediately
</div>
</div>
<div style="display: flex; align-items: start; gap: 15px;">
<span style="font-size: 2rem;">✅</span>
<div>
<strong>Special commands</strong> - <code>.exit</code>, <code>.help</code>, <code>.editor</code>, and more
</div>
</div>
<div style="display: flex; align-items: start; gap: 15px;">
<span style="font-size: 2rem;">✅</span>
<div>
<strong>Pro tips</strong> - Tab completion, command history, and the <code>_</code> variable
</div>
</div>
<div style="display: flex; align-items: start; gap: 15px;">
<span style="font-size: 2rem;">✅</span>
<div>
<strong>Common mistakes</strong> - How to avoid pitfalls and use the REPL effectively
</div>
</div>
</div>
<div style="margin-top: 40px; padding: 30px; background: var(--gradient-node); border-radius: 15px; text-align: center;">
<h3 style="margin-bottom: 15px;">🚀 Ready to Experiment?</h3>
<p style="font-size: 1.1rem;">Open your terminal and type <code style="background: rgba(0,0,0,0.3); padding: 5px 10px; border-radius: 5px;">node</code> to start exploring!</p>
<div style="margin-top: 20px;">
<span class="badge">🎮 REPL Master</span>
<span class="badge">⚡ JavaScript Ninja</span>
<span class="badge">🧪 Code Experimenter</span>
</div>
</div>
</div>
</section>
</div>
<div class="footer">
<h3 style="margin-bottom: 15px;">✨ Tutorial Complete! ✨</h3>
<p>Generated by <strong>AI Prompt Dictionary</strong> 🤖
Live Preview