├── .gitignore ├── README.md ├── RS-School-TR └── README.md ├── UpSkillMe ├── README.md ├── first-steps │ ├── first-steps.md │ └── img.png └── images │ ├── img.png │ ├── img_1.png │ └── img_2.png ├── modules ├── accessibility │ └── README.md ├── angular │ ├── components │ │ └── README.md │ ├── directives-and-pipes │ │ └── README.md │ ├── forms │ │ └── README.md │ ├── http │ │ └── README.md │ ├── intro │ │ └── README.md │ ├── modules-and-services │ │ └── README.md │ ├── redux │ │ └── README.md │ ├── routing │ │ └── README.md │ ├── rxjs │ │ └── README.md │ └── unit-test │ │ └── README.md ├── async │ └── README.md ├── browser-api │ └── README.md ├── bundlers │ ├── README.md │ └── img │ │ └── image.png ├── ci-cd │ └── README.md ├── clean-code │ ├── README.md │ ├── clean-code.md │ ├── clean-code.png │ └── materials │ │ ├── commits.md │ │ ├── generic-principles.md │ │ ├── html-and-css-extended.md │ │ └── html-and-css.md ├── client-server │ └── README.md ├── code-review │ ├── README.md │ └── image.png ├── css-basics │ └── README.md ├── css-flex │ └── README.md ├── css-grid │ └── README.md ├── css-modules │ └── README.md ├── design-patterns │ └── README.md ├── design-principles │ └── README.md ├── devtools │ └── README.md ├── dom-api │ └── README.md ├── dom-events │ └── README.md ├── eventloop-animation │ └── README.md ├── figma │ └── README.md ├── forms-validation │ └── README.md ├── fp-basics │ └── README.md ├── git │ └── README.md ├── how-browsers-work │ └── README.md ├── html-basics │ └── README.md ├── http │ └── README.md ├── ide │ └── README.md ├── interview-core-js │ └── interview.md ├── js-arrays │ └── README.md ├── js-async │ └── README.md ├── js-basics-1 │ └── README.md ├── js-basics-2 │ └── README.md ├── js-basics-3 │ └── README.md ├── js-classes-prototypes │ └── README.md ├── js-error-handling │ └── README.md ├── js-fe-developer │ └── README.md ├── js-generators-iterators │ └── README.md ├── js-modules │ └── README.md ├── js-objects │ └── README.md ├── linters-formatters-husky │ └── README.md ├── markdown │ └── README.md ├── media-query │ └── README.MD ├── npm │ └── README.md ├── restful-api │ └── README.md ├── rs-school-intro │ └── README.md ├── sass │ └── README.md ├── sdlc │ └── README.md ├── single-page-application │ └── README.md ├── testing │ └── README.md ├── typescript-advanced │ └── README.md ├── typescript-basic │ └── README.md ├── typescript │ └── README.md ├── web-security │ └── README.md ├── web-sockets │ └── README.md ├── web-storage │ └── README.md └── webpack │ └── README.md └── tasks ├── CSS_Meme_Slider ├── CSS_meme_slider.md └── assets │ ├── controlsEffects.gif │ ├── fullScreen.gif │ ├── fullScreenGrid.png │ ├── mobileGrid.png │ └── mobileView.gif ├── CV(markdown) ├── CV(HTML+CSS+Markdown).md ├── CV(cross-check).md ├── CV(markdown).md ├── cv-github-hints.md ├── cv-hints.md ├── cv-stage0.md ├── cv-stage1.md ├── cv.md ├── git-markdown.md ├── git.md ├── html-css-git.md ├── images │ ├── 1.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 12.jpg │ ├── 13.jpg │ ├── 14.jpg │ ├── 15.jpg │ ├── 16.jpg │ ├── 17.jpg │ ├── 18.jpg │ ├── 19.jpg │ ├── 2.jpg │ ├── 20.jpg │ ├── 21.jpg │ ├── 22.jpg │ ├── 23.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ ├── 9.jpg │ ├── basic_html_2.gif │ ├── create-branch.png │ ├── create-gh-pages.png │ ├── cv-hints.jpg │ ├── cv.jpg │ ├── find_deploy_01.png │ ├── find_deploy_02.png │ ├── html_template_basic.JPG │ ├── netlify-drop.png │ └── repository-settings.png └── rs-school-logo.svg ├── angular └── project-management-system.md ├── async-race ├── README.md ├── functional-requirements.md └── non-functional-requirements.md ├── books-shop ├── books-shop.md ├── books.json └── images │ ├── img.png │ └── img_1.png ├── christmas-shop ├── christmas-shop-part1.md ├── christmas-shop-part2.md ├── christmas-shop-part3.md ├── christmas-shop.md ├── gifts.json └── img-compressed.zip ├── classes-inheritance └── classes-inheritance.md ├── clean-code └── clean-code-S1E1.md ├── code-principles ├── commits.md ├── generic-principles.md ├── html-and-css-extended.md └── html-and-css.md ├── code-review ├── MentorEvaluationCriteria.md └── README.md ├── codewars ├── codewars-OOP.md ├── codewars.arrays.objects.md └── codewars.strings.numbers.md ├── coffee-house ├── coffee-house-week1.md ├── coffee-house-week2.md ├── coffee-house-week3.md ├── coffee-house.md └── products.json ├── core-js-101 └── core-js-101.md ├── eCommerce-Application ├── Readme.md ├── Sprints │ ├── Sprint#1.md │ ├── Sprint#2.md │ ├── Sprint#3.md │ ├── Sprint#4.md │ ├── Sprint1 │ │ ├── RSS-ECOMM-1_01.md │ │ ├── RSS-ECOMM-1_02.md │ │ ├── RSS-ECOMM-1_03.md │ │ ├── RSS-ECOMM-1_04.md │ │ ├── RSS-ECOMM-1_05.md │ │ ├── RSS-ECOMM-1_06.md │ │ ├── RSS-ECOMM-1_07.md │ │ ├── RSS-ECOMM-1_08.md │ │ ├── RSS-ECOMM-1_09.md │ │ ├── RSS-ECOMM-1_10.md │ │ ├── RSS-ECOMM-1_11.md │ │ ├── RSS-ECOMM-1_12.md │ │ ├── RSS-ECOMM-1_13.md │ │ ├── RSS-ECOMM-1_14.md │ │ ├── RSS-ECOMM-1_15.md │ │ ├── RSS-ECOMM-1_16.md │ │ ├── RSS-ECOMM-1_17.md │ │ ├── RSS-ECOMM-1_18.md │ │ ├── RSS-ECOMM-1_19.md │ │ ├── RSS-ECOMM-1_20.md │ │ └── RSS-ECOMM-1_21.md │ ├── Sprint2 │ │ ├── RS-ECOMM_SPRINT_2.postman_collection.json │ │ ├── RSS-ECOMM-2_01.md │ │ ├── RSS-ECOMM-2_02.md │ │ ├── RSS-ECOMM-2_03.md │ │ ├── RSS-ECOMM-2_04.md │ │ ├── RSS-ECOMM-2_05.md │ │ ├── RSS-ECOMM-2_06.md │ │ ├── RSS-ECOMM-2_07.md │ │ ├── RSS-ECOMM-2_08.md │ │ ├── RSS-ECOMM-2_09.md │ │ ├── RSS-ECOMM-2_10.md │ │ ├── RSS-ECOMM-2_11.md │ │ ├── RSS-ECOMM-2_12.md │ │ ├── RSS-ECOMM-2_13.md │ │ ├── RSS-ECOMM-2_14.md │ │ ├── RSS-ECOMM-2_15.md │ │ ├── RSS-ECOMM-2_16.md │ │ ├── RSS-ECOMM-2_17.md │ │ ├── RSS-ECOMM-2_18.md │ │ ├── RSS-ECOMM-2_19.md │ │ ├── RSS-ECOMM-2_20.md │ │ ├── RSS-ECOMM-2_21.md │ │ ├── RSS-ECOMM-2_22.md │ │ └── RSS-ECOMM-2_23.md │ ├── Sprint3 │ │ ├── RSS-ECOMM-3_01.md │ │ ├── RSS-ECOMM-3_02.md │ │ ├── RSS-ECOMM-3_03.md │ │ ├── RSS-ECOMM-3_04.md │ │ ├── RSS-ECOMM-3_05.md │ │ ├── RSS-ECOMM-3_06.md │ │ ├── RSS-ECOMM-3_07.md │ │ ├── RSS-ECOMM-3_08.md │ │ ├── RSS-ECOMM-3_09.md │ │ ├── RSS-ECOMM-3_10.md │ │ ├── RSS-ECOMM-3_11.md │ │ ├── RSS-ECOMM-3_12.md │ │ ├── RSS-ECOMM-3_13.md │ │ ├── RSS-ECOMM-3_14.md │ │ ├── RSS-ECOMM-3_15.md │ │ ├── RSS-ECOMM-3_16.md │ │ ├── RSS-ECOMM-3_17.md │ │ ├── RSS-ECOMM-3_18.md │ │ ├── RSS-ECOMM-3_19.md │ │ ├── RSS-ECOMM-3_20.md │ │ ├── RSS-ECOMM-3_21.md │ │ └── RSS-ECOMM-3_22.md │ └── Sprint4 │ │ ├── RSS-ECOMM-4_01.md │ │ ├── RSS-ECOMM-4_02.md │ │ ├── RSS-ECOMM-4_03.md │ │ ├── RSS-ECOMM-4_07.md │ │ ├── RSS-ECOMM-4_08.md │ │ ├── RSS-ECOMM-4_10.md │ │ ├── RSS-ECOMM-4_11.md │ │ ├── RSS-ECOMM-4_12.md │ │ ├── RSS-ECOMM-4_13.md │ │ ├── RSS-ECOMM-4_14.md │ │ ├── RSS-ECOMM-4_15.md │ │ ├── RSS-ECOMM-4_16.md │ │ ├── RSS-ECOMM-4_17.md │ │ ├── RSS-ECOMM-4_18.md │ │ ├── RSS-ECOMM-4_19.md │ │ ├── RSS-ECOMM-4_20.md │ │ ├── RSS-ECOMM-4_21.md │ │ ├── RSS-ECOMM-4_22.md │ │ ├── RSS-ECOMM-4_23.md │ │ └── RSS-ECOMM-4_24.md ├── archive │ ├── Basket │ │ └── Readme.md │ ├── Catalog │ │ ├── RSS-ECOMM-4_04.md │ │ ├── RSS-ECOMM-4_05.md │ │ └── RSS-ECOMM-4_06.md │ ├── Home │ │ └── Readme.md │ ├── Payment │ │ └── Readme.md │ ├── Product │ │ ├── RSS-ECOMM-4_09.md │ │ └── Readme.md │ ├── Profile │ │ └── Readme.md │ ├── Routing │ │ └── Readme.md │ └── WishList │ │ └── Readme.md └── presentation.md ├── english-for-kids ├── data │ ├── audio │ │ ├── angry.mp3 │ │ ├── bird.mp3 │ │ ├── blouse.mp3 │ │ ├── boot.mp3 │ │ ├── cat.mp3 │ │ ├── chick.mp3 │ │ ├── chicken.mp3 │ │ ├── coat.mp3 │ │ ├── correct.mp3 │ │ ├── cry.mp3 │ │ ├── dance.mp3 │ │ ├── dive.mp3 │ │ ├── dog.mp3 │ │ ├── dolphin.mp3 │ │ ├── draw.mp3 │ │ ├── dress.mp3 │ │ ├── error.mp3 │ │ ├── failure.mp3 │ │ ├── fish.mp3 │ │ ├── fly.mp3 │ │ ├── frog.mp3 │ │ ├── giraffe.mp3 │ │ ├── happy.mp3 │ │ ├── horse.mp3 │ │ ├── hug.mp3 │ │ ├── jump.mp3 │ │ ├── laugh.mp3 │ │ ├── lion.mp3 │ │ ├── mouse.mp3 │ │ ├── open.mp3 │ │ ├── pants.mp3 │ │ ├── pig.mp3 │ │ ├── play.mp3 │ │ ├── point.mp3 │ │ ├── rabbit.mp3 │ │ ├── ride.mp3 │ │ ├── run.mp3 │ │ ├── sad.mp3 │ │ ├── scared.mp3 │ │ ├── sheep.mp3 │ │ ├── shirt.mp3 │ │ ├── shoe.mp3 │ │ ├── sing.mp3 │ │ ├── skip.mp3 │ │ ├── skirt.mp3 │ │ ├── smile.mp3 │ │ ├── success.mp3 │ │ ├── surprised.mp3 │ │ ├── swim.mp3 │ │ ├── tired.mp3 │ │ └── turtle.mp3 │ ├── cards.js │ └── img │ │ ├── angry.jpg │ │ ├── audio.svg │ │ ├── bird.jpg │ │ ├── blouse.jpg │ │ ├── boot.jpg │ │ ├── cat.jpg │ │ ├── chick.jpg │ │ ├── chicken.jpg │ │ ├── coat.jpg │ │ ├── cry.jpg │ │ ├── dance.jpg │ │ ├── dive.jpg │ │ ├── dog.jpg │ │ ├── dolphin.jpg │ │ ├── draw.jpg │ │ ├── dress.jpg │ │ ├── failure.jpg │ │ ├── fish.jpg │ │ ├── fish1.jpg │ │ ├── fly.jpg │ │ ├── frog.jpg │ │ ├── giraffe.jpg │ │ ├── happy.jpg │ │ ├── horse.jpg │ │ ├── hug.jpg │ │ ├── jump.jpg │ │ ├── laugh.jpg │ │ ├── lion.jpg │ │ ├── mouse.jpg │ │ ├── open.jpg │ │ ├── pants.jpg │ │ ├── pig.jpg │ │ ├── play.jpg │ │ ├── point.jpg │ │ ├── rabbit.jpg │ │ ├── repeat.svg │ │ ├── ride.jpg │ │ ├── rotate.svg │ │ ├── run.jpg │ │ ├── sad.jpg │ │ ├── scared.jpg │ │ ├── screenshot.png │ │ ├── sheep.jpg │ │ ├── shirt.jpg │ │ ├── shoe.jpg │ │ ├── sing.jpg │ │ ├── skip.jpg │ │ ├── skirt.jpg │ │ ├── smile.jpg │ │ ├── star-win.svg │ │ ├── star.svg │ │ ├── success.jpg │ │ ├── surprised.jpg │ │ ├── swim.jpg │ │ ├── tired.jpg │ │ └── turtle.jpg ├── english-for-kids.md └── images │ └── img.png ├── final-task └── README.md ├── fun-chat └── README.md ├── hangman ├── hangman.md └── hangman.png ├── news-api └── migration-newip-to-ts.md ├── online-zoo ├── online-zoo-folder-structure.jpg └── online-zoo.md ├── presentation ├── README.md └── presentation-topics.md ├── self-introduction └── self-introduction.md ├── shelter ├── README.md ├── pets.json ├── shelter-folder-structure.jpg ├── shelter-main-1280px.jpg ├── shelter-pets-1280px.jpg └── shelter-responsive.png ├── technical-screening └── README.md ├── test-description ├── how-to-pass-test.md └── images │ ├── auto-test-option.png │ ├── choose-test.png │ └── test-preconditions.png ├── typescript-beginners └── README.md ├── typescript-essentials ├── CrossCheckCriteria.md ├── README.md ├── image.png └── stories │ ├── RSS-TSE-01.md │ ├── RSS-TSE-02.md │ ├── RSS-TSE-03.md │ ├── RSS-TSE-04.md │ ├── RSS-TSE-05.md │ ├── RSS-TSE-06.md │ ├── RSS-TSE-07.md │ ├── RSS-TSE-08.md │ ├── RSS-TSE-09.md │ ├── RSS-TSE-10.md │ └── RSS-TSE-PENALTY-01.md ├── typescript └── typescript.md ├── unit-tests └── unit-tests.md └── virtual-keyboard ├── images ├── virtual-keyboard-1.png ├── virtual-keyboard-2.png └── virtual-keyboard.png └── virtual-keyboard-en.md /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .DS_Store -------------------------------------------------------------------------------- /UpSkillMe/first-steps/first-steps.md: -------------------------------------------------------------------------------- 1 | ## Welcome to Front-end course UpSkill Me 2 | 3 | ![Welcome](img.png) 4 | 5 | ### About course 6 | [The course](../README.md) is divided into **3 stages**. 7 | 8 | On **stage 1** you will learn *git, HTML, Css, Flex, Grid* and get basic knowledge on *JavaScript*. After stage 1 you will pass the interview, according to knowledge you got, with your future mentor. 9 | 10 | During **stage 2** you will improve knowledge on *JavaScript*, get familiar with *TypeScript,NPM, Webpack, Testing, Software Methodology*, implement interesting tasks. Your mentor will check tasks and provide valuable feedback. This stage will finish with an interview as well, according to information from stage 2. 11 | 12 | And finally, **stage 3** will let you know about **Angular** - one of the most in-demanded framework nowadays. 13 | 14 | Stage consists of weeks. Each week you will have a test or task or even several assignments. 15 | 16 | ### Registration 17 | During this course, you will use several online resources: Rolling Scopes application (RS app), freecodecamp, codewars. First of all you should pass the registration to RS app. 18 | 1. Follow the link https://app.rs.school/registry/student?course=upskill-me 19 | ![Registration](../images/img.png) 20 | 2. Make sure you choose the *'UpSkill Me (JavaScript, May 2022)'* course 21 | 3. Fill in all fields with information about yourself 22 | 4. Visit the https://app.rs.school/, fillin your profile. RS app will be the main resource to pass task/test and follow your progress 23 | ![RSApp](../images/img_1.png) 24 | ![Profile](../images/img_2.png) 25 | 26 | 27 | 28 | 29 | ### Useful links 30 | 1. [Schedule](../../UpSkillMe/README.md) 31 | 2. [RS application](https://app.rs.school/) 32 | 3. [Registration to RS app](https://app.rs.school/registry/student?course=upskill-me) 33 | 4. [Code of Conduct](https://docs.app.rs.school/#/code-of-conduct) 34 | 5. [Booking](https://booking.lab.epam.com/) 35 | -------------------------------------------------------------------------------- /UpSkillMe/first-steps/img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/UpSkillMe/first-steps/img.png -------------------------------------------------------------------------------- /UpSkillMe/images/img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/UpSkillMe/images/img.png -------------------------------------------------------------------------------- /UpSkillMe/images/img_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/UpSkillMe/images/img_1.png -------------------------------------------------------------------------------- /UpSkillMe/images/img_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/UpSkillMe/images/img_2.png -------------------------------------------------------------------------------- /modules/angular/components/README.md: -------------------------------------------------------------------------------- 1 | # Angular. Components. 2 | 3 | ## In this module, you'll learn the following topics: 4 | 5 | - Base application structure. 6 | - What are the `Components`, Templates? 7 | - Two-way data binding. 8 | - `Components` life cycle. 9 | - `Components` interaction. 10 | - Creation and usage of `Components` in application. 11 | 12 | ## Learning materials 13 | 14 | ### Lecture 15 | - [Rolling Scopes School Georgia. Angular. Part 1 (starting from 48:25)](https://youtu.be/8lt8Mvxyo5E?t=2905) 16 | - [TODO list management app](https://github.com/pavelrazuvalau/todo-list-management/tree/ce415c7a0746d8b4f70b8898a6e331d7856f50e9) 17 | - [Slides](https://slides.com/pavelrazuvalau/angular-intro-components#/3) 18 | 19 | ### Useful links 20 | - [Angular Components Overview](https://angular.io/guide/component-overview) 21 | - [Tour of Heroes. Create a feature component](https://angular.io/tutorial/toh-pt3) 22 | - [Introduction to components and templates](https://angular.io/guide/architecture-components) 23 | - [Lifecycle hooks](https://angular.io/guide/lifecycle-hooks) 24 | - [Component interaction](https://angular.io/guide/component-interaction) 25 | -------------------------------------------------------------------------------- /modules/angular/directives-and-pipes/README.md: -------------------------------------------------------------------------------- 1 | # Angular. Directives & Pipes. 2 | 3 | ## In this module, you'll learn the following topics: 4 | 5 | - Base knowledge of `Directives`. Understanding of structural and attribute `Directives`. Built-in `Directives`. 6 | - Create `Directives`. 7 | - Understanding of `Decorators` and interaction with a user by using `Directives`. 8 | - Basic knowledge of `Pipe`, parameters. `Pipe` chaining, Built-in `Pipe`. 9 | - Create `Pipe`. 10 | 11 | ## Learning materials 12 | 13 | ### Lecture 14 | - [Rolling Scopes School Georgia. Angular. Part 2](https://youtu.be/ezoPOrwQ-rw) 15 | - [Examples from the lecture](https://github.com/pavelrazuvalau/angular-lectures/tree/master/angular-directives-pipes/src) 16 | - [TODO list management app](https://github.com/pavelrazuvalau/todo-list-management/tree/e935bfeef0e794a54907ea2c1978e06e7f914cd7) 17 | - [Slides](https://slides.com/pavelrazuvalau/angular-directives-pipes) 18 | 19 | ### Useful links 20 | - [Directive](https://angular.io/api/core/Directive) 21 | - [Attribute directives](https://angular.io/guide/attribute-directives) 22 | - [Writing structural directives](https://angular.io/guide/structural-directives) 23 | - [Pipe](https://angular.io/api/core/Pipe) 24 | - [Transforming Data Using Pipes](https://angular.io/guide/pipes) 25 | - [@angular/common](https://angular.io/api/common) 26 | - [Cheat Sheet](https://angular.io/guide/cheatsheet) 27 | -------------------------------------------------------------------------------- /modules/angular/forms/README.md: -------------------------------------------------------------------------------- 1 | # Angular. Forms. 2 | 3 | ## In this module, you'll learn the following topics: 4 | 5 | - Basic knowledge of `Forms`. Understanding of Template and Reactive `Forms`. Built-in `Directives`. 6 | - Create `Forms`. 7 | - Understanding of validators and its application. 8 | - Creation of custom validators. 9 | - Form constructor - `FormGroup`, `FormControl`, `FormArray`. 10 | 11 | ## Learning materials 12 | 13 | ### Lecture 14 | - [Rolling Scopes School Georgia. Angular. Part 7](https://youtu.be/I_1fm5wx7_4) 15 | - [TODO list management app](https://github.com/pavelrazuvalau/todo-list-management/tree/8ffdd73876c299e02fe3a392ab2c0870da9b44ab) 16 | - [Slides](https://slides.com/pavelrazuvalau/angular-forms) 17 | 18 | ### Useful links 19 | - [Using forms for user input](https://angular.io/start/forms) 20 | - [Reactive forms](https://angular.io/guide/reactive-forms) 21 | - [Building a template-driven form](https://angular.io/guide/forms) 22 | - [Angular Forms Guide](https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/) 23 | -------------------------------------------------------------------------------- /modules/angular/http/README.md: -------------------------------------------------------------------------------- 1 | # Angular. Http. 2 | 3 | ## In this module, you'll learn the following topics: 4 | 5 | - `HttpClientModule` Module. 6 | - `HttpTypeEvent` Object. 7 | - Intercept of HTTP requests with `HTTP Interceptor`. 8 | 9 | ## Learning materials 10 | 11 | ### Lecture 12 | - [Rolling Scopes School Georgia. Angular. Part 3 (starting from 1:16:05)](https://youtu.be/fVhS7-LsvI4?t=4565) 13 | - [TODO list management app](https://github.com/pavelrazuvalau/todo-list-management/tree/c431689f6a2c0eedf93ff760b30ee237f2c2e012) 14 | - [Slides](https://slides.com/pavelrazuvalau/angular-modules-services-http#/5) 15 | 16 | ### Useful links 17 | - [Get data from a server](https://angular.io/tutorial/toh-pt6) 18 | - [Communicating with backend services using HTTP](https://angular.io/guide/http) 19 | - [@angular/common/http](https://angular.io/api/common/http) 20 | - [HttpClient](https://angular.io/api/common/http/HttpClient) 21 | - [HttpResponse](https://angular.io/api/common/http/HttpResponse) 22 | - [HttpHeaders](https://angular.io/api/common/http/HttpHeaders) 23 | - [HttpParams](https://angular.io/api/common/http/HttpParams) 24 | -------------------------------------------------------------------------------- /modules/angular/intro/README.md: -------------------------------------------------------------------------------- 1 | # Angular. Intro. 2 | 3 | ## In this module, you'll learn the following topics: 4 | 5 | - Basic knowledge of `Angular`. 6 | - What is `Angular-cli`? 7 | - Template syntax. 8 | - Event handling. 9 | 10 | ## Learning materials 11 | 12 | ### Lecture 13 | - [Rolling Scopes School Georgia. Angular. Part 1 (till 48:25)](https://youtu.be/8lt8Mvxyo5E) 14 | - [TODO list management app](https://github.com/pavelrazuvalau/todo-list-management/tree/ce415c7a0746d8b4f70b8898a6e331d7856f50e9) 15 | - [Slides (till Components)](https://slides.com/pavelrazuvalau/angular-intro-components) 16 | 17 | ### Useful links 18 | - [CLI Overview and Command Reference](https://cli.angular.io/) 19 | - [Understanding Angular](https://angular.io/guide/understanding-angular-overview) 20 | - [Getting started with Angular](https://angular.io/start) 21 | - [Tour of Heroes app and tutorial](https://angular.io/tutorial) 22 | - [Tour of Heroes. The hero editor](https://angular.io/tutorial/toh-pt1) 23 | - [Tour of Heroes. Display a selection list](https://angular.io/tutorial/toh-pt2) 24 | -------------------------------------------------------------------------------- /modules/angular/modules-and-services/README.md: -------------------------------------------------------------------------------- 1 | # Angular. Modules & Services 2 | 3 | ## In this module, you'll learn the following topics: 4 | 5 | - Modules, application and usage of modules. 6 | - `CoreModule` and `SharedModule`. 7 | - Understanding of `Services` and its application. 8 | - Understanding of `Dependency injection` and how to use it. 9 | 10 | ## Learning materials 11 | 12 | ### Lecture 13 | - [Rolling Scopes School Georgia. Angular. Part 3 (till 1:16:05)](https://youtu.be/fVhS7-LsvI4) 14 | - [TODO list management app](https://github.com/pavelrazuvalau/todo-list-management/tree/c431689f6a2c0eedf93ff760b30ee237f2c2e012) 15 | - [Slides (till HTTP)](https://slides.com/pavelrazuvalau/angular-modules-services-http) 16 | 17 | ### Useful links 18 | - [Add services](https://angular.io/tutorial/toh-pt4) 19 | - [Introduction to modules](https://angular.io/guide/architecture-modules) 20 | - [NgModules](https://angular.io/guide/ngmodules) 21 | - [NgModule FAQ](https://angular.io/guide/ngmodule-faq) 22 | - [Introduction to services and dependency injection](https://angular.io/guide/architecture-services) 23 | - [Dependency injection in Angular](https://angular.io/guide/dependency-injection) 24 | - [Dependency providers](https://angular.io/guide/dependency-injection-providers) 25 | - [Dependency injection in action](https://angular.io/guide/dependency-injection-in-action) 26 | - [Using forRoot() and forChild()](https://www.freelancermap.com/freelancer-tips/12255-forroot-forchild-angular) 27 | -------------------------------------------------------------------------------- /modules/angular/redux/README.md: -------------------------------------------------------------------------------- 1 | # Angular. Redux & NgRx. 2 | 3 | ## In this module, you'll learn the following topics: 4 | 5 | - `NgRx` library. 6 | - Store state management. `Store`, `Actions`, `Reducers`, `Selectors`. 7 | - Application of `Effects`. 8 | - Advantages of `NgRx`. 9 | 10 | ## Learning materials 11 | 12 | ### Lecture 13 | - [Rolling Scopes School Georgia. Angular. Part 6](https://youtu.be/cW33_Zadfew) 14 | - [TODO list management app](https://github.com/pavelrazuvalau/todo-list-management/tree/65fd4112292fa2c8a10597587bcd371b7e617fed) 15 | - [Slides](https://slides.com/pavelrazuvalau/angular-ngrx) 16 | 17 | ### Useful links 18 | - [General understanding of Flux](https://facebook.github.io/flux/) 19 | - [NxRx docs](https://ngrx.io/docs) 20 | -------------------------------------------------------------------------------- /modules/angular/routing/README.md: -------------------------------------------------------------------------------- 1 | # Angular. Routing 2 | 3 | ## In this module, you'll learn the following topics: 4 | 5 | - Basics of routing. 6 | - RouterOutlet directive. 7 | - Multiple routing. Routing with parameters. 8 | - `Router guards`. 9 | - Asynchronous loading. 10 | 11 | ## Learning materials 12 | 13 | ### Lecture 14 | - [Rolling Scopes School Georgia. Angular. Part 4](https://youtu.be/zmER4c9Nj_A) 15 | - [Examples from the lecture](https://github.com/pavelrazuvalau/angular-lectures/tree/master/angular-routing) 16 | - [TODO list management app](https://github.com/pavelrazuvalau/todo-list-management/tree/9c36d584cb393ec6bf860ec34dba1e3c4b9aa6fd) 17 | - [Slides](https://slides.com/pavelrazuvalau/angular-routing) 18 | 19 | ### Useful links 20 | - [Add navigation with routing](https://angular.io/tutorial/toh-pt5) 21 | - [Common Routing Tasks](https://angular.io/guide/router) 22 | - [@angular/router](https://angular.io/api/router) 23 | - [RouterLinkActive](https://angular.io/api/router/RouterLinkActive) 24 | - [ActivatedRoute](https://angular.io/api/router/ActivatedRoute) 25 | - [Resolve](https://angular.io/api/router/Resolve) 26 | -------------------------------------------------------------------------------- /modules/angular/rxjs/README.md: -------------------------------------------------------------------------------- 1 | # Angular. RxJS & Observables 2 | 3 | ## In this module, you'll learn the following topics: 4 | 5 | - Principles of reactive programming. 6 | - `Observable`. `Subject`. `RxJS` operators. 7 | 8 | ## Learning materials 9 | 10 | ### Lecture 11 | - [Rolling Scopes School Georgia. Angular. Part 5](https://youtu.be/fkmbA1LXAak) 12 | - [Examples from the lecture](https://github.com/pavelrazuvalau/angular-lectures/tree/master/rxjs-observables) 13 | - [Slides](https://slides.com/pavelrazuvalau/angular-rxjs) 14 | 15 | ### Useful links 16 | - [RxJS API List](https://rxjs-dev.firebaseapp.com/api) 17 | - [RxJS Marbles](http://rxmarbles.com/) 18 | - [Learn RxJS](https://www.learnrxjs.io/) 19 | - [RxJS Operators](https://rxjs.dev/guide/operators) 20 | - [Reactive Extensions For JavaScript](https://www.npmjs.com/package/rxjs) 21 | - [Comprehensive Guide to Higher-Order RxJs Mapping Operators: switchMap, mergeMap, concatMap (and exhaustMap)](https://blog.angular-university.io/rxjs-higher-order-mapping/) 22 | - [Hot vs Cold Observables](https://benlesh.medium.com/hot-vs-cold-observables-f8094ed53339) 23 | - [The magic of RXJS sharing operators and their differences](https://itnext.io/the-magic-of-rxjs-sharing-operators-and-their-differences-3a03d699d255) 24 | -------------------------------------------------------------------------------- /modules/angular/unit-test/README.md: -------------------------------------------------------------------------------- 1 | # Angular. Unit testing 2 | 3 | ## In this module, you'll learn the following topics: 4 | 5 | - Test structure. 6 | - Testing components with `TestBed`. 7 | - Testing components with `Test host`. 8 | - Testing nested components. 9 | 10 | ## Learning materials 11 | 12 | ### Lecture 13 | - [Lecture](https://youtu.be/DCw-JBll2u0?t=2201) 14 | - [Examples from video](https://github.com/pavelrazuvalau/angular-lectures/tree/master/angular-unit-testing) 15 | - [TODO List app](https://github.com/pavelrazuvalau/todo-list-management) 16 | - [Slides](https://slides.com/pavelrazuvalau/angular-unit-testing) 17 | 18 | ### Useful links 19 | - [Angular testing guide](https://angular.io/guide/testing) 20 | - [Why do we need unit tests](http://blog.stevensanderson.com/2009/08/24/writing-great-unit-tests-best-and-worst-practises/) 21 | - [Key qualities of a good unit test](https://www.kenneth-truyers.net/2012/12/15/key-qualities-of-a-good-unit-test/) 22 | - [Unit testing in JavaScript](https://www.youtube.com/watch?v=Eu35xM76kKY) 23 | - [More examples with unit testing](https://github.com/stas-dolgachov/angular-testing-lecture) 24 | - [Angular unit testing tutorial with examples](https://blog.logrocket.com/angular-unit-testing-tutorial-examples/#angularcomponent) 25 | -------------------------------------------------------------------------------- /modules/browser-api/README.md: -------------------------------------------------------------------------------- 1 | ### Module description 2 | 3 | This module covers several Browser APIs such as Console, Fetch, Storage, History. 4 | 5 | ### Education materials 6 | 7 | - [A Look at the JavaScript Console API](https://digitalocean.com/community/tutorials/js-console) 8 | - [javascript.info. Fetch](https://javascript.info/fetch) 9 | - [javascript.info. Storing data in the browser](https://javascript.info/data-storage) 10 | - [MDN. History](https://developer.mozilla.org/en-US/docs/Web/API/History) 11 | - [MDN. Introduction to web APIs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction) 12 | 13 | #### Preconditions for test: 14 | 15 | - Tests submitted in RS School App could be solved after authorization in the application. 16 | - The minimum passing score is **80%** of the maximum possible number of points. 17 | - You can take the test **3 times**, the last result is counted. 18 | - You can try the test even more times, but the score for the test will be reduced by half (from the original score). 19 | - The result of passing the test will be displayed immediately, it will be added to the score page next day after passing. 20 | -------------------------------------------------------------------------------- /modules/bundlers/img/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/modules/bundlers/img/image.png -------------------------------------------------------------------------------- /modules/clean-code/clean-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/modules/clean-code/clean-code.png -------------------------------------------------------------------------------- /modules/code-review/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/modules/code-review/image.png -------------------------------------------------------------------------------- /modules/design-principles/README.md: -------------------------------------------------------------------------------- 1 | ### Module description 2 | 3 | The principles such as **KISS** (Keep It Simple, Stupid), **YAGNI** (You Aren't Gonna Need It), **DRY** (Don't Repeat Yourself), 4 | and **SOLID** principles are some vital principles that not just front-end developers, but all software developers should be 5 | aware of. They have their own specific advantages: 6 | 7 | 1. **KISS (Keep It Simple, Stupid)**: This principle encourages developers to keep their code simple and readable for 8 | easier maintenance, better performance, and error reduction. Simple code also promotes better collaboration as it's 9 | easier for others to understand. 10 | 11 | 2. **YAGNI (You Aren't Gonna Need It)**: This principle advises against adding functionality until deemed necessary. 12 | It helps keep the project lean and focused, reduces complexity, and saves development time. 13 | 14 | 3. **DRY (Don't Repeat Yourself)**: This principle discourages code duplication. Applying DRY principle makes the code more 15 | reusable, easier to maintain, and minimizes errors. 16 | 17 | 4. **SOLID Principles**: This is a set of five principles (Single Responsibility, Open/Closed, Liskov Substitution, Interface 18 | Segregation, Dependency Inversion) that help in making the software designs more understandable, flexible, and maintainable. 19 | 20 | By understanding and applying these principles, front-end developers can write clean, long-lasting, and reusable code 21 | that is easy to maintain and understand. 22 | 23 | 24 | 25 | 26 | ### Education materials 27 | * [SOLID principles (plus DRY, YAGNI, KISS and other YAA)](https://siderite.dev/blog/solid-principles-plus-dry-yagni-kiss.html/) 28 | * [KISS, SOLID, YAGNI And Other Fun Acronyms](https://blog.bitsrc.io/kiss-solid-yagni-and-other-fun-acronyms-b5d207530335) 29 | * [Video. 10 Design Principles For Software Engineers](https://www.youtube.com/watch?v=XQzEo1qag4A) 30 | 31 | -------------------------------------------------------------------------------- /modules/how-browsers-work/README.md: -------------------------------------------------------------------------------- 1 | ### Module description 2 | 3 | Understanding **how web browsers work** is fundamental for front-end developers, and here are the key reasons: 4 | 5 | 1. **Performance**: Knowing how the browser interprets code can help developers write more performant HTML, CSS, and JavaScript. 6 | This knowledge contributes to smarter decisions about layout, animations, and loading assets. 7 | 8 | 2. **Debugging**: Understanding how a browser works helps during debugging. This includes knowing how the browser interprets 9 | code, how it utilizes resources, and how it handles runtime errors. 10 | 11 | 3. **Compatibility**: Different browsers may interpret code slightly differently. Understanding why these differences occur 12 | can help a developer write code that works consistently across multiple browsers. 13 | 14 | 4. **SEO**: An awareness of how browsers work helps in understanding how search engines index websites, contributing to more 15 | effective SEO implementation. 16 | 17 | 5. **UX**: Knowledge of browser's workings can be instrumental in enhancing the user experience. Concepts like rendering, 18 | loading, and browser storage can be optimized to create a smooth browsing experience for users. 19 | 20 | 6. **Accessibility**: Understanding browser technology can also help in developing accessible websites, as developers can 21 | make better use of browser accessibility features. 22 | 23 | In essence, understanding the internal workings of a browser enables a front-end developer to write more efficient, 24 | effective, and compatible code. 25 | 26 | ### Education materials 27 | 28 | - https://web.dev/howbrowserswork/ 29 | 30 | ### Additional resources 31 | 32 | - https://youtu.be/0IsQqJ7pwhw 33 | - https://dev.to/gopal1996/understanding-reflow-and-repaint-in-the-browser-1jbg 34 | -------------------------------------------------------------------------------- /modules/html-basics/README.md: -------------------------------------------------------------------------------- 1 | ## Module Description 2 | This week you will get knowledge about HTML5. 3 | **HTML**, which stands for HyperText Markup Language, is the standard markup language used to create and 4 | structure content on the web. It serves as the backbone of any web page, providing structure and layout 5 | for the content displayed on it. 6 | 7 | In **HTML**, elements are represented by tags, such as headings, paragraphs, lists, images, links, and many others. 8 | These tags allow you to organize the content in a hierarchical and semantic manner, making it easier for web 9 | browsers to interpret and render the content correctly. 10 | 11 | When creating a web page, developers write **HTML** code to define the structure, formatting, links, and other 12 | elements, which are then interpreted by web browsers. The browser takes the **HTML** code and turns it into a 13 | visually formatted web page that users can view and interact with. 14 | 15 | **HTML** is a foundational technology, along with **CSS** (Cascading Style Sheets) and **JavaScript**, that helps 16 | create modern, interactive, and responsive websites. 17 | 18 | ## Educational Materials 19 | * [Getting started with HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started) 20 | * [Learn HTML](https://web.dev/learn/html) 21 | * [HTML Tutorial](https://www.w3schools.com/html/) 22 | * [Basic HTML](https://www.freecodecamp.org/learn/responsive-web-design/#basic-html-and-html5) 23 | * [Responsive Web Design](https://www.freecodecamp.org/learn/2022/responsive-web-design/) 24 | * [Video course](https://www.youtube.com/watch?v=Y1BlT4_c_SU&list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc&ab_channel=TheNetNinja) 25 | 26 | ## Optional Materials 27 | * [Lecture RS School.Lithuania. HTML/Css](https://youtu.be/YiLqgZY4xCU) 28 | * [Lecture RS School.Georgia. HTML/Css](https://youtu.be/_oSYrBCsf2Q) 29 | -------------------------------------------------------------------------------- /modules/http/README.md: -------------------------------------------------------------------------------- 1 | ### Module description 2 | 3 | One of the most essential features of web applications is the ability to communicate over the network. In this module, you are going to consider network communication from the client-side perspective, learn the core concepts of such protocols as HTTP, WebSocket, how does it work, and how does the communication between JS-based applications and servers happens. Additionally, you'll take a look at such term as REST and which API is called RESTful. 4 | 5 | ### Education materials 6 | 7 | - [Video Lecture](https://youtu.be/Ek2JWFcX8Rk) 8 | - [Video Lecture](https://youtu.be/SaaRNJLxuVo) 9 | -------------------------------------------------------------------------------- /modules/ide/README.md: -------------------------------------------------------------------------------- 1 | ## Module Description 2 | 3 | Students are required to get acquainted with: 4 | 5 | - The functioning and nuances of browsers 6 | - Features of Chrome Dev Tools (Styles and Element Inspector) 7 | - The VSCode Editor 8 | - Setting up the environment 9 | - Extensions 10 | - Console 11 | - Basic terminal commands 12 | 13 | 14 | ## Educational Materials 15 | 16 | 1. [Internet and Browsers](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work) 17 | 2. [Webinar: VS Code – Installation and Setup](https://www.youtube.com/watch?v=VqCgcpAypFQ) 18 | 3. Terminal: 19 | - [Basic Windows Commands](https://www.digitalcitizen.life/command-prompt-how-use-basic-commands) 20 | - [Basic Mac Commands](https://www.imore.com/how-use-terminal-mac-when-you-have-no-idea-where-start) 21 | 22 | ## Optional Materials 23 | 24 | - [How Browsers Work: Behind the scenes of modern web browsers](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/) 25 | - [VSCode Tips and Tricks](https://code.visualstudio.com/docs/getstarted/tips-and-tricks) - 1h read 26 | - [Vscode Extensions](https://hackr.io/blog/best-vscode-extensions) 27 | - [WebStorm Fundamentals: Initial Setup](https://www.youtube.com/watch?v=U9Hc_H-9SFE) 28 | - [WebStorm Fundamentals: Creating Your First Project](https://www.youtube.com/watch?v=_NRodG8VcMs) 29 | - [WebStorm Tips and Tricks](https://www.jetbrains.com/webstorm/learn/) 30 | - [What Happens When You Type ‘www.google.com'](https://medium.com/@johnnyJK/what-happens-when-you-type-www-google-com-in-your-browser-and-press-enter-3ee2343d8c21) 31 | -------------------------------------------------------------------------------- /modules/js-async/README.md: -------------------------------------------------------------------------------- 1 | ### Module description 2 | 3 | One of the most essential features of web applications is the ability to communicate over the network. In this module, you will discover the asynchronous nature of JavaScript applications, how to perform requests, and how to deal with asynchronous tasks. 4 | 5 | ### Education materials 6 | 7 | - [Video Lecture](https://youtu.be/7CcfTNvEegE) 8 | - [Promises, async/await (javascript.info)](https://javascript.info/async) 9 | - [XMLHttpRequest (javascript.info)](https://javascript.info/xmlhttprequest) 10 | - [Fetch (javascript.info)](https://javascript.info/fetch) 11 | - [FormData (javascript.info)](https://javascript.info/formdata) 12 | - [Fetch: Cross-Origin Requests (javascript.info)](https://javascript.info/fetch-crossorigin) 13 | - [Fetch API (javascript.info)](https://javascript.info/fetch-api) 14 | 15 | ### At the end of this module you should pass the **Async (EN)** test 16 | 17 | #### Preconditions for test: 18 | 19 | - Tests submitted in RS School App could be solved after authorization in the application. 20 | - The minimum passing score is **80%** of the maximum possible number of points. 21 | - You can take the test **3 times**, the last result is counted. 22 | - You can try the test even more times, but the score for the test will be reduced by half (from the original score). 23 | - The result of passing the test will be displayed immediately, it will be added to the score page next day after passing. 24 | -------------------------------------------------------------------------------- /modules/js-error-handling/README.md: -------------------------------------------------------------------------------- 1 | ## Module Description 2 | 3 | In web development, particularly in front-end development, **error handling** is crucial for a variety of reasons: 4 | 5 | 1. **Improved User Experience**: Proper error handling can provide helpful feedback to users when something goes wrong 6 | and guide users steps on how to proceed, providing a far superior user experience rather than leaving users in a state of confusion. 7 | 8 | 2. **Debugging**: Properly handled errors give developers insightful information about what went wrong and where. This can 9 | speed up debugging significantly, allowing for quicker fixes. 10 | 11 | 3. **Application Stability**: By anticipating potential issues and having systems in place to handle them, you can prevent 12 | your application from crashing, thus improving the overall stability and reliability of your app. 13 | 14 | 4. **Data Integrity**: By handling erroneous states, you avoid processing incorrect data that can lead to corrupted data in 15 | your system. 16 | 17 | 5. **Customer Trust**: Applications that handle errors gracefully demonstrate professionalism, which can help enhance 18 | customer trust in your product. 19 | 20 | 6. **Avoidance of Unpredictable Behaviour**: Without proper error handling, your application might still run but deliver 21 | incorrect results or behave unpredictably, which can be worse than an outright failure. 22 | 23 | Understanding error handling is a crucial skill in a front-end developer's toolkit, and it plays a vital role in 24 | building robust, user-friendly applications. 25 | 26 | ## Educational Materials 27 | - [Error handling](https://javascript.info/error-handling) 28 | - [MDN Web Docs - Exception handling statements](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling?utm_source=chatgpt.com#exception_handling_statements) 29 | -------------------------------------------------------------------------------- /modules/js-generators-iterators/README.md: -------------------------------------------------------------------------------- 1 | ### Module description 2 | 3 | This learning module provides an in-depth understanding of generators and iterators in JavaScript. Generators are functions that can be paused and resumed, allowing for the generation of a sequence of values over time. Iterators, on the other hand, are objects that provide a way to access elements sequentially. By mastering generators and iterators, you will gain powerful tools for controlling the flow of execution and working with collections in JavaScript. 4 | 5 | ### Education materials 6 | 7 | - [MDN Web Docs: Iterators and Generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators) 8 | - [JavaScript.info: Generators](https://javascript.info/generators) 9 | - [Exploring JS: Iterators and Generators](https://exploringjs.com/es6/ch_iteration.html) 10 | - [ES6 Generators in Depth](https://davidwalsh.name/es6-generators) 11 | -------------------------------------------------------------------------------- /modules/markdown/README.md: -------------------------------------------------------------------------------- 1 | ## Module Description 2 | 3 | **Markdown** is a lightweight markup language with simple and intuitive syntax, designed to be easier to 4 | write and read compared to languages like HTML. It was created by _John Gruber_ and Aaron Swartz in _2004_ with the goal 5 | of allowing people to create formatted text using plain text editors. 6 | 7 | In **Markdown**, you can apply formatting, such as headings, bold, italics, links, lists, and more, using just regular 8 | text characters like asterisks, underscores, and brackets. When you write in Markdown, you can easily read and write 9 | the text even without the actual formatting, ensuring the content remains human-readable and easy to maintain. 10 | 11 | 12 | ## Educational Materials 13 | 1. [Markdown Guide](https://www.markdownguide.org/) 14 | 2. [Markdown Tutorial](https://www.markdowntutorial.com/) 15 | 3. [Mastering Markdown - GitHub Guides](https://guides.github.com/features/mastering-markdown/) - you can start with basics and syntax and dive in other concepts when practice 16 | 17 | 18 | ## Optional Materials 19 | 1. [CommonMark Tutorial ](https://commonmark.org/help/tutorial/) 20 | 2. [Learn Markdown in Y Minutes](https://learnxinyminutes.com/docs/markdown/) 21 | -------------------------------------------------------------------------------- /modules/npm/README.md: -------------------------------------------------------------------------------- 1 | ### Module description 2 | 3 | This module is about the package manager for the JavaScript related projects called NPM and it's useful features. 4 | 5 | ### Education materials 6 | 7 | - [Video. NPM](https://youtube.com/watch?v=foSE6mH7lr4) 8 | - [Node Package Manager Guide: Install npm + Use Commands & Modules](https://www.sitepoint.com/npm-guide) 9 | - [A Guide to npm: The Node.js Package Manager](https://toptal.com/javascript/a-guide-to-npm-the-node-package-manager) 10 | - [Official NPM Documentation](https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry) 11 | - [Yarn VS NPM: Why and How to Migrate to Yarn](https://waverleysoftware.com/blog/yarn-vs-npm/) 12 | 13 | ### At the end of this module you should pass the **NPM basics (EN)** test 14 | 15 | #### Preconditions for test: 16 | 17 | - Tests submitted in RS School App could be solved after authorization in the application. 18 | - The minimum passing score is **80%** of the maximum possible number of points. 19 | - You can take the test **3 times**, the last result is counted. 20 | - You can try the test even more times, but the score for the test will be reduced by half (from the original score). 21 | - The result of passing the test will be displayed immediately, it will be added to the score page next day after passing. 22 | -------------------------------------------------------------------------------- /modules/webpack/README.md: -------------------------------------------------------------------------------- 1 | ### Module description 2 | This module covers basic concepts about Webpack Builder Tool: setup, config, compile rules, etc. 3 | 4 | ### Education materials 5 | * [Video. Webpack](https://youtube.com/watch?v=E0xpUuh7Jhs) 6 | * [Webpack. Getting started](https://webpack.js.org/guides/getting-started/) 7 | * [How to configure Webpack 4 or 5 from scratch for a basic website](https://dev.to/antonmelnyk/how-to-configure-webpack-from-scratch-for-a-basic-website-46a5) 8 | * [A Few Advantages of Using Webpack in Your Next Project](https://nickjanetakis.com/blog/a-few-advantages-of-using-webpack-in-your-next-project) 9 | * [Webpack config boilerplate](https://github.com/Net-zen/webpack-boilerplate) 10 | 11 | ### At the end of this module you should pass the [test](add link to the test) -------------------------------------------------------------------------------- /tasks/CSS_Meme_Slider/assets/controlsEffects.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CSS_Meme_Slider/assets/controlsEffects.gif -------------------------------------------------------------------------------- /tasks/CSS_Meme_Slider/assets/fullScreen.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CSS_Meme_Slider/assets/fullScreen.gif -------------------------------------------------------------------------------- /tasks/CSS_Meme_Slider/assets/fullScreenGrid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CSS_Meme_Slider/assets/fullScreenGrid.png -------------------------------------------------------------------------------- /tasks/CSS_Meme_Slider/assets/mobileGrid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CSS_Meme_Slider/assets/mobileGrid.png -------------------------------------------------------------------------------- /tasks/CSS_Meme_Slider/assets/mobileView.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CSS_Meme_Slider/assets/mobileView.gif -------------------------------------------------------------------------------- /tasks/CV(markdown)/CV(HTML+CSS+Markdown).md: -------------------------------------------------------------------------------- 1 | # "CV. HTML, CSS & Git Basics" 2 | 3 | ## Task 4 | Your task is to create your own CV using HTML and CSS. 5 | 6 | ### Repository Requirements: 7 | 1. Continue working in the repository `rsschool-cv` created during the previous task [CV.Markdown](./CV(markdown).md) 8 | 2. Create a new branch ` rsschool-cv-html` based on the `gh-pages` 9 | 3. The number of commits should be not less than **3** 10 | 4. [Commit names according to the guideline](https://docs.rs.school/#/en/git-convention) 11 | 5. Put `index.html` and `style.css` files with your code for CV in the `rsschool-cv-html` branch. 12 | * Markup should pass validation (https://validator.w3.org/ ) 13 | * Semantic layout 14 | * Content should be placed in the horizontal centered block 15 | * The CV should work in the Google Chrome browser 16 | * There are in the footer: link to your github, date, course logo with the link 17 | * In case you are worried about your private information - you may use fake data 18 | 6. Inside the `README.md` in the `rsschool-cv-html` branch put the link `https://GITHUB-USERNAME.github.io/rsschool-cv/` where the `GITHUB-USERNAME` is your github name. This link should lead to your CV created with HTML and CSS 19 | 7. Create the Pull Request from the `rsschool-cv-html` to `gh-pages`. The name of PR should be `HTML, CSS & Git Basics` 20 | 8. Merge the Pull Request from the `rsschool-cv-html` to `gh-pages` 21 | 22 | 23 | ### How to submit the task 24 | * After completing implementation of the task 25 | * go to the [rs app](https://app.rs.school/) 26 | * select Cross-check: Submit 27 | * select the name of the task in the drop-down list 28 | * click the Submit button 29 | * Till the deadline, you may submit the task as many times as you want, each submission result overwrites the previous one. 30 | 31 | ### Prepare repository for "CV. HTML, CSS & Git Basics. Cross-check" task 32 | * After finishing this stage, go to ["CV. HTML, CSS & Git Basics. Cross-check" task](https://github.com/rolling-scopes-school/js-fe-course-en/blob/main/tasks/CV(markdown)/CV(cross-check).md) to prepare and submit your repository for a cross-check task. 33 | -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/1.jpg -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/10.jpg -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/11.jpg -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/12.jpg -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/13.jpg -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/14.jpg -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/15.jpg -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/16.jpg -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/17.jpg -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/18.jpg -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/19.jpg -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/2.jpg -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/20.jpg -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/21.jpg -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/22.jpg -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/23.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/23.jpg -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/3.jpg -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/4.jpg -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/5.jpg -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/6.jpg -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/7.jpg -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/8.jpg -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/9.jpg -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/basic_html_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/basic_html_2.gif -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/create-branch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/create-branch.png -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/create-gh-pages.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/create-gh-pages.png -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/cv-hints.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/cv-hints.jpg -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/cv.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/cv.jpg -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/find_deploy_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/find_deploy_01.png -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/find_deploy_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/find_deploy_02.png -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/html_template_basic.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/html_template_basic.JPG -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/netlify-drop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/netlify-drop.png -------------------------------------------------------------------------------- /tasks/CV(markdown)/images/repository-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/CV(markdown)/images/repository-settings.png -------------------------------------------------------------------------------- /tasks/books-shop/images/img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/books-shop/images/img.png -------------------------------------------------------------------------------- /tasks/books-shop/images/img_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/books-shop/images/img_1.png -------------------------------------------------------------------------------- /tasks/christmas-shop/img-compressed.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/christmas-shop/img-compressed.zip -------------------------------------------------------------------------------- /tasks/clean-code/clean-code-S1E1.md: -------------------------------------------------------------------------------- 1 | # [Stage#1](../../) Проект 'Clean Code S1E1' 2 | 3 | ## В данном модуле студентам необходимо: 4 | 5 | - Познакомиться с общими принципами: 6 | - DRY 7 | - KISS 8 | - YAGNI 9 | - Подходами к: 10 | - Форматированию кода 11 | - Написанию комментариев 12 | - Оформлению коммитов и PRы 13 | - JavaScript Style Guide 14 | - Tools, linters 15 | - Начать изучение практик написания чистого, читабельного кода 16 | - Потренировать навыки работы с VS Code и Git 17 | 18 | ## Приблизительное время прохождения модуля 19 | 20 | 10 часов 21 | 22 | ## Теория 23 | 24 | Вам необходимо прочитать руководство: 25 | 26 | - [Общие принципы](materials/generic-principles.md) 27 | - [Правила работы с GIT](materials/commits.md) 28 | - [Общие правила для HTML + CSS. Часть 1](materials/html-and-css.md) 29 | - [Общие правила для HTML + CSS. Часть 2](materials/html-and-css-extended.md) 30 | 31 | ## Практика 32 | 33 | 1. Выполнить задание ['Clean Code S1E1'](clean-code-s1e1.md) 34 | 2. Пройти тест в RS APP "Test for generic principles" 35 | 36 | ## Дополнительные материалы 37 | 38 | - "Чистый код", Роберт Мартин 39 | - [Википедия: Coding Conventions](https://en.wikipedia.org/wiki/Coding_conventions) 40 | - [Git commit editing](https://git-scm.com/book/en/v2/Git-Tools-Rewriting-History) 41 | - [Как использовать Vim или поменять editor для Git](https://www.tempertemper.net/blog/changing-editor-for-git-on-the-command-line) 42 | - [Refactoring code with VS Code](https://code.visualstudio.com/docs/editor/refactoring) 43 | - [Key bindings in VS Code](https://code.visualstudio.com/docs/getstarted/keybindings) 44 | -------------------------------------------------------------------------------- /tasks/codewars/codewars.arrays.objects.md: -------------------------------------------------------------------------------- 1 | # Codewars: Array, Object: 2 | 3 | ### [How to submit task](https://docs.app.rs.school/#/platform/tasks?id=codewars) 4 | 5 | ### Array 6 | 1. 8 kyu https://www.codewars.com/kata/remove-duplicates-from-list 7 | 2. 8 kyu https://www.codewars.com/kata/sum-of-positive 8 | 3. 7 kyu https://www.codewars.com/kata/fizz-buzz 9 | 4. 7 kyu https://www.codewars.com/kata/currying-functions-multiply-all-elements-in-an-array 10 | 5. 7 kyu https://www.codewars.com/kata/shortest-word 11 | 6. 7 kyu https://www.codewars.com/kata/last-survivor 12 | 7. 7 kyu https://www.codewars.com/kata/easy-mathematical-callback 13 | 8. 7 kyu https://www.codewars.com/kata/head-tail-init-and-last 14 | 9. 6 kyu https://www.codewars.com/kata/array-deep-count 15 | 10. 6 kyu https://www.codewars.com/kata/valid-string 16 | 17 | ### Object 18 | 1. 7 kyu https://www.codewars.com/kata/whos-online 19 | 2. 6 kyu https://www.codewars.com/kata/count-characters-in-your-string 20 | 3. 6 kyu https://www.codewars.com/kata/run-length-encoding 21 | 4. 7 kyu https://www.codewars.com/kata/numbers-to-objects 22 | 5. 7 kyu https://www.codewars.com/kata/5f709c8fb0d88300292a7a9d 23 | 6. 7 kyu https://www.codewars.com/kata/make-a-function-that-does-arithmetic 24 | 7. 6 kyu https://www.codewars.com/kata/this-is-an-other-problem 25 | 8. 7 kyu https://www.codewars.com/kata/the-once-rollable-dice 26 | 9. 7 kyu https://www.codewars.com/kata/maxpossiblescore 27 | 10. 8 kyu https://www.codewars.com/kata/regular-ball-super-ball 28 | 29 | ## Scoring criteria 30 | | Category | Number of tasks | Points for each task | Subtotal Points | 31 | |----------|:---------------:|:--------------------:|-----------------------:| 32 | | 8 kyu | 3 | 3 | 3 * 3 = 9 | 33 | | 7 kyu | 12 | 3 | 12 * 3 = 36 | 34 | | 6 kyu | 5 | 5 | 5 * 5 = 25 | 35 | | | | **Total Points** = | 9 + 36 + 25 = **70** | 36 | 37 | **Total sum = 70 points** 38 | 39 | 40 | -------------------------------------------------------------------------------- /tasks/codewars/codewars.strings.numbers.md: -------------------------------------------------------------------------------- 1 | # Codewars: Strings, Numbers: 2 | 3 | ### [How to submit task](https://docs.app.rs.school/#/platform/tasks?id=codewars) 4 | 5 | ### String 6 | 1. 8 kyu https://www.codewars.com/kata/reversed-strings 7 | 2. 8 kyu https://www.codewars.com/kata/remove-first-and-last-character 8 | 3. 8 kyu https://www.codewars.com/kata/convert-a-number-to-a-string 9 | 4. 8 kyu https://www.codewars.com/kata/a-strange-trip-to-the-market 10 | 5. 8 kyu https://www.codewars.com/kata/57a1fd2ce298a731b20006a4 11 | 6. 7 kyu https://www.codewars.com/kata/anagram-detection 12 | 7. 7 kyu https://www.codewars.com/kata/birthday-i-cake 13 | 8. 7 kyu https://www.codewars.com/kata/get-the-middle-character 14 | 9. 7 kyu https://www.codewars.com/kata/filter-the-number 15 | 16 | ### Number 17 | 1. 8 kyu https://www.codewars.com/kata/even-or-odd 18 | 2. 8 kyu https://www.codewars.com/kata/century-from-year 19 | 3. 7 kyu https://www.codewars.com/kata/greatest-common-divisor 20 | 4. 7 kyu https://www.codewars.com/kata/factorial 21 | 5. 7 kyu https://www.codewars.com/kata/find-the-duplicated-number-in-a-consecutive-unsorted-list 22 | 6. 7 kyu https://www.codewars.com/kata/number-of-decimal-digits 23 | 7. 6 kyu https://www.codewars.com/kata/is-a-number-prime 24 | 25 | 26 | ## Scoring criteria 27 | | Category | Number of tasks | Points for each task | Subtotal Points | 28 | |----------|:---------------:|:--------------------:|---------------------:| 29 | | 8 kyu | 7 | 3 | 7 * 3 = 21 | 30 | | 7 kyu | 8 | 3 | 8 * 3 = 24 | 31 | | 6 kyu | 1 | 5 | 1 * 5 = 5 | 32 | | | | **Total Points** = | 21 + 24 + 5 = **50** | 33 | 34 | **Total sum = 50 points** 35 | 36 | 37 | -------------------------------------------------------------------------------- /tasks/core-js-101/core-js-101.md: -------------------------------------------------------------------------------- 1 | # Core JS 101 2 | 3 | ## Task 4 | The task is to implement functions on different Core JS topics. There are eight modules with different tasks. Each module consists of tasks for specified topic: 5 | 6 | 1. Strings 7 | 2. Numbers 8 | 3. Arrays 9 | 4. Date 10 | 5. Objects 11 | 6. Promises 12 | 7. Conditions and Loops 13 | 8. Functions and Closures 14 | 15 | ### The detailed information you find by the [link](https://github.com/mikhama/core-js-101) 16 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint1/RSS-ECOMM-1_01.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-1_01: Set up GitHub repository (10 points) 🏗️ 2 | 3 | #### Description 📝 4 | 5 | Create a GitHub repository for the project, complete with a README file, .gitignore, and necessary dependencies. This repository will serve as the central codebase for the project, allowing for collaboration and version control. 6 | 7 | #### Acceptance Criteria 📚 8 | 9 | - A new GitHub repository is created with the project name. 📁 10 | - A README file is initialized with a brief description of the project. 📝 11 | - A .gitignore file is added to exclude unnecessary files and directories. 🚫 12 | 13 | #### Useful Links 🔗 14 | 15 | - [Create a GitHub repository](https://docs.github.com/en/github-ae@latest/get-started/quickstart/create-a-repo) 🛠️ 16 | - [About README files](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes) 📚 17 | - [Sample .gitignore files](https://github.com/github/gitignore) 🗂️ 18 | - [.gitignore file](https://www.pluralsight.com/guides/how-to-use-gitignore-file) 🚫 19 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint1/RSS-ECOMM-1_02.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-1_02: Set up folder structure (10 points) 📁 2 | 3 | #### Description 📝 4 | 5 | Set up a clear and organized folder structure within the repository, ensuring a maintainable and scalable codebase. By organizing the codebase properly, it will be easier for team members to navigate and contribute code efficiently. 🧭 6 | 7 | #### Acceptance Criteria 📚 8 | 9 | - There is a well-defined folder structure for different components, features, and assets. 📂 10 | - The folder structure allows for easy navigation and identification of the project's different parts. 📍 11 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint1/RSS-ECOMM-1_03.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-1_03: Invite team members and mentor (4 points) 🤝 2 | 3 | #### Description 📝 4 | 5 | Invite all team members and the mentor as collaborators, ensuring everyone has access to contribute to the repository. Collaboration is crucial for the project's success, and this task aims to make sure everyone can work together efficiently. 💪 6 | 7 | #### Acceptance Criteria 📚 8 | 9 | - All team members and the mentor are invited as collaborators on the GitHub repository. 💌 10 | - Each team member and the mentor can access and contribute to the repository. 💻 11 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint1/RSS-ECOMM-1_04.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-1_04: Set up project task board (6 points) 📋 2 | 3 | #### Description 📝 4 | 5 | Create a project task board using a project management tool (e.g., Trello or Jira), organizing tasks into lists or columns corresponding to their status (e.g., To Do, In Progress, Done). This task board will be the main reference for the team's progress and will help everyone stay up to date on the project's status. 🔄 6 | 7 | #### Acceptance Criteria 📚 8 | 9 | - A task board is created using a project management tool (e.g., Trello or Jira). 🧩 10 | - The task board has lists or columns for various task statuses (e.g., To Do, In Progress, Done). 🗂️ 11 | - Relevant project tasks are added to the task board. ➕ 12 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint1/RSS-ECOMM-1_05.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-1_05: Break down tasks and delegate responsibilities (5 points) 🎯 2 | 3 | #### Description 📝 4 | 5 | Break down project tasks into smaller, manageable subtasks and assign them to team members, ensuring a clear delegation of responsibilities. This process will help divide the workload evenly among team members and enable focused work on specific aspects of the project. 🧩 6 | 7 | #### Acceptance Criteria 📚 8 | 9 | - Project tasks are broken down into smaller, manageable subtasks. 🪓 10 | - Subtasks are assigned to team members based on their expertise and workload. 📨 11 | - Each team member has a clear understanding of their responsibilities. 🧠 12 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint1/RSS-ECOMM-1_06.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-1_06: Set up CommerceTools project (15 points) 🛠️ 2 | 3 | #### Description 📝 4 | 5 | Create the project in CommerceTools, setting up the necessary authorization, currencies, languages, and other configurations in the Merchant Center. 🌐 6 | 7 | #### Acceptance Criteria 📚 8 | 9 | - A new CommerceTools project is created with the correct settings. ✔️ 10 | - Currencies, languages, and other configurations are properly set up in the Merchant Center. 🌍 11 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint1/RSS-ECOMM-1_07.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-1_07: Set up CommerceTools API client (15 points) 🛠️ 2 | 3 | #### Description 📝 4 | 5 | Create the API client for CommerceTools, enabling access to the platform's APIs and managing permissions and scopes required for the project. 🔑 6 | 7 | #### Acceptance Criteria 📚 8 | 9 | - The API client is created for CommerceTools with the required permissions and scopes. ✔️ 10 | - The API client enables the project to access the platform's APIs for integration. 🔄 11 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint1/RSS-ECOMM-1_08.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-1_08: Configure bundler (10 points) 🧩 2 | 3 | #### Description 📝 4 | 5 | Set up and configure a bundler (e.g., Webpack, Vite, Parcel, Rollup, or other) for the project, supporting both development and production build modes. 💻🔄 6 | 7 | #### Acceptance Criteria 📚 8 | 9 | - A bundler (e.g., Webpack, Vite, Parcel, Rollup, or other) is set up and integrated with the project. ✔️ 10 | - The bundler configuration supports both development and production build modes. 🛠️ 11 | 12 | #### Useful links to popular bundlers 🖇️ 13 | 14 | - [Webpack](https://webpack.js.org/) ⚙️ 15 | - [Vite](https://vitejs.dev/) ⚡ 16 | - [Parcel](https://parceljs.org/) 📦 17 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint1/RSS-ECOMM-1_09.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-1_09: Configure TypeScript (5 points) 🖥️ 2 | 3 | #### Description 📝 4 | 5 | Configure TypeScript to enforce strong typing and improve code quality throughout the project. 💪🏼📚 6 | 7 | #### Acceptance Criteria 📚 8 | 9 | - TypeScript is configured and integrated into the project. ✔️ 10 | - The project enforces strong typing and benefits from improved code quality. 📈 11 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint1/RSS-ECOMM-1_10.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-1_10: Set up ESLint (5 points) 🖥️ 2 | 3 | #### Description 📝 4 | 5 | Set up ESLint to enforce consistent coding styles and identify potential issues in the codebase. 🕵️ 6 | 7 | #### Acceptance Criteria 📚 8 | 9 | - ESLint is set up and integrated into the project. ✔️ 10 | - ESLint enforces consistent coding styles and helps identify potential code issues. 🛠️🧐 11 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint1/RSS-ECOMM-1_11.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-1_11: Configure Prettier (5 points) 🎨 2 | 3 | #### Description 📝 4 | 5 | Configure Prettier to automatically format code, ensuring a consistent and readable code style. 📚 6 | 7 | #### Acceptance Criteria 📚 8 | 9 | - Prettier is configured and integrated into the project. ✔️ 10 | - The project has a consistent and readable code style, thanks to Prettier's automatic formatting. 🖊️ 11 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint1/RSS-ECOMM-1_12.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-1_12: Initialize Husky (8 points) 🐶 2 | 3 | #### Description 📝 4 | 5 | Initialize Husky to manage Git hooks, automating tasks such as code formatting and linting checks during the commit process. 📝➡️🔎 6 | 7 | #### Acceptance Criteria 📚 8 | 9 | - Husky is initialized and integrated into the project. ✔️ 10 | - Git hooks are managed by Husky, automating code formatting and linting checks. ✔️🔄 11 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint1/RSS-ECOMM-1_13.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-1_13: Install and configure Jest (10 points) 😄 2 | 3 | #### Description 📝 4 | 5 | Install and configure Jest as the testing framework for the project, enabling comprehensive testing of code functionality. 🔧👩‍💻🧪 6 | 7 | #### Acceptance Criteria 📚 8 | 9 | - Jest is installed and configured as the testing framework for the project. ✔️ 10 | - The project allows for comprehensive testing of code functionality with Jest. ✔️🔬 11 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint1/RSS-ECOMM-1_14.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-1_14: Create ESLint script (5 points) 🎯 2 | 3 | #### Description 📝 4 | 5 | Create a script for running ESLint across the codebase, making it possible to quickly and efficiently identify code style issues and potential errors. 💡🔍💻 6 | 7 | #### Acceptance Criteria 📚 8 | 9 | - A script for running ESLint is created. ✅ 10 | - The script enables quick and efficient identification of code style issues and errors. ✅👨‍💻🚀 11 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint1/RSS-ECOMM-1_15.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-1_15: Create Prettier script (5 points) 📜 2 | 3 | #### Description 🗂️ 4 | 5 | Create a script for running Prettier across the codebase, simplifying code formatting and ensuring uniform code style. 📝🔧 6 | 7 | #### Acceptance Criteria 🎯 8 | 9 | - A script for running Prettier is created. 📄✅ 10 | - The script simplifies code formatting and helps maintain a uniform code style across the project. 🔄👌 11 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint1/RSS-ECOMM-1_16.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-1_16: Create Jest test script (5 points) 📜 2 | 3 | #### Description 🗂️ 4 | 5 | Create a script for running Jest tests, streamlining the process of executing tests and generating reports on test outcomes. 🧪⚙️ 6 | 7 | #### Acceptance Criteria 🎯 8 | 9 | - A script for running Jest tests is created. 📄✅ 10 | - The script streamlines the process of executing tests and generating test outcome reports. 🚀📊 11 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint1/RSS-ECOMM-1_17.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-1_17: Update README with project description (10 points) 📝 2 | 3 | #### Description 🗂️ 4 | 5 | Update the README file in the repository, providing a comprehensive description of the project, its purpose, and the technology stack used. 🔄💡🛠️ 6 | 7 | #### Acceptance Criteria 🎯 8 | 9 | - The README file contains a comprehensive description of the project and its purpose. 📄✅ 10 | - The technology stack used is described in the README. 🧪🗃️ 11 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint1/RSS-ECOMM-1_18.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-1_18: Share task board with team and mentor (3 points) 📬 2 | 3 | #### Description 🗂️ 4 | 5 | Share the task board with the team members and the mentor, ensuring everyone can track progress and update the status of their tasks. This action will help keep everyone in sync and maintain a clear understanding of the project's status. 👥🔄📊 6 | 7 | #### Acceptance Criteria 🎯 8 | 9 | - The task board is shared with all team members and the mentor. 📌👥 10 | - Everyone has access to view and update the task board. 👀📝 11 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint1/RSS-ECOMM-1_19.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-1_19: Document scripts in README (5 points) 📝 2 | 3 | #### Description 🗂️ 4 | 5 | Document all available scripts (e.g., for running ESLint, Prettier, and Jest tests) and their usage in the README file. This will help team members and other contributors to better understand and utilize the available scripts. 🛠️👥 6 | 7 | #### Acceptance Criteria 🎯 8 | 9 | - All available scripts are documented in the README file. 📚✅ 10 | - Usage instructions for each script is provided. 📖👍 11 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint1/RSS-ECOMM-1_20.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-1_20: Add setup instructions to README (4 points) 💻 2 | 3 | #### Description 🗂️ 4 | 5 | Provide detailed instructions for setting up and running the project locally in the README file. This will help newcomers and contributors get started quickly with setting up the project on their own machines. 🏃‍♀️👨‍💻 6 | 7 | #### Acceptance Criteria 🎯 8 | 9 | - Step-by-step instructions for setting up and running the project locally are available in the README file. 🚀✅ 10 | - Instructions are clear and easy to follow. 📖👍 11 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint1/RSS-ECOMM-1_21.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-1_21: Create a pull request template (5 points) 📝 2 | 3 | #### Description 🗂️ 4 | 5 | Create a pull request template with a clear structure for describing proposed changes and the rationale behind them. This template will help standardize pull request descriptions and make it easier to understand the purpose of each proposed change. 🔄🎯 6 | 7 | #### Acceptance Criteria 🎯 8 | 9 | - A pull request template file is created and saved to the repository. 💾✅ 10 | - The template has a clear structure for describing proposed changes. 🗂️👌 11 | - The template includes sections for providing the rationale behind the changes. 💭👀 12 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint2/RSS-ECOMM-2_01.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-2_01: Implement client-side validation for login form (20 points) 🎯 2 | 3 | #### Description 4 | 5 | Implement client-side validation for the login form, including email 📧 and password 🔑 fields. Ensure that input validation checks are performed in real-time when the user enters their information. 6 | 7 | #### Email Validation Rules 📏 8 | 9 | - Email address must be properly formatted (e.g., user@example.com). 10 | - Email address must not contain leading or trailing whitespace. 11 | - Email address must contain a domain name (e.g., example.com). 12 | - Email address must contain an '@' symbol separating local part and domain name. 13 | 14 | #### Password Validation Rules 📏 15 | 16 | - Password must be at least 8 characters long. 17 | - Password must contain at least one uppercase letter (A-Z). 18 | - Password must contain at least one lowercase letter (a-z). 19 | - Password must contain at least one digit (0-9). 20 | - (Optional) Password must contain at least one special character (e.g., !@#$%^&\*). 21 | - Password must not contain leading or trailing whitespace. 22 | 23 | #### Show/Hide Password Functionality 👁️‍🗨️ 24 | 25 | - Provide a button or a checkbox to allow users to toggle the visibility of their password. 26 | - When this option is activated, users should be able to see their password in plaintext. 27 | - When this option is deactivated, the password should be replaced with asterisks or bullet points. 28 | 29 | #### Acceptance Criteria ✅ 30 | 31 | - Email field validation checks for a properly formatted email address according to the specified rules. 32 | - Password field validation checks for meeting the length and complexity requirements. 33 | - Show/hide password functionality allows users to toggle password visibility. 34 | - Validation checks are performed as the user types. 35 | 36 | Alright team, let's get ready to rock this code! Just remember, in the words of the legendary Queen, "We will, we will, rock you!" So let's get out there and rock this validation form! 🎸🔥 37 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint2/RSS-ECOMM-2_02.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-2_02: Display clear error messages for validation issues (20 points) 🚨 2 | 3 | #### Description 4 | 5 | Display clear error messages on the login form when validation issues are detected, such as an improperly formatted email address 📧 or a weak password 🔑. The error messages should follow specific display rules for a consistent and user-friendly experience. 6 | 7 | #### Display Rules for Validation Error Messages 📚 8 | 9 | - Error messages should appear next to the corresponding input field (e.g., either to the right, left, top, or bottom of the input field). 10 | - Error messages should be styled consistently (e.g., with a specific font, color, and size) across all input fields. 11 | - Error messages should not overlap other UI elements or obstruct any important information. 12 | - Error messages should disappear once the user corrects the invalid input and meets the validation criteria. 13 | - Error messages should be easily readable and visually distinct from other text on the page (e.g., by using a different color or font weight). 14 | 15 | #### Acceptance Criteria ✅ 16 | 17 | - Clear error messages are shown next to the corresponding input field when validation fails. 18 | - The first error messages should be visible after an input will get out of focus ([blur](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur)). 19 | - Error messages are descriptive, explaining the specific validation issue. 20 | - Error messages follow the specified display rules for a consistent and user-friendly experience. 21 | - Error messages disappear when the user corrects the invalid input. 22 | 23 | So team, let's take a leaf from Pink Floyd's book and remember - "All in all, it's just another brick in the wall." And every error message we solve is one less brick in our user's wall! Let's bring the wall down together! 🎸🧱 24 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint2/RSS-ECOMM-2_03.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-2_03: Integrate login form with CommerceTools authorization service (25 points) 🔒 2 | 3 | #### Description 4 | 5 | Integrate the login form with the CommerceTools authorization service to handle user authorization by submitting the email 📧 and password 🔑 provided by the user. Set up and configure the CommerceTools API to work with the application to manage user authorization securely 🔐. 6 | 7 | #### CommerceTools Integration Tasks 🛠️ 8 | 9 | - Set up a CommerceTools project and configure the required API clients, scopes, and permissions for user authentication. 10 | - Implement a function or module in your application to communicate with the CommerceTools API to submit user email and password for authorization ([authorization documentation](https://docs.commercetools.com/api/authorization#password-flow)). 11 | - Handle the authentication response from the CommerceTools API, which includes receiving the access token, refresh token, and user data upon successful login ([Sign in response documentation](https://docs.commercetools.com/api/projects/customers#customersigninresult)). 12 | 13 | #### Acceptance Criteria ✅ 14 | 15 | - CommerceTools authentication service is set up and configured for the project. 16 | - Login form communicates with the CommerceTools authentication service to sign in users by submitting email and password. 17 | - Application can successfully receive access token, refresh token, and user data from the CommerceTools API. 18 | 19 | In the words of The Rolling Stones, "You can't always get what you want, but if you try sometimes, you might find, you get what you need." So let's get what we need by ensuring this integration is tight and secure! 👊🎶 20 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint2/RSS-ECOMM-2_04.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-2_04: Implement error handling for failed authentication attempts using CommerceTools (20 points) 🚫 2 | 3 | #### Description 4 | 5 | Implement error handling for failed authentication attempts due to invalid login credentials when using the CommerceTools authentication service. Display user-friendly error messages to inform the user of the issue and guide them on how to proceed. 6 | 7 | #### Failed Authentication Error Handling Tasks 🚧 8 | 9 | - Determine how CommerceTools responds to authentication errors, such as incorrect email addresses or passwords (e.g., specific error codes or messages in the API response). 10 | - Implement a function or module in the application to process and understand the error responses from the CommerceTools authentication service. 11 | - Map the error responses from the CommerceTools API to user-friendly error messages that can be displayed in the login form. 12 | - Ensure that the error messages are displayed in a consistent and user-friendly manner, as described in Issue RSS-ECOMM-2_02. 13 | 14 | #### Visual Implementation Ideas 💡 15 | 16 | - Display error messages directly below the respective input field (email, password) that caused the error. 17 | - Highlight the input field in red to draw the user's attention. 18 | - Use intuitive icons (e.g., a warning triangle) next to the error message to enhance the visibility. 19 | - Ensure error messages disappear once the user corrects the input or starts typing in the respective field. 20 | 21 | #### Acceptance Criteria ✅ 22 | 23 | - Clear error messages are shown when authentication fails due to incorrect email or password. 24 | - Error messages are user-friendly and provide guidance on how to proceed. 25 | - No sensitive information is exposed to the user in the error messages. 26 | - The application handles CommerceTools authentication errors properly. 27 | 28 | As Bon Jovi said in their song, "It's my life. It's now or never. I ain't gonna live forever. I just want to live while I'm alive." So let's make sure our users feel alive with a smooth and secure login process! 🤘🎸 29 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint2/RSS-ECOMM-2_05.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-2_05: Redirect users to the main page upon successful login (15 points) 🎯 2 | 3 | #### Description 4 | 5 | Redirect users to the application's main page upon successful login, allowing them to access the main features and content of the application. The main page can contain simple text (e.g., "Main") or any other content to demonstrate that the user is successfully logged in. Ensure that the URL in the address bar is changed to the main page's URL, properly handling navigation and user experience during redirection. 6 | 7 | #### URL Change and Redirection Tasks 🔀 8 | 9 | - Implement a function or module in your application that handles successful authentication by redirecting users from the login page to the main page. 10 | - Update the URL in the address bar to reflect the correct URL for the main page (e.g., "/main") upon successful login and redirection. 11 | - Ensure that the browser's navigation (history) is updated correctly when redirecting users to the main page, allowing them to use the back button to navigate to the previous page if necessary. 12 | - Make sure that the user's authentication state is preserved during the redirection process, allowing them to stay logged in when accessing the main page. 13 | 14 | #### Acceptance Criteria ✅ 15 | 16 | - After successful authentication, users are redirected to the main page of the application, which contains simple text ("Main") or any other content. 17 | - The URL in the address bar is changed to the main page's URL upon redirection. 18 | - Proper handling of navigation and user experience during redirection, including browser history updates and preserving authentication state. 19 | 20 | As the band Journey would say, "Don't stop believin'!" Let's guide our users to their main page destination like the faithful city boy on a midnight train going anywhere! 🌃🚂 21 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint2/RSS-ECOMM-2_06.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-2_06: Redirect logged-in users to the main page from the login page (15 points) 🚀 2 | 3 | #### Description 4 | 5 | Redirect users who are already logged into the application to the main page if they attempt to access the login page. Ensure a smooth and seamless user experience by properly checking the user's authentication state, updating the URL in the address bar, and handling navigation during the redirection process. 6 | 7 | #### Redirection and Authentication State Checking Tasks 🧐 8 | 9 | - Implement a function, service, or route guard in your application that checks whether a user is already authenticated when they attempt to visit the login page. 10 | - If the user is authenticated, redirect them to the main page, preventing access to the login page while they are logged in. 11 | - Update the URL in the address bar to reflect the correct URL for the main page (e.g., "/main") for authenticated users redirected from the login page. 12 | - Ensure that the browser's navigation (history) is updated correctly when redirecting authenticated users to the main page. 13 | 14 | #### Acceptance Criteria ✔️ 15 | 16 | - Authenticated users who attempt to visit the login page are automatically redirected to the main page. 17 | - The URL in the address bar is changed to the main page's URL for authenticated users redirected from the login page. 18 | - Redirection maintains the user's authentication state during the process. 19 | - Proper handling of navigation and user experience during redirection, including updating browser history. 20 | 21 | In the words of AC/DC, "For those about to rock, we salute you!" Let's ensure that our authenticated users are always on the rockin' main page and not back in the login page crowd! 🤘🎸 22 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint2/RSS-ECOMM-2_07.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-2_07: Handle Authentication Token (10 points) 🎫 2 | 3 | #### Description 4 | 5 | Obtain the authentication token securely after a successful login attempt by sending a request to the token endpoint (e.g., https://auth.europe-west1.gcp.commercetools.com/oauth/project_key/customers/token), allowing for seamless user authentication across the application, but do not save it. 6 | 7 | #### Acceptance Criteria ✔️ 8 | 9 | - The authentication token is obtained from the token endpoint after a successful login attempt. 10 | - The token is used for subsequent requests that require authentication. 11 | 12 | Remember the wisdom of the classic Queen track, "I want to break free!" When it comes to our authentication token, we break free from the norm. We don't save it - we're rebels with a cause! 🎵🤘 13 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint2/RSS-ECOMM-2_08.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-2_08: Add a button to navigate to the registration page (5 points) 🖱️ 2 | 3 | #### Description 4 | 5 | Add a button or link on the login page that allows users to navigate to the registration page, making it easy for users to create a new account if they don't have one. 6 | 7 | #### Acceptance Criteria ✔️ 8 | 9 | - A clear and prominent button or link is present on the login page to navigate to the registration page. 10 | - The button or link is functional and directs the user to the registration page. 11 | - Proper handling of navigation and user experience during this process. 12 | 13 | Don't be "Living on a prayer" as Bon Jovi sings. Our aim is clear navigation, making the path to registration as easy as "slippery when wet". 🎵🎸 14 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint2/RSS-ECOMM-2_09.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-2_09: Implement client-side validation for required fields in the registration form (25 points) 🔒 2 | 3 | #### Description 4 | 5 | Implement client-side validation for all required fields in the registration form using JavaScript or a front-end library. The fields include: 6 | 7 | - Email: A properly formatted email address (e.g., example@email.com) 8 | - Password: Minimum 8 characters, at least 1 uppercase letter, 1 lowercase letter, and 1 number 9 | - First name: Must contain at least one character and no special characters or numbers 10 | - Last name: Must contain at least one character and no special characters or numbers 11 | - Date of birth: A valid date input ensuring the user is above a certain age (e.g., 13 years old or older) 12 | - Address fields: 13 | - Street: Must contain at least one character 14 | - City: Must contain at least one character and no special characters or numbers 15 | - Postal code: Must follow the format for the country (e.g., 12345 or A1B 2C3 for the U.S. and Canada, respectively) 16 | - Country: Must be a valid country from a predefined list or autocomplete field 17 | 18 | Ensure that the chosen validation approach is compatible with CommerceTools or the chosen platform. 19 | 20 | #### Acceptance Criteria ✔️ 21 | 22 | - Each required field in the registration form has validation rules 23 | - Registration form submission is prevented if the input doesn't meet the requirements 24 | 25 | As Queen sang, "We are the champions, my friends," and with our robust validation rules, we'll keep on fighting 'til the end of invalid form submissions! 🎶🏆 26 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint2/RSS-ECOMM-2_10.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-2_10: Display clear error messages for invalid inputs in the registration form (20 points) ⛔️ 2 | 3 | #### Description 4 | 5 | Display clear and user-friendly error messages indicating any validation issues, such as an improperly formatted email address, a weak password, or incomplete address information. Make sure that error messages are shown next to the corresponding input fields and have an accessible design for users. 6 | 7 | UI suggestions for highlighting errors (not all methods are required; you can choose the most suitable ones for your design): 8 | 9 | - Use colors to indicate errors: Display error messages in a contrasting color, such as red, to make them easily visible and distinguishable from the input text. 10 | - Icon indicators: Show an error or warning icon next to the input field with the validation issue. 11 | - Border styling: Change the border color or style of the input field to signify a validation error. 12 | - Tooltips or popovers: Show tooltips or popovers on hovering or focusing the input field with validation issues that provide more details on the error. 13 | 14 | #### Acceptance Criteria 🚦 15 | 16 | - Error messages are displayed for each invalid input in the registration form 17 | - Error messages are clear, concise, and visually accessible 18 | - Selected UI elements are used effectively to highlight validation errors and improve user experience 19 | 20 | And as AC/DC would put it: "I hit the sack, I've been too long I'm glad to be back." Well, we're not glad to see errors come back, so let's stop them in their tracks! 🎸🤘 21 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint2/RSS-ECOMM-2_11.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-2_11: Integrate the registration form with a chosen authentication service (10 points) 🔒 2 | 3 | #### Description 4 | 5 | Integrate the registration form with a chosen authentication service, such as commercetools, to handle user registration. Ensure that the registration process is secure and follows best practices for handling user information. In the case of commercetools, you can refer to their API documentation for customer registration here: [commercetools API - Create/Sign up Customer](https://docs.commercetools.com/api/projects/customers#create-sign-up-customer). 🌐 6 | 7 | Upon successful account creation, display a success message to the user, informing them that their account has been created. The message should be clear, concise, and visually accessible. 🎉 8 | 9 | You can check the successful creation of a customer using the browser's DevTools Network tab. When a customer is successfully created, you will see a response like the one documented here: [Customer Created Message](https://docs.commercetools.com/api/projects/messages#ctp:api:type:CustomerCreatedMessage). 🧑‍💻 10 | 11 | #### Acceptance Criteria 12 | 13 | - Successful user registration with the chosen authentication service 👏 14 | - Proper submission of user information to the authentication service backend 📨 15 | - A success message is displayed to the user upon successful account creation 🥳 16 | - Verification of successful customer creation using the browser's DevTools Network tab 🕵️‍♀️ 17 | 18 | And as the rock band Scorpions would put it, let's "Take me to the magic of the moment, on a glory night" as we successfully integrate this registration form! 🤘🎵 19 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint2/RSS-ECOMM-2_12.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-2_12: Implement error handling for failed registration attempts (15 points) 🛑 2 | 3 | #### Description 4 | 5 | Implement error handling for_failed_registration_attempts, including, but not limited to, the following scenarios: 6 | 7 | - An email address that already exists in the system: Inform the user that an account with the provided email address already exists, and suggest that they either log in or use another email address. 📧🔒 8 | - Server-side issues during registration: Display a user-friendly error message to inform the user that something went wrong during the registration process and that they should try again later. ⚠️🔄 9 | - Invalid input that bypasses client-side validation: Ensure any input that somehow bypasses client-side validation is appropriately handled by backend error handling. 🔄🛡️ 10 | 11 | Display user-friendly error messages that inform users about the issues and how to correct them. You can follow the UI suggestions mentioned in [RSS-ECOMM-2_10](./RSS-ECOMM-2_10.md) for effectively highlighting the errors. Some of the suggested methods include using colors, icon indicators, border styling, and tooltips or popovers to make error messages clear, concise, and visually accessible. 🌈✅ 12 | 13 | #### Acceptance Criteria 14 | 15 | - Proper error handling during the registration process 🛠️ 16 | - Display user-friendly error messages for_failed_registration_attempts, including the scenarios mentioned above 🗂️👀 17 | - Selected UI elements are used effectively to highlight failed registration attempt errors and improve user experience 🖌️🎨 18 | 19 | #### Useful Links and Resources 20 | 21 | 1. [toastify-js](https://github.com/apvarun/toastify-js#readme) 🍞🔥 22 | 23 | And remember, even though we're implementing error handling, "Every rose has its thorn", as the band Poison sings, and these errors are just another way to grow and learn! 🌹🎸 24 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint2/RSS-ECOMM-2_15.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-2_15: Enable users to select different billing and shipping addresses during registration (15 points) 🛒📝 2 | 3 | #### Description 4 | 5 | During the registration process, give users the ability to provide different addresses for billing and shipping. Users may also have the option to use the same address for both billing and shipping. Once registration is successful, the chosen addresses should be saved in the user's profile. 🏠💼 6 | 7 | #### Business Logic Solution Idea 8 | 9 | - In the registration form, include separate input fields for billing and shipping addresses. 📝 10 | - Additionally, provide a checkbox that users can tick if they want to use the same address for both billing and shipping. If checked, the application should copy the values from one set of fields to the other. ☑️ 11 | - When the user submits the form, send a request to the commercetools API to create a new customer. Include the billing and shipping address information in the request body, as described in the [commercetools CustomerDraft documentation](https://docs.commercetools.com/api/projects/customers#ctp:api:type:CustomerDraft). 🚀 12 | 13 | #### Visual Implementation Ideas 14 | 15 | - Clearly label the input fields for billing and shipping addresses. 🏷️ 16 | - Place the checkbox for using the same address for both purposes in a prominent location on the form. 💡 17 | 18 | #### Acceptance Criteria 19 | 20 | - Users can enter separate addresses for billing and shipping during the registration process. 🛒 21 | - Users can choose to use the same address for both billing and shipping. ✅ 22 | - The chosen addresses are saved in the user profile upon successful registration. 📥 23 | - The user interface clearly distinguishes between input fields for billing and shipping addresses. 📋 24 | - Proper integration with the commercetools API for storing billing and shipping address information. 🔗 25 | 26 | Remember the words of Journey, "Don't stop believin', hold on to that feelin'", so let's make this registration process a smooth journey for our users! 🎸🎶 27 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint2/RSS-ECOMM-2_16.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-2_16: Add a button or link on the registration page that allows users to navigate to the login page (5 points) 🔗 2 | 3 | #### Description 4 | 5 | On the registration page, add a button or link that redirects users to the login page if they already have an account. This button or link should be easily noticeable and accessible, adhering to the best user interface design practices. 🎯 6 | 7 | #### Visual Implementation Ideas 8 | 9 | - Position the button or link strategically on the page so that it's easily noticeable. It could be placed below the registration form or near the top of the page for easy access. 🗺️ 10 | - The button or link could say something like "Already have an account? Login". 💬 11 | - Use contrasting colors or fonts to make the button or link stand out. 🌈 12 | 13 | #### Acceptance Criteria 14 | 15 | - The registration page includes a clear and visible button or link. 📌 16 | - Upon clicking the button or link, the user is redirected to the login page. 🔄 17 | 18 | In the words of Queen's famous song, "Another One Bites the Dust" - each user redirected correctly is another victory in our quest for an efficient user interface. Let's rock this task! 🎸🔥 19 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint2/RSS-ECOMM-2_17.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-2_17: Add links to all functional pages on the main page (5 points) 🔗 2 | 3 | #### Description 4 | 5 | In order to make navigation easier for users, add links to all functional pages of the application on the main page. These links should include, but not be limited to, the login and registration pages. 🌐 6 | 7 | #### Visual Implementation Ideas 8 | 9 | - Position the links in a visible and accessible place on the main page. They could be placed in a top navigation bar or in a sidebar, depending on the layout of the application. 📍 10 | - Consider using descriptive labels for the links to help users understand where each link will take them. For instance, "Login" for the login page and "Register" for the registration page. 💬 11 | 12 | #### Acceptance Criteria 13 | 14 | - Links to all functional pages of the application are present on the main page, including the login and registration pages. ✅ 15 | - The links are clearly visible and accessible to users, making the navigation easy and intuitive. 🎯 16 | 17 | Just like the legendary rock band AC/DC said, "I'm back in black" - let's make sure our users always find their way back to the right pages with ease and style! 🎸🚀 18 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint2/RSS-ECOMM-2_18.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-2_18: Ensure all links on the main page correctly redirect to their respective pages (5 points) 🚀 2 | 3 | #### Description 4 | 5 | To maintain an effective navigation experience, ensure that all links on the main page accurately redirect the user to their corresponding pages without any errors. 🛣️ 6 | 7 | #### Acceptance Criteria 8 | 9 | - Each link on the main page correctly redirects to the corresponding page. ✅ 10 | - No error occurs during the redirection process. ❌ 11 | - The correct page content is displayed after the redirection. 🖥️ 12 | 13 | In the words of the legendary rock band Led Zeppelin, "Yes, there are two paths you can go by, but in the long run, there's still time to change the road you're on." Let's ensure our users always end up on the right path and our application's navigation serves as their flawless stairway to heaven! 🎸🛤️ 14 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint2/RSS-ECOMM-2_19.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-2_19: Implement Direct Navigation Links to Main, Login, and Registration Pages for Unauthorized Users (15 points) 🚀 2 | 3 | #### Description 4 | 5 | Implement direct navigation for unauthorized users to the main, login, and registration pages. This means that users should be able to access these pages directly by typing the respective URLs into the address bar of their web browser, without needing to navigate through other pages of the application first. Ensure these direct access links are working properly and take users to the correct pages. 🔗 6 | 7 | #### Acceptance Criteria 8 | 9 | - Users can directly access the main page by typing its URL into the browser's address bar. 🏠 10 | - Users can directly access the login page by typing its URL into the browser's address bar. 🔒 11 | - Users can directly access the registration page by typing its URL into the browser's address bar. 📝 12 | - Direct access to these pages does not cause any errors or issues with the application's functionality. ✔️ 13 | - Navigation using the implemented routing is smooth, without page refreshes (when applicable, e.g., in a Single Page Application). ⚙️ 14 | - Navigational features of the browser (such as the back and forward buttons) work correctly after using these direct access links. 🔄 15 | 16 | **Webinar Resources:** 17 | 18 | - [RS School 2023Q1 Classes, SPA. Part 1.](https://www.youtube.com/watch?v=sOlzPxs_Lg4) 19 | - [RS School 2023Q1 Classes, SPA. Part 2.](https://www.youtube.com/watch?v=njk5inZIwCc) 20 | 21 | As Willie Nelson puts it, "On the road again, I just can't wait to get on the road again." Let's make sure our users are always ready and eager to get 'on the road' to our application's pages with perfect direct navigation! 🎵🛣️ 22 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint2/RSS-ECOMM-2_21.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-2_21: Navigation to Login and Registration Pages for Unauthorized Users (15 points) 🔒🔑 2 | 3 | #### Description 4 | 5 | Enable easy navigation for unauthorized users between the login and registration pages. The links or buttons for these pages should be clear, visible, and accessible, following best practices for user interface design. 🖥️🖱️ 6 | 7 | #### Visual Implementation Ideas 8 | 9 | 1. **Text links**: Display the links for "Login" and "Register" as underlined text in a suitable place, ensuring good contrast against the background for easy visibility. 📝 10 | 2. **Styled buttons**: Create button elements with consistent background color, hover effect, and typography for the "Login" and "Register" links, making them visually distinct from other elements. 🖌️ 11 | 3. **Icons with labels**: Use recognizable icons (e.g., a key icon for Login and a plus icon for Register) accompanied by labels for each link. Make sure the icon and text are visually connected and have a consistent style. 🗝️➕ 12 | 13 | #### Acceptance Criteria 14 | 15 | - A clear and visible link or button for the login page is present for unauthorized users. 🔍 16 | - Clicking the link or button takes the user to the login page. 👆 17 | - A clear and visible link or button for the registration page is present for unauthorized users. 🔍 18 | - Clicking the link or button takes the user to the registration page. 👆 19 | 20 | Let's take a leaf out of Imagine Dragons' book and aim to make our users feel like they're "On Top of the World" with intuitive and easy navigation. As the song goes, "I've been waiting to smile, been holding it in for a while, Take it with me if I can, Been dreaming of this since a child. I'm on top of the world." 🎵🌍 21 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint2/RSS-ECOMM-2_22.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-2_22: Ability to Access the Main Page for All Users via Navigation Button or Logo 🖱️🌐 (5 points) 2 | 3 | #### Description 📜 4 | 5 | Ensure all users, regardless of authentication status, can navigate back to the main page of the application using a designated navigation button or logo. 🔄 6 | 7 | #### Visual Implementation Ideas 💡 8 | 9 | 1. **Main Page Navigation Button or Logo**: Include a clear and distinct button or a clickable logo 🖼️ in the header that directs users to the main page. These elements should be easily visible 👀 and accessible from all pages of the application. 10 | 11 | #### Acceptance Criteria ✅ 12 | 13 | - A navigation button or a clickable logo is present in the header that redirects users to the main page of the application. 🎯 14 | - The navigation button or logo contains a link to the main page URL. 📌 15 | - Clicking on the navigation button or logo takes the user to the main page from any other page in the application. 🚀 16 | 17 | In the immortal words of Queen: "Don't stop me now, I'm having such a good time, I'm having a ball." So, let's create a navigation feature that makes our users feel the same - unstoppable and having a blast on our application! 🎸🤘 18 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint2/RSS-ECOMM-2_23.md: -------------------------------------------------------------------------------- 1 | ### Issue RSS-ECOMM-2_23: Logout Functionality for Authorized Users 👤🔚 (5 points) 2 | 3 | #### Description 📜 4 | 5 | Add logout functionality for authorized users. Upon logging out, users should be redirected to the login or main page, which provides them the option to log in or register anew. 6 | 7 | #### Acceptance Criteria ✅ 8 | 9 | - An option to log out 🚪 is available for authorized users. 10 | - Upon logging out, users are redirected to the login or main page. 🔀 11 | - After logging out, users have the option to log in or register again. 🔁 12 | 13 | Let's make the log-out experience as smooth as possible, because remember, even if the user logs out, it's not "The End of the Road." Like Boyz II Men said, we can "Let go, let go, let go, let go...it's unnatural" but we know they will return to our application again! 🎵🎤 14 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint3/RSS-ECOMM-3_04.md: -------------------------------------------------------------------------------- 1 | ### 🎯 Issue RSS-ECOMM-3_04: Implement Sorting Functionality for Product List Using commercetools API (15 points) 2 | 3 | #### 📋 Description 4 | 5 | The application should offer users the ability to sort 🔢 the product list by various properties, such as price (ascending ↗️, descending ↘️) and name (alphabetically 🆎). This sorting functionality should be implemented using the commercetools API. 6 | 7 | #### 🔨 Implementation Details 8 | 9 | 1. **Designing the Sorting Interface:** Design a user-friendly and intuitive interface for sorting. This could be a dropdown menu with different sorting options. 10 | 2. **Sorting Functionality:** Implement functionality that updates the product list based on the selected sorting option. This will involve making new API requests with sorting parameters to the commercetools API. 11 | 12 | #### 🎨 Visual Implementation Ideas 13 | 14 | 1. **Sorting Options Layout:** Display sorting options in a clear and easily accessible manner. You could use a dropdown menu with labels clearly describing the sorting method. 15 | 2. **Active Sorting Indication:** Clearly indicate the currently selected sorting method. This could be done by highlighting the selected sorting option in the dropdown menu. 16 | 17 | #### ✅ Acceptance Criteria 18 | 19 | - Users can sort the product list by price (ascending, descending) and name (alphabetically). 20 | - Applying a sorting option updates the product list to reflect the chosen sorting method. This updating should be done using the commercetools API. 21 | - The currently active sorting method is clearly indicated to the user. 22 | 23 | #### 🔗 Useful Links and Resources 24 | 25 | 1. [Commercetools API documentation](https://docs.commercetools.com/api) 26 | 2. [Commercetools API endpoint for sorting product list](https://docs.commercetools.com/api/projects/productProjections#productprojection) 27 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint3/RSS-ECOMM-3_05.md: -------------------------------------------------------------------------------- 1 | ### 🎯 Issue RSS-ECOMM-3_05: Implement Search Functionality for Product List Using commercetools API (20 points) 2 | 3 | #### 📋 Description 4 | 5 | The application should have an efficient 🔎 and user-friendly search feature that allows users to quickly find and display relevant products based on their search query. This search functionality should be implemented using the commercetools API. 6 | 7 | #### 🔨 Implementation Details 8 | 9 | 1. **Search Input Field:** Provide a text input field 📝 where users can type their search queries. This field should be visible and easily accessible on the product list page. 10 | 2. **Search Functionality:** Implement a search function that uses the user's input to find and display matching products from the commercetools API. The function should handle different cases (e.g., uppercase 🔠, lowercase 🔡) and partial matches. 11 | 12 | #### 🎨 Visual Implementation Ideas 13 | 14 | 1. **Input Field Design:** The search input field should be visible and accessible. It should be designed in a way that suggests its function (e.g., with a magnifying glass 🔍 icon). 15 | 2. **Search Result Indication:** Display search results in a clear and organized manner. You might want to highlight the matching text in the product name or description. 16 | 17 | #### ✅ Acceptance Criteria 18 | 19 | - Users can type search queries into a text input field on the product list page. 20 | - Based on the user's input, matching products are fetched from the commercetools API and displayed on the product list page. 21 | 22 | #### 🔗 Useful Links and Resources 23 | 24 | 1. [Commercetools API documentation](https://docs.commercetools.com/api) 25 | 2. [Commercetools API endpoint for searching product list](https://docs.commercetools.com/api/projects/productProjections) 26 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint3/RSS-ECOMM-3_06.md: -------------------------------------------------------------------------------- 1 | ### 🎯 Issue RSS-ECOMM-3_06: Interactive Product Cards (10 points) 2 | 3 | #### 📋 Description 4 | 5 | Product cards 🃏 displayed on the product list page should change their appearance when the user hovers over them. This will enhance the browsing experience by providing visual feedback 📊 and making the interface more dynamic. 6 | 7 | #### 🔨 Implementation Details 8 | 9 | 1. **Product Card Design:** The product card should display key details about the product (such as name, image, and price 💰). It should be aesthetically pleasing and match the overall design theme of the website. 10 | 2. **Hover Effect:** When the user hovers over a product card, its appearance should change in a way that indicates it is being interacted with. This could be accomplished with changes in color 🎨, shadow, scale, or other visual properties. 11 | 12 | #### 🎨 Visual Implementation Ideas 13 | 14 | 1. **Color Change:** Alter the background color 🌈 of the product card on hover. 15 | 2. **Shadow Effect:** Add or increase a shadow effect to give the impression that the card is being lifted off the page. 16 | 3. **Scale Transformation:** Slightly increase the size of the product card to draw attention to it. 17 | 18 | #### ✅ Acceptance Criteria 19 | 20 | - Product cards on the product list page display key product details. 21 | - When a user hovers over a product card, its appearance changes to indicate it is being interacted with. 22 | 23 | #### 🔗 Useful Links and Resources 24 | 25 | 1. [CSS hover effects](https://www.w3schools.com/css/css3_transitions.asp) 26 | 2. [Creating 3D effects with CSS](https://www.w3schools.com/css/css3_3dtransforms.asp) 27 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint3/RSS-ECOMM-3_07.md: -------------------------------------------------------------------------------- 1 | ### 🎯 Issue RSS-ECOMM-3_07: Redirect to Detailed Product Page (5 points) 2 | 3 | #### 📋 Description 4 | 5 | When users click on a product card 🃏, they should be redirected 🔄 to a detailed product information page 📄 for the selected product. 6 | 7 | #### 🔨 Implementation Details 8 | 9 | 1. **Product Link:** Each product card should be a clickable entity 👆, ideally implemented as a link 🔗 that directs to the corresponding product detail page. The clickable area can be the entire card or just a part of it, such as the product's name or an individual "View Details" button. 10 | 11 | #### ✅ Acceptance Criteria 12 | 13 | - Clicking on a product card in the product list page directs the user to the detailed product page for the selected product. 14 | 15 | #### 🔗 Useful Links and Resources 16 | 17 | 1. [Creating hyperlinks in HTML](https://www.w3schools.com/html/html_links.asp) 18 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint3/RSS-ECOMM-3_12.md: -------------------------------------------------------------------------------- 1 | ### 🎯 Issue RSS-ECOMM-3_12: Implement Enlarged Image Modal (20 points) 2 | 3 | #### 📋 Description 4 | 5 | When users click on the product image 🖼️ in the Detailed Product Page, a modal window should pop up displaying an enlarged version of the image. This feature would allow users to view the product image in more detail. 6 | 7 | #### 🔨 Implementation Details 8 | 9 | 1. **Image Modal:** Implement a modal window that can display an enlarged version of a product image. Consider using a library or framework feature to handle modals, or build one from scratch. The modal should include a way for the user to close it, such as an "X" button in the corner. 10 | 2. **Image Click Event:** Attach an event listener to the product image that triggers the modal to open with the enlarged image when the image is clicked. 11 | 3. **Image Sizing:** Make sure that the enlarged image in the modal is significantly larger than the product image, but still fits within the viewport. You may need to limit the size of the image or make the modal scrollable if the image is too large. 12 | 13 | #### 🎨 Visual Implementation Ideas 14 | 15 | 1. **Modal Background:** When the modal opens, darken or blur the rest of the page behind the modal to help it stand out. 16 | 2. **Close Button:** Make sure the close button is easily visible and clearly indicates its purpose. 17 | 18 | #### ✅ Acceptance Criteria 19 | 20 | - The product image triggers a modal to open when it is clicked. 21 | - The modal displays an enlarged version of the product image. 22 | - There is a clear way for the user to close the modal. 23 | 24 | #### 🔗 Useful Links and Resources 25 | 26 | 1. [Modal windows in JavaScript](https://www.w3schools.com/howto/howto_css_modals.asp) 27 | 2. [Handling click events in JavaScript](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) 28 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint3/RSS-ECOMM-3_13.md: -------------------------------------------------------------------------------- 1 | ### 🎯 Issue RSS-ECOMM-3_13: Implement Image Slider in Enlarged Image Modal (15 points) 2 | 3 | #### 📋 Description 4 | 5 | The enlarged image modal should not only display a single product image 🖼️, but should also include a slider feature, enabling users to navigate through all product images fetched from the chosen API. This allows users to view all images of a product without having to close the modal. 6 | 7 | #### 🔨 Implementation Details 8 | 9 | 1. **Slider Setup:** Implement a slider within the enlarged image modal. This could be a custom-built slider or one from a library or framework. The slider should display one image at a time and have navigational controls to cycle through the images. 10 | 2. **Image Fetching:** Fetch all product images from the chosen API and include them in the slider. Ensure that these images are appropriately sized and formatted for the slider. 11 | 3. **Navigation Controls:** Implement controls (like arrows or dots) to allow users to navigate through the images in the slider. These controls should be easily visible and intuitive to use. 12 | 13 | #### 🎨 Visual Implementation Ideas 14 | 15 | 1. **Slider Design:** The slider should be clean and straightforward, focusing attention on the images themselves. Avoid unnecessary decorations or elements that might distract from the product images. 16 | 2. **Navigation Controls:** The navigation controls should be designed in a way that they do not obscure the images but are still easily accessible for the user. 17 | 18 | #### ✅ Acceptance Criteria 19 | 20 | - The enlarged image modal includes a slider that displays all product images fetched from the API. 21 | - Users can navigate through the images using the slider controls. 22 | 23 | #### 🔗 Useful Links and Resources 24 | 25 | 1. [Simple carousel example](https://www.youtube.com/watch?v=2xP-HahCtio) 26 | 2. [Swiper.js - Most modern mobile touch slider](https://swiperjs.com/) 27 | 3. [Images](https://docs.commercetools.com/api/projects/products#ctp:api:type:Image) 28 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint3/RSS-ECOMM-3_14.md: -------------------------------------------------------------------------------- 1 | ### 🎯 Issue RSS-ECOMM-3_14: Present User's Personal Information on User Profile Page (10 points) 2 | 3 | #### 📋 Description 4 | 5 | The User Profile page should display the user's personal information 📝. This is an essential feature that allows users to view and verify their personal details. It also enhances the personalization aspect of the user experience. 6 | 7 | #### 🔨 Implementation Details 8 | 9 | 1. **User Information:** Display the user's first name, last name, and date of birth 📅 on the User Profile page. 10 | 2. **User Addresses:** List all of the user's saved addresses 🏠 on the User Profile page. Each address entry should display all relevant information (street, city, state, zip code, country). Also, clearly indicate which address is set as the default billing address and which one is the default shipping address. Use appropriate labels or markers to distinguish them. 11 | 12 | #### 🎨 Visual Implementation Ideas 13 | 14 | 1. **User Info Layout:** You might want to divide the User Profile page into different sections for clarity. For example, one section could be dedicated to personal information (name, date of birth), while another could list user addresses. 15 | 2. **Highlighting Default Addresses:** Clearly differentiate the default shipping and billing addresses from the rest. This could be achieved by using different background colors, adding a label, or placing these addresses at the top of the list. 16 | 17 | #### ✅ Acceptance Criteria 18 | 19 | - The User Profile page displays the user's first name, last name, and date of birth. 20 | - The User Profile page lists all saved addresses for the user, with all relevant information for each address. 21 | - The default billing and shipping addresses are clearly indicated on the User Profile page. 22 | 23 | #### 🔗 Useful Links and Resources 24 | 25 | 1. [commercetools: Working with Customers](https://docs.commercetools.com/api/projects/customers) 26 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint3/RSS-ECOMM-3_16.md: -------------------------------------------------------------------------------- 1 | ### 🎯 Issue RSS-ECOMM-3_16: Implement Personal Information and Email Edit in User Profile Page (10 points) 2 | 3 | #### 📋 Description 4 | 5 | Users should have the capability to update their personal information 📝 and email address 📧. This feature increases user autonomy and lets users ensure their information is always up to date. 6 | 7 | #### 🔨 Implementation Details 8 | 9 | 1. **Edit Mode:** Utilize the "edit mode" ✏️ previously implemented on the User Profile page. 10 | 2. **Updating Personal Information and Email:** While in edit mode, users should be able to update their first name, last name, date of birth, and email address. 11 | 3. **Email Validation:** Implement a check to ensure that the email address entered by the user is valid and appropriately formatted. 12 | 4. **Form Validation:** Ensure the updated personal information meets the necessary criteria (non-empty name fields, valid date for date of birth, etc.). 13 | 14 | #### 🎨 Visual Implementation Ideas 15 | 16 | 1. **Highlight Editable Fields:** When in edit mode, highlight or otherwise visually indicate the fields that the user can edit to guide their attention. 17 | 18 | #### ✅ Acceptance Criteria 19 | 20 | - In the edit mode on the User Profile page, users can update their first name, last name, date of birth, and email address. 21 | - The system appropriately validates all changes, including the validity of the email address. 22 | 23 | #### 🔗 Useful Links and Resources 24 | 25 | 1. [commercetools: Update Customer by ID](https://docs.commercetools.com/api/projects/customers#update-customer-by-id) 26 | 2. [Form Validation with JavaScript](https://www.w3schools.com/js/js_validation.asp) 27 | 3. [Email Validation](https://www.w3schools.com/js/js_validation_api.asp) 28 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint3/RSS-ECOMM-3_20.md: -------------------------------------------------------------------------------- 1 | ### 🎯 Issue RSS-ECOMM-3_20: Implement Routing 🚦 and Browser Navigation 🌐 for User Profile Page (15 points) 2 | 3 | #### 📋 Description 4 | 5 | To enhance the user experience, implement routing and browser navigation that allows users to navigate to the User Profile page. The User Profile page should be restricted only to logged-in users. 6 | 7 | #### 🔨 Implementation Details 8 | 9 | 1. **User Profile Page:** This page should display information about a user's profile. Only logged-in users should have access to this page. 10 | 2. **Routing:** The URL in the browser should change when users navigate to the User Profile page and when they navigate away from it. The User Profile page should have a unique URL that can be directly accessed. 11 | 3. **Browser Navigation:** Ensure the proper functioning of the browser's navigation buttons (Back and Forward) when navigating to and from the User Profile page. 12 | 4. **Access Control:** The User Profile page should be accessible only to logged-in users. If a user who is not logged in tries to access the User Profile page, they should be redirected to the Login page. 13 | 14 | #### ✅ Acceptance Criteria 15 | 16 | - Navigating to and from the User Profile page changes the URL in the browser. 17 | - The User Profile page has a unique URL that can be directly accessed. 18 | - Directly accessing the unique URL for the User Profile page leads to the User Profile page, if the user is logged in. If the user is not logged in, they are redirected to the Login page. 19 | - The browser's Back and Forward buttons work correctly when navigating to and from the User Profile page. 20 | - Only logged-in users can access the User Profile page. 21 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint3/RSS-ECOMM-3_21.md: -------------------------------------------------------------------------------- 1 | ### 🎯 Issue RSS-ECOMM-3_21: Implement Navigation 🚦 to Catalog Page in Header (5 points) 2 | 3 | #### 📋 Description 4 | 5 | As a fundamental feature, all users, regardless of their status (logged in or not), should have the ability to navigate to the Catalog page using the navigation options provided in the header of the website. 6 | 7 | #### 🔨 Implementation Details 8 | 9 | 1. **Navigation Option:** Add a navigation option to the header that directs users to the Catalog page. This could be a text link, an icon, or a combination of both. 10 | 2. **Responsive Design:** Ensure that the navigation option is visible and accessible on different devices and screen sizes. 11 | 12 | #### 🎨 Visual Implementation Ideas 13 | 14 | 1. **Visual Cues:** The navigation option should have some visual indication (like underlining or color change) when hovered or clicked to provide feedback to the user. 15 | 2. **Iconography:** If using an icon, choose or design one that clearly signifies the Catalog page. 16 | 17 | #### ✅ Acceptance Criteria 18 | 19 | - A navigation option to the Catalog page is present in the website's header. 20 | - Clicking on the navigation option redirects the user to the Catalog page. 21 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint3/RSS-ECOMM-3_22.md: -------------------------------------------------------------------------------- 1 | ### 🎯 Issue RSS-ECOMM-3_22: Implement User Profile Navigation 🚦 in Header (5 points) 2 | 3 | #### 📋 Description 4 | 5 | In order to provide users with easy access to their Profile page, a User Profile link or button should be added to the header of the site. This navigation option should be visible only to logged-in users. 6 | 7 | #### 🔨 Implementation Details 8 | 9 | 1. **Navigation Option:** Add a User Profile link or button to the header that directs logged-in users to their Profile page. This could be a text link, an icon, or a combination of both. This option should be hidden from users who are not logged in. 10 | 2. **Responsive Design:** Ensure that the User Profile link or button is visible and accessible on different devices and screen sizes. 11 | 12 | #### 🎨 Visual Implementation Ideas 13 | 14 | 1. **Visual Cues:** The User Profile link or button should have some visual indication (like underlining or color change) when hovered or clicked to provide feedback to the user. 15 | 2. **Iconography:** If using an icon, choose or design one that clearly signifies the User Profile page. 16 | 17 | #### ✅ Acceptance Criteria 18 | 19 | - A User Profile link or button is present in the website's header only for logged-in users. 20 | - Clicking on the User Profile link or button redirects the user to their Profile page. 21 | - Users who are not logged in do not see the User Profile link or button. 22 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint4/RSS-ECOMM-4_01.md: -------------------------------------------------------------------------------- 1 | ### 🛒 Issue RSS-ECOMM-4_01: Add "Add to Cart" Button on Product Cards (10 points) 2 | 3 | #### 📝 Description 4 | 5 | To streamline the user's 🛍️ shopping experience, include an "Add to Cart" 🛒 button on each product card. This button doesn't have to perform any action at this stage. Its purpose is to provide a user interface that matches common e-commerce practices. If the product is already in the shopping cart, the "Add to Cart" button should be disabled. 6 | 7 | #### 🔨 Implementation Details 8 | 9 | 1. **Add to Cart Button:** Incorporate an "Add to Cart" 🛒 button on each product card. This button should be clearly visible and intuitively placed to encourage users to add items to their cart. The button could be a traditional button with a label or an icon that represents adding an item to the cart. 10 | 11 | #### 🎨 Visual Implementation Ideas 12 | 13 | 1. **Icon Use:** Consider using an icon for the "Add to Cart" 🛒 button, such as a shopping cart or a ➕ plus sign. Icons can help users quickly understand the button's function and save space on the product card. 14 | 2. **Color Contrast:** If you choose to use a traditional button with a label, consider using a contrasting color to make it stand out on the product card. 15 | 3. **Button Position:** Place the "Add to Cart" button in a prominent position on the product card, such as below the product image or next to the product description. 16 | 17 | #### ✅ Acceptance Criteria 18 | 19 | - Each product card has an "Add to Cart" 🛒 button, which can be a traditional button or an icon. 20 | - If the product is already in the shopping cart, the "Add to Cart" button is inactive or provides a relevant notice. 21 | 22 | #### 📚 Useful Links and Resources 23 | 24 | 1. [Creating buttons with HTML](https://www.w3schools.com/tags/tag_button.asp) 25 | 2. [Button Styling in CSS](https://www.w3schools.com/css/css3_buttons.asp) 26 | 3. [Font Awesome - Shopping Cart Icon](https://fontawesome.com/v5.15/icons/shopping-cart) 27 | 4. [flaticon - Shopping Cart Icon](https://www.flaticon.com/free-icons/cart) 28 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint4/RSS-ECOMM-4_03.md: -------------------------------------------------------------------------------- 1 | # ⏱ Issue RSS-ECOMM-4_03: Implement Efficient Loading of Products on Catalog Page (25 points) 2 | 3 | ## 📝 Description 4 | 5 | For an efficient and user-friendly experience, implement a technique such as lazy loading, pagination, or infinite scroll on the Catalog page. This will allow a large number of products to load and display without causing significant delays or 🚀 performance issues. 6 | 7 | ## 🔨 Implementation Details 8 | 9 | 1. **Lazy Loading, Pagination, or Infinite Scroll:** Choose one of these techniques to implement on the Catalog page. This will improve the load performance and the user experience when viewing a large number of products. 10 | 2. **API Integration:** Leverage the commercetools API to retrieve product data. Fetch data as needed based on the chosen loading technique. 11 | 12 | ## 🎨 Visual Implementation Ideas 13 | 14 | 1. **Loading Indicators:** Implement loading indicators that provide visual feedback while loading products. This could be a spinner, a progress bar, or a skeleton screen. 15 | 2. **Navigation Controls:** If implementing pagination, provide clear navigation controls for the user to navigate through different pages. 16 | 17 | ## ✅ Acceptance Criteria 18 | 19 | - The Catalog page implements either lazy loading, pagination, or infinite scroll to efficiently load and display products. 20 | - Products are loaded and displayed without significant delays or performance issues. 21 | - Products are loaded from the commercetools API. 22 | 23 | ## 🌐 Useful Links and Resources 24 | 25 | 1. [Commercetools Product Query Parameters](https://docs.commercetools.com/api/projects/products-search#query-parameters) 26 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint4/RSS-ECOMM-4_07.md: -------------------------------------------------------------------------------- 1 | ### 🛒 Issue RSS-ECOMM-4_07: Add Product to Cart Functionality for Non-Duplicated Products (15 points) 2 | 3 | #### 📋 Description 4 | 5 | To prevent duplication and increase user convenience, only allow a product to be added to the shopping cart if it is not already present in it. If the product is not already in the user's shopping cart, provide an "Add to Cart" button that adds the product with the selected options to their cart. 6 | 7 | #### 🔨 Implementation Details 8 | 9 | 1. **Product Duplication Check:** Before adding a product to the shopping cart, verify whether the product is already present in the user's shopping cart. 10 | 2. **"Add to Cart" Button:** If the product is not already in the shopping cart, the "Add to Cart" button should be active and clickable. When clicked, this button should add the product with the selected options to the shopping cart. 11 | 3. **API Integration:** Use the commercetools to manage the shopping cart and add products to it. 12 | 13 | #### ✅ Acceptance Criteria 14 | 15 | - The application checks whether a product is already in the user's shopping cart before adding it. 16 | - If the product is not already in the shopping cart, the "Add to Cart" button is active and can add the product to the cart. 17 | - If the product is already in the shopping cart, the "Add to Cart" button is inactive or provides a relevant notice. 18 | 19 | #### 🌐 Useful Links and Resources 20 | 21 | 1. [Commercetools API Documentation](https://docs.commercetools.com/api) 22 | 2. [Commercetools Cart and Order API](https://docs.commercetools.com/api/projects/carts) 23 | 3. [Commercetools Get Cart](https://docs.commercetools.com/api/projects/carts#get-cart-by-customer-id) 24 | 4. [Commercetools My Carts](https://docs.commercetools.com/api/projects/me-carts) 25 | 5. [Commercetools Create Cart](https://docs.commercetools.com/api/projects/carts#create-cart) 26 | 6. [Commercetools Add Line Item](https://docs.commercetools.com/api/projects/carts#add-lineitem) 27 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint4/RSS-ECOMM-4_08.md: -------------------------------------------------------------------------------- 1 | ### 🛒🗑️ Issue RSS-ECOMM-4_08: Remove Product from Cart Functionality (15 points) 2 | 3 | #### 📋🔍 Description 4 | 5 | To enhance user experience and give more control over their shopping cart 🛒, allow users to remove a product directly from the product page if it is already in their shopping cart. 6 | 7 | #### 🔨🧰 Implementation Details 8 | 9 | 1. **Product Presence Check 🕵️‍♂️:** Check if the product is already present in the user's shopping cart. 10 | 2. **"Remove from Cart" Button ➖🛒:** If the product is already in the shopping cart, provide an active and clickable "Remove from Cart" button on the product page. Clicking this should remove the product from the user's shopping cart. 11 | 3. **API Integration 🔄💻:** Use the chosen API to manage the shopping cart and remove products from it. 12 | 13 | #### ✅🎯 Acceptance Criteria 14 | 15 | - The application correctly identifies whether a product is already in the user's shopping cart when viewing the product page. 16 | - If the product is already in the shopping cart, a "Remove from Cart" button is visible and active on the product page. 17 | - Clicking the "Remove from Cart" button triggers an API call to remove the corresponding product from the user's shopping cart. 18 | - After successful removal, the user receives a confirmation message or visual cue. 19 | - The application handles API errors gracefully, showing appropriate error messages if the removal operation fails. 20 | 21 | #### 🌐🔗 Useful Links and Resources 22 | 23 | 1. [Commercetools API Documentation 📚](https://docs.commercetools.com/api) 24 | 2. [Commercetools Cart and Order API 🛒🧾](https://docs.commercetools.com/api/projects/carts) 25 | 3. [Update Cart Actions 🗑️🔢](https://docs.commercetools.com/api/projects/me-carts#update-actions) 26 | 4. [Commercetools Get Cart 🛒👀](https://docs.commercetools.com/api/projects/me-carts#get-active-cart) 27 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint4/RSS-ECOMM-4_10.md: -------------------------------------------------------------------------------- 1 | ### 🛒📲 Issue RSS-ECOMM-4_10: Fetch and Display Cart Items Using commercetools API (25 points) 2 | 3 | #### 📋🔍 Description 4 | 5 | In an effort to provide a comprehensive summary 📜 of the items added to the shopping cart 🛒, we'll utilize the commercetools API to fetch and display 🖥️ a list of these items. This list should include essential details 🏷️ such as the name, image 🖼️, and price 💰 of each item, both individually and in total quantity. 6 | 7 | #### ⚙️💡 Implementation Details 8 | 9 | 1. **API Integration 🔗:** Make use of the commercetools API to fetch the list of items 📋 present in the user's shopping cart 🛒. 10 | 2. **Display of Cart Items 🛍️:** Present this list of items on the user interface 🖥️, making sure that the name, image, and individual price, as well as the total cost 💲 for all quantities of each item, are included. 11 | 12 | #### 🎯✅ Acceptance Criteria 13 | 14 | - The user interface displays a list of items in the shopping cart 🛍️. 15 | - Each item in the list includes essential details 🏷️ such as the name, image 🖼️, individual price 💰, and the total cost 💲 for all quantities of that item. 16 | - The list of items is fetched from the commercetools API 🔗. 17 | 18 | #### 🔗📚 Useful Links and Resources 19 | 20 | 1. [Commercetools API Documentation 📘](https://docs.commercetools.com/api) 21 | 2. [Commercetools Cart and Order API 🛒](https://docs.commercetools.com/api/projects/carts) 22 | 3. [Commercetools Get Cart 🔍](https://docs.commercetools.com/api/projects/carts#get-cart-by-customer-id) 23 | 4. [Commercetools My Carts 🛍️](https://docs.commercetools.com/api/projects/me-carts) 24 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint4/RSS-ECOMM-4_11.md: -------------------------------------------------------------------------------- 1 | ### 🔢🔄 Issue RSS-ECOMM-4_11: Modify Quantity of Products in Cart (15 points) 2 | 3 | #### 📝📚 Description 4 | 5 | To give users 🧑‍💻 flexibility in managing their shopping cart 🛒, implement a feature that allows them to modify the quantity 🔢 of each product in their cart. This feature should also integrate with the commercetools API 🔗 to update the corresponding data 🔄 and recalculate the total cost 💲 accordingly. 6 | 7 | #### 💻🔧 Implementation Details 8 | 9 | 1. **Quantity Modification Interface 🔢🖱️:** Include an interface element (like an input box 📥 or spinner 🔄) that allows users to change the quantity of a product in their cart. 10 | 2. **Data Updating 🔄:** When a user changes the quantity of a product, the application should make the necessary API call 🔗 to update the cart data in the backend. 11 | 3. **Total Cost Recalculation 💲🔄:** After the cart data is updated, recalculate the total cost of the cart and update the total cost displayed to the user. 12 | 13 | #### ✅🎯 Acceptance Criteria 14 | 15 | - Users can modify the quantity of each product in their cart 🛒. 16 | - The application updates the cart data 🔄 using the commercetools API 🔗 when the quantity of a product is modified. 17 | - The application recalculates and displays the updated total cost 💲 when the quantity of a product is modified. 18 | 19 | #### 🔗📚 Useful Links and Resources 20 | 21 | 1. [Commercetools API Documentation 📘](https://docs.commercetools.com/api) 22 | 2. [Commercetools Cart and Order API 🛒](https://docs.commercetools.com/api/projects/carts) 23 | 3. [Commercetools Update Cart 🔃](https://docs.commercetools.com/api/projects/carts#update-cart) 24 | 4. [Commercetools My Carts 🛍️](https://docs.commercetools.com/api/projects/me-carts) 25 | 5. [Commercetools Change LineItem Quantity 🔢](https://docs.commercetools.com/api/projects/carts#change-lineitem-quantity) 26 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint4/RSS-ECOMM-4_12.md: -------------------------------------------------------------------------------- 1 | ### 🧹🛒 Issue RSS-ECOMM-4_12: Implement "Remove from Cart" Button (15 points) 2 | 3 | #### 📝 Description 4 | 5 | To improve user experience in managing their shopping cart 🛒, provide a "Remove from Cart" button for each product in the cart. This button should allow users to remove items from the cart and update the cart data using the commercetools API accordingly. 6 | 7 | #### 💻 Implementation Details 8 | 9 | 1. **"Remove from Cart" Button 🧹🛒:** This button should be clearly visible and intuitive to use. It should be located next to each item in the shopping cart. 10 | 2. **Button Functionality 🎯:** When clicked, this button should trigger an action to remove the corresponding product from the user's shopping cart, and then update the shopping cart using the commercetools API. 11 | 12 | #### ✅ Acceptance Criteria 13 | 14 | - Each product in the shopping cart has a "Remove from Cart" button. 15 | - Clicking the "Remove from Cart" button removes the product from the shopping cart and updates the cart data using the commercetools API. 16 | 17 | #### 🔗 Useful Links and Resources 18 | 19 | 1. [Commercetools API Documentation](https://docs.commercetools.com/api) 20 | 2. [Commercetools Cart and Order API](https://docs.commercetools.com/api/projects/carts) 21 | 3. [Commercetools Remove Line Item](https://docs.commercetools.com/api/projects/carts#remove-lineitem) 22 | 4. [Commercetools My Carts](https://docs.commercetools.com/api/projects/me-carts) 23 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint4/RSS-ECOMM-4_13.md: -------------------------------------------------------------------------------- 1 | ### 🧮💰 Issue RSS-ECOMM-4_13: Recalculate Total Cost Upon Cart Updates (15 points) 2 | 3 | #### 📝📚 Description 4 | 5 | To ensure that users always have accurate information about their purchases 💳, the total cost of the items in the shopping cart should be automatically recalculated 🔄🧮 whenever users modify product quantities or remove items from the cart. The updated data should be fetched from the commercetools API 🌐. 6 | 7 | #### 💻🔧 Implementation Details 8 | 9 | 1. **Recalculate Total Cost 🔄🧮:** Every time a user modifies the quantity of a product or removes a product from the cart, the total cost should be recalculated to reflect these changes. 10 | 2. **Use API Data 🌐:** The updated total cost should be calculated using the most recent data from the commercetools API. 11 | 12 | #### ✅🎯 Acceptance Criteria 13 | 14 | - The total cost of the items in the shopping cart is automatically recalculated and updated every time a user modifies product quantities or removes items from the cart. 15 | - The total cost reflects the most recent data from the commercetools API. 16 | 17 | #### 🔗📚 Useful Links and Resources 18 | 19 | 1. [Commercetools API Documentation](https://docs.commercetools.com/api) 20 | 2. [Commercetools Cart and Order API](https://docs.commercetools.com/api/projects/carts) 21 | 3. [Commercetools My Carts](https://docs.commercetools.com/api/projects/me-carts) 22 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint4/RSS-ECOMM-4_14.md: -------------------------------------------------------------------------------- 1 | ### 🗨️🛒 Issue RSS-ECOMM-4_14: Display Message for Empty Shopping Cart (5 points) 2 | 3 | #### 📝📚 Description 4 | 5 | To enhance user experience 🚀, display a clear and friendly message 🗨️ when the shopping cart is empty. This helps to communicate the state of the shopping cart to the user and can also encourage them to add items to their cart 🛍️. 6 | 7 | #### 💻🔧 Implementation Details 8 | 9 | 1. **Empty Cart Message 🗨️🛒:** If the shopping cart does not contain any items, display a message indicating that the cart is empty. The message should be clearly visible and located within the area where cart items would typically be displayed. 10 | 2. **User-friendly Language 📝🙂:** Use friendly, inviting language in the empty cart message to encourage users to start shopping. 11 | 12 | #### ✅🎯 Acceptance Criteria 13 | 14 | - A clear and friendly message is displayed when the shopping cart is empty. 15 | - The message is clearly visible and located within the area where cart items would typically be displayed. 16 | 17 | #### 🔗📚 Useful Links and Resources 18 | 19 | 1. [Visual Implementation Ideas](https://dribbble.com/tags/empty%20basket) 20 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint4/RSS-ECOMM-4_15.md: -------------------------------------------------------------------------------- 1 | ### 🔗🛒 Issue RSS-ECOMM-4_15: Add Catalog Link to Empty Cart Message (5 points) 2 | 3 | #### 📝📚 Description 4 | 5 | To enhance the shopping experience 🚀 and encourage continued exploration of your website 🌐, include a link to the product catalog 📚 within the message displayed when the shopping cart is empty. 6 | 7 | #### 💻🔧 Implementation Details 8 | 9 | 1. **Catalog Link 🔗📚:** Incorporate a hyperlink to the product catalog within the empty cart message. This provides a quick and easy way for users to return to the product list and continue shopping. 10 | 11 | #### ✅🎯 Acceptance Criteria 12 | 13 | - The message displayed when the shopping cart is empty includes a link to the product catalog. 14 | - The link is functional and directs users to the product catalog when clicked. 15 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint4/RSS-ECOMM-4_16.md: -------------------------------------------------------------------------------- 1 | ### 💰🔖 Issue RSS-ECOMM-4_16: Implement Promo Code Application Feature (15 points) 2 | 3 | #### 📝📚 Description 4 | 5 | For an engaging and user-friendly shopping experience 🚀, develop a feature that enables users to apply promo codes to their orders 💸. The application of these promo codes should offer discounts on eligible items 🛍 and appropriately adjust the total cost of the cart 🛒 using the commercetools API. Information about active promo codes should be presented on the main page 📋. 6 | 7 | #### 💻🔧 Implementation Details 8 | 9 | 1. **Promo Code Display 🎫:** Present active promo codes on the main page to increase visibility and encourage their use 🙌. 10 | 2. **Promo Code Input Field 🖊:** Include a field where users can input their promo codes. This could be a text box, for instance 📝. 11 | 3. **Apply Button 🆗:** Add an 'Apply' button next to the promo code input field. When a user clicks on this button after entering their promo code, the discount associated with the promo code should be applied to eligible items in the cart 💰. 12 | 4. **API Integration 🌐:** Connect the promo code application feature to the commercetools API to ensure the total cost of the cart is updated correctly when a promo code is applied 💹. 13 | 14 | #### ✅🎯 Acceptance Criteria 15 | 16 | - The main page displays active promo codes 🎫. 17 | - The cart includes an input field for promo codes and an 'Apply' button ✔️. 18 | - When a valid promo code is entered and the 'Apply' button is clicked, the total cost of the cart is updated to reflect the discount associated with the promo code 💰. 19 | - The total cost of the cart, including any discounts from promo codes, is calculated and displayed correctly 💲. 20 | 21 | #### 🔗📚 Useful Links and Resources 22 | 23 | 1. [Commercetools Discount Codes API](https://docs.commercetools.com/api/projects/discountCodes) 24 | 2. [Commercetools Cart Discounts API](https://docs.commercetools.com/api/projects/cartDiscounts) 25 | 3. [Commercetools Add Discount Code API](https://docs.commercetools.com/api/projects/carts#add-discountcode) 26 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint4/RSS-ECOMM-4_17.md: -------------------------------------------------------------------------------- 1 | ### 💵💰 Issue RSS-ECOMM-4_17: Display Original and Discounted Prices After Promo Code Application (5 points) 2 | 3 | #### 📝📚 Description 4 | 5 | When a promo code is applied 💸, the system should clearly display both the original 💵 and discounted prices 💰 to the user. This feature improves user experience by explicitly showing the savings achieved by using the promo code 💼. The two prices must be visually distinct 👀 to avoid confusion 🚫. 6 | 7 | #### 💻🔧 Implementation Details 8 | 9 | 1. **Original Price 💵:** Display the original total price before the promo code was applied. This price can be crossed out ❌ or dimmed to indicate that it's not the current total. 10 | 2. **Discounted Price 💰:** Display the new total after the promo code is applied. This price should be more prominent than the original price to make it clear that it's the current total 🌟. 11 | 3. **Visual Distinction 🌈:** Use color, font size, or other visual cues to distinguish between the original and discounted prices 🎨. 12 | 13 | #### ✅🎯 Acceptance Criteria 14 | 15 | - Both the original price 💵 and the discounted price 💰 are displayed when a promo code is applied 💸. 16 | - The two prices are visually distinct 👀. 17 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint4/RSS-ECOMM-4_18.md: -------------------------------------------------------------------------------- 1 | ### 🛒🗑️ Issue RSS-ECOMM-4_18: Implement "Clear Shopping Cart" Button (10 points) 2 | 3 | #### 📝📚 Description 4 | 5 | Implement a feature that allows users to clear all items from their shopping cart at once 🛍️. This feature should be easy to access 🖱️ but designed to prevent accidental usage 🚫. 6 | 7 | #### 💻🔧 Implementation Details 8 | 9 | 1. **"Clear Shopping Cart" Button 🗑️:** This button should be prominently displayed within the user's shopping cart interface 🛒. It should be clearly labeled 🏷️ to avoid any confusion about its functionality. 10 | 2. **Functionality 🚀:** When clicked, the "Clear Shopping Cart" button should remove all items from the user's shopping cart and update the cart data in the commercetools API 🔄. 11 | 12 | #### ✅🎯 Acceptance Criteria 13 | 14 | - The shopping cart interface includes a "Clear Shopping Cart" button 🗑️. 15 | - Clicking the "Clear Shopping Cart" button removes all items from the shopping cart 🛒. 16 | - A confirmation prompt appears when the "Clear Shopping Cart" button is clicked 🚦. 17 | 18 | #### 📘🔗 Useful Links and Resources 19 | 20 | 1. [Commercetools Delete Cart](https://docs.commercetools.com/api/projects/carts#delete-cart) 21 | 2. [Creating buttons with HTML](https://www.w3schools.com/tags/tag_button.asp) 22 | 3. [Button Styling in CSS](https://www.w3schools.com/css/css3_buttons.asp) 23 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint4/RSS-ECOMM-4_19.md: -------------------------------------------------------------------------------- 1 | ### 📸💼 Issue RSS-ECOMM-4_19: Craft a Detailed Team Description with Photos (25 points) 2 | 3 | #### 📝📚 Description 4 | 5 | Introduce your development team 🏢 in a detailed manner. The introduction should not only highlight each team member's contributions to the project 📝 and the effective collaboration methods that led to the creation of the successful product 💡, but also present each member's name 📛, job title or role 🎯, a short bio 📄, a link to their GitHub profile 🌐, and a clear and relevant photo 🖼️. 6 | 7 | #### 💻🔧 Implementation Details 8 | 9 | 1. **Team Members 👥:** List the names 📛, roles/job titles 🎯, a short bio 📄, a clear and relevant photo 🖼️, and a link to the GitHub profile 🌐 of each team member. 10 | 2. **Contributions 🏗️:** Highlight each team member's significant contributions to the project. These could include specific features implemented 💻, challenges overcome 🧗, or innovative ideas contributed 💡. 11 | 3. **Collaboration 🤝:** Describe how the team effectively collaborated to carry out the project and achieve a successful outcome 🎉. 12 | 13 | #### ✅🎯 Acceptance Criteria 14 | 15 | - A detailed introduction of the development team is created and placed in the About Us page 🗺️. 16 | - The introduction includes the names 📛, roles/job titles 🎯, a short bio 📄, a clear and relevant photo 🖼️, and a link to the GitHub profile 🌐 of each team member. 17 | - Each member's significant contributions to the project are highlighted in the introduction 🏗️. 18 | - The description demonstrates how the team's effective collaboration led to the project's successful completion 🎉. 19 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint4/RSS-ECOMM-4_20.md: -------------------------------------------------------------------------------- 1 | ### 🏫🔗 Issue RSS-ECOMM-4_20: Incorporate and Link RS School Logo on the About Us Page (10 points) 2 | 3 | #### 📝📚 Description 4 | 5 | Prominently feature the RS School logo 🏫 on the About Us page, ensuring it is clearly visible 👀 and recognizable. Additionally, make the logo clickable, linking it to the school's website 🌐, providing users an opportunity to learn more about the educational program 📚. 6 | 7 | #### 💻🔧 Implementation Details 8 | 9 | 1. **RS School Logo 🏫:** Place the RS School logo in a noticeable location on the About Us page. The logo should be easily identifiable to users 👀. 10 | 2. **Logo Link 🔗:** Make the logo a clickable entity that redirects to the RS School's website when clicked 🖱️. 11 | 12 | #### ✅🎯 Acceptance Criteria 13 | 14 | - The RS School logo 🏫 is prominently displayed on the About Us page. 15 | - The logo is a clickable link 🔗 that leads to the RS School's website. 16 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint4/RSS-ECOMM-4_21.md: -------------------------------------------------------------------------------- 1 | ### 🧭 Issue RSS-ECOMM-4_21: Implement Routing and Browser Navigation to Basket Page (10 points) 2 | 3 | #### 📝🛍️ Description 4 | 5 | Implement routing to allow seamless navigation 🧭 to the Basket page 🛒 from all other pages. The Basket page should be accessible whether the user is logged in 👤 or not and should support browser navigation buttons (forward and back). 6 | 7 | #### 💻🔧 Implementation Details 8 | 9 | 1. **Basket Page 🛒:** This page should display the items currently in the user's basket. It should be accessible from all other pages in the application. 10 | 2. **Routing 🚏:** The URL in the browser should change when users navigate to the Basket page. The Basket page should have a unique URL that can be directly accessed. 11 | 3. **Browser Navigation Buttons ⏪⏩:** Implement support for browser navigation buttons. If a user navigates to a different page, the back button should take the user to the previously viewed page. The forward button should work correspondingly after using the back button. 12 | 4. **Public Accessibility 👥:** The Basket page should be accessible whether the user is logged in or not. This page should not require authentication. 13 | 14 | #### ✅🎯 Acceptance Criteria 15 | 16 | - Clicking on a navigation element directing to the Basket page takes the user to the Basket page 🛒. 17 | - Navigating to the Basket page changes the URL in the browser 🌐. 18 | - The Basket page has a unique URL that can be directly accessed 🚏. 19 | - Directly accessing the Basket page's unique URL leads to the Basket page 🛒. 20 | - The browser's back and forward buttons work as expected, enabling the user to navigate through their history of visited pages ⏪⏩. 21 | - The Basket page is accessible regardless of the user's authentication state 👥. 22 | 23 | #### 🔗 Useful Links and Resources 24 | 25 | 1. [Using the HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) 26 | 2. [Introduction to routing in React](https://reactrouter.com/en/6.14.1/start/tutorial) 27 | 3. [Client-side Routing in Angular](https://angular.io/guide/router) 28 | 4. [Vue Router](https://router.vuejs.org/) 29 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint4/RSS-ECOMM-4_23.md: -------------------------------------------------------------------------------- 1 | ### 🛒 Issue RSS-ECOMM-4_23: Implement a Basket Icon in Header Navigation (15 points) 2 | 3 | #### 📝👥 Description 4 | 5 | Implement a basket icon 🛒 in the header navigation for easy access to the shopping cart. The icon should be clearly visible and serve as a link to the Basket page, allowing users to review the items they've added to their cart 📦. 6 | 7 | #### 💻🔧 Implementation Details 8 | 9 | 1. **Basket Icon 🛒:** Include a clearly visible basket icon in the header navigation. The icon should be easily identifiable and match the overall design of the website 🌐. 10 | 2. **Link to Basket Page 🚏:** The basket icon should serve as a direct link to the Basket page. When a user clicks on the icon, they should be taken to the Basket page where they can see the items in their cart 📦. 11 | 3. **Quantity Indicator 🧮:** If possible, include an indicator near the basket icon showing the number of items in the user's cart. This number should update in real-time as users add or remove items from their cart 🔄. 12 | 13 | #### ✅🎯 Acceptance Criteria 14 | 15 | - A basket icon is included in the header navigation 🛒. 16 | - The basket icon is clearly visible and fits the overall design of the website 🌐. 17 | - Clicking on the basket icon takes the user directly to the Basket page 🚏. 18 | - If implemented, the quantity indicator near the basket icon accurately reflects the number of items in the user's cart and updates in real-time 🧮🔄. 19 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/Sprints/Sprint4/RSS-ECOMM-4_24.md: -------------------------------------------------------------------------------- 1 | ### 🖼️ Issue RSS-ECOMM-4_24: Implement About Us Page Icon in Header Navigation (5 points) 2 | 3 | #### 📝👥 Description 4 | 5 | Incorporate an icon 🖼️ or link 🔗 to the About Us page in the header navigation. This icon or link should be clearly visible and provide users with a convenient way to navigate to the About Us page to learn more about the development team 👥 and the project 📝. 6 | 7 | #### 💻🔧 Implementation Details 8 | 9 | 1. **About Us Icon/Link 🖼️🔗:** Place an icon or link to the About Us page in the header navigation. This element should be easily recognizable and align with the overall website design 🌐. 10 | 2. **Link to About Us Page 🚏:** The icon or link should lead directly to the About Us page when clicked 🖱️. 11 | 12 | #### ✅🎯 Acceptance Criteria 13 | 14 | - An icon or link to the About Us page is included in the header navigation 🖼️🔗. 15 | - The icon or link is clearly visible and fits the overall design of the website 🌐. 16 | - Clicking on the icon or link takes the user directly to the About Us page 🚏. 17 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/archive/Catalog/RSS-ECOMM-4_04.md: -------------------------------------------------------------------------------- 1 | ### 🖱️ Issue RSS-ECOMM-4_04: Display Product Details in Modal Window on Hover (20 points) 2 | 3 | #### 📋 Description 4 | 5 | Improve the shopping experience by providing more product information upfront. Display a modal window with the product name, and description when a user hovers over a product image. 6 | 7 | #### 🔨 Implementation Details 8 | 9 | 1. **Product Hover:** When a user hovers over a product image on the Catalog page, display a modal window. 10 | 2. **Modal Window:** The modal window should display the product's image, name, description and other information about the product. 11 | 12 | #### ✅ Acceptance Criteria 13 | 14 | - When a user hovers over a product image on the Catalog page, a modal window is displayed. 15 | - The modal window displays the product's name and description. 16 | 17 | #### 🌐 Useful Links and Resources 18 | 19 | 1. [React Modal](https://reactcommunity.org/react-modal/) 20 | 2. [Vue.js Modal](https://vuejs.org/v2/examples/modal.html) 21 | 3. [Angular Material Dialog](https://material.angular.io/components/dialog/overview) 22 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/archive/Catalog/RSS-ECOMM-4_05.md: -------------------------------------------------------------------------------- 1 | ### 🖼️ Issue RSS-ECOMM-4_05: Implement Image Slider Inside Product Modal Window (15 points) 2 | 3 | #### 📋 Description 4 | 5 | To enhance the product browsing experience, allow users to navigate through all product images using a slider within the modal window that pops up when hovering over a product image. 6 | 7 | #### 🔨 Implementation Details 8 | 9 | 1. **Image Slider:** Inside the modal window, implement an image slider that allows users to navigate through all images associated with the product. 10 | 2. **Navigation:** The slider should have intuitive controls (such as arrows or swipe gestures) for navigating through images. 11 | 12 | #### ✅ Acceptance Criteria 13 | 14 | - The modal window that pops up on product hover contains an image slider. 15 | - Users can navigate through all images of the product using the slider. 16 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/archive/Catalog/RSS-ECOMM-4_06.md: -------------------------------------------------------------------------------- 1 | ### 🛍️ Issue RSS-ECOMM-4_06: Implement "Add to Cart" Button in Product Modal Window (10 points) 2 | 3 | #### 📋 Description 4 | 5 | To make the shopping experience more convenient, include an "Add to Cart" button in the modal window that pops up when hovering over a product image. This button should allow users to add the product to their shopping cart directly from the modal window. This feature will work in conjunction with the integration with the shopping cart described in [RSS-ECOMM-4_02](./Sprint4/RSS-ECOMM-4_02.md). 6 | 7 | #### 🔨 Implementation Details 8 | 9 | 1. **"Add to Cart" Button:** This button should be clearly visible and intuitive to use. It should be located in a prominent position within the modal window, such as next to the product image or near the product description. 10 | 2. **Button Functionality:** When clicked, this button should trigger an action to add the product to the user's shopping cart, as described in [RSS-ECOMM-4_02](./Sprint4/RSS-ECOMM-4_02.md). 11 | 12 | #### ✅ Acceptance Criteria 13 | 14 | - The modal window contains an "Add to Cart" button. 15 | - Clicking the "Add to Cart" button in the modal window triggers an action to add the product to the user's shopping cart. 16 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/archive/Home/Readme.md: -------------------------------------------------------------------------------- 1 | The Homepage should create a visually appealing and engaging first impression for visitors, providing an overview of the website's content and promoting key products or promotions. The design should prioritize user experience, enabling effortless navigation to different sections and encouraging further exploration of the platform. 2 | 3 | ### 1. Showcase Featured Products and Promotions (20 points) 4 | 5 | - **(10 points)** Prominently display featured products, promotions, or discounts on the Homepage, capturing users' attention and encouraging them to explore the available offerings. 6 | - **(5 points)** Use high-quality images and engaging visuals to attract users to the featured items and enhance the visual appeal of the Homepage. 7 | - **(5 points)** Ensure that featured products or promotions link directly to their corresponding product details or category pages, simplifying the user's shopping journey. 8 | 9 | ### 2. Navigation to Product Categories (20 points) 10 | 11 | - **(10 points)** Provide clear and easily accessible links or navigation elements that direct users to various product categories or sections of the website. 12 | - **(5 points)** Use descriptive labels or icons to represent each product category, facilitating intuitive navigation. 13 | - **(5 points)** Design the category navigation to be responsive and adaptable to different screen sizes and devices, ensuring a consistent browsing experience for all users. 14 | 15 | ### 3. Highlight Special Offers or Events (10 points) 16 | 17 | - **(10 points)** Showcase any ongoing special offers, sales, or events on the Homepage, informing users about limited-time deals or exclusive opportunities. 18 | 19 | ### 4. Integration with Website Features (10 points) 20 | 21 | - **(10 points)** Integrate the Homepage effectively with other website features and internal pages, such as header navigation, routing, product listing, and user account access, creating a cohesive browsing experience. 22 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/archive/Product/RSS-ECOMM-4_09.md: -------------------------------------------------------------------------------- 1 | ### 👨‍💻⚙️ Issue RSS-ECOMM-4_09: Implement Product Quantity Selection Before Adding to Cart (10 points) 2 | 3 | #### 📝📚 Description 4 | 5 | In order to give users more control 🎮 over their shopping experience 🛍️, implement a feature that allows users to select the desired quantity 🧮 of a product before adding it to their shopping cart 🛒. 6 | 7 | #### 💻🔧 Implementation Details 8 | 9 | 1. **Quantity Selection 🔢:** Provide a way for users to specify the quantity of a product they want to add to their shopping cart. This could be a dropdown menu ⏬, a text input field 🖊️, or another user interface element. 10 | 11 | 2. **Add to Cart with Quantity ➕🛒:** When a user clicks the "Add to Cart" button, the specified quantity of the product should be added to their shopping cart. 12 | 13 | #### 🎨👁️ Visual Implementation Ideas 14 | 15 | 1. **Dropdown Menu ⏬:** If the quantity of available product is limited, a dropdown menu may be an appropriate choice for quantity selection. The dropdown menu could list numbers up to the available quantity. 16 | 2. **Text Input Field 🖊️:** If the quantity of available product is substantial or unlimited, a text input field may be more appropriate. Users could type in the desired quantity. 17 | 3. **Increment/Decrement Buttons 🔼🔽:** Another option could be to use a numerical input with increment and decrement buttons. This would allow users to easily increase or decrease the quantity. 18 | 19 | #### ✅🎯 Acceptance Criteria 20 | 21 | - Users are able to specify the quantity of a product before adding it to their shopping cart. 22 | - Clicking the "Add to Cart" button adds the specified quantity of the product to the user's shopping cart. 23 | 24 | #### 🔗📚 Useful Links and Resources 25 | 26 | 1. [HTML Select element (for implementing a dropdown menu)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) 27 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/archive/Product/Readme.md: -------------------------------------------------------------------------------- 1 | The Detailed Product page should provide a comprehensive and user-friendly experience by displaying extensive product information, allowing users to choose between product variations and quantities, enabling them to add or remove products from their shopping cart or wishlist, and initiating the checkout process with a "Buy and Pay" button. By leveraging the commercetools API or any other simple API for data retrieval and management, the page should feature an image slider, a modal window for enlarged product images, breadcrumb navigation, and widgets for selecting product options. 2 | 3 | All these features should be planned and implemented in a visually appealing and organized manner, ensuring a smooth user experience while browsing and interacting with the page. The integration with the chosen API should be seamless, providing real-time updates and data synchronization as users explore the product details, add or remove items from their shopping cart and wishlist, and customize their chosen products based on available options. 4 | 5 | ### 3. Product Options Selection (20 points) 6 | 7 | - **(20 points)** Use the commercetools API (commercetools or any other simple API) to display and manage different product options, such as size or other available variations. Allow users to select their preferred options before adding the product to their shopping cart or wishlist. 8 | 9 | ### 5. Wishlist Management with Local Storage (20 points) 10 | 11 | - **(10 points)** Implement an "Add to Wishlist" button that saves the selected product to the user's wishlist, storing the wishlist data in the local storage. 12 | - **(10 points)** If the product is already in the user's wishlist, provide a "Remove from Wishlist" button that allows users to remove the product from their wishlist, updating the local storage accordingly. 13 | 14 | ### 8. Buy and Pay Button (10 points) 15 | 16 | - **(10 points)** Implement a "Buy and Pay" button that initiates the checkout process for the selected product with the specified options and quantity. 17 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/archive/Profile/Readme.md: -------------------------------------------------------------------------------- 1 | The User Profile page should display the user's personal information, such as their first name, last name, date of birth, and addresses. Users should be able to edit their profile information and manage addresses with the ability to add, update, and delete them. The User Profile page should also provide access to users' order history and account-related settings, including the possibility to delete their customer account. 2 | 3 | ### 4. Access to Order History and Account Settings (30 points) 4 | 5 | - Provide users with access to view their order history, including details about each order, total price, and order status. (10 points) 6 | - Include links or navigation options to access other account-related settings, such as password change, email preferences, or account deletion. (10 points) 7 | - Implement a secure and user-friendly process for users to delete their customer account, with proper confirmation steps and account validation. (10 points) 8 | -------------------------------------------------------------------------------- /tasks/eCommerce-Application/archive/Routing/Readme.md: -------------------------------------------------------------------------------- 1 | The website should implement a robust and efficient routing system to ensure seamless navigation between pages. The routing system should be built using a well-structured framework, providing an organized and maintainable codebase. The routing must be implemented for the following pages: Homepage, Product Listing, Product Details, Shopping Cart, Checkout, Payment, User Profile. 2 | 3 | ### 1. Consistent and Clear Routing Structure (45 points) 4 | 5 | - **(5 points)** Use descriptive and human-readable URLs for each page, enabling users to better understand their location within the website. 6 | - **(5 points)** Implement routing for the Homepage, allowing users to access the main landing page of the website. 7 | - **(35 points)** Implement routing for essential website pages, including Product Listing, Product Details, Shopping Cart, Payment, User Profile, Login, SignUp. 8 | 9 | ### 3. Error Handling and 404 Pages (20 points) 10 | 11 | - **(10 points)** Implement proper error handling and display informative error messages when users attempt to access a route that does not exist or encounter issues during navigation. 12 | - **(10 points)** Create a custom 404 page that informs users they have reached a non-existent page and provides options for navigating back to the main site or other relevant content. 13 | 14 | ### 4. Integration with Website Features (20 points) 15 | 16 | - **(10 points)** Integrate the routing system effectively with the header, ensuring proper highlighting of the active page in the navigation menu and user account access. 17 | - **(10 points)** Integrate the routing with the Product Listing and Product Details pages, ensuring users can easily navigate between product categories and view detailed information about a specific product. 18 | -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/angry.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/angry.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/bird.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/bird.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/blouse.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/blouse.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/boot.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/boot.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/cat.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/cat.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/chick.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/chick.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/chicken.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/chicken.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/coat.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/coat.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/correct.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/correct.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/cry.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/cry.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/dance.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/dance.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/dive.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/dive.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/dog.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/dog.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/dolphin.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/dolphin.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/draw.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/draw.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/dress.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/dress.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/error.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/error.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/failure.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/failure.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/fish.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/fish.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/fly.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/fly.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/frog.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/frog.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/giraffe.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/giraffe.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/happy.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/happy.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/horse.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/horse.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/hug.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/hug.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/jump.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/jump.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/laugh.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/laugh.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/lion.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/lion.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/mouse.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/mouse.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/open.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/open.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/pants.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/pants.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/pig.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/pig.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/play.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/play.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/point.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/point.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/rabbit.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/rabbit.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/ride.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/ride.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/run.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/run.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/sad.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/sad.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/scared.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/scared.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/sheep.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/sheep.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/shirt.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/shirt.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/shoe.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/shoe.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/sing.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/sing.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/skip.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/skip.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/skirt.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/skirt.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/smile.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/smile.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/success.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/success.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/surprised.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/surprised.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/swim.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/swim.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/tired.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/tired.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/audio/turtle.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/audio/turtle.mp3 -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/angry.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/angry.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/audio.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/bird.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/bird.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/blouse.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/blouse.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/boot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/boot.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/cat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/cat.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/chick.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/chick.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/chicken.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/chicken.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/coat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/coat.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/cry.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/cry.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/dance.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/dance.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/dive.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/dive.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/dog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/dog.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/dolphin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/dolphin.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/draw.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/draw.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/dress.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/dress.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/failure.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/failure.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/fish.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/fish.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/fish1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/fish1.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/fly.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/fly.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/frog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/frog.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/giraffe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/giraffe.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/happy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/happy.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/horse.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/horse.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/hug.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/hug.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/jump.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/jump.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/laugh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/laugh.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/lion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/lion.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/mouse.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/mouse.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/open.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/open.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/pants.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/pants.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/pig.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/pig.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/play.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/play.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/point.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/point.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/rabbit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/rabbit.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/ride.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/ride.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/rotate.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/run.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/run.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/sad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/sad.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/scared.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/scared.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/screenshot.png -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/sheep.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/sheep.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/shirt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/shirt.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/shoe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/shoe.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/sing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/sing.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/skip.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/skip.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/skirt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/skirt.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/smile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/smile.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/success.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/success.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/surprised.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/surprised.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/swim.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/swim.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/tired.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/tired.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/data/img/turtle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/data/img/turtle.jpg -------------------------------------------------------------------------------- /tasks/english-for-kids/images/img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/english-for-kids/images/img.png -------------------------------------------------------------------------------- /tasks/hangman/hangman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/hangman/hangman.png -------------------------------------------------------------------------------- /tasks/online-zoo/online-zoo-folder-structure.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/online-zoo/online-zoo-folder-structure.jpg -------------------------------------------------------------------------------- /tasks/shelter/shelter-folder-structure.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/shelter/shelter-folder-structure.jpg -------------------------------------------------------------------------------- /tasks/shelter/shelter-main-1280px.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/shelter/shelter-main-1280px.jpg -------------------------------------------------------------------------------- /tasks/shelter/shelter-pets-1280px.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/shelter/shelter-pets-1280px.jpg -------------------------------------------------------------------------------- /tasks/shelter/shelter-responsive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/shelter/shelter-responsive.png -------------------------------------------------------------------------------- /tasks/test-description/how-to-pass-test.md: -------------------------------------------------------------------------------- 1 | ## How to pass the test? 2 | 3 | 1. Authorized in the RS app 4 | 2. Choose the Auto-Test option in the main menu 5 | ![Choose the Auto-Test option in the main menu](./images/auto-test-option.png) 6 | 3. Find the appropriate test in the dropdown 7 | ![Find the appropriate test in the dropdown](./images/choose-test.png) 8 | 4. Pay attention to the precondition. It might be different from test to test 9 | ![ Pay attention to the precondition](./images/test-preconditions.png) -------------------------------------------------------------------------------- /tasks/test-description/images/auto-test-option.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/test-description/images/auto-test-option.png -------------------------------------------------------------------------------- /tasks/test-description/images/choose-test.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/test-description/images/choose-test.png -------------------------------------------------------------------------------- /tasks/test-description/images/test-preconditions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/test-description/images/test-preconditions.png -------------------------------------------------------------------------------- /tasks/typescript-essentials/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/typescript-essentials/image.png -------------------------------------------------------------------------------- /tasks/typescript-essentials/stories/RSS-TSE-01.md: -------------------------------------------------------------------------------- 1 | # ⏱ Issue RSS-TSE-01: Complete "Getting Started with TypeScript" Module (5 points) 2 | 3 | ## 📝 Description 4 | 5 | This task requires the completion of the "Getting Started with TypeScript" module. The goal is to familiarize yourself with TypeScript basics and apply them in your development work. Upon completion, you will earn a badge that needs to be linked correctly in the provided Markdown file. 6 | 7 | ## 🔨 Implementation Details 8 | 9 | 1. **Module Completion:** 10 | 11 | - Enroll and complete the "Getting Started with TypeScript" module. 12 | - Focus on understanding TypeScript basics, including types, interfaces, classes, and modules. 13 | 14 | 2. **Badge Acquisition:** 15 | 16 | - After completing the module, you will receive a badge. 17 | - Ensure you receive the badge in your learning platform account. 18 | 19 | 3. **Markdown File Update:** 20 | 21 | - Update the provided Markdown file with the link to your badge. 22 | - The link should be directly accessible and viewable. 23 | 24 | ## ✅ Acceptance Criteria 25 | 26 | - The module "Getting Started with TypeScript" is completed. 27 | - The corresponding badge is earned. 28 | - The name associated with the badge matches the GitHub username of the student. 29 | - The badge is obtained before the deadline. 30 | - The link in the Markdown file leads directly to the badge for the completed module. 31 | -------------------------------------------------------------------------------- /tasks/typescript-essentials/stories/RSS-TSE-02.md: -------------------------------------------------------------------------------- 1 | # ⏱ Issue RSS-TSE-02: Complete Module on Declaring Variable Types in TypeScript (5 points) 2 | 3 | ## 📝 Description 4 | 5 | This task focuses on completing a module specifically about declaring variable types in TypeScript. The objective is to deepen your understanding of TypeScript's type system, which is crucial for writing robust and error-free code. Upon completion, you'll earn a badge that should be added to your Markdown compilation. 6 | 7 | ## 🔨 Implementation Details 8 | 9 | 1. **Module Completion:** 10 | 11 | - Enroll in and complete the module that covers declaring variable types in TypeScript. 12 | - Pay special attention to TypeScript's static typing system, including the use of `let`, `const`, and various type annotations. 13 | 14 | 2. **Badge Acquisition:** 15 | 16 | - A badge will be awarded upon successful completion of the module. 17 | - Ensure that this badge is visible in your learning platform profile. 18 | 19 | 3. **Markdown File Update:** 20 | 21 | - Update the provided Markdown file by adding a link to the newly earned badge. 22 | - Make sure the link is functional and directs to the specific badge. 23 | 24 | ## ✅ Acceptance Criteria 25 | 26 | - Completion of the TypeScript module on declaring variable types. 27 | - Earning the corresponding badge. 28 | - The badge holder's name should match the GitHub username of the student. 29 | - The badge must be obtained within the specified deadline. 30 | - The Markdown file should contain a direct link to the badge for the completed module. 31 | -------------------------------------------------------------------------------- /tasks/typescript-essentials/stories/RSS-TSE-03.md: -------------------------------------------------------------------------------- 1 | # ⏱ Issue RSS-TSE-03: Implement Interfaces in TypeScript Module (5 points) 2 | 3 | ## 📝 Description 4 | 5 | The task involves completing a module focused on implementing interfaces in TypeScript. This module is designed to enhance your understanding and practical skills in using interfaces for structuring complex data types and enforcing contract-like usage in your TypeScript code. After finishing the module, you will receive a badge that needs to be integrated into your Markdown documentation. 6 | 7 | ## 🔨 Implementation Details 8 | 9 | 1. **Module Completion:** 10 | 11 | - Participate in and complete the module concerning the implementation of interfaces in TypeScript. 12 | - Concentrate on learning how to define and use interfaces, including extending interfaces, optional properties, and implementing them in classes. 13 | 14 | 2. **Badge Acquisition:** 15 | 16 | - Upon completing the module, a badge symbolizing your achievement will be issued. 17 | - Check to confirm the badge appears in your profile on the learning platform. 18 | 19 | 3. **Markdown File Update:** 20 | 21 | - Incorporate the badge into your Markdown documentation. 22 | - Ensure the badge link is properly inserted and leads to the correct badge. 23 | 24 | ## ✅ Acceptance Criteria 25 | 26 | - Successful completion of the TypeScript module on implementing interfaces. 27 | - Acquisition of the related badge. 28 | - The badge holder's name matches the GitHub username of the student. 29 | - The badge is obtained prior to the deadline. 30 | - The Markdown documentation correctly includes a direct link to the badge for the completed module. 31 | -------------------------------------------------------------------------------- /tasks/typescript-essentials/stories/RSS-TSE-04.md: -------------------------------------------------------------------------------- 1 | # ⏱ Issue RSS-TSE-04: Develop Typed Functions in TypeScript Module (5 points) 2 | 3 | ## 📝 Description 4 | 5 | This task entails completing a module that focuses on developing typed functions in TypeScript. The aim is to solidify your understanding and application of TypeScript's type system in the context of function development. This includes grasping concepts like type inference, type checking for function parameters and return types, and using generics. Upon successful completion of the module, you are expected to showcase the earned badge in your Markdown file. 6 | 7 | ## 🔨 Implementation Details 8 | 9 | 1. **Module Completion:** 10 | 11 | - Enroll and complete the module dedicated to developing typed functions in TypeScript. 12 | - Emphasize learning about specifying types for function parameters and return values, and the utilization of generics in functions. 13 | 14 | 2. **Badge Acquisition:** 15 | 16 | - A badge will be awarded upon successful completion of the module. 17 | - Make sure the badge is visible in your profile on the learning platform. 18 | 19 | 3. **Markdown File Update:** 20 | 21 | - Add the badge to your Markdown file. 22 | - Ensure the link to the badge is correctly formatted and leads directly to your earned badge. 23 | 24 | ## ✅ Acceptance Criteria 25 | 26 | - Completion of the TypeScript module on developing typed functions. 27 | - Earning the corresponding badge. 28 | - The badge holder's name aligns with the GitHub username of the student. 29 | - The badge is acquired before the specified deadline. 30 | - The Markdown file includes a direct link to the badge for the completed module. 31 | -------------------------------------------------------------------------------- /tasks/typescript-essentials/stories/RSS-TSE-05.md: -------------------------------------------------------------------------------- 1 | # ⏱ Issue RSS-TSE-05: Learn and Implement Classes in TypeScript (5 points) 2 | 3 | ## 📝 Description 4 | 5 | The objective of this task is to complete a module focused on declaring and instantiating classes in TypeScript. This module is essential for understanding object-oriented programming concepts within TypeScript, including class syntax, inheritance, and access modifiers. Successfully completing this module will earn you a badge, which you are required to display in your Markdown compilation. 6 | 7 | ## 🔨 Implementation Details 8 | 9 | 1. **Module Completion:** 10 | 11 | - Enroll in and finish the module on declaring and instantiating classes in TypeScript. 12 | - Focus on key concepts such as class declaration, constructor functions, inheritance, and access modifiers like `public`, `private`, and `protected`. 13 | 14 | 2. **Badge Acquisition:** 15 | 16 | - Complete the module to receive a badge indicative of your accomplishment. 17 | - Verify that this badge is accessible in your account on the learning platform. 18 | 19 | 3. **Markdown File Update:** 20 | 21 | - Integrate the badge into your Markdown file. 22 | - Ensure the badge link is functional and directs viewers to the specific badge you earned. 23 | 24 | ## ✅ Acceptance Criteria 25 | 26 | - Successful completion of the TypeScript module on declaring and instantiating classes. 27 | - Receipt of the corresponding badge. 28 | - The badge holder's name matches the GitHub username of the student. 29 | - The badge is obtained prior to the deadline. 30 | - The Markdown file accurately includes a direct link to the badge for the completed module. 31 | -------------------------------------------------------------------------------- /tasks/typescript-essentials/stories/RSS-TSE-06.md: -------------------------------------------------------------------------------- 1 | # ⏱ Issue RSS-TSE-06: Master Generics in TypeScript Module (5 points) 2 | 3 | ## 📝 Description 4 | 5 | This task involves completing a module dedicated to understanding and using generics in TypeScript. The module aims to provide in-depth knowledge about generics, which are essential for creating flexible and reusable code components in TypeScript. Upon mastering this concept and completing the module, you will earn a badge that should be included in your Markdown file. 6 | 7 | ## 🔨 Implementation Details 8 | 9 | 1. **Module Completion:** 10 | 11 | - Register for and complete the module focused on generics in TypeScript. 12 | - Pay close attention to the principles of generics, including their syntax, use cases, and advantages in creating type-safe and reusable code. 13 | 14 | 2. **Badge Acquisition:** 15 | 16 | - A badge symbolizing your achievement in understanding generics will be awarded after module completion. 17 | - Confirm that this badge is visible in your learning platform profile. 18 | 19 | 3. **Markdown File Update:** 20 | 21 | - Update your Markdown file to include the badge you've earned. 22 | - Ensure that the link to the badge is correct and leads directly to your specific achievement. 23 | 24 | ## ✅ Acceptance Criteria 25 | 26 | - Completion of the TypeScript module on generics. 27 | - Earning the corresponding badge. 28 | - The badge holder's name corresponds with the GitHub username of the student. 29 | - The badge is obtained before the set deadline. 30 | - The Markdown file must contain a direct link to the badge for the completed module. 31 | -------------------------------------------------------------------------------- /tasks/typescript-essentials/stories/RSS-TSE-07.md: -------------------------------------------------------------------------------- 1 | # ⏱ Issue RSS-TSE-07: Work with External Libraries in TypeScript Module (5 points) 2 | 3 | ## 📝 Description 4 | 5 | This task is centered around completing a module that teaches how to work with external libraries in TypeScript. The module aims to equip you with the skills to effectively integrate and utilize external libraries in TypeScript projects, addressing common challenges like type definitions and module imports. After completing this module, you will receive a badge, which you need to add to your Markdown documentation. 6 | 7 | ## 🔨 Implementation Details 8 | 9 | 1. **Module Completion:** 10 | 11 | - Enroll in and successfully finish the module on working with external libraries in TypeScript. 12 | - Focus on understanding how to incorporate external libraries, manage type definitions, and handle module importing and exporting in TypeScript. 13 | 14 | 2. **Badge Acquisition:** 15 | 16 | - Upon module completion, a badge representing your achievement will be issued. 17 | - Make sure the badge is added to your profile on the learning platform. 18 | 19 | 3. **Markdown File Update:** 20 | 21 | - Incorporate the badge into your Markdown documentation. 22 | - The link to the badge should be correctly formatted and lead directly to your badge. 23 | 24 | ## ✅ Acceptance Criteria 25 | 26 | - The successful completion of the TypeScript module on working with external libraries. 27 | - Acquisition of the corresponding badge. 28 | - The badge holder's name aligns with the GitHub username of the student. 29 | - The badge is obtained within the deadline. 30 | - The Markdown documentation includes a direct link to the badge for the completed module. 31 | -------------------------------------------------------------------------------- /tasks/typescript-essentials/stories/RSS-TSE-08.md: -------------------------------------------------------------------------------- 1 | # ⏱ Issue RSS-TSE-08: Organize Code Using Namespaces in TypeScript (5 points) 2 | 3 | ## 📝 Description 4 | 5 | This task involves completing a module that covers the effective organization of code using namespaces in TypeScript. The goal is to understand how to structure and encapsulate code efficiently, enhancing maintainability and readability. Mastering this concept is crucial for large-scale TypeScript development. Upon successful completion, a badge will be awarded, which you are expected to showcase in your Markdown file. 6 | 7 | ## 🔨 Implementation Details 8 | 9 | 1. **Module Completion:** 10 | 11 | - Enroll in and complete the module focused on using namespaces in TypeScript. 12 | - Emphasize learning the syntax of namespaces, their role in encapsulating code, and best practices for structuring large codebases. 13 | 14 | 2. **Badge Acquisition:** 15 | 16 | - A badge will be issued upon completion of the module. 17 | - Ensure the badge is visible in your account on the learning platform. 18 | 19 | 3. **Markdown File Update:** 20 | 21 | - Add the earned badge to your Markdown file. 22 | - The badge link should be correctly inserted and lead directly to the earned badge. 23 | 24 | ## ✅ Acceptance Criteria 25 | 26 | - Completion of the TypeScript module on organizing code using namespaces. 27 | - Earning the relevant badge. 28 | - The badge holder's name matches the GitHub username of the student. 29 | - The badge is obtained before the deadline. 30 | - The Markdown file correctly includes a direct link to the badge for the completed module. 31 | -------------------------------------------------------------------------------- /tasks/typescript-essentials/stories/RSS-TSE-09.md: -------------------------------------------------------------------------------- 1 | # ⏱ Issue RSS-TSE-09: Compile Earned Badges in Markdown File (5 points) 2 | 3 | ## 📝 Description 4 | 5 | The objective of this task is to create a comprehensive Markdown file that lists all the earned badges from the TypeScript series. Each badge should be linked to its corresponding module, providing a consolidated and easy-to-reference documentation. This compilation serves as a testament to the skills acquired and milestones achieved in your TypeScript learning journey. 6 | 7 | ## 🔨 Implementation Details 8 | 9 | 1. **Markdown File Creation:** 10 | 11 | - Create a new Markdown file named `TypeScript-Badges-Compilation.md` or similar. 12 | - Organize the file in a clear and readable format, possibly using headings, bullet points, or tables. 13 | 14 | 2. **Badge Compilation:** 15 | 16 | - List each badge you have earned from the TypeScript module series. 17 | - Ensure that each badge is named descriptively to reflect the module it represents. 18 | 19 | 3. **Linking Badges to Modules:** 20 | 21 | - Provide a direct link for each badge to its corresponding module or the page where the badge was awarded. 22 | - Verify that all links are functional and direct to the correct module. 23 | 24 | ## ✅ Acceptance Criteria 25 | 26 | - A Markdown file is created compiling all earned TypeScript badges. 27 | - Each badge in the list is linked to its corresponding module or badge award page. 28 | - The file is well-organized and easy to navigate. 29 | - All links in the Markdown file are functional and accurate. 30 | 31 | ## 🌐 Useful Links and Resources 32 | 33 | - [Markdown Guide](https://www.markdownguide.org/basic-syntax/) 34 | - [Example of a Badge Compilation Page](https://learn.microsoft.com/api/achievements/share/en-us/ValeryDluski/HYTXXB38?sharingId=10189BC4D7E76BC1) 35 | -------------------------------------------------------------------------------- /tasks/typescript-essentials/stories/RSS-TSE-10.md: -------------------------------------------------------------------------------- 1 | # ⏱ Issue RSS-TSE-10: Personal Reflections on Completed TypeScript Modules (5 points) 2 | 3 | ## 📝 Description 4 | 5 | This task requires crafting personal reflections for each TypeScript module completed. The reflections should delve into what you learned, how the knowledge contributes to your development skills, and its applicability in real-world scenarios. These reflections should be thoughtful and demonstrate a comprehensive understanding of each module's content. 6 | 7 | ## 🔨 Implementation Details 8 | 9 | 1. **Reflection Writing:** 10 | 11 | - Write a reflection for each TypeScript module you've completed. 12 | - Ensure each reflection covers key learnings, skills gained, and how these can be applied in practical situations. 13 | 14 | 2. **Depth and Insight:** 15 | 16 | - Provide insights into how each module has enhanced your understanding of TypeScript. 17 | - Discuss specific concepts or techniques from the module and their relevance in your development work. 18 | 19 | 3. **Real-World Application:** 20 | 21 | - Highlight how the knowledge gained can be applied to real-world programming challenges. 22 | - Optionally, include examples or hypothetical scenarios where these skills could be beneficial. 23 | 24 | 4. **Documentation:** 25 | 26 | - Compile these reflections in a Markdown file named `TypeScript-Modules-Reflections.md` or similar. 27 | - Structure the document clearly, with separate sections for each module reflection. 28 | 29 | ## ✅ Acceptance Criteria 30 | 31 | - Personal reflections for each TypeScript module are provided. 32 | - Each reflection articulates what was learned and its contribution to development skills. 33 | - Reflections demonstrate a clear understanding of the module content. 34 | - Practical applications of the learned concepts in real-world scenarios are discussed. 35 | - The reflections are compiled in a well-structured Markdown file. 36 | 37 | ## 🌐 Useful Links and Resources 38 | 39 | - [Markdown Guide for Better Documentation](https://www.markdownguide.org/basic-syntax/) 40 | -------------------------------------------------------------------------------- /tasks/typescript-essentials/stories/RSS-TSE-PENALTY-01.md: -------------------------------------------------------------------------------- 1 | # ⏱ Issue RSS-TSE-Penalty: 100% Deduction for Post-Deployment File Modification 2 | 3 | ## 📝 Description 4 | 5 | This penalty policy is applied to any changes made to a deployed document after its submission deadline. The aim is to ensure the integrity of the deployment process and adherence to deadlines, emphasizing the importance of finalizing documents before deployment. A 100% deduction penalty will be enforced for any post-deadline modifications, underscoring the necessity of effective time management and the completion of document preparations within the set timeframe. 6 | 7 | ## 🔨 Implementation Details 8 | 9 | 1. **Adherence to Deployment Deadlines:** 10 | 11 | - Confirm that all documents are finalized and appropriately prepared before the deployment deadline. 12 | - Avoid any edits or alterations to the document once it has been deployed and the deadline has passed. 13 | 14 | 2. **Penalty for Post-Deadline Modifications:** 15 | 16 | - Any modifications to the deployed document after the deadline will incur a full penalty of 100%. 17 | - This strict policy is in place to uphold the integrity and discipline of the deployment process. 18 | 19 | 3. **Verifying Last Modified Date:** 20 | 21 | - The last modified date of the deployed document can be verified using the `document.lastModified` command in the browser console. 22 | - This command helps identify the date and time of the last modification, which is crucial for enforcing the penalty policy. 23 | 24 | ## ✅ Acceptance Criteria 25 | 26 | - No changes are made to the deployed document after the submission deadline. 27 | - The `document.lastModified` command is utilized to check the last modification date of the document. 28 | - Full understanding and compliance with the penalty policy to maintain the integrity of the deployment process. 29 | 30 | ## 🌐 Useful Links and Resources 31 | 32 | - [Using `document.lastModified` for Date Verification](https://developer.mozilla.org/en-US/docs/Web/API/Document/lastModified) 33 | -------------------------------------------------------------------------------- /tasks/virtual-keyboard/images/virtual-keyboard-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/virtual-keyboard/images/virtual-keyboard-1.png -------------------------------------------------------------------------------- /tasks/virtual-keyboard/images/virtual-keyboard-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/virtual-keyboard/images/virtual-keyboard-2.png -------------------------------------------------------------------------------- /tasks/virtual-keyboard/images/virtual-keyboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rolling-scopes-school/js-fe-course-en/a42ee17b0eb7c23aca489f9b0e9de7a3972975c2/tasks/virtual-keyboard/images/virtual-keyboard.png --------------------------------------------------------------------------------