{"id":21906191,"url":"https://github.com/jkellerman/juno-build-test","last_synced_at":"2026-04-17T07:32:37.887Z","repository":{"id":206202731,"uuid":"715985187","full_name":"jkellerman/juno-build-test","owner":"jkellerman","description":"Tech assignment for Juno","archived":false,"fork":false,"pushed_at":"2023-11-08T16:38:00.000Z","size":18,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-27T05:59:24.635Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://josh-juno-test.netlify.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/jkellerman.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}},"created_at":"2023-11-08T08:35:56.000Z","updated_at":"2024-01-22T16:48:13.000Z","dependencies_parsed_at":"2023-11-08T13:25:30.699Z","dependency_job_id":"bdbf7fdf-e64c-45a1-9561-c301f11f4e68","html_url":"https://github.com/jkellerman/juno-build-test","commit_stats":null,"previous_names":["jkellerman/juno-build-test"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jkellerman/juno-build-test","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jkellerman%2Fjuno-build-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jkellerman%2Fjuno-build-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jkellerman%2Fjuno-build-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jkellerman%2Fjuno-build-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jkellerman","download_url":"https://codeload.github.com/jkellerman/juno-build-test/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jkellerman%2Fjuno-build-test/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31920002,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"online","status_checked_at":"2026-04-17T02:00:06.879Z","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":[],"created_at":"2024-11-28T16:42:26.796Z","updated_at":"2026-04-17T07:32:37.844Z","avatar_url":"https://github.com/jkellerman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Juno Technical Assessment Solution\n\n## Development\n\nTo run this project on your local machine, follow these steps:\n\n1. Clone this repository.\n2. Open your terminal and navigate to the project directory.\n3. Run the following commands:\n\n```sh\nnpm run install\nnpm run dev\n```\n\nThis will start the application in development mode.\n\n## Table of contents\n\n- [Overview](#overview)\n  - [Built with](#built-with)\n- [My process](#my-process)\n  - [Accessibility](#accessibility)\n  - [Possible Improvements](#possible-improvements)\n\n## Overview\n\nIn this project, users can:\n\n- Interact with an accordion that adheres to the provided design.\n- Open and close accordion panels by clicking on the header.\n- Navigate the accordion using the keyboard for accessibility.\n- View content populated from the JSON file provided.\n- Interact with the accordion on various screen sizes.\n\n### 🧰\u0026nbsp;Built with\n\n- [Vite](https://vitejs.dev/)\n- HTML\n- SCSS\n- Vanilla JavaScript\n\n## 💭\u0026nbsp;My process\n\nI used `Vite` to quickly set up the project, which saved time on configuration. Vite also includes built-in support for `Sass` and automatically compiles to CSS, for this reason, you will notice that the SCSS is imported in my main.js file.\n\nWhile working on this project, I revisited vanilla JavaScript since I hadn't used it in a while. I'm aware that it's possible to create an accordion with minimal JavaScript using the grid method but I thought this would be a good opportunity to brush up on my vanilla JS skills.\n\n### Accessibility\n\nOne of the key aspects that I wanted to focus on was creating an accordion that adheres to [W3.org](https://www.w3.org/) best practices. I therefore set attributes on the accordion trigger and panel to include appropriate ARIA tags.\n\n- I used the `aria-expanded` attribute to indicate whether the panel is open or closed.\n- I linked the trigger and panel using the `aria-controls` attribute, providing a reference to the panel's ID to help users understand the relationship.\n- I set the `aria-labelledby` attribute on the panel to associate it with the trigger's ID, aiding screen readers in understanding the heading-content relationship.\n- I assigned `role=\"region\"` to the panel to convey its purpose to screen readers, facilitating comprehension.\n- I ensured that the trigger element is a button so keyboard users can easily navigate through the accordion.\n\n### Possible Improvements\n\nAfter completing the project, I identified areas for potential improvement:\n\n1. Responsive Height: The current implementation dynamically adjusts the panel's height based on the screen size. However, it doesn't update the height if the window is resized. Implementing a listener to track window resize events and updating the panel's height accordingly would be beneficial.\n\n2. Default Open Panel: Setting the first panel to open by default could have provided users with a clearer indication that the panels are collapsible and expandable.\n\n3. External Data Fetching: While fetching data from a local JSON file works fine, for a more realistic scenario I could have improved the project by setting up an external data endpoint and fetching data from there. I haven't had experience setting up an external endpint before, however I have had a lot of experience fetching data, therefore this wasn't something I wanted to invest additional time on.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjkellerman%2Fjuno-build-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjkellerman%2Fjuno-build-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjkellerman%2Fjuno-build-test/lists"}