Clock

• 

  Home page

Inspiration

To deploy nextjs application in defang

What it does

simply displays live clock

How we built it

using js new Date()

Challenges we ran into

rendering and updating time every second

Accomplishments that we're proud of

learned inline styling in jsx

What we learned

<style jsx>{`
        .clock-container {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .clock {
          font-family: 'Arial', sans-serif;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 15px;
          backdrop-filter: blur(10px);
          padding: 30px;
          box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
          border: 1px solid rgba(255, 255, 255, 0.18);
          color: white;
          text-align: center;
        }
        .time {
          font-size: 5rem;
          font-weight: bold;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        .seconds {
          font-size: 2rem;
          margin-top: 10px;
          opacity: 0.7;
        }
      `}</style>

Built With

• css
• nextjs
• tailwindcss