DEV Community: Ezekiel Marvellous

The Galaxy In Her Belly 🐷✨

Ezekiel Marvellous — Sat, 03 May 2025 19:30:41 +0000

There was a girl who carried a galaxy in her belly

But it wasn’t always gentle. Some nights, the stars inside her twisted and turned, flaring with pain like tiny supernovas. The moon watched as she curled up, clutching her stomach, quiet and hurting, trying to pretend she was fine.

She never liked to ask for help. Not even when the ache made her bones feel heavy, or when the fire behind her ribs left her breathless. But the stars knew. The moon knew.

So that night, the moon dipped low in the sky, casting soft silver light across her bed. “I see you,” it whispered. “I see your strength, even when you hide it.”

The stars, always nearby, began to hum—a lullaby older than time. They painted constellations across her ceiling, like a map leading her back to peace.

“You are the universe,” they murmured, “and the ache you feel is not weakness—it is power shifting, storms making way for calm.”

The galaxy in her belly glowed dimly, then gently softened—like it had been waiting, all along, to be seen not as pain, but as the beauty of something vast, alive, and cosmic.

And in that soft space between the stars, the moon, and her breath, the girl finally slept—not because the pain was gone, but because she knew she wasn’t alone in it.

– With moonlight and stars,
Marvie

Unveiling Peak Mail✉️: Your Ultimate Weapon Against Spam 🗻🛡️(And So Much More!)

Ezekiel Marvellous — Fri, 18 Apr 2025 15:32:21 +0000

Hey everyone 🥲!

I'm absolutely thrilled to announce the launch of my brand new project – Peak Mail! 🎉

https://peakmail.marvelly.com.ng/
Visit Peakmail✉️

For anyone who's ever signed up for a free trial, downloaded an ebook, or just needed an email address fast without handing over their personal one, you know the pain of temporary email services. They're often clunky, slow, and sometimes, honestly, a bit sketchy.

I wanted something better. Something modern, fast, privacy-focused, and incredibly flexible. That's how Peak Mail was born!

The Genesis: From Telegram Bot to Web App

Interestingly, Peak Mail didn't originally start as the web interface you see today. Before I even thought about tackling a full-fledged front-end application, I built the core functionality and wrapped it in a Telegram bot!

My initial goal was simply to create a fast, command-line interface for generating and checking temporary emails without any friction. The Telegram bot felt like the perfect way to achieve that. It's completely private, requires no sign-ups beyond having Telegram, and you can generate and use emails right from your chat window using simple commands.

You can still use the bot right now! Check it out here:
Peak Mail Telegram Bot: 🔥 No sign-ups, no spam—just fast, disposable emails! 🚀 Stay private & keep emails forever. Drop a command & go! ⛰️📩 https://t.me/peakmail_bot

After building and using the bot for a couple of days, proving the core concept worked, the idea for a more traditional, user-friendly web interface started to take hold. Honestly, it took me about two full days to finally summon the courage and motivation to dive into building the front-end with Vue.js and Tailwind CSS. Building the bot felt like a safer, smaller step, but eventually, the desire to offer a visually intuitive experience won out. So, the website was the second, more ambitious step after the bot laid the groundwork!

Peak Mail is more than just your average temporary email service. It's designed to give you control, protect your real inbox from spam, and adapt to your needs, whether you need a throwaway address for 5 minutes or a semi-permanent alias that keeps your main inbox clean.

Let's dive into the core features that make the web version of Peak Mail stand out:

1. Instant, Disposable Email Addresses:

Need an email address right now? With Peak Mail, it couldn't be simpler. Hit the "New Email" button, and boom – you have a completely unique, temporary email address ready to receive emails instantly. No signup, no forms, no hassle. Use it for quick registrations, downloads, or anything else you don't want hitting your main inbox. Your temporary inbox is displayed right there, updating in real-time!

2. Create Your Own Custom Temporary Email:

While instant addresses are great, sometimes you want something a little more memorable or professional-looking. That's where the "Custom Email" feature comes in! Just click "Custom Email," type in your desired username (like myprojecttest or feedback-alias), and if it's available, it's yours instantly. Get an address like myprojecttest@zico.name.ng that's easy to remember and use, while still keeping your real identity private.

3. The Game Changer: Broker Emails (A Huge Shout-out to Danny!)

This is the feature I'm most excited about, and it wouldn't have happened without a brilliant brainstorming session with my friend, Danny.

We were talking about the limitations of standard temporary emails – you always have to go back to the temporary inbox to check for replies or verification codes. Danny had an amazing insight: "What if you could create a temporary address that automatically forwards everything to your real email address?"

He pushed the idea further: "And what if you could even create a custom alias for that forwarding address?"

That spark led directly to the "Broker Email" feature in Peak Mail!

Here’s how it works: You create a "Broker Email" address in Peak Mail, providing your actual email address (like your.name@gmail.com) as the forwarding destination. You can even choose a custom username for this broker address (like newsletter.signup@zico.name.ng).

Now, when you use that newsletter.signup@zico.name.ng address to sign up for newsletters or online services, all the emails sent to it are instantly forwarded directly to your your.name@gmail.com inbox.

Why is this revolutionary?

Ultimate Privacy: Your real email address is never exposed to the service you're signing up for.
Convenience: Emails land directly in your familiar inbox. No need to constantly check a separate temporary mail page.
Spam Control: If a broker address starts getting spammed, you know exactly who sold your address. You can simply stop using that broker address (or potentially deactivate it if the API supports it in the future, right now you just abandon it) without affecting your main email.
Persistent Access: Since emails are forwarded to your real inbox, you effectively "access your emails forever," tied to your main account.

Thank you, Danny, for that critical insight! It genuinely transformed Peak Mail from a standard temp mail service into something much more powerful and practical for everyday use.

Ready to Take Control?

Speaking of the tech stack, the clean, modern front-end you see was crafted with Tailwind CSS and Vue.js. Powering all the core functionality behind the scenes, including the instant addresses, custom emails, and the complex forwarding logic for Broker Emails, the entire backend is built fully on PHP. This combination makes it fast and responsive on any device. It's completely free, requires no registration, and is ready for you to use right now!

Protect your privacy, reduce spam, and get flexible email addresses whenever you need them.

Try Peak Mail today at: Peakmail Website

Give it a spin and let me know what you think! I'm incredibly proud of this project and excited to see how you use it to make your online life cleaner and more secure.

Happy emailing (the smart way)!
Your Friendly PHP Dev,
Marvelly ♥️

Colour palette Generator

Ezekiel Marvellous — Thu, 19 Sep 2024 14:26:27 +0000

Hello world 👋🏻 I'm back on track. The #100daysofMiva coding challenge day 9 and I worked on a simple colour palette Generator in Nodejs. Let's have a walk through...✨

🎨 Color Palette Generator

Check it out
https://colorpal.onrender.com

This is a Color Palette Generator built with Node.js using Express.js and chroma-js. It generates a beautiful 5-color palette every time, with varying shades of a randomly generated base color. Perfect for UI/UX designers looking for quick color inspiration! 🌈

🚀 Features

Generates 5 matching colors as variants of a single base color 🎨.
Each palette is assigned a unique ID, allowing users to retrieve it via the /palette/:id route.
Built with Express.js for server-side logic and chroma-js for color manipulation.
Simple and elegant UI for displaying the generated palette, with a refresh button to generate new palettes dynamically.

Backend 😎

🛠️ Technologies Used

Node.js & Express.js: Backend framework to handle routing.
Chroma.js: For powerful color manipulation and palette generation.
HTML/CSS/Bootstrap: For a clean, responsive UI.

🌟 Getting Started

1. Clone the Repository

git clone https://github.com/Marvellye/colorpal
cd colorpal

2. Install Dependencies

npm install

3. Run the Application

node app.js

4. Open the Application

Visit the app in your browser at:

http://localhost:3000

You will see an interface where you can generate a new 5-color palette. Press the Generate button to fetch a new color palette.

5. Retrieve a Palette by ID

To retrieve a specific palette, go to:

http://localhost:3000/palette/:id

Replace :id with the ID of the palette you want to view, for example:

http://localhost:3000/palette/C08552-F3E9DC-5E3023-DAB49D

🔧 How it Works

Generating a Palette: Each time you click the Generate button, a base color is randomly generated. From this base, 5 distinct color variants (different shades) are created.
Unique ID: Each generated palette has a unique ID made from the hexadecimal values of the colors, which can be used to retrieve the palette later.
Using Chroma.js: The power of chroma-js ensures that the generated colors are visually appealing, offering a variety of brightness levels.

