Skip to content
This repository was archived by the owner on Apr 25, 2026. It is now read-only.

Commit d206a16

Browse files
SENODROOMSENODROOM
committed
fixed
1 parent fe89038 commit d206a16

16 files changed

Lines changed: 2846 additions & 641 deletions

‎src/pages/SequentialCircuits/SeqAnalysis.jsx‎

Lines changed: 350 additions & 69 deletions
Large diffs are not rendered by default.

‎src/pages/SequentialCircuits/SeqDesignProcedures.jsx‎

Lines changed: 336 additions & 69 deletions
Large diffs are not rendered by default.

‎src/pages/SequentialCircuits/SeqFlipFlopTypes.jsx‎

Lines changed: 255 additions & 58 deletions
Large diffs are not rendered by default.

‎src/pages/SequentialCircuits/SeqFlipFlops.jsx‎

Lines changed: 359 additions & 69 deletions
Large diffs are not rendered by default.

‎src/pages/SequentialCircuits/SeqIntro.jsx‎

Lines changed: 22 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -1,158 +1,55 @@
11
import React from "react";
22
import SeqLayout from "./SeqLayout";
3+
import SeqBox from "./components/SeqBox";
4+
import SeqTable from "./components/SeqTable";
5+
import SeqGrid from "./components/SeqGrid";
6+
import SeqDiagram from "./components/SeqDiagram";
7+
import SeqGridData from "./data/SeqGridData";
8+
import SeqBoxInfo from "./components/SeqBoxInfo";
9+
import SeqBoxSuccess from "./components/SeqBoxSuccess";
310

