Forem: Kebean

Driving Business Success: Unleashing the Power of Data Integration

Kebean — Tue, 11 Apr 2023 00:59:02 +0000

In today’s digital world, data has become an essential asset for Businesses. Data Integration drives many business successes because businesses are constantly collecting and generating vast amounts of data from different sources such as sales transactions, social media activities, and customer interactions among many others.

This is where data integration helps in business success because it helps businesses have access to all of their information in one place, provides them with meaningful insights, and informs strategic decision-making, which all of these leads to business success.

What is Data Integration

Data Integration is a technical process of combining data from different sources into one common data environment and making it easy to have a single and consistent view of data where analysis and reporting can be done easily and in one place.

Check out how {https://airbyte.com/} can help your business Centralize all its data in minutes.

Before the emergence of data integration, businesses would purchase multiple business application packages each with its own database management system, hence due to the struggle they faced to draw together all these databases, different applications couldn’t work together seamlessly and this resulted in many business failures in one way or another.

To address this problem, businesses adopted the use of data integration techniques and one of the popular ones was Extract, Transform and Load(ETL) which is a software that pulls information out of one database and loads it into another. With the adoption of data integration techniques, developers could focus on developing new features instead of handling data which may lead to cost savings and better resource utilization and improved productivity.

Why Data Integration is so Crucial for Business Success

Since Businesses today rely on various amounts of data from different sources, data integration is essential so that those data can communicate seamlessly and in a consistent way, Here are reasons why data integration is crucial for companies' success:

Improved Customer Experience: By integrating data from different customer touchpoints, such as marketing, customer service and sales, companies can gain an extended view of their customers which can lead to serving them better and understanding them better. This integrated customer data can provide insights on customer behavior, needs and preferences, enabling targeted interactions.
For instance, an e-commerce company can use integrated data from its Customer Relationship Management(CRM) system, online store and social media to gain a complete view of customer interactions. This gained integrated data can be used by the company to personalize recommendations, and promotions based on customer preferences and browsing behavior which all of them lead to an enhanced customer experience and increased loyalty.
Improves Company’s employee Productivity: Before the rising of data integration, employees would waste valuable time looking for data in different systems. With data integration, millions of dollars in lost productivity were able to be recovered by centralizing the company’s most important data in minutes.
Improved Operational Efficiency: By integrating data from different business units, systems, and departments, companies can ensure that data is consistent, accurate, and up-to-date across the organization. This improves operational efficiency for the company, helps reduce data duplication, eliminates manual data entry, and helps minimize errors resulting in improved productivity and reduced operational costs for the company.
For instance, a manufacturing company can integrate data from quality control, production systems and supply chain to gain a holistic view of the entire production process. This can help the company to optimize workflows and improve overall production efficiency which may lead to cost savings and better resource utilization.
Improved Decision-Making: Data integration enables businesses to access a complete view of their data, regardless of their source or format. This can help businesses make better decisions that help drive their purpose at all levels of the organization.
For instance, a retail company can integrate data from inventory levels, customer feedback, sales transactions, and social media mentions to gain an understanding of inventory trends, customer preferences, and market demand. This information can then inform decision pricing, inventory management, marketing campaigns and overall business strategies.

Challenges Businesses Face When Working With Data From Different Sources

Working with data from various sources can raise several challenges for companies. Some of them are:

Data Integration Complexity: Integrating data from various sources to work together seamlessly can be complex, time-consuming and labour-intensive, especially when dealing with large volumes of data. Businesses may struggle to extract data from various sources, transform them into a unified format and load them into a data warehouse.
Data Privacy: Data from different sources may contain confidential information such as financial data, and customer data, so ensuring data security can be a challenge as data may need to be protected from unauthorized access or data leaks. Compliance with data protection regulations such as GDPR(General Data Protection Regulation) adds further complexity and requires businesses to implement robust data security measures.
Data Integration Costs: Companies may face challenges in managing the costs associated with data integration, especially when dealing with large volumes of data because implementing data integration solutions and managing them coming from various sources involves costs, including technology investment, data storage, data processing and data management.
Data Flexibility and Scalability: Data Integration needs changes, especially because companies grow, and adopt new technologies and sources. As companies need to adapt to changing data volume, requirements and formats, ensuring flexibility and scalability in data integration solutions can be a challenge for them. Also, companies may face challenges in selecting and implementing data integration solutions that can scale and adapt to changing business needs.

As you can see, companies face various challenges when working with data from various sources. Overcoming these challenges requires technical expertise, careful planning, and robust data management practices.

Conclusion

In conclusion, data integration is not just a luxury for companies but a necessity for striving toward success in today’s data-driven world. In today’s competitive business environment, those who can effectively integrate and leverage data from different sources will have a strategic advantage over others who don’t. So, as technology continues to advance and data continues to grow exponentially, businesses that invest in robust data integration solutions will be well-positioned for success. So, don’t wait any longer, start integrating your business’s data today with the best tool such as {https://airbyte.com/} (The best Open-Source Data Integration platform/ELT tool) and unlock the full potential of your business.

Javascript async/await

Kebean — Wed, 05 Apr 2023 00:39:25 +0000

In this article, I will continue to discuss asynchronous code and more specifically how to use async/await.

Before going any further, if there is one thing that I want you to take away from this article is this: At the end of the day, async/await allows us to write async code in a synchronous fashion instead of endlessly nesting callbacks.

main points

1.When we use async/await, await will always waits till the promise is settled.

2.We can only use await when we have async in front of the function, this is important because most of the time once people learn async/await especially beginners, they pretty much start using await all over their code and you can not do that. You can only use await if the function that you have set up is actually async.

3.async function always returns a promise.

N.B: Throughout this article, I'll be using the arrow function but if you prefer using the traditional function there is no law against you, just go for it.

General example

//Showcasing how async function will always return a promise

const example = async ()=> {
    return "Hello world"
}
console.log(example()) // it will show a promise in the console.

output:

As you can see, it is a promise and it is right away fulfilled. Just keep in mind that async will always and always return a promise.

//showcasing how await works:

const example = async () =>{
    return "Hello world";
}
const someFunc = async () =>{
    const result = await example();
    console.log(result);
}
someFunc();

output:

From here, await will need to wait until the promise from the example function is settled, then you can get the result in the console. It is very important since you don't have to use .then() chains instead you'll wait for the promise to be resolved and get the result.

Real-world example:

Usually, you will typically request resources over the wire, meaning from the database, API, or whatever but here I'm gonna be using a simple example where I have a user array(containing students) and classes array (containing subjects) students are taking.

const users = [ // array of objects containing stundets and their ID
    {id: 1, name:"kebean"},
    {id: 2, name:"Chico"},
    {id:3, name:"Maelle"},
]
const classes = [ // array of objects containing student ID and classes they are taking
    {studentId:1, classesTaken:["OOP", "C", ".Net"]}, //kebean take this class because the ID matches 
    {studentId:2, classesTaken:["Math", "History"]}, //Chico take this class because the ID mathches
    {studentId:3, classesTaken:["Physics", "Chemistry", "Geography"]} //Maelle take this class because the ID mathches
]

const getUser = (name) =>{
    return new Promise((resolve, reject) =>{
        const user = users.find((user) => user.name ===name);
        if (user){
            return resolve(user);
        }else{
            reject(`No such user with name: ${name}`);
        }
    })
}

const getClasses = studentId => {
    return new Promise((resolve, reject) =>{
        const userClasses = classes.find((user) => user.studentId === studentId)
        if(userClasses){
            return resolve(userClasses.classesTaken)
        }else{
            reject("Wrong ID")
        }
    })
}

N.B: You need to understand that the above functions happen in sequence, only once you get the student, only then you can access the subject they are studying

Since you are familiar with the above two functions, I want to showcase how you can get the data using the typical .then() approach and later I will showcase how you can achieve the same thing while using async/await which is more effective and readable at least in my point of view.

typical .then() approach

getUser("kebean") // returns a promise
.then((user) => console.log(user)) //you will have access to data you pass into resolve()
.catch((error) => console.log(error)) //when there is errors, you will catch them here

The logic is the following: you pass in the name if the name matches, you will of course get the student and when the name doesn't match, you will get the error message.
output:

when the user doesn't exist:

getUser("kebeans") 
.then((user) => console.log(user)) 
.catch((error) => console.log(error))

As you can see, the error message will be displayed
output:

getUser("kebean") 
.then((user) => getClasses(user.id)) //invoking getClasses and pass in the user ID
.then((classes) => console.log(classes)) //the getClasses function above, returns classes that match to the user ID or student ID you passed in
.catch((error) => console.log(error))

output:

The problem with the above setup is once you have multiple async operations, you will have to start chaining these .then() which is not readable and long to write. This is where async/await truly shines because you can make the above code way more readable by refactoring the code to use async/await.

async/await approach

const getStudent = async () =>{
    const user = await getUser("kebean") 
    console.log(user)
}
getStudent()

output:

From the above example, you can see that it's possible to access the student using async/await. Let's see also how to access them classes a student can actually take.

const getStudent = async () =>{
    const user = await getUser("kebean");
    if(user){
        const classes = await getClasses(user.id);
        console.log(classes)
    }
}
getStudent()

output:

BOOM!! you can get the classes kebean is taking as well.

Just take a look at the code in both approaches, I mean even if the code is pretty much doing the same thing, you can clearly see that the approach of using async/await is way more readable and short.

How to Handle errors when using async/await

As you can see, the error can't be handled as expected while using async/await. take a look at the following code:

const getStudent = async () =>{
    const user = await getUser("kebeans");
    if(user){
        const classes = await getClasses(user.id);
        console.log(classes)
    }
}
getStudent()

output:

As you can see, the student(user) "kebeans" (with "s" at the end) doesn't exist and instead of getting the error message defined in reject(), you are getting messy in a console and what you need is to handle that gracefully. You can do that by setting up try and catch block like this:

const getStudent = async () =>{
    try {
        const user = await getUser("kebeans");
        if(user){
            const classes = await getClasses(user.id);
            console.log(classes)
        }
    } catch (error) {
        console.log(error)
    }
}
getStudent()

output:

conclusion

Hopefully, now you can clearly see why async/await has become pretty much the go-to when we need to handle asynchronous tasks.

It improves readability by allowing us to write asynchronous code in a more synchronous style, making it easier to read and understand. This can also be particularly helpful for developers who are new to asynchronous programming.

Thanks for reading and happy coding!!

Kebean.

JavaScript-Promises

Kebean — Tue, 21 Mar 2023 11:47:11 +0000

A promise is an object that returns a value which you hope to receive in the future but not right away or immediately. It provides a way to handle asynchronous operations such as fetching data from an API.

For example, Imagine you are at your near town restaurant and you order your favourite meal. Once you are done with your payment, most likely you don’t get the meal right away instead, you get a receipt which is a promise by the restaurant that once the meal is ready, you will get it. After 15 minutes or whatever amount of minutes are up and the meal is ready, you show the receipt and you get your meal. In the bizarre world, you also might be rejected maybe because they’ve just realized they have no more of your ordered meal. I know it sounds unrealistic but for the sake of example just go with it. The whole point of this example is that the receipt is a promise that you’ll get the meal eventually or of course if they can not provide it, they have to reject it and in a non-JavaScript world, you will get a refund.

In the JavaScript world, the common example of using promises is going to be “HTTP request” where you set up the request and of course, you don’t get a response right away because it is an asynchronous operation. Only when the server responds, do you either get the data that you’re looking for or you get an error because maybe the URL is wrong..

You can achieve the same using callbacks but the primary purpose of using promises over callback functions is to avoid callback hell. Also, promise allows us to write sync code in a synchronous fashion.

Since we can have async/await in JavaScript, a common practice is to use promises with async/await because async/await provide a cleaner syntax.

          **Setup for creating a promise**

As far as the setup, you need to create a constructor where you pass in the callback function with two arguments. Example:

const promise = new Promise((resolve, reject)=>{
})

The common practice is to use resolve and reject arguments but you can call them anything else and that is going to be okay.
The resolve and reject arguments are functions themselves and when it comes to promises, promises can be in either of 3 states:
pending(initial state where the promise is neither fulfilled nor rejected),
rejected(the operation failed, and the promise knows why it’s failed) or
fulfilled(the operation completed successfully, and the promise has a resulting value).

Once a promise goes from pending to being rejected, you can’t go back which means it is a one-way street. Initially will always be pending waiting for that result and then you have either of these two choices: either it’s going to be fulfilled or it’s going to be rejected. Here is an example to showcase that you will always start with the pending state:

const promise = new Promise((resolve, reject)=>{
})
console.log(promise)

From the above screenshot, the promiseResult is undefined because we haven’t done anything in the promise and as far as the state, it is pending which is always the default setup.

Since resolve and reject are functions themselves, you can invoke them like this:

const promise = new Promise((resolve, reject)=>{
     resolve()
})
console.log(promise)

As you can see above, the promiseState now is fulfilled. In the resolve() callback function, you can pass in some kind of value like imagine a scenario where you are pinging the server trying to look for data and if you want to pass this data to your application, you will have to pass it through resolve(). Long story short, you can pass data in resolve() but nothing stops you from just invoking resolve() function without any data.
If you want to pass the data in resolve(), you simply pass it in the function as an argument. Example:

const promise = new Promise((resolve, reject)=>{
     resolve("Hello good people")
})
console.log(promise)

The PromiseStatus is now “Hello good people” because that’s what passed as the data.

The same goes for reject where it can be invoked with or without data. An example where it shows some rejected message:

const promise = new Promise((resolve, reject)=>{
     // resolve("Hello good people");
     reject ("There was an error in your application")
})
console.log(promise);

How to access values from callback functions(resolve, reject) in promise
You can’t do promise.value because you can’t say to the promise object “Hey, get me the value” This can’t work but to access the value, you’ll need to use other methods and those methods are .then()[this is for resolve()] and .catch()[this is for reject()].
Here is how they work
.then()

const promise = new Promise((resolve, reject)=>{
     resolve("Hello good people");
})
console.log(promise)
promise.then(data=> console.log(data))

Boom! Now you got the value in the console.
.catch()

const promise = new Promise((resolve, reject)=>{
     // resolve("Hello good people");
     reject("There was an error in your application")
})
console.log(promise)
promise
.then(data=> console.log(data))
.catch((err)=> console.log(err))

Boom! You got the value in the console as well.

You may be asking yourself well, what will be the usecase for using these arguments?
The idea is that there is going to be some kind of condition and based on that condition you either get the data, meaning you will successful resolve the promise or it’s going to be rejected.It’s as simple as that like a scenario where you’re pinging the server and if you get the data back, you go with resolve() and pass in that data to your application using .then(). Otherwise if there is an error , you reject it ofcourse.

example where we setup a promise based up on a condition

const value = 2;
const promise = new Promise((resolve, reject) => {4
    const random = Math.floor(Math.random() * 3);
    console.log(random)
    if(random == value){
         resolve("You guessed the correct number");
    }else{
         reject("Wrong number ");
    }
});
console.log(promise);
promise.then(data=> console.log(data)
).catch((err)=> console.log(err))

From the console, since the random number didn’t match the value, the promise was not fulfilled hence throw the error: “Wrong number” else if random number match the value, then the promise will be fulfilled:

Boom! Now since the value match random number, the promise is fulfilled and the message in resolve() function from the console is displayed.

                   **Conclusion**

By concluding, you can say that promise make it easier to write and manage asynchronous code in JavaScript. They provide a more elegant and structured approach to handling asynchronous operations, making the code more maintainable, readable, and more error-resistant.
Happy coding!! and thanks for reading.

Calculator: Learn How to build a modern Calculator using JavaScript

Kebean — Mon, 28 Mar 2022 15:13:22 +0000

You've probably heard that to get better at anything you need to practice more. That's true because, through deliberate practice, you develop muscle memory. That's where projects come in hand. Projects are the best way to learn JavaScript, and a calculator is one of the best projects to choose. A calculator covers all the complex interactions with UI and JavaScript.

In this article I'll walk you through the steps it takes to build a completely modern Calculator using plain vanilla JavaScript best practices and modern ES6 practices

The Calculator will be able to:

Add, multiply, divide, and subtract operations
Delete operations
Clear All operations
Use decimal numbers
Chain operations

Let's get started

Project Setup: How to set up your project

follow the following steps to setup your project:

Create a new folder named "project" and open your code editor (e.g: visual studio code)
create index.html, styles.css, and index.js
link the files inside the HTML

HTML

Create a div with a class .calculator which will wrap everything inside the body tag.

You will also need to create another div with a class .output with two nested div inside it with classes .previous-operand and current-operand respectively to show the previous operand and the current operand in the Calculator screen
like this:



<div class="calculator">
  <div class = "output">
     <div class="previous-operand"></div>
     <div class="current-operand"></div>
  </div>
</div>

Next, create all the buttons on the calculator from "AC" to "=" button

like this:



<div class="calculator">
   <div class="output">
     <div class="previous-operand"></div>
     <div class="current-operand"></div>
   </div>
   <button class="span-two">AC</button>
   <button>DEL</button>
   <button>÷</button>
   <button>1</button>
   <button>2</button>
   <button>3</button>
   <button>*</button>
   <button>4</button>
   <button>5</button>
   <button>6</button>
   <button>+</button>
   <button>7</button>
   <button>8</button>
   <button>9</button>
   <button>-</button>
   <button>.</button>
   <button>0</button>
   <button class="span-two">=</button>
</div>

Ps: Remember, you have to include the class .span-two on both "AC" and "=" buttons to make them span two columns later on.

Note, you may have probably struggled to get the symbol "+". If so, you can google the symbol, copy and paste it.

So far so good.

That's all for the HTML Part, let's jump to styles.css and start to style the Calculator to make it look nice.

CSS

Here, you're going to add CSS to style the Calculator. First, let's remove the default browser styles by doing the following:



/** changing default styles of the browser **/
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

Next, you need to change the style of the body element:



body{
   font-weight:normal;
   font-family:Gotham Rounded, sans-serif;
   background: linear-gradient(to right, rgb(0, 0, 0),rgb(0, 110, 255));
}

Next, you need to style the screen by selecting the .calculator (wrapping all different buttons and elements) class and style it

like this:



.calculator{
    display:grid;
    align-content:center;
    justify-content:center;
}

Oops!! seems like it's not centred vertically!! you can fix that by giving the .calculator class the full height which means it's going to fill 100% of the height all the time:



.calculator{
    /** previously written code **/
   min-height: 100vh;
}

Alright!! With that fixed, let's move on with styling the .calculator class. To make the buttons look like buttons of a calculator, you'll need to use in this case grid-template-rows and grid-template-columns. so, we are making the columns repeating 4 times while giving them 100px wide. rows are repeating 5 times while giving them 100px wide and giving them an initial minimum value of 120px tall but maximum of it auto(essentially says; as large as it needs to be to fit everything)

like this:



.calculator{
    display:grid;
    align-content:center;
    justify-content:center;
    min-height:100vh;
    grid-template-rows:minmax(120px, auto) repeat(5,100px);
    grid-template-columns:repeat(4,100px);
}

Then, to properly position the buttons, you need to select them and add these styles:



.calculator-grid > button {
    outline: none;
    background-color:rgba(255, 255, 255, .75);
    font-size: 2rem;
    border: 1px solid #fff;
    cursor: pointer;
}

Adding the hover effect:



.calculator-grid > button:hover {
       /** previously written code **/
    background-color:rgba(255, 255, 255, .9)
}

Now, let's style that .span-two class to make the "AC" and "=" buttons span two columns :



.span-two{
    grid-column: span 2;
}

So far so good, but as you can see in your browser, the .output section is not properly styled.

To fix that, you need to style the actual .output as a whole using this trick :



.output{
    background-color: rgba(0, 0, 0, .75);
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    flex-direction: column;
    padding: 9px;
    word-wrap: break-word;
    word-break: break-all;
}

The last thing about CSS is to style the operand which are .previous-operand and .current-operand. you can do that

like this:



.output .previous-operand {
    font-size : 1.5rem;
    color: rgba(255, 255, 255, .75);
}



.output .current-operand{
    font-size: 2.5rem;
    color: #fff;
}

Congrats!! you're done with CSS. Please take a break and come back for the fun part which is JavaScript.

JavaScript

Alright!! let's get started with the most fun part which is coding up the JavaScript. to get started, first you need to select all the different numbers, operands and all the buttons(Clear button, delete button, etc...). To make that easier, you'll need to add attributes in HTML to be easier to select. this is important because you don't need styling classes with javaScript. the code snippets to do it is like this:



<!-- Modifying the HTML by adding attributes to be able to select by. -->


<div class="calculator">
   <div class="output">
     <div data-previous-operand class="previous-operand"></div>
     <div data-current-operand class="current-operand"></div>
   </div>
   <button data-all-clear class="span-two">AC</button>
   <button data-delete>DEL</button>
   <button data-operation>÷</button>
   <button data-number>1</button>
   <button data-number>2</button>
   <button data-number>3</button>
   <button data-operation>*</button>
   <button data-number>4</button>
   <button data-number>5</button>
   <button data-number>6</button>
   <button data-operation>+</button>
   <button data-number>7</button>
   <button data-number>8</button>
   <button data-number>9</button>
   <button data-operation>-</button>
   <button data-number>.</button>
   <button data-number>0</button>
   <button data-equals class="span-two">=</button>
</div>

Here you go. Since you have added the attributes to select the HTML elements, then you can use JavaSript to select them

like this:



const currentOperandElement = document.querySelector('[data-current-operand]');
const previousOperandElement = document.querySelector('[data-previous-operand]');
const numberButtons = document.querySelectorAll('[data-number]');
const operationButtons = document.querySelectorAll('[data-operation]');
const equalsButton = document.querySelector('[data-equals]');
const deleteButton = document.querySelector('[data-delete]');
const allClearButton = document.querySelector('[data-all-clear]');

Now that everything is selected, let's see how to use JavaScript to make the calculator works like the normal calculator. The first thing you need to think about is how to store all the information of what's number typed by the user. the easiest way to do that is to use a Class just

like this:



class Calculator {
  constructor(previousOperandElement, currentOperandElement) {
    this.previousOperandElement = previousOperand,
    this.currentOperandElement = currentOperand
  }

delete() {

  } 

appendNumber(number) {

  }

clear() {

  }

chooseOperation(operation) {

  }

compute() {

  }

updateDisplay() {

  }

}

So, what's going on so far? Above we have created a Calculator *class* which holds the constructor. This constructor will take all the inputs the user will type as well as all the functions for our calculator. these functions will be:

delete(): This function will remove a single number.
append number(): This function will add the number every time the user select that number.
Clear(): This function will clear up all different variables.
chooseOperation(): This function will let the user select which operation to use and make it function effectively.
compute(): This function will take all the values inside the calculator and compute a single value for what we need to display on the screen.
updateDisplay(): This function will update the values inside the output.

Next, let's think about the different properties the calculator needs to store. First, you need to know the current operand the user is working on, previousOperand the user entered, and the operation they selected if any. So you need to be able to remove all these values, and that can be done inside a clear function

like this:



class Calculator {
  constructor(previousOperandElement, currentOperandElement) {
    this.previousOperandElement = previousOperand,
    this.currentOperandElement = currentOperand
    this.clear()
  }

clear() {
    this.previousOperand = "";
    this.currentOperand = "";
    this.operation = undefined;
  } 

}

Note: Remember, as soon as we create our Calculator, we need to call clear() function as shown above. This is because we need to clear all of the inputs to set them to the default values as soon as we create a new Calculator.

Now that we know all the functions the Calculator will use, let's make all the variables previously created, operate on the Calculator Object like this :



const calculator = new Calculator(previousOperandElement, currentOperandElement);

Next, let's make the numberButtons function

like this:



numberButtons.forEach(button => {
  button.addEventListener('click', () => {
    calculator.appendNumber(button.innerText)
    calculator.updateDisplay()
  })
})

Now, you'll need to write the appendNumber() and updateDisplay() functions to make them works

like this:



class Calculator {
  /** previously written code **/

    appendNumber(number){
     if (number === "." && this.currentOperand.includes(".")) return
     this.currentOperand = this.currentOperand.toString() + number.toString()
   }
    updateDisplay(){
     this.currentOperandElement.innerText = this.currentOperand;
     this.previousOperandElement.innerText = this.previousOperand;
   }

}

Next, let's make the operationButtons function as well :



operationButtons.forEach(button => {
  button.addEventListener('click', () => {
    calculator.chooseOperation(button.innerText)
    calculator.updateDisplay()
  })
})

Now, you'll need to write the choose operation function to make it work

like this:



class Calculator {

    /** previously written code **/

    chooseOperation(operation) {
      if (this.currentOperand === "") return
      if(this.previousOperand != "") {
        this.compute()
      }
      this.operation = operation;
      this.previousOperand = this.currentOperand;
      this.currentOperand = "";
  }

}

Next, let's make the equalsButton function also :



equalsButton.addEventListener('click', button => {
  calculator.compute()
  calculator.updateDisplay()
})

Now, let's work on implementing the compute() function :



class Calculator {

    /** previously written code **/

    compute() {
    let computation
    const prev = parseFloat(this.previousOperand)
    const current = parseFloat(this.currentOperand)
    if (isNaN(prev) || isNaN(current)) return
    switch (this.operation) {
      case '+':
        computation = prev + current
        break;
      case '-':
        computation = prev - current
        break;
      case '*':
        computation = prev * current
        break;
      case '÷':
        computation = prev / current
        break;
      default:
        return
    }
    this.currentOperand = computation;
    this.operation = undefined;
    this.previousOperand = '';
  }

}

Next, let's make the allClearButton function as well :



allClearButton.addEventListener('click', button => {
  calculator.clear()
  calculator.updateDisplay()
})

Next, let's make the deleteButton function also :



deleteButton.addEventListener('click', button => {
  calculator.delete()
  calculator.updateDisplay()
})

Now, let's work on implementing the delete() function, but here you'll need to use the slice method to get the very last value from the string and cut it off

like this:



class Calculator {

  /** previously written code **/

    delete() {
    this.currentOperand = this.currentOperand.toString().slice(0, -1);
  }
}

Congrats!! Now, the Calculator is entirely functional at a base value but the actual display of our Calculator is not that nice!! we don't have commas between numbers, the operands are not shown up in the previous operand, so it needs to be fixed. Just a couple of lines of code. First thing we need to modify the update display() function and create getDisplayNumber() function to delimit numbers with commas

like this:



/** previously written code here **/
updateDisplay() {
    this.currentOperandElement.innerText =
      this.getDisplayNumber(this.currentOperand)
    if (this.operation != null) {
      this.previousOperandElement.innerText =
        `${this.getDisplayNumber(this.previousOperand)} ${this.operation}`
    } else {
      this.previousOperandElement.innerText = ''
    }
  }

/** getDisplayNumber acting like a helper function to delimit numbers with commas **/
getDisplayNumber(number) {
    const stringNumber = number.toString() // for splitting on decimal characters inside it.
    const integerDigits = parseFloat(stringNumber.split('.')[0]) // turning a string to an array.
    const decimalDigits = stringNumber.split('.')[1] // getting second portion out of the array, which is number after decimal place.
    let integerDisplay
    if (isNaN(integerDigits)) {
      integerDisplay = ''
    } else {
      integerDisplay = integerDigits.toLocaleString('en', { maximumFractionDigits: 0 }) // "en" in the localeString means : english.
    }
    if (decimalDigits != null) {
      return `${integerDisplay}.${decimalDigits}`
    } else {
      return integerDisplay
    }
  }

Here is what the final version of the project looks like:

Conclusion

Now that you've made it to the end of this project, you have a completely functioning modern JavaScript Calculator working in your browser. if you found this article helpful, please give it a thumbs up. Happy Coding!!

Form Validation: Learn JavaScript Form Validation

Kebean — Sun, 20 Mar 2022 23:50:53 +0000

JavaScript provides a way to validate form's data on the client's computer before sending it to the web server. The purpose of data validation is to ensure correct user input.
In this article, you are going to learn how to do form validation in javaScript. you'll also learn how to add media queries to build out the entire project and keep it as a portfolio.

Project Setup: How to set up your project

Just follow the following steps to setup your project:

Create a new folder named "project" and open your code editor (e.g: visual studio code)
create index.html, style.css, and index.js
link the files inside the HTML

Let's get started

Here is what the project will cover:

Writing HTML
Adding the Css
Adding Media Queries for responsiveness

HTML Part

Create a class .container inside the body tag and include the form tag which will have an id of #form

<div class="container">
    <form id="form"></form>
</div>

next, create 3 div's inside the form tag like this:

<form id="form">
   <div></div>
   <div></div>
   <div></div>
</form>

then, inside those 3 div's, create 3 inputs(Username, Email, and Password) along with icons and labels.

ps: Remember, you'll need to create an .error class name. this is going to be useful to display an error message using javaScript

Username Input

<!-- username input -->
<div>
   <label for="username"> User name </label>
   <i class="fas fa-user"></i>
   <input type="text" name="username" id="username" placeholder="Kebean"/>
   <i class="fas fa-exclamation-circle failure-icon"></i>
   <i class="fas fa-check-circle success-icon"></i>
   <div class="error"></div>
</div>

Email Input

<!-- Email Input -->

<div>
   <label for="email">Email</label>
   <i class="fa fa-envelope"></i>
   <input type="email" name="email" id="email" placeholder="kebean@gmail.com"/>
   <i class="fas fa-exclamation-circle failure-icon"></i>
   <i class="far fa-check-circle success-icon"></i>
   <div class="error"></div>
</div>

Password Input

<!-- Password Input -->

<div>
   <label for="password"> Password </label>
   <i class="fas fa-lock"></i>
   <input type="password" name="password" id="password" placeholder="Enter the password here"/>
   <i class="fas fa-exclamation-circle failure-icon"></i>
   <i class="far fa-check-circle success-icon"></i>
   <div class="error"></div>
</div>

Add Submit Button

Add this button before the form closing tag like this:

<form>
    <!previously written code here -->
   <button id="submit" type="submit">Submit</button>
</form>

Congrats!! you've completed the HTML part.

2.CSS Part

Here, you're going to add CSS to style the form. First, let's remove the default browser styles by doing the following:

/** changing default styles of the browser **/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family: sans-serif;
  }

Here, you'll need to change container and text styles like this:

.container {
    display: flex;
    flex-direction: row;
  }
 .text {
    text-align: center;
    color: #fff;
    font-size: 18px;
  }

Now, apply these styles for the form tag:

form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 45%;
    box-shadow: 2px 2px 3px rgb(0, 4, 255);
    padding: 50px;
  }

