Tác giả trích dẫn html ✅ Mới nhất
Thủ Thuật về Tác giả trích dẫn html Chi Tiết
Bùi Thanh Tùng đang tìm kiếm từ khóa Tác giả trích dẫn html được Cập Nhật vào lúc : 2022-12-26 21:15:16 . Với phương châm chia sẻ Thủ Thuật về trong nội dung bài viết một cách Chi Tiết 2022. Nếu sau khi đọc tài liệu vẫn ko hiểu thì hoàn toàn có thể lại Comment ở cuối bài để Tác giả lý giải và hướng dẫn lại nha.Tiếp tục series lập trình JavaScript với FCC, ngày hôm nay mình sẽ ra mắt một dự án công trình bất Động sản thuộc phân mục Front-End trung cấp là Random Quote Machine. Nhưng khác những nội dung bài viết trước, lần này mình yêu thích chia sẻ quy trình từng bước thực hiện, bắt nguồn từ phân tích yêu cầu bài toán, thiết kế UX/UI và xử lý logic trong JavaScript
Nội dung chính Show- Phân tích yêu cầu bài toán Random Quote MachineThiết kế UX/UI cho Random Quote MachineThiết kế UX/UI sử dụng PencilTriển khai UX/UI với HTML5 và CSS3Xử lý logic với JavaScriptLấy làm giá ngẫu nhiên trên ForismaticKết luận
Dưới đây là demo trên Codepen. Ngoài ra, bạn cũng hoàn toàn có thể xem bản demo đầy đủ hơn tại đây
Phân tích yêu cầu bài toán Random Quote Machine
Bản tóm tắt yêu cầu bài toán như sau
- Có một nút được cho phép nhấn vào thì hiển thị một trích dẫn ngẫu nhiên mớiCó những nút để chia sẻ trích dẫn lên social
Ngoài ra, xác định của tớ sẽ đáp ứng thêm một số trong những tính năng khác ví như
- Chia sẻ lên những social khác. Meta, Google Plus, Linkedin,Tổng hợp phần phản hồi Meta
based on request as on, the other section must have on application is
- 1 vùng hiển thị trích dẫn + tên tác giả1 nút để tải làm giá mới4 nút để chia sẻ trích dẫn lên , Meta, Google Plus, Linkedin1 vùng để hiển thị phản hồi Meta
Vấn đề tiếp theo là lấy quote ở đâu?
Theo mình sẽ có 3 phương pháp để bạn thực hiện
- S u tầm quote trên internet, sau đó lưu lại dạng tài liệu tĩnh trong codeSave quote in database as (firebase, mongodb,. )Sử dụng API REST được đáp ứng bởi bên thứ 3
Vì vậy, thời gian tạm thời được phân chia hoàn thành xong những yêu cầu của bài toán Random Quote Machine. Tiếp theo đến phần thiết kế UX/UI
Thiết kế UX/UI cho Random Quote Machine
Vì không phải dân chuyên thiết kế UX/UI, nên giả như có bạn nào là Chuyên Viên trong mảng này mà đọc được thì xin chém nhẹ tay thôi nhé, tội nghiệp mình.
Trước tiên, bàn về thiết kế công cụ. Trong đầu mình hiện ra 3 công cụ. PowerPoint, GIMP, Giấy và bút. Mình vô hiệu GIMP vì thấy nó hơi phức tạp. Sau đó, mình có thiết kế thử sử dụng PowerPoint (mình khá là quan sát mảng này, và có một kênh nho nhỏ là đây) và vẽ tay
Kết quả cũng khá được, tuy nhiên, mình yêu thích sử dụng một công cụ chuyên biệt hơn. Sau hồi một kiếm thì mình phát hiện ra một phần mềm của Việt Nam luôn là Pencil
Thiết kế UX/UI sử dụng Pencil
Hướng dẫn sử dụng bạn hoàn toàn có thể xem trên mạng, rất nhiều. Mình sẽ chỉ chia sẻ lại kết quả sau khi sử dụng phần mềm này
Giao diện Random Quote Machine trên Mobile
Giao diện trên Tablet
Giao diện trên PC
Thực tế, những thứ trên nên làm gọi là UX. Tuy nhiên, mình tạm hài lòng và dừng bước tại đây. Work design color, font chữ,. will doing on CSS luôn
Triển khai UX/UI với HTML5 và CSS3
Có thể phần khai triển website sử dụng HTML5 và CSS3 mình sẽ không lý giải gì thêm. Ngoài ra, về phần lựa chọn sắc tố sao cho phù hợp thì bạn hoàn toàn có thể tham khảo tại những link sau đây (cực hay luôn)
Cách tích hợp phản hồi Meta vào trang web, xem trên trang của Meta tại đây nhé. Phần hướng dẫn khá dễ hiểu, bạn chỉ việc đọc qua là biết làm ngay
Nếu bạn có thắc mắc mình cần hỏi gì, ví dụ như cách thiết kế trang web đáp ứng,. thì hoàn toàn có thể đặt thắc mắc ở phần phản hồi nhé
Xử lý logic với JavaScript
Có 2 thứ quan trọng cần làm trong phần này là. lấy quote ngẫu nhiên và chia sẻ quote lên social
- Về phần xử lý trích dẫn. trong cách 3 đã nêu ở phần phân tích yêu cầu bài toán, mình thấy cách 1 và cách 2 đều khá mất công vì đều phải đi sưu tầm quote. Riêng cách thứ 2 thì phải triển khai trên cơ sở tài liệu, khá phức tạp. Vì vậy mình lựa chọn cách thứ 3, đó là sử dụng Forismatic API (trang này được bố trí theo hướng dẫn rõ ràng)Về phần chia sẻ trên social. Sau thời gian tìm hiểu google, mình thấy rằng chỉ có được cho phép chia sẻ văn bản, còn những social kia nên phải chia sẻ link, nên không phù hợp. Thay vào đó, mình tìm ra một social khác được cho phép chia sẻ văn bản là. Tumblr. Tóm lại, mình sẽ chia sẻ lên và Tumblr
Lấy làm giá ngẫu nhiên trên Forismatic
Bạn hoàn toàn có thể tự đọc hướng dẫn trên trang chủ để khai thác. Sau đây là cách mình thực hiện
Build URL to request
let requestURL = "https://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?";Yêu cầu này kiểu GET, với những tham số là phần phía sau dấu hỏi (?). Và kết quả trả về sẽ là một JSON, với ngôn từ là tiếng anh
Tiến hành yêu cầu
Để thực hiện yêu cầu lên sever, bạn hoàn toàn có thể sử dụng XMLHttpRequest. Tuy nhiên, trong dự án công trình bất Động sản này mình sử dụng jQuery, nên sử dụng luôn phương thức getJSON của nó
function requestRandomQoute() $.getJSON(requestURL, function (data) animateText("#quote-text", data.quoteText); animateText("#quote-name", "-- " + data.quoteAuthor); animateText("#quote-symbol"); updateShares(data.quoteText, data.quoteAuthor); );Sau khi thực hiện phương thức trên, kết quả thu được là tài liệu, gồm có 2 trường thông tin quan trọng là quoteText và quoteAuthor. Sau đó, mình sử dụng nó để update lên giao diện
Ngoài ra, ở đây mình có thêm hoạt ảnh cho phần thay đổi nội dung văn bản
function animateText(element, content) $(element).animate( opacity: 0 , 500, function () $(this).animate( opacity: 1 , 500); if (content) $(this).text(content); );Hàm này còn có trách nhiệm làm mờ (độ mờ = 0) phần nội dung cũ trong 500 ms. Sau đó, hiện nội dung mới (độ mờ = 1) cũng trong khoảng chừng thời gian 500 ms
Ý tưởng của phần này là thay thế giá trị thuộc tính href của những thẻ tương ứng với chia sẻ hoặc Tumblr. Nội dung link đã được quy định sẵn bởi hoặc Tumblr, bạn chỉ việc áp dụng đúng là được
let currentQuote = qoute || $("#quote-text").text(); let currentAuthor = author || $("#quote-name").text(); let twitterShareURL = "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=" + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor); $("#share-twitter").attr("href", twitterShareURL); let tumblrShareURL = "https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption=" + encodeURIComponent(currentAuthor) + "&content=" + encodeURIComponent(currentQuote) + "&canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&shareSource=tumblr_share_button"; $("#share-tumblr").attr("href", tumblrShareURL);Kết luận
Trên đây là quy trình tiến trình mình thực hiện để hoàn thành xong dự án công trình bất Động sản Random Quote Machine. Hy vọng quy trình này hoàn toàn có thể giúp bạn áp dụng vào những dự án công trình bất Động sản của tớ. Ngoài ra, nếu bạn có đóng góp gì vui lòng để lại phần phản hồi nhé
Xin chào và hẹn hội ngộ bạn ở nội dung bài viết tiếp theo, thân ái
★ Nếu những bạn thấy nội dung bài viết này hay thì hãy theo dõi mình trên Meta để nhận thông báo khi có nội dung bài viết tiên tiến nhất nhé
Tải thêm tài liệu liên quan đến nội dung bài viết Tác giả trích dẫn html programming html