Node.js line command uninstallation through WINGET
📦 Node.js-> Command Line
✨ The Prompt Phrase
winget uninstall OpenJS.NodeJS
💻 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>🗑️ winget uninstall OpenJS.NodeJS - Interactive Guide</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 {
--red: #ef4444;
--red-dark: #dc2626;
--orange: #f97316;
--yellow: #fbbf24;
--purple: #a855f7;
--blue: #3b82f6;
--cyan: #06b6d4;
--node: #68a063;
--bg: #0f0a1a;
--card: #1a1025;
--text: #f1f5f9;
}
body {
font-family: 'Poppins', sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
overflow-x: hidden;
}
/* Animated gradient background */
.bg-gradient {
position: fixed;
inset: 0;
z-index: -1;
background:
radial-gradient(ellipse at 10% 20%, rgba(239, 68, 68, 0.15) 0%, transparent 50%),
radial-gradient(ellipse at 90% 80%, rgba(168, 85, 247, 0.15) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(249, 115, 22, 0.1) 0%, transparent 60%);
animation: bgPulse 15s ease-in-out infinite alternate;
}
@keyframes bgPulse {
0% { opacity: 0.8; filter: hue-rotate(0deg); }
100% { opacity: 1; filter: hue-rotate(20deg); }
}
/* Falling particles (uninstall theme) */
.particles {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.particle {
position: absolute;
font-size: 1.2rem;
opacity: 0.2;
animation: particleFall 8s linear infinite;
}
@keyframes particleFall {
0% { transform: translateY(-50px) rotate(0deg); opacity: 0; }
10% { opacity: 0.2; }
90% { opacity: 0.2; }
100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}
/* Progress */
.progress {
position: fixed;
top: 0;
left: 0;
height: 4px;
background: linear-gradient(90deg, var(--red), var(--orange), var(--yellow));
z-index: 1000;
transition: width 0.2s;
}
/* Header */
header {
text-align: center;
padding: 50px 20px 30px;
position: relative;
z-index: 10;
}
.logo-wrap {
display: inline-flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}
.trash-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--red), var(--orange));
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 10px 40px rgba(239, 68, 68, 0.4);
animation: trashWiggle 2s ease-in-out infinite;
}
@keyframes trashWiggle {
0%, 100% { transform: rotate(-5deg); }
50% { transform: rotate(5deg); }
}
.trash-icon:hover {
transform: scale(1.15) rotate(0deg);
box-shadow: 0 20px 60px rgba(239, 68, 68, 0.5);
}
.node-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--node), #3c873a);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
opacity: 0.5;
position: relative;
cursor: pointer;
transition: all 0.3s;
}
.node-icon::after {
content: '❌';
position: absolute;
font-size: 1.5rem;
bottom: -5px;
right: -5px;
}
.node-icon:hover {
opacity: 0.3;
transform: scale(0.9);
}
.arrow {
font-size: 2rem;
color: var(--red);
animation: arrowPulse 1s ease-in-out infinite;
}
@keyframes arrowPulse {
0%, 100% { transform: translateX(0); opacity: 1; }
50% { transform: translateX(10px); opacity: 0.5; }
}
h1 {
font-size: clamp(1.6rem, 4vw, 2.8rem);
font-weight: 800;
background: linear-gradient(135deg, var(--red), var(--orange), var(--yellow));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 10px;
}
.subtitle {
color: #64748b;
font-size: 1.1rem;
}
/* Command box */
.cmd-showcase {
max-width: 700px;
margin: 30px auto;
padding: 0 20px;
}
.cmd-box {
background: var(--card);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 25px 70px rgba(0,0,0,0.4);
position: relative;
}
.cmd-box::before {
content: '';
position: absolute;
inset: 0;
border-radius: 18px;
padding: 3px;
background: linear-gradient(135deg, var(--red), var(--orange), var(--purple), var(--red));
background-size: 300% 300%;
animation: borderAnim 4s linear infinite;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
@keyframes borderAnim {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.cmd-header {
background: rgba(0,0,0,0.4);
padding: 12px 18px;
display: flex;
align-items: center;
gap: 8px;
}
.dot { width: 12px; height: 12px; border-radius: 50%; cursor: pointer; transition: transform 0.2s; }
.dot:hover { transform: scale(1.3); }
.dot.r { background: #ff5f56; }
.dot.y { background: #ffbd2e; }
.dot.g { background: #27ca40; }
.cmd-title {
flex: 1;
text-align: center;
color: #64748b;
font-size: 0.85rem;
}
.cmd-body {
padding: 28px;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
}
.cmd-text {
font-family: 'Fira Code', monospace;
font-size: 1.15rem;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
.kw { color: var(--cyan); font-weight: 600; }
.action { color: var(--red); }
.pkg { color: var(--yellow); }
.copy-btn {
background: linear-gradient(135deg, var(--red), var(--orange));
border: none;
padding: 12px 26px;
border-radius: 12px;
color: white;
font-weight: 700;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 8px;
}
.copy-btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 15px 40px rgba(239, 68, 68, 0.4);
}
.copy-btn.done {
background: linear-gradient(135deg, var(--node), var(--cyan));
}
/* Main */
main {
max-width: 900px;
margin: 0 auto;
padding: 20px;
position: relative;
z-index: 10;
}
.section {
margin-bottom: 45px;
opacity: 0;
transform: translateY(35px);
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: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
animation: iconBounce 2s ease-in-out infinite;
}
@keyframes iconBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
/* Cards */
.card {
background: var(--card);
border-radius: 16px;
padding: 26px;
margin-bottom: 18px;
border: 1px solid rgba(255,255,255,0.08);
transition: all 0.3s;
position: relative;
overflow: hidden;
}
.card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--red), var(--orange), var(--yellow));
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 55px rgba(0,0,0,0.35);
border-color: var(--red);
}
.card h3 {
color: var(--orange);
margin-bottom: 14px;
font-size: 1.2rem;
display: flex;
align-items: center;
gap: 10px;
}
.card p {
color: #94a3b8;
line-height: 1.75;
}
/* Code */
.code {
background: #0d0812;
border-radius: 12px;
padding: 16px 20px;
font-family: 'Fira Code', monospace;
margin: 16px 0;
border: 1px solid rgba(255,255,255,0.08);
position: relative;
overflow-x: auto;
}
.code-cp {
position: absolute;
top: 8px;
right: 8px;
background: rgba(255,255,255,0.1);
border: none;
padding: 5px 12px;
border-radius: 6px;
color: var(--text);
cursor: pointer;
font-size: 0.75rem;
transition: all 0.3s;
}
.code-cp:hover { background: var(--red); }
.comment { color: #6b7280; font-style: italic; }
.output { color: var(--node); }
/* Steps */
.steps {
display: flex;
flex-direction: column;
gap: 14px;
}
.step {
display: flex;
gap: 14px;
padding: 18px;
background: rgba(255,255,255,0.03);
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.06);
cursor: pointer;
transition: all 0.3s;
}
.step:hover {
transform: translateX(8px);
border-color: var(--red);
background: rgba(239, 68, 68, 0.08);
}
.step-num {
width: 38px;
height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, var(--red), var(--orange));
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
flex-shrink: 0;
font-size: 0.95rem;
}
.step h4 { margin-bottom: 4px; color: var(--text); }
.step p { color: #64748b; font-size: 0.88rem; }
/* Flags */
.flags-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 15px;
margin: 18px 0;
}
.flag-card {
background: rgba(255,255,255,0.03);
border-radius: 12px;
padding: 20px;
border: 1px solid rgba(255,255,255,0.06);
cursor: pointer;
transition: all 0.3s;
}
.flag-card:hover {
background: rgba(239, 68, 68, 0.1);
border-color: var(--red);
transform: translateY(-4px);
}
.flag-name {
font-family: 'Fira Code', monospace;
color: var(--cyan);
font-weight: 600;
margin-bottom: 8px;
}
.flag-desc {
color: #94a3b8;
font-size: 0.88rem;
line-height: 1.5;
}
/* Info boxes */
.info {
padding: 18px;
border-radius: 12px;
margin: 16px 0;
display: flex;
gap: 14px;
align-items: flex-start;
}
.info.warn {
background: rgba(251, 191, 36, 0.12);
border-left: 4px solid var(--yellow);
}
.info.danger {
background: rgba(239, 68, 68, 0.12);
border-left: 4px solid var(--red);
}
.info.tip {
background: rgba(104, 160, 99, 0.12);
border-left: 4px solid var(--node);
}
.info-icon { font-size: 1.3rem; flex-shrink: 0; }
/* Terminal */
.terminal {
background: #0d0812;
border-radius: 14px;
overflow: hidden;
margin: 22px 0;
box-shadow: 0 18px 55px rgba(0,0,0,0.5);
}
.term-header {
background: var(--card);
padding: 10px 16px;
display: flex;
align-items: center;
gap: 8px;
}
.term-body {
padding: 20px;
font-family: 'Fira Code', monospace;
font-size: 0.9rem;
min-height: 160px;
max-height: 300px;
overflow-y: auto;
}
.term-line { margin-bottom: 8px; }
.prompt { color: var(--cyan); font-weight: 600; }
.cursor {
display: inline-block;
width: 9px;
height: 16px;
background: var(--red);
animation: blink 1s infinite;
vertical-align: middle;
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
/* Uninstall animation */
.uninstall-visual {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(168, 85, 247, 0.1));
border-radius: 16px;
padding: 30px;
text-align: center;
margin: 20px 0;
border: 2px solid rgba(239, 68, 68, 0.2);
}
.uninstall-box {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin: 25px 0;
flex-wrap: wrap;
}
.pkg-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--node), #3c873a);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
transition: all 0.5s;
cursor: pointer;
}
.pkg-icon.removing {
animation: removeAnim 1s forwards;
}
@keyframes removeAnim {
0% { transform: scale(1) rotate(0deg); opacity: 1; }
50% { transform: scale(1.2) rotate(10deg); }
100% { transform: scale(0) rotate(180deg); opacity: 0; }
}
.trash-bin {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--red), var(--orange));
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
cursor: pointer;
transition: all 0.3s;
}
.trash-bin:hover { transform: scale(1.1); }
.trash-bin.active { animation: trashShake 0.5s; }
@keyframes trashShake {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-15deg); }
75% { transform: rotate(15deg); }
}
.visual-arrow {
font-size: 2rem;
color: var(--red);
animation: arrowMove 1s infinite;
}
@keyframes arrowMove {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(15px); }
}
.demo-btn {
background: linear-gradient(135deg, var(--red), var(--purple));
border: none;
padding: 12px 28px;
border-radius: 10px;
color: white;
font-weight: 700;
cursor: pointer;
transition: all 0.3s;
margin-top: 15px;
}
.demo-btn:hover {
transform: scale(1.05);
box-shadow: 0 10px 30px rgba(239, 68, 68, 0.4);
}
/* Checklist */
.checklist {
display: flex;
flex-direction: column;
gap: 12px;
margin: 18px 0;
}
.check-item {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
background: rgba(255,255,255,0.03);
border-radius: 10px;
cursor: pointer;
transition: all 0.3s;
border: 1px solid transparent;
}
.check-item:hover {
background: rgba(239, 68, 68, 0.08);
border-color: var(--red);
}
.check-item.checked {
background: rgba(104, 160, 99, 0.15);
border-color: var(--node);
}
.check-box {
width: 26px;
height: 26px;
border-radius: 6px;
border: 2px solid #64748b;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
font-size: 0.9rem;
}
.check-item.checked .check-box {
background: var(--node);
border-color: var(--node);
}
/* Quiz */
.quiz {
background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(6, 182, 212, 0.1));
border-radius: 16px;
padding: 26px;
border: 2px solid rgba(168, 85, 247, 0.3);
}
.quiz-q {
font-size: 1.15rem;
font-weight: 600;
margin-bottom: 18px;
}
.quiz-opts { display: flex; flex-direction: column; gap: 10px; }
.quiz-opt {
padding: 14px 20px;
background: var(--card);
border-radius: 10px;
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(6px);
}
.quiz-opt.right {
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-ltr {
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.85rem;
}
.quiz-res {
margin-top: 16px;
padding: 16px;
border-radius: 10px;
text-align: center;
font-weight: 600;
display: none;
}
.quiz-res.show { display: block; animation: fadeIn 0.4s; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
/* FAB */
.fab {
position: fixed;
bottom: 25px;
right: 25px;
width: 55px;
height: 55px;
border-radius: 50%;
background: linear-gradient(135deg, var(--red), var(--orange));
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
box-shadow: 0 10px 35px rgba(239, 68, 68, 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(80px);
background: var(--card);
padding: 14px 26px;
border-radius: 12px;
border: 2px solid var(--red);
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;
}
.toast.show {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
/* Footer */
footer {
text-align: center;
padding: 45px 20px;
background: var(--card);
margin-top: 45px;
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(--red);
transform: translateY(-4px);
}
@media (max-width: 600px) {
.cmd-text { font-size: 0.95rem; }
.copy-btn { width: 100%; justify-content: center; }
.logo-wrap { flex-direction: column; gap: 10px; }
.arrow { transform: rotate(90deg); }
.uninstall-box { flex-direction: column; }
.visual-arrow { transform: rotate(90deg); }
}
</style>
</head>
<body>
<div class="progress" id="progress"></div>
<div class="bg-gradient"></div>
<div class="particles" id="particles"></div>
<header>
<div class="logo-wrap">
<div class="node-icon" onclick="showToast('Bye bye Node.js! 👋')">⬢</div>
<span class="arrow">➜</span>
<div class="trash-icon" onclick="triggerTrash()">🗑️</div>
</div>
<h1>winget uninstall OpenJS.NodeJS</h1>
<p class="subtitle">Learn how to cleanly remove Node.js from Windows! 🧹</p>
</header>
<div class="cmd-showcase">
<div class="cmd-box">
<div class="cmd-header">
<div class="dot r"></div>
<div class="dot y"></div>
<div class="dot g"></div>
<span class="cmd-title">PowerShell</span>
</div>
<div class="cmd-body">
<div class="cmd-text">
<span class="kw">winget</span>
<span class="action">uninstall</span>
<span class="pkg">OpenJS.NodeJS</span>
</div>
<button class="copy-btn" onclick="copyCmd()">
<span id="cpIcon">📋</span>
<span id="cpText">Copy</span>
</button>
</div>
</div>
</div>
<main>
<!-- What it does -->
<section class="section" id="what">
<div class="sec-title">
<div class="sec-icon" style="background: linear-gradient(135deg, var(--red), var(--orange));">🎯</div>
<span>What Does This Command Do?</span>
</div>
<div class="card">
<h3>🗑️ Complete Node.js Removal</h3>
<p>This command uses Windows Package Manager (winget) to completely uninstall Node.js from your system. It removes the Node.js runtime, NPM (Node Package Manager), and all associated files that were installed via winget.</p>
<div class="info warn">
<span class="info-icon">⚠️</span>
<div>
<strong>Before You Uninstall!</strong>
<p>Make sure you've backed up any global npm packages you want to keep. They will be removed along with Node.js!</p>
</div>
</div>
</div>
</section>
<!-- Command breakdown -->
<section class="section" id="breakdown">
<div class="sec-title">
<div class="sec-icon" style="background: linear-gradient(135deg, var(--purple), var(--cyan));">🔍</div>
<span>Command Breakdown</span>
</div>
<div class="card">
<h3>🧩 Understanding Each Part</h3>
<div class="code" style="font-size: 1.1rem; text-align: center; padding: 22px;">
<span class="kw" onclick="showToast('Windows Package Manager')">winget</span>
<span style="color: #64748b; margin: 0 8px;">→</span>
<span class="action" onclick="showToast('Remove the package')">uninstall</span>
<span style="color: #64748b; margin: 0 8px;">→</span>
<span class="pkg" onclick="showToast('Node.js package ID')">OpenJS.NodeJS</span>
</div>
<div class="flags-grid">
<div class="flag-card" onclick="showToast('Windows Package Manager CLI')">
<div class="flag-name">winget</div>
<div class="flag-desc">Microsoft's official package manager for Windows 10/11</div>
</div>
<div class="flag-card" onclick="showToast('Removes the specified package')">
<div class="flag-name">uninstall</div>
<div class="flag-desc">Command to remove an installed package from your system</div>
</div>
<div class="flag-card" onclick="showToast('Official Node.js package')">
<div class="flag-name">OpenJS.NodeJS</div>
<div class="flag-desc">The unique identifier for Node.js in the winget repository</div>
</div>
</div>
</div>
</section>
<!-- Interactive visual -->
<section class="section" id="visual">
<div class="sec-title">
<div class="sec-icon" style="background: linear-gradient(135deg, var(--yellow), var(--orange));">🎬</div>
<span>See It In Action</span>
</div>
<div class="uninstall-visual">
<h3 style="color: var(--yellow); margin-bottom: 10px;">🎭 Uninstall Visualization</h3>
<p style="color: #94a3b8;">Click the button to watch Node.js get uninstalled!</p>
<div class="uninstall-box">
<div class="pkg-icon" id="pkgIcon">⬢</div>
<span class="visual-arrow">➜</span>
<div class="trash-bin" id="trashBin">🗑️</div>
</div>
<button class="demo-btn" onclick="runVisualDemo()">▶️ Run Uninstall Demo</button>
</div>
</section>
<!-- Steps -->
<section class="section" id="steps">
<div class="sec-title">
<div class="sec-icon" style="background: linear-gradient(135deg, var(--node), var(--cyan));">📋</div>
<span>Step-by-Step Guide</span>
</div>
<div class="card">
<h3>🚀 How to Uninstall Node.js</h3>
<div class="steps">
<div class="step" onclick="showToast('Step 1 complete!')">
<div class="step-num">1</div>
<div>
<h4>Open Terminal as Administrator</h4>
<p>Press Win + X → Select "Terminal (Admin)" or "PowerShell (Admin)"</p>
</div>
</div>
<div class="step" onclick="showToast('Step 2 complete!')">
<div class="step-num">2</div>
<div>
<h4>Run the Uninstall Command</h4>
<p>Type: winget uninstall OpenJS.NodeJS and press Enter</p>
</div>
</div>
<div class="step" onclick="showToast('Step 3 complete!')">
<div class="step-num">3</div>
<div>
<h4>Confirm the Uninstallation</h4>
<p>Accept any prompts that appear during the process</p>
</div>
</div>
<div class="step" onclick="showToast('All done!')">
<div class="step-num">4</div>
<div>
<h4>Verify Removal</h4>
<p>Run "node --version" - it should show an error if uninstalled</p>
</div>
</div>
</div>
</div>
</section>
<!-- Useful flags -->
<section class="section" id="flags">
<div class="sec-title">
<div class="sec-icon" style="background: linear-gradient(135deg, var(--red), var(--purple));">🚩</div>
<span>Useful Flags & Options</span>
</div>
<div class="card">
<h3>⚡ Power Up Your Uninstall</h3>
<div class="code">
<button class="code-cp" onclick="copyThis('winget uninstall OpenJS.NodeJS --silent')">Copy</button>
<span class="kw">winget</span> <span class="action">uninstall</span> <span class="pkg">OpenJS.NodeJS</span> <span style="color: var(--purple);">--silent</span>
<br><span class="comment"># Silent uninstall - no prompts</span>
</div>
<div class="flags-grid">
<div class="flag-card" onclick="copyThis('winget uninstall OpenJS.NodeJS --silent')">
<div class="flag-name">--silent</div>
<div class="flag-desc">Runs uninstall without any user interaction or prompts</div>
</div>
<div class="flag-card" onclick="copyThis('winget uninstall OpenJS.NodeJS --force')">
<div class="flag-name">--force</div>
<div class="flag-desc">Forces the uninstall even if the app is running</div>
</div>
<div class="flag-card" onclick="copyThis('winget uninstall OpenJS.NodeJS --purge')">
<div class="flag-name">--purge</div>
<div class="flag-desc">Removes all files including user data and config</div>
</div>
<div class="flag-card" onclick="copyThis('winget uninstall --id OpenJS.NodeJS')">
<div class="flag-name">--id</div>
<div class="flag-desc">Explicitly specify the package ID for precision</div>
</div>
</div>
</div>
</section>
<!-- Terminal demo -->
<section class="section" id="demo">
<div class="sec-title">
<div class="sec-icon" style="background: linear-gradient(135deg, var(--cyan), var(--blue));">💻</div>
<span>Live Terminal Demo</span>
</div>
<div class="card">
<h3>🎬 Watch the Uninstall Process</h3>
<div class="terminal">
<div class="term-header">
<div class="dot r"></div>
<div class="dot y"></div>
<div class="dot g"></div>
<span style="flex:1; text-align:center; color:#64748b; font-size:0.8rem;">PowerShell (Admin)</span>
</div>
<div class="term-body" id="termBody">
<div class="term-line">
<span class="prompt">PS C:\></span>
<span class="cursor"></span>
</div>
</div>
</div>
<button class="demo-btn" onclick="runTerminalDemo()">▶️ Run Demo</button>
</div>
</section>
<!-- Pre-uninstall checklist -->
<section class="section" id="checklist">
<div class="sec-title">
<div class="sec-icon" style="background: linear-gradient(135deg, var(--yellow), var(--node));">✅</div>
<span>Pre-Uninstall Checklist</span>
</div>
<div class="card">
<h3>📝 Before You Uninstall</h3>
<p>Click each item to mark it as complete:</p>
<div class="checklist">
<div class="check-item" onclick="toggleCheck(this)">
<div class="check-box"></div>
<span>Backed up global npm packages list (npm list -g)</span>
</div>
<div class="check-item" onclick="toggleCheck(this)">
<div class="check-box"></div>
<span>Saved any important project dependencies</span>
</div>
<div class="check-item" onclick="toggleCheck(this)">
<div class="check-box"></div>
<span>Closed all Node.js applications and terminals</span>
</div>
<div class="check-item" onclick="toggleCheck(this)">
<div class="check-box"></div>
<span>Noted down current Node.js version for reinstall</span>
</div>
<div class="check-item" onclick="toggleCheck(this)">
<div class="check-box"></div>
<span>Ready to proceed with uninstallation</span>
</div>
</div>
</div>
</section>
<!-- What gets removed -->
<section class="section" id="removed">
<div class="sec-title">
<div class="sec-icon" style="background: linear-gradient(135deg, var(--red), var(--orange));">📦</div>
<span>What Gets Removed?</span>
</div>
<div class="card">
<h3>🧹 Components Being Uninstalled</h3>
<div class="flags-grid">
<div class="flag-card">
<div class="flag-name">⬢ Node.js Runtime</div>
<div class="flag-desc">The core JavaScript runtime environment</div>
</div>
<div class="flag-card">
<div class="flag-name">📦 NPM</div>
<div class="flag-desc">Node Package Manager and its cache</div>
</div>
<div class="flag-card">
<div class="flag-name">🌍 Global Packages</div>
<div class="flag-desc">All globally installed npm packages</div>
</div>
<div class="flag-card">
<div class="flag-name">🔧 PATH Entry</div>
<div class="flag-desc">System PATH variable entries for node/npm</div>
</div>
</div>
<div class="info tip">
<span class="info-icon">💡</span>
<div>
<strong>Good News!</strong>
<p>Your project's local node_modules folders are NOT removed. Only the global installation is affected.</p>
</div>
</div>
</div>
</section>
<!-- Verify removal -->
<section class="section" id="verify">
<div class="sec-title">
<div class="sec-icon" style="background: linear-gradient(135deg, var(--purple), var(--pink));">🔍</div>
<span>Verify Removal</span>
</div>
<div class="card">
<h3>✅ Confirm Node.js is Gone</h3>
<div class="code">
<button class="code-cp" onclick="copyThis('node --version')">Copy</button>
<span class="kw">node</span> <span style="color: var(--purple);">--version</span>
<br><span style="color: var(--red);"># Expected: 'node' is not recognized...</span>
</div>
<div class="code">
<button class="code-cp" onclick="copyThis('npm --version')">Copy</button>
<span class="kw">npm</span> <span style="color: var(--purple);">--version</span>
<br><span style="color: var(--red);"># Expected: 'npm' is not recognized...</span>
</div>
<div class="code">
<button class="code-cp" onclick="copyThis('winget list OpenJS.NodeJS')">Copy</button>
<span class="kw">winget</span> <span class="action">list</span> <span class="pkg">OpenJS.NodeJS</span>
<br><span style="color: var(--red);"># Expected: No installed package found</span>
</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(--cyan));">🧠</div>
<span>Quick Quiz!</span>
</div>
<div class="quiz">
<div class="quiz-q">Which flag performs a silent uninstall without prompts?</div>
<div class="quiz-opts">
<div class="quiz-opt" onclick="checkQuiz(this, false)">
<span class="opt-ltr">A</span>
<span>--quiet</span>
</div>
<div class="quiz-opt" onclick="checkQuiz(this, true)">
<span class="opt-ltr">B</span>
<span>--silent</span>
</div>
<div class="quiz-opt" onclick="checkQuiz(this, false)">
<span class="opt-ltr">C</span>
<span>--no-prompt</span>
</div>
<div class="quiz-opt" onclick="checkQuiz(this, false)">
<span class="opt-ltr">D</span>
<span>--auto</span>
</div>
</div>
<div class="quiz-res" id="quizRes"></div>
</div>
</section>
<!-- Reinstall -->
<section class="section" id="reinstall">
<div class="sec-title">
<div class="sec-icon" style="background: linear-gradient(135deg, var(--node), var(--cyan));">🔄</div>
<span>Need to Reinstall?</span>
</div>
<div class="card">
<h3>🚀 Getting Node.js Back</h3>
<p>Changed your mind? Here's how to reinstall Node.js:</p>
<div class="code">
<button class="code-cp" onclick="copyThis('winget install OpenJS.NodeJS.LTS')">Copy</button>
<span class="kw">winget</span> <span style="color: var(--node);">install</span> <span class="pkg">OpenJS.NodeJS.LTS</span>
<br><span class="comment"># Installs the LTS (stable) version</span>
</div>
<div class="code">
<button class="code-cp" onclick="copyThis('winget install OpenJS.NodeJS')">Copy</button>
<span class="kw">winget</span> <span style="color: var(--node);">install</span> <span class="pkg">OpenJS.NodeJS</span>
<br><span class="comment"># Installs the latest current version</span>
</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;">Clean Uninstalls, Happy System! 🧹</p>
<p style="color: #475569; font-size: 0.85rem; margin-top: 8px;">Made with ❤️ for Windows users</p>
</footer>
<script>
// Falling particles
const particles = document.getElementById('particles');
const particleChars = ['📦', '⬢', '🗑️', '❌', '✖️', '💨'];
function createParticle() {
const p = document.createElement('div');
p.className = 'particle';
p.textContent = particleChars[Math.floor(Math.random() * particleChars.length)];
p.style.left = Math.random() * 100 + '%';
p.style.animationDuration = (Math.random() * 5 + 5) + 's';
p.style.animationDelay = Math.random() * 3 + 's';
particles.appendChild(p);
setTimeout(() => p.remove(), 12000);
}
for (let i = 0; i < 12; i++) createParticle();
setInterval(createParticle, 1500);
// 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
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);
});
// Copy command
function copyCmd() {
navigator.clipboard.writeText('winget uninstall OpenJS.NodeJS');
const btn = document.querySelector('.copy-btn');
document.getElementById('cpIcon').textContent = '✅';
document.getElementById('cpText').textContent = 'Copied!';
btn.classList.add('done');
showToast('Command copied to clipboard!');
setTimeout(() => {
document.getElementById('cpIcon').textContent = '📋';
document.getElementById('cpText').textContent = 'Copy';
btn.classList.remove('done');
}, 2000);
}
function copyThis(cmd) {
navigator.clipboard.writeText(cmd);
showToast('Copied: ' + cmd);
}
// Toast
function showToast(msg) {
const toast = document.getElementById('toast');
toast.innerHTML = '✨ ' + msg;
toast.classList.add('show');
setTimeout(() => toast.classList.remove('show'), 2500);
}
// Trash animation
function triggerTrash() {
const trash = document.querySelector('.trash-icon');
trash.style.animation = 'none';
trash.offsetHeight;
trash.style.animation = 'trashShake 0.5s, trashWiggle 2s ease-in-out infinite 0.5s';
showToast('Ready to clean up! 🧹');
}
// Visual demo
function runVisualDemo() {
const pkg = document.getElementById('pkgIcon');
const trash = document.getElementById('trashBin');
pkg.classList.remove('removing');
pkg.style.opacity = '1';
pkg.style.transform = 'scale(1)';
setTimeout(() => {
pkg.classList.add('removing');
trash.classList.add('active');
setTimeout(() => {
trash.classList.remove('active');
showToast('Node.js has been uninstalled! 🎉');
}, 1000);
}, 300);
}
// Terminal demo
let termRunning = false;
function runTerminalDemo() {
if (termRunning) return;
termRunning = true;
const body = document.getElementById('termBody');
body.innerHTML = '<div class="term-line"><span class="prompt">PS C:\\></span> <span class="cursor"></span></div>';
const lines = [
{ type: 'cmd', text: 'winget uninstall OpenJS.NodeJS', delay: 100 },
{ type: 'out', text: 'Found Node.js [OpenJS.NodeJS]', delay: 700 },
{ type: 'out', text: 'Starting package uninstall...', delay: 500 },
{ type: 'out', text: 'Removing Node.js runtime...', delay: 600 },
{ type: 'out', text: 'Removing NPM...', delay: 500 },
{ type: 'out', text: 'Cleaning up PATH entries...', delay: 400 },
{ type: 'out', text: 'Removing program files...', delay: 500 },
{ type: 'success', text: '✅ Successfully uninstalled Node.js!', delay: 600 },
];
let total = 0;
lines.forEach((line, idx) => {
total += line.delay;
setTimeout(() => {
if (idx === 0) {
const first = body.querySelector('.term-line');
let i = 0;
const interval = setInterval(() => {
if (i < line.text.length) {
first.innerHTML = `<span class="prompt">PS C:\\></span> ${line.text.substring(0, i + 1)}<span class="cursor"></span>`;
i++;
} else clearInterval(interval);
}, 35);
} else {
const div = document.createElement('div');
div.className = 'term-line';
const color = line.type === 'success' ? 'var(--node)' : '#94a3b8';
div.innerHTML = `<span style="color: ${color}">${line.text}</span>`;
body.appendChild(div);
body.scrollTop = body.scrollHeight;
if (idx === lines.length - 1) {
showToast('Uninstall complete! 🎉');
termRunning = false;
}
}
}, total);
});
}
// Checklist
function toggleCheck(el) {
el.classList.toggle('checked');
const box = el.querySelector('.check-box');
box.innerHTML = el.classList.contains('checked') ? '✓' : '';
const allChecked = document.querySelectorAll('.check-item.checked').length;
const total = document.querySelectorAll('.check-item').length;
if (allChecked === total) {
showToast('All checks complete! Ready to uninstall! 🚀');
}
}
// Quiz
function checkQuiz(el, correct) {
const opts = document.querySelectorAll('.quiz-opt');
opts.forEach(o => {
o.style.pointerEvents = 'none';
o.classList.remove('right', 'wrong');
});
el.classList.add(correct ? 'right' : 'wrong');
if (!correct) opts[1].classList.add('right');
const res = document.getElementById('quizRes');
res.className = 'quiz-res show';
res.style.background = correct ? 'rgba(104, 160, 99, 0.2)' : 'rgba(239, 68, 68, 0.2)';
res.innerHTML = correct
? '🎉 Correct! --silent runs the uninstall without any prompts!'
: '❌ Not quite! The correct answer is --silent';
}
// Scroll to top
function scrollTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
// Initial visibility
setTimeout(() => sections[0].classList.add('vis'), 300);
</script>
</body>
</html>
Live Preview