DEV Community: Adeyemi Raji

Javascript Spread and Rest Operator syntax explained...

Adeyemi Raji — Wed, 18 Jan 2023 00:39:21 +0000

In this tutorial, we will learn about JavaScript spread and rest operator with the help of detailed examples

The spread operator in JavaScript allows an iterable (such as an array or string) to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected. It is represented by three dots (...).

Spread syntax looks exactly like rest syntax. In a way, spread syntax is the opposite of rest syntax. Spread syntax "expands" an array into its elements, while rest syntax collects multiple elements and "condenses" them into a single element.

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5, 6];
console.log(arr2); // [1, 2, 3, 4, 5, 6]

You can also use the spread operator to spread the elements of an array into a function call:

let arr = [1, 2, 3];
console.log(Math.max(...arr)); // 3

let [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

The rest operator is similar to the spread operator, but it is used to capture the remaining elements of an array. It is represented by three dots (...) and is usually used in conjunction with destructuring assignment.

For example, you can use the rest operator to capture the remaining elements of an array into a new one:

let [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

You can also use the rest operator to capture the remaining elements of an array into a function argument:

function print(first, second, ...rest) {
    console.log(first);
    console.log(second);
    console.log(rest);
}

print(1, 2, 3, 4, 5); //1
2
[3,4,5]

further usage of spread operator with function:

const add = function (...numbers) {
let sum = 0;
for( let i = 0; i < numbers.length; i++ ) sum += numbers[i];
console.log(sum); 
};
add()3,2,5)
add(3, 4, 1, 4, 6, 7, 5, 2)
add(9, 2, 1, 4)

Hope you have a better understanding of the spread and rest operator after this explanation.

Difference between Framework and library in the context of React and Angular

Adeyemi Raji — Fri, 06 Jan 2023 13:23:07 +0000

People often confuse or use the terms "framework" and "library" interchangeably without fully understanding the differences between them. In this article, we will clarify the distinctions between frameworks and libraries in order to better understand the key differences between them.

1. A library is a collection of code that you can use in your program to perform a specific task. For example, the C standard library provides functions for performing input/output operations, mathematical computations, and other common tasks.
A framework is a set of libraries and tools that provide a structure for building a particular type of software application. A framework defines the way that the different parts of an application should interact, and provides a set of conventions for building and organizing the code.

One key difference between libraries and frameworks is that with a library, you call the functions provided by the library to perform a specific task. With a framework, the framework calls your code in certain places, and you provide the implementation for those hook functions. This means that with a framework, you have less control over the overall flow of the program, but it can make it easier to build certain types of applications because the framework provides a lot of the "plumbing" for you.

In the context of JavaScript web development, React and Angular are both frameworks for building web applications.

React is a JavaScript library for building user interfaces. It was developed by Facebook and is often used for building single-page applications (SPAs) and mobile applications. React allows you to build reusable UI components, and it uses a virtual DOM (Document Object Model) to improve performance by minimizing the number of DOM manipulations required when rendering components.
Angular is a full-featured JavaScript framework for building web applications. It was developed by Google and provides a complete set of tools for building both the front-end and back-end of a web application. Angular uses a component-based architecture, and it provides a range of features including dependency injection, routing, and a template-based syntax for defining views.

Both React and Angular are widely used for building modern web applications, and they can both be used to build applications with similar functionality. However, they have some key differences in terms of their design and the way that they approach building applications. For example, React is focused on building reusable UI components, while Angular provides a more complete set of tools for building an entire web application.

Thanks for reading.

MVC Architecture in NodeJS explained in details

Adeyemi Raji — Wed, 04 Jan 2023 00:39:49 +0000

Let's take a look at the concept behind nodejs Model–view–controller (MVC) software design pattern.
Model-View-Controller (MVC) is a software architectural pattern that separates an application into three main logical components: the model, the view, and the controller. Each of these components are built to handle specific development aspects of an application.

The MVC pattern is often used in the development of web applications.

Here's a high-level overview of how the MVC pattern works in a Node.js application:

Model: The model component represents the data of the application and the business rules that govern access to and updates of this data. It is the core of the application and is responsible for maintaining the data. In a Node.js application, the model is often implemented as a JavaScript object that represents the data of the application.
View: The view component is responsible for displaying the data to the user. It is the user interface of the application and is responsible for presenting the data to the user in a way that is easy to understand and interact with. In a Node.js application, the view is often implemented using a template engine such as EJS, Jade, or Handlebars.
Controller: The controller component is responsible for handling user input and interacting with the model and the view. It is the middleman between the model and the view, and is responsible for updating the view when the model changes and updating the model when the user interacts with the view. In a Node.js application, the controller is often implemented as a JavaScript function that handles HTTP requests and sends responses.

Here's an example of an MVC application in Node.js that demonstrates how these components work together:

const express = require('express');
const app = express();

// Model
const fruits = ['apple', 'banana', 'orange'];

// View
app.get('/', (req, res) => {
  res.render('fruits', { fruits: fruits });
});

// Controller
app.post('/addfruit', (req, res) => {
  fruits.push(req.body.fruit);
  res.redirect('/');
});

app.listen(5500, () => {
  console.log('MVC app listening on port 5500!');
});

In this example, the 'fruits' array is the model, the view is a template that displays the list of fruits, and the controller is the route handler that adds a new fruit to the list when the user submits a form.

I hope this article is enjoyable to read and helpful. As a technical writer, it brings me joy to share my knowledge and assist others in learning and growing. Thank you for taking the time to read it.

Understanding body-parser, cookie-parser, morgan, nodemon, pm2, serve-favicon, cors, dotenv, fs-extra, moment in Express.js

Adeyemi Raji — Sat, 31 Dec 2022 01:20:37 +0000

Express.js is a web application framework for Node.js that makes it easy to build web applications and APIs. There are a number of middleware modules that are commonly used with Express.js to add additional functionality. Here's a brief description of each:

body-parser: This middleware is used to parse the body of an HTTP request, which can contain JSON data or other types of data. It allows you to access this data in your route handlers and use it to create or modify resources.
cookie-parser: This middleware is used to parse cookies that are sent with HTTP requests. It allows you to read and write cookies in your route handlers, which can be used for things like session management.
morgan: This middleware is used for logging HTTP requests. It can log request details like the method, path, and response status code to a file or the console.
nodemon: This is a utility that automatically restarts your Node.js server when it detects changes in your code. It's often used during development to make it easier to work on your server without having to manually restart it every time you make a change.
pm2: This is a process manager for Node.js applications. It can be used to run your server in the background and monitor it for crashes or other issues. It can also be used to restart your server if it crashes or if you make code changes.
serve-favicon: This middleware serves a favicon (a small icon that appears in the browser's address bar) to the client. It can be used to set a custom favicon for your site or API.
cors: This middleware is used to enable CORS (Cross-Origin Resource Sharing) on your server. CORS is a security feature that allows a server to specify which origins are allowed to access its resources.
dotenv: This module is used to load environment variables from a .env file into the process.env object in Node.js. This can be useful for storing sensitive information like passwords or API keys that you don't want to hardcode into your application.
fs-extra: This module is a thin wrapper around the built-in fs module in Node.js, with additional methods for tasks like copying files and creating directories. It can be used to perform file system operations in your route handlers or other parts of your application.
moment: This is a popular library for working with dates and times in JavaScript. It can be used to parse, validate, manipulate, and format dates in your route handlers or other parts of your application.

These are just a few examples of the middleware and utilities that are commonly used with Express.js. There are many other options available, and you can choose the ones that best fit your needs.

Red Flags 🚩 to watch out for before joining any bootcamp in Nigeria.

Adeyemi Raji — Sun, 25 Dec 2022 23:10:39 +0000

In the past, if you wanted to be a software engineer, you either got a computer science degree or studied part-time and read how-to books in your spare time. Both approaches take years, and there's no guarantee that you'll get a job immediately after completing it.
Companies now need programmers. They don't have the resources to train new programmers. And non-technical people looking to change careers don't have time for a four-year degree. Join a coding boot camp. There has been an influx of bootcamps in Nigeria in recent years. Many of them charged exorbitant fees and promised huge post-training benefits to attract many innocent, humble but enthusiastic individuals to the program, but only those students graduated from the boot camp. , Faced with the reality of overwhelming employment rates.The picture drawn in most of these boot camps is completely different from the reality of the field, so try to join one of these boot camps Students should conduct thorough background checks to avoid becoming victims of well-planned lies.
There are several red flags to watch out for before joining any tech bootcamp. Here are a few:

High tuition costs: While the cost of a tech bootcamp can vary widely, be wary of programs that charge excessively high tuition fees. Consider whether the cost of the program is justified by the value it provides, such as job placement rates and the earning potential of graduates, former students of these programs always have better view on this, so contacting few of them to sample their opinions is a great way to find answers.
Unrealistic job placement guarantees: Some bootcamps may claim to have a high job placement rate, but be sure to do your own research and verify these claims. Consider asking to speak with recent graduates or reaching out to alumni to ask about their experiences finding jobs after completing the program.
Lack of transparency: Be wary of programs that are not transparent about their curriculum, faculty, or job placement rates. It's important to have a clear understanding of what you'll be learning and who will be teaching you before committing to a bootcamp.
No trial period or money-back guarantee: Some tech bootcamps offer a trial period or a money-back guarantee to allow students to try out the program before committing fully. Look for programs that offer this type of assurance to ensure that you can test out the program before making a long-term commitment.
Poor reviews: Do some research and read reviews from past students to get an idea of what their experiences were like. If you see a lot of negative reviews or complaints, it may be a red flag that the program is not meeting the needs of its students.

Java keywords you should know

Adeyemi Raji — Sat, 24 Dec 2022 22:04:38 +0000

In Java, there are several keywords that have a specific meaning in the language and cannot be used as identifiers (i.e., names of variables, methods, classes, etc.). Here is a list of the Java keywords:

abstract
continue
for
new
switch
assert
default
goto
package
synchronized
boolean
do
if
private
this
break
double
implements
protected
throw
byte
else
import
public
throws
case
enum
instanceof
return
transient
catch
extends
int
short
try
char
final
interface
static
void
class
finally
long
strictfp
volatile
const
float
native
super
while

Note that null, true, and false are not keywords, but they are reserved literals in Java and cannot be used as identifier names.

How to build a todo app with search functionality with React with CSS

Adeyemi Raji — Sat, 24 Dec 2022 11:10:27 +0000

To build a todo app with search functionality using React and CSS, you can follow these steps:

Create a new React app using the create-react-app command. npx create-react-app my-todo-app
In the project directory, create a new component called TodoList that will render a list of todo items. You can use the state object to store the list of todo items and a handleChange function to update the list when a new todo item is added or an existing item is deleted.

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);

  const handleChange = (event) => {
    // code to add or delete todo items goes here
  }

  return (
    <div>
      <form>
        <input type="text" onChange={handleChange} />
        <button type="submit">Add Todo</button>
      </form>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

In the handleChange function, you can use the event.target.value to get the value of the input field and add it to the list of todos using the setTodos function. You can also implement a delete button for each todo item that will remove it from the list when clicked.

const handleChange = (event) => {
  const text = event.target.value;
  if (event.key === 'Enter' && text.trim()) {
    setTodos([...todos, { id: Date.now(), text }]);
    event.target.value = '';
  }
}

...

<button type="button" onClick={() => setTodos(todos.filter((t) => t.id !== todo.id))}>
  Delete
</button>

To add search functionality, you can create a new component called Search that will render an input field and a search button. The search button should call a function that filters the list of todos based on the search term.

import React, { useState } from 'react';

function Search() {
  const [searchTerm, setSearchTerm] = useState('');

  const handleSearch = () => {
    // code to filter the list of todos goes here
  }

  return (
    <div>
      <input type="text" onChange={(event) => setSearchTerm(event.target.value)} />
      <button type="button" onClick={handleSearch}>Search</button>
    </div>
  );
}

export default Search;

In the handleSearch function, you can use the searchTerm to filter the list of todos and update the state using the setTodos function. const handleSearch = () => { set todos(todos.filter((todo) => todo.text.toLowerCase().includes(searchTerm.toLowerCase()))); }
To style the todo app, you can use CSS. You can either include the CSS in the component file itself using the style attribute or create a separate CSS file and import it into the component.

Here's an example of how you can style the TodoList component:

import './TodoList.css';

...

<div className="todo-list">
  <form>
    <input type="text" onChange={handleChange} />
    <button type="submit">Add Todo</button>
  </form>
  <ul>
    {todos.map((todo) => (
      <li key={todo.id} className="todo-item">
        {todo.text}
        <button type="button" onClick={() => setTodos(todos.filter((t) => t.id !== todo.id))}>
          Delete
        </button>
      </li>
    ))}
  </ul>
</div>

.todo-list {
  display: flex;
  flex-direction: column;
}

.todo-item {
  display: flex;
  align-items: center;
}

.todo-item button {
  margin-left: 10px;
}

Finally, you can use the TodoList and Search components in the main App component to render the todo app.

import React from 'react';
import TodoList from './TodoList';
import Search from './Search';

function App() {
  return (
    <div>
      <Search />
      <TodoList />
    </div>
  );
}

export default App;

I hope this helps! Let me know if you have any questions.

Setting up server and database to perform CRUD operations using Apollo-GraphQL, PostgreSQL, Sequelize, and Express

Adeyemi Raji — Fri, 23 Dec 2022 22:43:19 +0000

How to perform CRUD (create, read, update, delete) operations with Apollo GraphQL, PostgreSQL, Sequelize, and Express, you will need to set up a GraphQL server using the apollo-server-express library and connect it to a PostgreSQL database using the Sequelize ORM (Object-Relational Mapping) library. Here's a general outline of the steps you'll need to follow:

Set up your Express server and GraphQL endpoint:
Install the necessary dependencies, such as apollo-server-express, graphql-tools, express, and sequelize.
Define your GraphQL schema, which will describe the types of data you can query and manipulate, as well as the relationships between those types.
Implement your GraphQL resolvers, which are functions that execute the CRUD operations when a GraphQL query or mutation is received.
Use the apollo-server-express library to create an Apollo server instance and integrate it with your Express app.
Connect your GraphQL server to a PostgreSQL database using Sequelize:
Configure Sequelize by defining your database models and establishing a connection to the PostgreSQL database.
Write the code to perform the CRUD operations using the Sequelize API.
Here's an example of how you might define a Sequelize model for a Task model and implement a GraphQL resolver for a create operation:

const Task = sequelize.define('task', {
  title: {
    type: Sequelize.STRING,
    allowNull: false,
  },
  description: {
    type: Sequelize.STRING,
  },
});

const resolvers = {
  Mutation: {
    async createTask(parent, args, context, info) {
      const { title, description } = args;
      const task = await Task.create({ title, description });
      return task;
    },
  },
};

This resolver function receives a Mutation type in the GraphQL schema, along with the necessary arguments, and creates a new Task instance using the Sequelize create method. It then returns the created instance as the result of the mutation.

There are other ways the CRUD operation can be achieved, and it is explained below:

const sequelize = new Sequelize('database', 'username', 'password', {
  dialect: 'postgres',
});

const Task = sequelize.define('task', {
  // define model fields here
});

sequelize.sync();

When defining your GraphQL schema, you will need to specify the Mutation type and the fields that correspond to each CRUD operation. For example:

type Mutation {
  createTask(title: String!, description: String): Task!
  updateTask(id: ID!, title: String, description: String): Task
  deleteTask(id: ID!): Task
}

To ensure that your GraphQL resolvers have access to the Sequelize models, you can pass them as part of the context object when creating the Apollo server instance:

const server = new ApolloServer({
  typeDefs,
  resolvers,
  context: () => {
    return {
      Task,
    };
  },
});

I hope this additional information is helpful! Let me know if you have any further questions.

OOP Concept in Java explained in simple terms

Adeyemi Raji — Fri, 23 Dec 2022 02:45:44 +0000

In this example, the Person class has a constructor that takes a single String argument and assigns it to the name field of the object. The class also has a getName method that returns the value of the name field. We can create an object of the Person class using the constructor, and then use the getName method to retrieve the value of the name field.

public class Person {
  private String name;
  private int age;

  public Person(String name, int age) {
    this.name = name;
    this.age = age;
  }

  public void setName(String name) {
    this.name = name;
  }

  public String getName() {
    return name;
  }

  public void setAge(int age) {
    this.age = age;
  }

  public int getAge() {
    return age;
  }
}

In this example, the Person class has two private fields: name and age. The class has four public methods: a constructor, and three getter and setter methods for the name and age fields.

To create an object of the Person class, we can use the new keyword and pass the required arguments to the constructor:

Person person = new Person("John", 30);

We can then use the object's methods to get and set the values of its fields:

String name = person.getName();  // name is "John"
int age = person.getAge();  // age is 30
person.setName("Jane");
person.setAge(35);

OOP languages, such as Java, also support inheritance, which allows a class to inherit the properties and behaviors of another class. This allows developers to create a hierarchy of classes, where a subclass can inherit the characteristics of its superclass, and can also add new properties and behaviors of its own.

public class Employee extends Person {
  private double salary;

  public Employee(String name, int age, double salary) {
    super(name, age);
    this.salary = salary;
  }

  public void setSalary(double salary) {
    this.salary = salary;
  }

  public double getSalary() {
    return salary;
  }
}

In this example, the Employee class extends the Person class and adds a new field called salary. The Employee class has a constructor that calls the superclass constructor using the super keyword and passes the required arguments. The Employee class also has getter and setter methods for the salary field.

OOP languages, such as Java, also support polymorphism, which allows objects of different classes to be treated as instances of a common superclass. This allows developers to write code that can work with multiple classes that have similar characteristics, without having to know the exact type of the object at runtime.
Person person = new Employee("John", 30, 50000); String name = person.getName(); // name is
In summary, object-oriented programming (OOP) is a programming paradigm that is based on the concept of "objects", which contain data and code that operates on that data. In Java, a class is a template or blueprint for creating objects, and an object is an instance of a class. A class can have fields (data) and methods (code) that define the properties and behaviors of the object. Java also supports inheritance, which allows a class to inherit the properties and behaviors of another class, and polymorphism, which allows objects of different classes to be treated as instances of a common superclass. OOP can help developers create programs that are easy to understand, maintain, and reuse.

What the future holds for programming

Adeyemi Raji — Wed, 21 Dec 2022 08:59:54 +0000

The field of programming is constantly evolving, and it can be difficult to predict exactly what the future will bring. However, there are a few trends and developments that are likely to shape the way we approach software development in the coming years. From the rise of artificial intelligence and the growing importance of cybersecurity, to the emergence of low-code and no-code platforms and the future of web development, these are just a few of the areas that are likely to shape the future of programming.

"The Rise of Artificial Intelligence in Programming"
In recent years, we've seen a surge in the use of artificial intelligence (AI) in programming. From machine learning algorithms that can analyze and interpret data, to natural language processing that allows computers to understand and respond to human speech, AI is revolutionizing the way we develop software. As AI technology continues to advance, we can expect to see even more integration of these advanced capabilities into programming, potentially leading to the creation of entirely new application areas and industries.
"The Growing Importance of Cybersecurity in Programming"
As the world becomes increasingly reliant on technology, the need for secure software is only going to grow. Programming professionals with expertise in cybersecurity will be in high demand as companies seek to protect their systems and data from cyber threats. In the future, we can expect to see a greater emphasis on building secure software from the ground up, rather than trying to retroactively fix vulnerabilities.
Sure! Here are a few potential articles on the future of programming:

"The Rise of Artificial Intelligence in Programming"
In recent years, we've seen a surge in the use of artificial intelligence (AI) in programming. From machine learning algorithms that can analyze and interpret data, to natural language processing that allows computers to understand and respond to human speech, AI is revolutionizing the way we develop software. As AI technology continues to advance, we can expect to see even more integration of these advanced capabilities into programming, potentially leading to the creation of entirely new application areas and industries.

"The Growing Importance of Cybersecurity in Programming"
As the world becomes increasingly reliant on technology, the need for secure software is only going to grow. Programming professionals with expertise in cybersecurity will be in high demand as companies seek to protect their systems and data from cyber threats. In the future, we can expect to see a greater emphasis on building secure software from the ground up, rather than trying to retroactively fix vulnerabilities.

"The Emergence of Low-Code and No-Code Platforms"
Low-code and no-code platforms are gaining popularity as a way for non-technical professionals to build software and automation tools. These platforms use visual interfaces and pre-built modules, allowing users to create functional software without writing a single line of code. While these platforms are not a replacement for traditional programming, they do have the potential to democratize software development and make it more accessible to a wider range of people. In the future, we can expect to see an increase in the use of low-code and no-code platforms, especially in industries where custom software solutions are needed but technical expertise is limited.

"The Future of Web Development" Web development is constantly evolving, and the future is likely to bring even more changes. One trend we can expect to see is the continued rise of mobile web development, as more and more people access the internet from their smartphones and tablets. In addition, the use of virtual and augmented reality in web development is likely to increase, creating new opportunities for developers to create immersive online experiences. Finally, the increasing importance of data privacy and security will likely lead to the development of new technologies and best practices for protecting user data on the web.

How to build Neumorphism calculator using javascript, html, and css

Adeyemi Raji — Wed, 21 Dec 2022 01:14:41 +0000

Neumorphism is a design trend that involves creating soft, subtle gradients and shadows to give an interface a more organic, three-dimensional look. Here is an example of how you can build a neumorphic calculator using HTML, CSS, and JavaScript:

Create the HTML structure for the calculator. This will include the input fields for the numbers and the buttons for the different operations. Here is an example HTML structure:

<div id="calculator">
  <input type="text" id="result">
  <button type="button" class="operator" value="7">7</button>
  <button type="button" class="operator" value="8">8</button>
  <!-- more buttons for the other digits and operations -->
</div>

Add some neumorphic styling to the calculator using CSS. You can use CSS to create the soft gradients and shadows that are characteristic of neumorphism. Here is an example of some neumorphic CSS styling:

#calculator {
  display: flex;
  flex-wrap: wrap;
  width: 240px;
  height: 280px;
  background-color: #eee;
  border-radius: 5px;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

input[type="text"] {
  width: 100%;
  height: 50px;
  font-size: 24px;
  text-align: right;
  border: none;
  background-color: #fff;
  box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.1);
}

button[type="button"] {
  width: 60px;
  height: 60px;
  font-size: 18px;
  border: none;
  background-color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.1);
}

