Skip to content
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

Jump to bottom

Only Quick Sort Page #102

Merged
merged 4 commits into from
Jul 13, 2024
Merged

Only Quick Sort Page #102

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1176f28
Quick Sort Page
AkshatPandey-2004 Jul 12, 2024
2a95994
merge sort
AkshatPandey-2004 Jul 12, 2024
1d6bae7
minor changes
AkshatPandey-2004 Jul 12, 2024
c3eda91
changes done
AkshatPandey-2004 Jul 12, 2024
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
363 changes: 363 additions & 0 deletions Algorithm/Mergesort.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,363 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="./bubbles.css">
<title>Merge Sort</title>
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg fixed-top bg-white" >

<div class="container-fluid">
<div class="flex items-center"> <img src="../images/fevicon.png" width="50px" class="h-6 mr-2" alt=""><a class="navbar-brand" style="font-weight: 900 ; color:rgb(219, 127, 219); padding-left: 10px;" href="#">Visual Sort</a></div>
<button class="navbar-toggler" style=" background-color: rgb(202, 111, 202) ;color: black;" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon " ></span>
</button>
<div class="collapse navbar-collapse justify-content-end " id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item" >
<a class="nav-link" href="../index.html">Home</a>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle font-medium" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">
Sorting Visualizers
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="Bubble.html">Bubble Sort</a>
<a class="dropdown-item" href="selectionsort.html">Selection Sort</a>
<a class="dropdown-item" href="Insertion.html">Insertion Sort</a>
<a class="dropdown-item" href="#">Comb Sort</a>
<a class="dropdown-item" href="mergesort.html">Merge Sort</a>
<a class="dropdown-item" href="#">Heap Sort</a>
<a class="dropdown-item" href="#">Quick Sort</a>
</div>
</li>
<!-- <li class="nav-item">
<a class="nav-link" style="font-weight: 600;" href="#algorithm-section">Sorting Visualizers</a>
</li> -->
<!-- <li class="nav-item dropdown">
<a class="nav-link" style="font-weight: 600;" href="./visual.html">
Sorting Visualizers
</a>
</li>-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle font-medium" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">
Algorithm
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./Bubble.html">Bubble Sort</a>
<a class="dropdown-item" href="selectionsort.html">Selection Sort</a>
<a class="dropdown-item" href="Insertion.html">Insertion Sort</a>
<a class="dropdown-item" href="#">Comb Sort</a>
<a class="dropdown-item" href="mergesort.html">Merge Sort</a>
<a class="dropdown-item" href="#">Heap Sort</a>
<a class="dropdown-item" href="#">Quick Sort</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" style="font-weight: 500;" href="../index.html#features-section">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" style="font-weight: 500;" href="../index.html#About-Us">About Us</a>
</li>
<li class="nav-item ">
<a class="nav-link log px-3" href="../login.html">Login</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link log" style="font-weight: 600; background-color: rgb(219, 127, 219); border-radius: 0.4rem; margin-left: 0.7rem;" href="signup.html">Sign Up</a>
</li> -->

</ul>
</div>
</div>
</nav>
<!-- Bubble Sort Section -->
<section class="bubble-sort-section">
<div class="container">
<h1 class="bubble-sort-title">Merge Sort</h1>
<div class="row mt-5">
<div class="col-md-6">
<div class="bubble-sort-description">
<p>Merge Sort is a divide-and-conquer algorithm that splits the array into halves, recursively sorts each half, and then merges the sorted halves to produce the sorted array. It is known for its efficiency in handling large data sets, with a time complexity of O(n log n) in all cases.</p>
<br>
<h3>Algorithm:</h3>
<pre><code class="algorithm"></code></pre>
</div>
</div>
<div class="col-md-6">
<div class="bubble-sort-gif">
<img src="../images/merge2.gif" alt="Bubble Sort Visualization" class="img-fluid shadow-lg rounded">
</div>
<table class="table table-bordered mt-3">
<thead>
<tr>
<th colspan="2">Complexity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Best Time Complexity</td>
<td>O(n log n)</td>
</tr>
<tr>
<td>Average Time Complexity</td>
<td>O(n log n)</td>
</tr>
<tr>
<td>Worst Time Complexity</td>
<td>O(n log n)</td>
</tr>
<tr>
<td>Space Complexity</td>
<td>O(n)</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>

