DEV Community: Femi Fatokun

AI Prompt Optimization Made Simple: How BrimAI Eliminates Prompt Engineering Complexity for Better ChatGPT and LLM Results

Femi Fatokun — Mon, 22 Dec 2025 10:44:45 +0000

Prompt engineering is the practice of shaping how large language models behave by carefully crafting instructions. Since LLMs do not “understand” tasks in a deterministic way, their output is heavily influenced by how context, intent, and constraints are presented.

Because these models are probabilistic and context-sensitive, how you ask matters just as much as what you ask. A slight change in wording, ordering, or emphasis can produce noticeably different results. The same request, framed differently, can lead to different tone, structure, or even conclusions.

To compensate for this, users began developing prompt strategies. They stacked instructions to reduce ambiguity, assigned roles to guide reasoning, enforced formatting rules to stabilize outputs, and relied on repeated trial-and-error until the response aligned with expectations. Over time, prompt writing evolved from simple queries into long, carefully engineered inputs.

Prompt engineering worked because it gave users a sense of control. It allowed them to steer model behavior without changing the model itself, making powerful AI accessible with nothing more than text.

But that control came at a cost.

The complexity didn’t disappear — it was simply shifted onto the user. Prompts became fragile, verbose, and difficult to maintain. Each improvement required more experimentation, more rules, and more hidden assumptions. What started as a way to simplify AI interaction slowly became a new layer of technical debt.

Three Common Prompt Engineering Strategies (And Their Limits)

As users tried to gain more reliable control over large language models, a few prompt engineering patterns became common. While these strategies can improve results, each introduces its own limitations.

1. Role & Instruction Stacking

This strategy relies on assigning the model a role and layering explicit instructions to guide its behavior.

Examples:

You are a senior backend engineer with 10 years of experience. Analyze the following system design. Explain trade-offs clearly.
You are an expert data scientist. Analyze this dataset for trends, focus on quarterly patterns, use technical terminology
You are a market research analyst with expertise in consumer behavior trends. Evaluate the competitive landscape for this product category. Structure your analysis around market positioning, identify key differentiation opportunities, and maintain an objective, data-driven tone while highlighting actionable insights.

Why it works:

This stacking approach is effective because each layer reinforces the others, the role establishes expertise level and perspective, the instructions define task boundaries, and additional context fine-tunes style and focus. By combining these elements into a compound framework, you provide strong context for the AI's response, reduce ambiguity about what's expected, and shape both the tone and depth of the output, resulting in more targeted and relevant responses than any single element would produce alone.

The limits:

Prompts become long and verbose
Small wording changes can alter results
Hard to reuse across different tasks
Logic lives in text, not in systems

Over time, these prompts start behaving like fragile configuration files rather than simple instructions.

2. Few-Shot & Example-Based Prompting

Here, the model is guided by examples of desired input and output rather than instructions alone.

Example:

Task: Classify customer feedback sentiment

Classify the following customer feedback as Positive, Negative, or Neutral:

Example 1: "The product arrived quickly and works perfectly!" → Positive

Example 2: "Terrible customer service, no one responded to my emails." → Negative

Example 3: "I ordered the blue version and received the blue version." → Neutral

Now classify this:
"The interface is confusing but the features are powerful once you figure them out."

Why it works:

Few-shot prompting provides the AI with concrete examples that demonstrate the desired pattern, format, or logic before presenting the actual task. This approach improves consistency across responses by establishing a clear template to follow, helps with classification and structured output by showing exactly what format and criteria to apply, and reduces guesswork for the model by anchoring its understanding in specific demonstrations rather than abstract descriptions. The examples serve as a reference framework that guides the AI toward producing outputs that match your established patterns.

The limits:

Consumes significant tokens
Needs constant updates as requirements evolve
Often overfits to the provided examples
Breaks quietly when inputs fall outside patterns

What starts as guidance slowly becomes a maintenance burden.

3. Iterative Prompt Tuning

This is the most common but least visible strategy: refining prompts through trial and error.

Typical workflow:

Write a prompt
Test it
Adjust wording or structure
Save the “best” version somewhere
Repeat when results degrade

Why it works:

Allows incremental improvement
Helps adapt prompts to specific use cases
Requires no extra tooling

The limits:

Time-consuming and manual
No guarantees in production
Prompts turn into undocumented business logic
Inconsistent behavior across users and environments

As systems grow, this approach doesn’t scale. Prompt tuning becomes a hidden dependency rather than a reliable foundation.

These strategies helped unlock early value from AI, but they all share the same problem, they push complexity onto the user instead of abstracting it away.

The Real Issue: Prompt Engineering Pushes Complexity to the User

This is a critical observation about the current state of AI interaction. Prompt engineering essentially transfers the burden of understanding how AI systems work from the model to the human user. Instead of the AI adapting intelligently to natural human communication, users must learn specialized techniques—role stacking, few-shot examples, chain-of-thought reasoning, output formatting instructions—to coax desired behaviors from the system.

Key Problems

Accessibility barriers
Effective AI use becomes gated behind meta-knowledge about prompting strategies, disadvantaging users who lack time or resources to learn these techniques.
Cognitive overhead
Users must constantly think about how to ask rather than what to ask, adding friction to every interaction and slowing down workflows.
Expertise paradox
The people who could benefit most from AI assistance (those lacking domain expertise) are often least equipped to engineer effective prompts, while experts who already know the answers are better at extracting useful responses.
Brittleness
Small variations in phrasing can produce wildly different results, making the system feel unpredictable and unreliable to casual users.

The Fundamental Question

Should humans be learning to speak "AI" or should AI be learning to understand humans? Ideally, models would infer intent, adapt to context, and handle ambiguity gracefully without requiring users to become prompt engineers. The need for elaborate prompting strategies is really a symptom of current AI limitations rather than a sustainable solution.

Introducing BrimAI: Prompt Engineering, Done Once

BrimAI eliminates the prompt engineering burden by doing the hard work for you once. Instead of forcing every user to master role stacking, few-shot examples, and output formatting, BrimAI provides professionally optimized prompts as a service. You describe what you need, and BrimAI delivers battle-tested, pre-engineered prompts designed to extract optimal responses from LLM models consistently.

No more trial-and-error tweaking, no more studying prompting techniques, no more wrestling with ambiguous outputs. BrimAI democratizes access to expert-level AI interactions by translating your intent into the precise prompting structures that models respond to best.

Whether you're building applications, automating workflows, or simply trying to get better results from AI tools, BrimAI handles the complexity so you can focus on your actual work. It's prompt engineering done right, done once, and ready when you need it.

BrimAI - AI Prompt Enhancement Tool | Optimize Your AI Prompts for Better Results

Transform your AI prompts into masterpieces. Works with ChatGPT, Claude, Gemini & 50+ AI platforms. Free Chrome extension available.

trybrim.app

How BrimAI Solves Prompt Engineering in Real Time

