โปรแกรมแลกเหรียญ ฮิฮี้ โปกโก๊ะจัง

เราจะทำโปรแกรมเแลกเหรียญ จะมีเหรียญ 10 เหรียญ 5 และเหรียญบาท โดยเราจะกรอก จำนวนเงินจากหน้า Template และคำนวณ จำนวนเหรียญทั้งหมดที่แลกได้มีเหรียญอะไรบ้าง

ที่มา https://moneyhub.in.th/wp-content/uploads/2015/08/201508241759.jpg

เริ่มต้นสร้างโปรเจค

ng new change-coins
Would you like to add Angular routing? (y/N) ตอบ y
Which stylesheet format would you like to use? (Use arrow keys) เลือก CSS
.....
รอสักครู่ให้  Successfully initialized git. เป็นอันว่าได้ดปรเจคมาแล้ว
.....
cd change-coins
code .
command + J 
$ ng serve --port=4300 

จะได้หน้าแบบนี้มาที่ Browser localhost:4300

ติดตั้งเจ้า Bootstrap

ติดตั้งเจ้า Bootstrap ลงไปก่อน เพราะเราจะใช้เค้า แต่งหน้าให้เรา

npm install bootstrap

เพิ่ม import ที่ไฟล์ styles.css

@import "~bootstrap/dist/css/bootstrap.css";

ไปที่ไฟล์ app.component.html เพื่อปรับแต่งหน้าเทมเพลต ขึ้นมาใหม่ มาดูโค้ดกัน “จะทำให้สามารถป้อนจำนวนตัวเลขเข้าไปได้ เพื่อจะได้รู้ว่าเราจะได้มากี่เหรียญ เหรียญอะไรบ้าง”

ที่หน้า Browser จะได้เป็นแบบนี้

ไปดูฝั่ง model กัน import ReactiveFormsModule ที่ไฟล์ app.module.ts

import { ReactiveFormsModule } from '@angular/forms';

และนำมาใช้

ทำเสร็จแล้วไปที่ไฟล์ ไปที่ไฟล์ app.component.ts ประกาศตัวแปรกัน “ก่อนอื่น implement OnInit มาก่อน”

ประกาศตัวชื่อ inputCoin เป็น FormControl

และนำตัวแปรที่ประกาศไว้มาใช้ที่ฝั่ง app.component.html ที่ Tag input

[formControl]="ตัวแปร"

ที่หน้า Browser จะได้เลข 30 มาปรากฏที่ช่อง Input Money

กลับไปที่ Model ไฟล์ app.component.ts กัน ทีนี้เราจะให้เขาฟังเวลาที่มีการเปลี่ยนแปลง ที่ฝั่ง Template และรับค่ามาใช้

.pipe(delay(3000)) เอาไว้ให้คอยก่อนหรือคั้นกลางให้ทำตัวนี้ก่อน และทำอย่างอื่น

ที่หน้า Browser จะคอยฟังเวลาเรากรอกอะไรเข้า และกรอกได้เฉพาะตัวเลขเท่านั้น ทีนี้ติดตรงที่ เวลาเรากรอกตัวเลขยังไม่เสร็จดี จะมีค่า null มาแสดง

เราจะเพิ่มเติม โค้ดนี้เข้าไปว่าไม่มีค่า (null) จะไม่ให้ return อะไรออกไป

ที่หน้า Browser ของเรา null หายไปแล้ว ทีนี้เราจะทำคำนวณเงินที่เรากรอก ออกมาเป็นเหรียญกัน เมื่อ กดปุ่ม Check

เรากลับไปที่ไฟล์ app.component.html

เพิ่ม (click)=”onSubmit()” ที่ Tag button พร้อมกับเปลี่ยน property type จาก button เป็น submit

ฝั่ง Dev จะเห็นเป็น error เพราะไม่มี Method onSubmit() เราจะไปที่ไฟล์ app.component.ts เพื่อที่จะเพิ่ม Method นี้กัน

onSubmit(){}

บันทึกแล้วจะหายไป

เราจะประกาศตัวแปร มาเก็บค่าจำนวนเหรียญ ที่แลกได้แต่ละประเภท

มาถึงการคำนวณเหรียญกันแล้วทุกคนนนน :)

การคำนวณเหรียญ

เริ่มด้วยการประกาศตัวแปร inputCoin มาเก็บค่า inputCoin ที่กรอกเข้ามาจากฝั่ง Template

const inputCoin = this.inputCoin.value;

และประกาศตัวแปร change มาอีกตัว ให้มาเก็บค่าของตัวแปร inputCoin

let change = inputCoin;

เราจะเอามา while loop

* การทำงานของ while loop คือ เมื่อเงื่อนไขในประโยค while() เป็น true ก็จะเข้าไปทำงานใน while เมื่อทำงานเสร็จแล้วจะวนกลับมาตรวจสอบซ้ำจนกว่า เงื่อนไขจะเป็น false ถึงจะหลุดออกมา แล้วจบการทำงาน

ตามที่เราได้เขียน อัลกอริทึมแลกเงินนี้ไว้

โค้ดของที่เขียนออกมาได้จะเป็นแบบนี้

Math.floor() คือหารเอาจำนวนเต็ม
% คือหารเอาเศษ

ที่นี้ไปดูที่ฝั่ง Template app.component.html เพื่อที่จะเอามาแสดง เราจะสร้าง div ก้อนใหญ่มาก้อนหนึ่ง สร้างไว้ข้างใน class container

tag div ที่อยู่ข้างใน ให้เงื่อนไขว่า ถ้า > 0 ค่อยให้แสดง ของแต่ละตัว

ไปที่หน้า Browser ของเราแล้วทดสอบกัน ( สำเร็จ) :)

— — — — — — — — — — — — -***** :) — — — — — — — — — — — — — —

ขอบคุณคุณครูของฉัน :)

ลิงก์การใช้งาน Bootstrap ที่ใช้ครั้งนี้มี เรื่องของ Form และ Button

Bootstrap