720 판독값

이 자바스크립트 코드는 무작위 인용문을 생성합니다

~에 의해 Emmanuel Okolie 6m2024/04/25

너무 오래; 읽다

바닐라 JavaScript를 사용하여 임의 인용 프로젝트를 구축하는 방법.

featured image - 이 자바스크립트 코드는 무작위 인용문을 생성합니다

바닐라 자바스크립트를 사용한 무작위 인용이라는 단어를 들으면 어떤 생각이 떠오르나요? 내가 아는 한, 어떤 일이든 일어날 수 있습니다.

그리고 임의의 인용문을 만들 수 있는 또 다른 스크립트 언어가 있을 수 있지만 그 중 가장 눈에 띄는 언어 중 하나는 JavaScript를 사용하여 임의의 인용문을 만드는 것입니다.

사람들의 게시물을 표시하는 소셜 미디어 앱을 본 적이 있을 수도 있지만 더 많은 게시물을 보려면 계속 스크롤해야 합니다. 그러나 우리가 구축할 내용에 따라 새 견적을 보려면 버튼을 클릭해야 합니다.

참고: 이 튜토리얼에서는 API를 사용할 것입니다. API는 웹에서 무작위로 인용문을 가져오는 데 사용됩니다. 버튼을 클릭하기만 하면 API가 새 견적을 가져옵니다. 따라서 많은 시간을 낭비하지 않고 이 가이드를 자세히 살펴보겠습니다.

전제조건

HTML에 대한 기본 지식이 필요합니다.
CSS에 대한 기본 지식이 필요합니다.
JavaScript에 대한 기본 지식이 필요합니다.
또한 코드 편집기(Sublime 또는 VS 코드) 등이 있습니다.

단계별 JavaScript 무작위 견적 생성기

무작위 인용문은 API 또는 배열에서 무작위로 인용문을 가져옵니다. 이 기사에서는 HTML, CSS 및 JavaScript만 사용하여 처음부터 무작위 인용 생성기를 디자인하면서 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단계: 몇 줄의 JavaScript 코드를 통합합니다. 이 단계에서는 일부 JavaScript 코드를 통합하여 견적 생성기를 구축합니다. 참고: 이 섹션은 이 튜토리얼의 필수 부분입니다. 이제 script.js라는 다른 파일을 생성하겠습니다.

아래 코드를 살펴보면 수행된 작업이 명확하게 표시됩니다. 링크를 사용하고 url이라는 변수에 저장하여 API와 상호 작용했습니다. 이 가이드를 간략하게 작성하려면 script.js를 살펴보세요. 각 섹션 앞에 설명이 있습니다. 아래 JavaScript 코드는 다음과 같습니다.

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

결론

우리는 이 튜토리얼을 마쳤습니다. 여러분이 많은 가치를 얻었기를 바랍니다. 바닐라 JavaScript를 사용하여 임의 인용 프로젝트를 구축하는 방법에 대해 설명합니다.

우리는 API와 상호작용하는 방법을 살펴보았습니다. 그러나 그것이 API와 상호작용하는 유일한 방법은 아니거나 가장 좋은 방법이라고 해야 할까요? JS 코드의 인용문을 Twitter 계정에 트윗하는 방법을 알아보세요.

이 튜토리얼을 논의하는 것만으로도 우리에게 많은 것을 보여주었습니다. 그러니 자유롭게 의견을 남겨주세요! 더 많은 튜토리얼을 원하시면 저를 팔로우해주세요.

다음 시간까지 즐거운 하루 보내세요!

저자 소개

Emmanuel Okolie는 소프트웨어 개발 업계에서 2+ 년 이상의 경험을 보유한 풀 스택 Laravel 개발자입니다. 그는 소프트웨어 개발과 글쓰기를 융합하고 자신이 하는 일을 다른 사람에게 가르치면서 본격적인 기술을 쌓았습니다. 그의 스택에는 ReactJs, Laravel, PHP, JavaScript, 등이 있습니다.

그는 프리랜서로 일하며 고객을 위한 웹사이트를 구축하고 기술 매뉴얼을 작성하여 다른 사람들에게 자신의 작업 수행 방법을 지시합니다.

Emmanuel Okolie는 귀하와 대화할 수 있는 기회를 환영합니다. Linked-In , Facebook , Github , Twitter 또는 그의 웹사이트 에서 그를 방문하고 팔로우하세요.