You’re tasked with showing a user some notifications. What do you do, first? Here’s the thought process I go through when creating a feature on a web page (or an entire web app).
The first thing I do is create a user story.
- User sees notification button in the top right of the screen.
- User clicks the notification button.
- User sees notifications appear.
Next, I hash out the user story.
User sees notification button in the top right of the screen.
Create a button and put it in the top right of the screen.
Create a div with the ID “notifs-top-right” and put it run under the button.
Wrap both elements in a div.
User clicks the notification button.
What happens when the user clicks the notification button? He sees his notifications.
Since the user sees some notifications when he clicks the button, let’s create a function called showNotifications for showing the notifications.
Where do those notifications come from? Most likely, they come from the back end (server) of the website, but we can hard code the notifications in a JavaScript object, for now.
Create another function called getNotifications and hard code the notifications in this function. If this was real life, the getNotifications function would most likely make an HTTP GET request (like https://somewebsite.com/api/get-notifications) to some server using AJAX.
What do we do once we get the notifications? We have to show them to the user somehow, and we do that by creating some JavaScript elements and appending them to the “notifs-top-right” element.
User sees the notifications in the top right of the screen.
Create a function called createNotificationElements.
In this function, create the elements and attach them to the div to make them visible to the user.
After thinking through that, let’s create an easy-to-follow to-do list. Coding this should be a lot easier, now that we know exactly what we need to do. We’ve actually “coded” a big portion of our program already, all without writing a single line of code.
Create HTML button and empty div for notifications.
Create showNotifications function.
Create getNotifications function.
Create createNotifications function.
Here’s the actual code I wrote after thinking through those steps.
<div class="notifications">
<div class="notifs-button" onclick="showNotification()">Notifications</div>
<div id="notifs-top-right"></div>
</div>
<script>
function showNotification () {
const notifications = getNotifications();
createNotifications(notifications);
}
function getNotifications () {
const notifications = [
{
message: 'John Wayne liked your post',
time: '40 years ago',
},
{
message: 'Ed Sullivan mentioned you in a post',
time: '50 years ago',
},
{
message: 'You have a new message from Al Capone',
time: '75 years ago',
},
];
return notifications;
}
function createNotifications (notifications) {
let notifsDiv = document.getElementById('notifs-top-right');
notifsDiv.innerHTML = '';
notifications.map((notification) => {
let notifDiv = document.createElement('div');
notifDiv.innerText = `${notification.message} - ${notification.time}.`;
notifsDiv.appendChild(notifDiv);
});
}
</script>
<style>
.notifications {
text-align: right;
}
.notifs-button {
padding: 8px 16px;
border-radius: 5px;
background-color: #ddd;
cursor: pointer;
display: inline-block;
}
</style>
I’ll break down the code above piece by piece and put my thoughts under each code section. It almost seems like I’m explaining each code section, but, in reality, I created the explanation before the code.
User sees notification button in the top right of the screen.
Create a button and put it in the top right of the screen.
Create a div with the ID “notifs-top-right” and put it run under the button.
Wrap both elements in a div.
<div class="notifications">
<div class="notifs-button" onclick="showNotification()">Notifications</div>
<div id="notifs-top-right"></div>
</div>
User clicks the notification button.
What happens when the user clicks the notification button? He sees his notifications.
Since the user sees some notifications when he clicks the button, let’s create a function called showNotifications for showing the notifications.
function showNotification () {
const notifications = getNotifications();
createNotifications(notifications);
}
Where do those notifications come from? Most likely, they come from the back end (server) of the website, but we can hard code the notifications in a JavaScript object, for now.
Create another function called getNotifications and hard code the notifications in this function. If this was real life, the getNotifications function would make an HTTP request (like https://somewebsite.com/api/get-notifications) to some server using AJAX.
function getNotifications () {
const notifications = [
{
message: 'John Wayne liked your post',
time: '40 years ago',
},
{
message: 'Ed Sullivan mentioned you in a post',
time: '50 years ago',
},
{
message: 'You have a new message from Al Capone',
time: '75 years ago',
},
];
return notifications;
}
User sees the notifications in the top right of the screen.
What do we do once we get the notifications? We have to show them to the user somehow, and we do that by creating some JavaScript elements and appending them to the “notifs-top-right” element.
Create a function called createNotificationElements.
In this function, create the elements and attach them to the div to make them visible to the user.
function createNotifications (notifications) {
let notifsDiv = document.getElementById('notifs-top-right');
notifsDiv.innerHTML = '';
notifications.map((notification) => {
let notifDiv = document.createElement('div');
notifDiv.innerText = `${notification.message} - ${notification.time}.`;
notifsDiv.appendChild(notifDiv);
});
}
You can ignore the CSS styles section since we’re focusing on the JavaScript here.
That’s my typical thought process when I need to add a new feature to a website. I create a “user story” to get an idea of what I need to create. Then, I fill out the user story, adding more technical thoughts under each part. Finally, I code it.