720 lượt đọc

Mã Javascript này tạo ra các trích dẫn ngẫu nhiên

từ tác giả Emmanuel Okolie 6m2024/04/25

dài quá đọc không nổi

Cách xây dựng dự án báo giá ngẫu nhiên bằng JavaScript thuần.

featured image - Mã Javascript này tạo ra các trích dẫn ngẫu nhiên

Bạn nghĩ đến điều gì khi nghe thấy từ trích dẫn ngẫu nhiên bằng cách sử dụng JavaScript thuần? Theo tôi được biết thì chuyện gì cũng có thể xảy ra.

Và có thể có một ngôn ngữ kịch bản khác có thể tạo các trích dẫn ngẫu nhiên, nhưng một trong những ngôn ngữ nổi bật nhất trong số đó là sử dụng JavaScript để tạo một trích dẫn ngẫu nhiên.

Bạn có thể đã thấy một số ứng dụng mạng xã hội hiển thị bài đăng của mọi người nhưng bạn phải tiếp tục cuộn để xem thêm bài đăng. Nhưng theo những gì chúng tôi sẽ xây dựng, bạn sẽ phải nhấp vào nút để xem báo giá mới.

Lưu ý: trong hướng dẫn này, chúng tôi sẽ sử dụng API, API được sử dụng để tìm nạp các trích dẫn ngẫu nhiên trên web. Chỉ cần nhấp vào nút, API sẽ tìm nạp báo giá mới. Vì vậy, không lãng phí nhiều thời gian của bạn, hãy đi sâu vào hướng dẫn này.

Điều kiện tiên quyết

Bạn cần có kiến thức cơ bản về HTML
Bạn cần có kiến thức cơ bản về CSS
Bạn cần có kiến thức cơ bản về JavaScript
Đồng thời có trình soạn thảo mã (mã Sublime hoặc VS), v.v.

Trình tạo trích dẫn ngẫu nhiên JavaScript từng bước

Một trích dẫn ngẫu nhiên lấy các trích dẫn ngẫu nhiên từ một API hoặc một mảng. Trong bài viết này, chúng tôi sẽ sử dụng JavaScript để tạo các trích dẫn từ một mảng khi chúng tôi thiết kế một trình tạo trích dẫn ngẫu nhiên từ đầu chỉ sử dụng HTML, CSS và JavaScript. Dưới đây là hướng dẫn từng bước thực hiện để hoàn thành nhiệm vụ báo giá ngẫu nhiên.

Bước 1: Tạo một dự án mới Dự án bạn sắp xây dựng bao gồm ba trang: HTML, CSS và JavaScript. vì vậy bạn sẽ đặt tên cho các trang khác nhau sẽ được đặt tên như thế này. index.html, style.css, script.js. Sau khi thực hiện việc này, bạn đã sẵn sàng để chuyển sang bước tiếp theo.

Bước 2: Xây dựng khung Bước này sẽ cho phép bạn thêm một số mã HTML để tạo cấu trúc dự án của bạn.
Lưu ý: Phần này có lẽ là điều đầu tiên cần làm sau khi tạo thư mục và các tệp như đã nêu ở trên.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--META information--> <meta name="description" content="Random Quote Generator"> <meta name="keywords" content="HTML,CSS,JavaScript, Quotes, API"> <meta name="author" content="EmmyKolic"> <!--End of META information--> <title>Random Quotes</title> <!--LINK CUSTOM CSS FILE--> <link rel="stylesheet" href="style.css"> <!--FONTAWESOME CDN--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="crossorigin="anonymous"> </head> <body> <!-- Quote Container --> <div class="container"> <!-- Quote to be Displayed Here --> <h1> <i class="fas fa-quote-left"></i> <span class="quote" id="quote"></span> <i class="fas fa-quote-right"></i> </h1> <!-- Author to be Displayed Here --> <p class="author" id="author"></p> <hr /> <div class="button"> <!--Button to tweet the quote --> <a class="twitter" id="tweet" href="https://twitter.com/intent/tweet?text=Greetings" data-size="large" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a> <!--Add an onclick event on 'next quote' button. Upon the click of a button, a new random quote is generated--> <button class="next" onclick="getNewQuote()">Next quote</button> </div> </div> <!--LINK CUSTOM JS FILE--> <script src="script.js"></script> </body> </html>

Bước 3: Thêm kiểu cho các lớp Trong phần này, chúng ta sẽ thêm kiểu vào mã bằng CSS để xây dựng trình tạo báo giá. Lưu ý: Phần này là việc cần làm tiếp theo sau khi tạo file index.html, các bạn sẽ tạo một file khác có tên style.css file style.css sẽ được liên kết với file HTML.

