Skip to content

Commit f02bfc9

Browse files
soumyomkhjsoumyomkhj
committed
added data set
1 parent f094da1 commit f02bfc9

File tree

12 files changed

+240
-84
lines changed

12 files changed

+240
-84
lines changed

‎src/app/app.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { NgModule } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
3+
import { HttpClientModule } from '@angular/common/http';
34

45
import { AppRoutingModule } from './app-routing.module';
56
import { AppComponent } from './app.component';
@@ -47,6 +48,7 @@ const analytics = getAnalytics(app);
4748
],
4849
imports: [
4950
BrowserModule,
51+
HttpClientModule,
5052
AppRoutingModule
5153
],
5254
bootstrap: [AppComponent]

‎src/app/course/course.component.html‎

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<app-nav-bar> </app-nav-bar>
1+
<app-nav-bar></app-nav-bar>
22
<div class="cr-con">
33
<div class="course">
44
<div class="devider hidden-sm"></div>
@@ -9,21 +9,17 @@
99
<div class="progress"><span>4</span>/ 5 read</div>
1010
</div>
1111
<div class="cards-wrapper">
12-
<div class="card" [routerLink]="['/step']">
12+
<div class="card" (click)="goToContent('secondary', 'context')">
1313
<img src="../../assets/img/icons/happy.svg" alt="" class="icon">
14-
Motto
14+
Context
1515
</div>
16-
<div class="card" [routerLink]="['/step']">
16+
<div class="card" (click)="goToContent('secondary', 'competition')">
1717
<img src="../../assets/img/icons/questions.svg" alt="" class="icon">
18-
Motto
18+
Competition
1919
</div>
2020
<div class="card" [routerLink]="['/step']">
2121
<img src="../../assets/img/icons/flag.svg" alt="" class="icon">
22-
Motto
23-
</div>
24-
<div class="card" [routerLink]="['/step']">
25-
<img src="../../assets/img/icons/questions.svg" alt="" class="icon">
26-
Motto
22+
Tone
2723
</div>
2824
</div>
2925
</div>
@@ -37,17 +33,17 @@
3733

3834
<div class="step-container">
3935
<div class="card-head">
40-
<div class="step-title">Secondary Research</div>
36+
<div class="step-title">Primary Research</div>
4137
<div class="progress"><span>4</span>/ 5 read</div>
4238
</div>
4339
<div class="cards-wrapper">
4440
<div class="card">
4541
<img src="../../assets/img/icons/happy.svg" alt="" class="icon">
46-
Motto
42+
User Goal
4743
</div>
4844
<div class="card">
4945
<img src="../../assets/img/icons/questions.svg" alt="" class="icon">
50-
Motto
46+
Persona
5147
</div>
5248
</div>
5349
</div>
@@ -61,21 +57,17 @@
6157

6258
<div class="step-container">
6359
<div class="card-head">
64-
<div class="step-title">Secondary Research</div>
60+
<div class="step-title">Analyze</div>
6561
<div class="progress"><span>4</span>/ 5 read</div>
6662
</div>
6763
<div class="cards-wrapper">
6864
<div class="card">
6965
<img src="../../assets/img/icons/happy.svg" alt="" class="icon">
70-
Motto
66+
Findings
7167
</div>
7268
<div class="card">
7369
<img src="../../assets/img/icons/questions.svg" alt="" class="icon">
74-
Motto
75-
</div>
76-
<div class="card">
77-
<img src="../../assets/img/icons/flag.svg" alt="" class="icon">
78-
Motto
70+
Opportunities
7971
</div>
8072
</div>
8173
</div>
@@ -89,25 +81,21 @@
8981

9082
<div class="step-container">
9183
<div class="card-head">
92-
<div class="step-title">Secondary Research</div>
84+
<div class="step-title">Ideate</div>
9385
<div class="progress"><span>4</span>/ 5 read</div>
9486
</div>
9587
<div class="cards-wrapper">
9688
<div class="card">
9789
<img src="../../assets/img/icons/happy.svg" alt="" class="icon">
98-
Motto
90+
Architecture
9991
</div>
10092
<div class="card">
10193
<img src="../../assets/img/icons/questions.svg" alt="" class="icon">
102-
Motto
94+
Wireframe
10395
</div>
10496
<div class="card">
10597
<img src="../../assets/img/icons/flag.svg" alt="" class="icon">
106-
Motto
107-
</div>
108-
<div class="card">
109-
<img src="../../assets/img/icons/questions.svg" alt="" class="icon">
110-
Motto
98+
Stylize
11199
</div>
112100
</div>
113101
</div>
@@ -121,25 +109,39 @@
121109

