DEV Community: blessing-michael

Comparing Bubble Sort with Selection Sort

blessing-michael — Tue, 28 Mar 2023 09:54:10 +0000

Sorting means grouping or arranging a lot of objects into an appropriate order. You know that moment when you are looking for matching pair of socks to wear? That's sorting.
In this article, we will discuss the differences between bubble sort and selection sort.

Prerequisite

Big O Notation
Javascript for loop

Bubble Sort

The basic principle behind bubble sort is that it compares two elements, if the first element is bigger than the second element, we swap those two elements, or else we leave them and move to the next iteration. Take a look at this helpful visual representation of what happens while the algorithm is running.

image by Wikimedia Foundations

I will explain Bubble Sort in detail with the image below.

The array in the image above is unsorted. It consists of 8 integers, i.e. 6,5,3,1,8,7,2,4.

The steps needed to sort the array are as follows:

PASS 1

Step 1: First we compare a[0] with a[1] element. The a[0] is greater than a[1], i.e. 6>5, so we swap the elements.

our new array after swapping the element looks like this 👇

Step 2:In this step, a[1] would be compared with a[2]. Notice that a[1] is greater than a[2], i.e. 6>3, and we swap the elements again.

Step 3: The a[2] would be compared with a[3]. Notice that 6>1, i.e. a[2] is greater than a[3], so we swap the elements.

Step 4: In this step, a[3] would be compared with a[4]. Notice that a[3] is less than a[4], so we leave them and move to the next iteration since they are in the correct order.

Step 5: In this step, a[4] would be compared with a[5]. Notice that a[4] is greater than a[5], i.e. 8>7, so we swap the elements.

Step 6: Let’s compare the a[5] with a[6]. Notice that a[5] is greater than a[6], i.e. 8>2, so we swap the elements.

Step 7: In this step, a[6] would be compared with a[7]. Notice that a[6] is greater than a[7], so we swap the elements.

At the end of pass 1, we got the array below.

Pass 2: We have to start comparing the elements from the first position,i.e a[0] would be compared with a[1]. We repeat the process until the array is sorted.

Implementing Bubble Sort Algorithm

function bubbleSort(arr){
    for(let i=0; i< arr.length-1; i++){
        for(let j=0; j<arr.length-1; j++){
            if(arr[j]>arr[j+1]){
                arr[j],arr[j+1]=arr[j+1], arr[j]
            }
        }
    }
}

Selection Sort

Selection sort continuously selects the next-smallest element and swaps it into position. Assuming we have an unsorted array, To sort this array in increasing order, during each iteration we have to select the smallest item from the unsorted partition and move it to the sorted partition. We will keep track of the current item and current minimum with red and green arrows.

Step 1

The red arrow keeps track of the current minimum number, The green arrow represents our current item, as we iterate over the array, we find 1, we set this as our current minimum, and we swap 1 and 2. Our new array looks like the diagram below 👇

Step 2

In this step, we set 5 as our current minimum and current item using the green and red arrows. we scan the array again using the green arrow to check for a smaller number, Now we found 2, and we swap 5 and 2.

Our new array looks like the diagram below.

Step 3

In this step, we set our current minimum to 3 and current item to 3, as we scan through the array, Notice that there is no number smaller than 3 in the right part of the array. So No swapping occurs here.

Step 4

In this Iteration, our current minimum is set to 4 and the current item to 4, as we scan through the array, Notice that there is no number smaller than 4 in the right part of the array. No swapping occurs here.

Step 5

In this step, we set our current minimum to 5 and the current item to 5, There is no other element present in the right part of the array. So we return 5.

Implementing Selection Sort Algorithm

for(let i=0; i<arr.length; i++){
    let min=i;
    for(let i+1; j<arr.length; j++){
        if(arr[j]<arr[min]){
            min=j
        }
    }
   [ arr[i],arr[min]]=arr[min, arr[i]]
}

Differences between Bubble sort and Selection sort

Bubble Sort	Selection Sort
The time complexity is O(n) and O(n2) respectively.	The time complexity in both best and worst cases is O(n 2).
It is not an efficient sorting technique when compare with selection sort.	Selection sort is a better sorting technique when compared to bubble sort .
bubble sort functions by repeatedly exchanging the adjacent components if they are in the wrong order.	selection sort sorts an array by continuously picking the minimum element from the unsorted part and inserting that at the beginning of the array.

Conclusion

In summary, the main difference between bubble sort and selection sort is that bubble sort compares two elements, and continually swaps the adjacent elements, if they are in the wrong order. In contrast, selection sort sorts an array by repeatedly finding the minimum element from the unsorted part and inserting that at the beginning of the array.

References

