The Palos Publishing Company

Categories We Write About

Build a tool to log professional achievements

Written by

Bernardo Palos

in

Creating a tool to log professional achievements can be approached in many ways depending on your target platform (web, mobile, desktop) and the features you want. Below is a detailed outline and an example of a simple web-based tool built with HTML, CSS, and JavaScript that lets users add, view, and delete their professional achievements.

Features of the tool:

  • Add new achievements with a description, date, and category (optional)

  • View all achievements in a list

  • Delete achievements if needed

  • Data saved in browser local storage for persistence (no backend required)

Example Code for a Simple Achievement Logger (Web-based)

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Professional Achievement Logger</title>
<style>
  body {
    font-family: Arial, sans-serif;
    max-width: 600px;
    margin: 2rem auto;
    padding: 1rem;
    background: #f9f9f9;
  }
  h2 {
    text-align: center;
    margin-bottom: 1rem;
  }
  form {
    background: #fff;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 5px;
    box-shadow: 0 0 6px #ccc;
  }
  label {
    display: block;
    margin-top: 0.5rem;
    font-weight: bold;
  }
  input[type="text"],
  input[type="date"],
  select,
  textarea {
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.3rem;
    box-sizing: border-box;
    border-radius: 3px;
    border: 1px solid #ccc;
  }
  button {
    margin-top: 1rem;
    padding: 0.6rem 1.2rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }
  button:hover {
    background-color: #0056b3;
  }
  ul.achievements-list {
    list-style: none;
    padding: 0;
  }
  ul.achievements-list li {
    background: white;
    margin-bottom: 0.8rem;
    padding: 0.8rem;
    border-radius: 5px;
    box-shadow: 0 0 4px #ccc;
    position: relative;
  }
  .delete-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    background: #e74c3c;
    border: none;
    color: white;
    padding: 0.3rem 0.6rem;
    border-radius: 3px;
    cursor: pointer;
  }
  .delete-btn:hover {
    background: #c0392b;
  }
  .achievement-date {
    font-size: 0.9rem;
    color: #555;
  }
  .achievement-category {
    font-size: 0.9rem;
    font-style: italic;
    color: #777;
  }
</style>
</head>
<body>

<h2>Professional Achievement Logger</h2>

<form id="achievementForm">
  <label for="description">Achievement Description *</label>
  <textarea id="description" rows="3" required></textarea>

  <label for="date">Date of Achievement *</label>
  <input type="date" id="date" required />

  <label for="category">Category (optional)</label>
  <select id="category">
    <option value="">Select category</option>
    <option value="Certification">Certification</option>
    <option value="Promotion">Promotion</option>
    <option value="Project">Project</option>
    <option value="Award">Award</option>
    <option value="Other">Other</option>
  </select>

  <button type="submit">Add Achievement</button>
</form>

<ul class="achievements-list" id="achievementsList"></ul>

<script>
  const form = document.getElementById('achievementForm');
  const descriptionInput = document.getElementById('description');
  const dateInput = document.getElementById('date');
  const categorySelect = document.getElementById('category');
  const achievementsList = document.getElementById('achievementsList');

  // Load achievements from localStorage
  let achievements = JSON.parse(localStorage.getItem('achievements')) || [];

  function saveAchievements() {
    localStorage.setItem('achievements', JSON.stringify(achievements));
  }

  function renderAchievements() {
    achievementsList.innerHTML = '';
    if (achievements.length === 0) {
      achievementsList.innerHTML = '<li>No achievements logged yet.</li>';
      return;
    }

    achievements.forEach((ach, index) => {
      const li = document.createElement('li');
      li.innerHTML = `
        <div><strong>${ach.description}</strong></div>
        <div class="achievement-date">Date: ${ach.date}</div>
        ${ach.category ? `<div class="achievement-category">Category: ${ach.category}</div>` : ''}
        <button class="delete-btn" data-index="${index}">Delete</button>
      `;
      achievementsList.appendChild(li);
    });

    // Add event listeners to delete buttons
    const deleteButtons = document.querySelectorAll('.delete-btn');
    deleteButtons.forEach(btn => {
      btn.addEventListener('click', (e) => {
        const idx = e.target.getAttribute('data-index');
        achievements.splice(idx, 1);
        saveAchievements();
        renderAchievements();
      });
    });
  }

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const description = descriptionInput.value.trim();
    const date = dateInput.value;
    const category = categorySelect.value;

    if (!description || !date) {
      alert('Please fill in required fields.');
      return;
    }

    achievements.push({ description, date, category });
    saveAchievements();
    renderAchievements();

    // Reset form
    form.reset();
  });

  // Initial render
  renderAchievements();
</script>

</body>
</html>

How it works:

  • The user enters an achievement description, date, and optionally a category.

  • On submitting the form, the achievement is saved in localStorage.

  • Achievements are displayed in a list below the form.

  • Each achievement has a delete button to remove it.

  • Data persists across browser sessions using local storage.

If you want a more advanced tool with backend integration, user accounts, and export options, I can help design that too. Let me know!

Share This Page:

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Out Our Newest Posts we wrote about

Categories We Write About