Skip to content

Commit 983e2e2

Browse files
Sohan-RoutSohan-Rout
authored
Feat : added daily dsa challenge to bubble and insertion sort
2 parents a4f1e15 + 35efc1d commit 983e2e2

File tree

16 files changed

+912
-893
lines changed

16 files changed

+912
-893
lines changed

‎app/visualizer/searching/binarysearch/content.jsx‎

Lines changed: 161 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -9,143 +9,183 @@ const content = () => {
99
];
1010

1111
const searching = [
12-
{ points : "First middle is 7 (too high)" },
13-
{ points : "Search left half: [1, 3, 5]" },
14-
{ points : "New middle is 3 (too low)" },
15-
{ points : "Search right portion: [5]" },
16-
{ points : "Found at position 2" },
12+
{ points: "First middle is 7 (too high)" },
13+
{ points: "Search left half: [1, 3, 5]" },
14+
{ points: "New middle is 3 (too low)" },
15+
{ points: "Search right portion: [5]" },
16+
{ points: "Found at position 2" },
1717
];
1818

1919
const steps = [
20-
{points : "Start with the entire sorted array" },
21-
{points : "Compare the target with the middle element:",
22-
subpoints : [
20+
{ points: "Start with the entire sorted array" },
21+
{
22+
points: "Compare the target with the middle element:",
23+
subpoints: [
2324
"If equal, return the position",
2425
"If target is smaller, search the left half",
25-
"If target is larger, search the right half"
26-
]
27-
},
28-
{points : "Repeat until the element is found or the subarray is empty" },
29-
{points : 'If not found, return "Not Found"' },
26+
"If target is larger, search the right half",
27+
],
28+
},
29+
{ points: "Repeat until the element is found or the subarray is empty" },
30+
{ points: 'If not found, return "Not Found"' },
3031
];
3132

3233
const complexity = [
33-
{ points : "Best Case: Target is the middle element → O(1)." },
34-
{ points : "Worst Case: Element not present → O(log n) (halves search space each step)." },
34+
{ points: "Best Case: Target is the middle element → O(1)." },
35+
{
36+
points:
37+
"Worst Case: Element not present → O(log n) (halves search space each step).",
38+
},
3539
];
3640

