Những dự án nho nhỏ cho những bạn "Em đã học Javascript cơ bản"

Những dự án để bạn có thể luyện tập những kiến thức cơ bản của mình và tạo ra một website “NGẦU”

Nếu bạn đang nỗ lực áp dụng những kiến thức Javascript (Js) cơ bản mà bạn đã học được, thì giải pháp rất đơn giản: Làm cái gì đó nhỏ nhỏ xinh xinh mà bạn có thể nghĩ đến.

Sau đó, làm cho ứng dụng của bạn thêm một số chức năng khác nữa mà bạn nghĩ nó cần có. Và rồi lại làm thêm một cái, rồi lại một cái, một cái nữa và cứ thế tiếp tục đến lúc mà bạn nghĩ có thể khoe thành quả đó cho bạn bè và gia đình xem.

Đây là những hình ảnh của tất cả các dự án: https://imgur.com/a/hQPGr


Dự án 1: Hello Name!

Tạo một ứng dụng nhỏ lấy dữ liệu từ người dùng rồi sau đó in lại cho họ xem.
Yêu cầu:

  • Nên hỏi người sử dụng tên của họ với thẻ input
  • Nên có nút kích hoạt khi nào thì in
  • Nên in ra “Hello NAME!”

Dự án 2: Máy tính tiền điện thoại

Dự án này là một bài tập trong một cuốn sách miễn phí là You Don’t Know JS: Up & Going
Mức khó hơn của dự án này là đưa nó ra ngoài khỏi cái console. Làm cho nó có thể nhận được dữ liệu từ người dùng bằng thẻ input và các button.

Dự án 3: Trò chơi may rủi

Tạo ra một trò chơi nhỏ giống như tung đồng xu
Yêu cầu:

  • Nên có button để cho người chơi “tung đồng xu”
  • Nên so sánh kết quả của người chơi với kết quả của máy tính
  • Nên in ra “YOU LOST!” hoặc là “YOU WON!”
  • Nên chọn màu chữ phù hợp tùy thuộc vào người chơi thắng hay thua

Dự án 4: Carousel/Slideshow

Tạo ra một cái Carousel để thay đổi hình ảnh hiển thị mỗi lần nhấn button. Dạng giống vậy này

Dự án 5: Đồng hồ đếm ngược

Tạo ra một cái đồng hồ đếm ngược để đếm ngược tới ngày sinh nhật tiếp theo của bạn hoặc là ngày sinh nhật của gấu cũng được. Na ná thế này
Yêu cầu:

  • Cho phép đặt ngày kết thúc
  • Tính thời gian từ bây giờ đến ngày kết thúc
  • Hiển thị thời gian đó
  • Dừng đồng hồ và hiện thị một thông báo khi mà thời gian bằng 0

Một vài lưu ý nhỏ:

1. Nếu tôi không thích làm mấy cái giống như thế này thì sao?

Danh sách trên chỉ giống như một hướng dẫn thôi. Không có qui định nào về việc “đúng” hay “sai”. Làm bất cứ cái nào bạn thích.

2. Có cần chau chuốt hiệu ứng, màu mè không?

Không. Mục đích của bạn là học cách kết hợp Javascript với HTML/CSS. Bạn không cần phải lo lắng về việc phải làm cho cái ứng dụng nhìn nó lộng lẫy cho tới khi bạn hoàn thành nó.

3. Nếu tôi không biết về DOM thì sao?

Tôi gợi ý cho bạn vài video hướng dẫn của The Web Developer Bootcamp. Thường khóa học này giảm giá còn chỉ khoảng $12 -> $15.
Còn nếu mà không thích coi videos, đây là một bài viết mà bạn có thể tìm hiểu.

4. Đôi lúc muốn code lắm, mà nhìn cái text editor trống trơn thì chả muốn làm gì nữa

Nếu bạn chưa từng tự mình làm xây dựng một dự án thì rất khó cho bạn biết được bạn cần làm cái gì. Tôi nghĩ bạn nên thử Watch & Code. Nó là một khóa học miễn phí có thể giúp bạn xây dựng các dự án. Gordon (chắc là cái ông founder của site trên) thực sự hiểu được những bạn mới bắt đầu nghĩ gì.

5. Đang làm mà bí thì làm gì?

Search Google thôi bạn hiền :heart:
Nguồn tham khảo tin cậy nhất về Javascript mà tôi có thể gợi ý cho bạn là Mozilla Development Network
Bạn cũng có thể vác xác lên StackOverflow và Reddit để xem coi có ai đã gặp khó khăn với cái vấn đề như của bạn chưa

KẾT LUẬN

Tôi mong là nó giúp ích cho bạn! Nếu có bất kì câu hỏi nào, để lại comment ở dưới nhé. Dưới Daynhauhoc cũng được, không thì Là ở đây - Bài viết gốc
Nói chung là, tôi là một Javascript developer tự học đầy tham vọng. Còn nếu muốn biết thêm thông tin về tôi, thì ghé thăm website của tôi nhé :wink:

5 Likes

Tuyệt vời, cảm ơn bạn đã chia sẻ :smiley:

Cái đầu tiên là sample của angularjs đây mà :rofl:

Cho em xin đoạn code của project đầu tiên đc không ạ

Đề bài để cơ bản để cho luyện tập cũng đi xin cho được

anh thông cảm tại em làm mãi mà nó ko ra với đâu phải cơ bản là mọi người đều làm được em mới tiếp cận nên làm mà không ra nếu ạn có lòng tốt thì anh giúp em còn không giúp thì anh cũng ko nên gửi mail lm j như vậy không hay đâu ạ,

Nếu em làm không được thì sao em không đưa đoạn code của em lên đây? MN sẽ chỉ chỗ của em sai. Nó sẽ nhanh để em khắc phục. Đưa source lên cho em. Em ngồi mò xem mất nữa ngày rồi cũng không biết sai ở đâu. Thế sn xem có tốn time không?

4 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?