Next, apply these for changing the title text:

.title {
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 20px;
  }

Now, add a margin to the bottom of your label text like this:

label {
    display: block;
    margin-bottom: 5px;
  }

And to change the appearance of the input tag, add these styles:

form div input{
    width:100%;
    height:40px;
    border-radius:8px;
    outline:none;
    border:2px solid rgb(0, 4, 255);
    padding:0 30px;
    box-shadow:2px 2px 4px rgb(0, 4, 255);
}

To change color changing effects, add these styles:

form div {
    position: relative;
    margin-bottom: 15px;
  }

input:focus {
    border: 2px solid rgb(0, 4, 255);
  }

Styling the icons

Now, you'll need to style the icons imported from font-awesome icons. Do it like this:

form div i {
    position: absolute;
    padding: 10px;
  }

next, you'll need also to style the error class, alongside the success and failure icons . you can do that like this:

.failure-icon,
.error {
    color:red;
}

.success-icon{
    color:green;
}

.error {
    font-size: 14.5px;
    margin-top: 5px;
}

Oops!! the failure and success icons are now overlapping each other. But don't worry, with javaScript, I'll show you how you can manipulate that and solve the issue. For now, all you need to do is to hide them like this:

.success-icon,
 .failure-icon {
    right: 0;
    opacity: 0;
  }

