DEV Community: Joel Ezema

I got tired of losing focus while typing, so I built Phokus

Joel Ezema — Thu, 10 Sep 2026 18:00:44 +0000

What on earth is Phokus, gng?

Well, every modern note-taking app out there is trying way too hard. I just wanted a clean screen to dump my thoughts, but instead I’m getting hit with AI writing assistants I didn't ask for, sidebars that look like an aeroplane cockpit, and cloud-syncing pop-ups that ruin my entire workflow.
Because of this, I built Phokus — a completely blank, distraction-free markdown notepad utility that does exactly one thing: lets you write in peace.

"Just use Notepad, bro"
Shut up.
Here's why it's actually useful:

Zero Clutter: No accounts, no configurations, no menus (kinda). It’s literally just a blank canvas for typing.
The 'Distraktions' Counter: To gamify things, it tracks exactly how many times your focus slips or you click away. It also roasts you for getting distracted one too many times.

Stupidly Fast: Built clean with basic frontend tech so it loads the millisecond you click the link. (Yes, I use Vanilla JS in 2026. Stone me).

I'm keeping this bare-bones so it doesn't become like the bloatware I hate.
I'd love any feedback you guys have on the UI/UX, or any small features you think could actually help you stay in the zone without messing up the clean aesthetic. I've learnt so much while building this, and I'm about to learn much more.

Here's the link to the GitHub repo:

joelEzema / phokus-notepad

A small notepad project built to fight distractions. I'll be adding features one-by-one

phokus-notepad

My biggest project yet... or maybe my first actual project

What is Phokus tho?

Well, Phokus is a small project I decided to start. The whole idea was to make a notepad that actively penalized the user for getting distracted. It slowly evolved from that to a text editor that not only roasts you for having the attention span of the average Gen Alpha kid, but one that also praises you for staying focused on the actual goal

What I've done so far

Right now the notepad only blurs for a few seconds when the user changes tabs. Not very evil, huh?
The above line is from a few weeks ago. I've added more things, but the highlight of the new features so far is the achievements you unlock for determination (and ADHD) Try to catch all the references (if you can 😏)

Features to be added in the

…

View on GitHub

And the live GitHub Pages web app:

joelezema.github.io

"Phokus"- An Anti-Distraction Notepad Project

Joel Ezema — Mon, 31 Aug 2026 14:58:33 +0000

I started developing a notepad program that tracks user behaviour and penalises users for getting distracted.
This is the link to the GitHub repo:

joelEzema / phokus-notepad

A small notepad project built to fight distractions. I'll be adding features one-by-one

phokus-notepad

A small notepad project built to fight distractions. I'll be adding features one-by-one.

What is Phokus tho?

Well, Phokus is a small project I decided to start. The whole idea was to make a notepad that actively penalized the user for getting distracted.

What I've done so far

Right now the notepad only blurs for a few seconds when the user changes tabs. Not very evil, huh?

Features to be added in the future

Distraktion counter: Not a spelling error.
Wordcount Milestones: Celebrates the user for typing a certain number of words.
Fade out timer: Notepad starts fading out when the user stops typing for too long. I might add something else that brings back the user's attention.
Deep Mode: When enabled, all the content in the notepad gets deleted upon switching tabs. Yes, even in localStorage

View on GitHub

More information is available in the README file

Morse Code Converter!

Joel Ezema — Thu, 27 Aug 2026 16:15:18 +0000

Today, I decided to make a simple program that converts normal text to Morse code. Here's the rundown:

The HTML

I started with a few lines of HTML to form the base of the program:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Morse Code Converter</title>
</head>
<body>
    <div id="container">
        <h2>Morse Code Converter!</h2>
        <p>Enter the message to be converted.</p>
        <input type="text" id="input" placeholder="Enter it here"><br>
        <button onclick="submit()">Convert</button>
        <div id="output"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

The CSS

Now, I suck at design, so I had AI handle the CSS 😭. I was satisfied with what it gave me, so I moved on to the next part.

The Fun Part

First, I defined some variables that I would use later. I also created a morseDecoderMap object to map input to its Morse Code translation.

let input = document.getElementById("input");
let output = document.getElementById("output");
let decodedMessage = "";
const morseDecoderMap = {
  // Letters
  'A': '.-',     'B': '-...',   'C': '-.-.',   'D': '-..',
  'E': '.',      'F': '..-.',   'G': '--.',    'H': '....',
  'I': '..',     'J': '.---',   'K': '-.-',    'L': '.-..',
  'M': '--',     'N': '-.',     'O': '---',    'P': '.--.',
  'Q': '--.-',   'R': '.-.',    'S': '...',    'T': '-',
  'U': '..-',    'V': '...-',   'W': '.--',    'X': '-..-',
  'Y': '-.--',   'Z': '--..',

  // Digits
  '0': '-----',  '1': '.----',  '2': '..---',  '3': '...--',
  '4': '....-',  '5': '.....',  '6': '-....',  '7': '--...',
  '8': '---..',  '9': '----.', ' ':' , '
};

Next, I created a submit() function:

function submit(){
   let inputArray = input.value.split("");
   decodedMessage = inputArray.map(character => morseDecoderMap[character.toUpperCase()] || "?").join(" ");
   output.innerHTML = `${decodedMessage}`
}

Explanation
I split the input into individual characters and stored them in an array. Next, I used the morseDecoderMap object to convert them to their Morse Code counterparts, making sure to convert lowercase letters to uppercase (much easier than adding every lowercase letter to the decoder object). I then joined them together into a single string and displayed it as the output.