🖼️ Example Palette

Here’s an example of the kind of palette the app generates:

Base Color: #C08552
Palette: 
#F3E9DC (Light)
#5E3023 (Dark)
#DAB49D (Neutral)

Front-end🎉✨

🎨 Colour Palette display

This Colour Palette Generator dynamically generates a palette of five colors and displays them in the UI. Users can interact with the palette by clicking the Generate button, and the palette ID is used to save and share specific color combinations. Here's how the layout works.

📄 HTML Layout

Header

<!-- Header -->
<header class="p-3 text-center">
   <h1>Colour Palette Generator</h1>
</header>

The header provides a clean and simple title for the application.

Colour Boxes

<!-- Colour Boxes -->
<section class="color-container">
   <div id="box1" class="color-box" style="background-color: #000000;">
      <span>#000000</span>
   </div>
   <div id="box2" class="color-box" style="background-color: #000000;">
      <span>#000000</span>
   </div>
   <div id="box3" class="color-box" style="background-color: #000000;">
      <span>#000000</span>
   </div>
   <div id="box4" class="color-box" style="background-color: #000000;">
      <span class="text-white">Hey!</span>
   </div>
   <div id="box5" class="color-box" style="background-color: #000000;">
      <span class="text-white"></span>
   </div>
</section>

This section contains the color boxes. Each box is a div that dynamically changes its background color based on the generated color palette. The span inside each div displays the color's hex value.

Loader

<!-- Loader -->
<section id="loader" class="loader">
   <div class="is-loading">
      <h3 id="load-text">Generating...</h3>
   </div>
</section>

This section contains a loader that appears when a new color palette is being generated. The loader disappears after the colors are loaded.

Footer

<!-- Footer -->
<footer class="d-flex justify-content-between align-items-center">
   <button onclick="gen()" class="btn btn-light">Generate</button>
   <button class="btn text-white" onclick="share(window.location.href)">
      <i class="fa-regular fa-share-from-square"></i>
   </button>
   <span class="">100daysofMiva-Marvelly</span>
</footer>

The footer contains a Generate button that triggers the color generation and a share button for social media sharing.

🚀 JavaScript Functionality

Dynamic Color Generation

const boxes = [
    document.getElementById('box1'),
    document.getElementById('box2'),
    document.getElementById('box3'),
    document.getElementById('box4'),
    document.getElementById('box5')
];

function updateBoxes(colors) {
    colors.forEach((color, index) => {
        boxes[index].style.backgroundColor = color;
        boxes[index].querySelector('span').textContent = color;
    });
}

This JavaScript code dynamically updates the colors in the color boxes when a new palette is generated. The colors are applied to each div element in the UI.

Palette Generation Logic

async function gen() {
    // Show the loader
    loader.style.display = 'block';

    try {
        const response = await fetch('/palette');
        const data = await response.json();

        // Update the boxes with the new colors
        updateBoxes(data.palette);

        // Update the URL with the new ID
        history.pushState({}, '', `/${data.id}`);

        loader.style.display = 'none';
    } catch (error) {
        console.error('Error fetching palette:', error);
        loader.style.display = 'none';
    }
}

The gen() function fetches a new color palette from the /palette API route, updates the color boxes, and modifies the browser URL with the new palette ID.

Share Functionality

function share(url) {
    Swal.fire({
        heightAuto: false,
        title: 'Share this Color Palette!',
        html: `
            <div style="display: flex; justify-content: space-around; font-size: 24px;">
                <a href="https://api.whatsapp.com/send?text=${encodeURIComponent(url)}" target="_blank" title="Share on WhatsApp">
                    <i class="fab fa-whatsapp" style="color: #25D366;"></i>
                </a>
                <a href="https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}" target="_blank" title="Share on Facebook">
                    <i class="fab fa-facebook" style="color: #3b5998;"></i>
                </a>
                <a href="https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}" target="_blank" title="Share on Twitter">
                    <i class="fab fa-twitter" style="color: #1DA1F2;"></i>
                </a>
                <a href="https://www.instagram.com/?url=${encodeURIComponent(url)}" target="_blank" title="Share on Instagram">
                    <i class="fab fa-instagram" style="color: #E1306C;"></i>
                </a>
            </div>
        `,
        showConfirmButton: false,
        showCloseButton: false,
    });
}

The share() function allows users to share the current color palette via social media platforms like WhatsApp, Facebook, Twitter, Instagram, and Telegram using SweetAlert popups.

URL-Based Color Loading

// Check if an id is present in the URL
const currentPath = window.location.pathname;
const paletteId = currentPath.substring(1);

if (paletteId) {
    loadPaletteById(paletteId);
} else {
    gen();
}

This functionality checks if there is a color palette ID in the URL when the page is loaded. If an ID is present, the corresponding palette is loaded. Otherwise, a new palette is generated.

🐛 Issues Encountered

Building this app wasn't without its challenges! Here are some of the problems I encountered and how I solved them:

Dull Color Palettes: Initially, I was getting dull and boring colors. The issue was due to the way I was generating shades from the base color. I switched to using hsl.l (lightness) adjustments for better visual results.
Color Palette Variants: At first, I used random colors that were too different from each other. After realizing that everyone needed variants of the same base color for consistency, I adjusted my approach to generate color scales with different lightness levels.
Invalid Palette IDs: When trying to retrieve a palette by ID, some IDs were invalid or incorrectly formatted. I fixed this by ensuring a strict format for the IDs and adding error handling for invalid IDs.
Hex Values Misplacement: At one point, the hex values were not displaying properly inside the color boxes. This was fixed by ensuring the span elements were correctly updated with the hex values.
Palette Sharing: Creating a robust sharing mechanism for various social media platforms was a bit challenging but ultimately solved using SweetAlert for the UI and share links for each platform.
Dynamic Palette Update: Implementing a smooth update of the UI when a new palette was generated was tricky. By using simple JavaScript and handling the loader display correctly, I ensured a seamless experience for users when generating new palettes.

✨ Future Improvements

Add support for saving favorite palettes in a database.
Enhance the UI with animations for palette generation.
Allow users to download the color palette in various formats like JSON, CSS, or an image.

Check it out
https://colorpal.onrender.com

My GitHub repo
https://github.com/Marvellye/colorpal

Simple Language Translator with API

Ezekiel Marvellous — Wed, 28 Aug 2024 20:30:37 +0000

Day 8 of #100daysofMiva coding challenge and I worked on a simple translator model that translates a language to another 😂
It's JS, it's magic✨🥲

🌍 Language Translator Script Documentation

Overview

This JavaScript code is designed to create a playful, interactive language translator! It utilizes the MyMemory API to translate text between different languages and allows you to swap languages, copy translations, or even have the text spoken aloud. 🌐🔄

Features

🌐 Language Selection: Users can choose from a wide array of languages, ranging from Amharic to Zulu!
🔄 Language Swap: Easily swap between the source and target languages with a click of a button.
💬 Text-to-Speech: Listen to the original or translated text in the selected language.
📋 Copy to Clipboard: Copy the original or translated text with a single click.

Code Breakdown

Language Data

const countries = { /*...*/ }

This object contains the available languages and their respective country codes. For example, "en-GB": "English" pairs the language code with its name.

Dynamic Dropdowns

selectTag.forEach((tag, id) => {
    /*...*/
});

This code dynamically populates the dropdown menus with all the languages listed in the countries object. The first dropdown defaults to English ("en-GB"), and the second to Hindi ("hi-IN").

Language Swap

exchageIcon.addEventListener("click", () => {
    /*...*/
});

Clicking the swap icon allows users to swap the text and selected languages between the "from" and "to" fields.

Real-Time Translation

translateBtn.addEventListener("click", () => {
    /*...*/
});

When the "Translate" button is clicked, the text is sent to the MyMemory API, and the translated text is displayed in the "to-text" field. While waiting for the response, a "Translating..." placeholder is shown.

Text-to-Speech & Copy

icons.forEach(icon => {
    /*...*/
});

This section handles the Text-to-Speech and copy functionalities:

Speech: Plays the text aloud in the selected language.
Copy: Copies the text to the clipboard.

How It Works

Select Languages 🌍: Choose your languages from the dropdowns.
Type or Paste Text ✍️: Input the text you want to translate.
Translate 🚀: Click the "Translate" button and watch the magic happen!
Swap, Listen, or Copy 🔄🎧📋: Swap languages, listen to the translation, or copy the text to your clipboard.

Dependencies

MyMemory API: The translation functionality is powered by the MyMemory API. Ensure you have an active internet connection for it to work.