Next, you're now going to style the submit button like this:

button{
    margin-top:15px;
    width:100%;
    height:45px;
    background-color:rgb(0, 4, 255); 
    border:2px solid rgb(0, 4, 255);  
    border-radius:8px;
    color:#fff;
    font-size:20px;
    cursor:pointer;
    box-shadow: 2px 2px 4px rgb(0, 4, 255);
    transition:all .1s ease;

}

For making the form more robust, you can add a hover effect when the user hovers over the button like this:

button:hover{
    opacity:0.8;
}

Congrats once again!! you've completed the CSS part. Now the project is 75% done. All you need right now is to add javaScript to make the form dynamic and manipulate those failure and success icons issues. you can freely take a short break and come back later.

3.javaScript part

How to add javaScript?? well!. First, you need to select all the id's and classes's from the HTML and embend them in javaScript just by doing this:

let classes = (classes)=> document.getElementsByClassName(classes);
let id = (id)=> document.getElementById(id);

then, store the classes and id inside these variables:

let username = id("username");
let email = id("email");
let password = id("password");
let form = id("form");
let errorMsg = classes("error");
let successIcon = classes("success-icon");
let failureIcon = classes("failure-icon");

next, you'll target the form and the submit event listener

form.addEventListener("submit", (e) => {
    e.preventDefault();
});

