{"id":18626338,"url":"https://github.com/maciekt07/random-color","last_synced_at":"2025-07-28T20:08:52.353Z","repository":{"id":41240044,"uuid":"392440772","full_name":"maciekt07/random-color","owner":"maciekt07","description":"Progressive Web App made using Typescript and Native Web APIs. All data is stored in LocalStorage","archived":false,"fork":false,"pushed_at":"2022-11-05T14:57:25.000Z","size":3643,"stargazers_count":15,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-28T20:03:30.283Z","etag":null,"topics":["color","colorpicker","colors","css","dark-theme","html","html-css-javascript","javascript","localstorage","notifications","progressive-web-app","pwa","random","random-color","random-color-generator","random-color-picker","random-colors","random-generation","random-generator"],"latest_commit_sha":null,"homepage":"https://random-color-tool.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maciekt07.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-03T20:02:18.000Z","updated_at":"2024-10-17T13:00:26.000Z","dependencies_parsed_at":"2023-01-22T02:32:41.410Z","dependency_job_id":null,"html_url":"https://github.com/maciekt07/random-color","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/maciekt07/random-color","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maciekt07%2Frandom-color","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maciekt07%2Frandom-color/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maciekt07%2Frandom-color/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maciekt07%2Frandom-color/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maciekt07","download_url":"https://codeload.github.com/maciekt07/random-color/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maciekt07%2Frandom-color/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267577976,"owners_count":24110350,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"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":["color","colorpicker","colors","css","dark-theme","html","html-css-javascript","javascript","localstorage","notifications","progressive-web-app","pwa","random","random-color","random-color-generator","random-color-picker","random-colors","random-generation","random-generator"],"created_at":"2024-11-07T04:37:45.531Z","updated_at":"2025-07-28T20:08:52.326Z","avatar_url":"https://github.com/maciekt07.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/maciekt07","https://img.buymeacoffee.com/button-api/?text=Buy"],"categories":[],"sub_categories":[],"readme":"\u003cbr\u003e\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg alt=\"icon\" width=\"128px\" src=\"https://raw.githubusercontent.com/maciekt07/random-color/main/img/iconLight.png\"\u003e\u003c/img\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003eRandom Color Tool\u003c/h1\u003e\n\u003ch1 align=\"center\"\u003e\u003ca href=\"https://random-color-tool.netlify.app\"\u003e🔗 https://random-color-tool.netlify.app\u003c/a\u003e\u003c/h1\u003e\n\u003ch3 align=\"center\"\u003eRandom color picker made using Typescript, SCSS and Native Web APIs. All data is stored in LocalStorage\u003c/h3\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://app.netlify.com/sites/random-color-tool/deploys\"\u003e\u003cimg src=\"https://api.netlify.com/api/v1/badges/6173ec8f-e9f6-471a-86e6-71210349ffe3/deploy-status\"\u003e\u003c/a\u003e\u003cimg src=\"https://img.shields.io/github/languages/code-size/maciekt07/random-color?color=blue\u0026style=flat-square)\"\u003e\u003cimg src=\"https://img.shields.io/github/languages/top/maciekt07/random-color?color=blue\u0026style=flat-square)\"\u003e\u003cimg src=\"https://img.shields.io/github/last-commit/maciekt07/random-color?color=blue\u0026style=flat-square)\"\u003e\u003cimg src=\"https://img.shields.io/github/license/maciekt07/random-color?color=blue\u0026style=flat-square)\"\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg alt=\"preview\" src=\"https://raw.githubusercontent.com/maciekkoks/random-colors/main/img/preview.png\"\u003e\u003c/img\u003e\n\u003c/p\n\u003cbr\u003e\u003cbr\u003e\n\n# 💡 Features\n\n# 💜 Liked Colors List\n\n## Your liked colors list stored in LocalStorage\n\n![favlist](https://raw.githubusercontent.com/maciekt07/random-color/main/img/favslist.png)\n\n# ⌘ Shortcuts\n\n![shortcuts](https://raw.githubusercontent.com/maciekkoks/random-colors/main/img/shortcuts.png)\n\n```js\nconst shortcut = (key, id) =\u003e {\n  return document.addEventListener(\"keyup\", (event) =\u003e {\n    if (event.keyCode == key) {\n      document.getElementById(id).click();\n    }\n  });\n};\nconst r = 82;\nshortcut(r, \"refresh\");\n```\n\n# 🔔 Notifications\n\n## Daily notifications about today lucky color (with onclick)\n\nApi: [https://aztro.readthedocs.io/en/latest/](https://aztro.readthedocs.io/en/latest/)\n\nDesktop:\n\n\u003cimg src=\"https://raw.githubusercontent.com/maciekt07/random-color/main/img/notiWindows.png\"\u003e\n\n```js\n// Desktop\nconst showNotification = () =\u003e {\n  const notification = new Notification(nHeader, {\n    body: nBody,\n    icon: luckyImage,\n    badge: luckyImage,\n    lang: \"en-US\",\n    silent: true,\n  });\n  notification.onclick = (e) =\u003e {\n    window.focus();\n    location = luckyLink;\n  };\n};\nconsole.log(Notification.permission);\nif (Notification.permission === \"granted\") {\n  console.log(\"We have permission to send you push notifications!\");\n  setTimeout(() =\u003e {\n    showNotification();\n  }, 2000);\n} else if (Notification.permission !== \"denied\") {\n  Notification.requestPermission().then((permission) =\u003e {\n    // console.log(permission)\n    if (permission === \"granted\") {\n      showNotification();\n    }\n  });\n}\n```\n\nMobile:\n\n\u003cimg src=\"https://raw.githubusercontent.com/maciekt07/random-color/main/img/notiAndroid.png\"\u003e\n\n```js\n// Mobile\nPush.create(nHeader, {\n  body: nBody,\n  icon: luckyImage,\n  tag: \"lucky-color\",\n  // timeout: 4000,\n  link: luckyLink,\n  vibrate: [200, 200, 200, 200, 200],\n  requireInteraction: false,\n  onClick: () =\u003e {\n    window.focus();\n    window.open(luckyLink);\n    this.close();\n  },\n});\n```\n\n## Custom Notification\n\nif the user blocks the notifications, a custom notification will be displayed\n\n![customNotification](https://raw.githubusercontent.com/maciekt07/random-color/main/img/customNotification.png)\n\n# 📱 Progressive Web App (PWA)\n\n## You can install this web app on your device like a normall app\n\n![install](https://raw.githubusercontent.com/maciekt07/random-color/main/img/installation.png)\n\n![tasks](https://raw.githubusercontent.com/maciekt07/random-color/main/img/tasks.png)\n\n\u003cimg width=\"300px\" alt=\"android\" src=\"https://raw.githubusercontent.com/maciekt07/random-color/main/img/androidapp.jpg\"\u003e\n\n# 🔗 Share Button And Changing Color From URL\n\n![url](https://raw.githubusercontent.com/maciekt07/random-color/main/img/link.png)\n\n```js\nwindow.addEventListener(\"hashchange\", () =\u003e {\n  urlLoad();\n  clr_name();\n});\n```\n\n![share](https://raw.githubusercontent.com/maciekt07/random-color/main/img/shareAndroid.png)\n\n```js\nlet shareData = {\n  title: \"Random Color Tool By maciekt07\",\n  text: `Check out this cool color: ${colorInput.value}`,\n  url: location,\n};\ntry {\n  await navigator.share(shareData);\n  console.log(\"Shared color successfully\");\n} catch (err) {\n  console.log(`Share Error: ${err}`);\n  if (err != \"AbortError: Share canceled\") {\n    // Copy link and show alert if browser does not support sharing\n    copyToClipboard(location);\n    document.getElementById(\"alertspan\").innerHTML = \"\u003ci class='twa twa-lg twa-clipboard'\u003e\u003c/i\u003e Copied URL to clipboard!\";\n    showalert(800, 1300);\n  }\n}\n```\n\n# And many more... 👀\n\n# ⚡ Performance\n\n\u003cimg width=\"650px\" alt=\"performance\" src=\"https://raw.githubusercontent.com/maciekt07/random-color/main/img/Performance.png\"\u003e\n\n# 👨‍💻 To run this project locally\n\nDownload this repository\n\n```bash\ngit clone https://github.com/maciekt07/random-color.git\n```\n\n```bash\ncd random-color\n```\n\nInstall node modules\n\n```bash\nnpm install\n```\n\nRun local server using live server\n\n# 💌 Made With ❤ By [maciekt07](https://github.com/maciekt07)\n\n## 💸 Donate\n\n\u003ca href=\"https://www.buymeacoffee.com/maciekt07\" target=\"_blank\"\u003e\n \u003cimg src=\"https://img.buymeacoffee.com/button-api/?text=Buy me a coffee\u0026emoji=\u0026slug=maciekt07\u0026button_colour=1a1b27\u0026font_colour=ffffff\u0026font_family=Lato\u0026outline_colour=ffffff\u0026coffee_colour=FFDD00\"\u003e\u003c/a\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaciekt07%2Frandom-color","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaciekt07%2Frandom-color","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaciekt07%2Frandom-color/lists"}