122110
<div class="step-container">
123111
<div class="card-head">
124-
<div class="step-title">Secondary Research</div>
112+
<div class="step-title">Design</div>
125113
<div class="progress"><span>4</span>/ 5 read</div>
126114
</div>
127115
<div class="cards-wrapper">
128116
<div class="card">
129117
<img src="../../assets/img/icons/happy.svg" alt="" class="icon">
130-
Motto
118+
Hi-Fi
131119
</div>
132120
<div class="card">
133121
<img src="../../assets/img/icons/questions.svg" alt="" class="icon">
134-
Motto
122+
Mockup
135123
</div>
124+
</div>
125+
</div>
126+
127+
<div class="big-button">
128+
<img src="../../assets/img/icons/brush.svg" alt="" class="icon">
129+
Try Yourself
130+
</div>
131+
132+
<div class="step-container">
133+
<div class="card-head">
134+
<div class="step-title">Test</div>
135+
<div class="progress"><span>4</span>/ 5 read</div>
136+
</div>
137+
<div class="cards-wrapper">
136138
<div class="card">
137-
<img src="../../assets/img/icons/flag.svg" alt="" class="icon">
138-
Motto
139+
<img src="../../assets/img/icons/happy.svg" alt="" class="icon">
140+
Performance
139141
</div>
140142
<div class="card">
141143
<img src="../../assets/img/icons/questions.svg" alt="" class="icon">
142-
Motto
144+
Think Aloud
143145
</div>
144146
</div>
145147
</div>

‎src/app/course/course.component.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Component, OnInit } from '@angular/core';
2+
import { Router, ActivatedRoute } from '@angular/router';
23

34
@Component({
45
selector: 'app-cource',
@@ -7,7 +8,15 @@ import { Component, OnInit } from '@angular/core';
78
})
89
export class CourseComponent implements OnInit {
910

11+
constructor(
12+
public router: Router
13+
) { }
14+
1015
ngOnInit(): void {
1116
}
1217

18+
goToContent(category: string, content: string){
19+
this.router.navigate(['/step'], { queryParams: { category: category, content: content } });
20+
}
21+
1322
}

‎src/app/nav-bar/nav-bar.component.html‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
<nav>
2-
<div class="nav-pointer top"></div>
2+
<div [ngClass]="pointerClass()" class="nav-pointer"></div>
33
<div class="nav-con">
44
<div class="icon-con">
5-
<div class="nav-pill"><img src="../../assets/img/icons/home.svg" alt="" class="icon active" [routerLink]="['']"></div>
6-
<div class="nav-pill"><img src="../../assets/img/icons/work.svg" alt="" class="icon" [routerLink]="['/try']"></div>
7-
<div class="nav-pill"><img src="../../assets/img/icons/profile.svg" alt="" class="icon"></div>
5+
<div class="nav-pill">
6+
<!-- <div *ngIf="currentTab === 'home'" class="nav-pointer top"></div> -->
7+
<img src="../../assets/img/icons/home.svg" alt="" [ngClass]="{'active': currentTab === 'home'}" class="icon" [routerLink]="['']">
8+
</div>
9+
<div class="nav-pill"><img src="../../assets/img/icons/work.svg" alt="" [ngClass]="{'active': currentTab === 'try'}" class="icon" [routerLink]="['/try']"></div>
10+
<div class="nav-pill"><img src="../../assets/img/icons/profile.svg" alt="" [ngClass]="{'active': currentTab === 'profile'}" class="icon"></div>
811
</div>
912
</div>
1013
</nav>

‎src/app/nav-bar/nav-bar.component.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,34 @@ import { Component, OnInit } from '@angular/core';
77
})
88
export class NavBarComponent implements OnInit {
99

10+
currentTab = '';
11+
1012
constructor() { }
1113

1214
ngOnInit(): void {
15+
this.getCurrentTab();
16+
}
17+
18+
getCurrentTab(){
19+
const path = window.location.pathname;
20+
if (path === '/try'){
21+
this.currentTab = 'try';
22+
} else if (path === '/profile'){
23+
this.currentTab = 'profile';
24+
} else {
25+
this.currentTab = 'home';
26+
}
27+
}
28+
29+
pointerClass(){
30+
const path = window.location.pathname;
31+
if (path === '/profile'){
32+
return 'bottom';
33+
} else if (path === '/' || path === '/course' || path === '/step') {
34+
return 'top';
35+
} else {
36+
return 'default';
37+
}
1338
}
1439

1540
}

‎src/app/step/step.component.html‎

