DEV Community: Mohamud Dahir Abdi

[Boost]

Mohamud Dahir Abdi — Mon, 14 Apr 2025 11:48:37 +0000

Mohamud Dahir Abdi

Apr 14 '25

I Built a Simple, Sleek QR Code Generator Using HTML, CSS & JavaScript

Comments

2 min read

I Built a Simple, Sleek QR Code Generator Using HTML, CSS & JavaScript

Mohamud Dahir Abdi — Mon, 14 Apr 2025 11:47:21 +0000

QR codes are everywhere these days — menus, payments, websites, even job applications. So I thought: why not build a quick and clean QR code generator myself? And that’s exactly what I did with just HTML, CSS, and a bit of vanilla JavaScript. 🔥

Here’s a quick look at the finished app:

🚀 What It Does

This QR code generator lets users input any text or URL and instantly generates a scannable QR code. You can then download it as a PNG image, or clear and generate a new one — simple as that.

Whether you want to generate a code for your portfolio site, a Wi-Fi password, or just for fun, this tool has you covered.

⚙️ Key Features

✅ Live QR code generation via GoQR API
🖼 Smooth QR preview with animation
💾 One-click download button
🧹 Clear/reset functionality
⚠️ Error handling for empty or oversized input
📱 Fully responsive and styled with a clean modern UI using Poppins font

Another screenshot showing the QR code + download button in action:

🧩 Tech Stack

HTML5 for structure
CSS3 for styling and responsive layout
JavaScript (Vanilla) for logic, API calls, and DOM manipulation
GoQR.me API for generating QR codes

🧠 Code Walkthrough (Quick Highlights)

Here’s how it works behind the scenes:

1. Input and Validation

const inputValue = qrText.value.trim();
if (!inputValue) {
  showError("Please enter a value to generate a QR code.");
  return;
}

Checks for empty input or overly long content, ensuring smooth UX and preventing broken QR codes.

2. Generating the QR

