If you are looking for a way to insert new HTML without re-rendering the previous HTML of the node, you have come to the right place. So let’s say you are working in a Javascript application and are rendering new data using innerHTML, we will show you a better way i.e. insertAdjacentHTML. insertAdjacentHTML method accepts a specific position as first argument and HTML text as second argument and insert the HTML as DOM (Document Object Model) at that position.
Why insert new HTML in DOM ?
If you are a frontend developer, there will be times when you need to insert new HTML to existing DOM. For example, in pagination, the data is loaded first. After that, when user clicks on “load more” button, it fetch more data from API and append it. Or if you are working in a chat application, you can see that the previous messages are prepended when you scroll to the top of conversation.
Acceptable positions are:
beforebegin: It will insert the HTML before element. So the new HTML will become a previous sibling of that element.
afterbegin: This will add the HTML as the first child of the element.
beforeend: This will insert HTML as the last child of that element.
afterend: And this will add the HTML after the element. So the new HTML will become a next sibling of that element.
Here are simple examples.
beforebegin
This is usefult if you want to prepend the element before a specific node.
<div id="target">I am target.</div>
<script>
const html = "<p>I am new HTML</p>";
const target = document.getElementById("target");
target.insertAdjacentHTML("beforebegin", html);
</script>
Output of this will be:
I am new HTML
I am target.
And your DOM will look like this:
<p>I am new HTML</p>
<div id="target">I am target.</div>
The paragraph tag became the previous sibling of div tag.
afterbegin
This will add the new HTML as the first child of target node. Change the above line #6 to:
target.insertAdjacentHTML("afterbegin", html);
It’s output will look same but now your DOM will be like this:
<div id="target">
<p>I am new HTML</p>
I am target.
</div>
You can see how the paragraph tag became the first child of div tag. The equivalent of this in innerHTML will be:
target.innerHTML = html + target.innerHTML;
But I will explain later why using innerHTML to insert new HTML is a bad idea.
beforeend
If you use “beforeend”, it will add the new HTML as the last child of that element. Change that line again to:
target.insertAdjacentHTML("beforeend", html);
This time, your output will be:
I am target.
I am new HTML
And your DOM will become:
<div id="target">
I am target.
<p>I am new HTML</p>
</div>
afterend
This will insert the HTML right after the element, making it the next sibling of target node.
target.insertAdjacentHTML("afterend", html);
Your output will be same as in “beforeend” but your DOM will become:
<div id="target">I am target.</div>
<p>I am new HTML</p>
When to use insertAdjacentHTML over innerHTML ?
innerHTML removes all the event listeners previously attached to the nodes. So if you have a button that has an onclick event listener, after re-rendering it using innerHTML will remove that event. But insertAdjacentHTML keeps the event listeners as they are.
One of the most important difference is performance. innerHTML re-renders the whole node again, while insertAdjacentHTML only insert the new HTML without re-rendering the previous HTML.
When to use innerHTML over insertAdjacentHTML ?
You should use innerHTML only when you have to completely re-write a node. For example, changing the text of a button. If there is any new element that needs to inserted, prepended or appended, it should be done using insertAdjacentHTML.
A multi-purpose platform is created in Node.js and MongoDB. Developing an API in Node.js and MongoDB allows you to create real-time, high performance and scalable applications. When you are building a website or a mobile app, you might have a different design than what is already built. But your backend will be almost similar to your competitor. Let’s say you want to build a social network like Facebook. You will pick an HTML template or design a UI specific for your business. But you want to have a module to create users, posts, pages, groups, friends, chats and much more.
So we are providing you a multi-purpose platform that allows you to use social network, job portal, manage your media files and much more. It is a self-hosted script so all the data will be stored on your server, no third-party storage service is used here.
Tech stack 💻
Bootstrap 5+
React 18+
Node.js 20+
MongoDB 4+
User Registration and Profile 🙋🏻♂️
This API allows you to register an account. The passwords are encrypted before saving them in database. User can also login using his email and password that he entered during registration.
On successfull login, a Json Web Token (JWT) is generated and returned in the API response. The client application needs to save that token in its local storage because that token will be use in other APIs in headers to identify the user. This token is also stored in server as well. So if you want to logout a user manually, you can simply remove his token from database.
User can edit his name and profile image. The email field is read-only, it cannot be changed. User can also change his password. For that, he needs to provide his current password and enter his new password 2 times for confirmation.
Social Network Posts 📝
If you are building a social network, then this module allows you to create and manage posts for a social network. You can also share other’s posts on your timeline. You can edit or remove your own posts. Other users will be able to like, comment or share your posts. Users will be able to edit to delete their own comments. You will be able to reply to the comments on your posts, and you can also edit or remove your reply if you want. Users can also see the list of all users who has liked or shared your post.
Pages 📃
If you are running a business, you can create a page for your business and start posting about your products or services in that page. In order to create a page, you need to set it’s name, tell a little about the page, and provide a cover photo for the page. User can follow your page and start seeing your page’s posts in their newsfeed. Only creator of page can create a post in that page.
You can see a list of all users who has followed your page. User can also see a list of all pages he has followed. The owner of the page can edit or delete the page. Once page is deleted, all the posts inside that will be deleted as well.
Groups 🥳
You can create groups to create a community of like-minded people. In order to create a group, you need to enter the name of group, a little description about the group and it’s cover photo. You can see a list of all groups created in the platform. There are separate links from where you can see only the groups that you have created or the groups you have joined. You can join or leave the group whenever you want. However, admin of the group can also remove you from the group if he wants.
Only admin or group members can post in a group. Posts uploaded by admin will be immediately displayed on the groups newsfeed. However, the posts uploaded by group members will be held pending for approval from the admin. Admin can see a list of all posts uploaded by group members. He can accept or decline a post he wants.
Admin of the group can update the name or description of the group, and he can also change the cover photo of the group. Admin can delete the group as well. Upon deleting, all the posts uploaded in that group will be deleted as well.
Media 📂
This API allows you to upload media files (images, videos) on the platform. Each media file will have a title, alt attribute, and caption. These will help you in your Search Engine Optimization (SEO). You can edit or delete your own media files whenever you want.
Friends 🙏🏻
You can create friends by sending them a friend request, just like you do in Facebook. Other user can see a list of all friend requests he has received. He can accept or decline your request. If accepted, then you both will become friends and you can chat with each other. You can see a list of all of your friends. At any point, you can remove a user from your friend list.
Realtime Chat 💬
You can have realtime chat with your friends. Chats are end-to-end encrypted, that means that the messages are encrypted before sending to the server. And they are decrypted only after receiving the response from the server. Your messages will remain secure in-transit.
For realtime communication, we are using Socket IO. When you send a message, an event is emitted. The receiver will be listening to that event and display a notification alert that you have received a new message. If the chat is already opened, then the new message will automatically be appended at the bottom of the chat.
Job Portal 👨🏻🔧 👨🏻🍳 👩🏻🏫 👩🏻🎨
Since this is a multi-purpose platform and it is developed in scalable technologies (Node.js & MongoDB), a job portal platform is also added that allows recruiter to post jobs and candidates can apply on that job. Recruiter can see all the applications he has received on a job and can change the status of applicant to shortlisted, interviewing, rejected or selected etc. Candidate can upload multiple CVs and choose the relevant CV while applying for the job. Recruiter can update or delete the job any time.
You can also filter job applications by status. So if you are recruiter, you will post a job. Then you will start receiving applications from candidates. Recruiter can change the status from interviewing to shortlisted employess. Then recruiter can change the status to interviewing. Recruiter can also reject the candidate, but he also needs to provide a reason for rejection. Finally, recruiter can set the candidate as “Hired”. So there must be a way for recruiter to filter job applications by their status.
We also have a PHP and MySQL version of Job Portal website. You can get it from here.
Admin Panel 👨🏻💼
An admin panel is created where you can manage all the users, social network posts and jobs created on the platform. It is a single page application created in React JS and can be deployed as a sub-domain to your main website.
Super admin can see the list of all users. He can add a new user if he wants. An email with password set by admin will be sent to the new user. Admin can also update the user password as well. He can also delete the user, all the posts uploaded by that user will be deleted as well.
Super admin can see all the posts uploaded on social network platform. Just like users, he can delete any post he did not feel appropriate.
Admin can also see all the jobs posted by recruiter and if any job post goes against the standards, super admin can remove it.
Blogs 📜
Since this is a multi-purpose platform, so I added a blog module that allows you to write articles on your website. Admin can create blogs from admin panel and they will be displayed on user side. User can post a comment if they are logged-in. Other users or admin can reply to their comments. Admin can manage all posts and comments from admin panel. Admin can delete any post or command he did not find suitable.
We are using sockets to update the blogs in realtime. So if user is reading a post and admin changes something from admin panel, it will immediately gets updated on user side. User does not need to refresh the page.
Page Builder 🏗
We are using page builder to create blog posts. It allows you to create paragraphs, headings, images, videos and buttons.
You can set the attributes like id and class. You can also set CSS properties of each tag.
If you are using image or video, you can add alt and caption attributes as well.
Freelance Platform 👨🏻💻 🤑
This multi-purpose platform project also has a freelance platform where you can hire experts to get your job done. Or, if you are a skilled person, you can find work there.
There are 2 entities in freelance platform: Buyer 💰 and Seller 🤑. Buyer will create a task to be done, he will mention his budget and deadline. Buyer must have sufficient balance in their account. They can add balance using Stripe. 💳
Sellers will start bidding on that task. Seller will also send a proposal mentioning how he will get the work done, what is his offer and in how many days he will do it. 🌚
Buyer will see all the bids from sellers. He will also see a freelance profile of each bidder, telling the orders done by each seller, their ratings and reviews etc. ⭐️
Buyer can accept the bid of any seller he seems fit for the job. The seller will be notified and their order will be started. ⏰
On their order detail page, they can chat with each other. They can send messages 💬 with attachments 🧷. At any point, buyer or seller can cancel the order.
After the work is done, buyer can complete the order ✅. Once it is completed, the amount that was offered in the bid will be deducted from buyer’s account. 5 percent will be deducted as a “platform fee”, and the remaining 95% of the amount will be added in the seller’s account 🤑.
Buyer can also gives ratings ⭐️ to a seller and also can give a review about his experience. This will help seller build his freelance profile.
Seller can withdraw the money by entering his bank account details 🏦. These details will be sent to the admin panel 👨🏻💼. Admin can transfer the funds and once the transfer is completed, seller’s balance will be returned to 0.
Notifications 🔔
User will receive a notification when:
His freelance order gets completed/cancelled.
A new message has been received on his order.
His bid got accepted on freelance project.
His withdrawl request has been updated.
Someone commented on his post.
Someone replied to his comment.
Someone likes his post on social network.
His post has been shared by someone.
These notifications will be displayed as a bell icon 🔔 on header when user is logged-in. If he has any unread notifications, then it will be displayed as read.
Unread notification’s background will be gray. On clicking the notification, it will be marked as read.
Installer 🤹🏻♂️
Run the following commands in your “admin” folder:
npm install
npm start
In order to create a super admin, you need to run the following command in your “premium-api” folder once:
node installer.js
This will create a super admin in your database. You can set the email and password of your choice from “installer.js” file.
Paste the “multi-purpose-platform-nodejs-mongodb” folder in your “htdocs” folder if you are using XAMPP or MAMP, or in “www” folder if you are using WAMP.
Run the following commands in the “premium-api” folder:
More features can also be added on-demand in this multi-purpose platform. If you do not want all the features, we can remove or change features as per your needs.
In this blog post, we will discuss, how you can show or hide an input field for password using plain HTML and Javascript. This is useful because sometimes users wants to see what password they are setting. This feature is very helpful in:
Signup, because user will be entering his password for the first time.
Reset, because user wants to know what new password he is setting-up.
No library has been used in this tutorial.
First, we will create an input field for password.
<!-- input field for password -->
<input type="password" id="password" />
Then, we will create a button that will show or hide the password.
<!-- button to toggle show/hide -->
<button type="button" onclick="togglePassword()">Show/hide</button>
Finally, we will create a Javascript function that will change the type of password input field.
// function to toggle password
function togglePassword() {
// get password input field
const password = document.getElementById("password")
// change input type to password if currently is text, and change to text if currently is password
password.type = (password.type == "password") ? "text" : "password"
}
This function will first get the DOM of input field for password. Then it will execute a ternary operator to check if the current type is “password”, meaning the password is hidden, then it will set it’s type to “text” and the password will be visible to the user.
And if currently the type is “text”, it means that user is currently viewing the password, then it will set it’s type to “password” and hence hide the password.
Complete source code:
<!-- input field for password -->
<input type="password" id="password" />
<!-- button to toggle show/hide -->
<button type="button" onclick="togglePassword()">Show/hide</button>
<script>
// function to toggle password
function togglePassword() {
// get password input field
const password = document.getElementById("password")
// change input type to password if currently is text, and change to text if currently is password
password.type = (password.type == "password") ? "text" : "password"
}
</script>
Above code will create an input field and a button. By default, what you enter in the input field will not be visible to you. But once you press the button, the password will be visible. And on again pressing the button, it will be hidden. That’s how you can show or hide an input field for password using simple HTML and Javascript.
Let’s say you have a webpage where you want to show an anchor link to the user that will redirect the user to his previous page. So we will first create an anchor link to the first page.
<!-- create an anchor tag to page 2 and attach an onclick event listener to it -->
<a href="page2.php" onclick="gotoPage()">Page 2</a>
When it is clicked, we will call a Javascript function instead of directly redirecting to new page.
function gotoPage() {
// prevent the page from redirecting
event.preventDefault()
// get current page location and save it in local storage
localStorage.setItem("referrer", window.location.href)
// redirect to the href attribute
window.location.href = event.target.getAttribute("href") || ""
}
This function will first prevent the page from redirecting to anchor href attribute. Then it will get the current page URL, along with all its query parameters, and save it in local storage. Finally, it will get the anchor tag’s href attribute and redirect the user to it.
In order to redirect the user back to previous page, we need to create a file named “page2.php” and create another anchor link in it. By default, the anchor link will be hidden. It will only be visible if local storage has some referrer value.
<!-- create back button, hidden by default -->
<a id="referrer" style="display: none;">Go back</a>
After that, we run a Javascript code that will get the local storage value and set in to that anchor tag.
// check if value exists in referrer local storage
const referrerValue = localStorage.getItem("referrer")
if (referrerValue) {
// if yes, then set it to the href attribute of back button
const referrerNode = document.getElementById("referrer")
referrerNode.setAttribute("href", referrerValue)
// and display the button
referrerNode.style.display = ""
}
It will first get the referrer value from local storage. If there is any value, then it will get the back button node and referrer value. It will set the href attribute of back button to the referrer value. And finally, it will display the back button. If there is no referrer, then the back button will stay hidden.
In one of our blog post, we capitalized the string in PHP. In this, we will show you, how you can capitalize the string in Javascript. The code used in this tutorial can be used in any Javascript framework or library like React.js, Vue.js, Angular etc.
The first thing we need to do is to split the string using space.
let str = "adnan afzal"
const parts = str.split(" ") // ["adnan", "afzal"]
split(delimiter): Is a function in Javascript that can be chained on strings. It will split the string into parts using delimiter and return it as an array.
Then we will loop through all parts of that array.
for (let a = 0; a < parts.length; a++) {
// [section-1]
}
After that, we will first convert the first letter of the word to uppercase. Then we will return the remaining letters in that word and concatenate them.
// uppercase first letter
const firstLetter = parts[a][0].toUpperCase()
// return string except for first character (as it is uppercased)
const remainingStr = parts[a].substr(1)
// concatenate both strings
parts[a] = firstLetter + remainingStr
toUpperCase(): A Javascript function that can be called from string and will return the uppercase version of that string.
substr(start): This function can also be called from strings. It will return the remaining string starting from start parameter.
parts[a]: This will get the current word in the iteration. For example “adnan”.
parts[a][0]: This will get the first letter of the current word. For example “a”.
parts[a][0].toUpperCase(): Converts “a” to “A”.
parts[a].substr(1): Returns the string skipping the first character i.e. “dnan”.
Thus concatenating “A” and “dnan”, we get “Adnan”. This will do for each word. The last thing we need to do is to combine all the capitalized words together. Following code goes after the loop.
If you are working in Firebase, then you might have encountered an issue with child_added event or onChildAdded method. It is called multiple times on page load. However, it should have been called only when a new child is added. As per Firebase documentation, this is the expected behavior. It first returns all the existing childs and then listen for new added children. But there might be a scenario where you want to perform some action only on new child, not on existing children.
So I have a Firebase database and I have a users array in it.
Firebase database users
Step 1
The way I got around this problem, is by first I am looping through all the records in Firebase.
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js";
import { getDatabase, ref, get, onChildAdded } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-database.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const database = getDatabase(app);
const usersRef = ref(database, "users")
// [step 2]
get(usersRef).then(function (snapshot) {
if (snapshot.exists()) {
snapshot.forEach(function (childSnapshot) {
// [step 3]
})
}
})
</script>
Note: Make sure to use your own Firebase configurations. If you do not know how to setup Firebase configurations, you can follow our guide.
Step 2
After that, we will create a variable that will count the length of users array. Write the following line in place of // [step 2].
let count = 0
This will initialize the variable “count”.
Step 3
Then increment that variable’s value by 1. Following code goes in place of // [step 3].
count++
if (snapshot.size == count) {
// [step 4]
}
This will also checks when all the element of array has been looped.
Step 4
Initialize another variable that will tell if all the elements has been fetched.
let hasInitializedFirebase = false
Then we will set its value to true at // [step 4].
We are adding a delay of 1 second to prevent the onChildAdded event to be called immidiately.
Step 5
Last step is to call the onChildAdded event and check if the variable hasInitializedFirebase is true.
onChildAdded(usersRef, async function (data) {
if (hasInitializedFirebase) {
console.log(data)
}
})
If you reload the page now, you will not see the onChildAdded logs, but as soon as you insert a new element in array, you will see that the console.log(data) has been called.
Complete code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
</head>
<body>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js";
import { getDatabase, ref, get, set, push, onChildAdded, onChildChanged } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-database.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const database = getDatabase(app);
const usersRef = ref(database, "users")
let count = 0
let hasInitializedFirebase = false
get(usersRef).then(function (snapshot) {
if (snapshot.exists()) {
snapshot.forEach(function (childSnapshot) {
count++
if (snapshot.size == count) {
setTimeout(function () {
hasInitializedFirebase = true;
}, 1000)
}
})
} else {
setTimeout(function () {
hasInitializedFirebase = true;
}, 1000)
}
})
onChildAdded(usersRef, async function (data) {
if (hasInitializedFirebase) {
console.log(data)
}
})
</script>
</body>
</html>
That’s how you can prevent onChildAdded event to be called multiples times in Firebase. If you face any problem in this, feel free to contact me from chat widget on bottom right.
Getting file extension from file name or path can be done in Javascript and PHP. I will show you the steps to get the file extension and you can apply them in any language you want.
Following code will get the file extension from file name or file path in Javascript:
If you are using the DataTable Javascript library and are having trouble searching in all fields of the dataset except for the only one visible, then I will show you, how you can search in all fields of the DataTable.
By default, DataTable searches in all fields only on those fields that are visible on the table. Let’s say you have a dataset containing “name”, “designation”, and “country” fields. But you are displaying only “name”, and “designation” on the table.
In this tutorial, we will teach you, how you can convert UTC time to your local timezone in Node JS.
Following code will first get the current datetime in UTC, then convert it to user local timezone.
Note: You do not need to provide the timeZone from client side. Node JS will automatically detect the timeZone from incoming request and convert it accordingly.
let date = new Date()
date = new Date(date + " UTC")
date = date.toUTCString()
result.send(date + "")
If you want to return the datetime in specific format, you can do it like this:
// Options for date and time formattingconst options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true}const date = (newDate()).toLocaleString("en-US", options)
This will return the date and time in format: “Tuesday, 2 July, 2024 at 05:11:05 pm”.
