Skip to content

Commit

Permalink
Merge pull request #97 from AkshatPandey-2004/main
Browse files Browse the repository at this point in the history 
Bubble sort page
  • Loading branch information
@RadhikaMalpani1702
RadhikaMalpani1702 authored Jul 12, 2024
2 parents 62cc56e + 9c9ec9a commit 711b0a8
Show file tree
Hide file tree
Showing 5 changed files with 1,717 additions and 278 deletions.
380 changes: 380 additions & 0 deletions Algorithm/Bubble.html
View file
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

0 comments on commit 711b0a8

Please sign in to comment.