Potential Enhancements

Language Auto-Detection: Automatically detect the language of the input text.
Advanced Error Handling: Improve the response for translation errors or API failures.
Multiple Translations: Show alternative translations where available.

Here’s a step-by-step breakdown of how the code works and what it does:

Step 1: Defining Available Languages

const countries = { /*...*/ }

What it does: This object contains key-value pairs where the key is a language-country code (like "en-GB" for English) and the value is the name of the language (like "English").
Purpose: This data is used to populate the language selection dropdowns so users can choose their source and target languages.

Step 2: Selecting DOM Elements

const fromText = document.querySelector(".from-text"),
      toText = document.querySelector(".to-text"),
      exchageIcon = document.querySelector(".exchange"),
      selectTag = document.querySelectorAll("select"),
      icons = document.querySelectorAll(".row i");
      translateBtn = document.querySelector("button"),

What it does: This code selects various elements from the HTML document and stores them in variables for easy access later.
- fromText and toText: Text areas where users input text and see the translation.
- exchageIcon: The icon used to swap languages and text.
- selectTag: The dropdown menus for selecting languages.
- icons: Icons for copy and speech functions.
- translateBtn: The button that triggers the translation.

Step 3: Populating Language Dropdowns

selectTag.forEach((tag, id) => {
    for (let country_code in countries) {
        let selected = id == 0 ? country_code == "en-GB" ? "selected" : "" : country_code == "hi-IN" ? "selected" : "";
        let option = `<option ${selected} value="${country_code}">${countries[country_code]}</option>`;
        tag.insertAdjacentHTML("beforeend", option);
    }
});

What it does: This loop goes through the countries object and adds each language as an option in the language selection dropdowns.
- If the dropdown is the first one (id == 0), English ("en-GB") is selected by default.
- If the dropdown is the second one (id == 1), Hindi ("hi-IN") is selected by default.

Step 4: Swapping Languages and Text

exchageIcon.addEventListener("click", () => {
    let tempText = fromText.value,
        tempLang = selectTag[0].value;
    fromText.value = toText.value;
    toText.value = tempText;
    selectTag[0].value = selectTag[1].value;
    selectTag[1].value = tempLang;
});

What it does: When the swap icon is clicked, this function swaps the text between the "from" and "to" text areas as well as the selected languages.
- tempText temporarily holds the original text from the "from-text" field.
- tempLang temporarily holds the original language from the first dropdown.
- The "from-text" is then replaced with the "to-text", and vice versa. The selected languages are also swapped.

Step 5: Clearing Translated Text

fromText.addEventListener("keyup", () => {
    if(!fromText.value) {
        toText.value = "";
    }
});

What it does: If the user deletes all the text from the "from-text" field, this function automatically clears the "to-text" field as well.
Purpose: Ensures that if the input text is cleared, the translation is cleared too, preventing confusion.

Step 6: Translating Text

translateBtn.addEventListener("click", () => {
    let text = fromText.value.trim(),
        translateFrom = selectTag[0].value,
        translateTo = selectTag[1].value;
    if(!text) return;
    toText.setAttribute("placeholder", "Translating...");
    let apiUrl = `https://api.mymemory.translated.net/get?q=${text}&langpair=${translateFrom}|${translateTo}`;
    fetch(apiUrl).then(res => res.json()).then(data => {
        toText.value = data.responseData.translatedText;
        data.matches.forEach(data => {
            if(data.id === 0) {
                toText.value = data.translation;
            }
        });
        toText.setAttribute("placeholder", "Translation");
    });
});

What it does: When the "Translate" button is clicked, this function:
1. Extracts the text from the "from-text" field.
2. Identifies the selected languages from the dropdowns.
3. Sends a request to the MyMemory API with the text and selected languages.
4. Receives the translation from the API and displays it in the "to-text" field.
5. Updates the placeholder text while waiting for the translation to indicate that the process is ongoing.

Summary

The script allows users to translate text between different languages with a dynamic and interactive interface. Users can select languages, type in their text, translate it with a click, swap languages and text, hear the translation spoken aloud, or copy it to their clipboard.

Enjoy playing with different languages and make your translation journey fun and interactive! 🌐🎉 Unto the next 🥲✌🏻✨

Check it out here
https://app.marvelly.com.ng/100daysofMiva/day-8/

Source code
https://github.com/Marvellye/100daysofMiva/blob/main/Projects%2FDay_8-Simple_language_translator

Simple Dictionary with API

Ezekiel Marvellous — Tue, 27 Aug 2024 22:20:04 +0000

English Dictionary

It's day 7 of the #100daysofMiva coding challenge. Today was a really busy day but I had to write js because why not?🌚

This documentation provides a detailed overview of the HTML structure, CSS classes, and JavaScript functionalities I used to create an interactive Dictionary search interface. This interface allows users to search for words and retrieve their meanings, examples, synonyms, and pronunciation. Let's Dive into it!

📝 HTML Structure

<div style="max-width: 600px" class="wrapper czrhe coe0p ckwv3">
    <!-- Decorative border -->
    <div class="cr8aa clot7 cag0k ccjiw cr2ij cevtx cpue7 cjkk2 csmr0 cym3j crgvw cq4r1 cehp5 cxgoq cr5hf c1qs0 c26dl cxpxq c2z22 cfdqj chqy8 ci2tu c0cnt cvvig cba0k ck5ws c5pov" aria-hidden="true"></div>

    <header>English Dictionary</header>
    <div class="search ckwv3">
        <div class="cwysf cr8aa c9v7h cu4yo cezsk chwso cyi7p cud52 cis7l">
            <i style="display:none" class="cdyx3 fa-solid fa-spinner rotating" aria-hidden="true"></i>
            <i style="display:block" class="cdyx3 fa-solid fa-search" aria-hidden="true"></i>
        </div>
        <input id="edit_short_url" class="short-url coyoz coe0p cyujy cjygq cc7et" type="text" placeholder="Search a word" required spellcheck="false" aria-label="Search for a word">
    </div>
    <p class="info-text">Type any existing word and press enter to get meaning, example, synonyms, etc.</p>
    <ul>
        <li class="word">
            <div class="details">
                <p>__</p>
                <span>_ _</span>
            </div>
            <i class="fas fa-volume-up" aria-label="Play pronunciation"></i>
        </li>
        <div class="content">
            <li class="meaning">
                <div class="details">
                    <p>Meaning</p>
                    <span>___</span>
                </div>
            </li>
            <li class="example">
                <div class="details">
                    <p>Example</p>
                    <span>___</span>
                </div>
            </li>
            <li class="synonyms">
                <div class="details">
                    <p>Synonyms</p>
                    <div class="list"></div>
                </div>
            </li>
        </div>
    </ul>
</div>

wrapper: The main container that holds the entire dictionary UI, ensuring it doesn't exceed a width of 600px.
search: Contains the search input field and icons for user interaction.
info-text: Provides feedback or instructions to the user, such as prompts or error messages.
word: Displays the searched word along with its phonetic transcription.
meaning, example, synonyms: Sections for showing the word's meaning, example sentence, and a list of synonyms, respectively.
.fa-search: A search icon that indicates the user can input a search term.
.fa-spinner: A spinner icon that appears during loading to show the user that the search is in progress.
.fa-volume-up: A speaker icon allowing users to listen to the pronunciation of the searched word.

🎨 CSS Classes and Styles

.wrapper: Contains the overall layout with a maximum width, ensuring the content is well-centered and readable.
.search: Styles the search bar and its associated icons.
.info-text: Handles the styling for instructions and feedback messages.
.word, .meaning, .example, .synonyms: Each section has its own styling to differentiate the word, its meaning, examples, and synonyms.
.fa-search: Default search icon styling.
.fa-spinner: Rotating spinner icon used during searches to indicate loading.

⚙️ JavaScript Functionality

The JavaScript code drives the interactivity of the dictionary search UI. It handles the search process, updates the user interface based on search results, and provides feedback in case of errors.

Key Variables

wrapper: The main UI container, used to control the visibility of elements based on the search state.
searchInput: The input field where the user types the word they want to search.
volume: The icon used to play the pronunciation of the searched word.
infoText: The paragraph element that provides instructions or error messages to the user.
synonyms: The container where synonyms for the searched word are displayed.
spinner, searchIcon: Icons used to indicate whether a search is in progress or idle.

Functions

