720 পড়া

এই জাভাস্ক্রিপ্ট কোড এলোমেলো উদ্ধৃতি তৈরি করে

দ্বারা Emmanuel Okolie 6m2024/04/25

অতিদীর্ঘ; পড়তে

ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করে কীভাবে একটি র্যান্ডম কোট প্রকল্প তৈরি করবেন।

featured image - এই জাভাস্ক্রিপ্ট কোড এলোমেলো উদ্ধৃতি তৈরি করে

ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করে এলোমেলো উদ্ধৃতি শব্দটি শুনলে আপনার মনে কী আসে? যতদূর আমি উদ্বিগ্ন, যে কোনও ক্ষেত্রে হতে পারে।

এবং অন্য স্ক্রিপ্টিং ভাষা থাকতে পারে যা এলোমেলো উদ্ধৃতি তৈরি করতে পারে, তবে তাদের মধ্যে সবচেয়ে বিশিষ্ট একটি হল জাভাস্ক্রিপ্ট ব্যবহার করে একটি এলোমেলো উদ্ধৃতি তৈরি করা।

আপনি হয়ত কিছু সোশ্যাল মিডিয়া অ্যাপ দেখেছেন যেগুলি লোকেদের পোস্টগুলি প্রদর্শন করে, তবে আরও পোস্ট দেখতে আপনাকে অবশ্যই স্ক্রোল করতে হবে৷ কিন্তু আমরা যা তৈরি করব সেই অনুযায়ী, আপনাকে একটি নতুন উদ্ধৃতি দেখতে একটি বোতামে ক্লিক করতে হবে।

দ্রষ্টব্য: এই টিউটোরিয়ালে আমরা একটি API ব্যবহার করব, API সমগ্র ওয়েব জুড়ে এলোমেলোভাবে উদ্ধৃতিগুলি আনতে ব্যবহৃত হয়। শুধু বোতামে ক্লিক করে API একটি নতুন উদ্ধৃতি নিয়ে আসে। তাই আপনার বেশি সময় নষ্ট না করে, আসুন এই গাইডটিতে ডুব দেওয়া যাক।

পূর্বশর্ত

আপনার এইচটিএমএল সম্পর্কে প্রাথমিক জ্ঞান থাকতে হবে
আপনার সিএসএস সম্পর্কে প্রাথমিক জ্ঞান থাকতে হবে
আপনার জাভাস্ক্রিপ্ট সম্পর্কে প্রাথমিক জ্ঞান থাকতে হবে
এছাড়াও একটি কোড এডিটর (সাবলাইম বা ভিএস কোড) ইত্যাদি আছে।

ধাপে ধাপে জাভাস্ক্রিপ্ট র্যান্ডম কোট জেনারেটর

একটি এলোমেলো উদ্ধৃতি একটি API বা একটি অ্যারে থেকে এলোমেলোভাবে উদ্ধৃতি টেনে নেয়। এই নিবন্ধে, আমরা একটি অ্যারে থেকে উদ্ধৃতি তৈরি করতে JavaScript ব্যবহার করব কারণ আমরা শুধুমাত্র HTML, CSS এবং JavaScript ব্যবহার করে স্ক্র্যাচ থেকে একটি র্যান্ডম কোট জেনারেটর ডিজাইন করি। এলোমেলো উদ্ধৃতি টাস্কটি সম্পন্ন করার জন্য নীচে একটি ধাপে ধাপে নির্দেশিকা রয়েছে৷

ধাপ 1: একটি নতুন প্রকল্প তৈরি করা হচ্ছে আপনি যে প্রকল্পটি তৈরি করতে চলেছেন তাতে তিনটি পৃষ্ঠা রয়েছে: HTML, CSS এবং JavaScript। তাই আপনি বিভিন্ন পৃষ্ঠার নাম দেবেন এভাবে নাম দেওয়া হবে। index.html, style.css, script.js। এটি করার পরে আপনি পরবর্তী ধাপে যেতে প্রস্তুত।

ধাপ 2: ফ্রেমওয়ার্ক তৈরি করা এই ধাপটি আপনাকে কয়েকটি HTML কোড যোগ করতে সক্ষম করবে যা আপনার প্রকল্পের কাঠামো দেবে।
দ্রষ্টব্য: উপরে বর্ণিত ফোল্ডার এবং ফাইলগুলি তৈরি করার পরে এই বিভাগটি সম্ভবত প্রথম কাজ।

 <!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>