button[type="button"]:active {
  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.1);
}

Add the JavaScript code to make the calculator function. You can use JavaScript to listen for clicks on the buttons, retrieve the values of the buttons, and perform the calculations. Here is an example of the JavaScript code:

const buttons = document.querySelectorAll('.operator');
const resultField = document.querySelector('#result');

let result = '';

buttons.forEach(button => {
  button.addEventListener('click', () => {
    result += button.value;
    resultField.value = result;
  });
});

This code selects all elements with the class operator, which are the buttons on the calculator, and the element with the id of result, which is the input field where the result is displayed. It then sets up an event listener for the click event on each button, which appends the value of the button to the result variable and displays it in the result field.

How to implement bill splitting function using Javascript

Adeyemi Raji — Wed, 21 Dec 2022 00:35:04 +0000

To implement a bill splitting function in JavaScript, you can use the following code:

function billSplitter(total, numPeople) {
  const amountPerPerson = total / numPeople;
  console.log(`Each person should pay $${amountPerPerson.toFixed(2)}.`);
}

const totalBill = prompt("Enter the total bill:");
const numPeople = prompt("Enter the number of people:");
billSplitter(totalBill, numPeople);

This code prompts the user to enter the total bill and the number of people, then calls the billSplitter function with the entered values. The function calculates the amount each person should pay by dividing the total bill by the number of people, and logs the result to the console, rounded to the nearest cent.

Note that the prompt function in JavaScript returns a string, so you will need to convert the entered values to numbers using the parseFloat function for the total bill (since it is a decimal number) and the parseInt function for the number of people (since it is an integer).

Here is the modified code that takes this into account:

function billSplitter(total, numPeople) {
  const amountPerPerson = total / numPeople;
  console.log(`Each person should pay $${amountPerPerson.toFixed(2)}.`);
}

const totalBill = parseFloat(prompt("Enter the total bill:"));
const numPeople = parseInt(prompt("Enter the number of people:"));
billSplitter(totalBill, numPeople);

This code prompts the user to enter the total bill and the number of people, then calls the bill_splitter function with the entered values. The function calculates the amount each person should pay by dividing the total bill by the number of people, rounds the result to the nearest cent, and prints it.