{"id":20054736,"url":"https://github.com/rajjitlai/fun-with-js-css","last_synced_at":"2026-06-13T09:31:52.913Z","repository":{"id":155746675,"uuid":"599077475","full_name":"rajjitlai/fun-with-js-css","owner":"rajjitlai","description":"Create and Play with your own CSS styling","archived":false,"fork":false,"pushed_at":"2023-02-08T12:19:14.000Z","size":2,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T09:25:40.904Z","etag":null,"topics":["css","design","js","play","style-elements","title"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/rajjitlai.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-08T12:06:55.000Z","updated_at":"2023-02-08T12:20:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"ca51bfc9-f2af-425a-a743-793fdb6d378a","html_url":"https://github.com/rajjitlai/fun-with-js-css","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rajjitlai/fun-with-js-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajjitlai%2Ffun-with-js-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajjitlai%2Ffun-with-js-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajjitlai%2Ffun-with-js-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajjitlai%2Ffun-with-js-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rajjitlai","download_url":"https://codeload.github.com/rajjitlai/fun-with-js-css/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajjitlai%2Ffun-with-js-css/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34279898,"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-13T02:00:06.617Z","response_time":62,"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":["css","design","js","play","style-elements","title"],"created_at":"2024-11-13T12:42:55.460Z","updated_at":"2026-06-13T09:31:52.908Z","avatar_url":"https://github.com/rajjitlai.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fun with JS and CSS 🎨\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nAn interactive, real-time CSS playground designed to help developers and designers experiment with styling in a live environment.\n\n## 🚀 Overview\n\n**Fun with JS and CSS** is a lightweight web application that allows users to manipulate CSS styles and see the results instantly. It features an editable style block and content components, making it an ideal environment for testing CSS concepts, layouts, and animations without project overhead.\n\n---\n\n## ✨ Features\n\n- **Live CSS Editing**: Edit styles directly in the browser via a `contenteditable` `\u003cstyle\u003e` tag.\n- **Interactive Elements**: Play with layout and positioning on live-editable components.\n- **Dynamic UX**: Includes a unique JavaScript feature that changes the page title when the window focus changes, keeping user engagement high.\n- **Lightweight \u0026 Fast**: Built with vanilla HTML, CSS, and JavaScript.\n\n---\n\n## 🛠️ Getting Started\n\n### Prerequisites\n\nAll you need is a modern web browser (Chrome, Firefox, Safari, or Edge).\n\n### Installation\n\n1.  Clone the repository:\n    ```bash\n    git clone https://github.com/rajjitlai/fun-with-js-css.git\n    ```\n2.  Open `index.html` in your browser.\n\n### How to Use\n\n- Locate the styling section in the middle of the page.\n- Modify the CSS rules within the editable fields.\n- Watch as the elements on the page update in real-time.\n\n---\n\n## 📅 Project History\n\n- **Original Creation**: 08/02/2023\n- **Latest Update**: 2026 (Professional documentation \u0026 licensing)\n\n---\n\n## 📝 License\n\nDistributed under the MIT License. See `LICENSE` for more information.\n\n---\n\n**Author**: [Rajjit Laishram](https://github.com/rajjitlai)\n\n*Created with ❤️ for the love of CSS.*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajjitlai%2Ffun-with-js-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frajjitlai%2Ffun-with-js-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajjitlai%2Ffun-with-js-css/lists"}