atharvgupta07/browser-tab-simulator

Browser Tab Simulator is a learning project built with plain HTML, CSS, and JavaScript that recreates the look and feel of a web browser's tab bar. There is no framework or library involved. The author built it to practice state-driven UI design, DOM manipulation, and event handling in vanilla JavaScript. You can open new tabs, click between them, and close them individually. Each tab has its own content area where a mock search function looks up results from a small built-in data set. Closing a tab sends it to a Recently Closed stack, and you can undo a close to bring it back. Keyboard shortcuts work for common operations: Ctrl+T opens a new tab, Ctrl+W closes the active one, and Ctrl+Tab moves between tabs. The application uses a simple state model: an array of tab objects holds the current list of open tabs, and a separate array tracks the recently closed ones. Every time the user does something, the code updates the array and then calls a render function that rebuilds the relevant parts of the page from scratch. This is the same pattern that frameworks like React use, just implemented directly without a library. The CSS uses Flexbox to keep all tabs on a single horizontal row and handles overflow so long tab titles truncate with an ellipsis. The README documents several bugs the author found and fixed during development, such as the close logic activating the wrong neighbor tab and a variable assignment that broke the recently-closed list display. The project is a front-end exercise rather than a deployable product. It shows how to manage application state in plain JavaScript, handle keyboard shortcuts, and keep the DOM in sync with a data model.