<!-- Complexity Section -->
<section class="complexity-section py-5">

</section>


<!-- Visualizer Section -->
<section class="visualizer-section py-5">
<div class="container text-center">
<h2 class="mb-4">Merge Sort Visualizer</h2>
<div id="Loader"></div>
<div id="contain">
<div class="sh" id="visualization"></div>
<div id="buttons" class="d-flex justify-content-center mt-3">
<input id="array" type="text" placeholder="Enter array separated by space" size="30" class="form-control mx-2">
<button id="submit" class="btn btn-primary mx-2" onclick="submit()">Submit</button>
<select id="sortSelect" onchange="updateTimeComplexity()" class="form-control mx-2">
<option value="merge">Merge Sort</option>
</select>
<button id="start" class="btn btn-primary mx-2" onclick="startSort()">Start Sort</button>
<button class="btn btn-primary mx-2" onclick="stop = true; stopClicked()">Stop</button>
<button id="resume" class="btn btn-primary mx-2" onclick="stop = false; startSort()">Resume</button>
<button id="reset" class="btn btn-primary mx-2" onclick="reset()">Reset</button>
<button class="btn btn-danger mx-2" onclick="window.location.reload();">Clear</button>
</div>
</div>
<div class="tour-overlay" id="tourOverlay">
<div class="tour-popup" id="tourPopup">
<h3 id="tourTitle"></h3>
<p id="tourDescription"></p>
<button id="tourNext">Next</button>
<button id="tourSkip" class="skip-btn">Skip</button>
</div>
</div>
</div>
</section>

<!-- Code Section -->
<section class="code-section py-5">
<div class="container">
<h2>Merge Sort Code</h2>
<div class="nav nav-tabs mb-3" id="languageTabs" role="tablist">
<a class="nav-item nav-link active" id="java-tab" data-toggle="tab" href="#java" role="tab" aria-controls="java" aria-selected="true">Java</a>
<a class="nav-item nav-link" id="c-tab" data-toggle="tab" href="#c" role="tab" aria-controls="c" aria-selected="false">C</a>
<a class="nav-item nav-link" id="cpp-tab" data-toggle="tab" href="#cpp" role="tab" aria-controls="cpp" aria-selected="false">C++</a>
<a class="nav-item nav-link" id="python-tab" data-toggle="tab" href="#python" role="tab" aria-controls="python" aria-selected="false">Python</a>
</div>
<div class="tab-content" id="languageTabsContent">
<div class="tab-pane fade show active" id="java" role="tabpanel" aria-labelledby="java-tab">
<pre class="code-display p-3 rounded bg-dark text-white"><code>public void mergeSort(int[] arr, int left, int right) {
if (left < right) {
int mid = (left + right) / 2;
mergeSort(arr, left, mid);
mergeSort(arr, mid + 1, right);
merge(arr, left, mid, right);
}
}

public void merge(int[] arr, int left, int mid, int right) {
int n1 = mid - left + 1;
int n2 = right - mid;
int[] leftArr = new int[n1];
int[] rightArr = new int[n2];
System.arraycopy(arr, left, leftArr, 0, n1);
System.arraycopy(arr, mid + 1, rightArr, 0, n2);
int i = 0, j = 0, k = left;
while (i < n1 && j < n2) {
if (leftArr[i] <= rightArr[j]) {
arr[k++] = leftArr[i++];
} else {
arr[k++] = rightArr[j++];
}
}
while (i < n1) {
arr[k++] = leftArr[i++];
}
while (j < n2) {
arr[k++] = rightArr[j++];
}
}</code></pre>
</div>
<div class="tab-pane fade" id="c" role="tabpanel" aria-labelledby="c-tab">
<pre class="code-display p-3 rounded bg-dark text-white"><code>void mergeSort(int arr[], int left, int right) {
if (left < right) {
int mid = left + (right - left) / 2;
mergeSort(arr, left, mid);
mergeSort(arr, mid + 1, right);
merge(arr, left, mid, right);
}
}

