🎨 Modern Text Resizer

A beautiful, modern text resizer application with dark mode support, smooth animations, and responsive design. Built with vanilla HTML, CSS, and JavaScript.

✨ Features

• 🎯 Dynamic Text Resizing - Increase or decrease text size with smooth animations
• 🌓 Dark Mode - Toggle between light and dark themes with a single click
• 📱 Fully Responsive - Works seamlessly on desktop, tablet, and mobile devices
• 🎭 Beautiful UI - Modern gradient design with smooth transitions
• 🔄 Reset Function - Quickly return to default text size
• 📊 Size Indicator - Real-time display of current font size
• 🎨 Font Awesome Icons - Professional icons for enhanced user experience
• ⚡ Smooth Animations - Elegant fade-in and hover effects
• 🎚️ Size Limits - Prevents text from becoming too small or too large
• ♿ Accessibility - Disabled button states when limits are reached

🚀 Demo

Simply open the index.html file in any modern web browser to see the application in action!

📋 Prerequisites

No prerequisites or dependencies required! This is a standalone application that runs entirely in the browser.

🛠️ Installation

1. Clone or download this repository
2. Open index.html in your web browser
3. That's it! Start resizing text immediately

# Clone the repository
git clone https://github.com/akashasahu07/Text-Resizer.git

# Navigate to the project directory
cd Text-Resizer

# Open in browser
# On macOS
open index.html

# On Linux
xdg-open index.html

# On Windows
start index.html

💻 Usage

Basic Controls

• Increase Button - Click to increase text size by 2px
• Decrease Button - Click to decrease text size by 2px
• Reset Button - Click to return to the default size (20px)
• Theme Toggle - Click the moon/sun icon to switch between light and dark modes

Size Limits

• Minimum Size: 12px
• Maximum Size: 60px
• Default Size: 20px
• Increment: 2px per click

🎨 Color Scheme

Light Mode

• Background: #f0f2f5
• Card Background: #ffffff
• Accent: #6366f1 (Indigo)
• Text: #1a1a1a

Dark Mode

• Background: #0f172a
• Card Background: #1e293b
• Accent: #818cf8 (Light Indigo)
• Text: #f1f5f9

📱 Responsive Breakpoints

• Desktop: > 640px - Full layout with side-by-side buttons
• Tablet: 400px - 640px - Stacked buttons, adjusted padding
• Mobile: < 400px - Compact layout, smaller fonts

🌐 Browser Support

• ✅ Chrome (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Edge (latest)
• ✅ Opera (latest)

📂 Project Structure

Text-Resizer/
│
├── index.html          # Main HTML file (all-in-one)
└── README.md          # Project documentation

🔧 Customization

Changing Default Font Size

Locate this line in the JavaScript section:

let fontSize = 20; // Change this value
const initialSize = 20; // Change this value too

Modifying Size Limits

const minSize = 12; // Minimum font size
const maxSize = 60; // Maximum font size

Adjusting Size Increment

fontSize += 2; // Change increment value for increase
fontSize -= 2; // Change decrement value for decrease

Customizing Colors

Edit the CSS variables in the :root and [data-theme="dark"] sections:

:root {
    --accent: #6366f1; /* Change accent color */
    --bg-primary: #f0f2f5; /* Change background */
    /* ... other variables */
}

🤝 Contributing

Contributions are welcome! Feel free to:

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - feel free to use it for personal or commercial projects.

👨‍💻 Author

Created with ❤️ by Akash

🙏 Acknowledgments

• Font Awesome for the beautiful icons
• Inspiration from modern web design trends
• The web development community

📧 Contact

For questions or suggestions, feel free to reach out:

• GitHub: @akashasahu07
• Email: akashasahu2001@gmail.com

🔮 Future Enhancements

• Add font family selector
• Include text alignment options
• Add color picker for text
• Save preferences to local storage
• Add keyboard shortcuts
• Include preset size options
• Add animation speed control
• Multi-language support

---

⭐ If you found this project helpful, please consider giving it a star!