BrimAI bridges the gap between natural user intent and optimal AI performance through a seamless, integrated approach that works where you already interact with AI.

Dual-Interface Solution

Chrome Extension
BrimAI embeds directly into popular AI chatbot interfaces (ChatGPT, Claude, etc.) with a simple button. When you type a prompt naturally, clicking the BrimAI button instantly transforms it into an optimized version using proven prompting strategies role stacking, contextual framing, output structuring without requiring you to understand the underlying techniques. The AI receives the enhanced prompt, you get better results, and the complexity remains invisible.
Web Interface
For users building workflows or refining prompts over time, BrimAI provides a comprehensive dashboard where all past prompts are automatically saved and accessible. You can review what worked, iterate on successful patterns, and organize prompts into custom libraries by project, use case, or domain. This creates a growing repository of optimized prompts tailored to your specific needs.

Real-Time Intelligence

The magic happens in the moment of interaction. Rather than forcing users to pre-plan their prompting strategy or learn complex techniques, BrimAI analyzes user intent on the fly and applies appropriate optimization patterns instantly. It's prompt engineering as a service invisible, automatic, and effectively turning every user into an expert without the learning curve.

Experience it yourself at:

Prompt Engineering Was a Bridge, Not the Destination

Prompt engineering emerged as a necessary skill to unlock AI's potential, a workaround born from the gap between human intent and machine comprehension. But it was never meant to be permanent. It's a transitional phase, a scaffolding we needed while AI systems learned to interpret what we actually mean, not just what we literally say.

As AI matures, the mechanics of prompting should fade into the background, becoming an internal process rather than a user-facing requirement. The interface shouldn't be crafted instructions it should be natural expression. BrimAI is built for exactly that shift.

We handle the prompt engineering layer so you don't have to think about it. You communicate your intent naturally, and BrimAI translates it into the optimized structures that AI systems currently need—invisibly, instantly, automatically. As models evolve and prompt sensitivity decreases, BrimAI evolves with them, continuously adapting to ensure you always get optimal results without changing how you work.

Because the future of AI isn't about teaching users how to talk to machines, it's about letting machines understand intent. BrimAI bridges today's reality with tomorrow's promise, making that future accessible right now.

Start bridging the gap at:

BrimAI - AI Prompt Enhancement Tool | Optimize Your AI Prompts for Better Results

Transform your AI prompts into masterpieces. Works with ChatGPT, Claude, Gemini & 50+ AI platforms. Free Chrome extension available.

trybrim.app

A step-by-step guide to creating a bot that publishes push events on a GitHub repository to a slack channel using nodejs

Femi Fatokun — Sat, 04 Nov 2023 21:45:48 +0000

Introduction

If you are familiar with Slack, I believe you should have seen some Slackbots in action, these actions are very vast and include things like calendar event reminders, standup updates, meeting overviews, and so on. Our main focus in this article is to build a nodejs application that listens to push events on our GitHub repo and publishes a message to our slack channel, hence we are building a slack bot for GitHub push events.

Prerequisites

Nodejs development environment.
Basic knowledge of Expressjs.
A slack workspace.
A GitHub repository for testing.
An ngrok account.

Create a Slack channel in a workspace.
Set up incoming webhook for the slack channel.
Run code locally.
Code breakdown.
Set GitHub webhook.
Conclusion.

Create a Slack channel in your workspace

This step is quite straightforward, login to your Slack workspace on any of your Slack clients (web, mobile, or desktop) and follow the steps to create a Slack channel.

Setup incoming webhook for slack channel

We need to generate a webhook that will be used to publish messages to our Slack channel, we will do this by following these steps.

Make sure you are logged in to your Slack account on your browser.
Enter https://api.slack.com/apps?new_app=1
Once you open the page you will get a modal where you will choose whether to create an app from scratch or use a manifest, please click the first option.
Next enter the name of your app and select your desired workspace.
You will be redirected to the app page, scroll down and click on the Incoming webhooks card.
Then scroll down to the bottom of the page and click the Add New Webhook to Workspace button.
Select the channel to want to publish the message to and click Allow.
After step 6 you will be redirected to the app page, if you scroll to the Webhook URLs for Your Workspace, you will find that a new webhook has been created.
In order to test the webhook, we can copy the curl script on the script and try to execute it in our terminal, if everything works fine a message should be sent to your slack channel.

Run code locally

Our major intention for this article is to listen for push events on a GitHub repo and publish a message to our Slack channel. In order to achieve this we need to run a very simple backend API that will serve as an intermediary between github and Slack. In this section, we will run our backend API locally.

Clone the git repo by simply running git clone https://github.com/talibackend/slack-bot.git in our terminal.
Change the directory in your terminal by running cd slack-bot.
Once inside the directory run npm install to install all the dependencies needed by our application.
Run npm start, Server is running on port 8080 should be printed to the console, this signifies that our application is running.

Code breakdown

Our app is simply a nodejs app, therefore it contains all the basic files and directories of every other nodejs application. We will only focus on explaining the content of the index.js file in the base of our directory.

From lines 1 to 4 we imported all the required modules for our application.

const express = require('express');
const bp = require('body-parser');
const app = express();
const fetch = require('node-fetch');

On lines 6 and 8 we used the necessary middleware to allow JSON object in the body and then declared a get route to / respectively.

app.use(bp.json());

app.get('/', (req, res)=>{ return res.send("Hello world"); });

From line 10 to 31 we declared a post route named /webhook, this is where the actual action happens.

From lines 11 to 16 we extracted the necessary information out of the body object of the req object inside the route definition callback.

let body = req.body;
let branch = body.ref.replace('refs/heads/', '');
let added = body.head_commit.added.join(', ');
let modified = body.head_commit.modified.join(', ');
let removed = body.head_commit.removed.join(', ');
let commit_link = body.head_commit.url;

On line 18 we use the extracted data to construct a simple string called message.

let message = `New Push\n\nBranch : ${branch}\nAdded : ${added}\nModified : ${modified}\nRemoved : ${removed}\nLink : ${commit_link}`;

From line 20 to 26 we defined an object called options, this object is required for calling the slack webhook.

let options = {
    method : "POST",
    headers : {
        'Content-Type' : 'application/json'
    },
    body : JSON.stringify({text : message})
}

On line 28 we made a request to our slack webhook from step 1 with our own options object.

fetch('https://hooks.slack.com/services/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', options).then().catch(err=>console.log(err))

On line 30 marking the end of our request, we simply returned a string.

return res.send("Working");

On line 33 we simply initialized our application on port 8080.

app.listen(8080, ()=>{console.log("Server is running on port 8080")});

Setup GitHub webhook

At this point, we've been able to set up a Slack webhook and also run our application locally. The last thing we must do is connect our application(running locally) to our GitHub repo.

This task seems impossible because at this point our application is only accessible on our computer(or local network), but we need to expose our application to the rest of the whole world, we can achieve this by using ngrok, ngrok is an open source software that uses a reverse proxy to expose locally running application to the internet. If you've not set up ngrok on your system, please head to https://ngrok.com/ and follow the required steps.

