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

Commit f3cc5f4

Browse files
committed
more great
1 parent bf91202 commit f3cc5f4

12 files changed

Lines changed: 2112 additions & 1 deletion

src/App.css

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -637,3 +637,36 @@ summary:hover {
637637
justify-content: center;
638638
}
639639
}
640+
/* Sequential Circuits card gets a distinct purple-indigo accent
641+
to visually separate it from the blue combinational-circuits card */
642+
.sequential-card {
643+
background: radial-gradient(
644+
circle at top left,
645+
rgba(167, 139, 250, 0.18),
646+
/* purple-400 at low opacity */ rgba(15, 23, 42, 0.96)
647+
);
648+
border-color: rgba(167, 139, 250, 0.35);
649+
}
650+
651+
.sequential-card::before {
652+
background: radial-gradient(
653+
circle at top right,
654+
rgba(139, 92, 246, 0.28),
655+
transparent 60%
656+
) !important;
657+
}
658+
659+
.sequential-card h3 {
660+
color: #c4b5fd; /* violet-300 */
661+
}
662+
663+
/* Links inside the sequential card use the violet palette */
664+
.sequential-card .home-card-link {
665+
border-color: rgba(139, 92, 246, 0.65);
666+
color: #ddd6fe; /* violet-200 */
667+
}
668+
669+
.sequential-card .home-card-link:hover {
670+
background: rgba(109, 40, 217, 0.2);
671+
box-shadow: 0 10px 25px rgba(109, 40, 217, 0.3);
672+
}

src/App.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,16 @@ import SignedUnsignedArithmetic from "./pages/ArithmeticFunctionsAndHDLs/SignedU
5050
import EncoderPage from "./pages/EncoderPage";
5151
import DecoderPage from "./pages/DecoderPage";
5252

