Start
12:00 PM
Folder My Computer
Notepad Notepad
Internet Internet Explorer
class WindowManager { constructor() { this.desktop = document.getElementById('desktop'); this.icons = document.querySelectorAll('.icon'); this.setupEventListeners(); } setupEventListeners() { this.icons.forEach(icon => { icon.addEventListener('dblclick', (e) => { const type = icon.dataset.type; if (type === 'folder') this.openFolder(); if (type === 'program') this.openNotepad(); if (type === 'internet') this.openBrowser(); }); }); } createWindow(title, content) { const window = document.createElement('div'); window.className = 'window'; window.style.left = `${Math.random() * 300}px`; window.style.top = `${Math.random() * 300}px`; window.style.width = '600px'; window.innerHTML = `
${title}
${content}
`; const titleBar = window.querySelector('.window-title'); this.makeDraggable(window, titleBar); window.querySelector('.close-btn').addEventListener('click', () => { window.remove(); }); this.desktop.appendChild(window); return window; } makeDraggable(element, handle) { let isDragging = false; let currentX, currentY, initialX, initialY; handle.addEventListener('mousedown', dragStart); document.addEventListener('mousemove', drag); document.addEventListener('mouseup', dragEnd); function dragStart(e) { initialX = e.clientX - element.offsetLeft; initialY = e.clientY - element.offsetTop; if (e.target === handle) { isDragging = true; } } function drag(e) { if (isDragging) { e.preventDefault(); currentX = e.clientX - initialX; currentY = e.clientY - initialY; element.style.left = `${currentX}px`; element.style.top = `${currentY}px`; } } function dragEnd() { isDragging = false; } } openFolder() { this.createWindow('My Computer', `

C: Drive Contents

`); } openNotepad() { this.createWindow('Untitled - Notepad', ` `); } openBrowser() { const browserWindow = this.createWindow('Internet Explorer', `

Welcome to the Internet

You are browsing the World Wide Web circa 1990s!

Popular Sites

  • 🌐 CERN Website
  • 🌐 Netscape.com
  • 🌐 Early Yahoo!
`); } } class SystemClock { constructor() { this.timeDisplay = document.querySelector('.time'); this.updateTime(); setInterval(() => this.updateTime(), 1000); } updateTime() { const now = new Date(); const hours = now.getHours() % 12 || 12; const minutes = now.getMinutes().toString().padStart(2, '0'); const ampm = now.getHours() >= 12 ? 'PM' : 'AM'; this.timeDisplay.textContent = `${hours}:${minutes} ${ampm}`; } } document.addEventListener('DOMContentLoaded', () => { new WindowManager(); new SystemClock(); }); background-color: #000080; color: white; padding: 2px 4px; display: flex; justify-content: space-between; align-items: center; } .window-content { padding: 10px; } .browser-toolbar { background-color: #E1E1E1; padding: 5px; display: flex; align-items: center; gap: 5px; } .browser-toolbar button { background-color: #F0F0F0; border: 1px solid #808080; padding: 2px 5px; } .browser-toolbar input { flex-grow: 1; padding: 2px; } .browser-content { border: 1px solid #808080; }