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.

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

Merge Sort Page And Footer #104

Merged
merged 5 commits into from
Jul 14, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
141 changes: 70 additions & 71 deletions Algorithm/Bubble.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@
<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">
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">

<link href="https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha384-k6RqeWeci5ZR/Lv4MR0sA0FfDOMt23cez/3paNdF+ZL0LaFf6FYyUo13EFBZu/9m" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/2815a7015d.js" crossorigin="anonymous"></script>
<title>Bubble Sort</title>
</head>
<body>
Expand Down Expand Up @@ -116,7 +121,8 @@ <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>
<p>
Comb Sort is an improvement over Bubble Sort. It works by eliminating turtles, or small values near the end of the list, since in a bubble sort, these slow down the sorting process significantly. The basic idea is to compare elements with a certain gap between them, and then progressively reduce the gap while keeping the elements compared and swapped as necessary.</p>
<br>
<h3>Algorithm:</h3>
<pre><code class="algorithm"></code></pre>
Expand Down Expand Up @@ -292,85 +298,78 @@ <h2 class="text-center">Practice Questions</h2>
</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>
<footer class="container-fluid 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>
<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>
<div class="row mt-5">
<div class="col-md-4 mb-3">
<a id="vs" class="d-inline-flex align-items-center ml- 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>
<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 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="github">
<a href="https://github.com/MastanSayyad"><i class="fa-brands fa-github"></i></a>
<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="instagram">
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<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 class="twitter">
<a href="#"><i class="fa fa-twitter"></i></a>
</div>
<div class="foot">
<div class="icons">
<a href="https://www.linkedin.com/in/mastan-sayyad-126904223/" class="linkedin"><i class="fa-brands fa-linkedin"></i></a>
<a href="https://github.com/MastanSayyad" class="github"><i class="fa-brands fa-github"></i></a>
<a href="#" class="instagram"><i class="fa-brands fa-instagram"></i></a>
<a href="#" class="twitter"><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> -->
<div id="last" class="d-flex flex-column flex-sm-row justify-content-center py-4 my-1 border-top">
<p>© 2024 Visual Sort - Mastan Sayyad, Inc. All rights reserved.</p>
</div>
</footer>
<div id="topbtn" class="topbtn">
<a class="gotopbtn" href="#"><img id="topbtn" src="../images/upload.png" width="50px" height="50px" alt=""></a>
</div>


<!-- 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>
Expand Down
102 changes: 86 additions & 16 deletions Algorithm/Mergesort.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<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">
<script src="https://kit.fontawesome.com/2815a7015d.js" crossorigin="anonymous"></script>
<title>Merge Sort</title>
</head>
<body>
Expand All @@ -29,13 +30,13 @@
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>
<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="Insertionsort.html">Insertion Sort</a>
<a class="dropdown-item" href="CombSort.html">Comb Sort</a>
<a class="dropdown-item" href="mergesort.html">Merge Sort</a>
<a class="dropdown-item" href="Heapsort.html">Heap Sort</a>
<a class="dropdown-item" href="Quicksort.html">Quick Sort</a>
</div>
</li>
<!-- <li class="nav-item">
Expand All @@ -51,13 +52,13 @@
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>
<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="Insertionsort.html">Insertion Sort</a>
<a class="dropdown-item" href="CombSort.html">Comb Sort</a>
<a class="dropdown-item" href="mergesort.html">Merge Sort</a>
<a class="dropdown-item" href="Heapsort.html">Heap Sort</a>
<a class="dropdown-item" href="Quicksort.html">Quick Sort</a>
</div>
</li>
<li class="nav-item">
Expand Down Expand Up @@ -160,7 +161,7 @@ <h3 id="tourTitle"></h3>
</div>
</div>
</section>

<!-- Code Section -->
<section class="code-section py-5">
<div class="container">
Expand Down Expand Up @@ -353,7 +354,76 @@ <h2 class="text-center">Practice Questions</h2>
</table>
</div>
</section>

<footer class="container-fluid 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 class="foot">
<div class="icons">
<a href="https://www.linkedin.com/in/mastan-sayyad-126904223/" class="linkedin"><i class="fa-brands fa-linkedin"></i></a>
<a href="https://github.com/MastanSayyad" class="github"><i class="fa-brands fa-github"></i></a>
<a href="#" class="instagram"><i class="fa-brands fa-instagram"></i></a>
<a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
</div>
</div>
<div id="last" class="d-flex flex-column flex-sm-row justify-content-center py-4 my-1 border-top">
<p>© 2024 Visual Sort - Mastan Sayyad, Inc. All rights reserved.</p>
</div>
</footer>
<div id="topbtn" class="topbtn">
<a class="gotopbtn" href="#"><img id="topbtn" src="../images/upload.png" width="50px" height="50px" alt=""></a>
</div>
<!-- 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>
Expand Down
34 changes: 33 additions & 1 deletion Algorithm/Mergesort.js
Original file line number Diff line number Diff line change
Expand Up @@ -455,4 +455,36 @@ const bubbleSortAlgorithm = `
description.querySelector('pre code.algorithm').innerText = bubbleSortAlgorithm;
$(document).ready(function() {
$('.dropdown-toggle').dropdown();
});
});


const topButton = document.getElementById("topbtn");
window.onscroll = function () {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
topButton.style.display = "block";
} else {
topButton.style.display = "none";
}
};
topButton.onclick = function (event) {
event.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
});
};
const upimage = document.getElementByClass("upimage");
window.onscroll = function () {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
topButton.style.display = "block";
} else {
topButton.style.display = "none";
}
};
topButton.onclick = function (event) {
event.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
});
};
Loading
Loading