updateUIForSearch():
- Purpose: Prepares the UI for a search operation by showing the spinner and hiding the search icon.
- How It Works: Removes the "active" class from the wrapper, changes the infoText color to black, and swaps the search icon for the spinner.
- Code:
```
function updateUIForSearch() {
    wrapper.classList.remove("active");
    infoText.style.color = "#000";
    spinner.style.display = 'inline-block';
    searchIcon.style.display = 'none';
}
```
resetUIAfterSearch():
- Purpose: Resets the UI to its idle state after a search is completed.
- How It Works: Hides the spinner and displays the search icon.
- Code:
```
function resetUIAfterSearch() {
    spinner.style.display = 'none';
    searchIcon.style.display = 'inline-block';
}
```
displayErrorMessage(word):
- Purpose: Displays an error message if the search fails or the word is not found.
- How It Works: Updates infoText to inform the user that the word couldn't be found, and resets the UI.
- Code:
```
function displayErrorMessage(word) {
    infoText.innerHTML = `Can't find the meaning of <span>"${word}"</span>. Please, try to search for another word.`;
    resetUIAfterSearch();
}
```

displaySearchResults(result, word):

Purpose: Updates the UI with the search results, including the word's meaning, example, and synonyms.
How It Works: If the word is found, it populates the respective UI elements with the data returned by the API. If synonyms are available, they are listed; otherwise, the synonym section is hidden.
Code:

function displaySearchResults(result, word) {
    resetUIAfterSearch();
    if(result.title){
        displayErrorMessage(word);
        return;
    }

    wrapper.classList.add("active");
    let definitions = result[0].meanings[0].definitions[0],
        phontetics = `${result[0].meanings[0].partOfSpeech} /${result[0].phonetics[0].text}/`;

    document.querySelector(".word p").innerText = result[0].word;
    document.querySelector(".word span").innerText = phontetics;
    document.querySelector(".meaning span").innerText = definitions.definition;
    document.querySelector(".example span").innerText = definitions.example;
    audio = new Audio(result[0].phonetics[0].audio);

    if(!definitions.synonyms.length) {
        synonyms.parentElement.style.display = "none";
    } else {
        synonyms.parentElement.style.display = "block";
        synonyms.innerHTML = "";
        definitions.synonyms.slice(0, 5).forEach((synonym, index) => {
            let tag = `<span onclick="search('${synonym}')">${synonym}${index < 4 ? ',' : ''}</span>`;
            synonyms.insertAdjacentHTML("beforeend", tag);
        });
    }
}

search(word):
- Purpose: Initiates the search process when the user presses "Enter" after typing a word.
- How It Works: Calls updateUIForSearch() to show the loading state, then fetches data from the dictionary API for the word provided.
- Code:
```
function search(word){
    if (!word) return;
    updateUIForSearch();
    fetchApi(word);
}
```

fetchApi(word):

Purpose: Fetches word data from the dictionary API.
How It Works: Makes a GET request to the API endpoint with the searched word, and processes the response to display the results.
Code:

function fetchApi(word) {
    let url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`;
    fetch(url)
        .then(response => response.json())
        .then(result => displaySearchResults(result, word))
        .catch(() => displayErrorMessage(word));
}

Event Listeners

**`searchInput

.addEventListener('keyup', (e) => {...})`**:

Purpose: Listens for the Enter key press within the search input.
How It Works: Triggers the search function when the user presses Enter after typing a word.

Code:

searchInput.addEventListener("keyup", e => {
    if (e.key === "Enter") {
        search(e.target.value);
    }
});

volume.addEventListener('click', () => {...}):

Purpose: Listens for clicks on the volume icon to play the word's pronunciation.
How It Works: Plays the pronunciation audio when the volume icon is clicked.

Code:

volume.addEventListener("click", () => {
    if(audio) audio.play();
});

This documentation provides a comprehensive understanding of the HTML, CSS, and JavaScript components that work together to create a dynamic and user-friendly English Dictionary search interface. Feel free to explore and customize the code further to suit your needs! 🚀

Check it out here
https://app.marvelly.com.ng/100daysofMiva/day-7/

Source Code
https://github.com/Marvellye/100daysofMiva/blob/main/Projects/Day_7-Simple_Dictionary/index.html

Simple Link Shortener API without database. Nodejs

Ezekiel Marvellous — Mon, 26 Aug 2024 19:44:58 +0000

Hello world 👋🏻
On the #100daysofMiva day 6, I worked on an API for shortening links without a database. let's talk about it

Marvellye / 100daysofMiva

100 Days of Miva - API and Front-end Projects

Welcome to my repository for the #100daysofMiva challenge! This repository contains a collection of 100 simple API projects developed over 100 days. The challenge is all about consistency, learning, and building resilience through daily coding.

About the Challenge

The #100daysofMiva challenge is designed to help developers, especially students of Miva Open University, develop a strong work ethic by committing to coding every day. The goal is to spend at least one hour each day working on a small project, pushing the boundaries of our skills, and documenting our progress.

Repository Structure

This repository is organized into three main sections, each corresponding to a different programming language:

/100daysofMiva
├── README.md
├── public/
│   ├── banner.jpg
│   └── (other assets)
└── Projects/
    ├── Day 1 | hello world API/
    │   ├── php/
    │   ├── nodejs/
    │   ├── python/
    │   └── README.md...

PHP…

View on GitHub

Step-by-Step Instructions and Documentation

This Node.js script creates, edits, deletes, and manages shortlinks with associated QR codes. It uses Express.js, Axios, Cheerio, and several Node.js core modules to achieve these tasks.

1. Installation

Before running the script, ensure you have Node.js installed on your machine. Then, follow these steps:

1.1. Clone the repository or create a new directory and copy the script into it:

git clone https://github.com/Marvellye/100daysofMiva/Projects/Day_6-Shortlink_API_CRUD
cd https://github.com/Marvellye/100daysofMiva/Projects/Day_6-Shortlink_API_CRUD

1.2. Install the required dependencies using npm:

npm init -y
npm install axios cheerio qrcode uuid

1.3. Create necessary directories:

Ensure that the following directories exist within your project:

public: This directory will store generated QR codes.
db: This directory will store the shortlink.json file, which holds the shortlink data.

If these directories don't exist, the script will create them automatically.

2. How the Code Works

2.1. Initialization and Directory Setup

The script begins by defining the paths to the public and db directories and the shortlink.json file.
It checks if the public and db directories exist. If not, it creates them.

const publicDir = path.join(__dirname, '../public');
const dbDir = path.join(__dirname, '../db');
const shortlinkFile = path.join(dbDir, 'shortlink.json');

// Ensure directories exist
if (!fs.existsSync(publicDir)) {
  fs.mkdirSync(publicDir);
}
if (!fs.existsSync(dbDir)) {
  fs.mkdirSync(dbDir);
}

2.2. Load and Save Shortlinks

loadShortlinks: This function reads the shortlink.json file and parses its content into a JavaScript array. If the file does not exist, it returns an empty array.
saveShortlinks: This function saves the shortlink data into the shortlink.json file, formatted as a JSON string.

const loadShortlinks = () => { /*...*/ };
const saveShortlinks = (shortlinks) => { /*...*/ };

2.3. Shortlink Creation and Management

The shortlinkParser function is an Express.js middleware that handles all incoming requests to create, edit, delete, or retrieve shortlinks.

2.3.1. Create a Shortlink

When a url is provided, the script attempts to fetch the page title using Axios and Cheerio. If successful, it stores the title; otherwise, it uses a default title.
The script generates unique IDs, a short URL, and a QR code image for the short URL.
It saves the new shortlink to shortlink.json.

  const decodedUrl = decodeURIComponent(url);
  const { data } = await axios.get(decodedUrl);
  const $ = cheerio.load(data);
  const fetchedTitle = $('title').text();

  const mainId = uuidv4().slice(0, 6);
  const uniqueId = generateRandomNumber();
  const shortUrl = `https://sl.free.nf/${mainId}`;

  await qrCode.toFile(qrFilePath, shortUrl);

  const newShortlink = { /*...*/ };
  shortlinks.push(newShortlink);
  saveShortlinks(shortlinks);

2.3.2. Delete a Shortlink

If delete=1 is passed with unique_id, the corresponding shortlink is removed from shortlink.json, and the associated QR code file is deleted.

  if (uniqueIdStr && deleteFlag === '1') {
    let shortlinks = loadShortlinks();
    shortlinks = shortlinks.filter(link => String(link.unique_id) !== uniqueIdStr);
    // Delete QR code file and save changes
  }

2.3.3. Edit a Shortlink

If unique_id is passed along with other edit parameters (edit_title, edit_long_url, edit_main_id), the script updates the shortlink data, generates a new QR code if necessary, and saves the updated data.

  if (uniqueIdStr) {
    let shortlinks = loadShortlinks();
    const linkIndex = shortlinks.findIndex(link => String(link.unique_id) === uniqueIdStr);
    // Update the shortlink data and generate a new QR code if needed
  }