Lines changed: 15 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,52 @@
11
<app-nav-bar> </app-nav-bar>
22
<div class="container">
33
<div class="header">
4-
<h1>Problem</h1>
4+
<h1>{{pageData?.title}}</h1>
55
<img src="../../assets/img/icons/close.svg" alt="" class="icon" [routerLink]="['/course']">
6-
Narwhal enamel pin cred YOLO taiyaki. Whatever woke mustache intelligentsia af. Adaptogen cloud bread taiyaki slow-carb polaroid fanny pack heirloom XOXO vexillologist.
6+
{{pageData?.summary}}
77
</div>
88
<div class="content col-sm-12 col-md-6">
99
<div class="before">
1010
<h2>Before</h2>
11-
Narwhal enamel pin cred YOLO taiyaki. Whatever woke mustache intelligentsia af. Adaptogen cloud bread taiyaki slow-carb polaroid fanny pack heirloom XOXO vexillologist.
11+
{{pageData?.before}}
1212
</div>
1313
<div class="after">
1414
<h2>After</h2>
15-
Narwhal enamel pin cred YOLO taiyaki. Whatever woke mustache intelligentsia af. Adaptogen cloud bread taiyaki slow-carb polaroid fanny pack heirloom XOXO vexillologist.
15+
{{pageData?.after}}
1616
</div>
1717
<div class="steps">
1818
<h2>Steps</h2>
19-
<p>Narwhal enamel pin cred YOLO taiyaki.</p>
19+
<p>Some heading text with the step</p>
2020
<ol>
21-
<li>Narwhal enamel pin cred YOLO taiyaki. Whatever woke mustache intelligentsia af. Adaptogen cloud bread taiyaki slow-carb polaroid fanny pack heirloom XOXO vexillologist.</li>
22-
<li>Narwhal enamel pin cred YOLO taiyaki. Whatever woke mustache intelligentsia af. Adaptogen cloud bread taiyaki slow-carb polaroid fanny pack heirloom XOXO vexillologist.</li>
23-
<li>Narwhal enamel pin cred YOLO taiyaki. Whatever woke mustache intelligentsia af. Adaptogen cloud bread taiyaki slow-carb polaroid fanny pack heirloom XOXO vexillologist.</li>
21+
<li *ngFor="let step of pageData?.key_steps">{{step}}</li>
2422
</ol>
2523
</div>
2624
</div>
2725
<div class="content col-sm-12 col-md-6">
2826
<div class="tools">
2927
<h2>Tools</h2>
3028
<div class="cards-wrapper">
31-
<div class="card">
32-
<a href="/tool">
33-
<img src="../../assets/img/tools/ai.png" alt="">
34-
</a>
35-
</div>
36-
<div class="card">
37-
<a href="/tool">
38-
<img src="../../assets/img/tools/xd.png" alt="">
39-
</a>
40-
</div>
41-
<div class="card">
42-
<a href="/tool">
43-
<img src="../../assets/img/tools/cd.png" alt="">
44-
</a>
45-
</div>
46-
<div class="card">
47-
<a href="/tool">
48-
<img src="../../assets/img/tools/ps.webp" alt="">
49-
</a>
29+
<div *ngFor="let tool of pageData?.tools" class="card">
30+
<div>
31+
<img [src]="getToolImg(tool)" alt="">
32+
</div>
5033
</div>
5134
</div>
5235
</div>
5336
<div class="rel-vid">
5437
<h2>Related Videos</h2>
5538
<div class="cards-wrapper">
56-
<a class="card" href="#">
57-
<img src="https://img.youtube.com/vi/YqQx75OPRa0/0.jpg" alt="">
58-
</a>
59-
<a class="card" href="#">
60-
<img src="https://img.youtube.com/vi/YqQx75OPRa0/0.jpg" alt="">
61-
</a>
62-
<a class="card" href="#">
63-
<img src="https://img.youtube.com/vi/YqQx75OPRa0/0.jpg" alt="">
39+
<a *ngFor="let url of pageData?.videos" class="card" [href]="url" target="_blank">
40+
<img [src]="videoThumbnail(url)">
6441
</a>
6542
</div>
6643
</div>
6744
<div class="resources">
6845
<h2>Resources</h2>
6946
<div class="cards-wrapper">
70-
<div class="card"><a href="#">Freepik</a></div>
71-
<div class="card"><a href="#">Freepik</a></div>
72-
<div class="card"><a href="#">Freepik</a></div>
73-
<div class="card"><a href="#">Freepik</a></div>
74-
<div class="card"><a href="#">Freepik</a></div>
75-
<div class="card"><a href="#">Freepik</a></div>
76-
<div class="card"><a href="#">Freepik</a></div>
47+
<div *ngFor="let item of pageData?.resources" class="card">
48+
<a [href]="item.url" target="_blank">{{item.title}}</a>
49+
</div>
7750
</div>
7851
</div>
7952
</div>

‎src/app/step/step.component.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,11 +54,11 @@ $color: #FFA41E;
5454

5555
li {
5656
counter-increment: my-awesome-counter;
57-
margin-top: -30px;
57+
// margin-top: -30px;
5858
padding: 0px 120px 0px 0px;
5959
@media screen and (max-width: $small) {
6060
width: 70vw;
61-
margin-top: -30px;
61+
// margin-top: -30px;
6262
padding: 0px;
6363
}
6464
transform: translate(80px, -60px);
@@ -112,6 +112,8 @@ $color: #FFA41E;
112112
height: 80px;
113113
width: 80px;
114114
img{
115+
margin-top: 30px;
116+
margin-left: 4px;
115117
height: 80px;
116118
vertical-align: middle;
117119
}

0 commit comments

Comments
 (0)