JS00 — Count Passenger App (part 2)

Tạo function save()

Thực hành

Task 1

let countEl = document.getElementById("count-el")
let count = 0
function increment() {
    count = count + 1
    countEl.innerText = count
}
// 1. Tạo function `save()` để lưu lại `count`, tạm thời function này sẽ log giá trị của `count` ra console khi được called.

Task 2

<h1>People entered:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn" onclick="increment()">INCREMENT</button>
<!-- 2. Tạo nút SAVE với id là 'save-btn', call function save() 
khi nút này được click. -->

Đáp án

Task 1

//JS
let countEl = document.getElementById("count-el")
let count = 0
function increment() {
    count = count + 1
    countEl.innerText = count
}
function save() {
    console.log(count)
}
// call save() để xác nhận giá trị hiện tại của count ở console
save()
// sau đó xoá line gọi save()

Task 2

<!-- HTML -->
<h1>People entered:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn" onclick="increment()">INCREMENT</button>
<button id="save-btn" onclick="save()">SAVE</button>

Sau khi hoàn thành 2 task này, xoá dòng code gọi save() ở JS. Click nút SAVE sẽ log giá trị hiện tại của count ra console.

Bước tiếp theo ta phải lấy giá trị của count và hiển thị ra app. Trước khi làm việc này, ta sẽ tìm hiểu một chút về string.

String

Mục tiêu là thêm tính năng lưu lại số khách lên tàu cho mỗi chuyến như hình dưới đây.

string sẽ giúp ta làm được việc này.

Khi tạo biến string, giá trị của string được bỏ trong ngoặc

let greeting = "Hello"
let customer = "Phong"
let customerGreeting = greeting + customer
console.log(customerGreeting)
// "Hello Phong"

Nếu muốn thêm string vào biến customerGreeting ta có thể làm như sau:

let greeting = "Hello"
let customer = "Phong"
// Thêm , và !
let customerGreeting = greeting + "," + customer + "!"
console.log(customerGreeting)
// "Hello, Phong!"

Việc sử dụng dấu + để ghép các string lại với nhau gọi là string concatenation

Thực hành

• Tạo biến name và gán tên bạn cho nó.
• Tạo biến greeting và cho nó giá trị Hi, my name is
• Tạo biến myGreeting và concatenate biến name và greeting
• Log `myGreeting` ra console

Lưu ý khoảng trắng giữa 2 string.

Trong JS, khi concatenate string và integer (số nguyên) sẽ cho kết quả là string

let myAge = 20
let yourAge = 23
// lưu ý giá trị số của biến không nằm trong ngoặc "" hoặc ''

let greeting = "Hi, I am "
let myGreeting = greeting + myAge + " years old"

console.log(myGreeting)
// output: Hi, I am 20 years old
// giá trị của myGreeting thuộc loại (type of) string

let ageDifference = yourAge - myAge
console.log(ageDifference)
// output: 2
// giá trị của ageDifference thuộc loại (type of) integer

// để thấy rõ cách JS nhận giá trị gì, chạy thử các lệnh sau
console.log(4 + 5) 
console.log("2" + "4")
console.log("5" + 1)
console.log(100 + "100")

// tips: chạy lệnh typeof để kiểm tra loại giá trị của biến
console.log(typeof myAge)
// output: number

Thực hành

Get Lyam’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Có đoạn code HTML sau

<p id="welcome-el"></p>

• Trong JS, lấy element welcome-el và lưu nó vào biến welcomeEl
• Tạo 2 biến name và greeting với giá trị tên bạn và một lời chào bạn muốn hiển thị trên trang web
• Hiển thị lời chào với tên bạn ra trang web sử dụng welcomeEl.innerText
• Thêm 👋 emoji vào cuối câu

Đáp Án

// Trong JS, lấy element `welcome-el` và lưu nó vào biến `welcomeEl`
let welcomeEl = document.getElementById("welcome-el")

// Tạo 2 biến `name` và `greeting` với giá trị tên bạn và một lời chào bạn muốn hiển thị trên trang web.
let name = "Phong"
let greeting = "Welcome back "

// Hiển thị lời chào với tên bạn ra trang web sử dụng `welcomeEl.innerText`
welcomeEl.innerText = greeting + name

// Thêm 👋 emoji vào cuối câu
welcomeEl.innerText = welcomeEl.innerText + "👋"

Emoji trong JS được coi là string nên được concatenate như mọi string khác.

Tuy nhiên đoạn code này nhìn bị lặp lại welcomeEl.innerText = welcomeEl.innerText + "👋". Đọc ra: gán lại giá trị của welcomeEl.innerText với giá trị hiện tại của chính nó và thêm 👋.

