# Prompt: Build a Fully Functional Digital Logic Circuit Sim...

Prompt

# Prompt: Build a Fully Functional Digital Logic Circuit Simulator in HTML I want you to build a professional, interactive web-based application for designing, simulating, and learning digital logic circuits. The entire application must be implemented in a single, standalone HTML file that can be opened directly in a web browser such as Firefox or Chrome. The application must work offline without requiring a server, installation, internet connection, external libraries, CDNs, or additional files. ## 1. Technology Requirements - Use HTML5, CSS3, and vanilla JavaScript. - Place all HTML, CSS, and JavaScript code inside one HTML file. - Do not depend on external libraries, frameworks, fonts, or online resources. - Write clean, modular, maintainable, and well-documented code. - Ensure compatibility with modern desktop browsers, especially Firefox on Windows. - Create a responsive interface that adapts to different screen sizes. - Optimize the application for smooth interaction and efficient simulation. ## 2. Supported Logic Gates Implement all the following gates with their actual Boolean logic and standard digital logic symbols. ### Basic gates - AND - OR - NOT ### Additional logic gates - NAND - NOR - XOR - XNOR - Buffer For every gate, provide: - Standard logic symbol. - English and Persian names. - Configurable input count where applicable. - Input and output terminals. - Boolean expression. - Truth table. - A short explanation of its behavior. The simulation must use correct Boolean logic rather than merely displaying decorative symbols. ## 3. Interactive Circuit Editor Create a graphical circuit-design workspace where users can build circuits using drag-and-drop interactions. Required features: - A component toolbar containing all supported gates and digital components. - Drag-and-drop placement of components onto the canvas. - Ability to select, move, duplicate, rotate, and delete components. - Interactive input and output terminals. - Ability to connect gate outputs to gate inputs using wires. - Support for multiple connections from one output, where electrically and logically appropriate. - Automatic recalculation of outputs whenever an input or connection changes. - Ability to create multi-stage circuits by connecting several gates. - Clear visual identification of input and output pins. - Zooming, panning, and canvas navigation. - Grid snapping for accurate component placement. - Undo and redo functionality. - Clear-circuit and reset controls. - Automatic wire routing where practical. Every connection must represent a real logical dependency between circuit components. Wires must connect to specific terminals, and circuit outputs must be calculated from the actual connections. Use HTML Canvas or SVG for the circuit workspace, choosing whichever approach provides the most reliable interaction and rendering. ## 4. Real-Time Signal Visualization Implement a visual system for displaying the state of digital signals. Requirements: - Display logic 0 and logic 1 using distinguishable wire colors or styles. - Show the current value of each input and output. - Update signal states throughout the connected circuit immediately after an input changes. - Highlight active signal paths where useful. - Display component output values directly beside their output terminals. - Detect incomplete connections and invalid configurations. - Support an unknown logic state, represented by X, where appropriate. - Prevent invalid circuits from freezing the browser. - Display clear diagnostic messages when a circuit cannot be evaluated correctly. Signal propagation must be based on actual circuit dependencies, not visual animation alone. ## 5. Additional Digital Components Implement the following components in addition to the basic logic gates: ### Input and output components - Logic Input - Logic Output - Toggle Switch - Logic 0 Constant - Logic 1 Constant - LED Indicator - Clock Generator ### Combinational components - Multiplexer (MUX) - Demultiplexer (DEMUX) - Decoder - Encoder - Half Adder - Full Adder - Comparator Where appropriate, allow users to configure the number of inputs, output bits, and other component parameters. All components must integrate with the same circuit editor and simulation engine. ## 6. Sequential Logic and Memory Components Support the design and simulation of sequential digital circuits, including: - SR Latch - D Flip-Flop - JK Flip-Flop - T Flip-Flop - Basic Register - Shift Register - Binary Counter Implement clock-sensitive behavior correctly. The simulator must support: - Rising-edge triggering. - Falling-edge triggering. - Manual clock stepping. - Automatic clock generation. - Adjustable clock frequency or simulation speed. - State retention between clock transitions. - Asynchronous set and reset inputs where applicable. - Appropriate handling of invalid or indeterminate states. Sequential components must maintain internal state correctly rather than behaving like ordinary combinational gates. ## 7. Interactive Learning Section Create a dedicated educational panel for learning digital logic. For each gate or component, display: - English name and Persian equivalent. - Standard logic symbol. - Number of inputs and outputs. - Boolean expression. - Complete truth table. - Explanation of its operation in simple language. - Practical applications. - Example circuits. - Short interactive exercises. Allow users to change the number of inputs for supported gates. For example, an AND gate should support two, three, or four inputs. Include a truth-table generator that can generate the complete truth table for a user-designed combinational circuit. The application should automatically evaluate every possible input combination and display the resulting outputs. ## 8. Boolean Algebra and Circuit Analysis Implement a circuit-analysis panel that displays the Boolean expression represented by the current circuit. Include: - Input variable names. - Boolean expressions for individual gates. - The resulting Boolean expression for each circuit output. - Automatically generated truth tables. - Simplified Boolean expressions when possible. - Relevant Boolean algebra identities. - De Morgan's laws and equivalent logic implementations where applicable. Update the analysis whenever the circuit structure changes. Do not display incorrect or fabricated expressions. If a circuit cannot be analyzed symbolically, clearly explain the limitation. If practical, include a feature that suggests equivalent implementations using different combinations of gates. ## 9. Circuit Examples and Presets Provide several ready-to-use example circuits that users can load into the editor. Include at least: 1. Individual examples of every supported basic logic gate. 2. An AND function implemented using NAND gates. 3. An OR function implemented using NAND gates. 4. An XOR gate constructed from basic logic gates. 5. A two-bit equality detector. 6. A half adder. 7. A full adder. 8. An SR latch. 9. A D flip-flop. 10. A four-bit binary counter. Each example must be a real, editable circuit with working connections. Users must be able to modify the circuit, change its inputs, and observe its behavior. ## 10. File Management and Export Implement the following features: - Create a new circuit. - Save the current circuit to browser storage. - Export the circuit as a JSON file. - Import a previously saved JSON circuit. - Export the circuit diagram as an SVG or PNG image, where practical. - Restore saved circuits. - Reset the simulation state. - Load predefined example circuits. - Display circuit information and component counts. The JSON format must preserve component types, positions, parameters, connections, and relevant simulation state. Validate imported files before loading them and handle invalid or malformed data safely. ## 11. User Interface and Visual Design Create a polished, modern, professional interface suitable for an educational digital electronics application. Use the following general layout: ### Top toolbar - Application title. - New, save, import, and export controls. - Undo and redo. - Run, pause, and reset controls. - Theme selector. ### Left sidebar - Basic logic gates. - Additional logic gates. - Input and output components. - Combinational components. - Sequential components. ### Central workspace - Interactive circuit canvas. - Grid and snap-to-grid support. - Connected wires and terminal indicators. - Zoom and navigation controls. ### Right sidebar - Selected component properties. - Input and output values. - Component configuration. - Boolean expressions and relevant details. ### Bottom panel - Truth table. - Boolean analysis. - Simulation diagnostics. - Error messages and circuit status. Design requirements: - Use a clean, professional color palette. - Provide a subtle grid background in the circuit editor. - Make gate symbols and connection terminals easy to recognize. - Support light and dark themes. - Use smooth but restrained animations. - Keep the interface readable and responsive. - Use system fonts to ensure offline compatibility. - Make the interface primarily Persian, with standard English component names displayed alongside Persian labels. - Implement right-to-left layout correctly for Persian text while keeping circuit symbols, Boolean expressions, and technical labels readable. ## 12. Simulation Engine and Technical Correctness The simulation engine is the most important part of this project. Implement a genuine logic simulation engine with the following properties: - Correct Boolean evaluation for every supported gate. - Automatic propagation of changes through connected circuits. - Correct handling of multiple gates and multi-stage logic. - Proper dependency evaluation for combinational circuits. - Correct state updates for sequential circuits. - Separation between circuit rendering and simulation logic. - Detection of disconnected terminals and invalid connections. - Detection or controlled handling of combinational feedback loops. - Protection against infinite evaluation loops. - Consistent behavior when inputs change rapidly. - Proper handling of unknown logic states when required. - Clear error reporting without crashing the application. Use an appropriate evaluation strategy, such as dependency-based propagation with a controlled event queue or iterative evaluation with a maximum iteration limit. Do not silently produce misleading outputs for circuits with undefined behavior. The simulator should distinguish between combinational logic and sequential logic and apply the appropriate evaluation rules to each. ## 13. Performance and Reliability - Keep the application responsive while manipulating circuits containing many components. - Avoid unnecessary full-canvas redraws. - Use efficient event handling. - Avoid memory leaks and uncontrolled event-listener creation. - Ensure that dragging components does not accidentally create wires. - Ensure that wires remain connected when components are moved. - Prevent duplicate or inconsistent connections. - Validate circuit changes before applying them where necessary. - Ensure that every visible control performs its advertised function. - Do not include placeholder buttons or nonfunctional features. ## 14. Testing and Validation Before delivering the final application, test the implementation as thoroughly as possible. Verify that: 1. Every basic gate produces the correct truth table. 2. Changing an input updates all dependent outputs. 3. Multiple connected gates produce correct results. 4. Half adders and full adders generate correct sum and carry outputs. 5. Sequential components retain and update state correctly. 6. Clock transitions trigger the appropriate behavior. 7. Saving and loading circuits preserve their structure. 8. JSON import and export work correctly. 9. Undo and redo restore previous circuit states. 10. Moving a component preserves its connections. 11. Invalid connections are detected and reported. 12. The application works offline in Firefox and Chrome. Do not claim that a feature has been tested unless it has actually been tested. ## 15. Final Deliverable Deliver the complete application as a single, downloadable HTML file. The file must be self-contained and immediately usable by opening it in a web browser. Important requirements: - Provide the complete source code. - Do not omit sections of code. - Do not use comments such as "implement this later" or "add the remaining components here." - Do not replace essential functionality with static mockups. - Do not provide pseudocode instead of working JavaScript. - Do not require the user to install dependencies. - Do not rely on an internet connection. - Ensure that all implemented controls and simulation features work. - If the full scope is too large to implement reliably in one pass, prioritize a complete, functional core simulator first and extend it in clearly defined stages. - Each delivered stage must remain a valid, standalone HTML file. ### Development priority Implement the project in this order: **Priority 1:** Circuit canvas, component placement, wiring, input switches, AND, OR, NOT, NAND, NOR, XOR, XNOR, and correct real-time signal propagation. **Priority 2:** Truth tables, Boolean expressions, circuit examples, component selection, editing tools, and file import/export. **Priority 3:** Multiplexers, decoders, encoders, adders, and other combinational components. **Priority 4:** Clock generation, latches, flip-flops, registers, and counters. **Priority 5:** Advanced analysis, additional educational features, interface refinements, and performance optimization. The final goal is to create a genuinely useful digital logic simulator and educational tool, not merely a visual demonstration of logic gates.