TypeScript Color Changer 🎨

A dynamic web application that changes the color of all elements with a single click, built with TypeScript, HTML, CSS, and Parcel bundler.

Features

• Random Color Generation: Click the button to generate random colors for all elements
• Fully Responsive: Adapts to all screen sizes
• Modern UI: Clean and visually appealing design
• TypeScript Powered: Type-safe JavaScript implementation
• Fast Development: Hot reloading with Parcel

Live Demo

Check out the live demo: GitHub Pages Link

Technologies Used

• HTML5: Semantic markup
• CSS3: Modern styling with Flexbox and Grid
• TypeScript: Type-safe JavaScript implementation
• Parcel: Zero-configuration build tool
• Git: Version control

How It Works

The application uses a random color generator function that creates RGB values:

function randomColorGen(): string {
  let r = Math.round(Math.random() * 255)
  let g = Math.round(Math.random() * 255)
  let b = Math.round(Math.random() * 255)
  return `rgb(${r}, ${g}, ${b})`
}

When the button is clicked, this function is called to change colors throughout the page.

Script Details

The main functionality is implemented in src/script.ts:

1. Selecting HTML Elements

const body = document.querySelector("body") as HTMLBodyElement;
const btn = document.querySelector("#btn") as HTMLButtonElement;
const title = document.querySelector(".title") as HTMLElement;
const allText = document.querySelectorAll("*") as NodeListOf<HTMLElement>;
const navLinks = document.querySelectorAll("nav a") as NodeListOf<HTMLElement>;
const featureCards = document.querySelectorAll(".feature-card") as NodeListOf<HTMLElement>;
const galleryItems = document.querySelectorAll(".gallery-item") as NodeListOf<HTMLElement>;
const form = document.querySelector(".contact-form") as HTMLFormElement;

2. Define random color Generator function

function randomColorGen() {
  const r = Math.round(Math.random() * 255);
  const g = Math.round(Math.random() * 255);
  const b = Math.round(Math.random() * 255);

  return `rgb(${r}, ${g}, ${b})`;
}

3. Change all elements color on Button Click

btn.addEventListener("click", () => {
  // Change background color of body and container
  // container.style.backgroundColor = randomColorGen();
  // body.style.background = `linear-gradient(135deg, ${randomColorGen()}, ${randomColorGen()}, ${randomColorGen()})`

  // Change text color of all elements
  allText.forEach((el) => {
    el.style.color = randomColorGen();
  });

  // Change button colors
  btn.style.backgroundColor = randomColorGen();
  btn.style.color = randomColorGen();

  // Change specific element colors
  title.style.color = randomColorGen();

  // Change nav link colors
  navLinks.forEach((link) => {
    link.style.backgroundColor = randomColorGen();
  });

  // Change feature card colors
  featureCards.forEach((card) => {
    card.style.backgroundColor = randomColorGen();
  });

  // Change gallery item colors
  galleryItems.forEach((item) => {
    item.style.backgroundColor = randomColorGen();
  });

  // Change form colors
  form.style.backgroundColor = randomColorGen();
});

Customization

You can easily customize this project by:

• Modifying the color scheme in the CSS
• Adding more elements to the HTML
• Extending the TypeScript functionality
• Changing the Parcel configuration (if needed)

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/SachinPro007/rainbow-typescript-app.git
cd typescript-color-changer

2. Install dependencies:

npm install

3. Start the development server:

npm start

4. Open your browser and navigate to http://localhost:1234