{"id":20490649,"url":"https://github.com/mehmet-github06/square-color-change-app","last_synced_at":"2026-06-01T08:31:28.158Z","repository":{"id":209526713,"uuid":"724305342","full_name":"Mehmet-github06/square-color-change-app","owner":"Mehmet-github06","description":"application of changing color in frames","archived":false,"fork":false,"pushed_at":"2023-11-28T09:36:59.000Z","size":731,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-05T17:27:53.236Z","etag":null,"topics":["dom-manipulation","for","html-css-javascript"],"latest_commit_sha":null,"homepage":"https://square-color-change-app.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Mehmet-github06.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-11-27T20:15:02.000Z","updated_at":"2023-11-28T09:33:08.000Z","dependencies_parsed_at":"2023-11-28T10:45:17.460Z","dependency_job_id":null,"html_url":"https://github.com/Mehmet-github06/square-color-change-app","commit_stats":null,"previous_names":["mehmet-github06/youtube--al--ma-8","mehmet-github06/square-color-change-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Mehmet-github06/square-color-change-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mehmet-github06%2Fsquare-color-change-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mehmet-github06%2Fsquare-color-change-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mehmet-github06%2Fsquare-color-change-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mehmet-github06%2Fsquare-color-change-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mehmet-github06","download_url":"https://codeload.github.com/Mehmet-github06/square-color-change-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mehmet-github06%2Fsquare-color-change-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33767434,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-01T02:00:06.963Z","response_time":115,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom-manipulation","for","html-css-javascript"],"created_at":"2024-11-15T17:17:50.791Z","updated_at":"2026-06-01T08:31:28.138Z","avatar_url":"https://github.com/Mehmet-github06.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Square Color Change App\n\n\u003cbr /\u003e\n\u003cdiv align=\"center\" id=\"readme-top\"\u003e\n  \u003ca href=\"#\"\u003e\n    \u003cimg src=\"./images.jpeg\" alt=\"Logo\" width=\"80\" height=\"80\"\u003e\n  \u003c/a\u003e \u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\n\nThis simple web application features an impressive effect where a square changes color with a random shadow and background color when hovered over.\n\n## How It Works\n\n1. There is a `\u003cdiv\u003e` named `container` in the HTML file (`index.html`). The JavaScript code dynamically adds squares inside this container.\n\n2. The CSS file (`style.css`) determines the overall layout of the page and styles for the squares.\n\n3. The JavaScript file (`app.js`) creates the squares and performs the color change when hovered over.\n\n## Responsive Design and Photo Section\n\nThe application is developed with responsive design in mind. Additionally, it includes the following features:\n\n- Responsive design adapting to screen sizes.\n- Proper functionality on both mobile devices and desktop browsers.\n\n## Screen to gif\n\n![App Screenshot](./Animation.gif)\n\n## Live Demo\n\nTo see the application in action, click [here](https://square-color-change-app.vercel.app/)\n\n## Requirements\n\n Compatible with modern web browsers.\n\n## Installation\n\n1. Clone this repository: `git clone repo-link`\n2. Navigate to the project directory: `cd project-directory`\n3. Open the `index.html` file in a web browser.\n\n## Contributions\n\nWe welcome any contributions. Feel free to report issues or submit pull requests.\n\n---\n© 2023, Square Color Change App.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmehmet-github06%2Fsquare-color-change-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmehmet-github06%2Fsquare-color-change-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmehmet-github06%2Fsquare-color-change-app/lists"}