From 0fa6bce11e858e018e345503753a5aed1c1ca686 Mon Sep 17 00:00:00 2001 From: "Santino, Marco Elia" Date: Fri, 22 Feb 2019 12:06:05 +0100 Subject: [PATCH 1/2] update readme with new intermediate exercise --- README.md | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 57 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 35e4f6c..7736f36 100644 --- a/README.md +++ b/README.md @@ -44,8 +44,64 @@ In your terminal execute following commands: drawing +## Intermediate - lv 1 -## Intermediate + **_Goal_**: Show details of multiple talks + + * Show talk details: + * Name + * Speaker name + * Topic + * Location + * Show participation status + * Show a button to change participation status (follow/unfollow) + + **_Technical details_**: + + * Generate new component (you can use Angular CLI): + * _talk-details.component.ts_ + * Listing should be generated dynamically using appropriate angular directives, see the code below to generate your stub + * Make sure data is shown on the screen + * Add new button element + * Make sure button does hide selected card and populate a secondary list with the participation status updated + + All data could be contained in *.component.ts files. + + All data should be coming from an angular variable and ***NOT HARDCODED in the HTML*** + + + **_Stubbed data_** + + ```javascript + const talks = [ + { + event_name: "Angular Today and Tomorrow", + author: "John Doe", + topic: "Front-End", + description: "Ubi est fortis tata? Est teres classis, cesaris." + }, + { + event_name: "How To Hack an Angular app?", + author: "Jim Jones ", + topic: "Front-End", + description: "Why does the lubber die?" + }, + { + event_name: "Docker in Production", + author: "Ringo Starr", + topic: "Back-End", + description: "Never trade a kraken." + }, + { + event_name: "Angular vs Vue", + author: "Chuck Norris", + topic: "Front-End", + description: "Yellow fever, love, and malaria.." + } + ]; + ``` + +## Intermediate - lv 2 **_Goal_**: Enhance application with routing (split by pages) and add navigation header. From 88df33d852853254b4a18723b20fc62aab1fa18b Mon Sep 17 00:00:00 2001 From: "federico.villani" Date: Fri, 22 Feb 2019 22:58:12 +0100 Subject: [PATCH 2/2] intermediate-1 WIP --- README.md | 86 +++++++++++++++---------------------------------------- 1 file changed, 23 insertions(+), 63 deletions(-) diff --git a/README.md b/README.md index 7736f36..039c264 100644 --- a/README.md +++ b/README.md @@ -24,8 +24,9 @@ In your terminal execute following commands: * Speaker name * Topic * Location - * Show participation status - * Show a button to change participation status (follow/unfollow) + * Show _participation_ status + * Show a button to change participation status (_follow/unfollow_) + * Show a _wishlist_ button **_Technical details_**: @@ -33,9 +34,11 @@ In your terminal execute following commands: * _talk-details.component.ts_ * Add data-bindings to pass data from parent * Make sure data is shown on the screen - * Add new button element - * Make sure button does change participation status - + * Create a _wishlist_ banner anchored at the bottom of the page + * Add a new _follow/unfollow_ button + * Make sure button, when clicked, will change participation status + * Add a new button _add to wishlist_ + All data could be contained in *.component.ts files. All data should be coming from an angular variable and ***NOT HARDCODED in the HTML*** @@ -43,65 +46,9 @@ In your terminal execute following commands: **_Expected output_**: drawing - -## Intermediate - lv 1 - - **_Goal_**: Show details of multiple talks - - * Show talk details: - * Name - * Speaker name - * Topic - * Location - * Show participation status - * Show a button to change participation status (follow/unfollow) - - **_Technical details_**: - - * Generate new component (you can use Angular CLI): - * _talk-details.component.ts_ - * Listing should be generated dynamically using appropriate angular directives, see the code below to generate your stub - * Make sure data is shown on the screen - * Add new button element - * Make sure button does hide selected card and populate a secondary list with the participation status updated - All data could be contained in *.component.ts files. - - All data should be coming from an angular variable and ***NOT HARDCODED in the HTML*** - - - **_Stubbed data_** - - ```javascript - const talks = [ - { - event_name: "Angular Today and Tomorrow", - author: "John Doe", - topic: "Front-End", - description: "Ubi est fortis tata? Est teres classis, cesaris." - }, - { - event_name: "How To Hack an Angular app?", - author: "Jim Jones ", - topic: "Front-End", - description: "Why does the lubber die?" - }, - { - event_name: "Docker in Production", - author: "Ringo Starr", - topic: "Back-End", - description: "Never trade a kraken." - }, - { - event_name: "Angular vs Vue", - author: "Chuck Norris", - topic: "Front-End", - description: "Yellow fever, love, and malaria.." - } - ]; - ``` -## Intermediate - lv 2 +## Intermediate **_Goal_**: Enhance application with routing (split by pages) and add navigation header. @@ -115,7 +62,10 @@ In your terminal execute following commands: * Home * Speakers * Talks - + * Show footer + * Show a _wishlist_ banner + * Use a form + **_Technical details_**: * Generate new components: @@ -132,6 +82,16 @@ In your terminal execute following commands: * Add header component to the top of the page: * _header.component.ts_ * Click on header item should redirect to corresponding page + * Populate homepage component with + * a sidebar with: + * today date + * search box + * search input + * search button + * a main content with: + * proper html data and display _wishlist_ content with different css style than _wishlist_ banner + * Make sure _wishlist_ button, when clicked, will populate _wishlist_ banner with the participation status updated + * Create a footer element always anchored at the very bottom of the page **_Expected output_**: