Project - 8

Project 8: Personal Dashboard

Build a personal dashboard with a live clock, time-based greeting, quick links, and changing motivational quotes.

Your challenge: Combine several JavaScript skills into one page by updating the time, choosing a greeting, and displaying random quotes.

✦ HTML + CSS + JS Editor

▶ Live Output

Update the clock

Create a Date object and use toLocaleTimeString() to display the current time.

Run updateTime() every second with setInterval().

Choose a greeting

Use getHours() with an if / else if / else statement to show a different greeting for morning, afternoon, and evening.

Choose a random quote

Use Math.floor(Math.random() * quotes.length) to choose a random item from the quotes array.

Run newQuote() when the New Quote button is clicked.

Try it: Add your own quick links and replace the example quotes with your own messages.

Good JavaScript habit: Keep each dashboard feature in its own function so the code stays organized as the project grows.

👀 Show Full Working Solution

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Personal Dashboard</title>

  <style>
    body {
      background: #000;
      color: #8A8A8A;
      font-family: 'Courier New', monospace;
      padding: 40px;
      margin: 0;
      text-align: center;
    }

    .dashboard {
      max-width: 650px;
      margin: 0 auto;
    }

    .card {
      background: #111;
      padding: 24px;
      margin: 20px 0;
      border-radius: 10px;
    }

    #time {
      color: #fff;
      font-size: 2rem;
    }

    a {
      color: #fff;
      display: inline-block;
      margin: 5px 10px;
    }

    button {
      padding: 10px 16px;
      cursor: pointer;
    }

    button:focus-visible,
    a:focus-visible {
      outline: 3px solid #fff;
      outline-offset: 3px;
    }
  </style>
</head>

<body>

  <div class="dashboard">

    <h2>Personal Dashboard</h2>

    <div class="card">
      <h3 id="time">00:00:00</h3>
      <p id="greeting"></p>
    </div>

    <div class="card">
      <h3>Quick Links</h3>

      <a href="https://example.com" target="_blank">Example</a>
      <a href="https://example.org" target="_blank">Resources</a>
      <a href="https://example.net" target="_blank">Projects</a>
    </div>

    <div class="card">
      <h3>Motivational Quote</h3>
      <p id="quote"></p>
      <button id="quoteBtn" type="button">New Quote</button>
    </div>

  </div>

  <script>
    const quotes = [
      "Small steps can create big progress.",
      "Keep learning one idea at a time.",
      "Practice turns knowledge into skill.",
      "Build, test, improve, repeat."
    ];

    const timeDisplay =
      document.getElementById("time");

    const greetingDisplay =
      document.getElementById("greeting");

    const quoteDisplay =
      document.getElementById("quote");

    const quoteBtn =
      document.getElementById("quoteBtn");

    function updateTime() {
      const now = new Date();

      timeDisplay.textContent =
        now.toLocaleTimeString();

      const hour = now.getHours();

      if (hour < 12) {
        greetingDisplay.textContent =
          "Good morning!";
      } else if (hour < 18) {
        greetingDisplay.textContent =
          "Good afternoon!";
      } else {
        greetingDisplay.textContent =
          "Good evening!";
      }
    }

    function newQuote() {
      const randomIndex =
        Math.floor(
          Math.random() * quotes.length
        );

      quoteDisplay.textContent =
        quotes[randomIndex];
    }

    setInterval(updateTime, 1000);

    quoteBtn.addEventListener(
      "click",
      newQuote
    );

    updateTime();
    newQuote();
  </script>

</body>
</html>