diff --git a/app/visualizer/queue/operations/isempty/animation.jsx b/app/visualizer/queue/operations/isempty/animation.jsx index 6ac2293..8ffb762 100755 --- a/app/visualizer/queue/operations/isempty/animation.jsx +++ b/app/visualizer/queue/operations/isempty/animation.jsx @@ -1,249 +1,226 @@ -'use client'; -import React, { useState } from 'react'; -import Footer from '@/app/components/footer'; -import CodeBlock from "@/app/visualizer/queue/operations/isempty/codeBlock"; -import Content from "@/app/visualizer/queue/operations/isempty/content"; -import ExploreOther from '@/app/components/ui/exploreOther'; -import Quiz from '@/app/visualizer/queue/operations/isempty/quiz'; -import BackToTop from '@/app/components/ui/backtotop'; -import GoBackButton from "@/app/components/ui/goback"; +"use client"; +import React, { useState } from "react"; const QueueVisualizer = () => { const [queue, setQueue] = useState([]); - const [inputValue, setInputValue] = useState(''); + const [inputValue, setInputValue] = useState(""); const [operation, setOperation] = useState(null); - const [message, setMessage] = useState('Queue is empty'); + const [message, setMessage] = useState("Queue is empty"); const [isAnimating, setIsAnimating] = useState(false); - const [isEmptyStatus, setIsEmptyStatus] = useState(true); - // Enqueue operation (add to rear/right) - const enqueue = () => { + /* ---------- helpers ---------- */ + const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); + const showOp = async (txt, ms = 800) => { + setOperation(txt); + await sleep(ms); + setOperation(null); + }; + + /* ---------- enqueue ---------- */ + const enqueue = async () => { if (!inputValue.trim()) { - setMessage('Please enter a value'); + setMessage("Please enter a value"); return; } - setIsAnimating(true); - setOperation(`Enqueuing "${inputValue}"...`); - setIsEmptyStatus(false); - - setTimeout(() => { - setQueue((prev) => [...prev, inputValue]); - setOperation(null); - setMessage(`"${inputValue}" added to queue`); - setInputValue(''); - setIsAnimating(false); - }, 800); + await showOp(`Enqueuing “${inputValue}” …`); + setQueue((q) => [...q, inputValue]); + setMessage(`“${inputValue}” added to rear`); + setInputValue(""); + setIsAnimating(false); }; - // Dequeue operation (remove from front/left) - const dequeue = () => { + /* ---------- dequeue ---------- */ + const dequeue = async () => { if (queue.length === 0) { - setMessage('Queue is empty!'); - setIsEmptyStatus(true); + setMessage("Queue is empty!"); return; } - setIsAnimating(true); - const dequeuedValue = queue[0]; - setOperation(`Dequeuing "${dequeuedValue}"...`); - - setTimeout(() => { - setQueue((prev) => prev.slice(1)); - setOperation(null); - setMessage(`"${dequeuedValue}" removed from queue`); - setIsAnimating(false); - setIsEmptyStatus(queue.length === 1); - }, 800); + const front = queue[0]; + await showOp(`Dequeuing “${front}” …`); + setQueue((q) => q.slice(1)); + setMessage(`“${front}” removed from front`); + setIsAnimating(false); }; - // IsEmpty operation - const checkEmpty = () => { + /* ---------- isEmpty ---------- */ + const checkEmpty = async () => { setIsAnimating(true); - setOperation('Checking if queue is empty...'); - - setTimeout(() => { - const empty = queue.length === 0; - setIsEmptyStatus(empty); - setOperation(null); - setMessage(empty ? 'Queue is empty!' : 'Queue is not empty'); - setIsAnimating(false); - }, 800); + await showOp("Checking if queue is empty …"); + const empty = queue.length === 0; + setMessage(empty ? "Queue is empty" : "Queue is NOT empty"); + setIsAnimating(false); }; - // Reset queue + /* ---------- reset ---------- */ const reset = () => { setQueue([]); - setInputValue(''); + setInputValue(""); setOperation(null); - setMessage('Queue cleared'); - setIsEmptyStatus(true); + setMessage("Queue cleared"); }; + /* ---------- UI ---------- */ return ( -
-
- {/* go back block here */} -
- -
- - {/* main logic here */} -

- Queue - IsEmpty -

-
- -

- Visualize isEmpty operation in real-time -

+
+

+ Visualise isEmpty operation in real-time +

+ +
+ {/* ----- Controls card ----- */} +
+
+ setInputValue(e.target.value)} + placeholder="Enter value" + className="flex-1 p-3 border border-gray-400 rounded-lg dark:bg-neutral-900 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all" + disabled={isAnimating} + onKeyDown={(e) => e.key === "Enter" && enqueue()} + /> +
-
- {/* Controls */} -
-
- setInputValue(e.target.value)} - placeholder="Enter value" - className="flex-1 p-2 border rounded dark:bg-gray-700 focus:ring-1 focus:ring-blue-500" - disabled={isAnimating} - /> - -
-
- - - -
+
+ + + +
- {/* Queue Visualization */} -
- {/* Operation Status */} + {/* status banners */} +
{operation && ( -
- {operation} +
+ + + + {operation}
)} + {message && ( +
+ {message} +
+ )} +
+
- {/* Message Display */} -
- {message} -
- - {/* Horizontal Queue - Left (Front) to Right (Rear) */} -
-
- - Front - - - Rear - + {/* ----- Visualisation card (hidden when empty) ----- */} + {queue.length > 0 && ( +
+

Queue Visualisation

+ +
+ {/* Front pointer */} +
+ Front + + +
- {/* Queue elements */} -
- {queue.length === 0 ? ( + {/* Elements */} +
+ {queue.map((item, index) => (
- - {isEmptyStatus ? "Queue is empty!" : "Queue is empty"} - + {item} +
- ) : ( -
- {queue.map((item, index) => ( -
-
- {item} -
-
- ))} -
- )} + ))} +
+ + {/* Rear pointer */} +
+ Rear + + +
-
- -

- Test Your Knowledge before moving forward! -

- - - - -
-
- -
+ )} + + ); }; diff --git a/app/visualizer/queue/operations/isempty/codeBlock.jsx b/app/visualizer/queue/operations/isempty/codeBlock.jsx index 16075da..c839aee 100755 --- a/app/visualizer/queue/operations/isempty/codeBlock.jsx +++ b/app/visualizer/queue/operations/isempty/codeBlock.jsx @@ -134,10 +134,10 @@ public: 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/queue/operations/isempty/content.jsx b/app/visualizer/queue/operations/isempty/content.jsx index cd15958..2f1eba2 100755 --- a/app/visualizer/queue/operations/isempty/content.jsx +++ b/app/visualizer/queue/operations/isempty/content.jsx @@ -1,4 +1,28 @@ +"use client"; +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 queue contains any elements or not. It returns true if the queue is empty (no elements) and false if it contains elements. This is a fundamental operation used to prevent underflow when performing dequeue operations.`, `The isEmpty operation is a simple but crucial part of queue functionality, serving as a safety check before removal operations and helping manage queue processing flow in algorithms and applications.`, @@ -52,8 +76,37 @@ const content = () => { ]; return ( -
-
+
+
+
+ {mounted && ( + + )} +
+
+ + Daily DSA Challenge by{" "} + + Hello World + + +
+
+
{/* What is the isEmpty Operation? */}

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

{paragraphs[1]}

@@ -199,6 +252,35 @@ const content = () => {

+ + {/* Mobile iframe at bottom */} +
+ {mounted && ( + + )} +
+ + Daily DSA Challenge by{" "} + + Hello World + + +
+
); }; diff --git a/app/visualizer/queue/operations/isempty/page.jsx b/app/visualizer/queue/operations/isempty/page.jsx index 868c194..2688eb7 100755 --- a/app/visualizer/queue/operations/isempty/page.jsx +++ b/app/visualizer/queue/operations/isempty/page.jsx @@ -1,31 +1,118 @@ import Animation from "@/app/visualizer/queue/operations/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/queue/operations/isempty/content"; +import Quiz from "@/app/visualizer/queue/operations/isempty/quiz"; +import Code from "@/app/visualizer/queue/operations/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 BackToTop from '@/app/components/ui/backtotop'; export const metadata = { - title: 'Queue Is Empty Operation | Learn with JS, C, Python, Java Code', - description: 'Learn how to check if a Queue is empty using interactive visualizations and complete code examples in JavaScript, C, Python, and Java. Ideal for DSA beginners and interview prep.', + title: "Queue Is Empty Operation | Learn with JS, C, Python, Java Code", + description: + "Learn how to check if a Queue is empty using interactive visualizations and complete code examples in JavaScript, C, Python, and Java. Ideal for DSA beginners and interview prep.", keywords: [ - 'Queue Is Empty', - 'Is Empty Operation Queue', - 'Queue Empty Condition', - 'Queue Code in JavaScript', - 'Queue Code in C', - 'Queue Code in Python', - 'Queue Code in Java', - 'DSA Queue Check', - 'Queue Operations', - 'Visualize Queue', - 'Learn Queue DSA', - 'Queue Data Structure', + "Queue Is Empty", + "Is Empty Operation Queue", + "Queue Empty Condition", + "Queue Code in JavaScript", + "Queue Code in C", + "Queue Code in Python", + "Queue Code in Java", + "DSA Queue Check", + "Queue Operations", + "Visualize Queue", + "Learn Queue DSA", + "Queue Data Structure", ], - robots: 'index, follow', + robots: "index, follow", + openGraph: { + images: [ + { + url: "/og/queue/isEmpty.png", + width: 1200, + height: 630, + alt: "Peek Front Algorithm Visualization", + }, + ], + }, }; export default function Page() { + const paths = [ + { name: "Home", href: "/" }, + { name: "Visualizer", href: "/visualizer" }, + { name: "Queue : IsEmpty", href: "" }, + ]; + return ( <> - - +
+ +
+ +
+
+
+ +
+
+
+

+ Queue +

+
+

+ IsEmpty +

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

+ Test Your Knowledge before moving forward! +

+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
); -}; \ No newline at end of file +} diff --git a/app/visualizer/queue/operations/isempty/quiz.jsx b/app/visualizer/queue/operations/isempty/quiz.jsx index 3c5b18e..8d50e66 100755 --- a/app/visualizer/queue/operations/isempty/quiz.jsx +++ b/app/visualizer/queue/operations/isempty/quiz.jsx @@ -1,3 +1,4 @@ +"use client"; import React, { useState } from 'react'; import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa'; import { motion, AnimatePresence } from 'framer-motion'; @@ -48,53 +49,8 @@ const QueueQuiz = () => { ], correctAnswer: 1, explanation: "For linked list queues, isEmpty simply verifies if the head pointer is null." - }, - { - question: "In an array-based queue, what condition typically indicates an empty queue?", - options: [ - "front == -1", - "front == rear", - "rear == array.length", - "front == array.length - 1" - ], - correctAnswer: 1, - explanation: "When front equals rear (with proper initialization), the queue is empty." - }, - { - question: "What is the space complexity of the isEmpty operation?", - options: ["O(n)", "O(1)", "O(log n)", "Depends on queue size"], - correctAnswer: 1, - explanation: "isEmpty uses O(1) space as it only needs to compare pointers/counters." - }, - { - question: "Which scenario would isEmpty return true?", - options: [ - "After creating a new queue", - "After enqueuing one element", - "After dequeuing from a full queue", - "When front == rear + 1" - ], - correctAnswer: 0, - explanation: "A newly created queue is empty by default (before any enqueue operations)." - }, - { - question: "How does isEmpty help in queue processing loops?", - options: [ - "By counting elements", - "As a termination condition", - "By sorting elements", - "By resizing the queue" - ], - correctAnswer: 1, - explanation: "Loops often use isEmpty to check when to stop processing (e.g., while(!queue.isEmpty()))." - }, - { - question: "What would isEmpty return after: enqueue(5), dequeue(), dequeue()?", - options: ["true", "false", "Error", "null"], - correctAnswer: 2, - explanation: "Second dequeue() would cause underflow (error) if isEmpty wasn't checked first." } -]; + ]; const [currentQuestion, setCurrentQuestion] = useState(0); const [selectedAnswer, setSelectedAnswer] = useState(null); @@ -102,13 +58,10 @@ const QueueQuiz = () => { const [showResult, setShowResult] = useState(false); const [quizCompleted, setQuizCompleted] = useState(false); const [answers, setAnswers] = useState(Array(questions.length).fill(null)); - const [showExplanation, setShowExplanation] = useState(false); const [showIntro, setShowIntro] = useState(true); const [showSuccessAnimation, setShowSuccessAnimation] = useState(false); - const [penaltyApplied, setPenaltyApplied] = useState(false); const handleAnswerSelect = (optionIndex) => { - if (selectedAnswer !== null) return; setSelectedAnswer(optionIndex); const newAnswers = [...answers]; newAnswers[currentQuestion] = optionIndex; @@ -118,18 +71,9 @@ const QueueQuiz = () => { const handleNextQuestion = () => { if (selectedAnswer === null) return; - if (showExplanation && !penaltyApplied) { - setScore(prevScore => Math.max(0, prevScore - 0.5)); - setPenaltyApplied(true); - } - if (selectedAnswer === questions[currentQuestion].correctAnswer) { setScore(score + 1); } - - setShowExplanation(false); - setPenaltyApplied(false); - if (currentQuestion < questions.length - 1) { setCurrentQuestion(currentQuestion + 1); setSelectedAnswer(null); @@ -144,7 +88,6 @@ const QueueQuiz = () => { }; const handlePreviousQuestion = () => { - setShowExplanation(false); setCurrentQuestion(currentQuestion - 1); setSelectedAnswer(answers[currentQuestion - 1]); }; @@ -156,38 +99,30 @@ const QueueQuiz = () => { setShowResult(false); setQuizCompleted(false); setAnswers(Array(questions.length).fill(null)); - setShowExplanation(false); setShowIntro(true); - setPenaltyApplied(false); }; const calculateWeakAreas = () => { const weakAreas = []; if (answers[0] !== questions[0].correctAnswer) { - weakAreas.push("understanding the basic principle of Selection Sort"); + weakAreas.push("understanding the isEmpty operation purpose"); } if (answers[1] !== questions[1].correctAnswer) { - weakAreas.push("time complexity analysis"); + weakAreas.push("determining isEmpty return values"); } if (answers[2] !== questions[2].correctAnswer) { - weakAreas.push("counting swaps in Selection Sort"); + weakAreas.push("understanding isEmpty importance in error prevention"); } if (answers[3] !== questions[3].correctAnswer) { - weakAreas.push("comparison with other simple sorts"); + weakAreas.push("time complexity analysis"); } if (answers[4] !== questions[4].correctAnswer) { - weakAreas.push("space complexity"); - } - if (answers[5] !== questions[5].correctAnswer) { - weakAreas.push("stability characteristics"); - } - if (answers[6] !== questions[6].correctAnswer) { - weakAreas.push("practical applications"); + weakAreas.push("linked list queue implementation"); } return weakAreas.length > 0 ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.` - : "Perfect! You've mastered all Selection Sort concepts!"; + : "Perfect! You've mastered all Queue isEmpty operation concepts!"; }; const startQuiz = () => { @@ -204,22 +139,22 @@ const QueueQuiz = () => { }; return ( -
+
{showIntro ? ( -
-
+

- Queue Quiz Challenge + Queue isEmpty Operation Quiz

-
+

How it works:

@@ -254,14 +189,14 @@ const QueueQuiz = () => {
- { />
- {
-
- + {

{questions[currentQuestion].question}

- +
{questions[currentQuestion].options.map((option, index) => ( - handleAnswerSelect(index)} >
- + {String.fromCharCode(65 + index)} {option} @@ -336,32 +267,9 @@ const QueueQuiz = () => { ))}
- - {selectedAnswer !== null && ( -
- - - {showExplanation && ( - - {questions[currentQuestion].explanation} - - )} - -
- )} + - +
- +
@@ -396,84 +303,62 @@ const QueueQuiz = () => {
{[...Array(5)].map((_, i) => ( - ))}
- +

- {score === questions.length - ? "Perfect Score!" - : score >= questions.length * 0.8 - ? "Excellent Work!" - : score >= questions.length * 0.6 - ? "Good Job!" - : score >= questions.length * 0.4 - ? "Keep Practicing!" - : "Let's Review Again!"} + {score === questions.length ? "Perfect Score!" : + score >= questions.length * 0.8 ? "Excellent Work!" : + score >= questions.length * 0.6 ? "Good Job!" : + score >= questions.length * 0.4 ? "Keep Practicing!" : "Let's Review Again!"}

- You scored {((score / questions.length) * 100).toFixed(0)}% - correct + You scored {((score / questions.length) * 100).toFixed(0)}% correct

- +

Performance Analysis

{calculateWeakAreas()}

- +
-

- Question Breakdown: -

+

Question Breakdown:

{questions.map((q, index) => ( -
-

- {q.question} -

-
+
+

{q.question}

+
{answers[index] === q.correctAnswer ? ( ) : ( )}
-

- Your answer:{" "} - {answers[index] !== null - ? q.options[answers[index]] - : "Not answered"} -

+

Your answer: {answers[index] !== null ? q.options[answers[index]] : "Not answered"}

{answers[index] !== q.correctAnswer && ( -

- Correct answer: {q.options[q.correctAnswer]} -

+

Correct answer: {q.options[q.correctAnswer]}

)}
))}
- +