Click Me - Simple Website

A simple interactive website built with Node.js, HTML, CSS, and JavaScript. Features a click counter that persists in a SQLite database.

🚀 Quick Start

Prerequisites

• Node.js (version 14 or higher)
• npm (comes with Node.js)

Installation & Setup

1. Clone or download this repository

   git clone <repository-url>
   cd cursor-practice

2. Install dependencies

   npm install

3. Start the server

   npm start

4. Open your browser Visit: http://localhost:3000

🎯 Features

• Interactive Button: Click the button to increment a counter
• Persistent Storage: Click count is stored in SQLite database
• Cursor IDE Theme: Dark mode color scheme matching Cursor IDE
• Responsive Design: Works on desktop, tablet, and mobile
• Real-time Updates: Button text changes based on click count

📁 Project Structure

cursor-practice/
├── index.html          # Main HTML file
├── styles.css          # CSS styling with Cursor IDE theme
├── script.js           # JavaScript for interactivity
├── server.js           # Node.js server with SQLite database
├── package.json        # Dependencies and scripts
├── .gitignore          # Git ignore rules
└── clickcount.db       # SQLite database (created automatically)

🛠️ Development

Available Scripts

• npm start - Start the development server
• npm run dev - Alternative start command

Database

• File: clickcount.db (SQLite database)
• Table: clicks (stores click count history)
• Auto-created: Database and table are created automatically on first run

API Endpoints

• GET /api/click-count - Get current click count
• POST /api/click - Increment click count

🎨 Customization

Colors (Cursor IDE Dark Mode)

• Background: #1e1e1e
• Card Background: #2d2d30
• Text: #d4d4d4
• Button: #0e639c (Cursor blue)
• Button Hover: #1177bb

Modifying the Counter

The button text changes based on click count:

• 0 clicks: "Click Me"
• 1 click: "Clicked!"
• 2 clicks: "Clicked Again!"
• 3 clicks: "You're persistent! 🎉"
• 4+ clicks: "Clicked X times!"

🐛 Troubleshooting

Common Issues

Port already in use:

# Kill process on port 3000
lsof -ti:3000 | xargs kill -9

Database issues:

# Delete database to reset counter
rm clickcount.db
npm start

Dependencies issues:

# Clear npm cache and reinstall
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

📝 Notes

• The click count persists across page refreshes and server restarts
• Database file (clickcount.db) is excluded from Git
• All styling follows Cursor IDE's dark mode theme
• No frameworks used - pure HTML, CSS, and JavaScript

🔧 Tech Stack

• Backend: Node.js, Express.js
• Database: SQLite3
• Frontend: HTML5, CSS3, Vanilla JavaScript
• Styling: Custom CSS with Cursor IDE theme