diff --git a/src/app/home/dataList.const.ts b/src/app/home/dataList.const.ts new file mode 100644 index 0000000000000000000000000000000000000000..4d01121e6b6ec4d029d4111730e1648b1dd3ff4a --- /dev/null +++ b/src/app/home/dataList.const.ts @@ -0,0 +1,362 @@ +export const dataList = [ + { + 'city': { + 'id': 2643743, + 'name': 'London', + 'coord': { + 'lon': -0.1258, + 'lat': 51.5085 + }, + 'country': 'GB', + 'population': 0 + }, + 'cod': '200', + 'message': 0.0597013, + 'cnt': 14, + 'list_': [ + { + 'dt': 1546430400, + 'temp': { + 'day': 4, + 'min': -5.23, + 'max': 4, + 'night': -5.23, + 'eve': -0.13, + 'morn': -1.36 + }, + 'pressure': 1049.36, + 'humidity': 0, + 'weather': [ + { + 'id': 800, + 'main': 'Clear', + 'description': 'sky is clear', + 'icon': '01d' + } + ], + 'speed': 3.37, + 'deg': 2, + 'clouds': 0 + }, + { + 'dt': 1546516800, + 'temp': { + 'day': 7.33, + 'min': -7.13, + 'max': 7.33, + 'night': -7.13, + 'eve': -2.57, + 'morn': 1.34 + }, + 'pressure': 1048.26, + 'humidity': 73, + 'weather': [ + { + 'id': 800, + 'main': 'Clear', + 'description': 'sky is clear', + 'icon': '01d' + } + ], + 'speed': 1.92, + 'deg': 350, + 'clouds': 0 + }, + { + 'dt': 1546603200, + 'temp': { + 'day': 1.56, + 'min': -7.9, + 'max': 2.3, + 'night': -3.84, + 'eve': -1.88, + 'morn': -7.9 + }, + 'pressure': 1046.87, + 'humidity': 78, + 'weather': [ + { + 'id': 800, + 'main': 'Clear', + 'description': 'sky is clear', + 'icon': '01d' + } + ], + 'speed': 2.3, + 'deg': 277, + 'clouds': 0 + }, + { + 'dt': 1546689600, + 'temp': { + 'day': 2.85, + 'min': -3.8, + 'max': 3.54, + 'night': -1, + 'eve': 2.45, + 'morn': -3.8 + }, + 'pressure': 1043.75, + 'humidity': 92, + 'weather': [ + { + 'id': 500, + 'main': 'Rain', + 'description': 'light rain', + 'icon': '10d' + } + ], + 'speed': 3.21, + 'deg': 303, + 'clouds': 88, + 'rain': 0.34 + }, + { + 'dt': 1546776000, + 'temp': { + 'day': 4.45, + 'min': 0.69, + 'max': 4.45, + 'night': 1.04, + 'eve': 2.55, + 'morn': 0.69 + }, + 'pressure': 1040.37, + 'humidity': 0, + 'weather': [ + { + 'id': 500, + 'main': 'Rain', + 'description': 'light rain', + 'icon': '10d' + } + ], + 'speed': 3.75, + 'deg': 297, + 'clouds': 92 + }, + { + 'dt': 1546862400, + 'temp': { + 'day': 4.61, + 'min': -3.07, + 'max': 4.61, + 'night': -3.07, + 'eve': 0.6, + 'morn': 1.42 + }, + 'pressure': 1039.55, + 'humidity': 0, + 'weather': [ + { + 'id': 800, + 'main': 'Clear', + 'description': 'sky is clear', + 'icon': '01d' + } + ], + 'speed': 1.98, + 'deg': 314, + 'clouds': 56 + }, + { + 'dt': 1546948800, + 'temp': { + 'day': 4.95, + 'min': 1.45, + 'max': 5.88, + 'night': 5.71, + 'eve': 5.88, + 'morn': 1.45 + }, + 'pressure': 1038.93, + 'humidity': 0, + 'weather': [ + { + 'id': 800, + 'main': 'Clear', + 'description': 'sky is clear', + 'icon': '01d' + } + ], + 'speed': 3.14, + 'deg': 213, + 'clouds': 71 + }, + { + 'dt': 1547035200, + 'temp': { + 'day': 11.64, + 'min': 8.74, + 'max': 11.64, + 'night': 10.89, + 'eve': 11.33, + 'morn': 8.74 + }, + 'pressure': 1030.48, + 'humidity': 0, + 'weather': [ + { + 'id': 500, + 'main': 'Rain', + 'description': 'light rain', + 'icon': '10d' + } + ], + 'speed': 6.9, + 'deg': 261, + 'clouds': 53, + 'rain': 0.34 + }, + { + 'dt': 1547121600, + 'temp': { + 'day': 12.54, + 'min': 8.77, + 'max': 12.54, + 'night': 8.77, + 'eve': 10.37, + 'morn': 11.46 + }, + 'pressure': 1026.72, + 'humidity': 0, + 'weather': [ + { + 'id': 800, + 'main': 'Clear', + 'description': 'sky is clear', + 'icon': '01d' + } + ], + 'speed': 6.71, + 'deg': 292, + 'clouds': 72 + }, + { + 'dt': 1547208000, + 'temp': { + 'day': 11.32, + 'min': 9.37, + 'max': 11.32, + 'night': 9.83, + 'eve': 10.92, + 'morn': 9.37 + }, + 'pressure': 1023.9, + 'humidity': 0, + 'weather': [ + { + 'id': 500, + 'main': 'Rain', + 'description': 'light rain', + 'icon': '10d' + } + ], + 'speed': 6.22, + 'deg': 243, + 'clouds': 75, + 'rain': 0.25 + }, + { + 'dt': 1547294400, + 'temp': { + 'day': 10.72, + 'min': 9.82, + 'max': 10.72, + 'night': 10.45, + 'eve': 10.06, + 'morn': 9.82 + }, + 'pressure': 1013.87, + 'humidity': 0, + 'weather': [ + { + 'id': 500, + 'main': 'Rain', + 'description': 'light rain', + 'icon': '10d' + } + ], + 'speed': 7.32, + 'deg': 203, + 'clouds': 100, + 'rain': 1.6 + }, + { + 'dt': 1547380800, + 'temp': { + 'day': 9.19, + 'min': 5.48, + 'max': 9.28, + 'night': 5.48, + 'eve': 6.64, + 'morn': 9.28 + }, + 'pressure': 999.12, + 'humidity': 0, + 'weather': [ + { + 'id': 501, + 'main': 'Rain', + 'description': 'moderate rain', + 'icon': '10d' + } + ], + 'speed': 5.19, + 'deg': 220, + 'clouds': 94, + 'rain': 8.85 + }, + { + 'dt': 1547467200, + 'temp': { + 'day': 8.05, + 'min': 3.22, + 'max': 8.05, + 'night': 3.22, + 'eve': 5.32, + 'morn': 7.02 + }, + 'pressure': 986.3, + 'humidity': 0, + 'weather': [ + { + 'id': 500, + 'main': 'Rain', + 'description': 'light rain', + 'icon': '10d' + } + ], + 'speed': 8.15, + 'deg': 186, + 'clouds': 92, + 'rain': 0.8 + }, + { + 'dt': 1547553600, + 'temp': { + 'day': 7.66, + 'min': 2.62, + 'max': 7.66, + 'night': 4.34, + 'eve': 3.78, + 'morn': 2.62 + }, + 'pressure': 989.42, + 'humidity': 0, + 'weather': [ + { + 'id': 500, + 'main': 'Rain', + 'description': 'light rain', + 'icon': '10d' + } + ], + 'speed': 3.5, + 'deg': 199, + 'clouds': 34, + 'rain': 2.8 + } + ] + } +]; diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 57457944de6c44c7350e59fbb20937182e4eaa2b..cf5a34464d93fd8b2d2768e71c932445d46e31e7 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -2,6 +2,7 @@ cnt:
城市資訊;
+ @@ -13,6 +14,17 @@ cnt:
+ + + + + + + + + + +
id name lon lat
{{item.city.id}}{{item.city.name}}{{item.city.coord.lon}}{{item.city.coord.lat}}{{item.city.country}}{{item.city.population}}
天氣資訊;
@@ -39,5 +51,59 @@ cnt:
+ + + + + + + + + + + + + + + + + + + +
description icon
+ {{item.list_.dt}} + + {{item.list_.temp.day}} °C + + {{item.list_.temp.min}} °C + + {{item.list_.temp.max }} °C + + {{item.list_.temp.night }} °C + + {{item.list_.temp.eve }} °C + + {{item.list_.temp.morn }} °C + + {{item.list_.pressure}} hpa + + {{item.list_.humidity}} % + + {{item.list_.weather.id }} + + {{item.list_.weather.main }} + + {{item.list_.weather.description }} + + {{item.list_.weather.icon }} + + {{item.list_.speed}} meter/sec + + {{item.list_.deg}} ° + + {{item.list_.clouds}} % + + {{item.list_.rain}} +

diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 33fd77077e85c8529f9abf3454b8decb6ca81917..46547fa2af817e507dff43ce2a5f33cebf42d81c 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { dataList } from './dataList.const'; @Component({ selector: 'app-home', @@ -7,6 +8,8 @@ import { Component, OnInit } from '@angular/core'; }) export class HomeComponent implements OnInit { + list = dataList; + constructor() { } ngOnInit() { diff --git a/src/app/p2/data.ts b/src/app/p2/data.ts new file mode 100644 index 0000000000000000000000000000000000000000..c79e1d93e2b407c86a4e4e0960e6084a2dc439a9 --- /dev/null +++ b/src/app/p2/data.ts @@ -0,0 +1,17 @@ +export class Data { + + name: string; + price: any; + quantity: any; + + + constructor(name: string, price: any, quantity: any) { + + this.name = name; + this.price = price; + this.quantity = quantity; + + + } + + } diff --git a/src/app/p2/message.ts b/src/app/p2/message.ts deleted file mode 100644 index 4f57ac1d67344707357985adb199d738bdc12e17..0000000000000000000000000000000000000000 --- a/src/app/p2/message.ts +++ /dev/null @@ -1,15 +0,0 @@ -export class Message { - - name: string; - price: string; - quantity: string; - - constructor(name: string, price: string, quantity: string) { - - this.name = name; - this.price = price; - this.quantity = quantity; - - } - - } diff --git a/src/app/p2/p2.component.html b/src/app/p2/p2.component.html index 546c0740ed08389d5c1373a40898bfde965913f9..7bb7849a40114de854e035c91319fb213f9387f7 100644 --- a/src/app/p2/p2.component.html +++ b/src/app/p2/p2.component.html @@ -1,7 +1,7 @@

題二

-
+

- 單品：
+ 單品：
單價：
數量：
你購買 {{ name }} 商品，單價 {{ price }} 元，數量{{ quantity }}元，共計NT${{ price * quantity}} 元 @@ -19,18 +19,18 @@ 小計 - + - - {{ message.name }} - {{ message.price }} - {{ message.quantity }} - {{ message.price * message.quantity}} + + {{ data.name }} + {{ data.price }} + {{ data.quantity }} + {{ data.price * data.quantity}} 加總 - {{total}} + {{ totalPrice() }}
diff --git a/src/app/p2/p2.component.ts b/src/app/p2/p2.component.ts index aa263ad89a8fb9a615df2ff8d074b6fc77f43226..17201c42c417a6adeb8934b66e71a396e7a5872e 100644 --- a/src/app/p2/p2.component.ts +++ b/src/app/p2/p2.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Message } from './message'; +import { Data } from './data'; @Component({ selector: 'app-p2', @@ -14,26 +14,48 @@ export class P2Component implements OnInit { quantity = ''; - messages: Message[] = []; + datas: Data[] = []; result = 0; + total = ''; - addMessage(): void { + message = ''; + + buildMessage(): void { + if (this.name !== null && this.price !== null && this.quantity !== null && + this.name !== undefined && this.price !== undefined && this.quantity !== undefined + ) { + this.message = "你購買" + this.name + "商品，單價" + this.price + "元，數量" + + this.quantity + "元，共計NT$"; + } + + } + + addData(): void { // 防呆，避免名稱或內容是空值時也可以留言 if ( !this.name.trim() && !this.price.trim() && !this.quantity.trim() ) { - return; + return alert('項目資訊沒填好'); } // 用名稱跟內容產生一個留言的資料物件 - const message = new Message(this.name, this.price, this.quantity); + const data = new Data(this.name, this.price, this.quantity); + // 將留言的資料物件放進容器裡 - this.messages.push(message); + this.datas.push(data); + } - deleteItem(): void { - alert('清空啦'); + + totalPrice(){ + return '算不出來'; + } + + deleteItem(name): void { + console.log(name); + // if(this.datas[i]['name'] == name) + // this.datas.splice(this.datas, 1); } constructor() { } diff --git a/src/app/p3/p3.component.html b/src/app/p3/p3.component.html index d737df63fef245de127b9743cdee05d791c406eb..833a04a276a4eab8d28beb1958dc68db48025d01 100644 --- a/src/app/p3/p3.component.html +++ b/src/app/p3/p3.component.html @@ -1,5 +1,6 @@

題三

- 寬度 :
- 高度 :
+ 寬度 :
+ 高度 :
+ diff --git a/src/app/p3/p3.component.ts b/src/app/p3/p3.component.ts index a6d7c3fe03bba17dc1e49cb01e114d218ed94ad4..269bcefcb8d276cebb58e677cad1da4dfdadea8e 100644 --- a/src/app/p3/p3.component.ts +++ b/src/app/p3/p3.component.ts @@ -7,9 +7,21 @@ import { Component, OnInit } from '@angular/core'; }) export class P3Component implements OnInit { - constructor() { } + widthLength = '1024'; + heightLength = '768'; + imageUrl = 'http://lorempixel.com//{{widthLength}}/{{heightLength}}/'; - ngOnInit() { + showPic() { + if (this.widthLength !== null && this.heightLength !== null && + this.widthLength !== undefined && this.heightLength !== undefined) { + this.imageUrl = "http://lorempixel.com/" + this.widthLength + "/" + this.heightLength + "/"; + } else { + alert("長度或高度不得為空!"); + } } + constructor() { } + + ngOnInit() { } + }