Để tránh lặp lại code, sử dụng += để có welcomeEl.innerText += 👋 và đọc code như trên.

Quay lại với App Count

Sử dụng `+=` để thay `count = count + 1`

let countEl = document.getElementById("count-el")
let count = 0
function increment() {
    // Sử dụng += để thay thế dòng code dưới
    count = count + 1
    countEl.innerText = count
}
function save() {
    console.log(count)
}

Tiếp theo, thêm tag <p> với nội dung "Previous entries: " và id là save-el vào HTML

<h1>People entered:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn" onclick="increment()">INCREMENT</button>
<button id="save-btn" onclick="save()">SAVE</button>
<p id="save-el">Previous entires: </p>

Thực hành

Trong JS, thực hiện:

// 1. Lấy element save-el và lưu vào biến saveEl
let countEl = document.getElementById("count-el")
let count = 0
function increment() {
    count += 1
    countEl.innerText = count
}
function save() {
    // 2. Tạo biến chứa giá trị của count và dấu -, ví dụ: "8- "
    // 3. Hiển thị giá trị biến vừa tạo trong saveEl sử dụng innerText
    // Lưu ý: Không được xoá nội dung hiện tại trong thẻ <p> có id là save-el
    console.log(count)
}

Đáp án

// 1. Lấy element save-el và lưu vào biến saveEl
let saveEl = document.getElementById("save-el")
let countEl = document.getElementById("count-el")
let count = 0

function increment() {
    count += 1
    countEl.innerText = count
}

function save() {
    // 2. Tạo biến chứa giá trị của count và dấu -, ví dụ: "8- "
    let countStr = count + " - "
    // 3. Hiển thị giá trị biến vừa tạo trong saveEl sử dụng innerText
    saveEl.innerText += countStr
    // Lưu ý: Không được xoá nội dung hiện tại trong thẻ <p> có id là save-el
    console.log(count)
}

Chức năng SAVE gần như đã hoàn chỉnh, nhưng có 1 điểm cần sửa:

• Hiển thị trên app giữa dấu : và số count thiếu khoảng trắng

Google cách giải quyết vấn đề này trước khi đọc đáp án.

Tìm kiếm giải pháp online là việc developer làm hàng ngày. Đây là kỹ năng cần thiết. Hint: vấn đề nằm ở innerText. Tìm hiểu tại sao innerText không hiển thị khoảng trắng này. Tìm giải pháp thay thế cho innerText.

Giải pháp thay thế cho innerText là textContent

let saveEl = document.getElementById("save-el")
let countEl = document.getElementById("count-el")
let count = 0

function increment() {
    count += 1
    countEl.textContent = count
}

function save() {
    let countStr = count + " - "
    saveEl.textContent += countStr
}

Reset count khi SAVE

Mỗi lần bấm SAVE, cả giá trị và hiển thị của count nên được trả về 0.

Dành không quá 5 phút để cho ra giải pháp trước khi coi đáp án

let saveEl = document.getElementById("save-el")
let countEl = document.getElementById("count-el")
let count = 0

function increment() {
    count += 1
    countEl.textContent = count
}

function save() {
    let countStr = count + " - "
    saveEl.textContent += countStr
    // reset hiển thị count trên app
    countEl.textContent = 0
    // reset biến count trong JS
    count = 0
}

App Passenger Counter đã hoàn thành!

Code hoàn chỉnh

<!-- HTML -->
<h1>People entered:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn" onclick="increment()">INCREMENT</button>
<button id="save-btn" onclick="save()">SAVE</button>
<p id="save-el">Previous entries:</p>

/* CSS */
body {
  font-weight: bold;
  text-align: center;
}
h1 {
  margin-top: 10px;
  margin-bottom: 10px;
}
h2 {
  font-size: 50px;
  margin-top: 0;
  margin-bottom: 20px;
}
button {
  border: none;
  padding-top: 10px;
  padding-bottom: 10px;
  color: white;
  font-weight: bold;
  width: 200px;
  margin-bottom: 5px;
  border-radius: 5px;
}
#increment-btn {
  background: darkred;
}
#save-btn {
  background: darkgreen;
}

// JS
let saveEl = document.getElementById("save-el");
let countEl = document.getElementById("count-el");
let count = 0;

function increment() {
  count += 1;
  countEl.textContent = count;
}

function save() {
  let countStr = count + " - ";
  saveEl.textContent += countStr;
  countEl.textContent = 0;
  count = 0;
}

Bước tiếp theo:

• Thiết kế lại app theo phong cách của bạn!
• Launch app để khoe kỹ năng frontend với bạn bè, người thân 🥳🥳🥳 (hướng dẫn over shoulder)