diff --git a/app/visualizer/searching/binarysearch/content.jsx b/app/visualizer/searching/binarysearch/content.jsx index 056cf3c..5653d37 100644 --- a/app/visualizer/searching/binarysearch/content.jsx +++ b/app/visualizer/searching/binarysearch/content.jsx @@ -80,7 +80,7 @@ const content = () => {
- Powered by{" "} + Daily DSA Challenge by{" "} { )}
- Powered by{" "} + Daily DSA Challenge by{" "} {
- Powered by{" "} + Daily DSA Challenge By{" "} { )}
- Powered by{" "} + Daily DSA Challenge By{" "} {
- Powered by{" "} + Daily DSA Challenge By{" "} { )}
- Powered by{" "} + Daily DSA Challenge By{" "} {
- Powered by{" "} + Daily DSA Challenge By{" "} { )}
- Powered by{" "} + Daily DSA Challenge By{" "} { )}
- Powered by{" "} + Daily DSA Challenge By{" "} { )}
- Powered by{" "} + Daily DSA Challenge By{" "} { )}
- Powered by{" "} + Daily DSA Challenge By{" "} { - const [stack, setStack] = useState([]); - const [inputValue, setInputValue] = useState(''); - const [operation, setOperation] = useState(null); - const [message, setMessage] = useState('Stack is empty'); - const [isAnimating, setIsAnimating] = useState(false); - const [peekedItem, setPeekedItem] = useState(null); - const [isEmptyStatus, setIsEmptyStatus] = useState(null); - - // Push operation - const push = () => { - if (!inputValue.trim()) { - setMessage('Please enter a value to push'); - return; - } - - setIsAnimating(true); - setOperation(`Pushing "${inputValue}"...`); - setMessage(''); - setPeekedItem(null); - setIsEmptyStatus(null); - - setTimeout(() => { - setStack(prev => [inputValue, ...prev]); - setOperation(null); - setMessage(`"${inputValue}" pushed to stack!`); - setInputValue(''); - setIsAnimating(false); - }, 1000); - }; - - // Pop operation - const pop = () => { - if (stack.length === 0) { - setMessage('Stack is empty!'); - setIsEmptyStatus(true); - return; - } - - setIsAnimating(true); - const poppedValue = stack[0]; - setOperation(`Popping "${poppedValue}"...`); - setMessage(''); - setPeekedItem(null); - setIsEmptyStatus(null); - - setTimeout(() => { - setStack(prev => prev.slice(1)); - setOperation(null); - setMessage(`"${poppedValue}" popped from stack!`); - setIsAnimating(false); - }, 1000); - }; - - // Peek operation - const peek = () => { - if (stack.length === 0) { - setMessage('Stack is empty!'); - setIsEmptyStatus(true); - return; - } - - setIsAnimating(true); - setOperation('Peeking at top element...'); - setPeekedItem(stack[0]); - setIsEmptyStatus(false); - - setTimeout(() => { - setOperation(null); - setMessage(`Top element is "${stack[0]}"`); + /* ---------- state ---------- */ + const [stack, setStack] = useState([]); + const [inputValue, setInputValue] = useState(""); + const [operation, setOperation] = useState(null); + const [message, setMessage] = useState("Stack is empty"); + const [isAnimating, setIsAnimating] = useState(false); + const [peekedItem, setPeekedItem] = useState(null); + const [isEmptyStatus, setIsEmptyStatus] = useState(null); + + const itemRefs = useRef([]); + + /* ---------- helpers ---------- */ + const resetRefs = () => (itemRefs.current = []); + + /* ---------- push ---------- */ + const push = () => { + const val = inputValue.trim(); + if (!val) { + setMessage("Please enter a value to push"); + return; + } + setIsAnimating(true); + setOperation(`Pushing "${val}"…`); + setMessage(""); + setPeekedItem(null); + setIsEmptyStatus(null); + + setStack((prev) => [val, ...prev]); + + setTimeout(() => { + const el = itemRefs.current[0]; + gsap.set(el, { y: -60, scale: 0.8, opacity: 0 }); + gsap + .timeline({ onComplete: () => setIsAnimating(false) }) + .to(el, { y: 0, scale: 1, opacity: 1, duration: 0.4, ease: "back.out(1.7)" }) + .to(el, { boxShadow: "0 0 10px #3b82f6", duration: 0.2, yoyo: true, repeat: 1 }, "-=0.2") + .call(() => setMessage(`"${val}" pushed to stack!`)); + }, 10); + + setInputValue(""); + }; + + /* ---------- pop ---------- */ + const pop = () => { + if (stack.length === 0) { + setMessage("Stack is empty!"); + setIsEmptyStatus(true); + return; + } + setIsAnimating(true); + const val = stack[0]; + setOperation(`Popping "${val}"…`); + setMessage(""); + setPeekedItem(null); + setIsEmptyStatus(null); + + const el = itemRefs.current[0]; + gsap + .timeline({ onComplete: () => { + setStack((prev) => prev.slice(1)); setIsAnimating(false); - }, 1000); - }; - - // IsEmpty operation - const checkEmpty = () => { - setIsAnimating(true); - setOperation('Checking if stack is empty...'); - setPeekedItem(null); - - setTimeout(() => { - const empty = stack.length === 0; - setIsEmptyStatus(empty); + setMessage(`"${val}" popped from stack!`); + } }) + .to(el, { scale: 0.5, rotation: 15, y: 80, opacity: 0, duration: 0.5, ease: "power2.in" }); + }; + + /* ---------- peek ---------- */ + const peek = () => { + if (stack.length === 0) { + setMessage("Stack is empty!"); + setIsEmptyStatus(true); + return; + } + setIsAnimating(true); + setOperation("Peeking at top element…"); + setPeekedItem(stack[0]); + setIsEmptyStatus(false); + + const el = itemRefs.current[0]; + gsap + .timeline({ onComplete: () => setIsAnimating(false) }) + .to(el, { y: -6, boxShadow: "0 0 15px #a855f7", duration: 0.25 }) + .to(el, { y: 0, boxShadow: "0 0 0px transparent", duration: 0.25 }) + .to(el, { y: -6, duration: 0.25 }) + .to(el, { y: 0, duration: 0.25 }) + .call(() => setMessage(`Top element is "${stack[0]}"`)); + }; + + /* ---------- isEmpty ---------- */ + const checkEmpty = () => { + setIsAnimating(true); + setOperation("Checking if stack is empty…"); + setPeekedItem(null); + setTimeout(() => { + const empty = stack.length === 0; + setIsEmptyStatus(empty); + setOperation(null); + setMessage(empty ? "Stack is empty!" : "Stack is not empty"); + setIsAnimating(false); + }, 1000); + }; + + /* ---------- reset ---------- */ + const reset = () => { + setIsAnimating(true); + gsap.to(itemRefs.current.filter(Boolean), { + scale: 0, + y: -60, + opacity: 0, + stagger: 0.06, + duration: 0.3, + onComplete: () => { + setStack([]); + setInputValue(""); setOperation(null); - setMessage(empty ? 'Stack is empty!' : 'Stack is not empty'); + setMessage("Stack is empty"); + setPeekedItem(null); + setIsEmptyStatus(null); setIsAnimating(false); - }, 1000); - }; - - // Reset stack - const reset = () => { - setStack([]); - setInputValue(''); - setOperation(null); - setMessage('Stack is empty'); - setPeekedItem(null); - setIsEmptyStatus(null); - }; - - return ( -
-
+ resetRefs(); + }, + }); + }; - { /* go back block here */} -
- + return ( +
+

+ Visualize Push, Pop, Peek, and IsEmpty operations +

+ +
+ {/* Controls */} +
+
+ setInputValue(e.target.value)} + placeholder="Enter a value" + className="flex-1 p-2 rounded dark:bg-neutral-900 border" + disabled={isAnimating} + /> + +
+
+ +
+
+ + {/* Stack Visualization */} +
+

