https://github.com/mehmet-github06/square-color-change-app

application of changing color in frames
https://github.com/mehmet-github06/square-color-change-app

dom-manipulation for html-css-javascript

Last synced: about 1 year ago
JSON representation

application of changing color in frames

• Host: GitHub
• URL: https://github.com/mehmet-github06/square-color-change-app
• Owner: Mehmet-github06
• Created: 2023-11-27T20:15:02.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-11-28T09:36:59.000Z (over 2 years ago)
• Last Synced: 2025-01-16T05:25:43.301Z (about 1 year ago)
• Topics: dom-manipulation, for, html-css-javascript
• Language: JavaScript
• Homepage: https://square-color-change-app.vercel.app
• Size: 714 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Square Color Change App






  

    

   




This simple web application features an impressive effect where a square changes color with a random shadow and background color when hovered over.

## How It Works

1. There is a `
` named `container` in the HTML file (`index.html`). The JavaScript code dynamically adds squares inside this container.


2. The CSS file (`style.css`) determines the overall layout of the page and styles for the squares.

3. The JavaScript file (`app.js`) creates the squares and performs the color change when hovered over.

## Responsive Design and Photo Section

The application is developed with responsive design in mind. Additionally, it includes the following features:

- Responsive design adapting to screen sizes.

- Proper functionality on both mobile devices and desktop browsers.

## Screen to gif

![App Screenshot](./Animation.gif)

## Live Demo

To see the application in action, click [here](https://square-color-change-app.vercel.app/)

## Requirements

 Compatible with modern web browsers.

## Installation

1. Clone this repository: `git clone repo-link`

2. Navigate to the project directory: `cd project-directory`

3. Open the `index.html` file in a web browser.

## Contributions

We welcome any contributions. Feel free to report issues or submit pull requests.

---

© 2023, Square Color Change App.