diff --git a/app/components/ui/PushPop.jsx b/app/components/ui/PushPop.jsx index fbf515a..2ef0a98 100644 --- a/app/components/ui/PushPop.jsx +++ b/app/components/ui/PushPop.jsx @@ -61,14 +61,14 @@ const PushPop = ({ stack, setStack, isAnimating, setIsAnimating, setMessage, set }; return ( -
+
setInputValue(e.target.value)} placeholder="Enter value" - className="flex-1 p-2 border rounded dark:bg-gray-700 focus:ring-2 focus:ring-blue-500" + className="flex-1 p-2 border rounded dark:bg-neutral-900 focus:ring-2 focus:ring-blue-500" disabled={isAnimating} />
- ); - }; - - export default StackVisualizer; \ No newline at end of file + + ); +}; + +export default StackVisualizer; diff --git a/app/visualizer/stack/push-pop/codeBlock.jsx b/app/visualizer/stack/push-pop/codeBlock.jsx index 4cf5eff..135138a 100644 --- a/app/visualizer/stack/push-pop/codeBlock.jsx +++ b/app/visualizer/stack/push-pop/codeBlock.jsx @@ -305,10 +305,10 @@ int main() { initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }} - className="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-colors duration-300" + className="bg-white dark:bg-neutral-950 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-colors duration-300" > {/* Header */} -
+