const qrCodeURL = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(inputValue)}`;
qrCode.src = qrCodeURL;

A simple GET request to the GoQR API with the user’s input embedded in the URL. No need for complex libraries!

3. Downloading the Image

const link = document.createElement("a");
link.href = qrCode.src;
link.download = `QRCode_${Date.now()}.png`;
link.click();

Just dynamically create an <a> tag and trigger a click — clean and effective.

📁 See the Code on GitHub

All the source files (HTML, CSS, JS) are up on GitHub as part of my "30 JavaScript Projects in 30 Days" challenge:

👉 GitHub Repo – QR Code Generator

If you like it, give it a ⭐ and feel free to fork it or contribute!

💬 Final Thoughts

This was a fun, beginner-friendly mini project that’s both practical and rewarding. I learned how to:

Work with third-party APIs
Dynamically update the DOM
Handle file downloads in the browser
Add subtle UX improvements with CSS animations and transitions

Next up in the series: something a little more interactive... 👀

Thanks for reading! Let me know if you build your own version, or if you have ideas to improve this one 🙌

Build a Sleek Calculator with Dark Mode - Interactive Guide

Mohamud Dahir Abdi — Thu, 10 Apr 2025 21:22:47 +0000

Let's create a modern calculator that's both beautiful and functional, with all the code explained in an engaging way. By the end, you'll have a calculator that works on all devices and even supports keyboard input!

🎨 The Design Vision

We're building a calculator with:

A dark theme (with easy light mode potential)
Full calculation history
Keyboard support (type directly!)
Responsive design (works on phones too)
Smooth animations

🛠️ Let's Build It!

1. The HTML Foundation

Our calculator needs:

A display area (for current input and history)
Number buttons (0-9)
Operator buttons (+, -, *, /)
Special functions (AC, DEL, %)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neon Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="calculator">
        <!-- Display Area -->
        <div class="display">
            <div class="history"></div>
            <input type="text" id="output" readonly>
        </div>

        <!-- Buttons Grid -->
        <div class="buttons">
            <button data-value="AC" class="ac">AC</button>
            <button data-value="DEL" class="del">DEL</button>
            <button data-value="%" class="operator">%</button>
            <button data-value="/" class="operator">÷</button>

            <button data-value="7" class="number">7</button>
            <button data-value="8" class="number">8</button>
            <button data-value="9" class="number">9</button>
            <button data-value="*" class="operator">×</button>

            <button data-value="4" class="number">4</button>
            <button data-value="5" class="number">5</button>
            <button data-value="6" class="number">6</button>
            <button data-value="-" class="operator">−</button>

            <button data-value="1" class="number">1</button>
            <button data-value="2" class="number">2</button>
            <button data-value="3" class="number">3</button>
            <button data-value="+" class="operator">+</button>

            <button data-value="0" class="number zero">0</button>
            <button data-value="." class="number">.</button>
            <button data-value="=" class="equals">=</button>
        </div>
    </div>

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

Key Points:

data-value attributes store what each button does
Special classes like operator and number help with styling
The zero button is wider (we'll style it that way)

2. Stylish CSS Makeover

Let's give our calculator some personality with:

A sleek dark theme
Glowing operator buttons
Smooth button presses

:root {
    --bg-color: #1e1e2e;
    --display-bg: #2a2a3a;
    --button-bg: #3a3a4a;
    --operator-color: #ff9500;
    --equals-color: #ff2d75;
    --ac-del-color: #a5a5a5;
    --text-color: #ffffff;
}

body {
    background: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Segoe UI', sans-serif;
    transition: all 0.3s ease;
}

.calculator {
    width: 320px;
    background: var(--bg-color);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.display {
    background: var(--display-bg);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: right;
}

.history {
    color: rgba(255, 255, 255, 0.5);
    height: 20px;
    font-size: 14px;
}

#output {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-color);
    font-size: 36px;
    text-align: right;
    outline: none;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

button {
    height: 60px;
    border: none;
    border-radius: 10px;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.1s;
    color: var(--text-color);
    background: var(--button-bg);
}

button:active {
    transform: scale(0.95);
}

.number {
    background: var(--button-bg);
}

.operator {
    background: var(--operator-color);
}

.equals {
    background: var(--equals-color);
}

.ac, .del {
    background: var(--ac-del-color);
}

.zero {
    grid-column: span 2;
}

/* Glow effect on hover */
.operator:hover, .equals:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 10px currentColor;
}

Design Highlights:

CSS variables make theme changes easy
Grid layout for perfect button alignment
Interactive button effects (press and glow)
The zero button spans two columns

3. JavaScript Magic

Now for the brains! Our calculator needs to:

Handle button clicks
Manage calculations
Support keyboard input
Show history

const output = document.getElementById('output');
const buttons = document.querySelectorAll('button');
const historyDisplay = document.querySelector('.history');

let currentInput = '0';
let calculationHistory = '';

// Initialize display
output.value = currentInput;

// Update the calculator display
function updateDisplay() {
    output.value = currentInput;

    // Adjust font size for long numbers
    output.style.fontSize = currentInput.length > 12 ? '24px' : '36px';
}

// Check if input is valid
function isValidInput(value) {
    // Prevent multiple decimals
    if (value === '.' && currentInput.includes('.') && !'+-*/'.includes(currentInput.slice(-1))) {
        return false;
    }

    // Prevent consecutive operators
    if ('+-*/'.includes(value) && '+-*/'.includes(currentInput.slice(-1))) {
        return false;
    }

    return true;
}

// Perform the calculation
function calculate() {
    try {
        // Replace × and ÷ with * and /
        let expression = currentInput.replace(/×/g, '*').replace(/÷/g, '/');

        // Use Function constructor instead of eval
        const result = new Function(`return ${expression}`)();

        // Format the result
        return Number.isInteger(result) ? result.toString() : result.toFixed(4);
    } catch {
        return 'Error';
    }
}

// Handle button clicks
buttons.forEach(button => {
    button.addEventListener('click', () => {
        const value = button.dataset.value;

        if (value === 'AC') {
            // Clear everything
            currentInput = '0';
            calculationHistory = '';
            historyDisplay.textContent = '';
        } else if (value === 'DEL') {
            // Backspace functionality
            currentInput = currentInput.length > 1 ? currentInput.slice(0, -1) : '0';
        } else if (value === '=') {
            // Calculate and show history
            calculationHistory = currentInput;
            historyDisplay.textContent = calculationHistory + ' =';
            currentInput = calculate();
        } else {
            // Add numbers or operators
            if (!isValidInput(value)) return;

            if (currentInput === '0' && !'+-*/'.includes(value)) {
                currentInput = value;
            } else {
                currentInput += value;
            }
        }

        updateDisplay();
    });
});

// Keyboard support
document.addEventListener('keydown', (e) => {
    const keyMap = {
        'Enter': '=',
        'Backspace': 'DEL',
        'Escape': 'AC',
        '*': '*',
        '+': '+',
        '-': '-',
        '/': '/',
        '%': '%',
        '.': '.'
    };

    if (keyMap[e.key]) {
        document.querySelector(`button[data-value="${keyMap[e.key]}"]`).click();
    } else if (!isNaN(e.key) || e.key === '0') {
        document.querySelector(`button[data-value="${e.key}"]`).click();
    }
});

Key Features:

Safe calculations using Function instead of eval
Input validation prevents errors
Keyboard support for quick typing
History tracking shows your previous calculation
Error handling for invalid expressions

🚀 Taking It Further

Want to enhance your calculator? Try these ideas:

Add Light/Dark Mode Toggle

const themeToggle = document.createElement('button');
themeToggle.textContent = '🌙';
document.body.prepend(themeToggle);

themeToggle.addEventListener('click', () => {
    document.body.classList.toggle('light-mode');
});

Add to CSS:

.light-mode {
    --bg-color: #f0f2f5;
    --display-bg: #ffffff;
    --button-bg: #e0e0e0;
    --text-color: #000000;
}

Add Scientific Functions

<button data-value="Math.sqrt(">√</button>
<button data-value="Math.pow(,2)">x²</button>

Add Memory Functions

let memory = 0;

function memoryAdd() {
    memory += parseFloat(currentInput);
}

💡 Why This Calculator Rocks

No eval() - Safer calculations using Function constructor
Great UX - Visual feedback on button presses
Responsive - Works on any device
Accessible - Works with keyboard and screen readers
Easy to Extend - Add more features easily

Now you've got a calculator that looks great and works even better! What feature will you add next? Maybe voice control or calculation graphs? The possibilities are endless!

To-Do List App Javascript

Mohamud Dahir Abdi — Sun, 06 Apr 2025 10:59:43 +0000

Complete To-Do List App with Dark Mode - Full Code Walkthrough

Here's the complete implementation of your modern To-Do List application with dark mode functionality, including all HTML, CSS, and JavaScript code.

In this step-by-step tutorial, i will create a feature-rich To-Do List app with:

✅ Dark/light mode toggle (auto-saves preference)

✅ Add, edit, delete, and mark tasks complete

✅ "Delete All" with confirmation

✅ Keyboard support (Enter key to add tasks)

✅ Persistent storage (tasks survive page refresh)

🔗 Full Code on GitHub

📱 App Preview (Live Demo)

Light Mode	Dark Mode

📁 File Structure

📁 todo-app/
├── 📄 index.html
├── 📄 style.css
├── 📄 script.js
└── 📁 images/
    ├── 📄 checked.png
    ├── 📄 delete.png
    ├── 📄 to-do-list-icon.png
    └── 📄 unchecked.png

🖥️ HTML (index.html)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>To-Do List App</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- Dark Mode Toggle -->
    <div class="theme-toggle-container">
      <button class="theme-toggle" id="theme-toggle">
        <span class="toggle-icon">🌙</span>
        <span class="toggle-text">Dark Mode</span>
      </button>
    </div>

    <!-- To-Do List App -->
    <div class="container">
      <div class="todo-app">
        <h2>
          To-Do-List
          <span>
            <img src="images/to-do-list-icon.png" class="todo-icon" />
          </span>
        </h2>
        <div class="row">
          <input type="text" id="input-box" placeholder="Add your text" />
          <button id="add-btn" onclick="addTask()" disabled>Add</button>
        </div>
        <ul id="list-container"></ul>
        <button id="delete-all" class="delete-all-btn">Delete All</button>
      </div>
    </div>

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

🎨 CSS (style.css)

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

:root {
  /* Light Mode Colors */
  --primary-bg: linear-gradient(
    to right,
    #e3a1a1,
    #b0c4c4,
    #4fc2dd,
    #a897d6,
    #70c0d3
  );
  --app-bg: #ffffff;
  --text-color: #002655;
  --input-bg: #dfe2e5;
  --add-btn: #ff4d3a;
  --delete-all-btn: linear-gradient(to right, #ff5e6f, #b2e4ff, #ff5e6f);
  --list-item-bg: #ffffff;
  --checked-item: #666;

  /* Dark Mode Colors */
  --dark-primary-bg: linear-gradient(to right, #101d26, #1c3544, #284c5e);
  --dark-app-bg: #1c1c1c;
  --dark-text-color: #f5f5f5;
  --dark-input-bg: #333;
  --dark-add-btn: #e65a5a;
  --dark-delete-all-btn: linear-gradient(to right, #ff3b5c, #ff4825);
  --dark-list-item-bg: #333;
  --dark-checked-item: #bbb;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  transition: background 0.3s, color 0.3s;
}
body {
  transition: background 0.5s ease, color 0.5s ease;
}

body.dark-mode {
  --primary-bg: var(--dark-primary-bg);
  --app-bg: var(--dark-app-bg);
  --text-color: var(--dark-text-color);
  --input-bg: var(--dark-input-bg);
  --add-btn: var(--dark-add-btn);
  --delete-all-btn: var(--dark-delete-all-btn);
  --list-item-bg: var(--dark-list-item-bg);
  --checked-item: var(--dark-checked-item);
}

.container {
  width: 100%;
  min-height: 100vh;
  background: var(--primary-bg);
  padding: 10px;
}

.todo-app {
  width: 100%;
  max-width: 540px;
  background: var(--app-bg);
  margin: 100px auto 20px;
  padding: 40px 30px 70px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.todo-app h2 {
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.todo-app h2 img.todo-icon {
  width: 60px;
  height: 60px;
  margin-left: 10px;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--input-bg);
  border-radius: 30px;
  padding-left: 20px;
  margin-bottom: 25px;
}

input {
  flex: 1;
  outline: none;
  border: none;
  background: transparent;
  padding: 10px;
  font-size: 14px;
  color: var(--text-color);
}

button {
  border: none;
  outline: none;
  padding: 16px 50px;
  background: var(--add-btn);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  border-radius: 40px;
  font-weight: 500;
}

/* Disable button style */
button:disabled {
  background: gray;
  cursor: not-allowed;
}

/* To-Do List Items */
ul li {
  list-style: none;
  font-size: 17px;
  padding: 12px 8px 12px 50px;
  user-select: none;
  cursor: pointer;
  position: relative;
  background: var(--list-item-bg);
  margin-bottom: 8px;
  color: var(--text-color);
  border-radius: 8px;
}

/* Checkbox icon before list items */
ul li::before {
  content: "";
  position: absolute;
  height: 28px;
  width: 28px;
  border-radius: 50%;
  background-image: url(images/unchecked.png);
  background-size: cover;
  background-position: center;
  top: 12px;
  left: 8px;
}

/* Checked list item */
ul li.checked {
  color: var(--checked-item);
  text-decoration: line-through;
}

/* Change checkbox image when checked */
ul li.checked::before {
  background-image: url(images/checked.png);
}

/* Delete icon */
ul li .delete-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  filter: var(--icon-filter);
}

ul li .delete-icon:hover {
  opacity: 1;
}

/* Delete All Button */
.delete-all-btn {
  background: var(--delete-all-btn);
  margin: 20px auto 0;
  padding: 15px 45px;
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  border-radius: 10px;
  display: block;
  border: none;
  font-weight: 500;
  cursor: pointer;
}

.delete-all-btn:hover {
  background-position: right center;
}

/* Dark Mode Specific */
body.dark-mode .delete-icon {
  filter: invert(1);
}

body.dark-mode ul li {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Theme Toggle Button - Top Left */
.theme-toggle-container {
  position: absolute;
  top: 20px;
  left: 20px;
}

.theme-toggle {
  background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 30px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  transform: translateY(-2px);
}

body.dark-mode .theme-toggle {
  background: linear-gradient(to right, #f5af19 0%, #f12711 100%);
  color: #fff;
}

⚡ JavaScript (script.js)

const inputBox = document.getElementById("input-box");
const listContainer = document.getElementById("list-container");
const deleteAllBtn = document.getElementById("delete-all");
const themeToggle = document.getElementById("theme-toggle");
const toggleIcon = themeToggle.querySelector(".toggle-icon");
const toggleText = themeToggle.querySelector(".toggle-text");
const addButton = document.getElementById("add-btn");

// Initialize theme
function initTheme() {
    const isDark = localStorage.getItem("darkMode") === "true";
    if (isDark) document.body.classList.add("dark-mode");
    updateThemeButton(isDark);
  }

// Update theme button
function updateThemeButton(isDark) {
  toggleIcon.textContent = isDark ? "☀️" : "🌙";
  toggleText.textContent = isDark ? "Light Mode" : "Dark Mode";
}

// Toggle theme
themeToggle.addEventListener("click", () => {
  const isDark = document.body.classList.toggle("dark-mode");
  localStorage.setItem("darkMode", isDark);
  updateThemeButton(isDark);
});

// Disable Add button when input is empty
inputBox.addEventListener("input", () => {
    addButton.disabled = inputBox.value.trim() === "";
  });

// Add new task
function addTask() {
  if (inputBox.value.trim() === "") {
    alert("Please enter a task");
    return;
  }

  const li = document.createElement("li");
  li.textContent = inputBox.value.trim();

  const deleteIcon = document.createElement("img");
  deleteIcon.src = "images/delete.png";
  deleteIcon.className = "delete-icon";
  deleteIcon.alt = "Delete task";

  li.appendChild(deleteIcon);
  listContainer.appendChild(li);
  inputBox.value = "";
  addButton.disabled = true; // Disable button after adding task

  saveData();
  updateDeleteAllVisibility();
}


// Handle list interactions (check/uncheck and delete)
listContainer.addEventListener("click", function (e) {
  if (e.target.tagName === "LI") {
    e.target.classList.toggle("checked");
    saveData();
  } else if (e.target.classList.contains("delete-icon")) {
    e.target.parentElement.remove();
    saveData();
    updateDeleteAllVisibility();
  }
});

// Delete all tasks
deleteAllBtn.addEventListener("click", function () {
  if (listContainer.children.length === 0) return;

  if (confirm("Are you sure you want to delete ALL tasks?")) {
    listContainer.innerHTML = "";
    saveData();
    updateDeleteAllVisibility();
  }
});

// Save data to localStorage
function saveData() {
  localStorage.setItem("data", listContainer.innerHTML);
}

// Load tasks from localStorage
function showTask() {
  listContainer.innerHTML = localStorage.getItem("data") || "";
  updateDeleteAllVisibility();
}

// Show/hide Delete All button based on tasks
function updateDeleteAllVisibility() {
  deleteAllBtn.style.display =
    listContainer.children.length > 0 ? "block" : "none";
}

// Initialize app
initTheme();
showTask();

// Add task on Enter key press
inputBox.addEventListener("keypress", function (e) {
  if (e.key === "Enter") {
    addTask();
  }
});

🌟 Key Features Explained

Dark/Light Mode Toggle
- Uses CSS variables for easy theme switching
- Saves user preference in localStorage
Task Management
- Add tasks by clicking "Add" or pressing Enter
- Mark tasks as complete by clicking them
- Delete individual tasks with the trash icon
- "Delete All" button with confirmation
Data Persistence
- All tasks are saved to localStorage automatically
- Tasks persist even after closing/reopening the browser
User Experience
- "Add" button disabled when input is empty
- Smooth transitions between themes
- Responsive design works on all devices

🚀 How to Use This App

Download all files and images
Open index.html in your browser
Start adding tasks!
Toggle between light/dark mode using the button

You can find the complete project on GitHub:

🔗 GitHub Repository