Jan 01, 1970
407 okumalar
Bu Javascript Kodu Rastgele Alıntılar Oluşturuyor
Çok uzun; Okumak
Vanilya JavaScript kullanarak rastgele bir teklif projesi nasıl oluşturulur?Vanilya JavaScript kullanarak rastgele alıntı kelimesini duyduğunuzda aklınıza ne geliyor? Bana kalırsa her şey olabilir.
Ve rastgele alıntılar yapabilen başka bir kodlama dili olabilir, ancak bunların en seçkinlerinden biri, rastgele alıntı yapmak için JavaScript kullanmaktır.
İnsanların gönderilerini görüntüleyen bazı sosyal medya uygulamalarını görmüş olabilirsiniz ancak daha fazla gönderi görmek için kaydırmaya devam etmelisiniz. Ancak geliştireceğimiz şeye göre, yeni bir teklifi görüntülemek için bir düğmeye tıklamanız gerekecek.
Not: Bu eğitimde bir API kullanacağız; API, teklifleri web üzerinden rastgele getirmek için kullanılır. Sadece düğmeye tıkladığınızda API yeni bir fiyat teklifi getirir. O halde fazla zaman kaybetmeden bu rehbere dalalım.
Önkoşul
- Temel HTML bilgisine sahip olmanız gerekir
- Temel CSS bilgisine sahip olmanız gerekir
- Temel JavaScript bilgisine sahip olmanız gerekir
- Ayrıca bir kod düzenleyiciniz (Sublime veya VS kodu) vb.
Adım Adım JavaScript Rastgele Alıntı Oluşturucu
Rastgele bir alıntı, bir API'den veya bir diziden rastgele alıntılar çeker. Bu makalede, yalnızca HTML, CSS ve JavaScript kullanarak sıfırdan rastgele bir alıntı oluşturucu tasarlarken, bir diziden alıntılar üretmek için JavaScript'i kullanacağız. Aşağıda rastgele teklif verme görevini gerçekleştirmek için adım adım bir kılavuz bulunmaktadır.
Adım 1: Yeni Bir Proje Oluşturuyor Oluşturmak üzere olduğunuz proje üç sayfa içeriyor: HTML, CSS ve JavaScript. böylece siz adlandıracaksınız, çeşitli sayfalar bu şekilde adlandırılacak. index.html, style.css, script.js. Bunu yaptıktan sonra bir sonraki adıma geçmeye hazırsınız.
Adım 2: Çerçevenin oluşturulması Bu adım, proje yapınızı verecek birkaç HTML kodu eklemenizi sağlayacaktır.
Not: Bu bölüm muhtemelen yukarıda belirtildiği gibi klasör ve dosyaları oluşturduktan sonra yapılacak ilk şeydir.
<!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>
Adım 3: Sınıflar için Stil Ekleme Bu bölümde, alıntı oluşturucuyu oluşturmak için CSS kullanarak koda stiller ekleyeceğiz. Not: Bu bölümde index.html dosyasını oluşturduktan sonra yapacağınız bir sonraki işlem, style.css adında başka bir dosya oluşturacaksınız, style.css dosyası HTML dosyasına bağlanacaktır.
Daha sonra HTML'nin düzenini stillendireceksiniz. İşte aşağıdaki CSS kodu.
* { 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); }
Adım 4: Birkaç satır JavaScript kodu ekleyin. Bu adımda, teklif oluşturucuyu oluşturmak için bazı JavaScript kodlarını dahil edeceğiz. Not: Bu bölüm bu eğitimin önemli bir parçasıdır. Şimdi script.js adında başka bir dosya oluşturacaksınız.
Aşağıdaki kodu inceleyin, ne yapıldığını açıkça göreceksiniz. Bir bağlantı kullanarak ve url adlı bir değişkenin içine kaydederek bir API ile etkileşim kurduk. Bu kılavuzu kısaca özetlemek için script.js dosyasını inceleyin, her bölümden önce bir yorum göreceksiniz. İşte aşağıdaki JavaScript kodu.
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();Çözüm
Bu eğitimin sonuna geldik, umarım çok değer kazanmışsınızdır. Vanilya JavaScript kullanarak rastgele alıntılar projesinin nasıl oluşturulacağı hakkında.
Bir API ile nasıl etkileşim kuracağımızı gördük, ancak bir API ile etkileşim kurmanın tek yolu bu değil veya en iyi yolu mu demeliyim? ve JS kodumuzdaki bir alıntıyı Twitter hesabınıza nasıl tweetleyeceğiniz.
Sadece bu öğreticiyi tartışmak bile bize çok şey gösterdi. Bu yüzden yorum bırakmaktan çekinmeyin! Daha fazla ders istiyorsanız lütfen beni takip edin.
Bir dahaki sefere görüşene kadar, günün tadını çıkarın!
Yazar hakkında
Emmanuel Okolie, yazılım geliştirme sektöründe 2+ yıldan fazla deneyime sahip, tam kapsamlı bir laravel geliştiricisidir. Yazılım geliştirmeyi, yazmayı ve yaptıklarını başkalarına öğreterek birleştirerek tam teşekküllü beceriler geliştirdi. Yığınları ReactJs, Laravel, PHP, JavaScript, ve daha fazlasıdır.
Serbest çalışan olarak çalışıyor, müşteriler için web siteleri oluşturuyor ve başkalarına işini nasıl yürütecekleri konusunda talimat vermek için teknik kılavuzlar yazıyor.
Emmanuel Okolie sizinle konuşma fırsatını memnuniyetle karşılayacaktır. Lütfen onu Linked-In , Facebook , Github , Twitter veya Web Sitesinde ziyaret edin ve takip edin.
L O A D I N G
. . . comments & more!
. . . comments & more!