Describing How to Use Constraint Validation API to Validate Forms on the Frontend

blessing-michael — Sat, 25 Mar 2023 21:05:48 +0000

A Beginner's Guide to Constraint Validation API.

Almost every major website require forms. There are forms for signing up, contacting, searching, and more! the browsers have built-in validation based on those HTML attributes like required and maxlength etc. We can leave everything to the browser for basic validation or we can build our own unique JS validation. But wouldn't it be nice to use our script and tap into the browser's mechanism for validation? Yes, we can, courtesy of the Constraint Validation API.
In this article, we will discuss:

How Constraint Validation API works.
How can we have more control over our forms using Constraint Validation API?
Add validation using only Javascript.

Prerequisites

Basic knowledge of HTML and CSS.
Basic knowledge of Javascript.
A code editor(VS code recommended).

How Constraint Validation API works

The Constraint Validation API can be used on several HTML form elements.

button element
fieldset element
input element
output element
select element
textarea element

Now, we will practice using The Constraint Validation API on HTML Input Element. Below is an image that shows an input field.

Creating a Basic HTML/CSS Page

let's create a simple form with HTML.

<body>
    <form action="" id="form" novalidate>
      <div class="form1">
        <label for="name" id="name-label" class="label">Name</label>
        <input
          required
          type="text"
          id="name"
          class="name"
          placeholder="Enter your Name"
        />
      </div>

      <div class="form1">
        <label for="email" id="email-label" class="label">Email</label>
        <input
          type="email"
          id="email"
          class="name"
          placeholder="Enter your Email"
          required
        />

        <span class="error-Message" aria-live="polite"></span>
      </div>

      <div class="country">
        <label for="country" class="label">Country</label>
        <input
          minlength="2"
          id="country"
          class="name"
          placeholder="Enter your country's code"
          required
        />

        <span class="error-Message" aria-live="polite"></span>
      </div>

      <button type="submit" id="submit">submit</button>
    </form>
    <script src="index.js"></script>
  </body>

novalidate: The novalidate attribute as seen in the form is used to disable the browser's built-in validation, giving our script control over the validation process.
<span class="error-message" aria-live="polite"></span>: The span element is for displaying the error messages.
aria-live: The attribute is set to the <span> to ensure that our personalized error message is displayed to everyone.

CSS

Now for the CSS, let's add styles to the invalid and valid fields. border of 1px solid green; if valid and border of 1px solid rgb(99, 97, 97); if invalid. We will style our span class which is responsible for displaying the error message with the background color of red, and display of none. Lastly, we will create a class of active with a display block for the span class.

body {
  display: flex;
  flex-direction: column;
  background: linear-gradient(
    90deg,
    rgba(100, 100, 280, 0.5),
    rgba(107, 107, 189, 0.9)
  );
  background-size: cover;
  background-position: center;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

form {
  margin: 0 auto;
  background-color: whitesmoke;
  padding: 40px;
  width: 400px;
  height: 400px;
  border-radius: 5px;
  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.3);
}

.form1 {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}
.name {
  width: 95%;
  height: 30px;
  border-radius: 5px;
}
#submit {
  width: 95%;
  margin-top: 40px;
  height: 40px;
  background-color: rgb(54, 52, 108);
  border: none;
  color: white;
  text-transform: capitalize;
  font-size: 15px;
  font-weight: bold;
  font-family: sans-serif;
  border-radius: 5px;
}
.label {
  margin-bottom: 5px;
}
input {
  border-radius: 4px;
  width: 100%;
  position: relative;
}
/* This will handle the valid and invalid field */
input:valid {
  border: 1px solid green;
}
input:invalid {
  border: 1px solid rgb(99, 97, 97);
  box-shadow: 2px 2px 8px rgba(99, 97, 97, 0.3);
}

/* validation css starts here */
.error-Message {
  width: 90%;
  font-size: 80%;
  background-color: rgb(230, 63, 63);
  border-radius: 0 0 5px 5px;
  height: 30px;
  padding: 0;
  display: none;
  color: white;
}
.error-Message.active {
  padding: 10px;
  display: block;
  transition: all 0.9s ease-in;
}
/* end of validation css */

The result 👇

Alright, now we are done with the basic form setup, let's dig into Javascript and discuss the Constraint Validation API.

Putting the Constraint Validation API into Practice

valueMissing: Returns true if a required attribute is present, but has no value, otherwise returns false. If true, the element matches the CSS pseudo-class :invalid
typeMismatch: If the value is less than the minimum length defined by the minlength attribute, it returns true, or false if it exceeds or is equal to the minlength. If true, the element matches the CSS pseudo-class :invalid