void merge(int arr[], int left, int mid, int right) {
int n1 = mid - left + 1;
int n2 = right - mid;
int L[n1], R[n2];
for (int i = 0; i < n1; i++)
L[i] = arr[left + i];
for (int j = 0; j < n2; j++)
R[j] = arr[mid + 1 + j];
int i = 0, j = 0, k = left;
while (i < n1 && j < n2) {
if (L[i] <= R[j]) {
arr[k] = L[i];
i++;
} else {
arr[k] = R[j];
j++;
}
k++;
}
while (i < n1) {
arr[k] = L[i];
i++;
k++;
}
while (j < n2) {
arr[k] = R[j];
j++;
k++;
}
}</code></pre>
</div>
<div class="tab-pane fade" id="cpp" role="tabpanel" aria-labelledby="cpp-tab">
<pre class="code-display p-3 rounded bg-dark text-white"><code>void mergeSort(vector&lt;int&gt;& arr, int left, int right) {
if (left < right) {
int mid = left + (right - left) / 2;
mergeSort(arr, left, mid);
mergeSort(arr, mid + 1, right);
merge(arr, left, mid, right);
}
}

void merge(vector&lt;int&gt;& arr, int left, int mid, int right) {
int n1 = mid - left + 1;
int n2 = right - mid;
vector&lt;int&gt; L(n1), R(n2);
for (int i = 0; i < n1; i++)
L[i] = arr[left + i];
for (int j = 0; j < n2; j++)
R[j] = arr[mid + 1 + j];
int i = 0, j = 0, k = left;
while (i < n1 && j < n2) {
if (L[i] <= R[j]) {
arr[k] = L[i];
i++;
} else {
arr[k] = R[j];
j++;
}
k++;
}
while (i < n1) {
arr[k] = L[i];
i++;
k++;
}
while (j < n2) {
arr[k] = R[j];
j++;
k++;
}
}</code></pre>
</div>
<div class="tab-pane fade" id="python" role="tabpanel" aria-labelledby="python-tab">
<pre class="code-display p-3 rounded bg-dark text-white"><code>def merge_sort(arr):
if len(arr) > 1:
mid = len(arr) // 2
left_half = arr[:mid]
right_half = arr[mid:]
merge_sort(left_half)
merge_sort(right_half)
i = j = k = 0
while i < len(left_half) and j < len(right_half):
if left_half[i] < right_half[j]:
arr[k] = left_half[i]
i += 1
else:
arr[k] = right_half[j]
j += 1
k += 1
while i < len(left_half):
arr[k] = left_half[i]
i += 1
k += 1
while j < len(right_half):
arr[k] = right_half[j]
j += 1
k += 1</code></pre>
</div>
</div>
</div>
</section>

<!-- Practice Questions Section -->
<section class="questions-section py-5 bg-light">
<div class="container">
<h2 class="text-center">Practice Questions</h2>
<table class="table table-striped mt-4">
<thead>
<tr>
<th scope="col">Question Number</th>
<th scope="col">Question Title</th>
<th scope="col">Level</th>
<th scope="col">Link</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Sort an Array</td>
<td>Easy</td>
<td><a href="https://leetcode.com/problems/sort-an-array/">Link</a></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Sort List</td>
<td>Medium</td>
<td><a href="https://leetcode.com/problems/sort-list/">Link</a></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Merge k Sorted Lists</td>
<td>Hard</td>
<td><a href="https://leetcode.com/problems/merge-k-sorted-lists/">Link</a></td>
</tr>
</tbody>
</table>
</div>
</section>

<!-- JavaScript Files -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="./Mergesort.js"></script>
</body>
</html>
Loading