ধাপ 3: ক্লাসের জন্য স্টাইল যোগ করা এই বিভাগে, আমরা কোট জেনারেটর তৈরি করতে CSS ব্যবহার করে কোডে স্টাইল যোগ করব। দ্রষ্টব্য: এই অংশটি হল index.html ফাইলটি তৈরি করার পরে, আপনি style.css নামে আরেকটি ফাইল তৈরি করবেন যে style.css ফাইলটি HTML ফাইলের সাথে লিঙ্ক করা হবে।

তারপর আপনি HTML এর বিন্যাস স্টাইল করুন. এখানে নিচে CSS কোড আছে।

 * { 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); }

ধাপ 4: জাভাস্ক্রিপ্ট কোডের কয়েকটি লাইন অন্তর্ভুক্ত করুন। এই ধাপে, আমরা উদ্ধৃতি জেনারেটর তৈরি করতে কিছু জাভাস্ক্রিপ্ট কোড অন্তর্ভুক্ত করব। দ্রষ্টব্য: এই বিভাগটি এই টিউটোরিয়ালের একটি অপরিহার্য অংশ, এখন আপনি script.js নামে আরেকটি ফাইল তৈরি করবেন।

নীচের কোডের মাধ্যমে যান আপনি স্পষ্টভাবে দেখতে পাবেন কি করা হয়েছে, আমরা একটি লিঙ্ক ব্যবহার করে এবং url নামের একটি ভেরিয়েবলের ভিতরে সংরক্ষণ করে একটি API এর সাথে যোগাযোগ করেছি। এই নির্দেশিকাটি সংক্ষিপ্ত করতে, script.js-এর মাধ্যমে যান আপনি প্রতিটি বিভাগের আগে একটি মন্তব্য লক্ষ্য করবেন। এখানে নিচে জাভাস্ক্রিপ্ট কোড আছে.

 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();

উপসংহার

আমরা এই টিউটোরিয়ালের শেষে এসেছি, আশা করি, আপনি অনেক মূল্যবান অর্জন করেছেন। ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করে কীভাবে র্যান্ডম কোট প্রকল্প তৈরি করবেন।

আমরা দেখেছি কিভাবে একটি API এর সাথে ইন্টারঅ্যাক্ট করতে হয়, যদিও এটি একমাত্র উপায় নয় বা আমার বলা উচিত একটি API এর সাথে ইন্টারঅ্যাক্ট করার সেরা উপায়। এবং কিভাবে আমাদের JS কোড থেকে আপনার টুইটার অ্যাকাউন্টে একটি উদ্ধৃতি টুইট করবেন।

শুধু এই টিউটোরিয়াল আলোচনা আমাদের অনেক কিছু দেখিয়েছেন. তাই একটি মন্তব্য ড্রপ নির্দ্বিধায়! এবং আপনি যদি আরো টিউটোরিয়াল চান, আমাকে অনুসরণ করুন.

পরের সময় পর্যন্ত, আপনার দিন উপভোগ করুন!

লেখক সম্পর্কে

Emmanuel Okolie একজন ফুল-স্ট্যাক লারাভেল ডেভেলপার যার 2+ বছরের অভিজ্ঞতা সফ্টওয়্যার উন্নয়ন শিল্পে। তিনি সফ্টওয়্যার ডেভেলপমেন্ট, লেখা এবং তিনি যা করেন তা অন্যদের শেখানোর মাধ্যমে সম্পূর্ণ দক্ষতা তৈরি করেছেন। তার স্ট্যাকগুলি হল ReactJs, Laravel, PHP, JavaScript, এবং আরও অনেক কিছু।

তিনি একজন ফ্রিল্যান্সার হিসাবে কাজ করেন, ক্লায়েন্টদের জন্য ওয়েবসাইট তৈরি করেন এবং কীভাবে তার কাজ সম্পাদন করতে হয় সে সম্পর্কে অন্যদের নির্দেশ দেওয়ার জন্য প্রযুক্তিগত ম্যানুয়াল লেখার কাজ করেন।

ইমানুয়েল ওকোলি আপনার সাথে কথা বলার সুযোগকে স্বাগত জানাবেন। অনুগ্রহ করে লিঙ্কড-ইন , ফেসবুক , গিথুব , টুইটার বা তার ওয়েবসাইটে তাকে দেখুন এবং অনুসরণ করুন।