Web App—Simple binary to decimal converter

เย็นวันศุกร์เปิดดู Google map แล้วก็ต้องทำใจนั่งรอให้รถหายติดที่ Office ต่อไป แล้วก็นั่งเล่นไปเรื่อยจนไปเจอนี่เข้า 80+App Ideas จะรออะไรละครับอีกนานกว่ารถจะหายติด จัดไปในแบบระดับ Tier: 1-Beginner 😆😆😆 และด้วยที่เริ่มทำความรู้จักกับ Vue.js อยู่ก็เลยเอามาใช้ในนี้ซะเลย

สรุปง่ายๆ เลยคือ ผมจะทำ App : Binary-to-Decimal number converter (เปลี่ยนเลขฐาน 2 มาเป็นฐาน 10 นั่นเอง) โดยผมจะใช้ Vue.js มาช่วยในการแสดงผลที่บอกได้เลยว่า 💗 Vue และใช้บริการของ Netlify ในการเป็น Hosting ที่ลองใช้เพียงครั้งแรกก็เรียกได้ว่าง่ายสุดๆ อีกแล้ว 💗 (แอบนอกใจ Firebase🔥) ใครที่อยากลองเล่นดูก่อนไปลองเล่นได้ที่ https://bin2dec-adamblog.netlify.app/

ยาวไปไม่อยากอ่านก็ไป Copy ที่ https://github.com/ChaiyachetU/Bin2Dec ได้เลย

แต่ถ้าใครพอมีเวลาก็ตามมาดูแนวทางกันเลยครับ


1. เริ่มจาก HTML, CSS ก่อนเลย

สร้าง HTML และ CSS ให้ได้หน้าตา App ตามที่ต้องการก่อน โดยหลักๆ เลยมีช่อง Input ให้กรอกเลขฐาน 2 และส่วนแสดงผลเลขฐาน 10 และให้มีข้อความเตือนกรณีที่ไม่ได้กรอกเลขฐาน 2 (เลข 0 กับ 1 เท่านั้น)

HTML

CSS

จะได้ออกมาประมาณนี้


2. ใช้ Vue.js ในการแสดงผล และคำนวณแปลงเลขฐาน 2 มาเป็นฐาน 10

— เริ่มจากติดตั้ง Vue ด้วยการเพิ่ม script tag ในส่วนของ <head></head>

— กำหนด Vue attribute ใน tag ที่ต้องการ

No. 1 —> v-bind:class | เป็นการเพิ่ม Class ตามเงื่อนไขที่กำหนด นั่นคือฟังก์ชัน handleBinaryInput ในไฟล์ app.js (ข้อ 3) ที่จะตรวจสอบว่าค่าที่กรอกเป็นเลข 0 หรือ 1 เท่านั้นหรือไม่

No.2 —> v-model | รับค่าที่ผู้ใช้งานกรอกในช่อง Input ไปที่ตัวแปร binary

No.3 —> {{ bin2dec }} | แสดงผลการคำนวณจากฟังก์ชัน bin2dec ในไฟล์ app.js (ข้อ 3)


3. app.js

— ทำการเรียกใช้งาน Vue.js และกำหนดตัวแปร ฟังก์ชันการคำนวณให้ตรงตามข้อ 2 จะได้ออกมาแบบนี้ รายละเอียดอ่านได้ที่ https://vuejs.org/v2/guide/

— จะได้ผลลัพธ์ออกมาประมาณนี้


ท้ายสุด การได้เอาบทเรียนต่างๆ มาลองใช้งานจริงๆ มันทำให้เราเข้าใจได้มากขึ้น ประยุกต์ใช้งานได้มากขึ้น และยังได้แนวทางนำไปใช้ในงานจริงๆ ได้อีก ถึงจะเป็นเพียงพื้นฐานมันก็สมควรที่จะทำให้เข้าใจไว้ ดังคำกล่าวที่ว่า

Practice Makes Perfect


โปรโมชั่น คูปองส่วนลด และดีล ที่ดีที่สุดของร้านค้าออนไลน์กว่า 300 แบรนด์พร้อมรับเงินคืนจาก ShopBack
 https://bit.ly/3c4tlmV

Ruk-Com จดโดเมน-เช่าโฮสต์ ราคาประหยัด พร้อมให้บริการใน 1 นาที
 http://bit.ly/36q8A12