Import OS module using require
đĻ Node.js-> Command Line
⨠The Prompt Phrase
const os = require('os');
đģ Code Preview
đĻ All-in-One Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>đ Node.js OS Module - Interactive Learning Experience</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
color: #333;
overflow-x: hidden;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.floating-shapes {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.shape {
position: absolute;
opacity: 0.1;
animation: float 20s infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-100px) rotate(180deg); }
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
position: relative;
z-index: 2;
}
header {
text-align: center;
padding: 60px 20px;
background: rgba(255, 255, 255, 0.95);
border-radius: 30px;
margin-bottom: 40px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: slideDown 1s ease-out;
position: relative;
overflow: hidden;
}
@keyframes slideDown {
from { transform: translateY(-100px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
animation: shine 3s infinite;
}
@keyframes shine {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
h1 {
font-size: 4em;
background: linear-gradient(45deg, #667eea, #764ba2, #f093fb);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 20px;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.subtitle {
font-size: 1.5em;
color: #666;
margin-bottom: 10px;
}
.emoji-rain {
position: absolute;
font-size: 2em;
animation: fall 5s linear infinite;
}
@keyframes fall {
to { transform: translateY(100vh) rotate(360deg); }
}
.section {
background: rgba(255, 255, 255, 0.95);
border-radius: 25px;
padding: 40px;
margin-bottom: 30px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
animation: fadeInUp 0.8s ease-out;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.section:hover {
transform: translateY(-10px);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
}
@keyframes fadeInUp {
from { transform: translateY(50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
h2 {
font-size: 2.5em;
color: #667eea;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 15px;
}
.icon {
font-size: 1.2em;
animation: bounce 1s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.method-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 25px;
border-radius: 20px;
margin: 20px 0;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.method-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s;
}
.method-card:hover::before {
left: 100%;
}
.method-card:hover {
transform: scale(1.05) rotate(1deg);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.5);
}
.method-name {
font-size: 1.8em;
font-weight: bold;
margin-bottom: 10px;
}
.method-description {
font-size: 1.1em;
line-height: 1.6;
margin-bottom: 15px;
}
.code-block {
background: rgba(0, 0, 0, 0.8);
color: #0f0;
padding: 20px;
border-radius: 15px;
font-family: 'Courier New', monospace;
margin: 15px 0;
overflow-x: auto;
position: relative;
border: 2px solid #0f0;
box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
}
.code-block::before {
content: 'đģ CODE';
position: absolute;
top: -12px;
left: 20px;
background: #0f0;
color: black;
padding: 3px 10px;
border-radius: 5px;
font-size: 0.8em;
font-weight: bold;
}
.interactive-demo {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
padding: 30px;
border-radius: 20px;
margin: 20px 0;
text-align: center;
}
.demo-button {
background: white;
color: #f5576c;
border: none;
padding: 15px 40px;
font-size: 1.2em;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: bold;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.demo-button:hover {
transform: scale(1.1) rotate(-3deg);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.demo-button:active {
transform: scale(0.95);
}
.result-box {
background: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 15px;
margin-top: 20px;
min-height: 100px;
font-size: 1.1em;
color: #333;
animation: popIn 0.5s ease;
}
@keyframes popIn {
0% { transform: scale(0); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.fun-fact {
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
padding: 25px;
border-radius: 20px;
margin: 20px 0;
border-left: 5px solid #ff6b6b;
animation: wiggle 3s ease-in-out infinite;
}
@keyframes wiggle {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(1deg); }
75% { transform: rotate(-1deg); }
}
.quiz-section {
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
padding: 30px;
border-radius: 20px;
margin: 20px 0;
}
.quiz-option {
background: white;
padding: 15px;
margin: 10px 0;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
border: 3px solid transparent;
}
.quiz-option:hover {
transform: translateX(10px);
border-color: #667eea;
}
.correct {
background: #51cf66 !important;
color: white;
animation: celebrate 0.5s ease;
}
.wrong {
background: #ff6b6b !important;
color: white;
animation: shake 0.5s ease;
}
@keyframes celebrate {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1) rotate(5deg); }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-10px); }
75% { transform: translateX(10px); }
}
.progress-bar {
width: 100%;
height: 30px;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
overflow: hidden;
margin: 20px 0;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
width: 0%;
transition: width 1s ease;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.tooltip {
position: relative;
display: inline-block;
cursor: help;
color: #667eea;
font-weight: bold;
border-bottom: 2px dotted #667eea;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 10px;
padding: 10px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -100px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.memory-game {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
margin: 20px 0;
}
.memory-card {
aspect-ratio: 1;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
cursor: pointer;
transition: all 0.3s ease;
transform-style: preserve-3d;
}
.memory-card:hover {
transform: scale(1.05);
}
.memory-card.flipped {
background: white;
color: #667eea;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 20px 0;
}
.stat-card {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 25px;
border-radius: 15px;
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
}
.stat-card:hover {
transform: translateY(-10px) rotate(3deg);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.5);
}
.stat-value {
font-size: 2.5em;
font-weight: bold;
margin: 10px 0;
}
.stat-label {
font-size: 1em;
opacity: 0.9;
}
.celebration {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 5em;
z-index: 1000;
animation: celebrationPop 1s ease-out forwards;
pointer-events: none;
}
@keyframes celebrationPop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
50% { transform: translate(-50%, -50%) scale(1.5); }
100% { transform: translate(-50%, -50%) scale(1) translateY(-200px); opacity: 0; }
}
.tab-container {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.tab {
padding: 15px 30px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1.1em;
font-weight: bold;
}
.tab:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}
.tab.active {
background: linear-gradient(135deg, #f093fb, #f5576c);
transform: scale(1.1);
}
.tab-content {
display: none;
animation: fadeIn 0.5s ease;
}
.tab-content.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
footer {
text-align: center;
padding: 40px;
background: rgba(255, 255, 255, 0.95);
border-radius: 25px;
margin-top: 40px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
.scroll-indicator {
position: fixed;
top: 0;
left: 0;
height: 5px;
background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
z-index: 1000;
transition: width 0.1s ease;
}
@media (max-width: 768px) {
h1 { font-size: 2.5em; }
h2 { font-size: 1.8em; }
.section { padding: 20px; }
.memory-game { grid-template-columns: repeat(2, 1fr); }
}
</style>
</head>
<body>
<div class="scroll-indicator" id="scrollIndicator"></div>
<div class="floating-shapes" id="floatingShapes"></div>
<div class="container">
<header>
<h1>đ Node.js OS Module</h1>
<p class="subtitle">Your Interactive Journey to Understanding Operating System Information</p>
<p>đŽ Learn âĸ Play âĸ Master đŽ</p>
</header>
<div class="section">
<h2><span class="icon">đ</span> What is the OS Module?</h2>
<p style="font-size: 1.2em; line-height: 1.8;">
The <span class="tooltip">OS module<span class="tooltiptext">Operating System module - built into Node.js!</span></span>
is a built-in Node.js module that provides operating system-related utility methods and properties.
It allows you to interact with the underlying operating system and get information about the computer
your Node.js application is running on! đĨī¸â¨
</p>
<div class="fun-fact">
<strong>đ¯ Fun Fact:</strong> The OS module doesn't require installation - it comes pre-packaged with Node.js!
Just require it and start exploring your system!
</div>
<div class="code-block">
<pre>// Import the OS module
const os = require('os');
// Now you have access to tons of system information!
console.log('Hello from', os.platform());</pre>
</div>
</div>
<div class="section">
<h2><span class="icon">đ¯</span> OS Module Methods Explorer</h2>
<div class="tab-container">
<button class="tab active" onclick="switchTab(0)">System Info</button>
<button class="tab" onclick="switchTab(1)">Memory & CPU</button>
<button class="tab" onclick="switchTab(2)">User & Network</button>
<button class="tab" onclick="switchTab(3)">Advanced</button>
</div>
<div class="tab-content active" id="tab0">
<div class="method-card" onclick="showDemo('platform')">
<div class="method-name">đą os.platform()</div>
<div class="method-description">
Returns the operating system platform. This tells you what OS your code is running on!
Returns values like 'darwin' (macOS), 'win32' (Windows), 'linux', etc.
</div>
<div class="code-block">
<pre>const os = require('os');
console.log(os.platform());
// Output: 'darwin', 'win32', 'linux', etc.</pre>
</div>
</div>
<div class="method-card" onclick="showDemo('type')">
<div class="method-name">đģ os.type()</div>
<div class="method-description">
Returns the operating system name. More specific than platform()!
Returns 'Linux', 'Darwin', 'Windows_NT', etc.
</div>
<div class="code-block">
<pre>const os = require('os');
console.log(os.type());
// Output: 'Linux', 'Darwin', 'Windows_NT'</pre>
</div>
</div>
<div class="method-card" onclick="showDemo('release')">
<div class="method-name">đĸ os.release()</div>
<div class="method-description">
Returns the operating system release version. Great for checking OS versions!
</div>
<div class="code-block">
<pre>const os = require('os');
console.log(os.release());
// Output: '10.0.19041' (Windows), '20.6.0' (macOS), etc.</pre>
</div>
</div>
<div class="method-card" onclick="showDemo('arch')">
<div class="method-name">đī¸ os.arch()</div>
<div class="method-description">
Returns the CPU architecture. Tells you if you're running on 32-bit, 64-bit, ARM, etc.
Common values: 'x64', 'arm', 'arm64', 'ia32'
</div>
<div class="code-block">
<pre>const os = require('os');
console.log(os.arch());
// Output: 'x64', 'arm64', 'ia32', etc.</pre>
</div>
</div>
</div>
<div class="tab-content" id="tab1">
<div class="method-card" onclick="showDemo('totalmem')">
<div class="method-name">đž os.totalmem()</div>
<div class="method-description">
Returns the total amount of system memory in bytes. Perfect for checking how much RAM your system has!
</div>
<div class="code-block">
<pre>const os = require('os');
const totalMemory = os.totalmem();
const totalMemoryGB = (totalMemory / 1024 / 1024 / 1024).toFixed(2);
console.log(`Total Memory: ${totalMemoryGB} GB`);</pre>
</div>
</div>
<div class="method-card" onclick="showDemo('freemem')">
<div class="method-name">đ os.freemem()</div>
<div class="method-description">
Returns the amount of free system memory in bytes. Monitor available RAM in real-time!
</div>
<div class="code-block">
<pre>const os = require('os');
const freeMemory = os.freemem();
const freeMemoryGB = (freeMemory / 1024 / 1024 / 1024).toFixed(2);
console.log(`Free Memory: ${freeMemoryGB} GB`);</pre>
</div>
</div>
<div class="method-card" onclick="showDemo('cpus')">
<div class="method-name">⥠os.cpus()</div>
<div class="method-description">
Returns an array of objects containing information about each CPU/core.
Includes model, speed, and times!
</div>
<div class="code-block">
<pre>const os = require('os');
const cpus = os.cpus();
console.log(`Number of CPUs: ${cpus.length}`);
console.log(`CPU Model: ${cpus[0].model}`);
console.log(`CPU Speed: ${cpus[0].speed} MHz`);</pre>
</div>
</div>
<div class="method-card" onclick="showDemo('loadavg')">
<div class="method-name">đ os.loadavg()</div>
<div class="method-description">
Returns an array containing the 1, 5, and 15 minute load averages.
(Note: Returns [0, 0, 0] on Windows)
</div>
<div class="code-block">
<pre>const os = require('os');
const loadAvg = os.loadavg();
console.log('Load Average:');
console.log(`1 min: ${loadAvg[0]}`);
console.log(`5 min: ${loadAvg[1]}`);
console.log(`15 min: ${loadAvg[2]}`);</pre>
</div>
</div>
</div>
<div class="tab-content" id="tab2">
<div class="method-card" onclick="showDemo('hostname')">
<div class="method-name">đ os.hostname()</div>
<div class="method-description">
Returns the hostname of the operating system. Your computer's name on the network!
</div>
<div class="code-block">
<pre>const os = require('os');
console.log(`Computer Name: ${os.hostname()}`);</pre>
</div>
</div>
<div class="method-card" onclick="showDemo('userInfo')">
<div class="method-name">đ¤ os.userInfo()</div>
<div class="method-description">
Returns information about the currently effective user.
Includes username, uid, gid, shell, and homedir!
</div>
<div class="code-block">
<pre>const os = require('os');
const user = os.userInfo();
console.log(`Username: ${user.username}`);
console.log(`Home Directory: ${user.homedir}`);
console.log(`Shell: ${user.shell}`);</pre>
</div>
</div>
<div class="method-card" onclick="showDemo('networkInterfaces')">
<div class="method-name">đ os.networkInterfaces()</div>
<div class="method-description">
Returns an object containing network interfaces that have been assigned a network address.
See all your network connections!
</div>
<div class="code-block">
<pre>const os = require('os');
const networks = os.networkInterfaces();
console.log(networks);
// Shows all network interfaces with their addresses</pre>
</div>
</div>
<div class="method-card" onclick="showDemo('homedir')">
<div class="method-name">đĄ os.homedir()</div>
<div class="method-description">
Returns the home directory of the current user. Quick access to the user's home folder!
</div>
<div class="code-block">
<pre>const os = require('os');
console.log(`Home Directory: ${os.homedir()}`);</pre>
</div>
</div>
</div>
<div class="tab-content" id="tab3">
<div class="method-card" onclick="showDemo('tmpdir')">
<div class="method-name">đ os.tmpdir()</div>
<div class="method-description">
Returns the operating system's default directory for temporary files.
</div>
<div class="code-block">
<pre>const os = require('os');
console.log(`Temp Directory: ${os.tmpdir()}`);</pre>
</div>
</div>
<div class="method-card" onclick="showDemo('uptime')">
<div class="method-name">â° os.uptime()</div>
<div class="method-description">
Returns the system uptime in seconds. How long has your computer been running?
</div>
<div class="code-block">
<pre>const os = require('os');
const uptime = os.uptime();
const hours = Math.floor(uptime / 3600);
const minutes = Math.floor((uptime % 3600) / 60);
console.log(`System Uptime: ${hours}h ${minutes}m`);</pre>
</div>
</div>
<div class="method-card" onclick="showDemo('endianness')">
<div class="method-name">đ os.endianness()</div>
<div class="method-description">
Returns the endianness of the CPU. Returns 'BE' for big endian or 'LE' for little endian.
</div>
<div class="code-block">
<pre>const os = require('os');
console.log(`CPU Endianness: ${os.endianness()}`);</pre>
</div>
</div>
<div class="method-card" onclick="showDemo('constants')">
<div class="method-name">đĸ os.constants</div>
<div class="method-description">
Returns an object containing commonly used operating system-specific constants
for error codes, process signals, etc.
</div>
<div class="code-block">
<pre>const os = require('os');
console.log(os.constants.signals);
console.log(os.constants.errno);
// Contains system-level constants</pre>
</div>
</div>
<div class="method-card" onclick="showDemo('eol')">
<div class="method-name">âŠī¸ os.EOL</div>
<div class="method-description">
A constant defining the operating system-specific end-of-line marker.
'\n' on POSIX, '\r\n' on Windows.
</div>
<div class="code-block">
<pre>const os = require('os');
console.log('Line 1' + os.EOL + 'Line 2');
// Properly formats line breaks for the OS</pre>
</div>
</div>
</div>
</div>
<div class="section">
<h2><span class="icon">đŽ</span> Interactive Demo Playground</h2>
<p style="font-size: 1.2em; margin-bottom: 20px;">
Click the buttons below to see simulated OS module outputs!
(Note: These are simulated examples since we're in a browser)
</p>
<div class="stats-grid">
<div class="stat-card" onclick="simulateMethod('platform')">
<div class="stat-label">Platform</div>
<div class="stat-value" id="sim-platform">?</div>
<div>Click to simulate!</div>
</div>
<div class="stat-card" onclick="simulateMethod('arch')">
<div class="stat-label">Architecture</div>
<div class="stat-value" id="sim-arch">?</div>
<div>Click to simulate!</div>
</div>
<div class="stat-card" onclick="simulateMethod('cpus')">
<div class="stat-label">CPU Cores</div>
<div class="stat-value" id="sim-cpus">?</div>
<div>Click to simulate!</div>
</div>
<div class="stat-card" onclick="simulateMethod('memory')">
<div class="stat-label">Total RAM</div>
<div class="stat-value" id="sim-memory">?</div>
<div>Click to simulate!</div>
</div>
</div>
<div class="interactive-demo">
<h3 style="color: white; margin-bottom: 20px; font-size: 1.8em;">đ˛ Random OS Info Generator</h3>
<button class="demo-button" onclick="generateRandomInfo()">
Generate Random System Info! đ°
</button>
<div class="result-box" id="randomResult" style="display: none;"></div>
</div>
</div>
<div class="section">
<h2><span class="icon">đ§ </span> Memory Matching Game</h2>
<p style="font-size: 1.2em; margin-bottom: 20px;">
Match the OS module methods with their emoji representations! Click to flip cards.
</p>
<div class="progress-bar">
<div class="progress-fill" id="gameProgress">0%</div>
</div>
<div class="memory-game" id="memoryGame"></div>
<button class="demo-button" onclick="initMemoryGame()" style="margin-top: 20px;">
đ Reset Game
</button>
</div>
<div class="section">
<h2><span class="icon">â</span> Knowledge Quiz</h2>
<div class="quiz-section">
<h3 style="margin-bottom: 20px; font-size: 1.5em;">Question 1: What does os.platform() return?</h3>
<div class="quiz-option" onclick="checkAnswer(this, false)">
A) The version of Node.js
</div>
<div class="quiz-option" onclick="checkAnswer(this, true)">
B) The operating system platform (e.g., 'darwin', 'win32', 'linux')
</div>
<div class="quiz-option" onclick="checkAnswer(this, false)">
C) The CPU architecture
</div>
<div class="quiz-option" onclick="checkAnswer(this, false)">
D) The amount of free memory
</div>
</div>
<div class="quiz-section">
<h3 style="margin-bottom: 20px; font-size: 1.5em;">Question 2: Which method returns system uptime?</h3>
<div class="quiz-option" onclick="checkAnswer(this, false)">
A) os.runtime()
</div>
<div class="quiz-option" onclick="checkAnswer(this, true)">
B) os.uptime()
</div>
<div class="quiz-option" onclick="checkAnswer(this, false)">
C) os.systemTime()
</div>
<div class="quiz-option" onclick="checkAnswer(this, false)">
D) os.duration()
</div>
</div>
<div class="quiz-section">
<h3 style="margin-bottom: 20px; font-size: 1.5em;">Question 3: What does os.cpus() return?</h3>
<div class="quiz-option" onclick="checkAnswer(this, false)">
A) A number representing CPU count
</div>
<div class="quiz-option" onclick="checkAnswer(this, false)">
C) The CPU temperature
</div>
<div class="quiz-option" onclick="checkAnswer(this, true)">
B) An array of objects with CPU information
</div>
<div class="quiz-option" onclick="checkAnswer(this, false)">
D) The CPU brand name
</div>
</div>
</div>
<div class="section">
<h2><span class="icon">đĄ</span> Real-World Use Cases</h2>
<div class="fun-fact" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
<strong>đ¯ Use Case 1: System Monitoring Dashboard</strong>
<p style="margin-top: 10px; line-height: 1.6;">
Create a real-time dashboard that monitors CPU usage, memory consumption, and system uptime.
Perfect for DevOps and system administrators!
</p>
</div>
<div class="fun-fact" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
<strong>đ¯ Use Case 2: Cross-Platform Compatibility</strong>
<p style="margin-top: 10px; line-height: 1.6;">
Use os.platform() to detect the OS and run platform-specific code.
Essential for building applications that work on Windows, macOS, and Linux!
</p>
</div>
<div class="fun-fact" style="background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);">
<strong>đ¯ Use Case 3: Resource Optimization</strong>
<p style="margin-top: 10px; line-height: 1.6;">
Check available memory with os.freemem() before running memory-intensive operations.
Prevent crashes and optimize performance!
</p>
</div>
<div class="fun-fact" style="background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);">
<strong>đ¯ Use Case 4: User Environment Setup</strong>
<p style="margin-top: 10px; line-height: 1.6;">
Use os.homedir() and os.userInfo() to create user-specific configurations and file paths.
Great for CLI tools and desktop applications!
</p>
</div>
</div>
<div class="section">
<h2><span class="icon">đ</span> Complete Example: System Info Reporter</h2>
<p style="font-size: 1.2em; margin-bottom: 20px;">
Here's a complete, practical example that combines multiple OS module methods:
</p>
<div class="code-block">
<pre>const os = require('os');
// System Information Reporter
function getSystemInfo() {
const info = {
// Basic System Info
platform: os.platform(),
type: os.type(),
release: os.release(),
architecture: os.arch(),
hostname: os.hostname(),
// Memory Information (in GB)
totalMemory: (os.totalmem() / 1024 / 1024 / 1024).toFixed(2) + ' GB',
freeMemory: (os.freemem() / 1024 / 1024 / 1024).toFixed(2) + ' GB',
usedMemory: ((os.totalmem() - os.freemem()) / 1024 / 1024 / 1024).toFixed(2) + ' GB',
// CPU Information
cpuCount: os.cpus().length,
cpuModel: os.cpus()[0].model,
cpuSpeed: os.cpus()[0].speed + ' MHz',
// User Information
username: os.userInfo().username,
homeDirectory: os.homedir(),
tempDirectory: os.tmpdir(),
// System Uptime
uptime: formatUptime(os.uptime()),
// Network Interfaces
networkInterfaces: Object.keys(os.networkInterfaces()).length
};
return info;
}
function formatUptime(seconds) {
const days = Math.floor(seconds / 86400);
const hours = Math.floor((seconds % 86400) / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
return `${days}d ${hours}h ${minutes}m`;
}
// Usage
const systemInfo = getSystemInfo();
console.log('=== SYSTEM INFORMATION REPORT ===');
console.log(JSON.stringify(systemInfo, null, 2));
// Monitor memory usage
setInterval(() => {
const freeMemGB = (os.freemem() / 1024 / 1024 / 1024).toFixed(2);
const usedPercent = ((1 - os.freemem() / os.totalmem()) * 100).toFixed(2);
console.log(`Memory: ${freeMemGB} GB free (${usedPercent}% used)`);
}, 5000); // Check every 5 seconds</pre>
</div>
</div>
<div class="section">
<h2><span class="icon">đ</span> Key Takeaways</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 20px;">
<div class="fun-fact" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
<strong>â
Built-in Module</strong>
<p style="margin-top: 10px;">No installation needed - it's part of Node.js core!</p>
</div>
<div class="fun-fact" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white;">
<strong>â
Cross-Platform</strong>
<p style="margin-top: 10px;">Works on Windows, macOS, Linux, and more!</p>
</div>
<div class="fun-fact" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white;">
<strong>â
Real-Time Data</strong>
<p style="margin-top: 10px;">Get live system information whenever you need it!</p>
</div>
<div class="fun-fact" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); color: white;">
<strong>â
Lightweight</strong>
<p style="margin-top: 10px;">Minimal overhead - perfect for production apps!</p>
</div>
</div>
</div>
<footer>
<h2 style="color: #667eea; margin-bottom: 20px;">đ Congratulations!</h2>
<p style="font-size: 1.3em; line-height: 1.8; color: #666;">
You've completed your journey through the Node.js OS module! đ<br>
You now know how to access system information, monitor resources, and build cross-platform applications.<br>
Keep practicing and building amazing things! đĒâ¨
</p>
<div style="margin-top: 30px; font-size: 3em;">
đ Happy Coding! đ
</div>
</footer>
</div>
<script>
// Scroll indicator
window.addEventListener('scroll', () => {
const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrolled = (winScroll / height) * 100;
document.getElementById('scrollIndicator').style.width = scrolled + '%';
});
// Create floating shapes
function createFloatingShapes() {
const container = document.getElementById('floatingShapes');
const shapes = ['đĨī¸', 'đģ', 'âĄ', 'đ', 'đž', 'đ§', 'âī¸', 'đ'];
for (let i = 0; i < 15; i++) {
const shape = document.createElement('div');
shape.className = 'shape';
shape.textContent = shapes[Math.floor(Math.random() * shapes.length)];
shape.style.left = Math.random() * 100 + '%';
shape.style.top = Math.random() * 100 + '%';
shape.style.fontSize = (Math.random() * 3 + 2) + 'em';
shape.style.animationDelay = Math.random() * 5 + 's';
shape.style.animationDuration = (Math.random() * 10 + 15) + 's';
container.appendChild(shape);
}
}
// Create emoji rain
function createEmojiRain() {
const emojis = ['â', 'â¨', 'đ', 'đĢ', 'đ¯', 'đŽ', 'đ¨', 'đĒ'];
const emoji = document.createElement('div');
emoji.className = 'emoji-rain';
emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
emoji.style.left = Math.random() * 100 + '%';
emoji.style.animationDuration = (Math.random() * 3 + 3) + 's';
document.body.appendChild(emoji);
setTimeout(() => emoji.remove(), 5000);
}
setInterval(createEmojiRain, 2000);
// Tab switching
function switchTab(index) {
const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.tab-content');
tabs.forEach((tab, i) => {
if (i === index) {
tab.classList.add('active');
} else {
tab.classList.remove('active');
}
});
contents.forEach((content, i) => {
if (i === index) {
content.classList.add('active');
} else {
content.classList.remove('active');
}
});
}
// Show demo
function showDemo(method) {
createCelebration('đ¯');
}
// Simulate OS methods
function simulateMethod(method) {
const simulations = {
platform: ['darwin', 'win32', 'linux', 'freebsd'],
arch: ['x64', 'arm64', 'arm', 'ia32'],
cpus: [2, 4, 6, 8, 12, 16],
memory: ['8 GB', '16 GB', '32 GB', '64 GB']
};
const value = simulations[method][Math.floor(Math.random() * simulations[method].length)];
document.getElementById(`sim-${method}`).textContent = value;
createCelebration('â¨');
}
// Generate random system info
function generateRandomInfo() {
const platforms = ['darwin (macOS)', 'win32 (Windows)', 'linux (Linux)', 'freebsd (FreeBSD)'];
const architectures = ['x64', 'arm64', 'arm', 'ia32'];
const cpuCounts = [2, 4, 6, 8, 12, 16];
const memories = [4, 8, 16, 32, 64];
const platform = platforms[Math.floor(Math.random() * platforms.length)];
const arch = architectures[Math.floor(Math.random() * architectures.length)];
const cpus = cpuCounts[Math.floor(Math.random() * cpuCounts.length)];
const totalMem = memories[Math.floor(Math.random() * memories.length)];
const freeMem = (totalMem * (Math.random() * 0.5 + 0.2)).toFixed(2);
const uptime = Math.floor(Math.random() * 1000000);
const hours = Math.floor(uptime / 3600);
const minutes = Math.floor((uptime % 3600) / 60);
const result = `
<h3 style="color: #667eea; margin-bottom: 15px;">đĨī¸ Simulated System Information</h3>
<div style="text-align: left; line-height: 2;">
<strong>Platform:</strong> ${platform}<br>
<strong>Architecture:</strong> ${arch}<br>
<strong>CPU Cores:</strong> ${cpus}<br>
<strong>Total Memory:</strong> ${totalMem} GB<br>
<strong>Free Memory:</strong> ${freeMem} GB<br>
<strong>Used Memory:</strong> ${(totalMem - freeMem).toFixed(2)} GB<br>
<strong>System Uptime:</strong> ${hours}h ${minutes}m<br>
<strong>Hostname:</strong> computer-${Math.floor(Math.random() * 9999)}
</div>
`;
const resultBox = document.getElementById('randomResult');
resultBox.innerHTML = result;
resultBox.style.display = 'block';
createCelebration('đ');
}
// Memory game
let memoryCards = [];
let flippedCards = [];
let matchedPairs = 0;
function initMemoryGame() {
const methods = [
{ name: 'platform', emoji: 'đą' },
{ name: 'cpus', emoji: 'âĄ' },
{ name: 'memory', emoji: 'đž' },
{ name: 'hostname', emoji: 'đ ' },
{ name: 'uptime', emoji: 'â°' },
{ name: 'userInfo', emoji: 'đ¤' },
{ name: 'network', emoji: 'đ' },
{ name: 'arch', emoji: 'đī¸' }
];
memoryCards = [...methods, ...methods].sort(() => Math.random() - 0.5);
flippedCards = [];
matchedPairs = 0;
const gameContainer = document.getElementById('memoryGame');
gameContainer.innerHTML = '';
memoryCards.forEach((card, index) => {
const cardElement = document.createElement('div');
cardElement.className = 'memory-card';
cardElement.textContent = '?';
cardElement.dataset.index = index;
cardElement.dataset.name = card.name;
cardElement.dataset.emoji = card.emoji;
cardElement.addEventListener('click', flipCard);
gameContainer.appendChild(cardElement);
});
updateProgress();
}
function flipCard() {
if (flippedCards.length >= 2 || this.classList.contains('flipped')) return;
this.classList.add('flipped');
this.textContent = this.dataset.emoji;
flippedCards.push(this);
if (flippedCards.length === 2) {
setTimeout(checkMatch, 500);
}
}
function checkMatch() {
const [card1, card2] = flippedCards;
if (card1.dataset.name === card2.dataset.name) {
matchedPairs++;
createCelebration('đ');
updateProgress();
if (matchedPairs === 8) {
setTimeout(() => {
alert('đ Congratulations! You matched all pairs! đ');
}, 500);
}
} else {
card1.classList.remove('flipped');
card2.classList.remove('flipped');
card1.textContent = '?';
card2.textContent = '?';
}
flippedCards = [];
}
function updateProgress() {
const progress = (matchedPairs / 8) * 100;
const progressBar = document.getElementById('gameProgress');
progressBar.style.width = progress + '%';
progressBar.textContent = Math.round(progress) + '%';
}
// Quiz
function checkAnswer(element, isCorrect) {
if (element.classList.contains('correct') || element.classList.contains('wrong')) return;
if (isCorrect) {
element.classList.add('correct');
element.textContent += ' â
Correct!';
createCelebration('đ');
} else {
element.classList.add('wrong');
element.textContent += ' â Wrong!';
}
}
// Celebration effect
function createCelebration(emoji) {
const celebration = document.createElement('div');
celebration.className = 'celebration';
celebration.textContent = emoji;
celebration.style.left = Math.random() * 80 + 10 + '%';
document.body.appendChild(celebration);
setTimeout(() => celebration.remove(), 1000);
}
// Initialize
window.addEventListener('load', () => {
createFloatingShapes();
initMemoryGame();
});
// Add hover effects to method cards
document.querySelectorAll('.method-card').forEach(card => {
card.addEventListener('mouseenter', () => {
card.style.transform = 'scale(1.05) rotate(1deg)';
});
card.addEventListener('mouseleave', () => {
card.style.transform = 'scale(1) rotate(0deg)';
});
});
</script>
</body>
</html>
Live Preview