Now we will use ngrok to expose our application to the internet by following these steps.

Make sure our application is running.
Run ngrok http 8080, a link will be printed to the console.
Copy the link and try to access it in your browser, Hello World should be printed on your screen.
Navigate to your GitHub repository in your browser.
Navigate to the settings tab of the repo and click on Webhooks from the sidebar.
Then click Add Webhook
Fill in the necessary information, the Payload URL should be {{ngrok_generated_link}}/webhook, Content Type should be application/json then click Add Webhook.
At this point we are ready to test our bot, we can simply test it by pushing commits to our GitHub repo, on every push a simple message containing pieces of information about the push event will be sent to our slack channel.

Conclusion

It is very important to note that the link generated using ngrok will only be available for 2 hours if you are on their free plan, therefore what we did in this article was simply experimental, to something like this in a production environment, you will have to deploy your backend application to a server, I have a comprehensive tutorial on that - https://dev.to/talibackend/deploying-and-securing-your-nodejs-app-on-a-digitalocean-droplet-a-comprehensive-step-by-step-deployment-guide-with-ssl-1bhn.

If you prefer to watch me do this on youtube please check out the video here

Thanks for Reading.....

Deploying and Securing Your Node.js App on a DigitalOcean Droplet: A Comprehensive Step-by-Step Deployment Guide with SSL.

Femi Fatokun — Fri, 13 Oct 2023 09:19:05 +0000

Introduction

Nodejs is one of the most popularly used web development runtime environments, it is the backbone of all javascript frameworks including popular ones like, react, angular, express, and so on. Nodejs can be used to develop various kinds of applications including frontend and backend. Our major concern in this article is to deploy a very simple nodejs backend application and add security to it. Follow along...

Prerequisites

Your local development environment for nodejs development.
A digitalocean account (you can use any other provider of your choice)
A domain name, I have a domain name on a cpanel managed hosting plan, but you can use any domain name provider of your choice.

Table of content

Create a basic nodejs app and run it locally.
Provision a droplet on digitalocean.
Access droplet and update packages.
Install node on droplet.
Install nginx on the droplet.
Pull the application and run it.
Setup DNS Record.
Setup reverse proxy
Secure the application using SSL.

Create a basic nodejs app and run it locally

For this step I have already created a very simple nodejs application, all you have to do is to clone the repo and follow these steps to run it locally.

Clone the repo https://github.com/talibackend/very-slim-nodejs-app.git
Enter the directory where the repo was cloned.
Run npm install to install the npm packages.
Create a new file .env copy the content of .env.example into it, you can change the port if you want to.
Run npm start, you should get a message in the console saying the droplet is running on the port you entered in the .env file.
To confirm that every worked fine try to access http://localhost:{PORT IN ENV} in your browser, some JSON value should be printed on your browser.

NOTE: Before running the application, please make sure nothing is running on the port you provided.

Provision a droplet on digitalocean

Log in to your digitalocean account and create a new project.
Inside the project, click on the create dropdown and select droplet.
Select all the options that match your choice.
Select ubuntu as the OS and pick version 20.04.
In the authentication section, select Password and enter the password you wish to use to log into your droplet. Copy and save the entered password in a secure place.
Click Create droplet, the process can take up to 2 minutes before the droplet will be up.

Access droplet and update packages

After provisioning our droplet, we need to access it and update the system software, to do this we can simply follow the steps below:

Copy the ip4 address of your droplet from your digitalocean dashboard.
Open Terminal(For Mac and Linux users. Windows users can use a ssh client like putty).
Enter ssh root@ip-address, ip-address should be the ip address of the droplet.
The terminal will ask for the password, please enter the password you provided while provisioning the droplet.
Once inside the droplet run sudo apt update && sudo apt upgrade.

Install node on droplet

There are various ways of installing nodejs on a Linux distribution, in this article we will use node version manager(nvm), this tool allows us to install any version of node on our machine easily, let's install node by following these steps:

Run curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
Then run source ~/.bashrc
By now nvm should have been installed on your droplet, run nvm install v18.1.0 to install version 18.1.0 of nodejs.
Run node -v to confirm that node has been installed on our droplet.
Since we already have node installed on our droplet, npm has been installed alongside, we need to use npm to install a process manager called pm2 this is what we will use to run our nodejs application as a service. We will install it by running npm install -g pm2.

Install nginx on droplet

In this section we will install nginx on our droplet, nginx is a simple lightweight web server that can be used for various activities including reverse proxy which we are most interested in. We will install nginx on our droplet by following these steps:

Run sudo apt install nginx, this should install nginx and start running it on our droplet.
To confirm that nginx is running visit http://droplet-ip, the default nginx page should be displayed on your browser.

Pull the application and run it

Now that we have installed all the requirements to run our application, we can then pull the application's source onto the server and run it. We will take the following steps to achieve this:

Inside your droplet run git clone https://github.com/talibackend/very-slim-nodejs-app.git
Run cd very-slim-nodejs-app
Run cp .env.example .env, this will copy the content of the first file into the second, therefore we will have a .env file that contains the same content as our .env.example file. In most cases, we will have to edit the .env file, but it does not contain sensitive data in our case so we will leave it like that.
We will then run npm install this will install all the node modules that our application needs to run.
We can now start our application by running pm2 start --name slim-app "npm start".
We will run pm2 logs to confirm that our application is running properly.
To further verify the status of our application we will try to access http://droplet-ip:5066 in the browser, we should get the JSON response from our application.

Setup DNS Record

For this step we want to set up a new domain name for our nodejs application, this step is quite different for various providers, in our case, I will be using a domain managed by cpanel. Please follow along.

Login to your cpanel.
Navigate to zone editor.

Click on + A Record.

Enter the domain name and IP address, in my case, my domain name is very-slim.schovela.com.ng, and the IP address is the IP address of our droplet.

Click on Add Record and wait a few minutes.

To confirm that the propagation succeeded, access http://your-domain and the http://your-domain:5066, they should return the nginx default page and JSON response from our application respectively.

Setup reverse proxy

At this point, we have both nginx and our nodejs application running on our droplet and also ready to receive traffic, but this is not our goal, the purpose of this step is to send every request on http://your-domain to our nodejs application that is running internally at http://localhost:5066. We can achieve this using one of the most important features of nginx called reverse proxy. Please follow along:

Inside our droplet we will run cd /etc/nginx/sites-enabled this is to change the directory to the nginx configuration directory.
Then we will run cp default old-default.txt, this is to copy the default configuration content into the old-default.txt file for backup reasons.
Run remove rm default, this is to delete the default file.
Then run

    echo "server {
            listen 80;
            server_name your-domain;

            location / {
                proxy_pass http://localhost:5066;
            }
        }" > default

The code above will create the default file and add the configuration content to it.

