DEV Community: HereWeCode

How to Enable and Disable a Button in JavaScript 🔴🟢

Gaël Thomas — Wed, 12 Jan 2022 15:34:05 +0000

Learn how to enable and disable a button in JavaScript.

While creating user interfaces, you may probably want to make them more dynamic and enable or disable a button programmatically.

Before starting, you need to know that all HTML buttons have a property disabled. Thanks to it, you can enable or disable a button.

<button id-"mainButton">I'm an enabled button!</button>
<button id-"mainButton" disabled>I'm a disabled button!</button>

This article will manipulate the disabled property using a short JavaScript code.

Let me show you how to do that!

1. Create a button in your HTML

The first step is to create a button in your HTML with an id property. It will allow you to select it later in the tutorial.

<button id="mainButton">Can you click me?</button>

You can also create this button programmatically in JavaScript if you prefer!

2. Select your button using JavaScript

The first step in your code is to select the button you want to update. You can do it using the querySelector function, but we will use the getElementById native function because of its simplicity.

It will allow you to target an HTML element based on its id property.

// Select the button element in your HTML code
const button = document.getElementById('mainButton')

3. Disable button in JavaScript

As mentioned previously in this article, all HTML buttons have a disabled property that you can use to disable or enable a button.

By default, a button's disabled property is set to false. It means that by default, a button is active.

If you want to disable a button using JavaScript, you can switch this value to true once you have created and selected the button (steps 1 and 2).

// Disable a button in JavaScript
button.disabled = true // <- Button is disabled

4. Enable button in JavaScript

Now you know how to disable a button, you can enable it by reverting the true value to false.

// Enable a button in JavaScript
button.disabled = false // <- Button is not disabled

Bonus: How to Disable a Button in JavaScript Based on Condition

Let's go further and create some code that disables the button only if its text matches a condition.

Here is what you will need to know:

