JavaScript를 사용한 임의 농담 생성기
11708 단어 beginnersjavascriptapiwebdev
HTML 부분을 다루겠습니다.
우리는 웹사이트의 뼈대를 만들기 위해 HTML을 사용합니다. HTML은 마크업 언어입니다.
이제 HTML
<head> 태그에서 멋진 글꼴 CDN을 가져오겠습니다. fontawesome은 웹사이트의 아이콘에 사용되는 라이브러리입니다.<!-- Font Awesome Icons -->
<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" />
이제 Google Fonts API를 사용하여 글꼴을 가져오겠습니다. 아래는
Poppins 글꼴에 대한 코드입니다. <head> 태그에 아래 코드를 붙여넣습니다.<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
이제
<body> 태그에 컨테이너를 디자인해 보겠습니다. 아래 HTML 코드에서 제목에 대한 <h1> 태그를 포함하는 컨테이너를 만들었습니다. 그런 다음 <p> 농담 텍스트를 포함하는 id 'joke'로 태그를 지정합니다. 우리는 id를 사용하여 JavaScript를 사용하여 태그를 고유하게 가져옵니다. 마지막으로 'submit' 유형의 <button> 및 onclick 이벤트 리스너가 버튼을 클릭할 때마다 새로운 농담을 가져옵니다.<div class="container">
<h1>Random Joke Generator</h1>
<p> id="joke">
You can get up to half a million dollars on the black market if you possess an authentic Chuck Norris pube.
</p>
<button> type="submit" class="btn" onclick="fetchJoke()">New joke</button>
</div>
다음은 최종 HTML 코드입니다.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome Icons -->
<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" />
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<title>Random Joke Generator - @code.scientist</title>
</head>
<body>
<div class="container">
<h1>Random Joke Generator</h1>
<p> id="joke">
You can get up to half a million dollars on the black market if you possess an authentic Chuck Norris pube.
</p>
<button> type="submit" class="btn" onclick="fetchJoke()">New joke</button>
</div>
</body>
</html>
지금까지 출력
CSS 부분을 이해하자
아래 CSS 코드에서.
* {
font-family: 'Poppins', sans-serif;
}
body {
background-color: #111827;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
border: 2px solid deepskyblue;
padding: 40px;
border-radius: 20px;
width: 30rem;
}
#joke {
font-style: italic;
}
.btn {
height: 3rem;
width: 8rem;
border: 2px solid deepskyblue;
background: deepskyblue;
color: white;
font-size: 16px;
border-radius: 7px;
padding: 8px;
margin-top: 30px;
cursor: pointer;
}
지금까지 출력
마지막으로 JavaScript 부분
아래 자바스크립트 코드에는 호출될 때마다 새로운 농담을 생성하는 함수가 있습니다.
fetchJoke() 함수에서 가져오기 API를 사용하여 URL에서 응답을 가져와서 응답 변수에 저장했습니다. 나중에 응답을 임의의 Joke로 구성된 JSON 개체로 변환합니다. 마지막으로 id 농담으로 요소를 잡고 DOM 조작을 사용하여 농담을 요소로 설정합니다.const fetchJoke = async () => {
let response = await fetch("https://api.chucknorris.io/jokes/random");
let data = await response.json()
document.getElementById("joke").innerText = data.value;
}
Reference
이 문제에 관하여(JavaScript를 사용한 임의 농담 생성기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/piyushpatil1243/random-joke-generator-using-javascript-4ig2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