2.3.4. Track Clicks on a Shortlink

If main_id is passed with clicks=1, the script increments the click count for the corresponding shortlink.

  if (main_id && clicks === '1') {
    const shortlinks = loadShortlinks();
    const foundLink = shortlinks.find(link => link.main_id === main_id);
    foundLink.clicks += 1;
    saveShortlinks(shortlinks);
  }

2.4. Date Formatting

The formatDate function formats the timestamp according to the Nigerian time zone.

const formatDate = (date) => { /*...*/ };

2.5. Export the Middleware

The shortlinkParser function is exported so it can be used as a middleware in an Express.js application.

module.exports = { shortlinkParser };

3. Usage

3.1. Integration with Express.js

In your app.js or server file, you can integrate the shortlinkParser middleware like this:

const express = require('express');
const { shortlinkParser } = require('./path-to-your-script');

const app = express();

app.get('/shortlink', shortlinkParser);

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

3.2. Making Requests

Create a Shortlink:

  GET /shortlink?url=http://example.com&title=My%20Example%20Site

Delete a Shortlink:

  GET /shortlink?unique_id=12345&delete=1

Edit a Shortlink:

  GET /shortlink?unique_id=12345&edit_title=New%20Title&edit_main_id=newid123

Track Clicks:

  GET /shortlink?main_id=newid123&clicks=1

The responses will be in JSON format, providing the relevant data or error messages.

check it out here
https://app.marvelly.com.ng/100daysofMiva/day-6/

GitHub source code
https://github.com/Marvellye/100daysofMiva/Projects/Day_6-Shortlink_API_CRUD

Easy Image Editor: Tutorial and Documentation

Ezekiel Marvellous — Sat, 24 Aug 2024 18:41:37 +0000

Easy Image Editor: Tutorial and Documentation

100daysofMiva Day 5.

Today, I went through the implementation and functionality of a simple yet powerful image editor built with HTML, CSS, and JavaScript. The editor allows users to apply basic filters, rotate, and flip an image. It also supports loading an image from the user's device and saving the edited image.

1. HTML Structure

The HTML structure is divided into several key sections: the filter options, rotation and flip options, an image preview area, and control buttons.

<div class="container disable">
    <h2>Easy Image Editor</h2>
    <div class="wrapper">
        <div class="editor-panel">
            <!-- Filters Section -->
            <div class="filter">
                <label class="title">Filters</label>
                <div class="options">
                    <button id="brightness" class="active">Brightness</button>
                    <button id="saturation">Saturation</button>
                    <button id="inversion">Inversion</button>
                    <button id="grayscale">Grayscale</button>
                </div>
                <!-- Slider for Filter Adjustments -->
                <div class="slider">
                    <div class="filter-info">
                        <p class="name">Brighteness</p>
                        <p class="value">100%</p>
                    </div>
                    <input type="range" value="100" min="0" max="200">
                </div>
            </div>
            <!-- Rotate & Flip Section -->
            <div class="rotate">
                <label class="title">Rotate & Flip</label>
                <div class="options">
                    <button id="left"><i class="fa-solid fa-rotate-left"></i></button>
                    <button id="right"><i class="fa-solid fa-rotate-right"></i></button>
                    <button id="horizontal"><i class='bx bx-reflect-vertical'></i></button>
                    <button id="vertical"><i class='bx bx-reflect-horizontal'></i></button>
                </div>
            </div>
        </div>
        <!-- Image Preview Section -->
        <div class="preview-img">
            <img src="image-placeholder.svg" alt="preview-img">
        </div>
    </div>
    <!-- Controls Section -->
    <div class="controls">
        <button class="reset-filter">Reset Filters</button>
        <div class="row">
            <input type="file" class="file-input" accept="image/*" hidden>
            <button class="choose-img">Choose Image</button>
            <button class="save-img">Save Image</button>
        </div>
    </div>
</div>

Container & Wrapper: Wraps the entire image editor.
Filter Section: Includes buttons for selecting filters like brightness, saturation, inversion, and grayscale.
Rotate & Flip Section: Provides options to rotate and flip the image.
Preview Image Section: Displays the image that the user is editing.
Controls Section: Contains buttons to reset filters, choose an image, and save the edited image.

2. JavaScript Functionality

The JavaScript code handles the logic behind loading an image, applying filters, rotating and flipping the image, and saving the edited image.

Variables and DOM Elements

const fileInput = document.querySelector(".file-input"),
    filterOptions = document.querySelectorAll(".filter button"),
    filterName = document.querySelector(".filter-info .name"),
    filterValue = document.querySelector(".filter-info .value"),
    filterSlider = document.querySelector(".slider input"),
    rotateOptions = document.querySelectorAll(".rotate button"),
    previewImg = document.querySelector(".preview-img img"),
    resetFilterBtn = document.querySelector(".reset-filter"),
    chooseImgBtn = document.querySelector(".choose-img"),
    saveImgBtn = document.querySelector(".save-img");

let brightness = "100", saturation = "100", inversion = "0", grayscale = "0";
let rotate = 0, flipHorizontal = 1, flipVertical = 1;

Variables: Stores default values for filters and rotation/flip states.
DOM Elements: Selects various elements in the DOM for interaction (e.g., buttons, sliders, image preview).

Loading the Image

const loadImage = () => {
    let file = fileInput.files[0];
    if(!file) return;
    previewImg.src = URL.createObjectURL(file);
    previewImg.addEventListener("load", () => {
        resetFilterBtn.click(); // Reset filters when a new image is loaded
        document.querySelector(".container").classList.remove("disable");
    });
}

loadImage: Loads the selected image from the user's device and displays it in the preview area.

Applying Filters

const applyFilter = () => {
    previewImg.style.transform = `rotate(${rotate}deg) scale(${flipHorizontal}, ${flipVertical})`;
    previewImg.style.filter = `brightness(${brightness}%) saturate(${saturation}%) invert(${inversion}%) grayscale(${grayscale}%)`;
}

applyFilter: Applies the selected filters and transformations (rotate, flip) to the image preview.

Handling Filter Selection and Updates

filterOptions.forEach(option => {
    option.addEventListener("click", () => {
        document.querySelector(".active").classList.remove("active");
        option.classList.add("active");
        filterName.innerText = option.innerText;

        if(option.id === "brightness") {
            filterSlider.max = "200";
            filterSlider.value = brightness;
            filterValue.innerText = `${brightness}%`;
        } else if(option.id === "saturation") {
            filterSlider.max = "200";
            filterSlider.value = saturation;
            filterValue.innerText = `${saturation}%`
        } else if(option.id === "inversion") {
            filterSlider.max = "100";
            filterSlider.value = inversion;
            filterValue.innerText = `${inversion}%`;
        } else {
            filterSlider.max = "100";
            filterSlider.value = grayscale;
            filterValue.innerText = `${grayscale}%`;
        }
    });
});

const updateFilter = () => {
    filterValue.innerText = `${filterSlider.value}%`;
    const selectedFilter = document.querySelector(".filter .active");

    if(selectedFilter.id === "brightness") {
        brightness = filterSlider.value;
    } else if(selectedFilter.id === "saturation") {
        saturation = filterSlider.value;
    } else if(selectedFilter.id === "inversion") {
        inversion = filterSlider.value;
    } else {
        grayscale = filterSlider.value;
    }
    applyFilter();
}

Event Listeners: These are attached to the filter buttons and slider. They update the filter values and reapply them to the image preview.

Rotating and Flipping the Image

rotateOptions.forEach(option => {
    option.addEventListener("click", () => {
        if(option.id === "left") {
            rotate -= 90;
        } else if(option.id === "right") {
            rotate += 90;
        } else if(option.id === "horizontal") {
            flipHorizontal = flipHorizontal === 1 ? -1 : 1;
        } else {
            flipVertical = flipVertical === 1 ? -1 : 1;
        }
        applyFilter();
    });
});

rotateOptions: These buttons rotate the image by 90 degrees or flip it horizontally/vertically.

Resetting Filters

const resetFilter = () => {
    brightness = "100"; saturation = "100"; inversion = "0"; grayscale = "0";
    rotate = 0; flipHorizontal = 1; flipVertical = 1;
    filterOptions[0].click();
    applyFilter();
}

resetFilter: Resets all filters and transformations to their default values.

Saving the Edited Image