diff --git a/app/visualizer/stack/push-pop/content.jsx b/app/visualizer/stack/push-pop/content.jsx index 2cfd269..a06878e 100644 --- a/app/visualizer/stack/push-pop/content.jsx +++ b/app/visualizer/stack/push-pop/content.jsx @@ -1,187 +1,303 @@ +"use client"; +import ComplexityGraph from "@/app/components/ui/graph"; +import { useEffect, useState } from "react"; + const content = () => { + const [theme, setTheme] = useState("light"); + const [mounted, setMounted] = useState(false); + + useEffect(() => { + const updateTheme = () => { + const savedTheme = localStorage.getItem("theme") || "light"; + setTheme(savedTheme); + }; + + updateTheme(); + setMounted(true); + + window.addEventListener("storage", updateTheme); + window.addEventListener("themeChange", updateTheme); + + return () => { + window.removeEventListener("storage", updateTheme); + window.removeEventListener("themeChange", updateTheme); + }; + }, []); + const paragraphs = [ `Push and Pop are the two fundamental operations in stack data structure. Stack follows LIFO (Last In First Out) principle - the last element added is the first one to be removed.`, `Push and Pop operations are fundamental to stack functionality. While simple to implement, stacks are powerful data structures used in many algorithms and system designs.`, ]; const examplePush = [ - { points : "Start with empty stack: [ ]" }, - { points : "Push 5: [5]" }, - { points : "Push 3: [3, 5]" }, - { points : "Push 7: [7, 3, 5]" }, + { points: "Start with empty stack: [ ]" }, + { points: "Push 5: [5]" }, + { points: "Push 3: [3, 5]" }, + { points: "Push 7: [7, 3, 5]" }, ]; const pushComplexity = [ - { points : "Time Complexity: O(1)" }, - { points : "Space Complexity: O(1)" }, + { points: "Time Complexity: O(1)" }, + { points: "Space Complexity: O(1)" }, ]; const examplePop = [ - { points : "Current stack: [7, 3, 5]" }, - { points : "Pop → returns 7: [3, 5]" }, - { points : "Pop → returns 3: [5]" }, - { points : "Pop → returns 5: [ ]" }, + { points: "Current stack: [7, 3, 5]" }, + { points: "Pop → returns 7: [3, 5]" }, + { points: "Pop → returns 3: [5]" }, + { points: "Pop → returns 5: [ ]" }, ]; const popComplexity = [ - { points : "Time Complexity: O(1)" }, - { points : "Space Complexity: O(1)" }, + { points: "Time Complexity: O(1)" }, + { points: "Space Complexity: O(1)" }, ]; - {/* applications */} + { + /* applications */ + } const applications = [ - { points : "Function call management in programming languages (call stack)" }, - { points : "Undo/Redo operations in text editors" }, - { points : "Back/Forward navigation in web browsers" }, - { points : "Expression evaluation and syntax parsing" }, - { points : "Memory management" }, + { + points: "Function call management in programming languages (call stack)", + }, + { points: "Undo/Redo operations in text editors" }, + { points: "Back/Forward navigation in web browsers" }, + { points: "Expression evaluation and syntax parsing" }, + { points: "Memory management" }, ]; - {/* underflow and overflow */} - const flows = [ - { title : "Stack Underflow" }, - { title : "Stack Overflow" }, - ]; + { + /* underflow and overflow */ + } + const flows = [{ title: "Stack Underflow" }, { title: "Stack Overflow" }]; const flowsDetails = [ - { detail : "Trying to pop from an empty stack" }, - { detail : "Trying to push to a full stack (in fixed-size implementations)" }, + { detail: "Trying to pop from an empty stack" }, + { + detail: "Trying to push to a full stack (in fixed-size implementations)", + }, ]; const combineData = flows.map((item, index) => ({ - title : item.title, - detail : flowsDetails[index].detail, + title: item.title, + detail: flowsDetails[index].detail, })); - return ( -
-
- {/* What is Stack Push & Pop */} -
-

- - What is Stack Push & Pop? -

-
-

- {paragraphs[0]} -

-
-
- - {/* Push Operation */} -
-

- - Push Operation -

-
-

- Adds an element to the top of the stack. -

-

- Example: Pushing elements onto a stack -

-
    - {examplePush.map((item, index) => ( -
  1. - {item.points} -
    2. - ))} -
-
    - {pushComplexity.map((item, index) => ( -
  • - - {item.points.split(':')[0]}: - - {item.points.split(':')[1]} -
    • - ))} -
-
-
- - {/* Pop Operation */} -
-

- - Pop Operation -

-
-

- Removes and returns the topmost element from the stack. -

-

- Example: Popping elements from a stack -

-
    - {examplePop.map((item, index) => ( -
  1. - {item.points} -
    2. - ))} -
-
    - {popComplexity.map((item, index) => ( -
  • - - {item.points.split(':')[0]}: - - {item.points.split(':')[1]} -
    • - ))} -
-
-
- - {/* Stack Underflow & Overflow */} -
-

- - Stack Underflow & Overflow -

-
-
    - {combineData.map((item, index) => ( -
  • - {item.title}: {item.detail} -
    • - ))} -
-
-
- - {/* Real-world Applications */} -
-

- - Real-world Applications -

-
-
    - {applications.map((items, index) => ( -
  • - {items.points} -
    • - ))} -
+ return ( +
+
+
+ {mounted && ( + + )} +
+
+ + Powered by{" "} + + Hello World + + +
-
- - {/* Additional Info */} -
-
-
-

- {paragraphs[1]} -

+
+ {/* What is Stack Push & Pop */} +
+

+ + What is Stack Push & Pop? +

+
+

+ {paragraphs[0]} +

+
+
+ + {/* Push Operation */} +
+

+ + Push Operation +

+
+

+ Adds an element to the top of the stack. +

+

+ Example: Pushing elements onto a stack +

+
    + {examplePush.map((item, index) => ( +
  1. + {item.points} +
    2. + ))} +
+
    + {pushComplexity.map((item, index) => ( +
  • + + {item.points.split(":")[0]}: + + {item.points.split(":")[1]} +
    • + ))} +
+
+
+ + {/* Pop Operation */} +
+

+ + Pop Operation +

+
+

+ Removes and returns the topmost element from the stack. +

+

+ Example: Popping elements from a stack +

+
    + {examplePop.map((item, index) => ( +
  1. + {item.points} +
    2. + ))} +
+
    + {popComplexity.map((item, index) => ( +
  • + + {item.points.split(":")[0]}: + + {item.points.split(":")[1]} +
    • + ))} +
+ +
+ 1} + averageCase={(n) => 1} + worstCase={(n) => 1} + maxN={25} + /> +
+
+
+ + {/* Stack Underflow & Overflow */} +
+

+ + Stack Underflow & Overflow +

+
+
    + {combineData.map((item, index) => ( +
  • + {item.title}:{" "} + {item.detail} +
    • + ))} +
+
+
+ + {/* Real-world Applications */} +
+

+ + Real-world Applications +

+
+
    + {applications.map((items, index) => ( +
  • + {items.points} +
    • + ))} +
+
+
+ + {/* Additional Info */} +
+
+
+

+ {paragraphs[1]} +

+
+
+
+
+ + {/* Mobile iframe at bottom */} +
+ {mounted && ( + + )} +
+ + Powered by{" "} + + Hello World + +
-
-
-
- ); - }; - - export default content; \ No newline at end of file + + ); +}; + +export default content; diff --git a/app/visualizer/stack/push-pop/page.jsx b/app/visualizer/stack/push-pop/page.jsx index 12408fb..0d9c69b 100644 --- a/app/visualizer/stack/push-pop/page.jsx +++ b/app/visualizer/stack/push-pop/page.jsx @@ -1,33 +1,124 @@ import Animation from "@/app/visualizer/stack/push-pop/animation"; import Navbar from "@/app/components/navbarinner"; +import Breadcrumbs from "@/app/components/ui/Breadcrumbs"; +import ArticleActions from "@/app/components/ui/ArticleActions"; +import Content from "@/app/visualizer/stack/push-pop/content"; +import Quiz from "@/app/visualizer/stack/push-pop/quiz"; +import Code from "@/app/visualizer/stack/push-pop/codeBlock"; +import ExploreOther from "@/app/components/ui/exploreOther"; +import ModuleCard from "@/app/components/ui/ModuleCard"; +import { MODULE_MAPS } from "@/lib/modulesMap"; +import Footer from '@/app/components/footer'; +import BackToTopButton from '@/app/components/ui/backtotop'; export const metadata = { - title: 'Stack Push and Pop Visualizer | Understand Stack Operations with Code in JS, C, Python, Java', - description: 'Learn how Push and Pop operations work in a Stack using interactive animations and code examples in JavaScript, C, Python, and Java. Perfect for beginners and interview preparation to understand stack-based data structures clearly.', + title: + "Stack Push & Pop Visualizer & Quiz | Learn Stack Operations with Code in JS, C, Python, Java", + description: + "Understand Stack Push and Pop operations through step-by-step animations and test your knowledge with an interactive quiz. Includes code examples in JavaScript, C, Python, and Java. Ideal for beginners and interview preparation to master stack-based data structures visually and through hands-on coding.", keywords: [ - 'Stack Push', - 'Stack Pop', - 'Stack Operations', - 'Push and Pop Visualizer', - 'DSA Stack Animation', - 'Learn Stack Operations', - 'Stack DSA', - 'Stack in JavaScript', - 'Stack in C', - 'Stack in Python', - 'Stack in Java', - 'Push and Pop Code Examples', - 'Stack Data Structure', - 'Stack Visualization Tool', + "Stack Push Visualizer", + "Stack Pop Visualizer", + "Push and Pop Animation", + "Stack Operations", + "Stack Algorithm", + "Stack Quiz", + "Data Structure Visualization", + "Learn Stack Push", + "Learn Stack Pop", + "Interactive Stack Tool", + "Practice Stack Operations", + "Test Stack Knowledge", + "Stack in JavaScript", + "Stack in C", + "Stack in Python", + "Stack in Java", + "Stack Code Examples", ], robots: "index, follow", + openGraph: { + images: [ + { + url: "/og/stack/pushPop.png", + width: 1200, + height: 630, + alt: "Stack Push and Pop Visualization", + }, + ], + }, }; export default function Page() { - return( + const paths = [ + { name: "Home", href: "/" }, + { name: "Visualizer", href: "/visualizer" }, + { name: "Stack : Push & Pop", href: "" }, + ]; + + return ( <> - - +
+ +
+ +
+
+
+ +
+
+
+

+ Stack +

+
+

+ Push & Pop +

+ +
+
+ +
+ +
+ +
+ +
+

+ Test Your Knowledge before moving forward! +

+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +