├── .browserslistrc
├── .editorconfig
├── .gitignore
├── .vscode
├── extensions.json
├── launch.json
└── tasks.json
├── README.md
├── angular.json
├── karma.conf.js
├── package-lock.json
├── package.json
├── src
├── app
│ ├── app-routing.module.ts
│ ├── app.component.css
│ ├── app.component.html
│ ├── app.component.ts
│ ├── app.module.ts
│ ├── components
│ │ ├── card
│ │ │ ├── card-label
│ │ │ │ ├── card-label.component.css
│ │ │ │ ├── card-label.component.html
│ │ │ │ └── card-label.component.ts
│ │ │ ├── card-pricing
│ │ │ │ ├── card-pricing.component.css
│ │ │ │ ├── card-pricing.component.html
│ │ │ │ └── card-pricing.component.ts
│ │ │ ├── card.component.css
│ │ │ ├── card.component.html
│ │ │ └── card.component.ts
│ │ └── menu-bar
│ │ │ ├── menu-bar.component.css
│ │ │ ├── menu-bar.component.html
│ │ │ └── menu-bar.component.ts
│ └── pages
│ │ └── home
│ │ ├── home.component.css
│ │ ├── home.component.html
│ │ └── home.component.ts
├── assets
│ ├── .gitkeep
│ ├── ac-cover.jpg
│ ├── bt-1.jpg
│ ├── bt-4.jpg
│ ├── bt-5.jpg
│ ├── bt-bad-company-2.jpg
│ ├── bt-hardline.jpg
│ └── ps-logo.png
├── environments
│ ├── environment.prod.ts
│ └── environment.ts
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
└── styles.css
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json
/.browserslistrc:
--------------------------------------------------------------------------------
1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 |
5 | # For the full list of supported browsers by the Angular framework, please see:
6 | # https://angular.io/guide/browser-support
7 |
8 | # You can see what browsers were selected by your queries by running:
9 | # npx browserslist
10 |
11 | last 1 Chrome version
12 | last 1 Firefox version
13 | last 2 Edge major versions
14 | last 2 Safari major versions
15 | last 2 iOS major versions
16 | Firefox ESR
17 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see https://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = tab
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.ts]
12 | quote_type = single
13 |
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # Compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 | /bazel-out
8 |
9 | # Node
10 | /node_modules
11 | npm-debug.log
12 | yarn-error.log
13 |
14 | # IDEs and editors
15 | .idea/
16 | .project
17 | .classpath
18 | .c9/
19 | *.launch
20 | .settings/
21 | *.sublime-workspace
22 |
23 | # Visual Studio Code
24 | .vscode/*
25 | !.vscode/settings.json
26 | !.vscode/tasks.json
27 | !.vscode/launch.json
28 | !.vscode/extensions.json
29 | .history/*
30 |
31 | # Miscellaneous
32 | /.angular/cache
33 | .sass-cache/
34 | /connect.lock
35 | /coverage
36 | /libpeerconnection.log
37 | testem.log
38 | /typings
39 |
40 | # System files
41 | .DS_Store
42 | Thumbs.db
43 |
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3 | "recommendations": ["angular.ng-template"]
4 | }
5 |
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
3 | "version": "0.2.0",
4 | "configurations": [
5 | {
6 | "name": "ng serve",
7 | "type": "pwa-chrome",
8 | "request": "launch",
9 | "preLaunchTask": "npm: start",
10 | "url": "http://localhost:4200/"
11 | },
12 | {
13 | "name": "ng test",
14 | "type": "chrome",
15 | "request": "launch",
16 | "preLaunchTask": "npm: test",
17 | "url": "http://localhost:9876/debug.html"
18 | }
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
3 | "version": "2.0.0",
4 | "tasks": [
5 | {
6 | "type": "npm",
7 | "script": "start",
8 | "isBackground": true,
9 | "problemMatcher": {
10 | "owner": "typescript",
11 | "pattern": "$tsc",
12 | "background": {
13 | "activeOnStart": true,
14 | "beginsPattern": {
15 | "regexp": "(.*?)"
16 | },
17 | "endsPattern": {
18 | "regexp": "bundle generation complete"
19 | }
20 | }
21 | }
22 | },
23 | {
24 | "type": "npm",
25 | "script": "test",
26 | "isBackground": true,
27 | "problemMatcher": {
28 | "owner": "typescript",
29 | "pattern": "$tsc",
30 | "background": {
31 | "activeOnStart": true,
32 | "beginsPattern": {
33 | "regexp": "(.*?)"
34 | },
35 | "endsPattern": {
36 | "regexp": "bundle generation complete"
37 | }
38 | }
39 | }
40 | }
41 | ]
42 | }
43 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Store
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.1.2.
4 |
5 | ## Development server
6 |
7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
8 |
9 | ## Code scaffolding
10 |
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 |
13 | ## Build
14 |
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16 |
17 | ## Running unit tests
18 |
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 |
21 | ## Running end-to-end tests
22 |
23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
24 |
25 | ## Further help
26 |
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
28 |
--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "store": {
7 | "projectType": "application",
8 | "schematics": {},
9 | "root": "",
10 | "sourceRoot": "src",
11 | "prefix": "app",
12 | "architect": {
13 | "build": {
14 | "builder": "@angular-devkit/build-angular:browser",
15 | "options": {
16 | "outputPath": "dist/store",
17 | "index": "src/index.html",
18 | "main": "src/main.ts",
19 | "polyfills": "src/polyfills.ts",
20 | "tsConfig": "tsconfig.app.json",
21 | "assets": [
22 | "src/favicon.ico",
23 | "src/assets"
24 | ],
25 | "styles": [
26 | "src/styles.css"
27 | ],
28 | "scripts": []
29 | },
30 | "configurations": {
31 | "production": {
32 | "budgets": [
33 | {
34 | "type": "initial",
35 | "maximumWarning": "500kb",
36 | "maximumError": "1mb"
37 | },
38 | {
39 | "type": "anyComponentStyle",
40 | "maximumWarning": "2kb",
41 | "maximumError": "4kb"
42 | }
43 | ],
44 | "fileReplacements": [
45 | {
46 | "replace": "src/environments/environment.ts",
47 | "with": "src/environments/environment.prod.ts"
48 | }
49 | ],
50 | "outputHashing": "all"
51 | },
52 | "development": {
53 | "buildOptimizer": false,
54 | "optimization": false,
55 | "vendorChunk": true,
56 | "extractLicenses": false,
57 | "sourceMap": true,
58 | "namedChunks": true
59 | }
60 | },
61 | "defaultConfiguration": "production"
62 | },
63 | "serve": {
64 | "builder": "@angular-devkit/build-angular:dev-server",
65 | "configurations": {
66 | "production": {
67 | "browserTarget": "store:build:production"
68 | },
69 | "development": {
70 | "browserTarget": "store:build:development"
71 | }
72 | },
73 | "defaultConfiguration": "development"
74 | },
75 | "extract-i18n": {
76 | "builder": "@angular-devkit/build-angular:extract-i18n",
77 | "options": {
78 | "browserTarget": "store:build"
79 | }
80 | },
81 | "test": {
82 | "builder": "@angular-devkit/build-angular:karma",
83 | "options": {
84 | "main": "src/test.ts",
85 | "polyfills": "src/polyfills.ts",
86 | "tsConfig": "tsconfig.spec.json",
87 | "karmaConfig": "karma.conf.js",
88 | "assets": [
89 | "src/favicon.ico",
90 | "src/assets"
91 | ],
92 | "styles": [
93 | "src/styles.css"
94 | ],
95 | "scripts": []
96 | }
97 | }
98 | }
99 | }
100 | },
101 | "cli": {
102 | "analytics": false
103 | }
104 | }
105 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | jasmine: {
17 | // you can add configuration options for Jasmine here
18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 | // for example, you can disable the random execution with `random: false`
20 | // or set a specific seed with `seed: 4321`
21 | },
22 | clearContext: false // leave Jasmine Spec Runner output visible in browser
23 | },
24 | jasmineHtmlReporter: {
25 | suppressAll: true // removes the duplicated traces
26 | },
27 | coverageReporter: {
28 | dir: require('path').join(__dirname, './coverage/store'),
29 | subdir: '.',
30 | reporters: [
31 | { type: 'html' },
32 | { type: 'text-summary' }
33 | ]
34 | },
35 | reporters: ['progress', 'kjhtml'],
36 | port: 9876,
37 | colors: true,
38 | logLevel: config.LOG_INFO,
39 | autoWatch: true,
40 | browsers: ['Chrome'],
41 | singleRun: false,
42 | restartOnFileChange: true
43 | });
44 | };
45 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "store",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "watch": "ng build --watch --configuration development",
9 | "test": "ng test"
10 | },
11 | "private": true,
12 | "dependencies": {
13 | "@angular/animations": "^14.1.0",
14 | "@angular/common": "^14.1.0",
15 | "@angular/compiler": "^14.1.0",
16 | "@angular/core": "^14.1.0",
17 | "@angular/forms": "^14.1.0",
18 | "@angular/platform-browser": "^14.1.0",
19 | "@angular/platform-browser-dynamic": "^14.1.0",
20 | "@angular/router": "^14.1.0",
21 | "rxjs": "~7.5.0",
22 | "tslib": "^2.3.0",
23 | "zone.js": "~0.11.4"
24 | },
25 | "devDependencies": {
26 | "@angular-devkit/build-angular": "^14.1.2",
27 | "@angular/cli": "~14.1.2",
28 | "@angular/compiler-cli": "^14.1.0",
29 | "@types/jasmine": "~4.0.0",
30 | "jasmine-core": "~4.2.0",
31 | "karma": "~6.4.0",
32 | "karma-chrome-launcher": "~3.1.0",
33 | "karma-coverage": "~2.2.0",
34 | "karma-jasmine": "~5.1.0",
35 | "karma-jasmine-html-reporter": "~2.0.0",
36 | "typescript": "~4.7.2"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { RouterModule, Routes } from '@angular/router';
3 |
4 | const routes: Routes = [];
5 |
6 | @NgModule({
7 | imports: [RouterModule.forRoot(routes)],
8 | exports: [RouterModule]
9 | })
10 | export class AppRoutingModule { }
11 |
--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/felipeAguiarCode/angular-psn-store-clone/594c87c89b84556a111dd0a10f87efb7316d6d88/src/app/app.component.css
--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html',
6 | styleUrls: ['./app.component.css']
7 | })
8 | export class AppComponent {
9 | title = 'store';
10 | }
11 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 |
4 | import { AppRoutingModule } from './app-routing.module';
5 | import { AppComponent } from './app.component';
6 | import { HomeComponent } from './pages/home/home.component';
7 | import { CardComponent } from './components/card/card.component';
8 | import { MenuBarComponent } from './components/menu-bar/menu-bar.component';
9 | import { CardLabelComponent } from './components/card/card-label/card-label.component';
10 | import { CardPricingComponent } from './components/card/card-pricing/card-pricing.component';
11 |
12 | @NgModule({
13 | declarations: [
14 | AppComponent,
15 | HomeComponent,
16 | CardComponent,
17 | MenuBarComponent,
18 | CardLabelComponent,
19 | CardPricingComponent
20 | ],
21 | imports: [
22 | BrowserModule,
23 | AppRoutingModule
24 | ],
25 | providers: [],
26 | bootstrap: [AppComponent]
27 | })
28 | export class AppModule { }
29 |
--------------------------------------------------------------------------------
/src/app/components/card/card-label/card-label.component.css:
--------------------------------------------------------------------------------
1 | .card-label__container{
2 | position: absolute;
3 | bottom:90px;
4 | right: 0;
5 | }
6 |
7 | .card-label__content{
8 | display: flex;
9 | align-items: center;
10 | justify-content: center;
11 | background-color: #0d0d0d;
12 | color: white;
13 | font-size: 12px;
14 | font-family: 'Segoe UI';
15 | font-weight: bold;
16 | height: 40px;
17 | padding: 0px 50px;
18 | }
19 |
--------------------------------------------------------------------------------
/src/app/components/card/card-label/card-label.component.html:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/app/components/card/card-label/card-label.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-card-label',
5 | templateUrl: './card-label.component.html',
6 | styleUrls: ['./card-label.component.css']
7 | })
8 | export class CardLabelComponent implements OnInit {
9 |
10 | @Input()
11 | gameLabel:string=""
12 |
13 | constructor() { }
14 |
15 | ngOnInit(): void {
16 | }
17 |
18 | }
19 |
--------------------------------------------------------------------------------
/src/app/components/card/card-pricing/card-pricing.component.css:
--------------------------------------------------------------------------------
1 | .card-pricing__container{
2 | position: absolute;
3 | bottom:0px;
4 | left: 0;
5 | display: flex;
6 | flex-direction: column;
7 | width: 100%;
8 | height: 70px;
9 | background-color: rgba(0,0,0,0.8);
10 | padding: 10px;
11 | color: antiquewhite;
12 | font-family: Calibri;
13 | }
14 |
15 | .card-pricing__title{
16 | margin-bottom: 3px;
17 | }
18 |
19 | .card-pricing__value{
20 | display: flex;
21 | flex-direction: row;
22 | justify-content: space-between;
23 | }
24 |
25 | .card-pricing__value__console{
26 | display: flex;
27 | flex-direction: row;
28 | }
29 |
30 | .card-pricing__value__console > span{
31 | font-weight: bolder;
32 | color:aqua;
33 | margin-right: 10px;
34 | }
35 |
--------------------------------------------------------------------------------
/src/app/components/card/card-pricing/card-pricing.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Play it Now!
4 |
5 |
6 |
7 |
|
8 |
{{gameType}}
9 |
10 |
13 |
14 |
![]()
8 |
11 |
12 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/app/components/card/card.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-card',
5 | templateUrl: './card.component.html',
6 | styleUrls: ['./card.component.css']
7 | })
8 | export class CardComponent implements OnInit {
9 |
10 | @Input()
11 | gameCover:string = ""
12 | @Input()
13 | gameLabel:string=""
14 | @Input()
15 | gameType:string ="XPTO | PS4"
16 | @Input()
17 | gamePrice:string = "R$ 399,90"
18 |
19 | constructor() { }
20 |
21 | ngOnInit(): void {
22 | }
23 |
24 | }
25 |
--------------------------------------------------------------------------------
/src/app/components/menu-bar/menu-bar.component.css:
--------------------------------------------------------------------------------
1 | .menu-bar__container{
2 | display: flex;
3 | flex-direction: row;
4 | position: fixed;
5 | z-index: 999;
6 | background-color: #ffffff;
7 | width: 100%;
8 | height: 40px;
9 | box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
10 | }
11 |
12 | .menu-bar__logo{
13 | margin-left: 30px;
14 | display: flex;
15 | align-items: center;
16 | }
17 |
18 | .menu-bar__item{
19 | display: flex;
20 | margin:auto;
21 | align-items: center;
22 | }
23 |
24 | .menu-bar__item > ul{
25 | display: flex;
26 | list-style-type: none;
27 | }
28 |
29 | .menu-bar__item > ul > li {
30 | padding: 5px;
31 | margin-right: 15px;
32 | }
33 |
34 | .menu-bar__item > ul > li > a {
35 | text-decoration: none;
36 | padding: 5px;
37 | color: rgb(7, 7, 7);
38 | font-family: 'Segoe UI';
39 | }
40 |
41 | .menu-bar__item > ul > li > a:hover {
42 | color: blue;
43 | font-weight: 600;
44 | }
45 |
--------------------------------------------------------------------------------
/src/app/components/menu-bar/menu-bar.component.html:
--------------------------------------------------------------------------------
1 |
19 |
--------------------------------------------------------------------------------
/src/app/components/menu-bar/menu-bar.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-menu-bar',
5 | templateUrl: './menu-bar.component.html',
6 | styleUrls: ['./menu-bar.component.css']
7 | })
8 | export class MenuBarComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit(): void {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/pages/home/home.component.css:
--------------------------------------------------------------------------------
1 | .home__container{
2 | width: 90%;
3 | margin: auto;
4 | padding-top: 50px;
5 | display: flex;
6 |
7 | justify-content: space-around;
8 | align-items: baseline;
9 | flex-wrap: wrap;
10 | }
11 |
--------------------------------------------------------------------------------
/src/app/pages/home/home.component.html:
--------------------------------------------------------------------------------
1 |
2 |
8 |
9 |
15 |
16 |
22 |
23 |
29 |
30 |
10 |