Now let's validate the email's input field <input type="email" id="email" class="name" placeholder="Enter your Email" required /> and the Country's input field <input minlength="2" id="country" class="name" placeholder="Enter your country's code" required />

Notice that both has the required attribute, but the Country's input field has minlength of 2 characters.

const form = document.getElementById("form");
const email = document.getElementById("email");
const emailErrorMes = document.querySelector("#email +span.error-Message");

const country = document.getElementById("country");
const countryerror = document.querySelector("#country +span.error-Message");

email.addEventListener("input", (event) => {
  if (email.validity.valid) {
    emailErrorMes.textContent = "";
    emailErrorMes.className = "error-Message";
  } else {
    displayError();
  }
});
country.addEventListener("input", (event) => {
  if (country.validity.valid) {
    countryerror.textContent = "";
    countryerror.className = "error-Message";
  } else {
    displayError();
  }
});

we added an event listener to the input field to know when there's a value in it or not.

if (email.validity.valid) {
emailErrorMes.textContent = "";
emailErrorMes.className = "error-Message"}:
Here, the error message is removed if the field is valid, setting the textContent to an empty string, resets the content of the input field.
- else { displayError(); }: This line checks for when the field is invalid. We call the displayError function here to display an error message. We will create the displayError function in a minute.

Next, we add a submit event listener to our form element. This event will fire on submitting the form and ensures that entries are valid.

if (!email.validity.valid) { displayError(); event.preventDefault()}: If the email field is not valid, we call the displayError function to display our custom error message.
- event.preventDefault(): This cancels the event and prevents the form from being submitted.

Now, here comes our displayError function.

function displayError() {
  if (email.validity.valueMissing) {
    emailErrorMes.textContent = "Please enter your email address";
  } else if (email.validity.typeMismatch) {
    emailErrorMes.textContent = "Entered value needs to match an email address";
  }
  emailErrorMes.className = "error-Message active";

  //validity for country
  if (document.activeElement == country) {
    if (country.validity.valueMissing) {
      countryerror.textContent = "Please enter your country";
    } else if (country.validity.tooShort) {
      countryerror.textContent = `Country code too short. Code should be at least ${country.minLength} characters.`;

      //   "Country name too short";
    }
    countryerror.className = "error-Message active";
  }
}

if(email.validity.valueMissing){emailErrorMes.textContent = "Please enter your email address"}: This line takes care of when the email input field is empty. When this happens our custom error message is displayed on the screen.
- else if (email.validity.typeMismatch) { emailErrorMes.textContent = "Entered value needs to match an email address"}: Here the entered details in the email are not in the appropriate format of type email, again we display our custom message.
emailErrorMes.className = "error-Message active": "error-Message active" is our CSS class which sets the styling properly.

That's all, our webpage should now look like this.

Repeat the same process for the country's input field.

This is the complete JavaScript code that we created.

const form = document.getElementById("form");
const email = document.getElementById("email");
const emailErrorMes = document.querySelector("#email +span.error-Message");

const country = document.getElementById("country");
const countryerror = document.querySelector("#country +span.error-Message");

email.addEventListener("input", (event) => {
  if (email.validity.valid) {
    emailErrorMes.textContent = "";
    emailErrorMes.className = "error-Message";
  } else {
    displayError();
  }
});
country.addEventListener("input", (event) => {
  if (country.validity.valid) {
    countryerror.textContent = "";
    countryerror.className = "error-Message";
  } else {
    displayError();
  }
});

form.addEventListener("submit", (event) => {
  if (!email.validity.valid) {
    displayError();

    event.preventDefault();
  }
  if (!country.validity.valid) {
    displayError();

    event.preventDefault();
  }
});

function displayError() {
  if (email.validity.valueMissing) {
    emailErrorMes.textContent = "Please enter your email address";
  } else if (email.validity.typeMismatch) {
    emailErrorMes.textContent = "Entered value needs to match an email address";
  }
  emailErrorMes.className = "error-Message active";

  //validity for country
  if (document.activeElement == country) {
    if (country.validity.valueMissing) {
      countryerror.textContent = "Please enter your country";
    } else if (country.validity.tooShort) {
      countryerror.textContent = `Country code too short. Code should be at least ${country.minLength} characters.`;
    }
    countryerror.className = "error-Message active";
  }
}

Conclusion

Congrats!!! you have successfully customized your custom messages using Constraint Validation API but we did not cover other properties like patternMismatch, tooLong, rangeOverflow, and rangeUnderflow. Remember that you can do so many things with Constraint Validation API. You could add more strict validation to your form element if you want. Stay tuned for part 2 and more content on how we could apply these properties to other form element DOM interfaces

If you have any inquiries or spot any mistakes, kindly leave some feedback as I am open to reading and learning from you too.