const saveImage = () => {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    canvas.width = previewImg.naturalWidth;
    canvas.height = previewImg.naturalHeight;

    ctx.filter = `brightness(${brightness}%) saturate(${saturation}%) invert(${inversion}%) grayscale(${grayscale}%)`;
    ctx.translate(canvas.width / 2, canvas.height / 2);
    if(rotate !== 0) {
        ctx.rotate(rotate * Math.PI / 180);
    }
    ctx.scale(flipHorizontal, flipVertical);
    ctx.drawImage(previewImg, -canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height);

    const link = document.createElement("a");
    link.download = "image.jpg";
    link.href = canvas.toDataURL();
    link.click();
}

saveImage: Creates a canvas element, applies the transformations and filters, and then saves the edited image as a file.

Event Listeners

filterSlider.addEventListener("input", updateFilter);
resetFilterBtn.addEventListener("click", resetFilter);
saveImgBtn.addEventListener("click", saveImage);
fileInput.addEventListener("change", loadImage);
chooseImgBtn.addEventListener("click", () => fileInput.click());

Event Listeners: Handle user interactions, such as choosing an image, adjusting filters, and saving the edited image.

3. Usage

Choose an Image: Click the "Choose Image" button to load an image from your device.
Apply Filters: Select a filter and adjust its value using

the slider.

Rotate & Flip: Use the rotate and flip buttons to modify the image orientation.
Reset Filters: Click "Reset Filters" to revert all settings to default.
Save Image: Once you're satisfied with the edits, click "Save Image" to download the modified image.

4. Conclusion

This simple image editor provides essential tools to modify and enhance images. The structure is designed to be easy to understand and extendable, allowing for the addition of more features like additional filters or advanced editing tools. Thanks for reading. Unto the next…

Check it out here
https://app.marvelly.com.ng/100daysofMiva/day-5/

Source code
https://github.com/Marvellye/100daysofMiva/tree/main/Projects/Day_5-Image-Editor

Day 4: Web Snapshots API

Ezekiel Marvellous — Fri, 23 Aug 2024 19:52:59 +0000

Today, I worked on a simple API in Nodejs that gets a url parameter from the /screenshot?url=https:/example.com query and it runs a virtual browser and screenshot the website's page, saves the image and returns the page title, image URL and the load time in a Json response.
I had problems with using puppeteer module on shared hosting so i had to use node-webshot module for nodejs

Documentation for Screenshot API with Express.js

This Node.js application provides an API for taking and clearing screenshots using Express.js. Below is a short and precise documentation of the setup.

Dependencies

express: Web framework for Node.js.
cors: Middleware for enabling Cross-Origin Resource Sharing (CORS).
path: Node.js module for handling file and directory paths.

Files Structure

app.js: Main entry point of the application.
libs/screenshot.js: Contains the takeScreenshot and clearScreenshots functions.
public/: Directory to serve static files, including saved screenshots.

API Endpoints

GET /screenshot
- Description: Takes a screenshot of a specified URL and saves it to the public directory.
- Handler: takeScreenshot
- Response: Returns the screenshot image.
GET /screenshot/clear
- Description: Clears all screenshots from the public directory.
- Handler: clearScreenshots
- Response: Returns a success message upon clearing the screenshots.

Setup and Usage

Static Files:
- The app serves static files from the public directory, accessible via /public.
CORS:
- CORS is enabled for all routes, allowing cross-origin requests.
Server Port:
- The server runs on port defined by the environment variable PORT or defaults to 3000.

Code Overview

const express = require('express');
const cors = require('cors');
const path = require('path');
const { takeScreenshot, clearScreenshots } = require('./libs/screenshot'); // Import functions

const app = express();
app.use(cors());

const PORT = process.env.PORT || 3000;

// Serve static files from the "public" directory
app.use('/public', express.static(path.join(__dirname, 'public')));

// API Routes
app.get('/screenshot', takeScreenshot);           // Route to take a screenshot
app.get('/screenshot/clear', clearScreenshots);    // Route to clear screenshots

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

Additional Notes

Ensure the libs/screenshot.js file contains the correct logic for taking and clearing screenshots.
With this setup, screenshots are saved in the public directory and can be accessed via URLs prefixed with /public.

Documentation for `/libs/creenshot.js` Module

This module provides two main functions: takeScreenshot and clearScreenshots. These functions are used in an Express.js application to capture screenshots of web pages and clear the saved screenshots.

Dependencies

axios: Used for making HTTP requests to fetch web page HTML.
cheerio: Used for parsing and manipulating the HTML to extract the page title.
webshot-node: Used for capturing screenshots of web pages.
path: Node.js module for handling and transforming file paths.
fs: Node.js module for interacting with the file system.
util: Node.js module, specifically used here to promisify fs functions.

Functions

takeScreenshot

Description: Captures a screenshot of a specified URL, saves it in the public directory, and returns the page title, screenshot URL, and load time.
Parameters:
- req: The request object from Express, containing the url query parameter.
- res: The response object from Express.
Process:
1. Validates the url query parameter.
2. Fetches the HTML content of the page using axios.
3. Extracts the page title using cheerio.
4. Generates a random 10-digit filename.
5. Takes a screenshot using webshot-node with specific options (screen size and delay).
6. Returns a JSON response containing the page title, screenshot URL, and load time.
Response:
- Success: Returns a JSON object with the page title, screenshot URL, and load time.
- Error: Returns a JSON object with an error message and details.

async function takeScreenshot(req, res) {
    const { url } = req.query;
    if (!url) {
        return res.status(400).json({ error: 'URL is required. Pass a valid url' });
    }
    try {
        const start = Date.now();
        const { data } = await axios.get(url);
        const $ = cheerio.load(data);
        const title = $('title').text();
        const randomNumber = Math.floor(1000000000 + Math.random() * 9000000000);
        const screenshotFilename = `${randomNumber}.png`;
        const screenshotPath = path.join(__dirname, '../public', screenshotFilename);
        const options = {
            screenSize: { width: 1366, height: 768 },
            shotSize: { width: 1366, height: 768 },
            renderDelay: 3000
        };
        webshot(url, screenshotPath, options, function (err) {
            if (err) {
                return res.status(500).json({ error: 'Failed to take screenshot', details: err.message });
            }
            const end = Date.now();
            const loadTime = end - start;
            const fullScreenshotURL = `https://${req.get('host')}/public/${screenshotFilename}`;
            res.json({ title, screenshotURL: fullScreenshotURL, loadTime: `${loadTime}ms` });
        });
    } catch (error) {
        res.status(500).json({ error: 'Failed to take screenshot', details: error.message });
    }
}

clearScreenshots

Description: Deletes all PNG files from the public directory.
Parameters:
- req: The request object from Express.
- res: The response object from Express.
Process:
1. Reads the contents of the public directory.
2. Filters the files to include only PNG files.
3. Deletes each PNG file asynchronously.
4. Returns a success message upon completion.
Response:
- Success: Returns a JSON object with a success message.
- Error: Returns a JSON object with an error message and details.

async function clearScreenshots(req, res) {
    const publicDir = path.join(__dirname, '../public');
    try {
        const files = await readdir(publicDir);
        const pngFiles = files.filter(file => file.endsWith('.png'));
        await Promise.all(pngFiles.map(file => unlink(path.join(publicDir, file))));
        res.json({ message: 'All PNG files deleted successfully' });
    } catch (error) {
        res.status(500).json({ error: 'Failed to delete PNG files', details: error.message });
    }
}

Exported Functions

takeScreenshot: Captures and saves a screenshot, then returns relevant information.
clearScreenshots: Deletes all PNG screenshots from the public directory.

module.exports = {
  takeScreenshot,
  clearScreenshots
};

Usage

These functions are designed to be used as route handlers in an Express.js application. When a request is made to the /screenshot route, the takeScreenshot function will be executed. Similarly, when a request is made to the /screenshot/clear route, the clearScreenshots function will be executed.

It gives you a Json response

{
  "title":"Page Title",
  "screenshotURL":"http://localhost:3000/public/1882747163.png",
  "loadTime":"25561ms"
}

Here is the API in action https://app.marvelly.com.ng/100daysofMiva/day-4/ Good Luck

Dynamic Button UI onclick using JavaScript

Ezekiel Marvellous — Thu, 22 Aug 2024 15:38:36 +0000

Day 3

It's already three days into the #100daysofMiva coding challenge. 😂👏🏻

Today, I didn't do anything on backend. I need to strengthen my front-end skills. I'll be working on a simple button UX design with JavaScript. Have you ever submitted a form on any website or application and instead of just waiting for the response, you get to see these fancy texts changing on the button you clicked.

