Print an array in the console
📦 Node.js-> Command Line
✨ The Prompt Phrase
console.log(petsArray);
💻 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>🖨️ Printing Arrays in Node.js Console</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: #fbbf24;
--blue: #3b82f6;
--red: #ef4444;
--bg: #0a0e1a;
--card: #151b2e;
--text: #e2e8f0;
}
body {
font-family: 'Poppins', sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
overflow-x: hidden;
}
/* Animated background */
.bg-animation {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
}
.float-bracket {
position: absolute;
font-size: 3rem;
opacity: 0.1;
font-family: 'Fira Code', monospace;
animation: floatAround 15s infinite;
color: var(--cyan);
}
@keyframes floatAround {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(50px, -50px) rotate(90deg); }
50% { transform: translate(100px, 50px) rotate(180deg); }
75% { transform: translate(-50px, 100px) rotate(270deg); }
}
.orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.15;
animation: orbPulse 20s ease-in-out infinite;
}
@keyframes orbPulse {
0%, 100% { transform: scale(1); opacity: 0.15; }
50% { transform: scale(1.5); opacity: 0.25; }
}
/* Progress bar */
.progress {
position: fixed;
top: 0;
left: 0;
height: 4px;
background: linear-gradient(90deg, var(--node), var(--cyan), var(--purple));
z-index: 1000;
transition: width 0.2s;
}
/* Header */
header {
text-align: center;
padding: 60px 20px 40px;
position: relative;
}
.logo-container {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
margin-bottom: 25px;
flex-wrap: wrap;
}
.array-icon {
width: 90px;
height: 90px;
background: linear-gradient(135deg, var(--node), var(--cyan));
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 15px 40px rgba(104, 160, 99, 0.3);
animation: iconBounce 3s ease-in-out infinite;
}
@keyframes iconBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.array-icon:hover {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 20px 60px rgba(104, 160, 99, 0.5);
}
.bracket-demo {
font-family: 'Fira Code', monospace;
font-size: 1.5rem;
color: var(--cyan);
background: rgba(6, 182, 212, 0.1);
padding: 10px 20px;
border-radius: 12px;
animation: bracketPulse 2s ease-in-out infinite;
}
@keyframes bracketPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
h1 {
font-size: clamp(1.8rem, 5vw, 3rem);
font-weight: 800;
background: linear-gradient(135deg, var(--node), var(--cyan), var(--purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 15px;
}
.subtitle {
color: #64748b;
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
}
/* Main container */
main {
max-width: 950px;
margin: 0 auto;
padding: 20px;
}
.section {
margin-bottom: 45px;
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease-out;
}
.section.vis {
opacity: 1;
transform: translateY(0);
}
.sec-title {
display: flex;
align-items: center;
gap: 14px;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 18px;
}
.sec-icon {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
animation: iconWiggle 2s ease-in-out infinite;
}
@keyframes iconWiggle {
0%, 100% { transform: rotate(-3deg); }
50% { transform: rotate(3deg); }
}
/* Cards */
.card {
background: var(--card);
border-radius: 18px;
padding: 28px;
margin-bottom: 20px;
border: 1px solid rgba(255,255,255,0.08);
transition: all 0.3s;
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--node), var(--cyan), var(--purple));
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0,0,0,0.3);
border-color: var(--cyan);
}
.card h3 {
color: var(--cyan);
margin-bottom: 15px;
font-size: 1.2rem;
display: flex;
align-items: center;
gap: 10px;
}
.card p {
color: #94a3b8;
line-height: 1.7;
margin-bottom: 12px;
}
/* Code blocks */
.code-block {
background: #0a0f1a;
border-radius: 14px;
overflow: hidden;
margin: 18px 0;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.code-header {
background: rgba(0,0,0,0.3);
padding: 12px 18px;
display: flex;
align-items: center;
justify-content: space-between;
}
.code-dots {
display: flex;
gap: 8px;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.dot.r { background: #ff5f56; }
.dot.y { background: #ffbd2e; }
.dot.g { background: #27ca40; }
.code-lang {
color: var(--node);
font-size: 0.8rem;
font-weight: 600;
font-family: 'Fira Code', monospace;
}
.code-copy {
background: rgba(255,255,255,0.1);
border: none;
padding: 6px 14px;
border-radius: 6px;
color: var(--text);
cursor: pointer;
font-size: 0.75rem;
transition: all 0.3s;
}
.code-copy:hover { background: var(--node); }
.code-copy.copied { background: var(--cyan); }
.code-body {
padding: 20px;
font-family: 'Fira Code', monospace;
font-size: 0.85rem;
line-height: 1.8;
overflow-x: auto;
}
.kw { color: var(--purple); }
.str { color: var(--yellow); }
.num { color: var(--orange); }
.func { color: var(--cyan); }
.comment { color: #6b7280; font-style: italic; }
.var { color: var(--pink); }
/* Methods grid */
.methods-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
margin: 20px 0;
}
.method-card {
background: rgba(255,255,255,0.03);
padding: 20px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.08);
cursor: pointer;
transition: all 0.3s;
position: relative;
}
.method-card:hover {
border-color: var(--cyan);
background: rgba(6, 182, 212, 0.1);
transform: translateY(-5px);
}
.method-name {
font-family: 'Fira Code', monospace;
color: var(--cyan);
font-weight: 600;
font-size: 1rem;
margin-bottom: 8px;
}
.method-desc {
color: #94a3b8;
font-size: 0.85rem;
line-height: 1.5;
}
.method-badge {
position: absolute;
top: 10px;
right: 10px;
background: linear-gradient(135deg, var(--orange), var(--yellow));
color: #000;
padding: 3px 10px;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 700;
}
/* Interactive playground */
.playground {
background: linear-gradient(135deg, rgba(104, 160, 99, 0.1), rgba(6, 182, 212, 0.1));
border-radius: 18px;
padding: 30px;
border: 2px solid rgba(104, 160, 99, 0.3);
margin: 25px 0;
}
.playground-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--yellow);
margin-bottom: 20px;
text-align: center;
}
.array-builder {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin: 20px 0;
}
.array-item {
background: var(--card);
padding: 12px 20px;
border-radius: 10px;
font-family: 'Fira Code', monospace;
cursor: pointer;
transition: all 0.3s;
border: 2px solid transparent;
animation: itemPop 0.3s ease-out;
}
@keyframes itemPop {
0% { transform: scale(0); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.array-item:hover {
border-color: var(--cyan);
transform: scale(1.05);
}
.array-item.selected {
border-color: var(--node);
background: rgba(104, 160, 99, 0.2);
}
.playground-controls {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin: 20px 0;
}
.playground-btn {
background: linear-gradient(135deg, var(--node), var(--cyan));
border: none;
padding: 12px 24px;
border-radius: 10px;
color: white;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 8px;
}
.playground-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(104, 160, 99, 0.4);
}
.playground-btn.secondary {
background: linear-gradient(135deg, var(--purple), var(--pink));
}
.output-display {
background: #0a0f1a;
border-radius: 12px;
padding: 20px;
min-height: 100px;
font-family: 'Fira Code', monospace;
font-size: 0.85rem;
color: var(--node);
margin-top: 20px;
border: 1px solid rgba(255,255,255,0.1);
}
.output-line {
margin-bottom: 8px;
animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateX(-10px); }
to { opacity: 1; transform: translateX(0); }
}
/* Comparison table */
.comparison {
overflow-x: auto;
margin: 20px 0;
}
table {
width: 100%;
border-collapse: collapse;
background: var(--card);
border-radius: 12px;
overflow: hidden;
}
th {
background: rgba(104, 160, 99, 0.2);
padding: 15px;
text-align: left;
color: var(--cyan);
font-weight: 600;
}
td {
padding: 15px;
border-top: 1px solid rgba(255,255,255,0.05);
color: #94a3b8;
}
tr:hover {
background: rgba(255,255,255,0.03);
}
/* Info boxes */
.info {
padding: 18px;
border-radius: 12px;
margin: 16px 0;
display: flex;
gap: 14px;
align-items: flex-start;
}
.info.tip {
background: rgba(104, 160, 99, 0.12);
border-left: 4px solid var(--node);
}
.info.warn {
background: rgba(251, 191, 36, 0.12);
border-left: 4px solid var(--yellow);
}
.info.important {
background: rgba(139, 92, 246, 0.12);
border-left: 4px solid var(--purple);
}
.info-icon { font-size: 1.3rem; flex-shrink: 0; }
/* Interactive terminal */
.terminal {
background: #0a0f1a;
border-radius: 14px;
overflow: hidden;
margin: 20px 0;
box-shadow: 0 15px 50px rgba(0,0,0,0.4);
}
.term-header {
background: rgba(0,0,0,0.3);
padding: 12px 18px;
display: flex;
align-items: center;
gap: 10px;
}
.term-title {
flex: 1;
text-align: center;
color: #64748b;
font-size: 0.85rem;
}
.term-body {
padding: 20px;
font-family: 'Fira Code', monospace;
font-size: 0.85rem;
min-height: 150px;
max-height: 400px;
overflow-y: auto;
}
.term-line { margin-bottom: 8px; }
.prompt { color: var(--node); font-weight: 600; }
/* Quiz */
.quiz {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1));
border-radius: 18px;
padding: 28px;
border: 2px solid rgba(139, 92, 246, 0.3);
}
.quiz-q {
font-size: 1.15rem;
font-weight: 600;
margin-bottom: 20px;
}
.quiz-opts {
display: flex;
flex-direction: column;
gap: 12px;
}
.quiz-opt {
padding: 16px 20px;
background: var(--card);
border-radius: 12px;
cursor: pointer;
transition: all 0.3s;
border: 2px solid transparent;
display: flex;
align-items: center;
gap: 12px;
}
.quiz-opt:hover {
border-color: var(--purple);
transform: translateX(8px);
}
.quiz-opt.correct {
border-color: var(--node);
background: rgba(104, 160, 99, 0.2);
}
.quiz-opt.wrong {
border-color: var(--red);
background: rgba(239, 68, 68, 0.2);
}
.opt-letter {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.quiz-result {
margin-top: 16px;
padding: 16px;
border-radius: 10px;
text-align: center;
font-weight: 600;
display: none;
}
.quiz-result.show { display: block; animation: fadeIn 0.4s; }
/* FAB */
.fab {
position: fixed;
bottom: 25px;
right: 25px;
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--node), var(--cyan));
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
box-shadow: 0 10px 30px rgba(104, 160, 99, 0.5);
transition: all 0.3s;
z-index: 100;
opacity: 0;
visibility: hidden;
}
.fab.show { opacity: 1; visibility: visible; }
.fab:hover { transform: scale(1.15) rotate(10deg); }
/* Toast */
.toast {
position: fixed;
bottom: 100px;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: var(--card);
padding: 16px 28px;
border-radius: 12px;
border: 2px solid var(--node);
box-shadow: 0 15px 50px rgba(0,0,0,0.5);
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
z-index: 1000;
opacity: 0;
max-width: 90%;
}
.toast.show {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
/* Footer */
footer {
text-align: center;
padding: 40px 20px;
background: var(--card);
margin-top: 40px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-icons {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 16px;
}
.footer-icon {
width: 45px;
height: 45px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
cursor: pointer;
transition: all 0.3s;
}
.footer-icon:hover {
background: var(--node);
transform: translateY(-5px);
}
@media (max-width: 600px) {
.methods-grid { grid-template-columns: 1fr; }
.playground-controls { flex-direction: column; }
.playground-btn { width: 100%; justify-content: center; }
}
</style>
</head>
<body>
<div class="progress" id="progress"></div>
<div class="bg-animation" id="bgAnim"></div>
<header>
<div class="logo-container">
<div class="array-icon" onclick="celebrate()">📊</div>
<div class="bracket-demo">[ 1, 2, 3, 4, 5 ]</div>
</div>
<h1>Printing Arrays in Node.js Console</h1>
<p class="subtitle">Master all the ways to display arrays in your Node.js terminal! 🚀</p>
</header>
<main>
<!-- Introduction -->
<section class="section" id="intro">
<div class="sec-title">
<div class="sec-icon" style="background: linear-gradient(135deg, var(--node), var(--cyan));">🎯</div>
<span>Why Print Arrays?</span>
</div>
<div class="card">
<h3>🖨️ Essential for Debugging & Development</h3>
<p>Printing arrays to the console is one of the most fundamental debugging techniques in Node.js. Whether you're inspecting data, testing functions, or debugging logic, knowing how to properly display arrays is crucial!</p>
<div class="info tip">
<span class="info-icon">💡</span>
<div>
<strong>Pro Tip:</strong>
<p>Different methods show different levels of detail. Choose the right tool for your debugging needs!</p>
</div>
</div>
</div>
</section>
<!-- Basic console.log -->
<section class="section" id="basic">
<div class="sec-title">
<div class="sec-icon" style="background: linear-gradient(135deg, var(--purple), var(--pink));">1️⃣</div>
<span>Method 1: console.log()</span>
</div>
<div class="card">
<h3>📝 The Most Common Method</h3>
<p>The simplest and most widely used way to print arrays. Perfect for quick debugging!</p>
<div class="code-block">
<div class="code-header">
<div class="code-dots">
<div class="dot r"></div>
<div class="dot y"></div>
<div class="dot g"></div>
</div>
<span class="code-lang">Node.js</span>
<button class="code-copy" onclick="copyCode(this, 'const fruits = [\'apple\', \'banana\', \'cherry\'];\nconsole.log(fruits);')">Copy</button>
</div>
<div class="code-body">
<span class="kw">const</span> <span class="var">fruits</span> = [<span class="str">'apple'</span>, <span class="str">'banana'</span>, <span class="str">'cherry'</span>];<br>
<span class="func">console</span>.<span class="func">log</span>(<span class="var">fruits</span>);<br><br>
<span class="comment">// Output: [ 'apple', 'banana', 'cherry' ]</span>
</div>
</div>
<div class="info important">
<span class="info-icon">⭐</span>
<div>
<strong>Best For:</strong>
<p>Quick debugging, simple arrays, and when you want a clean, readable output.</p>
</div>
</div>
</div>
</section>
<!-- console.table -->
<section class="section" id="table">
<div class="sec-title">
<div class="sec-icon" style="background: linear-gradient(135deg, var(--cyan), var(--blue));">2️⃣</div>
<span>Method 2: console.table()</span>
</div>
<div class="card">
<h3>📊 Beautiful Tabular Display</h3>
<p>Display arrays in a formatted table - perfect for arrays of objects!</p>
<div class="code-block">
<div class="code-header">
<div class="code-dots">
<div class="dot r"></div>
<div class="dot y"></div>
<div class="dot g"></div>
</div>
<span class="code-lang">Node.js</span>
<button class="code-copy" onclick="copyCode(this, 'const users = [\n { name: \'Alice\', age: 25 },\n { name: \'Bob\', age: 30 }\n];\nconsole.table(users);')">Copy</button>
</div>
<div class="code-body">
<span class="kw">const</span> <span class="var">users</span> = [<br>
{ <span class="var">name</span>: <span class="str">'Alice'</span>, <span class="var">age</span>: <span class="num">25</span> },<br>
{ <span class="var">name</span>: <span class="str">'Bob'</span>, <span class="var">age</span>: <span class="num">30</span> }<br>
];<br>
<span class="func">console</span>.<span class="func">table</span>(<span class="var">users</span>);<br><br>
<span class="comment">// Displays a formatted table with columns</span>
</div>
</div>
<div class="info tip">
<span class="info-icon">✨</span>
<div>
<strong>Amazing Feature:</strong>
<p>console.table() automatically creates column headers and aligns data beautifully!</p>
</div>
</div>
</div>
</section>
<!-- JSON.stringify -->
<section class="section" id="json">
<div class="sec-title">
<div class="sec-icon" style="background: linear-gradient(135deg, var(--orange), var(--yellow));">3️⃣</div>
<span>Method 3: JSON.stringify()</span>
</div>
<div class="card">
<h3>🎨 Pretty-Printed JSON</h3>
<p>Convert arrays to formatted JSON strings - great for nested structures!</p>
<div class="code-block">
<div class="code-header">
<div class="code-dots">
<div class="dot r"></div>
<div class="dot y"></div>
<div class="dot g"></div>
</div>
<span class="code-lang">Node.js</span>
<button class="code-copy" onclick="copyCode(this, 'const data = [1, 2, [3, 4], { key: \'value\' }];\nconsole.log(JSON.stringify(data, null, 2));')">Copy</button>
</div>
<div class="code-body">
<span class="kw">const</span> <span class="var">data</span> = [<span class="num">1</span>, <span class="num">2</span>, [<span class="num">3</span>, <span class="num">4</span>], { <span class="var">key</span>: <span class="str">'value'</span> }];<br>
<span class="func">console</span>.<span class="func">log</span>(<span class="func">JSON</span>.<span class="func">stringify</span>(<span class="var">data</span>, <span class="kw">null</span>, <span class="num">2</span>));<br><br>
<span class="comment">// Parameters: (data, replacer, spaces for indentation)</span>
</div>
</div>
<div class="code-block">
<div class="code-header">
<div class="code-dots">
<div class="dot r"></div>
<div class="dot y"></div>
<div class="dot g"></div>
</div>
<span class="code-lang">Output</span>
</div>
<div class="code-body">
[<br>
<span class="num">1</span>,<br>
<span class="num">2</span>,<br>
[<br>
<span class="num">3</span>,<br>
<span class="num">4</span><br>
],<br>
{<br>
<span class="str">"key"</span>: <span class="str">"value"</span><br>
}<br>
]
</div>
</div>
</div>
</section>
<!-- console.dir -->
<section class="section" id="dir">
<div class="sec-title">
<div class="sec-icon" style="background: linear-gradient(135deg, var(--pink), var(--purple));">4️⃣</div>
<span>Method 4: console.dir()</span>
</div>
<div class="card">
<h3>🔍 Deep Inspection</h3>
<p>Inspect arrays with full depth and detail - shows everything!</p>
<div class="code-block">
<div class="code-header">
<div class="code-dots">
<div class="dot r"></div>
<div class="dot y"></div>
<div class="dot g"></div>
</div>
<span class="code-lang">Node.js</span>
<button class="code-copy" onclick="copyCode(this, 'const nested = [[1, 2], [3, [4, 5]]];\nconsole.dir(nested, { depth: null, colors: true });')">Copy</button>
</div>
<div class="code-body">
<span class="kw">const</span> <span class="var">nested</span> = [[<span class="num">1</span>, <span class="num">2</span>], [<span class="num">3</span>, [<span class="num">4</span>, <span class="num">5</span>]]];<br>
<span class="func">console</span>.<span class="func">dir</span>(<span class="var">nested</span>, { <span class="var">depth</span>: <span class="kw">null</span>, <span class="var">colors</span>: <span class="kw">true</span> });<br><br>
<span class="comment">// depth: null shows unlimited nesting</span><br>
<span class="comment">// colors: true adds syntax highlighting</span>
</div>
</div>
<div class="info warn">
<span class="info-icon">⚠️</span>
<div>
<strong>Note:</strong>
<p>By default, console.dir() only shows 2 levels deep. Use depth: null for full inspection!</p>
</div>
</div>
</div>
</section>
<!-- util.inspect -->
<section class="section" id="util">
<div class="sec-title">
<div class="sec-icon" style="background: linear-gradient(135deg, var(--node), var(--node-dark));">5️⃣</div>
<span>Method 5: util.inspect()</span>
</div>
<div class="card">
<h3>🛠️ Advanced Inspection</h3>
<p>Node.js's powerful utility for customized array inspection!</p>
<div class="code-block">
<div class="code-header">
<div class="code-dots">
<div class="dot r"></div>
<div class="dot y"></div>
<div class="dot g"></div>
</div>
<span class="code-lang">Node.js</span>
<button class="code-copy" onclick="copyCode(this, 'const util = require(\'util\');\nconst arr = [1, 2, 3, { a: 4 }];\nconsole.log(util.inspect(arr, { colors: true, depth: null }));')">Copy</button>
</div>
<div class="code-body">
<span class="kw">const</span> <span class="var">util</span> = <span class="func">require</span>(<span class="str">'util'</span>);<br>
<span class="kw">const</span> <span class="var">arr</span> = [<span class="num">1</span>, <span class="num">2</span>, <span class="num">3</span>, { <span class="var">a</span>: <span class="num">4</span> }];<br>
<span class="func">console</span>.<span class="func">log</span>(<span class="var">util</span>.<span class="func">inspect</span>(<span class="var">arr</span>, { <span class="var">colors</span>: <span class="kw">true</span>, <span class="var">depth</span>: <span class="kw">null</span> }));
</div>
</div>
</div>
</section>
<!-- Loop methods -->
<section class="section" id="loops">
<div class="sec-title">
<div class="sec-icon" style="background: linear-gradient(135deg, var(--yellow), var(--orange));">6️⃣</div>
<span>Method 6: Loop Methods</span>
</div>
<div class="card">
<h3>🔄 Print Each Element</h3>
<p>Use loops to print array elements one by one with custom formatting!</p>
<div class="methods-grid">
<div class="method-card" onclick="showToast('forEach - Most common loop method')">
<div class="method-badge">POPULAR</div>
<div class="method-name">forEach()</div>
<div class="method-desc">Iterate and print each element</div>
</div>
<div class="method-card" onclick="showToast('for...of - Clean and modern')">
<div class="method-name">for...of</div>
<div class="method-desc">Modern ES6 loop syntax</div>
</div>
<div class="method-card" onclick="showToast('map - Transform while printing')">
<div class="method-name">map()</div>
<div class="method-desc">Transform and display</div>
</div>
</div>
<div class="code-block">
<div class="code-header">
<div class="code-dots">
<div class="dot r"></div>
<div class="dot y"></div>
<div class="dot g"></div>
</div>
<span class="code-lang">forEach Example</span>
<button class="code-copy" onclick="copyCode(this, 'const colors = [\'red\', \'green\', \'blue\'];\ncolors.forEach((color, index) => {\n console.log(`${index}: ${color}`);\n});')">Copy</button>
</div>
<div class="code-body">
<span class="kw">const</span> <span class="var">colors</span> = [<span class="str">'red'</span>, <span class="str">'green'</span>, <span class="str">'blue'</span>];<br>
<span class="var">colors</span>.<span class="func">forEach</span>((<span class="var">color</span>, <span class="var">index</span>) => {<br>
<span class="func">console</span>.<span class="func">log</span>(`${<span class="var">index</span>}: ${<span class="var">color</span>}`);<br>
});<br><br>
<span class="comment">// Output:</span><br>
<span class="comment">// 0: red</span><br>
<span class="comment">// 1: green</span><br>
<span class="comment">// 2: blue</span>
</div>
</div>
</div>
</section>
<!-- Interactive Playground -->
<section class="section" id="playground">
<div class="sec-title">
<div class="sec-icon" style="background: linear-gradient(135deg, var(--cyan), var(--purple));">🎮</div>
<span>Interactive Playground</span>
</div>
<div class="playground">
<div class="playground-title">🎯 Try Different Print Methods!</div>
<p style="text-align: center; color: #94a3b8; margin-bottom: 20px;">Build an array and see how different methods display it</p>
<div class="array-builder" id="arrayBuilder">
<div class="array-item" onclick="addToArray('🍎')">🍎 Apple</div>
<div class="array-item" onclick="addToArray('🍌')">🍌 Banana</div>
<div class="array-item" onclick="addToArray('🍒')">🍒 Cherry</div>
<div class="array-item" onclick="addToArray('🍇')">🍇 Grapes</div>
<div class="array-item" onclick="addToArray('🍊')">🍊 Orange</div>
<div class="array-item" onclick="addToArray('🍓')">🍓 Strawberry</div>
</div>
<div class="playground-controls">
<button class="playground-btn" onclick="printWithLog()">
📝 console.log()
</button>
<button class="playground-btn" onclick="printWithJSON()">
🎨 JSON.stringify()
</button>
<button class="playground-btn" onclick="printWithLoop()">
🔄 forEach()
</button>
<button class="playground-btn secondary" onclick="clearArray()">
🗑️ Clear Array
</button>
</div>
<div class="output-display" id="playgroundOutput">
<span style="color: #64748b;">Click items above to build your array, then try different print methods!</span>
</div>
</div>
</section>
<!-- Comparison Table -->
<section class="section" id="comparison">
<div class="sec-title">
<div class="sec-icon" style="background: linear-gradient(135deg, var(--purple), var(--pink));">📊</div>
<span>Method Comparison</span>
</div>
<div class="card">
<h3>⚖️ Which Method Should You Use?</h3>
<div class="comparison">
<table>
<thead>
<tr>
<th>Method</th>
<th>Best For</th>
<th>Pros</th>
<th>Cons</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>console.log()</code></td>
<td>Quick debugging</td>
<td>Simple, fast</td>
<td>Limited depth</td>
</tr>
<tr>
<td><code>console.table()</code></td>
<td>Array of objects</td>
<td>Beautiful format</td>
<td>Only for tabular data</td>
</tr>
<tr>
<td><code>JSON.stringify()</code></td>
<td>Nested structures</td>
<td>Pretty print, customizable</td>
<td>Loses some data types</td>
</tr>
<tr>
<td><code>console.dir()</code></td>
<td>Deep inspection</td>
<td>Shows everything</td>
<td>Can be verbose</td>
</tr>
<tr>
<td><code>util.inspect()</code></td>
<td>Advanced needs</td>
<td>Highly customizable</td>
<td>Requires util module</td>
</tr>
<tr>
<td><code>forEach()</code></td>
<td>Custom formatting</td>
<td>Full control</td>
<td>More code needed</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Live Demo -->
<section class="section" id="demo">
<div class="sec-title">
<div class="sec-icon" style="background: linear-gradient(135deg, var(--node), var(--cyan));">💻</div>
<span>Live Terminal Demo</span>
</div>
<div class="card">
<h3>🖥️ Watch It In Action</h3>
<div class="terminal">
<div class="term-header">
<div class="dot r"></div>
<div class="dot y"></div>
<div class="dot g"></div>
<span class="term-title">Node.js REPL</span>
</div>
<div class="term-body" id="termBody">
<div class="term-line"><span class="prompt">></span> _</div>
</div>
</div>
<button class="playground-btn" style="margin-top: 15px;" onclick="runTerminalDemo()">▶️ Run Demo</button>
</div>
</section>
<!-- Quiz -->
<section class="section" id="quiz">
<div class="sec-title">
<div class="sec-icon" style="background: linear-gradient(135deg, var(--orange), var(--yellow));">🧠</div>
<span>Test Your Knowledge!</span>
</div>
<div class="quiz">
<div class="quiz-q">Which method displays arrays in a formatted table?</div>
<div class="quiz-opts">
<div class="quiz-opt" onclick="checkQuiz(this, false)">
<span class="opt-letter">A</span>
<span>console.log()</span>
</div>
<div class="quiz-opt" onclick="checkQuiz(this, true)">
<span class="opt-letter">B</span>
<span>console.table()</span>
</div>
<div class="quiz-opt" onclick="checkQuiz(this, false)">
<span class="opt-letter">C</span>
<span>console.dir()</span>
</div>
<div class="quiz-opt" onclick="checkQuiz(this, false)">
<span class="opt-letter">D</span>
<span>JSON.stringify()</span>
</div>
</div>
<div class="quiz-result" id="quizResult"></div>
</div>
</section>
</main>
<button class="fab" id="fab" onclick="scrollTop()">⬆️</button>
<div class="toast" id="toast"></div>
<footer>
<div class="footer-icons">
<div class="footer-icon">📊</div>
<div class="footer-icon">⬢</div>
<div class="footer-icon">💻</div>
<div class="footer-icon">✨</div>
</div>
<p style="color: #64748b;">Master Array Printing in Node.js! 🎉</p>
<p style="color: #475569; font-size: 0.85rem; margin-top: 8px;">Happy debugging and coding!</p>
</footer>
<script>
// Background animation
const bgAnim = document.getElementById('bgAnim');
// Create floating brackets
const brackets = ['[', ']', '{', '}', '(', ')'];
for (let i = 0; i < 8; i++) {
const bracket = document.createElement('div');
bracket.className = 'float-bracket';
bracket.textContent = brackets[Math.floor(Math.random() * brackets.length)];
bracket.style.left = Math.random() * 100 + '%';
bracket.style.top = Math.random() * 100 + '%';
bracket.style.animationDelay = Math.random() * 5 + 's';
bracket.style.animationDuration = (Math.random() * 10 + 10) + 's';
bgAnim.appendChild(bracket);
}
// Create orbs
const colors = ['var(--node)', 'var(--cyan)', 'var(--purple)'];
for (let i = 0; i < 3; i++) {
const orb = document.createElement('div');
orb.className = 'orb';
orb.style.width = (Math.random() * 300 + 200) + 'px';
orb.style.height = orb.style.width;
orb.style.left = Math.random() * 100 + '%';
orb.style.top = Math.random() * 100 + '%';
orb.style.background = colors[i];
orb.style.animationDelay = i * 3 + 's';
bgAnim.appendChild(orb);
}
// Scroll animations
const sections = document.querySelectorAll('.section');
const obs = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) e.target.classList.add('vis');
});
}, { threshold: 0.1 });
sections.forEach(s => obs.observe(s));
// Progress bar
window.addEventListener('scroll', () => {
const scrolled = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;
document.getElementById('progress').style.width = scrolled + '%';
document.getElementById('fab').classList.toggle('show', window.scrollY > 300);
});
// Toast
function showToast(msg) {
const toast = document.getElementById('toast');
toast.textContent = '✨ ' + msg;
toast.classList.add('show');
setTimeout(() => toast.classList.remove('show'), 2500);
}
// Copy code
function copyCode(btn, code) {
navigator.clipboard.writeText(code);
btn.textContent = 'Copied!';
btn.classList.add('copied');
showToast('Code copied to clipboard!');
setTimeout(() => {
btn.textContent = 'Copy';
btn.classList.remove('copied');
}, 2000);
}
// Playground
let playgroundArray = [];
function addToArray(item) {
playgroundArray.push(item);
showToast(`Added ${item} to array!`);
updateArrayDisplay();
}
function updateArrayDisplay() {
const output = document.getElementById('playgroundOutput');
if (playgroundArray.length === 0) {
output.innerHTML = '<span style="color: #64748b;">Array is empty. Click items to add!</span>';
} else {
output.innerHTML = `<div class="output-line"><span style="color: var(--cyan);">Current Array:</span> [${playgroundArray.map(i => `'${i}'`).join(', ')}]</div>`;
}
}
function printWithLog() {
if (playgroundArray.length === 0) {
showToast('Add items to the array first!');
return;
}
const output = document.getElementById('playgroundOutput');
output.innerHTML = `
<div class="output-line"><span style="color: var(--purple);">console.log(array);</span></div>
<div class="output-line"><span style="color: var(--node);">[ ${playgroundArray.map(i => `'${i}'`).join(', ')} ]</span></div>
`;
showToast('Printed with console.log()!');
}
function printWithJSON() {
if (playgroundArray.length === 0) {
showToast('Add items to the array first!');
return;
}
const output = document.getElementById('playgroundOutput');
const json = JSON.stringify(playgroundArray, null, 2);
output.innerHTML = `
<div class="output-line"><span style="color: var(--purple);">JSON.stringify(array, null, 2);</span></div>
<div class="output-line"><pre style="color: var(--yellow); margin: 0;">${json}</pre></div>
`;
showToast('Printed with JSON.stringify()!');
}
function printWithLoop() {
if (playgroundArray.length === 0) {
showToast('Add items to the array first!');
return;
}
const output = document.getElementById('playgroundOutput');
let html = '<div class="output-line"><span style="color: var(--purple);">array.forEach((item, i) => console.log(`${i}: ${item}`));</span></div>';
playgroundArray.forEach((item, i) => {
html += `<div class="output-line"><span style="color: var(--node);">${i}: ${item}</span></div>`;
});
output.innerHTML = html;
showToast('Printed with forEach()!');
}
function clearArray() {
playgroundArray = [];
updateArrayDisplay();
showToast('Array cleared!');
}
// Terminal demo
let demoRunning = false;
function runTerminalDemo() {
if (demoRunning) return;
demoRunning = true;
const body = document.getElementById('termBody');
body.innerHTML = '<div class="term-line"><span class="prompt">></span> </div>';
const lines = [
{ text: 'const fruits = [\'apple\', \'banana\', \'cherry\'];', delay: 100 },
{ text: '', delay: 300 },
{ text: '> console.log(fruits);', delay: 600 },
{ text: '[ \'apple\', \'banana\', \'cherry\' ]', color: 'var(--node)', delay: 500 },
{ text: '', delay: 300 },
{ text: '> console.table(fruits);', delay: 600 },
{ text: '┌─────────┬───────────┐', color: 'var(--cyan)', delay: 200 },
{ text: '│ (index) │ Values │', color: 'var(--cyan)', delay: 100 },
{ text: '├─────────┼───────────┤', color: 'var(--cyan)', delay: 100 },
{ text: '│ 0 │ \'apple\' │', color: 'var(--cyan)', delay: 100 },
{ text: '│ 1 │ \'banana\' │', color: 'var(--cyan)', delay: 100 },
{ text: '│ 2 │ \'cherry\' │', color: 'var(--cyan)', delay: 100 },
{ text: '└─────────┴───────────┘', color: 'var(--cyan)', delay: 200 },
{ text: '', delay: 300 },
{ text: '> fruits.forEach((f, i) => console.log(`${i}: ${f}`));', delay: 600 },
{ text: '0: apple', color: 'var(--yellow)', delay: 200 },
{ text: '1: banana', color: 'var(--yellow)', delay: 200 },
{ text: '2: cherry', color: 'var(--yellow)', delay: 200 },
{ text: '', delay: 300 },
{ text: '✅ All methods demonstrated!', 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! 🎉');
demoRunning = false;
}
}, total);
});
}
// Quiz
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! console.table() displays arrays in a beautiful table format!'
: '❌ Not quite! console.table() is the method for tabular display.';
if (correct) celebrate();
}
// Celebrate
function celebrate() {
const colors = ['var(--node)', 'var(--cyan)', 'var(--purple)', 'var(--yellow)', 'var(--pink)'];
for (let i = 0; i < 30; i++) {
const confetti = document.createElement('div');
confetti.style.position = 'fixed';
confetti.style.width = '10px';
confetti.style.height = '10px';
confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
confetti.style.left = Math.random() * 100 + '%';
confetti.style.top = '-20px';
confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
confetti.style.zIndex = '9999';
confetti.style.pointerEvents = 'none';
document.body.appendChild(confetti);
const fall = confetti.animate([
{ transform: 'translateY(0) rotate(0deg)', opacity: 1 },
{ transform: `translateY(100vh) rotate(${Math.random() * 720}deg)`, opacity: 0 }
], {
duration: Math.random() * 2000 + 2000,
easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
});
fall.onfinish = () => confetti.remove();
}
}
// Scroll to top
function scrollTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
// Initial visibility
setTimeout(() => sections[0].classList.add('vis'), 300);
updateArrayDisplay();
</script>
</body>
</html>
Live Preview