53+
// SEQUENTIAL CIRCUITS:
54+
import SeqIntro from "./pages/SequentialCircuits/SeqIntro";
55+
import SeqLatches from "./pages/SequentialCircuits/SeqLatches";
56+
import SeqFlipFlops from "./pages/SequentialCircuits/SeqFlipFlops";
57+
import SeqFlipFlopTypes from "./pages/SequentialCircuits/SeqFlipFlopTypes";
58+
import SeqAnalysis from "./pages/SequentialCircuits/SeqAnalysis";
59+
import SeqDesignProcedures from "./pages/SequentialCircuits/SeqDesignProcedures";
60+
import SeqStateDiagram from "./pages/SequentialCircuits/SeqStateDiagram";
61+
import SeqStateReduction from "./pages/SequentialCircuits/SeqStateReduction";
62+
5363
function App() {
5464
return (
5565
<>
@@ -135,6 +145,28 @@ function App() {
135145
{/* Combinational Circuits */}
136146
<Route path="/encoder" element={<EncoderPage />} />
137147
<Route path="/decoder" element={<DecoderPage />} />
148+
149+
{/* Sequential Circuits */}
150+
<Route path="/sequential/intro" element={<SeqIntro />} />
151+
<Route path="/sequential/latches" element={<SeqLatches />} />
152+
<Route path="/sequential/flip-flops" element={<SeqFlipFlops />} />
153+
<Route
154+
path="/sequential/flip-flop-types"
155+
element={<SeqFlipFlopTypes />}
156+
/>
157+
<Route path="/sequential/analysis" element={<SeqAnalysis />} />
158+
<Route
159+
path="/sequential/design-procedures"
160+
element={<SeqDesignProcedures />}
161+
/>
162+
<Route
163+
path="/sequential/state-diagram"
164+
element={<SeqStateDiagram />}
165+
/>
166+
<Route
167+
path="/sequential/state-reduction"
168+
element={<SeqStateReduction />}
169+
/>
138170
</Routes>
139171
</BrowserRouter>
140172
</>

src/pages/Home.jsx

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,9 @@ const Home = () => {
6161
<Link to="/book/ch2" className="home-nav-link">
6262
Book Ch2
6363
</Link>
64+
<Link to="/sequential/intro" className="home-nav-link">
65+
Sequential
66+
</Link>
6467
</nav>
6568
</div>
6669
</header>
@@ -172,7 +175,7 @@ const Home = () => {
172175
</div>
173176
</article>
174177

175-
{/* Combinational Circuits Section — NEW */}
178+
{/* Combinational Circuits Section */}
176179
<article className="home-card">
177180
<h3>🔀 Combinational Circuits</h3>
178181
<p>
@@ -190,6 +193,45 @@ const Home = () => {
190193
</div>
191194
</article>
192195

196+
{/* Sequential Circuits Section — NEW */}
197+
<article className="home-card sequential-card">
198+
<h3>🔁 Sequential Circuits</h3>
199+
<p>
200+
Dive into memory elements, state machines, and time-dependent
201+
circuits — from basic latches to full design procedures with state
202+
tables and excitation maps.
203+
</p>
204+
<div className="home-card-links">
205+
<Link to="/sequential/intro" className="home-card-link">
206+
Introduction
207+
</Link>
208+
<Link to="/sequential/latches" className="home-card-link">
209+
Latches
210+
</Link>
211+
<Link to="/sequential/flip-flops" className="home-card-link">
212+
Flip-Flops
213+
</Link>
214+
<Link to="/sequential/flip-flop-types" className="home-card-link">
215+
Types of Flip-Flops
216+
</Link>
217+
<Link to="/sequential/analysis" className="home-card-link">
218+
Analysis
219+
</Link>
220+
<Link
221+
to="/sequential/design-procedures"
222+
className="home-card-link"
223+
>
224+
Design Procedures
225+
</Link>
226+
<Link to="/sequential/state-diagram" className="home-card-link">
227+
State Diagrams & Tables
228+
</Link>
229+
<Link to="/sequential/state-reduction" className="home-card-link">
230+
State Reduction & Excitation
231+
</Link>
232+
</div>
233+
</article>
234+
193235
{/* Number Systems Section */}
194236
<article className="home-card">
195237
<h3>🔢 Number Systems</h3>
Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
import React from "react";
2+
import SeqLayout from "./SeqLayout";
3+
4+
const SeqAnalysis = () => (
5+
<SeqLayout
6+
title="Analysis of Sequential Circuits"
7+
subtitle="Given a sequential circuit diagram, determine its state table, state diagram, and timing behavior."
8+
>
9+
<div className="seq-content">
10+
11+
<div className="seq-box">
12+
<p className="seq-box-title">Goal of Analysis</p>
13+
<p>
14+
<strong>Analysis</strong> of a sequential circuit means: given a circuit schematic,
15+
determine what the circuit <em>does</em> — specifically, how its state evolves over
16+
time for all possible input sequences. The result is expressed as a
17+
<strong>state table</strong> or <strong>state diagram</strong>.
18+
</p>
19+
</div>
20+
21+
<h2>Step-by-Step Analysis Procedure</h2>
22+
<p>
23+
Follow these steps to analyze any synchronous sequential circuit:
24+
</p>
25+
<ol>
26+
<li>
27+
<strong>Identify state variables</strong> — Label the output of each flip-flop
28+
(Q₁, Q₂, …). The number of flip-flops determines the number of states: 2<sup>n</sup>
29+
possible states for n flip-flops.
30+
</li>
31+
<li>
32+
<strong>Write flip-flop input equations</strong> — Express the input of each flip-flop
33+
(D, J/K, S/R, or T) as a Boolean function of the current state and external inputs.
34+
</li>
35+
<li>
36+
<strong>Write output equations</strong> — Express each circuit output as a Boolean
37+
function of the current state (and inputs if it's a Mealy machine).
38+
</li>
39+
<li>
40+
<strong>Determine next state</strong> — Using the flip-flop's characteristic equation,
41+
compute Q(t+1) for every combination of present state and input.
42+
</li>
43+
<li>
44+
<strong>Construct the state table</strong> — Tabulate present state, input, next state,
45+
and output for every combination.
46+
</li>
47+
<li>
48+
<strong>Draw the state diagram</strong> — Convert the table into a directed graph.
49+
</li>
50+
</ol>
51+
52+
<h2>Worked Example: 2-Bit Counter with D Flip-Flops</h2>
53+
<p>
54+
Consider a circuit with two D flip-flops (Q₁ = MSB, Q₀ = LSB) and no external inputs.
55+
The flip-flop inputs are:
56+
</p>
57+
<div className="seq-box info">
58+
<p className="seq-box-title">Flip-Flop Input Equations</p>
59+
<p>
60+
D₁ = Q₁ ⊕ Q₀ &nbsp;&nbsp; (XOR)<br/>
61+
D₀ = Q̄₀ &nbsp;&nbsp; (complement of Q₀)
62+
</p>
63+
</div>
64+
65+
<h2>Step 1 — Compute Next States</h2>
66+
<p>
67+
Using D FF characteristic equation Q(t+1) = D:
68+
</p>
69+
<div className="seq-table-wrap">
70+
<table className="seq-table">
71+
<thead>
72+
<tr>
73+
<th>Present State Q₁Q₀</th>
74+
<th>D₁ = Q₁⊕Q₀</th>
75+
<th>D₀ = Q̄₀</th>
76+
<th>Next State Q₁⁺Q₀⁺</th>
77+
</tr>
78+
</thead>
79+
<tbody>
80+
<tr><td>00</td><td>0⊕0 = 0</td><td>1</td><td>01</td></tr>
81+
<tr><td>01</td><td>0⊕1 = 1</td><td>0</td><td>10</td></tr>
82+
<tr><td>10</td><td>1⊕0 = 1</td><td>1</td><td>11</td></tr>
83+
<tr><td>11</td><td>1⊕1 = 0</td><td>0</td><td>00</td></tr>
84+
</tbody>
85+
</table>
86+
</div>
87+
88+
<p>
89+
The sequence is: <strong>00 → 01 → 10 → 11 → 00 → …</strong> — this is a
90+
2-bit binary up-counter!
91+
</p>
92+
93+
<div className="seq-diagram">
94+
<svg viewBox="0 0 460 200" xmlns="http://www.w3.org/2000/svg" style={{fontFamily:"'JetBrains Mono', monospace"}}>
95+
<defs>
96+
<marker id="arrd" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">
97+
<path d="M0,0 L0,6 L8,3 z" fill="#00ff88"/>
98+
</marker>
99+
</defs>
100+
{/* States */}
101+
<circle cx="100" cy="100" r="35" fill="#1e2842" stroke="#00d4ff" strokeWidth="2"/>
102+
<text x="100" y="96" fontSize="13" fill="#00d4ff" textAnchor="middle" fontWeight="700">00</text>
103+
<text x="100" y="112" fontSize="9" fill="#8b9dc3" textAnchor="middle">S₀</text>
104+
105+
<circle cx="250" cy="40" r="35" fill="#1e2842" stroke="#00d4ff" strokeWidth="2"/>
106+
<text x="250" y="36" fontSize="13" fill="#00d4ff" textAnchor="middle" fontWeight="700">01</text>
107+
<text x="250" y="52" fontSize="9" fill="#8b9dc3" textAnchor="middle">S₁</text>
108+
109+
<circle cx="370" cy="100" r="35" fill="#1e2842" stroke="#00d4ff" strokeWidth="2"/>
110+
<text x="370" y="96" fontSize="13" fill="#00d4ff" textAnchor="middle" fontWeight="700">10</text>
111+
<text x="370" y="112" fontSize="9" fill="#8b9dc3" textAnchor="middle">S₂</text>
112+
113+
<circle cx="250" cy="165" r="35" fill="#1e2842" stroke="#00d4ff" strokeWidth="2"/>
114+
<text x="250" y="161" fontSize="13" fill="#00d4ff" textAnchor="middle" fontWeight="700">11</text>
115+
<text x="250" y="177" fontSize="9" fill="#8b9dc3" textAnchor="middle">S₃</text>
116+
117+
{/* Arrows */}
118+
<line x1="132" y1="82" x2="218" y2="52" stroke="#00ff88" strokeWidth="2" markerEnd="url(#arrd)"/>
119+
<line x1="283" y1="52" x2="338" y2="78" stroke="#00ff88" strokeWidth="2" markerEnd="url(#arrd)"/>
120+
<line x1="355" y1="132" x2="283" y2="155" stroke="#00ff88" strokeWidth="2" markerEnd="url(#arrd)"/>
121+
<line x1="218" y1="155" x2="132" y2="118" stroke="#00ff88" strokeWidth="2" markerEnd="url(#arrd)"/>
122+
</svg>
123+
<p className="seq-diagram-caption">Figure 1 — State diagram of a 2-bit binary up-counter</p>
124+
</div>
125+
126+
<h2>Moore vs Mealy Machines</h2>
127+
<p>
128+
Sequential circuits can be classified into two types based on how outputs are generated:
129+
</p>
130+
<div className="seq-table-wrap">
131+
<table className="seq-table">
132+
<thead>
133+
<tr><th>Property</th><th>Moore Machine</th><th>Mealy Machine</th></tr>
134+
</thead>
135+
<tbody>
136+
<tr><td>Output depends on</td><td>Present state only</td><td>Present state AND inputs</td></tr>
137+
<tr><td>Output changes</td><td>Only with clock edge</td><td>Can change asynchronously with inputs</td></tr>
138+
<tr><td>States needed</td><td>More states (typically)</td><td>Fewer states (typically)</td></tr>
139+
<tr><td>Glitch risk</td><td>Lower</td><td>Higher (input-sensitive)</td></tr>
140+
<tr><td>State diagram</td><td>Output labeled on states</td><td>Output labeled on transitions</td></tr>
141+
</tbody>
142+
</table>
143+
</div>
144+
145+
<h2>Timing Diagram Analysis</h2>
146+
<p>
147+
A <strong>timing diagram</strong> shows the clock, input signals, state signals, and outputs
148+
all plotted against time. To trace through a sequential circuit on a timing diagram:
149+
</p>
150+
<ol>
151+
<li>Note the current state before each clock edge</li>
152+
<li>Look up the input values <em>just before</em> the clock edge</li>
153+
<li>Use the state table to find the next state and output</li>
154+
<li>Plot the new state/output values <em>after</em> the clock edge (plus propagation delay)</li>
155+
</ol>
156+
157+
<div className="seq-diagram">
158+
<svg viewBox="0 0 500 200" xmlns="http://www.w3.org/2000/svg" style={{fontFamily:"'JetBrains Mono', monospace"}}>
159+
{/* Clock */}
160+
<text x="10" y="35" fontSize="11" fill="#8b9dc3">CLK</text>
161+
<polyline points="50,50 50,20 130,20 130,50 210,50 210,20 290,20 290,50 370,50 370,20 450,20 450,50"
162+
fill="none" stroke="#00d4ff" strokeWidth="2"/>
163+
{/* Q0 */}
164+
<text x="10" y="95" fontSize="11" fill="#8b9dc3">Q₀</text>
165+
<polyline points="50,100 130,100 130,80 210,80 210,100 290,100 290,80 370,80 370,100 450,100"
166+
fill="none" stroke="#00ff88" strokeWidth="2"/>
167+
{/* Q1 */}
168+
<text x="10" y="155" fontSize="11" fill="#8b9dc3">Q₁</text>
169+
<polyline points="50,170 210,170 210,150 290,150 290,170 370,170 370,150 450,150 450,170"
170+
fill="none" stroke="#fbbf24" strokeWidth="2"/>
171+
{/* Edge markers */}
172+
<line x1="130" y1="15" x2="130" y2="175" stroke="#ff3366" strokeWidth="1" strokeDasharray="3"/>
173+
<line x1="210" y1="15" x2="210" y2="175" stroke="#ff3366" strokeWidth="1" strokeDasharray="3"/>
174+
<line x1="290" y1="15" x2="290" y2="175" stroke="#ff3366" strokeWidth="1" strokeDasharray="3"/>
175+
<line x1="370" y1="15" x2="370" y2="175" stroke="#ff3366" strokeWidth="1" strokeDasharray="3"/>
176+
{/* Labels */}
177+
<text x="60" y="195" fontSize="9" fill="#8b9dc3">t=0 (00)</text>
178+
<text x="150" y="195" fontSize="9" fill="#8b9dc3">t=1 (01)</text>
179+
<text x="230" y="195" fontSize="9" fill="#8b9dc3">t=2 (10)</text>
180+
<text x="310" y="195" fontSize="9" fill="#8b9dc3">t=3 (11)</text>
181+
<text x="390" y="195" fontSize="9" fill="#8b9dc3">t=4 (00)</text>
182+
</svg>
183+
<p className="seq-diagram-caption">Figure 2 — Timing diagram of the 2-bit up-counter</p>
184+
</div>
185+
186+
<h2>Analysis of JK Flip-Flop Circuits</h2>
187+
<p>
188+
The same analysis procedure applies to circuits using JK, T, or SR flip-flops. The only
189+
difference is the characteristic equation used to find the next state:
190+
</p>
191+
<ul>
192+
<li>JK: Q(t+1) = J·Q̄ + K̄·Q</li>
193+
<li>T: Q(t+1) = T⊕Q</li>
194+
<li>SR: Q(t+1) = S + R̄·Q (with SR=0)</li>
195+
<li>D: Q(t+1) = D</li>
196+
</ul>
197+
198+
<div className="seq-box warning">
199+
<p className="seq-box-title">Common Mistakes to Avoid</p>
200+
<p>
201+
• Always use the state <em>before</em> the clock edge as "present state".<br/>
202+
• For Mealy machines, use input values <em>just before</em> the edge for output computation.<br/>
203+
• Don't confuse flip-flop <em>inputs</em> (J, K, D, T, S, R) with the <em>state outputs</em> (Q).
204+
</p>
205+
</div>
206+
207+
</div>
208+
</SeqLayout>
209+
);
210+
211+
export default SeqAnalysis;

0 commit comments

Comments
 (0)