Skip to content

Feat : added daily dsa challenge to bubble and insertion sort #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Sohan-Rout merged 3 commits into from
Aug 8, 2025
Merged

Feat : added daily dsa challenge to bubble and insertion sort #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
04c04f7
fix : fixed binary search layout
Sohan-Rout Aug 8, 2025
f7320a3
feat : added daily dsa in bubble sort
Sohan-Rout Aug 8, 2025
35efc1d
feat : added daily challenge to insertion sort
Sohan-Rout Aug 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
282 changes: 161 additions & 121 deletions app/visualizer/searching/binarysearch/content.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,143 +9,183 @@ const content = () => {
];

const searching = [
{ points : "First middle is 7 (too high)" },
{ points : "Search left half: [1, 3, 5]" },
{ points : "New middle is 3 (too low)" },
{ points : "Search right portion: [5]" },
{ points : "Found at position 2" },
{ points: "First middle is 7 (too high)" },
{ points: "Search left half: [1, 3, 5]" },
{ points: "New middle is 3 (too low)" },
{ points: "Search right portion: [5]" },
{ points: "Found at position 2" },
];

const steps = [
{points : "Start with the entire sorted array" },
{points : "Compare the target with the middle element:",
subpoints : [
{ points: "Start with the entire sorted array" },
{
points: "Compare the target with the middle element:",
subpoints: [
"If equal, return the position",
"If target is smaller, search the left half",
"If target is larger, search the right half"
]
},
{points : "Repeat until the element is found or the subarray is empty" },
{points : 'If not found, return "Not Found"' },
"If target is larger, search the right half",
],
},
{ points: "Repeat until the element is found or the subarray is empty" },
{ points: 'If not found, return "Not Found"' },
];

const complexity = [
{ points : "Best Case: Target is the middle element → O(1)." },
{ points : "Worst Case: Element not present → O(log n) (halves search space each step)." },
{ points: "Best Case: Target is the middle element → O(1)." },
{
points:
"Worst Case: Element not present → O(log n) (halves search space each step).",
},
];