Stack Visualization

- { /* main logic here */} -

- Stack IsEmpty -

-
- -

- Visualize Push, Pop, Peek, and IsEmpty operations -

- -
- {/* Controls */} -
-
- setInputValue(e.target.value)} - placeholder="Enter a value" - className="flex-1 p-2 border rounded dark:bg-gray-700 focus:ring-2 focus:ring-blue-500" - disabled={isAnimating} - /> - -
-
- - -
+ {/* Operation Status */} + {operation && ( +
+ {operation}
- - {/* Stack Visualization */} -
-

Stack Visualization

- - {/* Operation Status */} - {operation && ( -
- {operation} -
- )} - - {/* Message Display */} - {message && ( -
- {message} -
- )} - - {/* Vertical Stack with Empty State Visualization */} -
- {/* Top indicator */} -
- {stack.length > 0 ? '↑ Top' : ''} -
- - {/* Stack elements or empty visualization */} -
- {stack.length === 0 ? ( -
-
- {isEmptyStatus ? ( -
-
Stack Empty
-
- ) : ( - "Stack is empty" - )} -
-
- ) : ( -
- {stack.map((item, index) => ( -
- {item} -
- ))} + )} + + {/* Message Display */} + {message && ( +
+ {message} +
+ )} + + {/* Vertical Stack */} +
+ {/* Top indicator */} +
+ {stack.length > 0 ? "↑ Top" : ""} +
+ +
+ {stack.length === 0 ? ( + + ) : ( +
+ {stack.map((item, index) => ( +
(itemRefs.current[index] = el)} + className={`p-3 border-2 rounded text-center font-medium transition-all ${ + index === 0 && peekedItem !== null + ? "bg-purple-200 dark:bg-purple-800 border-purple-400 dark:border-purple-600" + : index === 0 + ? "bg-blue-100 dark:bg-blue-900 border-blue-300 dark:border-blue-700" + : "bg-white dark:bg-gray-700 border-gray-200 dark:border-gray-600" + }`} + > + {item}
- )} -
- - {/* Bottom indicator */} -
- {stack.length > 0 ? '↓ Bottom' : ''} + ))}
-
+ )}
-
- { /* quiz block here */} -