That's what I'll be coding today. Let's Go!👏🏻🚀

We will be working on the Client Side also known as the Front-end with basic Html and Dynamic JS.

HTML

For html, I wrote a basic form with one input and a submit button.

<div>    
<h2>Button UI</h2>  
  <div id="message"></div>   
  <form id="linkForm" onsubmit="submitForm(event)">     
     <label for="rand_word">Enter Random Word</label>   
          <input type="text" id="rand_word" name="rand_word" placeholder="e.g What is life?" required />    
              <button type="submit" id="submitButton">Submit</button>  
   </form>
</div>

This form is a simple HTML structure that allows a user to input a random word and submit it. Here’s a breakdown of each element:

1.`<div>`

Purpose: Acts as a container for the form and its related elements.
Content: - A heading (<h2>) labeled "Button UI".
A message area (<div id="message">) where feedback is displayed to the user after form submission. - The actual form (<form>), which contains an input field and a submit button.

2. `<h2>Button UI</h2>`

Purpose: Provides a title or heading for the section of the page that contains the form.
Text: "Button UI".

3. `<div id="message"></div>`

Purpose: This div is used to display messages to the user, such as confirmation of what they typed after they submit the form. Initially, it's empty and may be hidden, but it will be populated with text and shown after form submission.

4. `<form id="linkForm" onsubmit="submitForm(event)">`

Purpose: This is the form element that groups together the input field and submit button.

Attributes:

id="linkForm": Gives the form a unique identifier so it can be referenced in JavaScript.
onsubmit="submitForm(event)": Specifies the JavaScript function to be called when the form is submitted. The submitForm(event) function is intended to handle the form submission process and prevent the default behavior of reloading the page.

5. `<label for="rand_word">Enter Random Word</label>`

Purpose: Provides a label for the input field, which improves accessibility by indicating what the user should input.
Attributes: - for="rand_word": Associates the label with the input field that has the id="rand_word".
Text: "Enter Random Word".

6. `<input type="text" id="rand_word" name="rand_word" placeholder="e.g What is life?" required />`

Purpose: This is the input field where the user types in a random word.

Attributes:

type="text": Indicates that this is a text input field.
id="rand_word": Provides a unique identifier for the input, linking it to the label and allowing it to be referenced in JavaScript.
name="rand_word": This is the name of the form data key that will be sent when the form is submitted.
placeholder="e.g What is life?": Provides a hint inside the input field before the user types anything, suggesting an example of what they might input.
required: Makes this field mandatory, meaning the form cannot be submitted until the user has entered something.

7. `<button type="submit" id="submitButton">Submit</button>`

Purpose: This is the button that the user clicks to submit the form.

Attributes:

type="submit": Indicates that this button will submit the form data when clicked.
id="submitButton": Provides a unique identifier for the button, so it can be easily accessed and modified by JavaScript.
Text: "Submit" — this is the text displayed on the button.

HTML Summary

User Interaction: The user enters a random word in the input field and clicks the "Submit" button. When the form is submitted, the submitForm(event) JavaScript function is called, which handles the submission process (e.g., displaying messages, preventing page reload, possibly sending data to a server).
Purpose: This form could be used for various purposes, such as collecting user input, interacting with a backend service, or even just demonstrating form handling in a user interface.

JavaScript

<!-- JavaScript Code -->  
  <script>    
  function submitForm(event) {      
    event.preventDefault(); // Prevent the form from submitting the default way
    const formData = new FormData(document.getElementById('linkForm'));       
    const submitButton = document.getElementById('submitButton');        
    const message = document.getElementById('message');        
    const randWord = formData.get('rand_word'); // Get the value of the rand_word field
    let dotCount = 0;        
    const updateDots = () => {        
        dotCount = (dotCount + 1) % 4;           
        return '.'.repeat(dotCount);       
    };
    const baseMessages = [            
       "Submitting",            
       "Still working on it",            
       "Hold on",            
       "Almost done"        
    ];
    submitButton.innerText = `${baseMessages[0]}${updateDots()}`;        
    submitButton.classList.add('submitting');        
    submitButton.disabled = true;        
    message.style.display = 'none'; // Hide the message box initially
        // Generate a random delay between 1 and 10 seconds        const delay = Math.floor(Math.random() * 9000) + 1000;
        if (delay > 2000) {        
            let messageIndex = 0;                        
            const messageInterval = setInterval(() => {              
              submitButton.innerText = `${baseMessages[messageIndex]}${updateDots()}`;                
              if (dotCount === 0) {                  
                messageIndex = (messageIndex + 1) % baseMessages.length;                
              }            
            }, 500);   // Clear the interval after the delay to stop the loop            
            setTimeout(() => clearInterval(messageInterval), delay - 500);        
            }
        // Simulate a wait time of random delay        
        setTimeout(() => {            message.innerText = 'You typed: ' + randWord; // Show the submitted data in the message box            
        message.style.display = 'block';
            submitButton.innerText = 'Submitted';            
            submitButton.classList.remove('submitting');            
            submitButton.classList.add('submitted');
            // Reset the button state after 2 seconds            
            setTimeout(() => {                submitButton.innerText = 'Submit';                
            submitButton.classList.remove('submitted');                submitButton.disabled = false;            
            }, 4000);
            document.getElementById('linkForm').reset(); // Reset the form fields        
            }, delay); // Wait for the random delay before showing the message    
            }</script>

This JavaScript code handles the form submission process, providing an enhanced user experience by simulating a dynamic waiting period with animated dots and changing messages.

Below is the result.

As a backend Dev, the only issue I had was getting the dots animated. It took a while but I was able to overcome it. I'm looking forward to coding tomorrow 😂👀

Click here to preview the final result https://app.marvelly.com.ng/100daysofMiva/day-3/

Day 2: Solving simple problem with codes

Ezekiel Marvellous — Wed, 21 Aug 2024 19:19:39 +0000

Initially, I planned my schedule on what I'd be working on for each day but I had to skip today’s schedule. The #100daysofMiva coding challenge has quite a number of participants and we'd love to connect with each other on GitHub, LinkedIn, Devto and on any other blogging platform but there was a problem 🌚 we needed a platform to share our links for easy navigation. Of course, there's a lot of ways to get the job done but it's not bad to walk the “Coding Path” right? 🫠 Let's go 🥲🤞🏻

First things first, I narrowed down to the most important segments:

A form,
A database and
A table.

For this project, I will be going through the modest way of parsing data and information.🌚

There's already a blog on how web communication works on this #100daysofMiva coding challenge. https://dev.to/adeleke123/day-1-understanding-apis-the-backbone-of-web-communication-4kn2

From client to server than database also from server back to client. Please read through this blog if you are new to Web communication with API.

For this Project, I will be working on the

Front-end: which is client with basic html, CSS, JS and a custom tailus UI CSS🌚. I may be a professional backend and API Dev but my front-end still aches😭.
Backend: which is the server that'll communicate with the database in the three major backend languages… PHP, python and Nodejs 🌚. Trust me… backend is easier than front-end🙂‍↕️
Database: where I’ll store the information from the form. For this project, I’ll be working with MySQL because why not?

Let’s Get started.

PART 1

Frontend

My fronted is based on just basic html and js. You can style it yourself. first, the code for the form in html

<div id="message"></div>
<form id="linkForm" onsubmit="submitForm(event)">
    <label for="githubLink">GitHub Link</label>
    <input type="url" id="githubLink" name="github" placeholder="Enter your GitHub profile link" required />

    <label for="linkedinLink">LinkedIn Link</label>
    <input type="url" id="linkedinLink" name="linkedin" placeholder="Enter your LinkedIn profile link" required />

    <label for="devtoLink">Dev.to Link</label>
    <input type="url" id="devtoLink" name="devto" placeholder="Enter your Dev.to profile link" required />

    <label for="portfolioLink">Portfolio Link (Optional)</label>
    <input type="url" id="portfolioLink" name="portfolio" placeholder="Enter your personal portfolio link" />

    <button type="submit" id="submitButton">Submit</button>
</form>

Documentation for the Link Submission Form

Overview

This form allows users to submit their profile links for GitHub, LinkedIn, Dev.to, and an optional personal portfolio. It is handled asynchronously using JavaScript to prevent a full page reload on form submission.

Elements

1. Message Display (`div#message`)

<div id="message"></div>

Purpose: This element is used to display feedback messages to the user after submitting the form, such as success or error messages.
Initial State: It is hidden by default using display: none;. The message becomes visible with appropriate text when the form is submitted successfully or when an error occurs.
Usage: JavaScript dynamically updates the text and visibility of this element based on the form submission status.