create a button in HTML
disable a button in JavaScript
write a condition using JavaScript
get a button text in JavaScript (you will use the innerText property, but don't worry you will see how to use it below!)

To do so, you can come back to step 1, 2, and 3, except that we disable the button only if the button text is "Can you click me?".

// Select the button element in your HTML code
const button = document.getElementById('mainButton')

// Disable the selected button in JavaScript based on a condition
// If the button text is 'Can you click me?'
if (button.innerText === 'Can you click me?') {
  button.disabled = true
}

If you execute this code in your browser, the button should be disabled. Now, let's change the condition to another text. For example: button.innerText === "Click here!", refresh your browser, and the button should be enabled.

Full code to enable and disable a button in JS 👇

<html>
  <head>
    <title>Enable and Disable a Button in JavaScript</title>
  </head>

  <body>
    <button id="mainButton">Can you click me?</button>

    <script>
      // Select the button element in your HTML code
      const button = document.getElementById('mainButton')

      // Disable the selected button in JavaScript based on a condition
      // If the button text is 'Can you click me?'
      if (button.innerText === 'Can you click me?') {
        button.disabled = true
      }

      // If you want to enable the button using JavaScript
      // you can switch back the `disabled` property to `false`
      // button.disabled = false
    </script>
  </body>
</html>

➡️ I'm starting to tweet more consistently. If you want to get more tips and resources about web development, developer tips, and my journey as a Full-stack Engineer -> Find me on my Twitter 🐦

How to Create a Button in JavaScript

Gaël Thomas — Tue, 11 Jan 2022 07:09:25 +0000

Learn how to create a button in JavaScript and add it to your HTML page.

As a web developer, you should probably create buttons and add them to your HTML page programmatically.

A typical workflow is to validate some data in your JavaScript code before displaying a button in HTML to your users.

Before starting, let me show you what you will achieve!

<button type="button">Can you click me?</button>

When you click on the button, your JavaScript code will trigger an alert.

Let's dive into that tutorial!

1. Create a button using document `createElement`

To create a button in JavaScript, you must use the createElement function available by default in the Document interface of your web page.

Then, you will configure the button with a "Can you click me?" text.

// Create a button element
const button = document.createElement('button')

// Set the button text to 'Can you click me?'
button.innerText = 'Can you click me?'

As a side note, you can add a lot of properties to a button when creating it. This tutorial only sets the innerText because we don't need the other properties.

2. Add an event listener on your button

The next step is to create an event listener on your button. It will allow you to detect when a user clicks on it.

Whenever the "click" event is detected, the arrow function (second parameter) is launched.

// Attach the "click" event to your button
button.addEventListener('click', () => {
  // When there is a "click"
  // it shows an alert in the browser
  alert('Oh, you clicked me!')
})

3. Add your JS button to your HTML

The last step is to add your button to the HTML body.

After that, you will have the same result as the beginning example!

// Add the button to your HTML <body> tag
document.body.appendChild(button)

Full code to create a button in JS 👇

<html>
  <head>
    <title>Create a Button in JavaScript</title>
  </head>

  <body>
    <!-- Empty <body> HTML (the JavaScript code in <script> will generate a button here)-->

    <script>
      // Create a button element
      const button = document.createElement('button')

      // Set the button text to 'Can you click me?'
      button.innerText = 'Can you click me?'

      button.id = 'mainButton'

      // Attach the "click" event to your button
      button.addEventListener('click', () => {
        // When there is a "click"
        // it shows an alert in the browser
        alert('Oh, you clicked me!')
      })

      document.body.appendChild(button)
    </script>
  </body>
</html>

What's next?

Congrats! 🎉 Now you know how to programmatically create buttons using JavaScript. You can go a bit further by learning how to enable and disable a button in JavaScript.

➡️ I'm starting to tweet more consistently. If you want to get more tips and resources about web development, developer tips, and my journey as a Full-stack Engineer -> Find me on my Twitter 🐦

Get a Random Element from an Array in JavaScript

Gaël Thomas — Tue, 21 Sep 2021 10:35:07 +0000

Let's imagine that you created a giveaway application, and today is the raffle. Unfortunately, you have a list of 10 participants, but you don't know how to select randomly one of them as a winner.

Don't worry! In a few minutes, you will be able to get a random element from an array in JavaScript!

How to Select a Random Element from an Array using the Mathematical functions

Here is the one line instruction to get a a random element from your array: YOUR_ARRAY[Math.floor(Math.random() * YOUR_ARRAY.length)].

Let's break this instruction and understand what it does:

YOUR_ARRAY is your array variable (in that case, the 10 participants email addresses)
YOUR_ARRAY.length is an array property that returns the size of your array
Math.random() is a function that returns a pseudo-random number in the range 0 to less than 1 (inclusive of 0, but not 1)
Math.floor() is a function that returns the largest integer less than or equal to a given number

Note: As Mozilla mentions, Math.random() does not provide cryptographically secure random numbers. It's not recommended to use them for anything related to security. Use the Web Crypto API instead, and more precisely, the window.crypto.getRandomValues() method.

Now you know each instruction, let me show you a step-by-step example:

const participants = [
  'test1@herewecode.io',
  'test2@herewecode.io',
  'test3@herewecode.io',
  'test4@herewecode.io',
  'test5@herewecode.io',
  'test6@herewecode.io',
  'test7@herewecode.io',
  'test8@herewecode.io',
  'test9@herewecode.io',
  'test10@herewecode.io',
]

console.log(participants.length)
// Output: 10

console.log(Math.random())
// Output: random number between 0 or 1 (ex: 0.623242121481016)

console.log(Math.random() * participants.length)
// Output: random number between 0 or 1 multiplied by 10 (ex: 0.623242121481016 * 10 = 1.6905986987355703)

console.log(Math.floor(Math.random() * participants.length))
// Output: it takes the larger integer less than or equal to a given number (ex: Math.floor(1.6905986987355703) = 1)

Note: If you try the code above, the result will always be different because of the Math.random() function.

Here we are! It's time to select the giveaway winner! To do so, we will use what we learned in this article and use it with your use case:

const participants = [
  'test1@herewecode.io',
  'test2@herewecode.io',
  'test3@herewecode.io',
  'test4@herewecode.io',
  'test5@herewecode.io',
  'test6@herewecode.io',
  'test7@herewecode.io',
  'test8@herewecode.io',
  'test9@herewecode.io',
  'test10@herewecode.io',
] // 10 participants

const winner = participants[Math.floor(Math.random() * participants.length)]

console.log(winner)
// Output is random (launch this code to see who is the winner :D)

So! Who won the jackpot? 😉

➡️ I help web developers improve their skills 💻 If you want to get more tips and resources about web programming -> Follow me on Twitter 🐦

4 Ways to Remove Element from an Array in JavaScript

Gaël Thomas — Thu, 16 Sep 2021 10:32:32 +0000

In this article, you will discover how to remove an element from an array in JavaScript.

Remove element from an array by its index

In JavaScript, you can delete an element from an array using its index. To do so, you can use the built-in Splice method.

In the example below, you want to remove the blue color at index 2. In that case, we will use the two first parameters of the Splice method. The first is the start position, while the second is the number of elements to delete (index 2 and 1 element to delete in our case).

const colors = ['red', 'green', 'blue', 'yellow']
colors.splice(2, 1)

console.log(colors)
// Output: ['red', 'green', 'yellow']

You can follow the same example if you want to delete an object from an array using its index. The only difference is that your array will be an array of objects. Since you're using the index to delete an element, it will work whatever the element is.

The Splice method is also helpful if you want to replace an element in a JavaScript array.

Note: Take care when using the Splice method because it mutates the original array.

Remove element from an array by its value

If you want to delete an element from an array in JavaScript, you can do it by using its value.

Let's say that you have an array of colors and you want to delete the green color.
You can use the built-in JavaScript filter method to keep only the values that are not equal to "green".

const colors = ['red', 'green', 'blue', 'yellow']
const filteredColors = colors.filter((color) => color !== 'green')

console.log(filteredColors)
// Output: ['red', 'blue', 'yellow']

Remove object from an array by its value

The filter method works the same way with objects. For example, if you want to delete each person with the name "Bob" in an array, you can do as below.

const persons = [
  {
    id: 1,
    name: 'Roger',
  },
  {
    id: 2,
    name: 'Romane',
  },
  {
    id: 3,
    name: 'Bob',
  },
]

const filteredPersons = persons.filter((person) => person.name !== 'Bob')

console.log(filteredPersons)
// Output:
// [
//   { id: 1, name: 'Roger' },
//   { id: 2, name: 'Romane' }
// ]

If you want to learn more about how to filter an array with JavaScript, here is my other article about it.

Remove the first element from an array

If you only want to delete the first element from an array, you can use the previous ways. But, there is one faster using the array Shift method.

const colors = ['red', 'green', 'blue', 'yellow']

colors.shift()

console.log(colors)
// Output: ['green', 'blue', 'yellow']

You can also use the Shift method remove the first character from a string.

Note: Take care when using the Shift method because it mutates the original array.

Remove the last element from an array

If you only want to delete the first element from an array, there is another way using the array Pop method.

const colors = ['red', 'green', 'blue', 'yellow']

colors.pop()

console.log(colors)
// Output: ['red', 'green', 'blue']

The Pop method is also helpful if you want remove the last character from a string.

Note: Take care when using the Pop method because it mutates the original array.

➡️ I help web developers improve their skills 💻 If you want to get more tips and resources about web programming -> Follow me on Twitter 🐦

How to Filter an Array with JavaScript ☕

Gaël Thomas — Tue, 31 Aug 2021 08:53:04 +0000

A practical tutorial on how to filter arrays in JavaScript using the Array Filter method.

Filter an array using the Array Filter Method

In JavaScript, all arrays have a filter method that you can use in your programs. This built-in method creates a new array based on your instructions.
You will give these instructions as a parameter of the filter method. Each time the filter method iterates on the array, it will call your function.

const colors = ['blue', 'yellow', 'red', 'green', 'yellow', 'red', 'blue']
const yellowArray = colors.filter((color) => color === 'yellow')

console.log(yellowArray)
// Output: ['yellow', 'yellow']

Create your own function to filter an array

If you want to understand better how the filter method works, you can create your own function.
Let's take the example above, but we will replace the second line with our function call.

function filter(arrayToFilter, elementToFilter) {
  const newArray = []

  for (const element of arrayToFilter) {
    if (element === elementToFilter) newArray.push(element)
  }

  return newArray
}

const colors = ['blue', 'yellow', 'red', 'green', 'yellow', 'red', 'blue']
const yellowArray = filter(colors, 'yellow')

console.log(yellowArray)
// Output: ['yellow', 'yellow']

As you can see, if you want only to compare strings or numbers, you can re-create this function pretty fast!

Filter an array of objects using the Array Filter Method

If you want to filter an array of objects, you can still use the built-in method. The only difference will be in the comparison. You will need to select the object property value to compare.

In the example below, we now have books. Each book is an object and has a color property. As in the previous parts, we want to create a new array for yellow books.

Let's see how we can do that!

const books = [
  { name: "You don't know JS", color: 'yellow' },
  { name: 'Eloquent JavaScript', color: 'yellow' },
  { name: 'JavaScript: The Definitive Guide', color: 'white' },
]
const yellowBooksArray = books.filter((book) => book.color === 'yellow')

console.log(yellowBooksArray)
// Output: [
//  { name: "You don't know JS", color: 'yellow' },
//  { name: 'Eloquent JavaScript', color: 'yellow' },
//]

Thanks for reading until here!

I hope you learned from it! 🎉

I'm starting to tweet more consistently! If you want to get more tips and resources about web programming -> Find me on Twitter 🐦

4 Ways to Remove the Last Character from a String in JavaScript 🚮

Gaël Thomas — Sat, 21 Aug 2021 08:14:49 +0000

A short tutorial on how to get and remove the last character of string in JavaScript.

Remove the last character from String using Slice

The most common way to trim the last character is by using the JavaScript slice method. This method can take up to two indexes as parameters and get the string between these two values.

To keep the whole string and remove the last character, you can set the first parameter to 0 and pass the string length - 1 as the second parameter.

const bookName = 'Atomic Habits' // 13 characters (indexes between 0 and 12)
const newBookName = bookName.slice(0, bookName.length - 1) // Between (0 and 12)

console.log(newBookName)
// Output: "Atomic Habit"

As a shortcut, if you pass -1 as the second parameter, it will automatically calculate the string length - 1 for you.

const bookName = 'Atomic Habits' // 13 characters (indexes between 0 and 12)
const newBookName = bookName.slice(0, -1) // Between (0 and 12)

console.log(newBookName)
// Output: "Atomic Habit"

If you want to remove two characters at the end, you can do as follow and so on!

const bookName = 'Atomic Habits' // 13 characters (indexes between 0 and 12)
const newBookName = bookName.slice(0, -2) // Between (0 and 11)

console.log(newBookName)
// Output: "Atomic Habi"

If you want to have more information, you can read the slice documentation.

Remove the last character from String using Substring or SubStr

Substring method

Another way to delete the last character of a string is by using the substring method. This method will extract characters from a string. It takes as a first parameter the index where you want to start, and as a second, the index where you want to stop.

The idea here is to start from 0 and keep all the letters except the last one. To do that, we will use the length of the string - 1 (index of the last position).

const bookName = 'Atomic Habits'
const newBookName = bookName.substring(0, bookName.length - 1)

console.log(newBookName)
// Output: "Atomic Habit"

If you want to have more information, you can read the substring documentation.

Substr method

You can also use the substr method. This method will extract characters from a string. It takes as a first parameter the starting index, and as a second, the number of characters you want to extract.

Here, we want to start from zero and extract all the characters except the last one. We can still use the string length - 1 as a value (from index 0 extracts 10 characters).

const bookName = 'Atomic Habits'
const newBookName = bookName.substr(0, bookName.length - 1)

console.log(newBookName)
// Output: "Atomic Habit"

Note: The only difference between subtring and substr is the extraction process. substring uses two indexes while substr uses one index and the number of characters to extract.

If you want to have more information, you can read the substr documentation.

Remove the last character from String using Pop

If you want to trim the last character of your string, you can also make an array conversion using split. Thanks to that, we will use the built-in array functions to remove the last element. Then, we will convert again to a string.

const bookName = 'Atomic Habits'

// We create an array: ['A', 't', 'o', 'm', 'i', 'c', ' ', 'H', 'a', 'b', 'i', 't', 's']
const bookNameArray = bookName.split(''
// We delete the last element (letter 's')
bookNameArray.pop()

// We convert back the array to a string
const newBookName = bookNameArray.join('')

console.log(newBookName)
// Output: "Atomic Habit"

What's next?

It's over! 🎉 Now you know how to remove the last character from a string in JavaScript, discover my other article about how to remove the first character from a string in JavaScript.

➡️ I'm starting to tweet more consistently. If you want to get more tips and resources about web programming -> Find me on my Twitter 🐦

4 Ways to Validate an Email with JavaScript 📮

Gaël Thomas — Tue, 03 Aug 2021 19:31:01 +0000

In this article, you will discover three ways to do an email validation with JavaScript!

"An old myth says that you are a web development wizard once you create a contact form! 🧙😄" - Unknown

Email validation using Regular Expressions

The most common way to validate an email with JavaScript is to use a regular expression (RegEx). Regular expressions will help you to define rules to validate a string.

If we summarize, an email is a string following this format:

1. First part of an email

uppercase and lowercase letters: a-z and A-Z
digits: 0-9
hyphens: - (not the last or first character)
dots: . (not the last or first character)

Note: Some email providers allows email adresses with these character: ! # $ % & ‘ \* + / = ? ^ \ _ \ { | } ~ " ( ) , : ; < > @ [ \ ]. It will depends if you want to accept these mails, but most website rejects them.

2. Second part of an email

uppercase and lowercase letters: a-z and A-Z
digits: 0-9
hyphens: - (not the last or first character)

3. Third part of an email

uppercase and lowercase letters: a-z and A-Z
digits: 0-9
dots: . (not the last or first character)

Here is an email regex expression:

/^[a-zA-Z0-9][\-_\.\+\!\#\$\%\&\'\*\/\=\?\^\`\{\|]{0,1}([a-zA-Z0-9][\-_\.\+\!\#\$\%\&\'\*\/\=\?\^\`\{\|]{0,1})*[a-zA-Z0-9]@[a-zA-Z0-9][-\.]{0,1}([a-zA-Z][-\.]{0,1})*[a-zA-Z0-9]\.[a-zA-Z0-9]{1,}([\.\-]{0,1}[a-zA-Z]){0,}[a-zA-Z0-9]{0,}$/i

In JavaScript, you can use this function for your email validation.

function isEmailValid(email) {
  const emailRegexp = new RegExp(
    /^[a-zA-Z0-9][\-_\.\+\!\#\$\%\&\'\*\/\=\?\^\`\{\|]{0,1}([a-zA-Z0-9][\-_\.\+\!\#\$\%\&\'\*\/\=\?\^\`\{\|]{0,1})*[a-zA-Z0-9]@[a-zA-Z0-9][-\.]{0,1}([a-zA-Z][-\.]{0,1})*[a-zA-Z0-9]\.[a-zA-Z0-9]{1,}([\.\-]{0,1}[a-zA-Z]){0,}[a-zA-Z0-9]{0,}$/i
  )

  return emailRegexp.test(email)
}

console.log(isEmailValid('helloitsme@herewecode.io')) // true
console.log(isEmailValid('hello-its-me@herewecode.io')) // true
console.log(isEmailValid('hello.its.me@herewecode.io')) // true
console.log(isEmailValid('helloitsme+test@herewecode.io')) // true
console.log(isEmailValid('.helloitsme@herewecode.io')) // false
console.log(isEmailValid('helloitsme.@herewecode.io')) // false
console.log(isEmailValid('@herewecode.io')) // false
console.log(isEmailValid('helloitsmeherewecode.io')) // false
console.log(isEmailValid('helloitsme@herewecode')) // false
console.log(isEmailValid('d@d.o')) // false

Note: As you can imagine, this Regex isn't homemade. I found it on Stack Overflow; then, I updated it to match the email string format explained above.

Email validation using an Email Validator

If you don't want to create a custom function to validate emails, you can use libraries.
When we type: "email validation library javascript" on Google, the first result is the "email validator" library.

Here is an example of how to use it:

const validator = require('email-validator')

console.log(validator.validate('helloitsme@herewecode.io')) // true
console.log(validator.validate('hello-its-me@herewecode.io')) // true
console.log(validator.validate('hello.its.me@herewecode.io')) // true
console.log(validator.validate('helloitsme+test@herewecode.io')) // true
console.log(validator.validate('.helloitsme@herewecode.io')) // false
console.log(validator.validate('helloitsme.@herewecode.io')) // false
console.log(validator.validate('@herewecode.io')) // false
console.log(validator.validate('helloitsmeherewecode.io')) // false
console.log(validator.validate('helloitsme@herewecode')) // false
console.log(validator.validate('d@d.o')) // false

Email validator is one library among others. You can find a lot of them with different features online.

Email validation using HTML5 input validation

The last way to validate an email is to use an HTML5 email input.

<input type="email" id="email" name="email" placeholder="email" />

Here is an example of an email validation using a simple form:

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Validate Email</h1>

    <p>Write your email and we will validate it:</p>

    <form>
      <input type="email" id="email" name="email" placeholder="Email" />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

As you can see, HTML triggers an error when the email address isn't correct. However, if we type, for example: "helloitsme@herewecode" or "-herewecode.io", the form is valid.
This option is a good feature that you should use when you implement a form on your website. It's suitable for a first validation, but don't forget to validate yourself to avoid issues.

Email validation using an API

As a bonus, you can validate emails using APIs. Here are some companies proposing email validation APIs: SendGrid, MailBoxLayer, Abstract API, etc.
Most of these APIs are not free, but they will provide you some advanced features (ex: check if an email exists).

Hey, you did it!

Thanks for reading until the end! I hope you learned from it! 🎉

➡️ I help web developers improve their skills 💻 If you want to get more tips and resources about web programming -> Follow me on Twitter 🐦

What’s the Ternary Operator in Javascript and How to Use it

Gaël Thomas — Sat, 31 Oct 2020 13:18:31 +0000

This short tutorial will help you learn how the ternary operator works in JavaScript and how to use it.

When you are creating conditions in your JavaScript code, most of the time, you're using traditional conditions (if, else, and else if).
But, do you already heard about the ternary operator?

These operators work like traditional, but they are designed for small conditions. Using them allows you to have a more concise code.

I released a video version of this blog post.

The video is a short version of this blog post. If you want to learn more about JavaScript concepts, you can join my Youtube channel.

Ternary Operator Syntax

They appear in your code with the character ? and :.

The best way to understand how ternary operator work is to compare it with a if condition:

// Traditional condition:
if (something) {
  console.log("Yes");
} else {
  console.log("No");
}

// Ternary condition:

something ? console.log("Yes") : console.log("No");
// [condition] ? [if] : [else]

Use-cases

Below, you can find examples to work with the ternary operator.
These examples will simplify your code and help you understand when you should use it.

If/Else conditions

This example is the most recommend use-case. If you have a short condition and if you want to keep your code concise, you can use the ternary operator.

const name = "Julien";

// This:
const color = name === "Julien" ? "blue" : "green";
// if the variable `name` is equals to "Julien" the colour is "blue" otherwise it's "green"

console.log(color);
// Output: "blue"

Note: The main idea of the ternary operator is to build a one-line condition.

Complex conditions

The ternary operator allows you to create complex conditions with condition inner condition. In this article, I want to share what you can do with this operator with you, but I do not recommend using it in this case.

const age = 20;

// This:
age <= 25
  ? age <= 10
    ? console.log("less or equal to 10")
    : console.log("less or equal to 25 but more than 10")
  : console.log("too old");
// Output: "less or equal to 25 but more than 10"

// Is the same than:
if (age < 25) {
  if (age < 10) console.log("less or equal to 10");
  else console.log("less or equal to 25 but more than 10");
} else {
  console.log("too old");
}
// Output: "less or equal to 25 but more than 10"

Note: As you can see, it's hard to read. Suppose your condition is more than one operation and more than one if, else you should avoid using the ternary operator. Otherwise, your code can become unreadable and hard to maintain.

Multiple operations

You can also do multiple operations while using a ternary condition.

let letter = "a";

// This:
letter === "a"
  ? (console.log("letter is a"), console.log("this is cool"))
  : console.log("letter is not a");
// Output:
// "letter is a"
// "this is cool"

// Is the same than:
if (letter === "a") {
  console.log("letter is a");
  console.log("this is cool");
} else {
  console.log("letter is not a");
}
// Output:
// "letter is a"
// "this is cool"

Note: Like the previous example, it's not recommended because it can be hard to read and understand.

Conclusion

Thank you for reading this article on the ternary operator in JavaScript!

If you want more content like this, you can follow me on Twitter, where I tweet about web development, self-improvement, and my journey as a fullstack developer!

What's the Spread Operator in Javascript and How to Use it

Gaël Thomas — Sun, 18 Oct 2020 13:47:53 +0000

In this short tutorial, you will learn Spread Operators in JavaScript and how to use them.

ES6 introduced new features in JavaScript. One of the famous of them is the spread operator.
You can recognize when you see three dots in your code "...".

The spread operator is useful to extract elements from an iterable object.

Use-cases

I listed five common use-cases with the spread operator in JavaScript ES6.
These examples will simplify your code and help you understand why you should use spread operators.

Create a new array / Copy an array

const girlNames = ["Jessica", "Emma", "Amandine"];

// The spread operator takes:
// - "Jessica"
// - "Emma"
// - "Amandine"
// and extracts them
// to a new array
const newGirlNames = [...girlNames];

console.log(newGirlNames);
// Output: ["Jessica", "Emma", "Amandine"]

In the above example, we have an array girlNames, and we create a new array using the spread operator.

The spread operator will go through all the array values ("Jessica", "Emma", "Amandine") and extract them inside of the newGirlNames array.

Create a new object

const user = {
  firstName: "John",
  lastName: "D",
  age: 25,
};

// The spread operator takes
// all the properties of the
// object:
// - firstName
// - lastName
// - age
// and extracts them to a new object.
// Then we overwrite the `firstName` of the
// previous object with a new one
// "John" becomes "Jane"
const newUser = {...user, firstName: "Jane"}

console.log(newUser);
// Output: {
//  firstName: "Jane",
//  lastName: "D",
//  age: 25,
//  jobName: "Developer"
//};

This example will follow the logic of the previous one.
We have an object user, and create a new object using the spread operator.

The spread operator will go through all the object's properties (firstName, lastName, and age) and extract them inside the newUser object.

In this example, I added a new firstName: "Jane" property to the newUser object to show you that you can create a new object and add properties to it.
Because an object has unique keys, we replace the firstName of the user object by the firstName of the newUser ("John" becomes "Jane").

Merge objects

const user = {
  firstName: "John",
  lastName: "D",
  age: 25,
};

const userJob = {
  jobName: "Developer"
}

const completeUser = { ...user, ...userJob };

console.log(completeUser);
// Output: {
//  firstName: "John",
//  lastName: "D",
//  age: 25,
//  jobName: "Developer"
//};

Thanks to the spread operator, merging objects is less complicated.

You can merge objects infinitely. You can try it by yourself! Create a new userFamily object with a wifeName property and merge it to completeUser.

Note: Be careful of using unique keys in your object. If you merge two objects with the same key, only the last merged key will last.

Merge arrays

const girlNames = ["Jessica", "Emma", "Amandine"];
const boyNames = ["John", "Terry", "Alexandre"];

const namesWithSpreadSyntax = [...girlNames, ...boyNames];

console.log(namesWithSpreadSyntax);
// Output: ['Jessica', 'Emma', 'Amandine', 'John', 'Terry', 'Alexandre']

Now you know how to merge objects; you can merge arrays in JavaScript.

String to array

As explained at the beginning of this tutorial, you can spread all iterable objects.
In this last use-case, you will split a string to array in javascript!

const helloWorld = "Hello world!";

const helloArray = [...helloWorld];

console.log(helloArray);
// Output: ["H", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

Using the spread operator, you go through all the characters and extract them in an array.
The final result is an array of characters.

Conclusion

Thank you for reading this article on spread operators in JavaScript!

If you want more content like this, you can follow me on Twitter, where I tweet about web development, self-improvement, and my journey as a fullstack developer!

A Beginner's Guide to Docker — How to Create a PostgreSQL Database in a Few Minutes

Gaël Thomas — Mon, 05 Oct 2020 19:01:44 +0000

If want to create a PostgreSQL database on your computer without losing time, this tutorial for you! Thanks to Docker, we will be able to create a functional database in just a few minutes.

Pre-requirements

If you're not familiar yet with Docker and Docker-Compose, I recommend you to read my two previous articles.

After reading these two articles, you will understand Docker better. Then, you will start using it in your development environments!

Why using Docker-Compose to create your database

PostgreSQL is one of the most used database engines nowadays. If you're here today, it's because you're going to use it in your project!

When I'm working on a new project, I like to have a clean environment. One of the things I dislike the most is installing "big" tools on my computers (for example a database engine).

I like to use containers for some of my tools. I'm not going to lie to you, I'm not always moving all my environment to Docker, but I like to have a part of it in a dedicated one.

One of the good things of doing that is that one command is enough to set up a database from scratch with new parameters. Also, in one command, you can shut down all the environment and free your computer from work.

Now let's create your Docker-Compose for PostgreSQL

The goal of this tutorial is to create a docker-compose containing a PostgreSQL database.
So, you can start your database in only one command whenever you need it.

1. Create files in your project

Consider that you have an existing project. If not, I invite you to create an empty folder on your computer.

In the root of your project, you can create a docker-compose.yml (this file will contain the instructions to create your database).

You should have that kind of folder architecture:

    .
    ├── back/
    ├── docker-compose.yml
    └── front/
    2 directories, 1 file

2. Edit the Docker-Compose file

A bit of theory: in our Docker-Compose file, the goal is to run a PostgreSQL database. To do that, our Docker must contain all the dependencies that we need.

Fortunately, the DockerHub website contains a pre-designed image for PostgreSQL.

All we have to do is to import that image in our docker-compose and configure it.

Note: I provide a docker-compose with comments for understanding purposes.

# A docker-compose must always start by the version tag.
# We use '3' because it's the last version.
version: "3"

# You should know that docker-compose works with services.
# 1 service = 1 container.
# For example, a service maybe, a server, a client, a database...
# We use the keyword 'services' to start to create services.
services:
  # The name of our service is "database"
  # but you can use the name of your choice.
  # Note: This may change the commands you are going to use a little bit.
  database:
    # Official PostgreSQL image from DockerHub (we use the last version)
    image: "postgres:latest"

    # By default, a PostgreSQL database is running on the 5432 port.
    # If we want to access the database from our computer (outside the container),
    # we must share the port with our computer's port.
    # The syntax is [port we want on our machine]:[port we want to retrieve in the container]
    # Note: You are free to change your computer's port,
    # but take into consideration that it will change the way
    # you are connecting to your database.
    ports:
      - 5432:5432

    environment:
      - POSTGRES_USER=username # The PostgreSQL user (useful to connect to the database)
      - POSTGRES_PASSWORD=password # The PostgreSQL password (useful to connect to the database)
      - POSTGRES_DB=default_database # The PostgreSQL default database (automatically created at firt launch)

With this first version of your docker-compose file, you will be able to run your database and connect to it!

2a. Optional configurations

Before running your docker-compose, I share with you some optional configurations.

Replace the `environment` tag by a `.env` file

If you don't want to put your environment variable in your docker-compose file, you can create a .env file at your project root.

Now, you should have that kind of folder architecture:

    .
    ├── .env
    ├── back/
    ├── docker-compose.yml
    └── front/
    2 directories, 2 files

In the .env file, you can type enter the following content.

POSTGRES_USER=username
POSTGRES_PASSWORD=password
POSTGRES_DB=default_database

Note: The variables inside the .env file are the same as in your docker-compose.

Then, you can remove the environment part of your docker-compose.

# REMOVE THESE LINES
environment:
  - POSTGRES_USER=username # The PostgreSQL user (useful to connect to the database)
  - POSTGRES_PASSWORD=password # The PostgreSQL password (useful to connect to the database)
  - POSTGRES_DB=default_database # The PostgreSQL default database (automatically created at first launch)

And replace then with the following lines.

# The `env_file` tag allows us to declare an environment file
env_file:
  - .env # The name of your environment file (the one at the repository root)

Now your docker-compose will use the environment variables defined inside the .env.

Use a volume to persist data on your computer

By default, the database data will be only in the container. If you decide to delete the container, all the data are going to disappear definitively.

To save the database data on your computer, you can add the following section inside of the database service of your docker-compose.

# The `volumes` tag allows us to share a folder with our container.
# Its syntax is as follows: [folder path on our machine]:[folder path to retrieve in the container]
volumes:
  # In this example, we are sharing the folder `db-data` in our root repository, with the default PostgreSQL data path.
  # It means that every time the repository is modifying the data inside
  # of `/var/lib/postgresql/data/`, automatically the change will appear in `db-data`.
  # You don't need to create the `db-data` folder. Docker-Compose will do it for you.
  - ./db-data/:/var/lib/postgresql/data/

Note: This part is not mandatory, it's an optional configuration. It can be useful if you want to delete your container and keeping the data locally. We are not going to use the volumes tag at the end of the tutorial.

3. Build Docker-Compose

Because we're not using a Dockerfile in the docker-compose, we don't need to build the image.

Note: The docker-compose will download the PostgreSQL latest image with the run command.

4. Run Docker-Compose

Your docker-compose is ready! The docker-compose will download the PostgreSQL latest image; then your database will start!
In the root of your project repository, you can type the command below.

$ docker-compose up

There you go, that's it. Now you can use the software/programming language of your choice and connect to your database.

Note: As a reminder, the database is accessible on localhost with the 5432 port. In your environment variables, you can find the username, the password and the default database.

5. Stop Docker-Compose

To avoid background processes on your computer, I recommend stopping the container when you finish working on your project.

In the root of your project, you can do it with the command below.

$ docker-compose down

Once you want to work again on your project, you can use docker-compose up to run your database.

Code is available

If you want to retrieve the complete docker-compose code, I've hosted it on my Github.
Feel free to use it for your projects!

GitHub: Docker Compose with PostgreSQL ready to use

If you want more content like this, you can follow me on Twitter, where I tweet about web development, self-improvement, and my journey as a fullstack developer!

A Step-By-Step Guide to Create your First API with Node and Express

Gaël Thomas — Sat, 26 Sep 2020 14:26:45 +0000

Nowadays, APIs are everywhere. If you are a web developer, you probably heard about it at least one time in your life. At the end of this guide, you will have your first API with Node.Js and Express.Js.

When I started web-programming, I was coding my back-end code at the same place than the front-end one. A few months after, I discovered in my first internship how to create APIs, and it changed my way of programming.

In this step-by-step guide, we will create your first API together! I hope you like books because it's going to be around that topic. Don't worry if it's not the case! You can replace the books by chocolates, wines, anything you want!

Pre-requirements

To create your first API, we will use Node.Js. You need to have good knowledge in JavaScript and basic one with Node.Js and the package manager NPM.

Note: I highly recommend you to upgrade your Node.Js version to the last one before starting this tutorial. It will be useful to code in a modern way (ES6) and avoid potential issues in your code.

I invite you to download the software Postman. We are going to use it later in the tutorial.

Tasklist for the books API

I thought it could be a good idea to create a short TODO list. Thanks to it, you will have a better idea of the main steps. It will also be useful if you want to train yourself after reading this post.

TODO:

Setup the project
Initialize your API
Create your first route
Create a route to get all books
Create a route to add a book
Create a route to delete a book
Create a route to update a book

1. Setup the project

Now that the TODO list is defined, we can set up the project. To do it, you should open your terminal in the folder of your choice and follow the steps below.

# Create your project repository
$ mkdir first-api-with-node-and-express

# Move into your project folder
$ cd first-api-with-node-and-express

# Initialize your Node.Js project with default parameters
$ npm init -y

# Default parameters of `npm init -y` indicate `index.js` as an entry point of the application.
# So we need to create it.
$ touch index.js

Once your project is set up with Node.Js, we need to install Express.js.

Express.Js is the dependency we will use to create the API. It's the most famous framework to do it in JavaScript.

# Install Express.js
$ npm install express

Now, if you open your package.json file, you will see the following lines.

{
  "name": "first-api-with-node-and-express",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  }
}

Your project is almost ready!

Add these lines to your package.json to use latest JavaScript features. You will avoid potential issues in your code.

{
  /* Don't touch to the lines before */
  "dependencies": {
    "express": "^4.17.1"
  },
  /* Add the line below */
  "type": "module"
}

2. Initialize your API

Now your environment is set up, you can open the index.js file and start writing the code below.

// Import Express.js
import express from "express";

// This variable defines the port of your computer where the API will be available
const PORT = 3000;

// This variable instantiate the Express.js library
const app = express();

// The code below starts the API with these parameters:
// 1 - The PORT where your API will be available
// 2 - The callback function (function to call) when your API is ready
app.listen(PORT, () =>
  console.log(`The Books API is running on: http://localhost:${PORT}.`)
);

Now you can run your code by typing node index.js in your terminal.
When the following output appears, your API is ready!

Output:

$ node index.js
The Books API is running on: http://localhost:3000.

3. Create your first route

APIs are working with routes. If you tried to open http://localhost:3000, you notice that an error appear.

Cannot GET /

It happens because we didn't create any route at the moment.
Our API deserves its welcome route! So, we will create a GET route to display a welcome message.

// The code below creates a GET route with these parameters:
// 1 - The route where the code will be executed
// 2 - The function containing the code to execute
app.get("/", (request, response) => {
  // The string we want to display on http://localhost:3000
  response.send("Welcome on the books API! Take a breath and start using it!");
});

Don't forget to restart your script.

Output:

Welcome on the books API! Take a breath and start using it!

4. Create a route to get all books

Now that you created your first route, we will do the same, but this time the route will return a list of books.

A few hints:

Route name: "/books"
Variable: string list
Return: JSON (JSON is the answer format used by almost every APIs)
API Method: GET (because we want to GET all books)

Did you get it? Let's copy-paste the code you created in the step 3.

We will adjust it by doing that:

// Static variable containing your books
let bookList = [
  "Make Time: How to Focus on what Matters Every Day",
  "The Power Of Habit",
];

// Replace the route name
app.get("/books", (request, response) => {
  // The function will return your bookList in a JSON
  // Sample: { allBooks: ["Make Time: How to Focus on what Matters Every Day", "The Power Of Habit"]}
  return response.json({ allBooks: bookList });
});

You can connect to https://localhost:3000/books to get the result!

Output:

{"allBooks":["Make Time: How to Focus on what Matters Every Day","The Power Of
Habit"]}

5. Create a route to add a book

We have a route to get all books, but how can we do if we want to add one book to it?
In the API world, when we want to add date, we are using the POST method.

What we want to do here is the following:

Send a book name to the API
Treat the new book
Send a result (true or false)

What we can do is copy/paste the code of /books route and change it.

// Replace the GET method by POST
// Reminder: POST in the API world is used to ADD a data
app.post("/books", (request, response) => {
  // TODO: Fill the function

  return response.json({ success: false });
});

To fill the function, we need to receive parameters. We will use body-parser a new NPM package to treat them efficiently.

# Install body-parser
$ npm install body-parser

To use this package, you will need to import it, then indicate to Express.js that you're using it.
At the beginning of your file, you can edit your code with the following:

// Import Express.js
import express from "express";
// Import body-parser (to handle parameters more easily)
import bodyParser from "body-parser";

// This variable defines the port of your computer where the API will be available
const PORT = 3000;

// This variable instantiate the Express.js library
const app = express();

// Indicate to Express.js that you're using an additional plugin to treat parameters
app.use(bodyParser.urlencoded({ extended: true }));

We can now go back to your new route!

The first function parameter request will be useful to access the body of the request. You can do the following to get a parameter: request.body.parameterName.

Since we know we need a parameter for the name of the book, I suggest... name!

app.post("/books", (request, response) => {
  // We get the parameter 'name' from the body
  const bookName = request.body.name;

  // We check if the book list includes the new book
  // If it is, we return 'false'
  if (bookList.includes(bookName)) return response.json({ success: false });

  // Otherwise, we add the new book in the list and return 'true'
  bookList.push(bookName);
  return response.json({ success: true });
});

Let's open http://localhost:3000/books in your browser! Oh... do you notice that we get the list of books?

An API is different from a typical website. You can't access it with your browser. When you reach a website with your browser, a GET request is sent (GET http://localhost:3000/books).

Do you remember in the pre-requirements when I ask you to install Postman?
Postman is the most famous tool to interact with APIs. You will see it's working like a browser but for APIs!

How to request with Postman:

When you first open Postman, you should see this dashboard.

You can click on the "+" icon to create your first request.

Then, you can enter the URL to request in the corresponding input (http://localhost:3000/books). It's equivalent to type in a URL in your browser search bar.

Next to the URL, you can GET. It's corresponding to the type of request we are doing. In our case, we want to add a book, so it's a POST request. Click on it, and selected POST.

Almost everything is ready, but we need to add parameters to our request. To do it, you can click on the tab "body", then "x-www-form-urlencoded".

Note: "x-www-form-urlencoded" allows you to send simple text as a parameter.

To add a parameter, you can do it in the table below the URL search bar.
"Key" is your parameter name and "value" it's value.

Note: In our case, we want a parameter name. const bookName = request.body.**name**;

Now that you're ready, you can click on the "Send" button to see the result of your request!

Output:

{
  "success": true
}

Try a second time to it the "Send" button.

Output:

{
  "success": false
}

The output is false as expected because the book already stored in the list.

Note: You can get all books through Postman to check if your new book appears in it. To do it, do the same steps than in "how to request with postman", but choose GET as request mode.

6. Create a book to delete a book

Now you created a GET and a POST method the process will always be the same.
In this part, we will create a DELETE method on /books. We will have one name parameter, and the goal of our function will be to delete the book if it's in the list.

app.delete("/books", (request, response) => {
  // We get the parameter 'name' from the body
  const bookToDelete = request.body.name;

  // We create a new array with all elements different from the book to delete
  bookList = bookList.filter((book) => book !== bookToDelete);

  // We return the new list
  return response.json({ allBooks: bookList });
});

Note: We return the new book list, but you are free to respond something else.

7. Create a route to update a book

The last missing thing in your API is the ability to update a book name. The PUT method allows you to update data in an API.

Example:

CURRENT: I add "Mirocle Morning", but the real name is "Miracle Morning". I should delete "Mirocle Morning", then add "Miracle Morning".
WHAT WE WANT: I add "Mirocle Morning". I update "Mirocle Morning" to "Miracle Morning".

app.put("/books", (request, response) => {
  // We get the parameters 'nameToUpdate' and 'updatedName' from the body
  const bookToUpdate = request.body.nameToUpdate;
  const updatedBook = request.body.updatedName;

  // We search if the book to update is in the list
  const indexOfBookToUpdate = bookList.findIndex(
    (book) => book === bookToUpdate
  );

  // If it is not a book from the list, we return 'false'
  if (indexOfBookToUpdate === -1) return response.json({ success: false });

  // Otherwise, we replace the name and return 'true'
  bookList[indexOfBookToUpdate] = updatedBook;
  return response.json({ success: true });
});

You did it! Your first API is functional and you can get all books and add, update or delete a book!

Code is available

If you want to retrieve the complete code to discover it more simply or execute it, it's available on my GitHub.
Here's the link: https://github.com/gael-thomas/First-API-With-Node-And-Express-example

Things to remember

What a route is?
A route is the complete URL path. For example "http://localhost:3000/books".

What an endpoint is?
An endpoint is the end of your URL path. For example if your full URL is "http://localhost:3000/books", your endpoint is "/books".

APIs can have different request methods, but the most used are:

GET: To get a data
POST: To add a data
DELETE: To delete a data
PUT: To update a data

If you want more content like this, you can follow me on Twitter, where I tweet about web development, self-improvement, and my journey as a fullstack developer!

A Short Introduction to APIs in 6 slides

Gaël Thomas — Sun, 16 Aug 2020 10:52:38 +0000

You will discover:
➡️ How APIs are working
➡️ How to request an API
➡️ How an API answers
➡️ Why is it interesting to have an API
➡️ The API business

An API (Application Programming Interface) is an interface between multiple applications. It means that it allows two applications to communicate.

An API follows the principle of question and answer, exactly as humans do.

Questions, and answer are the same as humans, but it's written in a technical way.

Request: "Give me all the pictures of Bender's profile"
Answer: "Here're all pictures of Bender's profile

Because APIs are not humans, you can't ask questions as you do on Google. To communicate with them, you can use fourth basic requests.

Most of the time, an API is answering your request with a language called JSON.

JSON stands for "JavaScript Object Notation". It's a data representation easy to read by humans and easy to manipulate through code.

When you use an API on your project, you will divide the visual part (front-end) from the server (back-end). It means that your application will be at least divided into two projects.

An API is a valuable part of a project. Some companies build their applications and sell access to their API at the same time.

For example, for a company that makes home deliveries, it's a huge time saver to outsource the geolocation part to Google.

If you want more content like this, you can follow me on Twitter, where I tweet about web development, self-improvement, and my journey as a fullstack developer!

DEV Community: HereWeCode

How to Enable and Disable a Button in JavaScript 🔴🟢

1. Create a button in your HTML

2. Select your button using JavaScript

3. Disable button in JavaScript

4. Enable button in JavaScript

Bonus: How to Disable a Button in JavaScript Based on Condition

Full code to enable and disable a button in JS 👇

How to Create a Button in JavaScript

1. Create a button using document createElement

2. Add an event listener on your button

3. Add your JS button to your HTML

Full code to create a button in JS 👇

Get a Random Element from an Array in JavaScript

How to Select a Random Element from an Array using the Mathematical functions

4 Ways to Remove Element from an Array in JavaScript

Remove element from an array by its index

Remove element from an array by its value

Remove object from an array by its value

Remove the first element from an array

Remove the last element from an array

How to Filter an Array with JavaScript ☕

Filter an array using the Array Filter Method

Create your own function to filter an array

Filter an array of objects using the Array Filter Method

4 Ways to Remove the Last Character from a String in JavaScript 🚮

Remove the last character from String using Slice

Remove the last character from String using Substring or SubStr

Substring method

Substr method

Remove the last character from String using Pop

4 Ways to Validate an Email with JavaScript 📮

Email validation using Regular Expressions

Email validation using an Email Validator

Email validation using HTML5 input validation

Email validation using an API

What’s the Ternary Operator in Javascript and How to Use it

Ternary Operator Syntax

Use-cases

If/Else conditions

Complex conditions

Multiple operations

Conclusion

What's the Spread Operator in Javascript and How to Use it

Use-cases

Create a new array / Copy an array

Create a new object

Merge objects

Merge arrays

String to array

Conclusion

A Beginner's Guide to Docker — How to Create a PostgreSQL Database in a Few Minutes

Pre-requirements

Why using Docker-Compose to create your database

Now let's create your Docker-Compose for PostgreSQL

1. Create files in your project

2. Edit the Docker-Compose file

2a. Optional configurations

Replace the environment tag by a .env file

Use a volume to persist data on your computer

3. Build Docker-Compose

4. Run Docker-Compose

5. Stop Docker-Compose

Code is available

A Step-By-Step Guide to Create your First API with Node and Express

Pre-requirements

Tasklist for the books API

1. Setup the project

2. Initialize your API

3. Create your first route

4. Create a route to get all books

5. Create a route to add a book

6. Create a book to delete a book

7. Create a route to update a book

Code is available

Things to remember

A Short Introduction to APIs in 6 slides

1. Create a button using document `createElement`

Replace the `environment` tag by a `.env` file