Trích Dẫn Ngẫu Nhiên HTML CSS & JavaScript

Trích dẫn ngẫu nhiên được sử dụng để tạo báo giá ngẫu nhiên. Trong dự án Trình tạo Trích dẫn Ngẫu nhiên này, như bạn có thể thấy trong hình ảnh xem trước, có một báo giá sẽ được thay đổi ngẫu nhiên, một nút và một số biểu tượng.

Mỗi lần bạn nhấp vào nút báo giá mới, bạn sẽ nhận được báo giá mới. Bạn cũng có thể chuyển đổi một trích dẫn thành bài phát biểu, sao chép trích dẫn hoặc chia sẻ trích dẫn trên Twitter bằng cách nhấp vào nút đã cho.

Nếu bạn cảm thấy khó hiểu những gì tôi đang nói thì bạn có thể xem bản demo hoặc video hướng dẫn đầy đủ của dự án Random Quote Generator này.

Trong video, bạn đã xem bản giới thiệu hoặc video hướng dẫn đầy đủ của trình tạo báo giá ngẫu nhiên này và biết cách tôi tạo nó bằng cách sử dụng HTML CSS & JavaScript. Để hiển thị các trích dẫn ngẫu nhiên, tôi đã sử dụng một API miễn phí có tên là quotable (https://quotable.io/random). Bạn có thể sử dụng bất kỳ API nào khác cho dự án này.

Tôi hy vọng bạn thích trình tạo báo giá ngẫu nhiên này và hiểu các mã cơ bản của nó. Nếu bạn thích dự án này và muốn lấy mã nguồn hoặc tệp thì bạn có thể dễ dàng lấy nó từ cuối trang này.

Tuy nhiên, trước khi bạn sao chép-dán mã, hãy hiểu các mã JavaScript chính và các khái niệm đằng sau việc tạo trình tạo báo giá ngẫu nhiên này. Trong các mã JavaScript, đầu tiên: Tôi đã gọi một hàm randomQuotes () trên nút trích dẫn mới được nhấp vào.

Bên trong chức năng này, bằng cách sử dụng API có thể xác định, tôi đã tìm nạp các trích dẫn ngẫu nhiên và hiển thị chúng trên Ứng dụng Trích dẫn. Thứ hai: đối với chức năng TTS (Text To Speech), không có API bên ngoài nào được sử dụng và có thể sử dụng API Web Speech của JavaScript.

Thứ ba: để sao chép đoạn trích dẫn, tôi đã sử dụng thuộc tính writeText () của đối tượng điều hướng. Cuối cùng: để chia sẻ lên Twitter, tôi đã chuyển văn bản trích dẫn trong URL Tweet và sử dụng phương thức window open (), tôi đã mở URL này trong tab mới.

Để tạo dự án Trình tạo Báo giá Ngẫu nhiên này. Đầu tiên, bạn cần tạo ba Tệp: Tệp HTML, CSS & JavaScript. Sau khi tạo các tệp này, chỉ cần dán các mã đã cho vào tệp của bạn. Bạn cũng có thể tải xuống các tệp mã nguồn của Ứng dụng Trình tạo Báo giá này từ nút tải xuống nhất định.

Đầu tiên, tạo một tệp HTML với tên là index.html và dán các mã đã cho vào tệp HTML của bạn. Hãy nhớ rằng, bạn phải tạo một tệp có đuôi .html.

DEMO : https://bit.ly/3dqK0Dd

Đó là tất cả, bây giờ bạn đã xây dựng thành công Trình tạo Báo giá Ngẫu nhiên trong HTML CSS & JavaScript. Nếu mã của bạn không hoạt động hoặc bạn gặp phải bất kỳ sự cố nào, vui lòng tải xuống các tệp mã nguồn từ nút tải xuống đã cho. Nó miễn phí và một tệp .zip sẽ được tải xuống sau đó bạn giải nén nó.

Full Source Code : https://pastebin.com/6TEHfJRd

Chúc các bạn thành công.

Nguồn : https://bit.ly/3DwwwAC