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

Bubble sort page #97

Merged
merged 3 commits into from
Jul 12, 2024
Merged

Bubble sort page #97

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
fb3fd8a
bubble sort
AkshatPandey-2004 Jul 11, 2024
3e72080
Merge branch 'main' of https://github.com/AkshatPandey-2004/Vsoc24_Vi…
AkshatPandey-2004 Jul 11, 2024
9c9ec9a
bubble sort
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
380 changes: 380 additions & 0 deletions Algorithm/Bubble.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,380 @@
<!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>Bubble Sort</title>
</head>
<body>
<!-- Navigation Bar -->
<!-- <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<div class="container-fluid">
<div class="d-flex align-items-center">
<img src="images/fevicon.png" class="h-6 mr-2" alt="">
<a class="navbar-brand" href="#">Visual Sort</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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="#home-section">Home</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">Sorting Visualizers</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="Bubble.html">Bubble Sort</a></li>
<li><a class="dropdown-item" href="selectionsort.html">Selection Sort</a></li>
<li><a class="dropdown-item" href="Insertion.html">Insertion Sort</a></li>
<li><a class="dropdown-item" href="#">Comb Sort</a></li>
<li><a class="dropdown-item" href="mergesort.html">Merge Sort</a></li>
<li><a class="dropdown-item" href="#">Heap Sort</a></li>
<li><a class="dropdown-item" href="#">Quick Sort</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#programs-section">Algorithms</a></li>
<li class="nav-item"><a class="nav-link" href="#features-section">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#About-Us">About Us</a></li>
<li class="nav-item"><a class="nav-link log" href="login.html">Login</a></li>
</ul>
</div>
</div>
</nav> -->
<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">Bubble Sort</h1>
<div class="row mt-5">
<div class="col-md-6">
<div class="bubble-sort-description">
<p>Bubble Sort is a simple sorting algorithm that repeatedly steps through the list, compares adjacent elements, and swaps them if they are in the wrong order. The pass through the list is repeated until the list is sorted. The algorithm, which is a comparison sort, is named for the way smaller elements "bubble" to the top of the list. Despite its simplicity, Bubble Sort is not suitable for large data sets as its average and worst-case time complexity is quite high.</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/bubble2.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)</td>
</tr>
<tr>
<td>Average Time Complexity</td>
<td>O(n<sup>2</sup>)</td>
</tr>
<tr>
<td>Worst Time Complexity</td>
<td>O(n<sup>2</sup>)</td>
</tr>
<tr>
<td>Space Complexity</td>
<td>O(1)</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">Bubble 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="bubble">Bubble 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>Bubble 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 bubbleSort(int[] arr) {
int n = arr.length;
for (int i = 0; i < n-1; i++) {
for (int j = 0; j < n-i-1; j++) {
if (arr[j] > arr[j+1]) {
int temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
}</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 bubbleSort(int arr[], int n) {
for (int i = 0; i < n-1; i++) {
for (int j = 0; j < n-i-1; j++) {
if (arr[j] > arr[j+1]) {
int temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
}</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 bubbleSort(int arr[], int n) {
for (int i = 0; i < n-1; i++) {
for (int j = 0; j < n-i-1; j++) {
if (arr[j] > arr[j+1]) {
int temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
}</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 bubble_sort(arr):
n = len(arr)
for i in range(n-1):
for j in range(n-i-1):
if arr[j] > arr[j+1]:
arr[j], arr[j+1] = arr[j+1], arr[j]</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 Colors</td>
<td>Medium</td>
<td><a href="https://leetcode.com/problems/sort-colors/">Link</a></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Largest Number</td>
<td>Hard</td>
<td><a href="https://leetcode.com/problems/largest-number/description/">Link</a></td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- <footer class="container py-4 py-md-5 px-4 px-md-3">
<div class="row d-flex justify-content-center align-items-center text-center">
<div class="col-md-6 mb-3">
<form>
<h5>Subscribe to our newsletter</h5>
<p>Monthly digest of what's new and exciting from us.</p>
<div class="d-flex gap-2 justify-content-center align-items-center">
<input id="newsletter1" type="text" class="form-control w-full" placeholder="Email address">
<button class="btn btn-primary" type="button">Subscribe</button>
</div>
</form>
</div>
</div>
<div class="row mt-5">
<div class="col-md-4 mb-3">
<a class="d-inline-flex align-items-center mb-2 text-body-emphasis text-decoration-none footer-title" href="/" aria-label="Visual Sort">
Visual Sort
</a>
<div class="vs">
<ul class="list-unstyled small">
<li class="mb-2">Visual Sort is a web-based sorting algorithm visualization tool which provides an interactive way to visualize various sorting algorithms in action, helping users understand how different algorithms work and their efficiency in sorting data.</li>
</ul>
</div>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>Home</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#home-section" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#algorithm-section" class="nav-link p-0 text-body-secondary">Algorithms</a></li>
<li class="nav-item mb-2"><a href="#programs-section" class="nav-link p-0 text-body-secondary">Programs</a></li>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>About</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#about-us-section" class="nav-link p-0 text-body-secondary">About</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Our Contributors</a></li>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>Support</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#faq" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Contact</a></li>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>Legal</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="privacy-policy.html" class="nav-link p-0 text-body-secondary">Privacy Policy</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Terms & Conditions</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Licensing</a></li>
</ul>
</div>
</div>
<div id="topbtn" class="topbtn">
<a class="gotopbtn" href="#"><i class="fa-solid fa-angles-up"></i></a>
</div>
<div class="foot">
<div class="icons">
<div class="linkedin">
<a href="https://www.linkedin.com/in/mastan-sayyad-126904223/"><i class="fa-brands fa-linkedin"></i></a>
</div>
<div class="github">
<a href="https://github.com/MastanSayyad"><i class="fa-brands fa-github"></i></a>
</div>
<div class="instagram">
<a href="#"><i class="fa-brands fa-instagram"></i></a>
</div>
<div class="twitter">
<a href="#"><i class="fa fa-twitter"></i></a>
</div>
</div>
</div>
<div class="d-flex flex-column flex-sm-row justify-content-center py-4 my-4 border-top">
<p>© 2024 Visual Sort - Mastan Sayyad, Inc. All rights reserved.</p>
</div>
</footer> -->

<!-- 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="./bubble.js"></script>
</body>
</html>
Loading
Loading