- Test Your Knowledge before moving forward! -

- + {/* Bottom indicator */} +
+ {stack.length > 0 ? "↓ Bottom" : ""} +
+
+
+
+
+ ); +}; - - { + const cloudRef = useRef(null); + useEffect(() => { + gsap.to(cloudRef.current, { y: -6, duration: 2, repeat: -1, yoyo: true, ease: "power1.inOut" }); + }, []); + return ( +
+ + -
-
- -
-
- ); - }; - - export default StackVisualizer; \ No newline at end of file + + Stack is empty +
+ ); +}; + +export default StackVisualizer; \ No newline at end of file diff --git a/app/visualizer/stack/isempty/codeBlock.jsx b/app/visualizer/stack/isempty/codeBlock.jsx index b317a8d..3d0df8f 100644 --- a/app/visualizer/stack/isempty/codeBlock.jsx +++ b/app/visualizer/stack/isempty/codeBlock.jsx @@ -341,10 +341,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/isempty/content.jsx b/app/visualizer/stack/isempty/content.jsx index 7923af3..3a15f07 100644 --- a/app/visualizer/stack/isempty/content.jsx +++ b/app/visualizer/stack/isempty/content.jsx @@ -1,4 +1,29 @@ +"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 = [ `The isEmpty operation checks whether a stack contains any elements or not. It's a fundamental operation that helps prevent errors when trying to perform operations like pop() or peek() on an empty stack.`, `The isEmpty operation is a simple but crucial part of stack implementation, ensuring safe stack manipulation and preventing runtime errors.`, @@ -32,8 +57,37 @@ const content = () => { ]; return ( -
-

@@ -154,7 +217,7 @@ const content = () => { {/* Additional Info */}
-
+

{paragraphs[1]}

@@ -162,6 +225,35 @@ const content = () => {
+ + {/* Mobile iframe at bottom */} + ); }; diff --git a/app/visualizer/stack/isempty/page.jsx b/app/visualizer/stack/isempty/page.jsx index b9df7c0..659816f 100644 --- a/app/visualizer/stack/isempty/page.jsx +++ b/app/visualizer/stack/isempty/page.jsx @@ -1,31 +1,119 @@ import Animation from "@/app/visualizer/stack/isempty/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/isempty/content"; +import Quiz from "@/app/visualizer/stack/isempty/quiz"; +import Code from "@/app/visualizer/stack/isempty/codeBlock"; +import ModuleCard from "@/app/components/ui/ModuleCard"; +import { MODULE_MAPS } from "@/lib/modulesMap"; +import ExploreOther from "@/app/components/ui/exploreOther"; +import Footer from "@/app/components/footer"; +import BackToTopButton from "@/app/components/ui/backtotop"; export const metadata = { - title: 'Stack Visualizer | Learn Stack with Animation and IsEmpty Operation in JS, C, Python, Java', - description: 'Visualize how Stack works in DSA using interactive animations, including the isEmpty operation. Great for beginners and interview prep. Includes code examples in JavaScript, C, Python, and Java.', + title: + "Stack is empty Visualizer | Learn Stack IsEmpty Operation in JS, C, Python, Java", + description: + "Visualize how Stack isEmpty operation works in DSA using interactive animations. Great for beginners and interview prep. Includes code examples in JavaScript, C, Python, and Java.", keywords: [ - 'Stack DSA', - 'Stack Visualizer', - 'Learn Stack', - 'DSA Animation', - 'Stack isEmpty Operation', - 'Check if Stack is Empty', - 'Stack Implementation in JavaScript', - 'Stack Implementation in C', - 'Stack in Python', - 'Stack in Java', - 'Stack Code Examples', - 'Interactive Stack Tool', + "Stack DSA", + "Stack Visualizer", + "Learn Stack", + "DSA Animation", + "Stack isEmpty Operation", + "Check if Stack is Empty", + "Stack Implementation in JavaScript", + "Stack Implementation in C", + "Stack in Python", + "Stack in Java", + "Stack Code Examples", + "Interactive Stack Tool", ], robots: "index, follow", + openGraph: { + images: [ + { + url: "/og/stack/isEmpty.png", + width: 1200, + height: 630, + alt: "Stack Peek Visualization", + }, + ], + }, }; export default function Page() { - return( + const paths = [ + { name: "Home", href: "/" }, + { name: "Visualizer", href: "/visualizer" }, + { name: "Stack : IsEmpty", href: "" }, + ]; + + return ( <> - - +
+ +
+ +
+
+
+ +
+
+
+

+ Stack +

+
+

+ IsEmpty Operation +

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

+ Test Your Knowledge before moving forward! +

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