</span>
 lang="en">

   charset="UTF-8" />
  Random Meme Generator
  
    body { font-family: sans-serif; text-align: center; padding: 20px; }
    img { max-width: 100%; height: auto; margin-top: 20px; }
    button { padding: 10px 20px; font-size: 16px; margin-top: 10px; }
  


  Random Meme Generator
   id="meme" src="" alt="meme" />
  
   onclick="getMeme()">Get New Meme

  
    async function getMeme() {
      const res = await fetch("https://meme-api.com/gimme");
      const data = await res.json();
      document.getElementById("meme").src = data.url;
    }
    getMeme();
  





    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  ✅ What Just Happened?

We used fetch() to get a meme from meme-api.com

Got a JSON response with the meme URL

Updated the image source with data.url

Now a new meme loads every time you click the button


  
  
  🎯 Extra Challenges

Add a loading spinner

Show meme title below the image

Let users download the meme

Add a “copy meme link” button


  
  
  🎁 What You’ve Learned

HTML structure

Basic styling with CSS

Fetching data from an API

DOM manipulation with JavaScript


  
  
  🎨 2. Color Palette Generator
What it does: Click a button to generate 5 random color swatches.
  
  
  🧠 What You’ll Learn

Working with colors in JS

Generating random hex codes

Styling boxes dynamically


  
  
  🧱 Code

</span>
 lang="en">

   charset="UTF-8" />
  Color Palette Generator
  
    body { font-family: sans-serif; text-align: center; padding: 20px; }
    .palette { display: flex; justify-content: center; gap: 15px; margin-top: 20px; }
    .color-box { width: 100px; height: 100px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; }
    button { padding: 10px 20px; font-size: 16px; margin-top: 10px; }
  


  Color Palette Generator
   class="palette" id="palette">
   onclick="generateColors()">Generate Colors

  
    function getRandomColor() {
      return "#" + Math.floor(Math.random() * 16777215).toString(16);
    }

    function generateColors() {
      const palette = document.getElementById("palette");
      palette.innerHTML = "";
      for (let i = 0; i < 5; i++) {
        const color = getRandomColor();
        const box = document.createElement("div");
        box.className = "color-box";
        box.style.background = color;
        box.innerText = color;
        palette.appendChild(box);
      }
    }

    generateColors();
  





    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  🎯 Extra Challenges

Display color hex code inside the box

Add a “copy to clipboard” feature

Let users lock colors to keep them during refresh


  
  
  🎁 What You’ve Learned

Loops and random numbers in JavaScript

Inline styles and creating elements

Color theory and user experience


  
  
  ⏳ 3. Simple Pomodoro Timer
What it does: A 25-minute productivity timer with start, pause, and reset.
  
  
  🧠 What You’ll Learn

Countdown timers

Buttons and events

Text updates in real time


  
  
  🧱 Code

</span>
 lang="en">

   charset="UTF-8" />
  Pomodoro Timer
  
    body { font-family: sans-serif; text-align: center; padding: 20px; }
    #timer { font-size: 48px; margin: 20px 0; }
    button { padding: 10px 15px; margin: 5px; font-size: 16px; }
  


  Pomodoro Timer
   id="timer">25:00
   onclick="startTimer()">Start
   onclick="pauseTimer()">Pause
   onclick="resetTimer()">Reset

  
    let seconds = 1500;
    let timer;
    const display = document.getElementById("timer");

    function updateDisplay() {
      let min = Math.floor(seconds / 60);
      let sec = seconds % 60;
      display.textContent = `${min.toString().padStart(2, "0")}:${sec.toString().padStart(2, "0")}`;
    }

    function startTimer() {
      if (!timer) {
        timer = setInterval(() => {
          if (seconds > 0) {
            seconds--;
            updateDisplay();
          }
        }, 1000);
      }
    }

    function pauseTimer() {
      clearInterval(timer);
      timer = null;
    }

    function resetTimer() {
      seconds = 1500;
      updateDisplay();
      pauseTimer();
    }

    updateDisplay();
  





    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  🎯 Extra Challenges