You can then run sudo systemctl restart nginx, this will restart our nginx service with the new configuration.
In order to confirm that our reverse proxy works, accessing http://your-domain should return the JSON from our application.

Secure the application with SSL

At this point we are pretty much done with everything we want to do, the only thing is that our site uses http which is not secure, we need our site to be available on https. HTTPS is the secured version of HTTP, it uses SSL to encrypt data flowing into and out of our application, to install SSL on our app we will use an open-source tool called certbot. Certbot allows you to install SSL on various types of applications within your machine. Please follow the steps below.

First we need to install certbot by running sudo apt install certbot python3-certbot-nginx.
Then we will install SSL by running sudo certbot --nginx -d your-domain.
You will be asked to provide your email.
Then you will also be asked to allow automatic redirect from http to https, please enter 2, to allow redirect.
Then we run sudo systemctl restart nginx.
To confirm that our SSL installation was successful, please try to access https://your-domain in the browser, it should return the JSON response from our application.

If you prefer to watch me demonstrate all the steps, please check out my video

Thank for Reading.....

AI Prompt Optimization Made Simple: How BrimAI Eliminates Prompt Engineering Complexity for Better ChatGPT and LLM Results

Femi Fatokun ・ Dec 22

#ai #promptengineering #llm #chatgpt

What is FastConfigs and why should you use it?

Femi Fatokun — Sat, 03 Dec 2022 14:35:34 +0000

What is FastConfigs?

Fastconfigs is a chrome extension that makes it easy for developers to configure environment variables of applications hosted on popular hosting platforms like heroku, netlify and the likes.

Why was FastConfigs created?

A while ago I was working with one of my seniors and we needed to setup a CI/CD pipeline for an application that was deployed on heroku, we needed to create replicate the application, therefore we also needed to migrate all the environment variables, we had to manually copy and paste all the environment variable, they was about thirty five of them. That was when we decided to work on a tool that makes it easier to configure environment variables on popular hosting platforms.

Installation

The extension is not currently available on chrome store, so you have to install it manually by following the steps below.

Clone the respository by running git clone https://github.com/talibackend/fastconfigs.git.
Open 'chrome://extensions/' in your browser.
Click on "Load unpacked" button in the top bar.
Select the folder that you cloned earlier.
You can pin the extension to your browsers bar - optional.
Enjoy using fastconfigs.

How it works

Fastconfigs does not store or process your environment variables on any server, all execution are done on the user's browser #####
The extension requires that you are logged in to the platform on your browser before you try to configure the apps hosted on that platform. #####
If you are not logged in to the platform, fastconfigs automatically opens the platforms login page in a new tab. #####
After successful login you can configure the apps hosted on that platform seamlessly.

Supported Formats

JSON : Fastconfigs supports JSON files given that all keys and values are string, below is an example.

{
    "key" : "value",
    "hello" : "world",
    "BASE_URL" : "https://example.com/"
}

TEXT : It also supports text file with the .txt extension, every variable should be on seperate lines and keys/values should be seperated with =, below is an example.

key=value
hellow=world
BASE_URL=https://example.com/

ENV : All files with .env extension are also supported, the file should be in the proper env format, below is an example.

key=value
hellow=world
BASE_URL=https://example.com/

Supported Platforms

1. Heroku

2. Netlify

What is next?

We intend to keep integrating more hosting platforms, so we advice that you keep an eye on our repo.
We will also be adding more features in the coming weeks, one of this features is environment variable exportation.

We hope you enjoy using our cool tool ❤️❤️❤️!

JSON Crash Course

Femi Fatokun — Mon, 12 Sep 2022 00:08:48 +0000

Hello Techies, how is it going?
I know most of us use "JSON", but at the same time most of us don't know what it really means and how to use it best.
In this article, I will explain what JSON really is and how to use it best.

Introduction

The term "JSON" stands to "Javascript Object Notation". JSON is a lightweight data format that stores data in human-friendly key-value pair structure. It is mostly used to interchange data between different servers or clients.

Advantages of JSON

It is light.
It uses key-value pair to store data.
More human readable.
Have native support in multiple programming languages.
Multiple data types supportes.
Nested values allowed

Datatypes in JSON

JSON can represent data of 6 different types, the key must be enclosed in double quotes(""), below is an example of a JSON code :

    {
        "name" : "Femi Fatokun",
        "age" : 0,
        "isAsleep" : false,
        "wifeName" : null,
        "hobbies" : [
            "Cooking", "Football", "Coding"
        ],
        "address" : {
            "country" : "Nigeria",
            "state" : "Kaduna",
            "lg" : "Kaduna South",
            "street" : "Dummy Street"
        }
    }

String : The name key in the code above represents a value of string type. The string datatype in JSON is very similar to most programming languages, but in JSON you can only create use double quotes("") to represent a string.
Number : age in the code above represents a value of number type, the number type in JSON is most similar to that of Javascript. The number type represent integers like 10 and floating point number like 10.67847.
Boolean : The boolean type in JSON is the same thing with most programming languages. It is can only contain 2 values, true or false. isAsleep in the code above is an example of a boolean.
Null : This datatype is represent data that is not available, it is different from "" which represents an empty string. wifeName is an example.
Array : An array in JSON is very similar to arrays in most programming languages. An array is a list of object, this object can be any other datatypes including an array itself. An array also allows nesting. hobbies in the code above is an example of an array. Below is an example of an array with different datatypes and nested values.

{
    "array" : [
        "string",
        10,
        true,
        null,
        ["One", "Two", "Three"],
        {
            "key" : "value"
        }
    ]
}

Object : We can refer to the object type as the JSON itself, object are used to store different datatypes in key-value pair format, they also allow nested values, below is an example :

{
    "object" : {
        "string" : "Hello world",
        "number" : 40.9,
        "boolean" : false,
        "n_a" : null,
        "array" : [
            "One", "Two", "Three"
        ],
        "nested_object" : {
            "key" : "value"
        }
    }
}

JSON in popular programming languages( JS and PHP )

As I already mentioned earlier, JSON is natively supported in most programming languages, this means you don't need any external library to handle JSON data in most languages, below we will parse JSON in 2 popular programming languages, PHP and Javascript.

Javascript

Javascript is one of the popular languages that has inbuilt support for JSON.

Encoding : We can encode a javascript object literal or array to JSON

//Javascript Object Literal
let object = {
    name : "Femi Fatokun",
    age : 20
};
//JSON Encoded Object
let encodedObject = JSON.stringify(object);

Decoding : We can decode a JSON object or an array into a Javascript object literal or array.

//JSON object
let object = `{
    "name" : "Femi Fatokun",
    "age" : 20
}`; 
//Javascript Object Literal
let decodedObject = JSON.parse(object)

PHP

PHP also have built in support for JSON.

Encoding : Below we will encode a php associative array to JSON.

<?php
    //PHP associative array
    $object = [
        "name" => "Femi Fatokun",
        "age" => 20
    ];
    //JSON object
    $encodedObject = json_encode($object);
?>