2. Form (`form#linkForm`)

<form id="linkForm" onsubmit="submitForm(event)">
    <!-- Form Inputs Here -->
</form>

ID: linkForm
onsubmit: The submitForm(event) function is called when the form is submitted. This function handles the form submission using fetch to prevent a traditional form submission and reload.
Purpose: It gathers the user's input for their various profile links and sends it to the server via an asynchronous POST request.

3. GitHub Link (`input#githubLink`)

<label for="githubLink">GitHub Link</label>
<input type="url" id="githubLink" name="github" placeholder="Enter your GitHub profile link" required />

Type: url
ID: githubLink
Name: github
Required: Yes
Placeholder: "Enter your GitHub profile link"
Validation: This field expects a valid URL, enforced by the url input type and required attribute. thesame goes for Linkedin, Devto and an optional portfolio

4. Submit Button (`button#submitButton`)

<button type="submit" id="submitButton">Submit</button>

Type: submit
ID: submitButton
Text: "Submit"
Function: This button triggers the form submission. It is disabled and its text changes to "Submitting..." while the form is being processed. Upon successful submission, the button shows "Submitted" and reverts back to "Submit" after a short delay.

JavaScript Behavior

The form is handled by the JavaScript function submitForm(event) that does the following:

Prevents the default form submission.
Uses fetch to send the form data to the server asynchronously.
Shows the submission status in the #message element.
Updates the form button (#submitButton) to indicate progress.
On success, the submitted data is processed, and the form is reset.

Below is the said Javascript

 function submitForm(event) {
     // Prevent the form from submitting the default way
     event.preventDefault(); 

     // Assign the form data to constants
     const formData = new FormData(document.getElementById('linkForm'));
     const submitButton = document.getElementById('submitButton');

     // I like dynamic UX so... this changes the button text
     submitButton.innerText = 'Submitting... Please wait';
     submitButton.classList.add('submitting');
     submitButton.disabled = true;

     // Use fetch to send the form data to the server or backend
     fetch('./addlinks', {
             method: 'POST',
             body: formData
         })
         .then(response => response.json()) // Parse the response as JSON
         .then(data => {
             if (data.message) {
                 document.getElementById('message').innerText = data.message;
                 document.getElementById('message').style.display = 'block';
             }

             loadLinks(); // Refresh the links table
             document.getElementById('linkForm').reset(); // Reset the form fields

             submitButton.innerText = 'Submitted';
             submitButton.classList.remove('submitting');
             submitButton.classList.add('submitted');

             setTimeout(() => {
                 submitButton.innerText = 'Submit';
                 submitButton.classList.remove('submitted');
                 submitButton.disabled = false;
             }, 2000); // Reset the button state after 2 seconds
         })
         .catch(error => {
             console.error('Error:', error);
             document.getElementById('message').innerText = 'Error submitting the form. Please try again.';
             document.getElementById('message').style.display = 'block';

             submitButton.innerText = 'Submit';
             submitButton.classList.remove('submitting');
             submitButton.disabled = false;
         });

 }

 // This script fetches the links from the server or backend and populate the table
 function loadLinks() {
    fetch('./links')
         .then(response => response.json())
         .then(data => {
             const tableBody = document.getElementById('linksTableBody');
             tableBody.innerHTML = ''; // Clear any existing rows

             data.forEach(link => {
                 const row = document.createElement('tr');
                 row.innerHTML = `
                        <td><a href="${link.github}" target="_blank">${link.github}</a></td>
                        <td><a href="${link.linkedin}" target="_blank">${link.linkedin}</a></td>
                        <td><a href="${link.devto}" target="_blank">${link.devto}</a></td>
                        <td><a href="${link.portfolio ? link.portfolio : '#'}" target="_blank">${link.portfolio ? link.portfolio : 'N/A'}</a></td>
                    `;
                 tableBody.appendChild(row);
             });
         })
         .catch(error => console.error('Error:', error));
 }

//Lastly, this script loads the table data when the page loads
document.addEventListener('DOMContentLoaded', function() {
     loadLinks(); // Load the links when the page loads
 });

That’s all for the client-side or front-end 🌚

Backend

First, you set your connection to your database (I’m using MySQL) then a query to SELECT all data from Links and parse them into a JSON array. It’s easy.

<?php
// Database connection parameters
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "links";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Set the content type to JSON
header('Content-Type: application/json');

// Fetch all links
$sql = "SELECT github, linkedin, devto, portfolio FROM links";
$result = $conn->query($sql);

$links = [];
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $links[] = $row;
    }
}

// Return JSON encoded array of links
echo json_encode($links);

$conn->close();
?>

Nodejs

To get the links from the database using Node.js script using Express and MySQL, you'll need to set up a MySQL connection in Node.js, query the database, and return the results as JSON.

Prerequisites

Make sure you have Node.js installed.
Install the required Node.js packages using the following command:

npm install express mysql

Node.js Code (`app.js`)

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

const app = express();

// Database connection parameters
const db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'links'
});

// Connect to the database
db.connect((err) => {
    if (err) {
        console.error('Database connection failed: ' + err.stack);
        return;
    }
    console.log('Connected to the database.');
});

// Set up /getlinks route
app.get('/getlinks', (req, res) => {
    const sql = 'SELECT github, linkedin, devto, portfolio FROM links';

    db.query(sql, (err, result) => {
        if (err) {
            return res.status(500).json({ error: err.message });
        }
        res.json(result);
    });
});

// Start the server
const PORT = 3000;
app.listen(PORT, () => {
    console.log(`Server is running on <http://localhost>:${PORT}`);
});

Explanation:

MySQL Connection:
- We use the mysql package to connect to the MySQL database with the same credentials you used in your PHP code.
Route /getlinks:
- The /getlinks route handles the request and sends a query to the database to select the github, linkedin, devto, and portfolio fields from the links table.
- If the query is successful, the results are sent back as a JSON response.
- If an error occurs, it returns a 500 status with the error message.
Starting the Server:
- The server listens on port 3000, and you can access the route by visiting http://localhost:3000/getlinks.

Running the Code:

Save the code above to app.js.
Run the script using:

node app.js

Visit http://localhost:3000/getlinks in your browser, and you should see the JSON output of the links from your MySQL database.
Python

You can achieve the same functionality using Python with the Flask web framework and mysql-connector-python library for MySQL database connectivity. Here's how to write your PHP script in Python:

Prerequisites

Make sure you have Python installed.
Install the required packages using the following command:

pip install flask mysql-connector-python

Python Code (`app.py`)

from flask import Flask, jsonify
import mysql.connector
from mysql.connector import Error

app = Flask(__name__)

# Database connection parameters
db_config = {
    'host': 'localhost',
    'user': 'root',
    'password': '',
    'database': 'links'
}

def get_db_connection():
    try:
        connection = mysql.connector.connect(**db_config)
        if connection.is_connected():
            print('Connected to the database.')
            return connection
    except Error as e:
        print(f"Error while connecting to MySQL: {e}")
        return None

@app.route('/getlinks', methods=['GET'])
def get_links():
    connection = get_db_connection()
    if connection is None:
        return jsonify({'error': 'Failed to connect to database'}), 500

    cursor = connection.cursor(dictionary=True)
    cursor.execute("SELECT github, linkedin, devto, portfolio FROM links")

    links = cursor.fetchall()
    cursor.close()
    connection.close()

    return jsonify(links)

if __name__ == '__main__':
    app.run(port=3000)

MySQL Connection:
- The mysql.connector.connect function is used to connect to the MySQL database using the provided credentials.
Route /getlinks:
- The /getlinks route executes the SQL query to fetch the github, linkedin, devto, and portfolio fields from the links table.
- The results are fetched as a list of dictionaries and returned as a JSON response using Flask's jsonify function.
Starting the Server:
- The Flask app is configured to run on port 3000. When you run the script, you can access the route by visiting http://localhost:3000/getlinks.

Running the Code:

Save the code above to app.py.
Run the script using:

python app.py

Open your browser and visit http://localhost:3000/getlinks to see the JSON output of the links from your MySQL database.

This Python version does the same job as the original PHP script but leverages Python's Flask and MySQL connector libraries.

Bonus tip:

when deploying on a server,

passenger_wsgi.py

import sys
import os

# Add the current directory to the sys.path
sys.path.insert(0, os.path.dirname(__file__))

# Import the Flask app (assuming app.py contains your Flask app)
from app import app as application

This marks the first phase of getting the links. I will keep you updated on part 2 for posting or saving the form data on the database. Let’s Go!