Add break timers

Play a sound when time ends

Change the background color as time passes


  
  
  🎁 What You’ve Learned

Working with time and intervals

DOM updates every second

Clean UI for productivity tools


  
  
  🎉 4. Event Countdown
What it does: You enter a date, and it counts down the days left.
  
  
  🧠 What You’ll Learn

Handling user input

Calculating dates

Updating text based on logic


  
  
  🧱 Code

</span>
 lang="en">

   charset="UTF-8" />
  Event Countdown
  
    body { font-family: sans-serif; text-align: center; padding: 20px; }
    input, button { padding: 10px; font-size: 16px; margin: 10px 5px; }
    #countdown { font-size: 24px; margin-top: 20px; }
  


  Event Countdown
   type="date" id="eventDate" />
   onclick="startCountdown()">Start Countdown
   id="countdown">

  
    function startCountdown() {
      const inputDate = document.getElementById("eventDate").value;
      const targetDate = new Date(inputDate);
      const today = new Date();
      const diff = Math.floor((targetDate - today) / (1000 * 60 * 60 * 24));
      document.getElementById("countdown").textContent = 
        diff >= 0 ? `${diff} days left!` : "The date has passed!";
    }
  





    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  🎯 Extra Challenges

Update countdown every day

Add hours, minutes, seconds countdown

Save and show upcoming events


  
  
  🎁 What You’ve Learned

Working with Date objects

User interaction through input

Simple but powerful date logic


  
  
  🎤 5. Lyrics Finder
What it does: Enter a song + artist and get the lyrics using an API.
  
  
  🧠 What You’ll Learn

Form handling

Fetching and displaying text data

Error handling


  
  
  🧱 Code

</span>
 lang="en">

   charset="UTF-8" />
  Lyrics Finder
  
    body { font-family: sans-serif; text-align: center; padding: 20px; }
    input { padding: 10px; margin: 5px; width: 200px; }
    button { padding: 10px 15px; margin: 5px; font-size: 16px; }
    pre { white-space: pre-wrap; text-align: left; max-width: 600px; margin: 20px auto; background: #f5f5f5; padding: 15px; border-radius: 8px; }
  


  Lyrics Finder
   id="artist" placeholder="Artist" />
   id="song" placeholder="Song" />
  
   onclick="getLyrics()">Get Lyrics
   id="lyrics">Type artist and song name, then click the button.

  
    async function getLyrics() {
      const artist = document.getElementById("artist").value.trim();
      const song = document.getElementById("song").value.trim();
      if (!artist || !song) {
        alert("Please enter both artist and song name");
        return;
      }

      try {
        const res = await fetch(`https://api.lyrics.ovh/v1/${artist}/${song}`);
        const data = await res.json();
        document.getElementById("lyrics").textContent = data.lyrics || "Lyrics not found.";
      } catch (error) {
        document.getElementById("lyrics").textContent = "Error fetching lyrics.";
      }
    }
  





    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  🎯 Extra Challenges

Add “loading...” while fetching

Clear lyrics when inputs change

Let users copy lyrics


  
  
  🎁 What You’ve Learned

Forms and inputs

Using an API with parameters

Handling no-result cases


  
  
  📦 Bonus: Free Learning Resources
Want to go deeper? These resources helped me a lot:

freeCodeCamp


MDN Web Docs


Frontend Mentor


CSS Tricks


CodePen Projects


  
  
  🚀 What’s Next?
In the next post, we’ll look at:
How to host your projects online for free (using GitHub Pages)

Making your sites responsive (look good on phones!)

A gentle intro to design systems and components


  
  
  💬 Let’s Stay in Touch!
If you tried even one project — I’m proud of you. Really.Share your screenshots, show your friends, or tag me on socials. If you got stuck, that’s totally okay — just drop a comment and I’ll help out.Until next time — keep coding and keep it fun!Let me know if you'd like a downloadable PDF version, a series index, or a linked GitHub repo with all projects in one place.Let me know if you want this exported as a .md file or styled for your blog layout!