Now, you need to create a function called main that will do all the form validation activities. you'll do it like this:

let main = (id,sequential, message)=>{

    if(id.value.trim() === ""){

    errorMsg[sequential].innerHTML = message;

}else{

    errorMsg[sequential].innerHTML = "";

}

}

And for the icons , add this code like this:

let main = (id, sequential, message)=>{
    if(id.value.trim() === "") {
    errorMsg[sequential].innerHTML = message;
    id.style.border = "1.5px solid red"

    successIcon[sequential].style.opacity = "0";
    failureIcon[sequential].style.opacity = "1"
}
   else{
    errorMsg[sequential].innerHTML = "";
    id.style.border = "1.5px solid green";

    successIcon[sequential].style.opacity = "1";
    failureIcon[sequential].style.opacity = "0"
}    
}

So far so good!! Now, you need to implement the newly created functions inside the place where you added the submit event listener like this:

form.addEventListener("submit", (e) => {
    e.preventDefault();

    main(username, 0, "username can not be empty");
    main(email, 1,"Email can not be empty");
    main(password, 2, "password can't be empty");
})

what happening there above? Above, you're passing id names, sequential of your class names, and message which should be shown when the error appeared from the user when he/she submit the form.

4.Media Queries for Responsiveness

You'll be happy if the form is responsive to all media screen sizes(telephone, tablet, and desktop). To do so, you have to add media queries.

for screens with a width from 900px, you will add these styles:

@media (max-width: 900px){
    .container {
       flex-direction:column;
   }
    .btn {
       flex-direction:column; 
   }  
     form {
       width:100%
   }
}

for screens with a width from 425px, you will add these styles:

@media (max-width: 425px){
     form{
      padding:20px;
    }
}

Conclusion

Congrats!!! Now you can use javaScript to handle form validation. Not only that, but also you have a cool project to add to your portfolio and be able to show to recruiters. Thanks for reading through this article.Happy coding!!