Decoding : Below we will decode a JSON object into a php associative array.

<?php
    //JSON Object
    $object = '{
        "name" : "Femi Fatokun",
        "age" : 20
    }';
    //PHP associative array
    $decodedObject = json_decode($object, true);
?>

Watch me demonstrate this on Youtube.

Simple Quiz App using HTML, CSS and Javascript.

Femi Fatokun — Fri, 02 Sep 2022 22:38:04 +0000

How is it going techies, in this article we will build a complete multi-option quiz app using HTML, CSS and Javascript only.

PREREQUISITES

Code Editor: To continue please make sure to have any code editor of your choice installed, Visual Studio Code(VS Code) was used in this article, but you are free to use any code editor of your choice.
Web Browser: We will also need a web browser, you can use any web browser of your choice, in this article Brave was used.
Live Server(Optional): Live Server is a Visual Studio Code extension that reloads your webpage whenever the static files change. You don't have to use this extension to continue especially if you are not using VS Code.

Setup

Create a folder on your computer and open it with your code editor.
Create 3 files in your workspace namely index.html, style.css, src.js and question.js. After this, your workspace should look like the image below(for vs code users).

Open your index.html in your preferred browser, if you are using vscode and you have live server installed, click the Go Live link at the bottom right corner of your code editor. Live server will open your project on the browser and reload your webpage automatically when changes are applied to your code.

Now let's code!

1. In your index.html add the following

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main-wrapper">
        <div class="quiz-container" id="quiz-container">

        </div>
    </div>
    <script src="questions.js"></script>
    <script src="src.js"></script>
</body>
</html>

What's going on up here?

Nothing much, the code above is a simple html markup that is used to structure our page.
However there are some important things we should note, just before the closing head tag we have <link rel="stylesheet" href="style.css"> this is used to include our style.css in our html so that we can style it easily, right before our closing body tag we have

<script src="questions.js"></script>
<script src="src.js"></script>

The function of the code above is to include questions.js and src.js into our html file. We are loading the questions.js before the src.js because the src.js file depends on the questions.js, we will see this further in the article.

2. In your style.css include the following