Notes

If not for the console, I would've been stuck for a long time due to an uncaught type error from typing .getELementById() instead of .getElementById() (bruh).

I had to change the output font to monospace because the AI's font made it hard to distinguish between letters in Morse Code.

If you want to mess around with the code yourself, here's the link to the GitHub repository.

joelEzema / morse-code-converter

Simple Morse Code converter. That's it really

Bye fellas

Knowing When to Use If/Else vs. Switch in JavaScript

Joel Ezema — Sun, 23 Aug 2026 15:08:35 +0000

If/else statements - We all know and love them. While they are incredibly powerful, there comes a point where a long chain of conditions only makes your code look messy. Choosing between if/else and switch depends on readability, but there's a hidden pro tip that makes switch much more powerful than many people think at first.

Traditional Approach: If/Else

Normally, we use if/else when our logic depends on complex ranges and multiple variables:

// Hard to scan, bulky, and prone to typos
let weatherAdvice = "";

if (temperature < 15 && isRaining) {
    weatherAdvice = "Grab a heavy coat and an umbrella! 🌧️🧥";
} else if (temperature < 15 && !isRaining) {
    weatherAdvice = "It's cold but dry. Just a jacket is fine! 🧥";
} else if (temperature >= 15 && isRaining && isNightTime) {
    weatherAdvice = "Warm, rainy night. Stay indoors if you can! 🌧️🌃";
} else if (temperature >= 15 && isRaining && !isNightTime) {
    weatherAdvice = "Warm rain during the day. Don't forget your umbrella! 🌧️🌦️";
} else if (temperature >= 30 && !isRaining) {
    weatherAdvice = "It's scorching hot! Stay hydrated! ☀️🥤";
} else {
    weatherAdvice = "Weather seems pleasant today! 😎";
}

Pro Tip: Using `switch(true)`

Many developers think you can only use switch when you're checking a single variable against fixed values. However, you can use a switch statement for complex ranges by passing the boolean value true into the switch condition.
Here is a cleaner switch statement version of the above code block:

// Much easier on the eyes
let weatherAdvice = "";

switch (true) {
    case (temperature < 15 && isRaining):
        weatherAdvice = "Grab a heavy coat and an umbrella! 🌧️🧥";
        break;

    case (temperature < 15 && !isRaining):
        weatherAdvice = "It's cold but dry. Just a jacket is fine! 🧥";
        break;

    case (temperature >= 15 && isRaining && isNightTime):
        weatherAdvice = "Warm, rainy night. Stay indoors if you can! 🌧️🌃";
        break;

    case (temperature >= 15 && isRaining && !isNightTime):
        weatherAdvice = "Warm rain during the day. Don't forget your umbrella! 🌧️🌦️";
        break;

    case (temperature >= 30 && !isRaining):
        weatherAdvice = "It's scorching hot! Stay hydrated! ☀️🥤";
        break;

    default:
        weatherAdvice = "Weather seems pleasant today! 😎";
}

By shifting to this pattern, you can handle multiple variables while keeping your code clean and easy to scan. If your else if chains start getting too long, test out this hack. Your future self will thank you!

Incomplete Weather App Project

Joel Ezema — Sun, 23 Aug 2026 14:33:14 +0000

I uploaded my incomplete weather app to a GitHub repository.
The UI is still extremely unpolished, and the weather information doesn't get displayed properly. However, all the data is fetched properly.
If you're learning Web Development, I recommend messing around with the code and seeing if you can get the UI components to display properly. Take it as a little learning challenge.

Here's the link to the GitHub repository:
https://github.com/joelEzema/incomplete-weather-app

Building in Public: My Journey Constructing a Weather App with OpenWeatherMap

Joel Ezema — Fri, 21 Aug 2026 16:33:18 +0000

Hey DEV community! I'm currently a beginner-intermediate developer learning software engineering, and I wanted to start documenting my builds. Right now, I am constructing a responsive weather app using HTML, CSS, and Vanilla JavaScript.
I'm integrating the OpenWeatherMap API to fetch live weather data. For this project, I'm focusing on browser-native data fetching using the JavaScript fetch API and mastering the flow of async/await functions so my app requests payloads securely without freezing the user interface.
I’m currently tackling a few logic roadblocks regarding temperature metric formatting (getting it to output Celsius smoothly instead of Kelvin), but I'm building it all under a strict 2-hour daily hardware constraint. I'll drop the full repository link and a complete code tutorial once the UI elements are finalized. If you have any tips for handling deep JSON objects from OpenWeatherMap, drop them in the comments! I also welcome any and all questions.

DEV Community: Joel Ezema

I got tired of losing focus while typing, so I built Phokus

What on earth is Phokus, gng?

joelEzema / phokus-notepad

A small notepad project built to fight distractions. I'll be adding features one-by-one

phokus-notepad

What is Phokus tho?

What I've done so far

Features to be added in the

"Phokus"- An Anti-Distraction Notepad Project

joelEzema / phokus-notepad

A small notepad project built to fight distractions. I'll be adding features one-by-one

phokus-notepad

What is Phokus tho?

What I've done so far

Features to be added in the future

Morse Code Converter!

The HTML

The CSS

The Fun Part

Notes

joelEzema / morse-code-converter

Simple Morse Code converter. That's it really

Knowing When to Use If/Else vs. Switch in JavaScript

Traditional Approach: If/Else

Pro Tip: Using switch(true)

Incomplete Weather App Project

Building in Public: My Journey Constructing a Weather App with OpenWeatherMap

Pro Tip: Using `switch(true)`