Skip to content

readme.md

Latest commit

 

History

History
187 lines (133 loc) · 4.95 KB

readme.md

File metadata and controls

187 lines (133 loc) · 4.95 KB

🎨 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.

License HTML5 CSS3 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:

🔮 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!