Sau đó, bạn tạo kiểu cho bố cục của HTML. Đây là mã CSS bên dưới.

 * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; transition: 0.5s; transition-timing-function: ease-in; background-image: linear-gradient( to right bottom, rgb( 51, 255, 141 ), #acc9ffa8 ); display: flex; align-items: center; justify-content: center; } .container { display: flex; flex-direction: column; align-items: center; padding: 30px; box-shadow: 0 4px 10px rgba(27, 245, 235 , 0.5); border-radius: 15px; width: 600px; background-color: rgba(255, 255, 255, 0.3); margin: 10px; } .fa-quote-left, .fa-quote-right { font-size: 35px; color: rgb(170, 0, 0); } .quote { text-align: center; font-size: 40px; font-weight: bold; } .author { margin: 10px; text-align: right; font-size: 25px; font-style: italic; font-family: cursive; } hr { margin: 10px 0; width: 100%; border: 1px solid black; background-color: black; } .button { width: 100%; display: flex; padding: 10px; justify-content: space-between; align-items: center; margin: 9px; } .twitter { border: 1px solid rgb(102, 179, 255); border-radius: 4px; background-color: rgb(102, 179, 255); color: white; padding-bottom: 15px; text-align: center; font-size: 1.8em; width: 60px; height: 35px; line-height: 40px; } .next { font-size: 18px; border-radius: 5px; cursor: pointer; padding: 10px; margin-top: 5px; font-weight: bold; color: white; background-image: linear-gradient( to right bottom, rgb(22, 210, 248), #bcd7ffa8 ); } .container:hover { box-shadow: 0 10px 10px rgb(0, 180, 230); }

Bước 4: Kết hợp một vài dòng mã JavaScript. Trong bước này, chúng tôi sẽ kết hợp một số mã JavaScript để xây dựng trình tạo báo giá. Lưu ý: Phần này là một phần thiết yếu của hướng dẫn này. Bây giờ bạn sẽ tạo một tệp khác có tên là script.js.

Xem qua đoạn mã bên dưới, bạn sẽ thấy rõ những gì đã được thực hiện. Chúng tôi đã tương tác với API bằng cách sử dụng một liên kết và lưu bên trong một biến có tên url. Để làm cho hướng dẫn này ngắn gọn, hãy xem qua script.js, bạn sẽ thấy nhận xét trước mỗi phần. Đây là mã JavaScript bên dưới.

 const text = document.getElementById("quote"); const author = document.getElementById("author"); const tweetButton = document.getElementById("tweet"); const getNewQuote = async () => { //api for quotes var url = "https://type.fit/api/quotes"; // fetch the data from api const response = await fetch(url); console.log(typeof response); //convert response to json and store it in quotes array const allQuotes = await response.json(); // Generates a random number between 0 and the length of the quotes array const indx = Math.floor(Math.random() * allQuotes.length); //Store the quote present at the randomly generated index const quote = allQuotes[indx].text; //Store the author of the respective quote const auth = allQuotes[indx].author; if (auth == null) { author = "Anonymous"; } //function to dynamically display the quote and the author text.innerHTML = quote; author.innerHTML = "~ " + auth; //tweet the quote tweetButton.href = "https://twitter.com/intent/tweet?text=" + quote + " ~ " + auth; }; getNewQuote();

Phần kết luận

Chúng ta đã đi đến phần cuối của hướng dẫn này. Hy vọng rằng bạn đã thu được rất nhiều giá trị. Về cách xây dựng dự án báo giá ngẫu nhiên bằng cách sử dụng JavaScript thuần.

Chúng ta đã biết cách tương tác với API, mặc dù đó không phải là cách duy nhất hoặc tôi nên nói là cách tốt nhất để tương tác với API. và cách tweet một trích dẫn từ mã JS của chúng tôi tới tài khoản Twitter của bạn.

Chỉ cần thảo luận về hướng dẫn này đã cho chúng ta thấy rất nhiều điều. Vì vậy, hãy thoải mái để lại một bình luận! Và nếu bạn muốn biết thêm hướng dẫn , hãy theo dõi tôi.

Cho đến lần sau, Chúc bạn một ngày vui vẻ!

Giới thiệu về tác giả

Emmanuel Okolie là nhà phát triển laravel full-stack với 2+ năm kinh nghiệm trong ngành phát triển phần mềm. Anh ấy đã xây dựng các kỹ năng toàn diện bằng cách kết hợp phát triển phần mềm, viết và dạy người khác những gì anh ấy làm. Ngăn xếp của anh ấy là ReactJs, Laravel, PHP, JavaScript, v.v.

Anh làm việc tự do, xây dựng trang web cho khách hàng và viết hướng dẫn kỹ thuật để hướng dẫn người khác cách thực hiện công việc của mình.

Emmanuel Okolie rất vui khi có cơ hội được nói chuyện với bạn. Vui lòng truy cập và theo dõi anh ấy trên Linked-In , Facebook , Github , Twitter hoặc Trang web của anh ấy.