如何使用 HTML、CSS 和 Vanilla JavaScript 创建加密货币信息平台
如何使用 HTML、CSS 和 Vanilla JavaScript 创建加密货币信息平台
加密货币正在席卷金融业和整个世界。根据 在全球范围内购买比特币 ，有 2 亿个比特币钱包，日均比特币用户数为 40 万。这些统计数据表明越来越多地采用加密货币，因此交易者、新手和怀疑论者将从可以实时查看市场变化的网站中受益。
我们将学习如何创建一个加密货币信息平台，该平台将使用 JavaScript 实时显示 100 个硬币的信息。在本教程结束时，您将能够创建以下内容：
一世。从 API 获取数据并将其显示在网页上。
ii.一个赞按钮
iii.搜索功能
该项目还将提高您在 JavaScript 和操作 DOM 中的元素方面的知识。
基本 HTML 样板
在我们进入这个应用程序的特性之前，让我们从 HTML 样板开始。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8"/>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0"/>
<link rel=”stylesheet” href=”./style/style.css”/>
<! — <link rel=”stylesheet” href=”[ https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css](https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css) "> →
<title>科因角</title>
</head>
<body>
<! — Our features go here >
<body/>
基础单页应用的 CSS 样式如下：
[ @进口](https://twitter.com/import) 网址（“[ https://fonts.googleapis.com/css2family=Poppins:ital,[email protected],400;0,900;1,700&display=swap](https://fonts.googleapis.com/css2family=Poppins:ital,wght@0,400;0,900;1,700&display=swap) ");
：根{
— 正常字体：400；
— 粗体字体：600；
— 加粗字体：900；
— 原色：#465362；
— 二次色：#011936；
— 行高：1.7rem；
— 过渡：0.4 缓入；
}
/* 滚动效果平滑*/
html{
滚动行为：平滑；
}
/* 重置*/
*{
边距：0；
填充：0；
box-sizing：边框框；
过渡：var（——过渡）；
}
身体{
字体系列：“Poppins”，无衬线；
}
ul li{
列表样式类型：无；
}
一个{
文字装饰：无；
颜色：var（——原色）；
}
一：悬停{
color:var( — 次要颜色);
如何制作导航栏
导航栏或导航栏将有一个标志，将在左侧和右侧的菜单项。
我们将使用离子比特币徽标和应用程序名称作为徽标。
<! — Navigation Bar →
<nav>
<a href=”#” class=”logo”>
<h1>
<ion-icon name=”logo-bitcoin”></ion-icon><span class=”koin”>科因</span><span class=”korner”>角</span>
</h1>
<ul>
<li class=”nav-item”>
<a href=”#” class=”nav-link” id=”nav-link”>关于我们</a>
</li>
<li class=”nav-item”>
<a href=”#” class=”nav-link” id=”nav-link”>接触</a>
</li>
<li class=”nav-item”>
<a href=”#” class=”nav-link” id=”nav-link”>学</a>
</li>
<li class=”nav-item”>
<a href=”#” class=”nav-link” id=”nav-link”>社区</a>
</li>
</ul>
</nav>
导航栏的 CSS 样式如下：
导航{
背景：#fff;
显示：弯曲；
justify-content: 之间的空格；
对齐项目：居中；
填充：1rem 1.5rem；
盒子阴影：2px 3px 2px #f1f1f1;
位置：粘性；
顶部：0；
左：0；
z-index：1；
}。标识{
字体大小：2rem；
字体粗细：500；
}
ul{
显示：弯曲；
justify-content: 之间的空格；
对齐项目：居中；
}
.导航项目{
左边距：2rem；
}
.导航链接{
字体粗细： var( — 粗体字体);
}
你的导航栏应该是这样的
Navigation Bar
如何制作英雄部分
英雄部分有两部分，一个在左边，另一个在右边。左侧部分应有应用程序的简要说明和两个用于了解更多的按钮和一个加入社区的按钮。右侧部分应有社交媒体和电子邮件订阅部分。
第一部分：应用说明
<div class=”intro”>
<h2>
<span class=”land”>获取最新价格和市场趋势</span>
<br>
<span class=”here”>在加密货币中</span>
</h2>
<p>所有加密交易者、新手和爱好者的互联网角落。<br>监控您最喜欢的硬币的价格、数量和趋势。<br> KoinKorner 还密切关注社区发展和重要事件。
</p>
<a class=”btn lavender”>学到更多</a>
<a class=”btn blue”>加入我们</a>
</div>
第二部分：社交媒体和电子邮件订阅部分
<div class=”sub” id=”sub”>
<h2>在社交媒体上与我们联系</h2>
<div id=”socicons” >
<a href=”#”> <ion-icon size=”large”name=”logo-twitter”></ion-icon> </a>
<a href=”#”> <ion-icon size=”large”name=”logo-instagram”></ion-icon> </a>
<a href=”#”> <ion-icon size=”large”name=”logo-facebook”></ion-icon> </a>
</div>
<h2>订阅我们的时事通讯以获取更新</h2>
<form action=”#”>
<input
类型=“电子邮件”
名称=“电子邮件”
id="电子邮件订阅"
类=“电子邮件订阅”
占位符=“输入您的电子邮件”
必填 />
<input
类型=“提交”
价值=“订阅”
id=”sub-btn”
类=“提交-btn”
必填 />
</form>
</div>
hero 部分的 CSS 样式如下。
.hero{ 显示：弹性；
对齐项目：居中；
justify-content: 之间的空格；
差距：1.9rem；
最大宽度：1100px；
保证金：2rem；
自动 -6rem;}
.intro h2{ 字体大小：3rem;
边距底部：1rem；
文本对齐：左；} .intro p{ 边距底部：0.5rem;
文本对齐：左；} .hero p{ line-height: var( — line-height);} .land{ color:var( — 原色)} .here{ color:var( — 次要颜色)} .btn{ 边距顶部：1rem;
显示：内联块；
填充：0.8rem 0.6rem；
边框：无；
颜色：#fff;} .lavender{ 背景颜色：var( — 次要颜色);} .lavender:hover{ 背景颜色：#B5B2C2;} .blue{背景颜色：var（-辅助颜色）；颜色：#fff；} .blue：悬停{背景颜色：#A0C1D1；颜色：#fff；} .sub{ 边距顶部：0rem;} .sub h2{ 文本对齐：居中；} 形式{文本对齐：中心；
边距：0.1rem 2 rem;} .email-sub{ 填充：0.2rem;
边框：1px 实心 var(--primary-color);
边框半径：4px;} .email-sub:focus{ 边框：1px 实心 var( — 次要颜色);
大纲：无；} .submit-btn{ 背景颜色：var( — 原色);
颜色：#fff;
填充：0.3rem；
保证金：0.5rem；
边框：无；
边框半径：2px；
光标：指针；} .submit-btn:hover{ 背景颜色：#b3b4b4;} .sub #socicons { 字体大小：1.3rem;
尺寸：大；
文本对齐：居中；
边距：自动；}
Hero Section
与 JavaScript 的交互性：
对于 Hero 部分，我们将给订阅按钮一个 onClick 事件来提醒用户他们订阅了我们的邮件列表。
const email_button = document.getElementById('sub-btn');
email_button.onclick=函数（）{
警报（“订阅”）；
}
如何制作搜索功能
搜索功能是我们应用程序不可或缺的一部分，因为它允许用户查找特定硬币的信息。
<! — Search feature →
<section class=”look-up”>
<div class=”search” id=”search”>
<form action=”#” method=”GET”>
<input
类型=“文本”
占位符=“搜索加密货币”
名称=“q”
类=“搜索栏”
必需的
>
<input
类型=“提交”
价值=“搜索”
id="搜索-btn"
类=“搜索-btn”
必需的
/>
</form>
</div>
<! — for search result →
<div class=”search-result-container mt-1" >
<div class=”single-search-result card” id=”search-results”>
</div>
</div>
</section>
搜索功能的 CSS 样式如下：
。搜索{
宽度：500px；
边距：100px 自动；
}
输入[类型=“文本”]{
显示：块；
宽度：计算（100% — 24px）；
字体大小：18px；
字体粗细：600；
颜色：var（——原色）；
填充：10px；
边框：轮廓；
}
.search-btn{
背景色: var( — 原色);
颜色：#fff;
填充：0.3rem；
保证金：0.5rem；
边框：无；
边框半径：2px；
光标：指针；
}
.search-btn：悬停{
背景颜色：#b3b4b4；
}
/* 搜索结果样式 */
.search-result-container{
显示：弯曲；
弹性方向：列；
证明内容：中心；
间隙：1rem；
}
.单搜索结果{
显示：弯曲；
弹性方向：行；
弹性包装：换行；
填充：0.5rem 2rem；
保证金：0rem 5rem；
间隙：1rem；
justify-content: 之间的空格；
过渡：全部0.25s；
}
.single-search-result:悬停{
box-shadow: var(--primary-color);
}
.single-search-result > img{
高度：2rem；
}
.single-search-result > h3{
字体大小：1.5rem；
}
.single-search-result > p{
保证金：汽车；
}
.single-search-result > a{
背景颜色：#465362；
边框：1px 实心 var(--primary-color);
边框半径：5px；
光标：指针；
填充：0.25rem 1rem；
过渡：全部0.25s；
左边距：自动；
文字装饰：无；
颜色：#011936；
}
.single-search-result > a:hover{
背景颜色：#465362；
}
与 JavaScript 的交互性：
让我们逐步了解搜索功能的交互性。
第一个函数 searchData 将用于从 Coin Gecko 搜索 API 获取数据 端点 .首先，我们获取当前 URL 并将其作为对象传递给 params 以获取我们放入表单中的查询参数 'q'。这将使我们能够获得用户键入的确切搜索词。接下来，我们获取搜索词并从 API 获取结果并将数据转换为 JSON 格式。
函数搜索数据（）{
常量 currentURL =window.location.href;
常量 url_obj = 新 URL（当前 URL）；
常量参数 = 新 URLSearchParams(url_obj.search);
if(!params.has('q')){
返回;
}
document.getElementsByName('q')[0].value = params.get('q');
拿来（'[ https://api.coingecko.com/api/v3/search?query='+](https://api.coingecko.com/api/v3/search?query='+) params.get('q'))
.then(resp => resp.json())
.then（渲染）；
}
第二个函数，render，定义了我们将如何显示搜索结果。我们将遍历数据数组并只获得硬币。然后我们将继续仅显示我们需要的信息，即索引、名称、符号、id 和市值排名。然后我们将把所有数据放在一张卡片上并以这种方式显示。
函数渲染（数据）{
对于（让我=0；我
常量 singleCoin = data.coins[i];
console.log(singleCoin);
常量索引 = i +1;
常量徽标 = singleCoin.thumb;
常量名称 = singleCoin.name;
常量符号 = singleCoin.symbol;
常量 coinId = singleCoin.id;
常量上限 = singleCoin.market_cap_rank;
createSingleCard(index, logo, name, symbol, coinId,cap);
}
}
第三个函数 createSingleCard 在我们的应用程序中显示查询时很有用，因此用户可以看到他们的搜索结果。首先，我们将索引、徽标、符号、id 和市值作为参数传递并创建元素，最后通过搜索结果容器将它们附加到 DOM。
函数 createSingleCard(index, logo, name, symbol, coinId,cap){
const id_elem = document.createElement('p');
如果（索引<10）{
索引=索引+“”；
}
id_elem.innerHTML=索引； 常量 logo_elem = document.createElement('img');
logo_elem.src=标志；
logo_elem.alt='硬币标志'; const name_elem = document.createElement('h3');
name_elem.innerText=名称； const symbol_elem = document.createElement('h3');
symbol_elem.innerText=符号； 常量 cap_elem = document.createElement('h3');
cap_elem.innerText=“市值排名：”+ cap; const anchor_elem = document.createElement('a');
anchor_elem.innerText="更多信息";
anchor_elem.href=”#” + coinId； const container_elem = document.createElement('div');
container_elem.classList.add('single-search-result','card');
container_elem.appendChild(id_elem);
container_elem.appendChild(logo_elem);
container_elem.appendChild(name_elem);
container_elem.appendChild(symbol_elem);
container_elem.appendChild(cap_elem);
container_elem.appendChild(anchor_elem); document.getElementById('search-results').appendChild(container_elem);
}
Search Bar
如何制作市场信息表
市场信息表是显示加密货币硬币及其相关信息的重要功能。
<section id=”market-data-results”>
<table id=”market-data-table”>
<tr>
<th>#</th>
<th>标识</th>
<th>硬币</th>
<th>象征</th>
<th>当前价格（美元）</th>
<th>市值（美元）</th>
<th>价格变化百分比 24 小时</th>
<th>最喜欢的</th>
</tr>
<! — Table rows are inserted when the page loads using Javascript →
</table>
</section>
<br>
信息市场表格的 CSS 样式如下：
#market-data-table, #market-data-table{
宽度：70%；
边距：0 自动；
}
#market-data-table th{
填充：8px；
文本对齐：左；
上边距：12px；
背景颜色: var( — 次要颜色);
白颜色;
}
#market-data-table th，#market-data-table td{
填充：8px；
border-bottom: 1px solid var(--secondary-color);
}
#market-data-table td >img{
高度：40px；
宽度：40px；
}
与 JavaScript 的交互性：
让我们一步一步来。
第一个函数 marketData 用于通过 API 端点获取有关加密货币硬币的数据，然后将其转换为 JSON 格式。
功能市场数据（）{
// 常量 currentURL =window.location.href;
返回获取（'[ https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false'](https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false') )
.then(res=>res.json())
.then（数据=>显示表（数据））；
}
第二个函数 displayTable 用于创建表格，将数据作为参数并逐行渲染数据，并让每个被提取的项目进入各自的单元格，从而显示一个整洁有序的表格。
函数显示表（数据）{
const $resultsTable = document.getElementById('market-data-table')
data.forEach（（元素，索引）=>{
渲染行（元素，索引）
}) 函数渲染行（元素，位置）{
const {图像，名称，符号，market_cap，current_price，price_change_percentage_24h} =元素 // 第一行被标题占据
// 根据表元素的索引插入一个新行
常量行 = $resultsTable.insertRow(位置 + 1)
// 每个插入的单元格对应一行
常量 numberCell = row.insertCell(0)
常量 imageCell = row.insertCell(1)
常量 nameCell = row.insertCell(2)
const symbolCell = row.insertCell(3)
常量 currentPriceCell = row.insertCell(4)
常量 marketCapPriceCell = row.insertCell(5)
常量 priceChangeCell = row.insertCell(6)
常量 likerCell = row.insertCell(7) const logoElement = document.createElement('img')
logoElement.src = 图片；
logoElement.alt = '硬币标志'; const likerButton = document.createElement('button');
likerButton.innerHTML=” ⭐”;
likerButton.onclick=函数（）{
警报（“喜欢”）；
} numberCell.innerText = 位置 + 1
imageCell.appendChild(logoElement)
nameCell.innerText = name.toUpperCase()
symbolCell.innerText = symbol.toUpperCase()
currentPriceCell.innerText = `$${current_price.toFixed(2)}`
marketCapPriceCell.innerText = `$${market_cap.toFixed(2)}`
priceChangeCell.innerText = `${price_change_percentage_24h.toFixed(2)}%`
likerCell.appendChild(likerButton)
}
}
// 此函数确保在页面完全加载时加载函数。
window.onload = 函数（）{
搜索数据（）；
市场数据（）；
}
您的市场数据表应如下所示
Market Information Table
如何制作页脚
在页脚中，我们添加了指向 Coin Gecko 网站的链接以进行归属。
© 是大多数网站页脚中出现的 © 的字符实体。
页脚很简单，在 HTML 中如下所示。
<! — Footer Section →
<footer>
供电[ https://www.coingecko.com/en/api/documentation](https://www.coingecko.com/en/api/documentation) ">Coin Gecko API
<br>
©2022。版权所有
</footer>
页脚的 CSS 样式在以下几行中完成。
页脚{
边框顶部：1px 实心#f1f1f1；
盒子阴影：0px -2px 3px #f1f1f1;
文本对齐：居中；
填充：2rem；
对齐项目：居中；
}
您的页脚应该看起来像这样
Footer
结论
您可以查看完整的单页应用程序 这里 和 GitHub 存储库 这里 .
这就是今天的全部内容，如果你已经走到了这一步，那么你已经学会了如何创建：
- 使用从 API 获取的数据的搜索功能。
- 按钮的点击监听器。
- 从 API 获取数据的市场信息表。
感谢您的阅读，直到下一次，代码与您同在。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
