HTML, CSS 및 JavaScript를 사용하여 무작위 견적 생성기를 구축하는 방법은 무엇입니까?
- PHPz앞으로
- 2023-08-24 20:41:041214검색
이 튜토리얼에서는 HTML, CSS 및 JavaScript를 사용하여 API(type.fit)에서 임의 참조를 생성하는 프로젝트를 구축합니다.
단계
몇 가지 기본 단계를 따르겠습니다.HTML 요소 및 템플릿 만들기
CSS를 사용하여 스타일 추가
JavaScript 로직
HTML 요소 및 템플릿 만들기
첫 번째 단계는 HTML 요소와 템플릿을 만듭니다. 먼저 항목을 표시할 상자를 추가한 다음 클릭하면 상자에 새로운 임의의 인용문이 표시되는 버튼을 추가한 다음 스팬 태그를 사용하여 인용 기호 유형 글꼴 멋진 아이콘을 표시합니다.
HTML
<!DOCTYPE html> <html> <head> <title>Random quote generator using HTML, CSS and JavaScript</title> </head> <body> <div class="boxSize"> <h1> <i class="fas fa-quote-left"></i> <span class="QuoteText" id="QuoteText"></span> <i class="fas fa-quote-right"></i> </h1> <p class="QuoteWR" id="author"></p> <hr/> <div class="QuoteBtn"> <button class="GenerateQuote_next" onclick="GenerateQuote()">Next quote</button> </div> </div> </body> </html>
CSS를 사용하여 스타일 추가
이제 우리가 작성한 HTML 프로젝트에 스타일을 추가하겠습니다. 상자 그림자, 패딩 및 여백과 같은 속성을 상자에 추가하고 작성자를 위해 필기체 글꼴 모음을 사용할 것이며 상자와 본문에 배경색을 추가하여 멋지게 보이도록 할 것입니다.
추가 파일 생성을 피하기 위해 내부 CSS 작업을 진행하겠지만, CSS 및 JavaScript용 외부 파일을 만드는 것이 좋은 방법으로 간주됩니다.
애플리케이션에서 Font Awesome 아이콘을 사용하기 위해 마음속에 CDN Font Awesome 링크를 추가하겠습니다.
<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" />
CSS
body{
min-height:100vh;
transition: 0.5s;
display: flex;
background-color: #A4E5E0;
align-items: center;
justify-content: center;
}
.boxSize {
margin: 10px;
border-radius: 10px;
width: 800px;
display: flex;
flex-direction: column;
align-items: center;
padding: 30px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
background-color: rgba(255, 255, 255, 0.3);
}
.fa-quote-left, .fa-quote-right {
font-size: 35px;
color: blue;
}
.QuoteText {
text-align: center;
font-size: 40px;
font-weight: bold;
}
.author {
margin:10px;
text-align: right;
font-size: 25px;
font-style: italic;
font-family: cursive;
}
.QuoteBtn {
width: 100%;
display: flex;
margin-top:10px;
}
.GenerateQuote_next {
font-size:18px;
border-radius: 5px;
cursor:pointer;
padding: 10px;
margin-top: 5px;
font-weight: bold;
color: white;
background-color: #2C5E1A
}
.GenerateQuote_next:hover{
background-color: black;
}JavaScript Logic
이제 논리 부분이 등장합니다. 이 부분은 JavaScript가 될 것입니다. 어떤 요소가 어떤 작업을 수행할지 정의하고 API를 사용하여 데이터를 가져오고 표시하므로 심층적으로 살펴보겠습니다. JavaScript 기능을 살펴보세요.
단계
작업을 완료하려면 다음 단계를 따라야 합니다. -
-
type.fit API에서 견적 데이터를 가져옵니다.
수신된 데이터는 배열에 저장됩니다.
"randomIdx"라는 임의의 인덱스 변수를 가져옵니다.
그런 다음 "randomIdx" 최대 크기를 견적 목록 길이로 설정합니다.
생성된 임의 색인을 사용하여 인용 및 저자 가져오기
이제 얻은 값을 항목 요소에 할당합니다.
JavaScript
var url="https://type.fit/api/quotes"; const response=await fetch(url); const Quote_list = await response.json(); const randomIdx = Math.floor(Math.random()*Quote_list.length); const quoteText=Quote_list[randomIdx].text; const auth=Quote_list[randomIdx].author; if(!auth) author = "Anonymous"; console.log (quoteText); console.log (auth);
JavaScript 함수 코드를 삽입하여 작동하도록 합시다.
예 - 완전한 프로그램
다음은 무작위 견적 생성기를 구축하기 위한 완전한 프로그램입니다.
Ramdom quote generator using HTML, CSS and JavaScript <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" /><script> const GenerateQuote = async () =>{ var url="https://type.fit/api/quotes"; const response=await fetch(url); const Quote_list = await response.json(); const randomIdx = Math.floor(Math.random()*Quote_list.length); const quoteText=Quote_list[randomIdx].text; const auth=Quote_list[randomIdx].author; if(!auth) author = "Anonymous"; document.getElementById("QuoteText").innerHTML=quoteText; document.getElementById("author").innerHTML="~ "+auth; } GenerateQuote(); </script>
지금까지 견적 생성기 앱 제작에 대해 알아보았습니다. 도움이 되었기를 바랍니다.
위 내용은 HTML, CSS 및 JavaScript를 사용하여 무작위 견적 생성기를 구축하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!