411
const SeqIntro = () => (
512
<SeqLayout
613
title="Introduction to Sequential Circuits"
714
subtitle="Understanding circuits with memory — where outputs depend on both current inputs and past history."
815
>
916
<div className="seq-content-body">
10-
11-
<div className="seq-box">
12-
<span className="seq-box-title">Core Definition</span>
13-
<p>
14-
A <strong>sequential circuit</strong> is a digital circuit whose output depends not only on
15-
the current inputs but also on the <strong>history of past inputs</strong>. It contains
16-
memory elements that store state information between clock cycles.
17-
</p>
18-
</div>
19-
17+
<SeqBox />
2018
<h2>Combinational vs Sequential</h2>
2119
<p>
22-
In a <strong>combinational circuit</strong>, output is determined purely by the current inputs —
23-
there is no memory. In a <strong>sequential circuit</strong>, feedback paths and storage
24-
elements allow the circuit to "remember" previous states.
20+
In a <strong>combinational circuit</strong>, output is determined purely
21+
by the current inputs — there is no memory. In a{" "}
22+
<strong>sequential circuit</strong>, feedback paths and storage elements
23+
allow the circuit to "remember" previous states.
2524
</p>
2625

27-
<div className="seq-table-wrap">
28-
<table className="seq-table">
29-
<thead>
30-
<tr>
31-
<th>Property</th>
32-
<th>Combinational</th>
33-
<th>Sequential</th>
34-
</tr>
35-
</thead>
36-
<tbody>
37-
<tr><td>Output depends on</td><td>Current inputs only</td><td>Inputs + stored state</td></tr>
38-
<tr><td>Memory elements</td><td>None</td><td>Flip-flops / Latches</td></tr>
39-
<tr><td>Feedback paths</td><td>No</td><td>Yes</td></tr>
40-
<tr><td>Clock required</td><td>No (usually)</td><td>Yes (synchronous)</td></tr>
41-
<tr><td>Examples</td><td>Adder, Mux, Decoder</td><td>Counter, Register, FSM</td></tr>
42-
</tbody>
43-
</table>
44-
</div>
26+
<SeqTable />
4527

4628
<h2>General Model</h2>
4729
<p>Every sequential circuit has three fundamental parts:</p>
4830

49-
<div className="seq-grid-2">
50-
<div className="seq-feature-card">
51-
<span className="seq-feature-icon">⚙️</span>
52-
<p className="seq-feature-title">Combinational Logic</p>
53-
<p className="seq-feature-desc">Computes the next state and output values from current state and inputs.</p>
54-
</div>
55-
<div className="seq-feature-card">
56-
<span className="seq-feature-icon">💾</span>
57-
<p className="seq-feature-title">Memory Elements</p>
58-
<p className="seq-feature-desc">Flip-flops that hold the current state between clock cycles.</p>
59-
</div>
60-
<div className="seq-feature-card">
61-
<span className="seq-feature-icon">🔄</span>
62-
<p className="seq-feature-title">Feedback Path</p>
63-
<p className="seq-feature-desc">Current state feeds back into the combinational block to influence the next state.</p>
64-
</div>
65-
</div>
31+
<SeqGrid data={SeqGridData.GeneralModel} />
6632

67-
<div className="seq-diagram">
68-
<svg viewBox="0 0 620 270" xmlns="http://www.w3.org/2000/svg" style={{fontFamily:"'JetBrains Mono',monospace"}}>
69-
<defs>
70-
<marker id="a0" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">
71-
<path d="M0,0 L0,6 L8,3z" fill="#6366f1"/>
72-
</marker>
73-
<filter id="glow0">
74-
<feGaussianBlur stdDeviation="3" result="blur"/>
75-
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
76-
</filter>
77-
</defs>
78-
{/* Input */}
79-
<line x1="20" y1="135" x2="90" y2="135" stroke="#6366f1" strokeWidth="2" markerEnd="url(#a0)"/>
80-
<text x="12" y="122" fontSize="11" fill="#94a3b8">Inputs</text>
81-
{/* Combinational box */}
82-
<rect x="90" y="80" width="170" height="110" rx="10" fill="rgba(30,27,75,0.9)" stroke="#6366f1" strokeWidth="2"/>
83-
<rect x="90" y="80" width="170" height="4" rx="2" fill="#6366f1" opacity="0.6"/>
84-
<text x="175" y="132" fontSize="12" fill="#a5b4fc" textAnchor="middle" fontWeight="700">Combinational</text>
85-
<text x="175" y="150" fontSize="11" fill="#64748b" textAnchor="middle">Logic Block</text>
86-
{/* Output */}
87-
<line x1="260" y1="110" x2="400" y2="110" stroke="#10b981" strokeWidth="2" markerEnd="url(#a0)" filter="url(#glow0)"/>
88-
<text x="408" y="114" fontSize="11" fill="#10b981" fontWeight="700">Outputs</text>
89-
{/* Next state */}
90-
<line x1="260" y1="160" x2="320" y2="160" stroke="#6366f1" strokeWidth="2" markerEnd="url(#a0)"/>
91-
<text x="265" y="152" fontSize="9" fill="#818cf8">Next State</text>
92-
{/* Memory box */}
93-
<rect x="320" y="110" width="150" height="100" rx="10" fill="rgba(30,27,75,0.9)" stroke="#f59e0b" strokeWidth="2"/>
94-
<rect x="320" y="110" width="150" height="4" rx="2" fill="#f59e0b" opacity="0.6"/>
95-
<text x="395" y="158" fontSize="12" fill="#fbbf24" textAnchor="middle" fontWeight="700">Memory</text>
96-
<text x="395" y="175" fontSize="11" fill="#64748b" textAnchor="middle">(Flip-Flops)</text>
97-
{/* Feedback */}
98-
<line x1="395" y1="210" x2="395" y2="250" stroke="#818cf8" strokeWidth="1.5" strokeDasharray="6"/>
99-
<line x1="395" y1="250" x2="60" y2="250" stroke="#818cf8" strokeWidth="1.5" strokeDasharray="6"/>
100-
<line x1="60" y1="250" x2="60" y2="155" stroke="#818cf8" strokeWidth="1.5" strokeDasharray="6"/>
101-
<line x1="60" y1="155" x2="90" y2="155" stroke="#818cf8" strokeWidth="1.5" markerEnd="url(#a0)"/>
102-
<text x="200" y="268" fontSize="9" fill="#818cf8" textAnchor="middle" letterSpacing="0.1em">CURRENT STATE FEEDBACK</text>
103-
</svg>
104-
<p className="seq-diagram-caption">Figure 1 — General block diagram of a synchronous sequential circuit</p>
105-
</div>
33+
<SeqDiagram />
10634

10735
<h2>Types of Sequential Circuits</h2>
10836

109-
<div className="seq-grid-2">
110-
<div className="seq-feature-card">
111-
<span className="seq-feature-icon">⏱️</span>
112-
<p className="seq-feature-title">Synchronous</p>
113-
<p className="seq-feature-desc">State changes only at clock edges. Predictable, easy to design and analyze. Used in virtually all modern digital systems.</p>
114-
</div>
115-
<div className="seq-feature-card">
116-
<span className="seq-feature-icon">⚡</span>
117-
<p className="seq-feature-title">Asynchronous</p>
118-
<p className="seq-feature-desc">State changes respond immediately to inputs — no clock. Faster but prone to hazards and difficult to design correctly.</p>
119-
</div>
120-
</div>
37+
<SeqGrid data={SeqGridData.TypesofSequentialCircuits} />
12138

12239
<h2>The Clock Signal</h2>
12340
<p>
124-
In synchronous circuits, a periodic square-wave <strong>clock</strong> coordinates all state
125-
changes. Flip-flops respond on the <strong>rising edge</strong> (positive-edge triggered) or
41+
In synchronous circuits, a periodic square-wave <strong>clock</strong>{" "}
42+
coordinates all state changes. Flip-flops respond on the{" "}
43+
<strong>rising edge</strong> (positive-edge triggered) or
12644
<strong>falling edge</strong> (negative-edge triggered).
12745
</p>
12846

129-
<div className="seq-box info">
130-
<span className="seq-box-title">Key Terminology</span>
131-
<p>
132-
<strong>State</strong> — The binary values stored in flip-flops at a given instant.<br/>
133-
<strong>Present State</strong> — The current stored value in the state register.<br/>
134-
<strong>Next State</strong> — The value the state will take after the next clock edge.<br/>
135-
<strong>State Register</strong> — All flip-flops holding the current circuit state.
136-
</p>
137-
</div>
47+
<SeqBoxInfo />
13848

13949
<h2>Real-World Applications</h2>
140-
<div className="seq-grid-2">
141-
<div className="seq-feature-card"><span className="seq-feature-icon">🧮</span><p className="seq-feature-title">Registers & Shift Registers</p><p className="seq-feature-desc">Store and shift data in processors and communication systems.</p></div>
142-
<div className="seq-feature-card"><span className="seq-feature-icon">🔢</span><p className="seq-feature-title">Counters</p><p className="seq-feature-desc">Ripple, synchronous, and modulo-N counting circuits.</p></div>
143-
<div className="seq-feature-card"><span className="seq-feature-icon">🧠</span><p className="seq-feature-title">FSMs — Moore & Mealy</p><p className="seq-feature-desc">Control units in CPUs, communication protocols, traffic lights.</p></div>
144-
<div className="seq-feature-card"><span className="seq-feature-icon">💬</span><p className="seq-feature-title">Serial Communication</p><p className="seq-feature-desc">UART, SPI, I²C interfaces that send data bit-by-bit over time.</p></div>
145-
</div>
146-
147-
<div className="seq-box success">
148-
<span className="seq-box-title">What's Coming Next</span>
149-
<p>
150-
The next sections walk you through <strong>Latches</strong> → <strong>Flip-Flops</strong>
151-
→ <strong>Types</strong> → <strong>Analysis</strong> → <strong>Design Procedures</strong>
152-
→ <strong>State Diagrams</strong> → <strong>State Reduction</strong>. Each builds on the last.
153-
</p>
154-
</div>
50+
<SeqGrid data={SeqGridData.RealWorldApplications} />
15551

52+
<SeqBoxSuccess />
15653
</div>
15754
</SeqLayout>
15855
);

0 commit comments

Comments
 (0)