.main-wrapper{
    font-family:Georgia, 'Times New Roman', Times, serif;
    width: 100%;
    height: 90vh;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.quiz-container{
    background-color: rgb(231, 221, 221);
    box-shadow: gray 2px 2px 2px;
}
.quiz-container > div{
    margin: 20px;
}
.each-answer{
    margin: 10px 0%;
}
.prev-next, .jumper-button{
    padding: 5px 10px;
    margin: 2px 0%;
    background-color: blue;
    color: white;
    border: white 1px solid;
    cursor: pointer;
}
.active{
    background-color: white;
    color : blue;
    border: blue solid 1px;
}
.action-btns button:hover{
    background-color: white;
    color : blue;
    border: blue solid 1px;
}
.result-wrapper{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.result-details{
    display: inline-flex;
    justify-content: center;
}
.result-details > div{
    margin: 20px;
}

What's going on up here?

The code above contains the basic design for our html page.

3. In your questions.js file add the following code.

const questions = [
    {
        question : "What is the name of this channel",
        options : [
            "Code Sculptor",
            "Code Builder",
            "Code Destroyer",
            "Code Maker"
        ],
        answer : "Code Sculptor"
    },
    {
        question : "1 + 1 is?",
        options : [
            "2", "3", "5", "19"
        ],
        answer : 2
    },
    {
        question : "Which of this is a programming language?",
        options : [
            "HTML",
            "CSS",
            "Javascript",
            "JSON"
        ],
        answer : "Javascript"
    },
    {
        question : "What is my name",
        options : [
            "Femi Fatokun",
            "David Shokunbi",
            "Wale Adenusi",
            "Daniel Adewale"
        ],
        answer : "Femi Fatokun"
    }
]

What's going on up here?

The code above only includes one variable questions, questions contains an array that contains objects. The objects are dummy questions that have the following keys :

question

options an array of possible answers to the questions

answer the actual answer to the question

4. In your src.js file add the following code.

let quizContainer = document.getElementById("quiz-container");
let selectedAnswers = {};
let question;
let index;

const generateOptions = () => {
    let options = ``;
    for (let i = 0; i < question.options.length; i++) {
        let option = question.options[i];
        let selected = false;
        if(selectedAnswers[`${question.question}`] == option){
            selected = true;
        }
        options += `<div class="each-answer">
        <input type="radio" name="answer-btn" ${selected ? "checked='true'" : ""} onclick="addAnswer()" value="${option}">
        ${option}
        </div>`;
    }
    return options;
}

const generateJumpBtns = ()=>{
    let btns = ``;
    for(let i = 0; i < questions.length; i++){
        btns += `<button class="jumper-button ${i == index ? "active" : ""}" onclick="showQuestion(${i})">${i + 1}</button>`;
    }
    return btns;
}

const addAnswer = ()=>{
    let currentOptions = document.getElementsByName("answer-btn");
    for(let i = 0; i < currentOptions.length; i++){
        let currentOption = currentOptions[i];
        if(currentOption.checked == true){
            selectedAnswers[`${question.question}`] = currentOption.value;
        }
    }
}

const restartQuiz = ()=>{
    index = 0;
    selectedAnswers = {};
    showQuestion(0);
}

const submitQuiz = ()=>{
    let message = `Are you sure you want to submit?`;
    let answered = Object.keys(selectedAnswers);
    if(answered.length < questions.length){
        message += `\nYou have ${questions.length - answered.length} questions out of ${questions.length} unanswered`;
    }
    let ask = confirm(message);
    let attempted = 0;
    let correct = 0;
    let wrong = 0;
    if(ask){
        for(let i = 0; i < questions.length; i++){
            let question = questions[i];
            if(selectedAnswers[`${question.question}`] != undefined){
                attempted++;
                if(selectedAnswers[`${question.question}`] == question.answer){
                    correct++;
                }else{
                    wrong++;
                }
            }
        }
        quizContainer.innerHTML = `<div class="result-wrapper">
        <h3>Result</h3>
        <div class="result-details">
            <div>
                <div>Attempted</div>
                <div>${attempted}/${questions.length}</div>
            </div>
            <div>
                <div>Correct</div>
                <div>${correct}/${questions.length}</div>
            </div>
            <div>
                <div>Wrong</div>
                <div>${wrong}/${questions.length}</div>
            </div>
        </div>
        <button class="jumper-button" onclick="restartQuiz()">Restart</button>
    </div>`;
    }
}

const showQuestion = (i) => {
    index = i;
    if (questions[index]) {
        question = questions[index];
        let options = generateOptions(index);
        let jumpBtns = generateJumpBtns(index);


        quizContainer.innerHTML = `
            <div class="pointer-container">
                <h3>
                    Question ${index + 1} of ${questions.length}
                </h3>
            </div>
            <div>
                ${question.question}
            </div>
            <div class="answers-container">
                ${options}
            </div>
            <div class="action-btns">
                ${index > 0 ? `<button class="prev-next" onclick="showQuestion(${index - 1})">Previous</button>` : ""}
                ${jumpBtns}
                ${index < questions.length - 1 ? `<button class="prev-next" onclick="showQuestion(${index + 1})">Next</button>` : ""}
                <button class="prev-next" style="background-color : red;" onclick="submitQuiz()">Submit</button>
            </div>`
        ;
    } else {
        alert("Invalid question");
    }
}

showQuestion(0);

What's going on up here?

The above code is responsible for the behaviour of our quiz application, the code will be explained block for block. Let's go.....

Variable declaration(initialization)

let quizContainer = document.getElementById("quiz-container");
let selectedAnswers = {};
let question;
let index;

In the code above we created 4 variables, namely :

quizContainer is assigned to the document.getElementById() method, quiz-container was passed as the aurgment of the method. The variable now represents <div class="quiz-container" id="quiz-container"></div> in our html structure.

selectedAnswers contains an empty object, {}, this variable will hold the answers we select while taking the test.

question was initialized without any value, the variable will carry the question at any instance during the test.

index was initialized without any value, the variable will later represent th index of the question we are currently answering in the questions array.

generateOptions function

const generateOptions = () => {
    let options = ``;
    for (let i = 0; i < question.options.length; i++) {
        let option = question.options[i];
        let selected = false;
        if(selectedAnswers[`${question.question}`] == option){
            selected = true;
        }
        options += `<div class="each-answer">
        <input type="radio" name="answer-btn" ${selected ? "checked='true'" : ""} onclick="addAnswer()" value="${option}">
        ${option}
        </div>`;
    }
    return options;
}

The function is responsible for generating the options elements for the current question. Here is a complete breakdown of what's going on inside the function.

options variable, initialy this is just an empty string, but after our loop the variable will contain a list of elements that represents the options of a particular question.

Then we write a for loop to iterate through the options of the current question and then we perform the following operations. > - We check if an answer has been provided for that particular question before, using

if(selectedAnswers[`${question.question}`] == option){
            selected = true;
}

Then we generate a DOM element and add it to our options using :

options += `<div class="each-answer">
        <input type="radio" name="answer-btn" ${selected ? "checked='true'" : ""} onclick="addAnswer()" value="${option}">
        ${option}
    </div>`;

In the code above we added an onclick event listener for every option. The function will be explained later in this article.

At the end of our function we return the options variable.

generateJumpBtns function

const generateJumpBtns = ()=>{
    let btns = ``;
    for(let i = 0; i < questions.length; i++){
        btns += `<button class="jumper-button ${i == index ? "active" : ""}" onclick="showQuestion(${i})">${i + 1}</button>`;
    }
    return btns;
}

This function is responsible for generating the buttons that allows us to jump to any question of our choice. The operations in this function is expleained below :

btns variable, at first this function contains an empty string, but after our loop it should contains a list of elements that represents jump buttons.

Then we write a for loop that iterates through the length of questions available in the questions array. Inside our loop we performed the following operations : > - Then we generate a DOM element that represents a jump button and append it to our btns variable, using :

btns += `<button class="jumper-button ${i == index ? "active" : ""}" onclick="${i != index ? `showQuestion(${i})` : ""}">${i + 1}</button>`;

In the code above we added an onclick event listener for every option. The function will be explained later in this article.

At the end of our function we return the btns variable.

addAnswer function.

const addAnswer = ()=>{
    let currentOptions = document.getElementsByName("answer-btn");
    for(let i = 0; i < currentOptions.length; i++){
        let currentOption = currentOptions[i];
        if(currentOption.checked == true){
            selectedAnswers[`${question.question}`] = currentOption.value;
        }
    }
}

This function is responsibl for adding selected answer to the selectedAnswers object. In this case the question is the key and the answer is the value.

First we get all the elements will the name answer-btn and assign it to currentOptions variable, this contain an array of DOM elements that have the name answer-btn.

Then we ran a loop to check the selected answer and add the answer to the selectedAnswers object using the question as the key and the answer selected as the value.

restartQuiz function.

const restartQuiz = ()=>{
    index = 0;
    selectedAnswers = {};
    showQuestion(0);
}

The use of this function is to restart the quiz by setting the index to 0, selectedAnswer to an empty object, and executing showQuestion(0) to render the first question in our questions.

submitQuiz function.

    const submitQuiz = ()=>{
    let message = `Are you sure you want to submit?`;
    let answered = Object.keys(selectedAnswers);
    if(answered.length < questions.length){
        message += `\nYou have ${questions.length - answered.length} questions out of ${questions.length} unanswered`;
    }
    let ask = confirm(message);
    let attempted = 0;
    let correct = 0;
    let wrong = 0;
    if(ask){
        for(let i = 0; i < questions.length; i++){
            let question = questions[i];
            if(selectedAnswers[`${question.question}`] != undefined){
                attempted++;
                if(selectedAnswers[`${question.question}`] == question.answer){
                    correct++;
                }else{
                    wrong++;
                }
            }
        }
        quizContainer.innerHTML = `<div class="result-wrapper">
        <h3>Result</h3>
        <div class="result-details">
            <div>
                <div>Attempted</div>
                <div>${attempted}/${questions.length}</div>
            </div>
            <div>
                <div>Correct</div>
                <div>${correct}/${questions.length}</div>
            </div>
            <div>
                <div>Wrong</div>
                <div>${wrong}/${questions.length}</div>
            </div>
        </div>
        <button class="jumper-button" onclick="restartQuiz()">Restart</button>
    </div>`;
    }
}

The function of the code above is to submit the quiz at any time, below is the sequence of operations performed in the function.

First we created message variable and we assigned Are you sure you want to submit? to it.

Then we created answered this represents an array that contains all the keys in the selectedAnswers object. The keys of the object are the answered questions.

We then wrote a condition to check if all questions have been answered, if not we include \nYou have ${questions.length - answered.length} questions out of ${questions.length} unanswered in the message variable, this is to inform the user that they have not answered all questions.

We created a variable named ask this contains a confirmation alert using the javascript inbuilt confirm function and we also passed message as the aurgment.

Then we created three variable, attempted, correct and wrong and we set their value to 0;

Then we check if the user confirms that they want to submit. If yes we run the following operations : > - First we use a for loop to iterate through the questions array. > - For every iteration we run the following conditions. >> - First we check if the current question is available in the selectedAnswers object. If yes we increment the value of attempted. Then we check if the selected answer for that question is equal to the value of answer for that particular question in the questions array. If yes, we increment the value of correct. If no, we increment the value of wrong. > - After our loop we update the innerHTML of quizContainer and set the value to a markup that represents the result.

showQuestion function.

const showQuestion = (i) => {
    index = i;
    if (questions[index]) {
        question = questions[index];
        let options = generateOptions(index);
        let jumpBtns = generateJumpBtns(index);


        quizContainer.innerHTML = `
            <div class="pointer-container">
                <h3>
                    Question ${index + 1} of ${questions.length}
                </h3>
            </div>
            <div>
                ${question.question}
            </div>
            <div class="answers-container">
                ${options}
            </div>
            <div class="action-btns">
                ${index > 0 ? `<button class="prev-next" onclick="showQuestion(${index - 1})">Previous</button>` : ""}
                ${jumpBtns}
                ${index < questions.length - 1 ? `<button class="prev-next" onclick="showQuestion(${index + 1})">Next</button>` : ""}
                <button class="prev-next" style="background-color : red;" onclick="submitQuiz()">Submit</button>
            </div>`
        ;
    } else {
        alert("Invalid question");
    }
}

The duty of this function is to simple render the question at a particular index onto our page. Below is a block-to-block explanation :

The function recieved a parameter names i and we set the value of index to i, remember index is a variable that was declared without a value at the top of our code.

Then we check if the question at that index is available in the questions array. If no, we show an alert saying Invalid question. If yes we run the following : > - We set the value of question to the value of questions at index, remember question is a variable that was declared without a value at the top of our code. > - Then we create the options variable and assign it to generateOptions(index), this will generate the options for the question at the given index. Therefore options now contains a list of option elements for the given question. > - After that we create jumpBtns variable and assign it to generateJumpBtns(index), this will generate a list of jumper button elements for the list of questions available.

After these we update the innerHTML of the quizContainer with a markup that represents the current question, options and jumper buttons.

In our markup we also have Previous and Next button. > - The Previous button will only render if the index is greater than 0, and when clicked it navigates to the previous question. > - The Next button will only render if the index is less that the length of the questions, and when clicked it navigates to the next question.

At the end of our code

showQuestion(0);

At the end of our file we added the code above, this is to render the first question to the screen after the page has loaded completely.

Watch me do this on youtube.

Build Todo-List from scratch using Html, CSS, and Javascript(LocalStorage).

Femi Fatokun — Thu, 25 Aug 2022 22:11:00 +0000

How is it going techies, have you ever built a to-do list using Javascript, and the items in the app get removed immediately after reloading or have you ever wondered how you can build a todo-list with Javascript?

If yes, then this article is for you, in this article we will build a to-do list from scratch using Html, CSS, and Javascript, we will also take advantage of Javascript's LocalStorage API for data persistency.

Let us get started,

PREREQUISITES

Code Editor: To continue please make sure to have any code editor of your choice installed, Visual Studio Code(VS Code) was used in this article, but you are free to use any code editor of your choice.
Web Browser: We will also need a web browser, you can use any web browser of your choice, in this article Brave was used.
Live Server(Optional): Live Server is a Visual Studio Code extension that reloads your webpage whenever the static files change. You don't have to use this extension to continue especially if you are not using VS Code.

Setup

Create a folder on your computer and open it with your code editor.
Create 3 files in your workspace namely index.html, style.css and src.js. After this, your workspace should look like the image below(for vs code users).

Open your index.html in your preferred browser, if you are using vscode and you have live server installed, click the Go Live link at the bottom right corner of your code editor. Live server will open your project on the browser and reload your webpage automatically when changes are applied to your code.

Now let's code!

In your index.html file add the following code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main-wrapper">
        <div class="action-wrapper">
            <input type="text" id="input"> <button id="add_btn">Add</button>
        </div>
        <div class="list-wrapper" id="item_list_container">

        </div>
    </div>
    <script src="src.js"></script>
</body>
</html>

What's going on up here?

Nothing much here, the code above represents a basic HTML page that represents the structure of our webpage.
However, there are a few things to note. Within the head tag of our code there is <link rel="stylesheet" href="style.css">, this is used to link the style.css that we created initially to our HTML page so that we can use the CSS file to design our HTML page, also right before the closing body tag we have <script src="src.js"></script> this is used to load out src.js file into our HTML page.

In your style.css file add the following code

.main-wrapper{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px 0%;
}
.action-wrapper{
    padding: 30px;
}
.action-wrapper input{
    font-size: 1rem;
    padding: 10px;
    border: blue 1px solid;
}
.action-wrapper button, .item-actions button{
    padding: 12px;
    background-color: blue;
    color: white;
    font-weight: bolder;
    border: solid 1px rgb(112, 153, 153);
}
.action-wrapper button:hover, .item-actions button:hover{
    background-color: white;
    color: black;
    border: blue 1px solid;
    cursor: pointer;
}
.list-item{  
    width: 100%;
    margin: 20px 0%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.item-name{
    padding: 10px;
    font-size: 1.2rem;
}

What's going on up here?

This is just basic CSS code to add some simple styles to our web page.

In your src.js file add the following code

const id = (x) => {
    return document.getElementById(x);
}
let input = id('input');
let addBtn = id('add_btn');
let listContainer = id('item_list_container');
let itemList = localStorage.itemList ? JSON.parse(localStorage.itemList) : [];


const renderList = () => {
    listContainer.innerHTML = ``;
    for (let i = itemList.length - 1; i > 0; i--) {
        listContainer.innerHTML += `
            <div class="list-item">
                <div class="item-name">
                    ${itemList[i]}
                </div>
                <div class="item-actions">
                    <button onclick="editItem(${i})">Edit</button>
                    <button onclick="deleteItem(${i})">Delete</button>
                </div>
            </div>
        `;
    }
}

const addEvent = () => {
    let value = input.value;
    if (value.length > 0) {
        itemList.push(value);
        input.value = "";
    } else {
        alert("Please specify a name for your task");
    }
    localStorage.itemList = JSON.stringify(itemList);
    renderList();
}

const deleteItem = (index)=>{
    let item = itemList[index];
    if(item != undefined){
        itemList.splice(index, 1);
        localStorage.itemList = JSON.stringify(itemList);
        renderList();
    }else{
        alert("Item has already been deleted.");
    }
}

const editItem = (index)=>{
    let item = itemList[index];
    if(item != undefined){
        let ask = prompt(`Change "${item}" to : `);
        if(ask.length > 0){
            itemList[index] = ask;
            localStorage.itemList = JSON.stringify(itemList);
            renderList();
        }
    }else{
        alert("Item not available in list.");
    }
}

addBtn.addEventListener("click", (e) => {
    e.preventDefault();
    addEvent();
})

renderList();

What's going on up here?

The code above is responsible for handling all the actions performed on our webpage. This is a block by block explanation of the code. :

At the beginning of our file we have

const id = (x) => {
    return document.getElementById(x);
}

The id function is a shorthand used to get elements from the DOM by passing the element's id, the function was created to simply shorten the document.getElementById() method.

Variable declarations

let input = id('input');
let addBtn = id('add_btn');
let listContainer = id('item_list_container');
let itemList = localStorage.itemList ? JSON.parse(localStorage.itemList) : [];

The input, addBtn, and listContainer variable are assigned to the id function with the augment as the corresponding id of the element we want to assign to them.

The input variable represents <input type="text" id="input"> from our html file.

The addBtn variable represents <button id="add_btn">Add</button> from our html file.

The listContainer variable represents <div class="list-wrapper" id="item_list_container"></div> from our html file.

The itemList variable contains the to-do item list from localStorage, we used a ternary operator to check if the ltemList is available in localStorage then we parse the string and assign it to our variable or we just assign an empty array. This is to ensure that at least an array is assigned to the variable.

renderList function.

const renderList = () => {
    listContainer.innerHTML = ``;
    for (let i = itemList.length - 1; i > 0; i--) {
        listContainer.innerHTML += `
            <div class="list-item">
                <div class="item-name">
                    ${itemList[i]}
                </div>
                <div class="item-actions">
                    <button onclick="editItem(${i})">Edit</button>
                    <button onclick="deleteItem(${i})">Delete</button>
                </div>
            </div>
        `;
    }
}

The renderList function is simply used to populate to-do items onto our webpage.
Below is the list of actions performed inside this function.

First, we empty all the elements inside the listContainer by adding listContainer.innerHTML =;.

Then we loop through itemList array in descending order and then we add an HTML markup into the listContainer for each of the iterations. The loop was written in ascending order so that newer items will be at the top of the list.

addEvent function

const addEvent = () => {
    let value = input.value;
    if (value.length > 0) {
        itemList.push(value);
        input.value = "";
    } else {
        alert("Please specify a name for your task");
    }
    localStorage.itemList = JSON.stringify(itemList);
    renderList();
}

The addEvent function as the name implies is used to add new events to our to do list.

First we try to access the value typed into our input by using let value = input.value;.

Then we write a condition to check if something was actually typed into the box. If true we add the newly added item into the itemList array by using itemList.push(value); then we empty the input box by using input.value = "";. If nothing was typed into the box we show an alert that nothing was typed.

After the conditional statement we update the itemList in our localStorage by using localStorage.itemList = JSON.stringify(itemList); then we run renderList(); to update the webpage with the new item.

deleteItem function.

const deleteItem = (index)=>{
    let item = itemList[index];
    if(item != undefined){
        itemList.splice(index, 1);
        localStorage.itemList = JSON.stringify(itemList);
        renderList();
    }else{
        alert("Item has already been deleted.");
    }
}

The deleteItem function is used to remove a particular item from the to-do list.

The function receives one parameter index that represents the position of the item we want to delete from the to-do list.

Then we write a condition to check if the item we are trying to delete is available. If true we remove the item but adding itemList.splice(index, 1); then we update the localStorage itemList using localStorage.itemList = JSON.stringify(itemList); after this we run renderList(); to update the items in our to-do list. If the item is not found we send an alert that the item has already been deleted.

editItem function.

const editItem = (index)=>{
    let item = itemList[index];
    if(item != undefined){
        let ask = prompt(`Change "${item}" to : `);
        if(ask.length > 0){
            itemList[index] = ask;
            localStorage.itemList = JSON.stringify(itemList);
            renderList();
        }
    }else{
        alert("Item not available in the list.");
    }
}

This function is very identical to deleteItem() function, the only difference is that instead of deleting from the itemList we update the value of the itemList at a particular index.

After writing the condition identical to that of deleteItem(), we open a prompt asking the user what they want to change the item to, using let ask = prompt(`Change "${item}" to : `); ;

Then we confirm that the user typed something into the prompt, if yes we update the value of the itemList at the provided index using itemList[index] = ask;, we update the localStorage itemList using localStorage.itemList = JSON.stringify(itemList);, and we run renderList(); to update the items in our to-do list.

At the end of our file

First we add a click event listener on the addBtn element using

Then we run the renderList() function to render our list after the page has been loaded and all the Javascript has been executed.

addBtn.addEventListener("click", (e) => {
    e.preventDefault();
    addEvent();
})

renderList();

Watch me do this on youtube.

NOTE

In our code, whenever we want to read from localStorage we always use JSON.parse() and whenever we want to write to it we always use JSON.stringify, this is because we are trying to store and retrieve an array from the localStorage, and localStorage only accept strings. Also the localStorage has a maximum usage limit of 5Mb.

DEV Community: Femi Fatokun

AI Prompt Optimization Made Simple: How BrimAI Eliminates Prompt Engineering Complexity for Better ChatGPT and LLM Results

Three Common Prompt Engineering Strategies (And Their Limits)

1. Role & Instruction Stacking

2. Few-Shot & Example-Based Prompting

3. Iterative Prompt Tuning

The Real Issue: Prompt Engineering Pushes Complexity to the User

Key Problems

The Fundamental Question

Introducing BrimAI: Prompt Engineering, Done Once

BrimAI - AI Prompt Enhancement Tool | Optimize Your AI Prompts for Better Results

How BrimAI Solves Prompt Engineering in Real Time

Dual-Interface Solution

Real-Time Intelligence

Prompt Engineering Was a Bridge, Not the Destination

BrimAI - AI Prompt Enhancement Tool | Optimize Your AI Prompts for Better Results

A step-by-step guide to creating a bot that publishes push events on a GitHub repository to a slack channel using nodejs

Introduction

Prerequisites

Table of Contents

Create a Slack channel in your workspace

Setup incoming webhook for slack channel

Run code locally

Code breakdown

Setup GitHub webhook

Conclusion

Thanks for Reading.....

Deploying and Securing Your Node.js App on a DigitalOcean Droplet: A Comprehensive Step-by-Step Deployment Guide with SSL.

Introduction

Prerequisites

Table of content

Create a basic nodejs app and run it locally

Provision a droplet on digitalocean

Access droplet and update packages

Install node on droplet

Install nginx on droplet

Pull the application and run it

Setup DNS Record

Setup reverse proxy

Secure the application with SSL

Thank for Reading.....

AI Prompt Optimization Made Simple: How BrimAI Eliminates Prompt Engineering Complexity for Better ChatGPT and LLM Results

Femi Fatokun ・ Dec 22

What is FastConfigs and why should you use it?

What is FastConfigs?

Why was FastConfigs created?

Installation

How it works

Supported Formats

Supported Platforms

1. Heroku

2. Netlify

What is next?

We hope you enjoy using our cool tool ❤️❤️❤️!

JSON Crash Course

Introduction

Advantages of JSON

Datatypes in JSON

JSON in popular programming languages( JS and PHP )

Javascript

PHP

Watch me demonstrate this on Youtube.

Simple Quiz App using HTML, CSS and Javascript.

PREREQUISITES

Setup

Now let's code!

1. In your index.html add the following

What's going on up here?

2. In your style.css include the following

What's going on up here?

3. In your questions.js file add the following code.

What's going on up here?

4. In your src.js file add the following code.

What's going on up here?

Watch me do this on youtube.

Build Todo-List from scratch using Html, CSS, and Javascript(LocalStorage).

PREREQUISITES

Setup

Now let's code!

What's going on up here?