{"id":28489080,"url":"https://github.com/julillermo/js-crash-course-projects","last_synced_at":"2026-04-14T06:04:26.042Z","repository":{"id":297805803,"uuid":"997912286","full_name":"julillermo/JS-Crash-Course-Projects","owner":"julillermo","description":"My attempt to go over the Pong and D3 Projects discussed in the JavaScript Crash Course book","archived":false,"fork":false,"pushed_at":"2025-06-07T15:23:04.000Z","size":106,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-07T16:18:44.819Z","etag":null,"topics":["beginner-project","canvas","d3","deno","esbuild","javascript","svg","typescript"],"latest_commit_sha":null,"homepage":"","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/julillermo.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,"zenodo":null}},"created_at":"2025-06-07T13:12:59.000Z","updated_at":"2025-06-07T15:23:08.000Z","dependencies_parsed_at":"2025-06-07T16:18:49.529Z","dependency_job_id":null,"html_url":"https://github.com/julillermo/JS-Crash-Course-Projects","commit_stats":null,"previous_names":["julillermo/js-crash-course-projects"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/julillermo/JS-Crash-Course-Projects","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/julillermo%2FJS-Crash-Course-Projects","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/julillermo%2FJS-Crash-Course-Projects/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/julillermo%2FJS-Crash-Course-Projects/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/julillermo%2FJS-Crash-Course-Projects/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/julillermo","download_url":"https://codeload.github.com/julillermo/JS-Crash-Course-Projects/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/julillermo%2FJS-Crash-Course-Projects/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260015940,"owners_count":22946319,"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","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":["beginner-project","canvas","d3","deno","esbuild","javascript","svg","typescript"],"created_at":"2025-06-08T06:30:40.558Z","updated_at":"2026-04-14T06:04:25.996Z","avatar_url":"https://github.com/julillermo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JS-Crash-Course-Projects\nMy attempt to go over the Pong and D3 Projects discussed in the JavaScript Crash Course book. Besides the use of **TypeScript**, **ESBuild**, and the **Deno runtime** for [the project visualizing the results from the github search API](./Project_3_Data_Visualization/15_Visualizing_Search_From_Github_API/), this repo has minimal deviations from the book's discussion.\n\nThis repository contains a series simple projects described in the book:\n1. [Pong (using HTML \\\u003ccanvas\\\u003e)](./Project_1_Game/10_Pong/)\n2. Introduction to D3:\n    1. [introductory concepts](./Project_3_Data_Visualization/14_Introducing_the_D3_Library/intro/)\n    2. [data \u0026 animation](./Project_3_Data_Visualization/14_Introducing_the_D3_Library/data/)\n    3. [Live text input bar graph visualization](./Project_3_Data_Visualization/14_Introducing_the_D3_Library/barGraph/)\n3. [Visualizing github search API](./Project_3_Data_Visualization/15_Visualizing_Search_From_Github_API/)\n\n\n\n# Project 1: [Pong](./Project_1_Game/10_Pong/)\n![Pong screenshot](./images/0_pong.png)\n## Details\n- This project involves create a base HTML file containing an empty `\u003ccanvas\u003e` element from which the JavaScript logic can insert game logic into.\n- I decided not complete with my follow through of this part of the book. I believe I was already able to obtain a general idea of the logic and workflow involved for using the HTML `\u003ccanvas\u003e` tag to create a web-based game in JavaScript.\n- The succeeding chapter of the book would have refactored this project using an **object-oriented** programming style instead of the **function-driven** example found here.\n\n## How to run\n- **Option 1** : \n  - As long as the `game.html` file correctly points to the `game.js` file, opening `game.html` via an internet browser should run the game.\n\n- **Option 2** : \n  - In VSCode you can use the an extension like [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer), and it will handle serving the HTML through a localhost (default is `localhost:5500/`) for you. Activiting this extension usually opens up a new tab in yur default browser, otherwise you can diretly key in `localhost:5500/` in any of your web browsers. \n  - This is what I used while following along with the book.\n\n\n\n# Project 2: Introduction to D3\n![Introductory concepts screenshot](./images/1_intro_concepts.png)\n## 2.1 [Introductory concepts](./Project_3_Data_Visualization/14_Introducing_the_D3_Library/intro/):\n### Details\n- Contains basic introduction to HTML `\u003csvg\u003e` concepts such as but not limited to a combination of the following:\n  - text\n  - fill for colors\n  - basic shapes\n  - grouping\n  - defining custom paths\n  - interativity with CSS\n### How to run\n- Following along with the above [\"How to run\" instructions of Project 1: Pong](#project-1-pong) also works here.\n\n## 2.2 [Data \u0026 animation](./Project_3_Data_Visualization/14_Introducing_the_D3_Library/data/):\n![Data \u0026 animation screenshot](./images/2_data.png)\n### Details\n- In this project, random values are dynamically added to a JavaScript list. This list is visualized as circles of various sizes, and modifications to the list have an accompanying transition animation.\n- Continuation of the basic id ideas above with the addition of the following:\n    - chain-linking functions in d3\n    - animation using `transition()`\n    - handling lists in d3\n### How to run\n- Following along with the above [\"How to run\" instructions of Project 1: Pong](#project-1-pong) also works here.\n\n## 2.3 [Live text input bar graph visualization](./Project_3_Data_Visualization/14_Introducing_the_D3_Library/barGraph/):\n![character frequency analyzer screenshot](./images/3_character_distribution.png)\n### Details\n- This project, works by listening for user input and dynamicaly rendering the bar graph to visualize the distribution of characters based on user input.\n- Continuation of the basic id ideas above with the addition of the following:\n    - Createing axes for plots in d3\n    - Scaling\n    - D3 `enter`, `update`, and `exit` \"events\"\n### How to run\n- Following along with the above [\"How to run\" instructions of Project 1: Pong](#project-1-pong) also works here.\n\n\n# Project 3: [Visualizing github search API](./Project_3_Data_Visualization/15_Visualizing_Search_From_Github_API/)\n![github search api visualization screenshot](./images/4_github_api.png)\n- This project is meant to be an interactive bar graph of popular Github projects using a sepcific query (\"TypeScript\" in this case). This project covers:\n  - Calling an API and using the response as input data for D3.\n  - Creating a more complete and interactive bar graph with annotations\n  - Color coding data using built-in d3 color schemes. \n- **Variations I added not found in the book**:\n  - Writing the project in TypeScript instead of the book's JavaScript sample code.\n  - Using the [Deno runtime environment](https://deno.land/) for the following purposes and use-cases:\n    - project setup and management\n    - built-in typescript support\n    - installation and handling of the d3 npm package and it's types.\n    - installation of the ESBuild package\n    - running a server to server the `index.html`\n  - Using [ESBuild](https://esbuild.github.io/) to transpile TypeScript to JavaScript and Bundling the D3 package into a single `.js` file referenced by the `index.html` file.\n- As with the [Pong project](#project-1-pong), I decided to not complete with my follow through of this part of the book.\n\n## How to run\n1. Install the [Deno runtime environment](https://deno.land/)\n2. Navigate to the `Project_3_Data_Visualization/15_Visualizing_Search_From_Github_API` folder in your shell and run `deno task dev`.\n    1. You may also optionally run `deno install` before this, but the `deno task dev` command should automatically generate the `node_modules` as defined by the project configuration in `deno.jsonc`\n3. Enter `localhost:1236` into a web browser.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjulillermo%2Fjs-crash-course-projects","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjulillermo%2Fjs-crash-course-projects","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjulillermo%2Fjs-crash-course-projects/lists"}