37-
return (
38-
<main className="max-w-4xl mx-auto">
39-
<article className="bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
40-
{/* What is Binary Search */}
41-
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
42-
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
43-
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
44-
What is Binary Search?
45-
</h1>
46-
<div className="prose dark:prose-invert max-w-none">
47-
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
48-
{paragraphs[0]}
49-
</p>
41+
return (
42+
<main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
43+
<div className="col-span-1">
44+
<div className="hidden md:block">
45+
<iframe
46+
src="https://hw.glich.co/resources/embed/daily/dsa"
47+
width="100%"
48+
height="400"
49+
title="Daily DSA Challenge"
50+
></iframe>
51+
</div>
52+
<div className="flex justify-center">
53+
<span className="text-xs hidden md:block">
54+
Powered by{" "}
55+
<a
56+
href="https://hw.glich.co/resources/daily"
57+
target="_blank"
58+
className="underline hover:text-blue-500 duration-300"
59+
>
60+
Hello World
61+
</a>
62+
</span>
63+
</div>
5064
</div>
51-
</section>
65+
<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">
66+
{/* What is Binary Search */}
67+
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
68+
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
69+
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
70+
What is Binary Search?
71+
</h1>
72+
<div className="prose dark:prose-invert max-w-none">
73+
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
74+
{paragraphs[0]}
75+
</p>
76+
</div>
77+
</section>
5278

53-
{/* How Does It Work */}
54-
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
55-
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
56-
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
57-
How Does It Work?
58-
</h1>
59-
<div className="prose dark:prose-invert max-w-none">
60-
<p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
61-
Imagine you have a sorted list of numbers: [1, 3, 5, 7, 9, 11, 13] and you want to find the number 7.
62-
</p>
63-
64-
<ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
65-
<li className="text-gray-700 dark:text-gray-300 pl-2">
66-
Compare 7 with the middle element (7). It matches! Return the position.
67-
</li>
68-
<li className="text-gray-700 dark:text-gray-300 pl-2">
69-
If searching for 5:
70-
<ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
71-
{searching.map((item, index) => (
72-
<li key={index} className="text-gray-600 dark:text-gray-400">
73-
{item.points}
74-
</li>
75-
))}
76-
</ul>
77-
</li>
78-
</ol>
79-
80-
<p className="text-gray-700 dark:text-gray-300 mt-4 leading-relaxed">
81-
{paragraphs[1]}
82-
</p>
83-
</div>
84-
</section>
79+
{/* How Does It Work */}
80+
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
81+
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
82+
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
83+
How Does It Work?
84+
</h1>
85+
<div className="prose dark:prose-invert max-w-none">
86+
<p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
87+
Imagine you have a sorted list of numbers: [1, 3, 5, 7, 9, 11, 13]
88+
and you want to find the number 7.
89+
</p>
8590

86-
{/* Algorithm Steps */}
87-
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
88-
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
89-
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
90-
Algorithm Steps
91-
</h1>
92-
<div className="prose dark:prose-invert max-w-none">
93-
<ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
94-
{steps.map((item, index) => (
95-
<li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
96-
{item.points}
97-
{item.subpoints && (
91+
<ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
92+
<li className="text-gray-700 dark:text-gray-300 pl-2">
93+
Compare 7 with the middle element (7). It matches! Return the
94+
position.
95+
</li>
96+
<li className="text-gray-700 dark:text-gray-300 pl-2">
97+
If searching for 5:
9898
<ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
99-
{item.subpoints.map((subitem, subindex) => (
100-
<li key={subindex} className="text-gray-600 dark:text-gray-400">
101-
{subitem}
99+
{searching.map((item, index) => (
100+
<li
101+
key={index}
102+
className="text-gray-600 dark:text-gray-400"
103+
>
104+
{item.points}
102105
</li>
103106
))}
104107
</ul>
105-
)}
106-
</li>
107-
))}
108-
</ol>
109-
</div>
110-
</section>
108+
</li>
109+
</ol>
111110

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

130-
<div className="mt-8">
131-
<ComplexityGraph
132-
bestCase={(n) => 1}
133-
averageCase={(n) => Math.log2(n)}
134-
worstCase={(n) => Math.log2(n)}
135-
maxN={25}
136-
/>
137-
</div>
138-
139-
<div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
140-
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
141-
{paragraphs[2]}
142-
</p>
143-
</div>
144-
</div>
145-
</section>
146-
</article>
147-
</main>
148-
);
149-
};
150-
151-
export default content;
117+
{/* Algorithm Steps */}
118+
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
119+
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
120+
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
121+
Algorithm Steps
122+
</h1>
123+
<div className="prose dark:prose-invert max-w-none">
124+
<ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
125+
{steps.map((item, index) => (
126+
<li
127+
key={index}
128+
className="text-gray-700 dark:text-gray-300 pl-2"
129+
>
130+
{item.points}
131+
{item.subpoints && (
132+
<ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
133+
{item.subpoints.map((subitem, subindex) => (
134+
<li
135+
key={subindex}
136+
className="text-gray-600 dark:text-gray-400"
137+
>
138+
{subitem}
139+
</li>
140+
))}
141+
</ul>
142+
)}
143+
</li>
144+
))}
145+
</ol>
146+
</div>
147+
</section>
148+
149+
{/* Time Complexity */}
150+
<section className="p-6">
151+
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
152+
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
153+
Time Complexity
154+
</h1>
155+
<div className="prose dark:prose-invert max-w-none">
156+
<ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
157+
{complexity.map((item, index) => (
158+
<li
159+
key={index}
160+
className="text-gray-700 dark:text-gray-300 pl-2"
161+
>
162+
<span className="font-mono bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
163+
{item.points.split(":")[0]}:
164+
</span>
165+
<span className="ml-2">{item.points.split(":")[1]}</span>
166+
</li>
167+
))}
168+
</ul>
169+
170+
<div className="mt-8">
171+
<ComplexityGraph
172+
bestCase={(n) => 1}
173+
averageCase={(n) => Math.log2(n)}
174+
worstCase={(n) => Math.log2(n)}
175+
maxN={25}
176+
/>
177+
</div>
178+
179+
<div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
180+
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
181+
{paragraphs[2]}
182+
</p>
183+
</div>
184+
</div>
185+
</section>
186+
</article>
187+
</main>
188+
);
189+
};
190+
191+
export default content;

‎app/visualizer/searching/binarysearch/page.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export default function Page() {
6868

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

89-
<section>
89+
<section className="px-6">
9090
<Animation />
9191
</section>
9292

93-
<section>
93+
<section className="px-6">
9494
<p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
9595
Test Your Knowledge before moving forward!
9696
</p>
9797
<Quiz />
9898
</section>
9999

100-
<section>
100+
<section className="px-6">
101101
<CodeBlock />
102102
</section>
103103

@@ -110,7 +110,7 @@ export default function Page() {
110110
/>
111111
</section>
112112

113-
<section>
113+
<section className="px-6">
114114
<ExploreOther
115115
title="Explore other operations"
116116
links={[{ text: "Linear Search", url: "./linearsearch" }]}

0 commit comments

Comments
 (0)