{"id":16701104,"url":"https://github.com/arnobl/xp-angular","last_synced_at":"2026-04-22T08:31:56.440Z","repository":{"id":145959145,"uuid":"319139159","full_name":"arnobl/xp-angular","owner":"arnobl","description":null,"archived":false,"fork":false,"pushed_at":"2020-12-07T08:11:00.000Z","size":140,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-01T02:38:37.900Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/arnobl.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":"2020-12-06T21:52:28.000Z","updated_at":"2020-12-07T08:11:04.000Z","dependencies_parsed_at":"2023-07-04T09:46:11.100Z","dependency_job_id":null,"html_url":"https://github.com/arnobl/xp-angular","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/arnobl/xp-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobl%2Fxp-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobl%2Fxp-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobl%2Fxp-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobl%2Fxp-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobl","download_url":"https://codeload.github.com/arnobl/xp-angular/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobl%2Fxp-angular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32127863,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-22T07:37:52.372Z","status":"ssl_error","status_checked_at":"2026-04-22T07:37:51.635Z","response_time":58,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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-10-12T18:28:44.549Z","updated_at":"2026-04-22T08:31:56.425Z","avatar_url":"https://github.com/arnobl.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Practical Session: an experiment with Angular and the native Web API\n\n- clone the project and run `npm install` in the project folder to install the dependencies\n\n\n- run the Angular app (run `Angular CLI Server`)\n\n\n- Open the official Angular documentation (https://angular.io/docs) and the Mozilla documentation (https://developer.mozilla.org/en-US/docs/Web/API)\n\n\n- Do the three exercises **using the Angular and the native Web API**.\u003cbr/\u003e\n  Do not forget to commit locally your changes after each question (do not forget to add new files to git, if you created new files).\n  Several questions may compose each exercise.\u003cbr/\u003e\n  The code to edit is located in `src/app/component/tp2`.\n  You can modify `ts`, `html`, or `css` files of this component.\n  Take a quick look at these files before starting the exercises.\n  You can also modify `src/app/service/data.service.ts`.\n  There is no need to write tests.\u003cbr/\u003e\n  As a reminder, in Angular you can create new class using this command:\n  `ng generate class classname`\n\n- you have a deadline/time limit for each exercise (written in each exercise).\u003cbr/\u003e\n  Do not forgot to commit files even if the time limit expired.\u003cbr/\u003e\n  You can switch to the next exercise before the time limit.\n\n- At the end of the session, delete the folder `node_modules`, put a zipped file of the project folder on moodle: https://moodleng.insa-rennes.fr/mod/assign/view.php?id=18007 \u003cbr/\u003e\n  Make sure the archive contains the hidden folder `.git`.\n\n- During the experiment you can ask the supervisor for clarifications but not for help ;)\n\n\n## #0\n\nPlease, put your name here:\n\n\nCommit the file locally. As a reminder, you can commit using IntelliJ or using the command line: `git commit -m \"readme\" .`\n\n\n## #1 -- Triple click to change a color\n\nA triple-click on the div element `triple` (located in the HTML file) must change the color contained in `dataService` to a random color value.\nThe background color of this `triple` div element uses `dataService.color` so that you should be able to see the change.\n\nThe class `DataService` already provides a method `setNewRandomColor` to set its `color` attribute with a new random value.\n\nYou have 35 minutes max for this exercise.\n\n**Question 1** Implement this feature without considering undo/redo.\nCommit locally your code to keep the changes in this history with the message `1 q1` (do not forget to add new files to git, if you created new files).\n\n- Using the Web/Angular API: a mouse event has an attribute `detail` that refers to the number of clicks.\n\n\n**Question 2** Adapt your code to be able to undo/redo color changes.\nCommit locally your code to keep the changes in this history with the message `1 q2` (do not forget to add new files to git, if you created new files).\n\n\n**Feedback**\nFrom 1 to 10 (10 being the most difficult), give the difficulty of each question:\n- Q1:\n- Q2:\n\nCommit locally this file.\n\n\n\n\n## #2 -- Write text\n\nEditing the text of the `textarea` HTML element must change `dataService.text`.\n\nA precision: do this action when the textarea is idle for 1 second.\nFor example: the user writes a sequence of letters and then stops for more than 1 second, so that `dataService.text` is updated.\n\nThis is a mainstream optimisation that many text processing tools implement to limit the number of editing actions.\n\nYou have 20 minutes max for this exercise.\n\n**Question 1** Implement this feature without considering undo/redo.\nCommit locally your code to keep the changes in this history with the message `2 q1` (do not forget to add new files to git, if you created new files).\n\n**Feedback**\nFrom 1 to 10 (10 being the most difficult), give the difficulty of the question:\n\nCommit locally this file.\n\n\n\n\n## #3 -- Drag-and-drop a shape\n\nThe last exercise consists in moving a rectangle using a drag-and-drop interaction:\nPress on the rectangle, drag it to a location, and release it to end its translation.\n\nThe rectangle to move is the rectangle `rec` defined in the HTML file.\n\nYou have 40 minutes max for this exercise.\n\n**Question 1** Implement this feature without considering undo/redo.\nCommit locally your code to keep the changes in this history with the message `3 q1` (do not forget to add new files to git, if you created new files).\n\nUsing the Web/Angular API you can use the classical `mousedown`, `mouseup`, `mousemove` event listeners or https://v7.material.angular.io/cdk/drag-drop/overview#getting-started.\nNote that the attribute `dataService.position` defines the x/y coordinates of the rectangle.\n\n\n**Question 2** Adapt your code to be able to undo/redo the moves.\nCommit locally your code to keep the changes in this history with the message `3 q2` (do not forget to add new files to git, if you created new files).\n\n**Feedback**\nFrom 1 to 10 (10 being the most difficult), give the difficulty of each question:\n- Q1:\n- Q2:\n\n\n## Feedback\n\nYou can write here your feelings, some feedback about the exercises and the framework you used:\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobl%2Fxp-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobl%2Fxp-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobl%2Fxp-angular/lists"}