임의 인용 생성기 2022를 구축하기 위한 최고의 궁극 가이드
이전 게시물에서 HTML, CSS 및 JavaScript를 사용한 놀라운 텍스트 음성 변환 변환기(2021) – RoyalityFree 블로그에 대해 공유했습니다. 이에 대한 반응이 좋아서 내 프로젝트를 무료로 더 많이 공유하면 어떨까 하는 생각이 들었습니다 🎉.
Note: I've worked very hard on this project and the output, was making it free 🤗. You can too support me in return for free by stargazing the official repository here.
이 프로젝트에 관해서는 버튼 클릭 또는 기본 세트에 대해 API에서 가져온 견적을 표시하는 임의 견적 생성기를 구축할 것입니다. 시작하려면 항상 그렇듯이 모든 종류의 프로젝트에 영원히 유용한 세 가지 필수 항목이 필요합니다.
이 자습서에서는 Microsoft Edge 브라우저, Visual Studio Code를 코드 편집기로 사용하고 가장 중요한 것은 끝까지 무언가를 구축하려는 욕구를 높이는 것입니다! 내 제안에 익숙하지 않은 것 같으면 다른 대안을 자유롭게 사용하십시오.
임의 인용 생성기(이해)
Random Quote Generator는 API, 데이터베이스 또는 배열에서 임의로 견적을 추출하는 데 능숙합니다. HTML, CSS, JavaScript 및 자유 인용 API를 사용하여 처음부터 임의 인용 생성기를 설계할 것입니다.
임의 인용 생성기(건물)
모든 프로젝트에는 기본 코어 파일이 필요합니다. 이 경우 확장자가
.html , .css , .js 와 같은 세 개의 파일이 필요합니다. 폴더(예: random-quote-generator )에 정리했으면 다음 섹션의 소스 코드를 붙여넣는 것이 좋습니다.
기사 끝에 있는 사용 가능한 미러에서 이 임의 인용 생성기의 전체 소스 코드를 선택적으로 다운로드할 수 있습니다.
먼저 파일 이름
index.html으로 HTML 파일을 만들고 다음 코드를 HTML 파일에 붙여넣습니다. 저장, 마지막에 .html 확장자를 가진 파일을 생성해야 합니다.<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Meta Tags Start, For Reference https://www.w3schools.com/tags/tag_meta.asp -->
<meta charset="utf-8">
<meta name="description" content="Free random quotes generator, either inspirational or motivational.">
<meta name="keywords" content="quotes, random quotes, random quote generator">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- Meta Tags End-->
<!-- Title (Change This If Publlic)-->
<title>Random Quotes | RoyalityFree</title>
<!-- Link Custom Stylesheet And Fonts Start -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<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">
<!-- Link Custom Stylesheet And Fonts End-->
<body>
<!-- Start Container -->
<div class="wrapper">
<!-- Start Header -->
<header>
Quote For <span id="getday"></span>
</header>
<!-- End Header -->
<!-- Start Content -->
<div class="content">
<div class="quote-area">
<i class="fas fa-quote-left"></i>
<p class="quote">Protecting your mind, body and spirit from negativity is a sign of self-love.</p>
<i class="fas fa-quote-right"></i>
</div>
<div class="author">
<span>__</span>
<span class="name">Nitin Namdeo</span>
</div>
</div>
<div class="buttons">
<div class="features">
<ul>
<li class="speech"><i class="fas fa-volume-up"></i></li>
<li class="copy" onclick="onCopy()"><i class="fas fa-copy"></i></li>
<li class="twitter"><i class="fab fa-twitter"></i></li>
</ul>
<button>Another</button>
</div>
</div>
</div>
<!-- End Content -->
<!-- Get Script-->
<script src="script.js">
</script>
</body>
</html>
둘째, 파일 이름
style.css으로 CSS 파일을 만들고 다음 코드를 파일에 붙여넣습니다. 저장하려면 마지막에 확장자가 .css인 파일을 만들어야 합니다./* Built By RoyalityFree | Codes Initiative */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:poppins,sans-serif
}
body{
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
padding:0 10px;
background-image: radial-gradient(#31e9cb,#a3f5e8,#31e9cb);
user-select: none;
}
::selection{
color:#fff;
background:#1AE78D
}
.wrapper{
width:605px;
background:#fff;
border-radius:15px;
padding:30px 30px 25px;
box-shadow:0 12px 35px rgba(0,0,0,.1)
}
header,.content :where(i,p,span){
color:#102137
}
.wrapper header{
font-size:35px;
font-weight:600;
text-align:center
}
.wrapper .content{
margin:35px 0
}
.content .quote-area{
display:flex;
}
.quote-area i{
font-size:15px
}
.quote-area i:first-child{
margin:3px 0 0 0
}
.quote-area i:last-child{
display:flex;
margin:0 0 3px 10px;
align-items:flex-end;
}
.quote-area .quote{
font-size:22px;
text-align:center;
}
.content .author{
display:flex;
font-size:18px;
margin-top:20px;
font-style:italic;
justify-content:flex-end
}
.author span:first-child{
margin:-6px 5px 0 0;
font-family:monospace;
}
.buttons .features{
display:flex;
margin-top:20px;
align-items:center;
justify-content:space-between;
}
.features ul{
display:flex
}
.features ul li{
margin:0 5px;
height:47px;
width:47px;
display:flex;
cursor:pointer;
color:#1AE78D;
list-style:none;
border-radius:50%;
align-items:center;
justify-content:center;
border:2px solid #1AE78D;
transition:all .3s ease
}
.features ul li:first-child{
margin-left:0
}
ul li:is(:hover,.active){
color:#fff;
background:#1AE78D
}
ul .speech.active{
pointer-events:none
}
.buttons button{
border:none;
color:#fff;
outline:none;
font-size:16px;
cursor:pointer;
padding:13px 22px;
border-radius:15px;
background:#1AE78D
}
.buttons button:hover{
background: #4DD99C;
}
.buttons button.loading{
opacity:.7;
pointer-events:none
}
@media(max-width:728px){
.wrapper{
padding:25px 25px 20px;
margin: 15px 15px 15px 15px;
}
.wrapper header{
font-size:29px
}
.quote-area .quote{
font-size:20px;
word-break:keep-all
}
.content .author{
font-size:16px
}
.quote-area i{
font-size:12px
}
.features ul li{
margin:0 3px;
height:45px;
width:45px
}
.buttons button{
font-size:15px;
padding:12px 20px
}
}
마지막으로 파일 이름
script.js으로 JavaScript 파일을 만들고 다음 코드를 JavaScript 파일에 붙여넣습니다. 그것을 저장하려면 마지막으로 확장자가 .js인 파일을 만들어야 합니다.// Built By RoyalityFree | Codes Initiative
const quoteText = document.querySelector(".quote"),
quoteBtn = document.querySelector("button"),
authorName = document.querySelector(".name"),
speechBtn = document.querySelector(".speech"),
copyBtn = document.querySelector(".copy"),
pingTwitter = document.querySelector(".twitter"),
synth = speechSynthesis;
function randomQuote() {
quoteBtn.classList.add("loading");
quoteBtn.innerText = "Loading 🎉";
fetch("https://free-quotes-api.herokuapp.com/").then(response => response.json()).then(result => {
quoteText.innerText = result.quote;
authorName.innerText = result.author || "No Author";
quoteBtn.classList.remove("loading");
quoteBtn.innerText = "Another";
});
}
speechBtn.addEventListener("click", () => {
if (!quoteBtn.classList.contains("loading")) {
let utterance = new SpeechSynthesisUtterance(`${quoteText.innerText} by ${authorName.innerText}`);
synth.speak(utterance);
setInterval(() => {
!synth.speaking ? speechBtn.classList.remove("active") : speechBtn.classList.add("active");
}, 10);
}
});
copyBtn.addEventListener("click", () => {
navigator.clipboard.writeText(quoteText.innerText);
});
pingTwitter.addEventListener("click", () => {
let twitterUrl = `https://twitter.com/intent/tweet?url=${quoteText.innerText}`;
window.open(twitterUrl, "_blank");
});
quoteBtn.addEventListener("click", randomQuote);
pingTwitter.addEventListener("click", () => {
let twitterUrl = `https://twitter.com/intent/tweet?url=${quoteText.innerText}`;
window.open(twitterUrl, "_blank");
});
const d = new Date();
const weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
let day = weekday[d.getDay()];
document.getElementById("getday").innerHTML = day;
function onCopy() {
alert("Copied Quote Successfully To 📋!");
}
모든 설정이 완료되면 강력한 웹 페이지를 구축하기 위해 결합된 세 파일의 출력을 확인할 준비가 되었습니다. 이제 다음과 같은 작업을 수행해야 합니다.
임의 인용 생성기(마지막 단어)
이제 기본 HTML, CSS 및 JavaScript로 Random Quote Generator 웹 페이지를 성공적으로 구축했습니다.
코드가 작동하지 않거나 문제/문제에 직면한 경우 아래 제공된 다운로드 버튼에서 소스 파일을 다운로드해 보십시오.
매우 귀중한
.zip 파일을 다운로드한 다음 파일 관리자, 서버 등에 압축을 풉니다.
Reference
이 문제에 관하여(임의 인용 생성기 2022를 구축하기 위한 최고의 궁극 가이드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/royalityfree/best-ultimate-guide-to-build-a-random-quote-generator-2022-8m4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