return (
<main className="max-w-4xl mx-auto">
<article className="bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
{/* What is Binary Search */}
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
What is Binary Search?
</h1>
<div className="prose dark:prose-invert max-w-none">
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
{paragraphs[0]}
</p>
return (
<main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
<div className="col-span-1">
<div className="hidden md:block">
<iframe
src="https://hw.glich.co/resources/embed/daily/dsa"
width="100%"
height="400"
title="Daily DSA Challenge"
></iframe>
</div>
<div className="flex justify-center">
<span className="text-xs hidden md:block">
Powered by{" "}
<a
href="https://hw.glich.co/resources/daily"
target="_blank"
className="underline hover:text-blue-500 duration-300"
>
Hello World
</a>
</span>
</div>
</div>
</section>
<article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
{/* What is Binary Search */}
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
What is Binary Search?
</h1>
<div className="prose dark:prose-invert max-w-none">
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
{paragraphs[0]}
</p>
</div>
</section>

{/* How Does It Work */}
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
How Does It Work?
</h1>
<div className="prose dark:prose-invert max-w-none">
<p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
Imagine you have a sorted list of numbers: [1, 3, 5, 7, 9, 11, 13] and you want to find the number 7.
</p>

<ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
<li className="text-gray-700 dark:text-gray-300 pl-2">
Compare 7 with the middle element (7). It matches! Return the position.
</li>
<li className="text-gray-700 dark:text-gray-300 pl-2">
If searching for 5:
<ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
{searching.map((item, index) => (
<li key={index} className="text-gray-600 dark:text-gray-400">
{item.points}
</li>
))}
</ul>
</li>
</ol>

<p className="text-gray-700 dark:text-gray-300 mt-4 leading-relaxed">
{paragraphs[1]}
</p>
</div>
</section>
{/* How Does It Work */}
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
How Does It Work?
</h1>
<div className="prose dark:prose-invert max-w-none">
<p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
Imagine you have a sorted list of numbers: [1, 3, 5, 7, 9, 11, 13]
and you want to find the number 7.
</p>

{/* Algorithm Steps */}
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
Algorithm Steps
</h1>
<div className="prose dark:prose-invert max-w-none">
<ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
{steps.map((item, index) => (
<li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
{item.points}
{item.subpoints && (
<ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
<li className="text-gray-700 dark:text-gray-300 pl-2">
Compare 7 with the middle element (7). It matches! Return the
position.
</li>
<li className="text-gray-700 dark:text-gray-300 pl-2">
If searching for 5:
<ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
{item.subpoints.map((subitem, subindex) => (
<li key={subindex} className="text-gray-600 dark:text-gray-400">
{subitem}
{searching.map((item, index) => (
<li
key={index}
className="text-gray-600 dark:text-gray-400"
>
{item.points}
</li>
))}
</ul>
)}
</li>
))}
</ol>
</div>
</section>
</li>
</ol>

{/* Time Complexity */}
<section className="p-6">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
Time Complexity
</h1>
<div className="prose dark:prose-invert max-w-none">
<ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
{complexity.map((item, index) => (
<li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
<span className="font-mono bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
{item.points.split(':')[0]}:
</span>
<span className="ml-2">{item.points.split(':')[1]}</span>
</li>
))}
</ul>
<p className="text-gray-700 dark:text-gray-300 mt-4 leading-relaxed">
{paragraphs[1]}
</p>
</div>
</section>

<div className="mt-8">
<ComplexityGraph
bestCase={(n) => 1}
averageCase={(n) => Math.log2(n)}
worstCase={(n) => Math.log2(n)}
maxN={25}
/>
</div>

<div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
{paragraphs[2]}
</p>
</div>
</div>
</section>
</article>
</main>
);
};

export default content;
{/* Algorithm Steps */}
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
Algorithm Steps
</h1>
<div className="prose dark:prose-invert max-w-none">
<ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
{steps.map((item, index) => (
<li
key={index}
className="text-gray-700 dark:text-gray-300 pl-2"
>
{item.points}
{item.subpoints && (
<ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
{item.subpoints.map((subitem, subindex) => (
<li
key={subindex}
className="text-gray-600 dark:text-gray-400"
>
{subitem}
</li>
))}
</ul>
)}
</li>
))}
</ol>
</div>
</section>

{/* Time Complexity */}
<section className="p-6">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
Time Complexity
</h1>
<div className="prose dark:prose-invert max-w-none">
<ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
{complexity.map((item, index) => (
<li
key={index}
className="text-gray-700 dark:text-gray-300 pl-2"
>
<span className="font-mono bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
{item.points.split(":")[0]}:
</span>
<span className="ml-2">{item.points.split(":")[1]}</span>
</li>
))}
</ul>

<div className="mt-8">
<ComplexityGraph
bestCase={(n) => 1}
averageCase={(n) => Math.log2(n)}
worstCase={(n) => Math.log2(n)}
maxN={25}
/>
</div>

<div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
{paragraphs[2]}
</p>
</div>
</div>
</section>
</article>
</main>
);
};

export default content;
10 changes: 5 additions & 5 deletions app/visualizer/searching/binarysearch/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export default function Page() {

<div className="py-20 bg-gray-100 dark:bg-neutral-900 text-gray-800 dark:text-gray-200">
<section className="px-6 md:px-12">
<div className="mt-10 sm:mt-10">
<div className="mt-10 sm:mt-10 mb-4">
<Breadcrumbs paths={paths} />
</div>
<div className="flex items-center flex-col">
Expand All @@ -86,18 +86,18 @@ export default function Page() {
<Content />
</section>

<section>
<section className="px-6">
<Animation />
</section>

<section>
<section className="px-6">
<p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
Test Your Knowledge before moving forward!
</p>
<Quiz />
</section>

<section>
<section className="px-6">
<CodeBlock />
</section>

Expand All @@ -110,7 +110,7 @@ export default function Page() {
/>
</section>

<section>
<section className="px-6">
<ExploreOther
title="Explore other operations"
links={[{ text: "Linear Search", url: "./linearsearch" }]}
Expand Down
Loading
Loading