run app in node.js

✨ The Prompt Phrase

node app.js

💻 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>🚀 Run Node.js Apps</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;
      --green: #10b981;
      --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-element {
      position: absolute;
      font-size: 3rem;
      opacity: 0.07;
      animation: floatAround 24s infinite ease-in-out;
    }

    @keyframes floatAround {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      25% { transform: translate(120px, -100px) rotate(90deg); }
      50% { transform: translate(220px, 80px) rotate(180deg); }
      75% { transform: translate(-90px, 160px) rotate(270deg); }
    }

    .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(130px);
      opacity: 0.15;
      animation: orbFloat 34s ease-in-out infinite;
    }

    @keyframes orbFloat {
      0%, 100% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(150px, -110px) scale(1.6); }
    }

    /* Progress bar */
    .progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 5px;
      background: linear-gradient(90deg, var(--node), var(--cyan), var(--purple));
      z-index: 1000;
      transition: width 0.2s;
    }

    /* Header */
    header {
      text-align: center;
      padding: 75px 20px 55px;
      position: relative;
    }

    .logo-container {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 30px;
      margin-bottom: 40px;
      flex-wrap: wrap;
    }

    .app-icon {
      width: 140px;
      height: 140px;
      background: linear-gradient(135deg, var(--node), var(--cyan));
      border-radius: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 5rem;
      cursor: pointer;
      transition: all 0.35s;
      box-shadow: 0 25px 70px rgba(104, 160, 99, 0.5);
      animation: appFloat 4.5s ease-in-out infinite;
      position: relative;
      overflow: hidden;
    }

    @keyframes appFloat {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-22px) rotate(-7deg); }
    }

    .app-icon::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(45deg, transparent, rgba(255,255,255,0.4), transparent);
      animation: iconShine 4s infinite;
    }

    @keyframes iconShine {
      0% { transform: translateX(-100%) rotate(45deg); }
      100% { transform: translateX(200%) rotate(45deg); }
    }

    .app-icon:hover {
      transform: scale(1.2) rotate(15deg);
      box-shadow: 0 38px 95px rgba(104, 160, 99, 0.7);
    }

    .command-display {
      background: rgba(6, 182, 212, 0.16);
      border: 2px solid var(--cyan);
      border-radius: 18px;
      padding: 16px 30px;
      font-family: 'Fira Code', monospace;
      font-size: 1.1rem;
      animation: commandPulse 4s ease-in-out infinite;
      color: var(--cyan);
      font-weight: 600;
    }

    @keyframes commandPulse {
      0%, 100% { box-shadow: 0 0 25px rgba(6, 182, 212, 0.4); transform: scale(1); }
      50% { box-shadow: 0 0 50px rgba(6, 182, 212, 0.7); transform: scale(1.06); }
    }

    h1 {
      font-size: clamp(2.3rem, 6vw, 4rem);
      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: 22px;
      line-height: 1.2;
    }

    .subtitle {
      color: #64748b;
      font-size: 1.3rem;
      max-width: 750px;
      margin: 0 auto;
    }

    /* Main container */
    main {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    .section {
      margin-bottom: 60px;
      opacity: 0;
      transform: translateY(60px);
      transition: all 0.9s ease-out;
    }

    .section.vis {
      opacity: 1;
      transform: translateY(0);
    }

    .sec-title {
      display: flex;
      align-items: center;
      gap: 22px;
      font-size: 1.8rem;
      font-weight: 700;
      margin-bottom: 26px;
    }

    .sec-icon {
      width: 60px;
      height: 60px;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
      animation: iconBounce 3.5s ease-in-out infinite;
    }

    @keyframes iconBounce {
      0%, 100% { transform: translateY(0) rotate(-5deg); }
      50% { transform: translateY(-12px) rotate(5deg); }
    }

    /* Cards */
    .card {
      background: var(--card);
      border-radius: 26px;
      padding: 36px;
      margin-bottom: 28px;
      border: 1px solid rgba(255,255,255,0.08);
      transition: all 0.4s;
      position: relative;
      overflow: hidden;
    }

    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 6px;
      background: linear-gradient(90deg, var(--node), var(--cyan), var(--purple));
    }

    .card:hover {
      transform: translateY(-12px);
      box-shadow: 0 35px 80px rgba(0,0,0,0.5);
      border-color: var(--cyan);
    }

    .card h3 {
      color: var(--cyan);
      margin-bottom: 22px;
      font-size: 1.5rem;
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .card p {
      color: #94a3b8;
      line-height: 2;
      margin-bottom: 20px;
    }

    /* Featured card */
    .featured {
      background: linear-gradient(135deg, rgba(104, 160, 99, 0.17), rgba(6, 182, 212, 0.17));
      border: 2px solid var(--node);
    }

    .featured-badge {
      position: absolute;
      top: -16px;
      right: 35px;
      background: linear-gradient(135deg, var(--orange), var(--yellow));
      color: #000;
      padding: 9px 24px;
      border-radius: 26px;
      font-size: 0.8rem;
      font-weight: 700;
      animation: badgePulse 2.5s ease-in-out infinite;
    }

    @keyframes badgePulse {
      0%, 100% { box-shadow: 0 0 25px rgba(249, 115, 22, 0.6); }
      50% { box-shadow: 0 0 50px rgba(249, 115, 22, 0.9); }
    }

    /* Code blocks */
    .code-block {
      background: #0a0f1a;
      border-radius: 22px;
      overflow: hidden;
      margin: 26px 0;
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 20px 55px rgba(0,0,0,0.5);
    }

    .code-header {
      background: rgba(0,0,0,0.5);
      padding: 18px 26px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .code-dots {
      display: flex;
      gap: 10px;
    }

    .dot {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.3s;
    }

    .dot:hover { transform: scale(1.5); }
    .dot.r { background: #ff5f56; }
    .dot.y { background: #ffbd2e; }
    .dot.g { background: #27ca40; }

    .code-lang {
      color: var(--cyan);
      font-size: 1rem;
      font-weight: 600;
      font-family: 'Fira Code', monospace;
    }

    .code-copy {
      background: rgba(255,255,255,0.13);
      border: none;
      padding: 10px 22px;
      border-radius: 10px;
      color: var(--text);
      cursor: pointer;
      font-size: 0.9rem;
      transition: all 0.3s;
      font-weight: 600;
    }

    .code-copy:hover { 
      background: var(--cyan); 
      transform: translateY(-3px);
      color: #000;
    }

    .code-copy.copied { background: var(--green); }

    .code-body {
      padding: 28px;
      font-family: 'Fira Code', monospace;
      font-size: 1rem;
      line-height: 2.2;
      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); }
    .cmd { color: var(--node); font-weight: 600; }

    /* Steps */
    .steps {
      display: flex;
      flex-direction: column;
      gap: 22px;
    }

    .step {
      display: flex;
      gap: 24px;
      padding: 28px;
      background: rgba(255,255,255,0.03);
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.08);
      cursor: pointer;
      transition: all 0.4s;
      position: relative;
      overflow: hidden;
    }

    .step::before {
      content: '';
      position: absolute;
      left: -100%;
      top: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.1), transparent);
      transition: left 0.6s;
    }

    .step:hover::before {
      left: 100%;
    }

    .step:hover {
      transform: translateX(16px);
      border-color: var(--cyan);
      background: rgba(6, 182, 212, 0.13);
    }

    .step-num {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--node), var(--cyan));
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      flex-shrink: 0;
      font-size: 1.4rem;
      box-shadow: 0 12px 30px rgba(104, 160, 99, 0.5);
    }

    .step-content h4 { 
      margin-bottom: 12px; 
      color: var(--text); 
      font-size: 1.2rem;
    }

    .step-content p { 
      color: #64748b; 
      font-size: 1rem; 
      margin: 0;
      line-height: 1.75;
    }

    /* Info boxes */
    .info {
      padding: 26px;
      border-radius: 20px;
      margin: 24px 0;
      display: flex;
      gap: 20px;
      align-items: flex-start;
    }

    .info.tip {
      background: rgba(16, 185, 129, 0.14);
      border-left: 6px solid var(--green);
    }

    .info.warn {
      background: rgba(251, 191, 36, 0.14);
      border-left: 6px solid var(--yellow);
    }

    .info.important {
      background: rgba(104, 160, 99, 0.14);
      border-left: 6px solid var(--node);
    }

    .info.cool {
      background: rgba(6, 182, 212, 0.14);
      border-left: 6px solid var(--cyan);
    }

    .info-icon { 
      font-size: 1.7rem; 
      flex-shrink: 0;
      animation: iconWiggle 3s ease-in-out infinite;
    }

    @keyframes iconWiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(-12deg); }
      75% { transform: rotate(12deg); }
    }

    /* Interactive terminal */
    .terminal-container {
      background: linear-gradient(135deg, rgba(104, 160, 99, 0.13), rgba(6, 182, 212, 0.13));
      border-radius: 26px;
      padding: 40px;
      border: 2px solid rgba(104, 160, 99, 0.4);
      margin: 32px 0;
    }

    .terminal-title {
      font-size: 1.7rem;
      font-weight: 700;
      color: var(--yellow);
      margin-bottom: 26px;
      text-align: center;
    }

    .terminal {
      background: #0a0f1a;
      border-radius: 20px;
      overflow: hidden;
      margin: 26px 0;
      box-shadow: 0 25px 70px rgba(0,0,0,0.6);
    }

    .term-header {
      background: rgba(0,0,0,0.5);
      padding: 18px 26px;
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .term-title {
      flex: 1;
      text-align: center;
      color: #64748b;
      font-size: 1rem;
      font-weight: 600;
    }

    .term-body {
      padding: 28px;
      font-family: 'Fira Code', monospace;
      font-size: 1rem;
      min-height: 240px;
      max-height: 550px;
      overflow-y: auto;
    }

    .term-line { 
      margin-bottom: 14px;
      animation: lineAppear 0.4s ease-out;
    }

    @keyframes lineAppear {
      from { opacity: 0; transform: translateX(-15px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .prompt { 
      color: var(--node); 
      font-weight: 600;
      text-shadow: 0 0 15px rgba(104, 160, 99, 0.6);
    }

    .cursor {
      display: inline-block;
      width: 12px;
      height: 24px;
      background: var(--cyan);
      animation: blink 1.2s infinite;
      vertical-align: middle;
      margin-left: 4px;
    }

    @keyframes blink {
      0%, 50% { opacity: 1; }
      51%, 100% { opacity: 0; }
    }

    /* Buttons */
    .btn-group {
      display: flex;
      gap: 18px;
      justify-content: center;
      flex-wrap: wrap;
      margin: 28px 0;
    }

    .btn {
      background: linear-gradient(135deg, var(--node), var(--cyan));
      border: none;
      padding: 16px 35px;
      border-radius: 16px;
      color: white;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.4s;
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 1.1rem;
    }

    .btn:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 50px rgba(104, 160, 99, 0.6);
    }

    .btn.secondary {
      background: linear-gradient(135deg, var(--purple), var(--pink));
    }

    .btn.success {
      background: linear-gradient(135deg, var(--green), var(--cyan));
    }

    .btn.orange {
      background: linear-gradient(135deg, var(--orange), var(--yellow));
      color: #000;
    }

    /* File structure */
    .file-tree {
      background: rgba(255,255,255,0.03);
      border-radius: 18px;
      padding: 26px;
      margin: 24px 0;
      font-family: 'Fira Code', monospace;
      border: 1px solid rgba(255,255,255,0.08);
    }

    .file-item {
      padding: 10px;
      margin: 6px 0;
      cursor: pointer;
      transition: all 0.3s;
      border-radius: 8px;
    }

    .file-item:hover {
      background: rgba(6, 182, 212, 0.15);
      transform: translateX(8px);
    }

    .file-icon {
      margin-right: 10px;
    }

    /* Quiz */
    .quiz {
      background: linear-gradient(135deg, rgba(139, 92, 246, 0.13), rgba(236, 72, 153, 0.13));
      border-radius: 26px;
      padding: 36px;
      border: 2px solid rgba(139, 92, 246, 0.4);
    }

    .quiz-q {
      font-size: 1.35rem;
      font-weight: 600;
      margin-bottom: 28px;
    }

    .quiz-opts {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .quiz-opt {
      padding: 22px 28px;
      background: var(--card);
      border-radius: 18px;
      cursor: pointer;
      transition: all 0.4s;
      border: 2px solid transparent;
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .quiz-opt:hover {
      border-color: var(--purple);
      transform: translateX(14px);
    }

    .quiz-opt.correct {
      border-color: var(--green);
      background: rgba(16, 185, 129, 0.25);
    }

    .quiz-opt.wrong {
      border-color: var(--red);
      background: rgba(239, 68, 68, 0.25);
    }

    .opt-letter {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255,255,255,0.13);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
    }

    .quiz-result {
      margin-top: 24px;
      padding: 24px;
      border-radius: 18px;
      text-align: center;
      font-weight: 600;
      display: none;
    }

    .quiz-result.show { 
      display: block; 
      animation: slideUp 0.6s ease-out;
    }

    @keyframes slideUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* FAB */
    .fab {
      position: fixed;
      bottom: 35px;
      right: 35px;
      width: 70px;
      height: 70px;
      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: 2rem;
      color: white;
      box-shadow: 0 20px 50px rgba(104, 160, 99, 0.6);
      transition: all 0.4s;
      z-index: 100;
      opacity: 0;
      visibility: hidden;
    }

    .fab.show { opacity: 1; visibility: visible; }
    .fab:hover { transform: scale(1.3) rotate(20deg); }

    /* Toast */
    .toast {
      position: fixed;
      bottom: 140px;
      left: 50%;
      transform: translateX(-50%) translateY(140px);
      background: var(--card);
      padding: 22px 40px;
      border-radius: 20px;
      border: 2px solid var(--cyan);
      box-shadow: 0 25px 70px rgba(0,0,0,0.7);
      transition: all 0.5s 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: 55px 20px;
      background: var(--card);
      margin-top: 70px;
      border-top: 1px solid rgba(255,255,255,0.08);
    }

    .footer-icons {
      display: flex;
      justify-content: center;
      gap: 24px;
      margin-bottom: 24px;
    }

    .footer-icon {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background: rgba(255,255,255,0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
      cursor: pointer;
      transition: all 0.4s;
    }

    .footer-icon:hover {
      background: var(--cyan);
      transform: translateY(-12px);
    }

    @media (max-width: 768px) {
      .btn-group { flex-direction: column; }
      .btn { width: 100%; justify-content: center; }
      h1 { font-size: 2.3rem; }
    }
  </style>
</head>
<body>
  <div class="progress" id="progress"></div>
  <div class="bg-animation" id="bgAnim"></div>

  <header>
    <div class="logo-container">
      <div class="app-icon" onclick="celebrate()">🚀</div>
      <div class="command-display">$ node app.js</div>
    </div>
    <h1>Run Node.js Apps</h1>
    <p class="subtitle">Master running Node.js applications from the command line! 🎯</p>
  </header>

  <main>
    <!-- What is Running an App -->
    <section class="section" id="what">
      <div class="sec-title">
        <div class="sec-icon" style="background: linear-gradient(135deg, var(--node), var(--green));">🎯</div>
        <span>What Does "Running an App" Mean?</span>
      </div>

      <div class="card featured">
        <div class="featured-badge">⭐ ESSENTIAL</div>
        <h3>🚀 Executing Your Node.js Application</h3>
        <p>Running a Node.js app means executing your JavaScript file using the Node.js runtime. This starts your application, runs your code, and keeps it active until it completes or you stop it.</p>

        <div class="info cool">
          <span class="info-icon">✨</span>
          <div>
            <strong>Why Learn This?</strong>
            <p>This is the fundamental skill for Node.js development! Every app, server, tool, or script you create needs to be run this way.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Basic Command -->
    <section class="section" id="basic">
      <div class="sec-title">
        <div class="sec-icon" style="background: linear-gradient(135deg, var(--cyan), var(--blue));">⚡</div>
        <span>The Basic Command</span>
      </div>

      <div class="card">
        <h3>🔥 node filename.js</h3>
        <p>The most fundamental command to run any Node.js application:</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">Terminal / Command Prompt</span>
            <button class="code-copy" onclick="copyCode(this, 'node app.js')">Copy</button>
          </div>
          <div class="code-body">
            $ <span class="cmd">node</span> app.js
          </div>
        </div>

        <div class="info important">
          <span class="info-icon">📌</span>
          <div>
            <strong>Breaking It Down:</strong>
            <p><code style="color: var(--node); font-family: 'Fira Code', monospace;">node</code> = The Node.js command<br>
            <code style="color: var(--cyan); font-family: 'Fira Code', monospace;">app.js</code> = Your JavaScript file name</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Step by Step -->
    <section class="section" id="steps">
      <div class="sec-title">
        <div class="sec-icon" style="background: linear-gradient(135deg, var(--purple), var(--pink));">📋</div>
        <span>Step-by-Step Guide</span>
      </div>

      <div class="card">
        <h3>🚶 Complete Process</h3>

        <div class="steps">
          <div class="step" onclick="showToast('Step 1: Create your JavaScript file!')">
            <div class="step-num">1</div>
            <div class="step-content">
              <h4>Create Your JavaScript File</h4>
              <p>Create a file named <code style="color: var(--cyan); font-family: 'Fira Code', monospace;">app.js</code> (or any name you prefer) with your JavaScript code inside.</p>
            </div>
          </div>
          <div class="step" onclick="showToast('Step 2: Open terminal in your project folder!')">
            <div class="step-num">2</div>
            <div class="step-content">
              <h4>Open Terminal in Project Folder</h4>
              <p>Navigate to the folder containing your JavaScript file using <code style="color: var(--cyan); font-family: 'Fira Code', monospace;">cd</code> command or open terminal directly in that folder.</p>
            </div>
          </div>
          <div class="step" onclick="showToast('Step 3: Run the node command!')">
            <div class="step-num">3</div>
            <div class="step-content">
              <h4>Execute the Node Command</h4>
              <p>Type <code style="color: var(--node); font-family: 'Fira Code', monospace;">node app.js</code> (replace app.js with your filename) and press Enter.</p>
            </div>
          </div>
          <div class="step" onclick="showToast('Step 4: See your app run!')">
            <div class="step-num">4</div>
            <div class="step-content">
              <h4>Watch Your App Run!</h4>
              <p>Your application will execute, and you'll see any output in the terminal. The app runs until it completes or you stop it with <kbd style="background: var(--card); padding: 3px 10px; border-radius: 5px;">Ctrl + C</kbd>.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Example -->
    <section class="section" id="example">
      <div class="sec-title">
        <div class="sec-icon" style="background: linear-gradient(135deg, var(--orange), var(--yellow));">💡</div>
        <span>Complete Example</span>
      </div>

      <div class="card">
        <h3>📝 Full Working Example</h3>
        <p>Let's create and run a simple Node.js application:</p>

        <h4 style="color: var(--cyan); margin: 25px 0 15px; font-size: 1.15rem;">Step 1: Create app.js</h4>
        <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">app.js</span>
            <button class="code-copy" onclick="copyCode(this, 'console.log(\'Hello from Node.js!\');\nconsole.log(\'App is running...\');\n\nconst name = \'Developer\';\nconsole.log(`Welcome, ${name}!`);\n\nconsole.log(\'App finished!\');')">Copy</button>
          </div>
          <div class="code-body">
            <span class="func">console</span>.<span class="func">log</span>(<span class="str">'Hello from Node.js!'</span>);<br>
            <span class="func">console</span>.<span class="func">log</span>(<span class="str">'App is running...'</span>);<br><br>
            <span class="kw">const</span> <span class="var">name</span> = <span class="str">'Developer'</span>;<br>
            <span class="func">console</span>.<span class="func">log</span>(<span class="str">`Welcome, <span class="var">${name}</span>!`</span>);<br><br>
            <span class="func">console</span>.<span class="func">log</span>(<span class="str">'App finished!'</span>);
          </div>
        </div>

        <h4 style="color: var(--cyan); margin: 25px 0 15px; font-size: 1.15rem;">Step 2: Run the App</h4>
        <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">Terminal</span>
            <button class="code-copy" onclick="copyCode(this, 'node app.js')">Copy</button>
          </div>
          <div class="code-body">
            $ <span class="cmd">node</span> app.js
          </div>
        </div>

        <h4 style="color: var(--cyan); margin: 25px 0 15px; font-size: 1.15rem;">Step 3: Expected Output</h4>
        <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">
            <span style="color: var(--green);">Hello from Node.js!</span><br>
            <span style="color: var(--green);">App is running...</span><br>
            <span style="color: var(--green);">Welcome, Developer!</span><br>
            <span style="color: var(--green);">App finished!</span>
          </div>
        </div>

        <div class="info tip">
          <span class="info-icon">🎉</span>
          <div>
            <strong>Success!</strong>
            <p>Your Node.js app just ran successfully! All console.log statements were executed and displayed in the terminal.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Interactive Terminal -->
    <section class="section" id="interactive">
      <div class="sec-title">
        <div class="sec-icon" style="background: linear-gradient(135deg, var(--green), var(--cyan));">🎮</div>
        <span>Interactive Simulator</span>
      </div>

      <div class="terminal-container">
        <div class="terminal-title">🎯 Try Running Apps!</div>
        <p style="text-align: center; color: #94a3b8; margin-bottom: 24px;">Click buttons to simulate running different Node.js applications</p>

        <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">Terminal Simulator</span>
          </div>
          <div class="term-body" id="termOutput">
            <div class="term-line">
              <span style="color: #64748b;">Welcome! Click a button below to run a Node.js app</span>
            </div>
            <div class="term-line"><span class="prompt">$</span> <span class="cursor"></span></div>
          </div>
        </div>

        <div class="btn-group">
          <button class="btn" onclick="runApp('hello')">
            👋 Hello World
          </button>
          <button class="btn secondary" onclick="runApp('server')">
            🌐 Web Server
          </button>
          <button class="btn success" onclick="runApp('math')">
            🔢 Math App
          </button>
          <button class="btn orange" onclick="clearTerm()">
            🔄 Clear
          </button>
        </div>
      </div>
    </section>

    <!-- Different File Names -->
    <section class="section" id="filenames">
      <div class="sec-title">
        <div class="sec-icon" style="background: linear-gradient(135deg, var(--pink), var(--purple));">📂</div>
        <span>Different File Names</span>
      </div>

      <div class="card">
        <h3>📁 Running Files with Different Names</h3>
        <p>You can run any JavaScript file - just use its exact name:</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">Examples</span>
            <button class="code-copy" onclick="copyCode(this, 'node app.js\nnode server.js\nnode index.js\nnode main.js\nnode script.js\nnode test.js')">Copy All</button>
          </div>
          <div class="code-body">
            <span class="comment"># Run app.js</span><br>
            $ <span class="cmd">node</span> app.js<br><br>
            <span class="comment"># Run server.js</span><br>
            $ <span class="cmd">node</span> server.js<br><br>
            <span class="comment"># Run index.js</span><br>
            $ <span class="cmd">node</span> index.js<br><br>
            <span class="comment"># Run any file</span><br>
            $ <span class="cmd">node</span> myfile.js
          </div>
        </div>

        <div class="info warn">
          <span class="info-icon">⚠️</span>
          <div>
            <strong>Important:</strong>
            <p>The file name is case-sensitive! <code style="color: var(--cyan); font-family: 'Fira Code', monospace;">App.js</code> and <code style="color: var(--cyan); font-family: 'Fira Code', monospace;">app.js</code> are different files.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- File Paths -->
    <section class="section" id="paths">
      <div class="sec-title">
        <div class="sec-icon" style="background: linear-gradient(135deg, var(--yellow), var(--orange));">🗺️</div>
        <span>Using File Paths</span>
      </div>

      <div class="card">
        <h3>📍 Running Files in Different Locations</h3>
        <p>You can run files from different folders using paths:</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">Path Examples</span>
            <button class="code-copy" onclick="copyCode(this, 'node ./app.js\nnode ./src/app.js\nnode ../app.js\nnode /full/path/to/app.js')">Copy All</button>
          </div>
          <div class="code-body">
            <span class="comment"># Current folder (explicit)</span><br>
            $ <span class="cmd">node</span> ./app.js<br><br>
            <span class="comment"># Subfolder</span><br>
            $ <span class="cmd">node</span> ./src/app.js<br><br>
            <span class="comment"># Parent folder</span><br>
            $ <span class="cmd">node</span> ../app.js<br><br>
            <span class="comment"># Full path</span><br>
            $ <span class="cmd">node</span> /full/path/to/app.js
          </div>
        </div>

        <div class="file-tree">
          <div style="color: var(--cyan); margin-bottom: 15px; font-weight: 600;">📁 Project Structure Example:</div>
          <div class="file-item">📁 my-project/</div>
          <div class="file-item" style="padding-left: 30px;">📄 app.js</div>
          <div class="file-item" style="padding-left: 30px;">📁 src/</div>
          <div class="file-item" style="padding-left: 60px;">📄 server.js</div>
          <div class="file-item" style="padding-left: 60px;">📄 utils.js</div>
        </div>

        <div class="info tip">
          <span class="info-icon">💡</span>
          <div>
            <strong>Pro Tip:</strong>
            <p>Use <code style="color: var(--cyan); font-family: 'Fira Code', monospace;">cd</code> to navigate to the folder first, then run <code style="color: var(--node); font-family: 'Fira Code', monospace;">node filename.js</code> - it's simpler!</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Stopping Apps -->
    <section class="section" id="stopping">
      <div class="sec-title">
        <div class="sec-icon" style="background: linear-gradient(135deg, var(--red), var(--orange));">🛑</div>
        <span>Stopping Running Apps</span>
      </div>

      <div class="card">
        <h3>⏹️ How to Stop Your App</h3>
        <p>Some apps keep running (like servers). Here's how to stop them:</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">Stop Command</span>
          </div>
          <div class="code-body">
            <span class="comment"># Press Ctrl + C in the terminal</span><br>
            <kbd style="background: rgba(255,255,255,0.1); padding: 5px 12px; border-radius: 6px;">Ctrl + C</kbd><br><br>
            <span style="color: var(--red);">^C</span><br>
            <span style="color: var(--yellow);">Server stopped!</span>
          </div>
        </div>

        <div class="info warn">
          <span class="info-icon">⚠️</span>
          <div>
            <strong>Remember:</strong>
            <p><kbd style="background: var(--card); padding: 3px 10px; border-radius: 5px;">Ctrl + C</kbd> stops the running process. Some apps finish automatically, others need to be stopped manually.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Common Issues -->
    <section class="section" id="issues">
      <div class="sec-title">
        <div class="sec-icon" style="background: linear-gradient(135deg, var(--cyan), var(--blue));">🔧</div>
        <span>Common Issues & Solutions</span>
      </div>

      <div class="card">
        <h3>❗ Troubleshooting</h3>

        <div class="info warn">
          <span class="info-icon">⚠️</span>
          <div>
            <strong>Error: Cannot find module</strong>
            <p>Solution: Make sure you're in the correct folder and the file name is spelled correctly.</p>
          </div>
        </div>

        <div class="info warn">
          <span class="info-icon">⚠️</span>
          <div>
            <strong>Error: node: command not found</strong>
            <p>Solution: Node.js is not installed. Download and install from nodejs.org</p>
          </div>
        </div>

        <div class="info warn">
          <span class="info-icon">⚠️</span>
          <div>
            <strong>Nothing happens / No output</strong>
            <p>Solution: Your code might not have any console.log statements, or it finished instantly.</p>
          </div>
        </div>

        <div class="info tip">
          <span class="info-icon">💡</span>
          <div>
            <strong>Quick Check:</strong>
            <p>Use <code style="color: var(--cyan); font-family: 'Fira Code', monospace;">ls</code> (Mac/Linux) or <code style="color: var(--cyan); font-family: 'Fira Code', monospace;">dir</code> (Windows) to see files in your current folder.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Quiz -->
    <section class="section" id="quiz">
      <div class="sec-title">
        <div class="sec-icon" style="background: linear-gradient(135deg, var(--purple), var(--pink));">🧠</div>
        <span>Test Your Knowledge!</span>
      </div>

      <div class="quiz">
        <div class="quiz-q">How do you run a Node.js file named "server.js"?</div>
        <div class="quiz-opts">
          <div class="quiz-opt" onclick="checkQuiz(this, false)">
            <span class="opt-letter">A</span>
            <span>run server.js</span>
          </div>
          <div class="quiz-opt" onclick="checkQuiz(this, true)">
            <span class="opt-letter">B</span>
            <span>node server.js</span>
          </div>
          <div class="quiz-opt" onclick="checkQuiz(this, false)">
            <span class="opt-letter">C</span>
            <span>start server.js</span>
          </div>
          <div class="quiz-opt" onclick="checkQuiz(this, false)">
            <span class="opt-letter">D</span>
            <span>execute server.js</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 Running Node.js Apps! 🎉</p>
    <p style="color: #475569; font-size: 0.9rem; margin-top: 12px;">Build amazing things with Node.js!</p>
  </footer>

  <script>
    // Background animation
    const bgAnim = document.getElementById('bgAnim');
    
    // Create floating elements
    const elements = ['🚀', '⬢', '💻', '📦', '⚙️', '✨'];
    for (let i = 0; i < 10; i++) {
      const el = document.createElement('div');
      el.className = 'float-element';
      el.textContent = elements[Math.floor(Math.random() * elements.length)];
      el.style.left = Math.random() * 100 + '%';
      el.style.top = Math.random() * 100 + '%';
      el.style.animationDelay = Math.random() * 5 + 's';
      el.style.animationDuration = (Math.random() * 20 + 20) + 's';
      bgAnim.appendChild(el);
    }

    // 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() * 450 + 300) + '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 * 7 + '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'), 3000);
    }

    // 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');
      }, 2400);
    }

    // App simulator
    const apps = {
      hello: [
        { text: '$ node hello.js', delay: 400 },
        { text: 'Hello, World!', color: 'var(--green)', delay: 750 },
        { text: 'Welcome to Node.js!', color: 'var(--green)', delay: 1100 },
        { text: '✅ App finished successfully!', color: 'var(--cyan)', delay: 1500 }
      ],
      server: [
        { text: '$ node server.js', delay: 400 },
        { text: 'Starting server...', color: 'var(--cyan)', delay: 800 },
        { text: '🌐 Server running on http://localhost:3000', color: 'var(--green)', delay: 1300 },
        { text: 'Press Ctrl+C to stop', color: 'var(--yellow)', delay: 1700 },
        { text: '✅ Server is ready!', color: 'var(--green)', delay: 2100 }
      ],
      math: [
        { text: '$ node math.js', delay: 400 },
        { text: 'Running calculations...', color: 'var(--cyan)', delay: 750 },
        { text: '5 + 5 = 10', color: 'var(--green)', delay: 1100 },
        { text: '10 * 2 = 20', color: 'var(--green)', delay: 1450 },
        { text: '20 - 5 = 15', color: 'var(--green)', delay: 1800 },
        { text: '✅ Calculations complete!', color: 'var(--cyan)', delay: 2200 }
      ]
    };

    function runApp(type) {
      const output = document.getElementById('termOutput');
      output.innerHTML = '';
      
      const scenario = apps[type];
      let totalDelay = 0;

      scenario.forEach((line, i) => {
        totalDelay += line.delay;
        setTimeout(() => {
          const div = document.createElement('div');
          div.className = 'term-line';
          div.innerHTML = `<span style="color: ${line.color || '#94a3b8'}">${line.text}</span>`;
          output.appendChild(div);
          output.scrollTop = output.scrollHeight;
          
          if (i === scenario.length - 1) {
            const cursor = document.createElement('div');
            cursor.className = 'term-line';
            cursor.innerHTML = '<span class="prompt">$</span> <span class="cursor"></span>';
            output.appendChild(cursor);
            showToast('App executed successfully!');
          }
        }, totalDelay);
      });
    }

    function clearTerm() {
      document.getElementById('termOutput').innerHTML = '<div class="term-line"><span style="color: #64748b;">Terminal cleared. Click a button to run an app.</span></div><div class="term-line"><span class="prompt">$</span> <span class="cursor"></span></div>';
      showToast('Terminal cleared!');
    }

    // 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(16,185,129,0.25)' : 'rgba(239,68,68,0.25)';
      result.innerHTML = correct 
        ? '🎉 Correct! Use <code style="color: var(--node); font-family: \'Fira Code\', monospace;">node filename.js</code> to run any Node.js file!'
        : '❌ Not quite! The correct command is <code style="color: var(--node); font-family: \'Fira Code\', monospace;">node server.js</code>';
      
      if (correct) celebrate();
    }

    // Celebrate
    function celebrate() {
      const colors = ['var(--node)', 'var(--cyan)', 'var(--purple)', 'var(--yellow)', 'var(--pink)'];
      for (let i = 0; i < 50; i++) {
        const confetti = document.createElement('div');
        confetti.style.position = 'fixed';
        confetti.style.width = '14px';
        confetti.style.height = '14px';
        confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
        confetti.style.left = Math.random() * 100 + '%';
        confetti.style.top = '-40px';
        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() * 3000 + 2500,
          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'), 400);
  </script>
</body>
</html>

Live Preview