各位开发者大家好！我很高兴分享我的最新项目：实用的温度转换器。该项目非常适合那些希望通过处理用户输入、执行转换和动态更新 dom 来增强 javascript 技能的人。无论您是初学者还是经验丰富的开发人员，此温度转换器都是了解单位转换基础知识的绝佳项目。
温度转换器是一款基于网络的应用程序，可让用户轻松在摄氏度、华氏度和开尔文之间转换温度。该项目演示了如何创建交互式用户界面、处理计算并向用户提供实时反馈。
特征
使用的技术
项目结构
以下是项目结构的快速浏览：
temperature-converter/ ├── index.html ├── styles.css └── script.js
安装
要开始该项目，请按照以下步骤操作：
克隆存储库:
git clone https://github.com/abhishekgurjar-in/temperature-converter.git
打开项目目录：
cd temperature-converter
运行项目:
用法
代码说明
超文本标记语言
index.html 文件提供了温度转换器的基本结构，包括摄氏度、华氏度和开尔文的输入字段。这是一个片段：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>temperature converter</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<video id="background-video" autoplay loop muted poster="https://assets.codepen.io/6093409/river.jpg">
<source src="./images/bg.mp4" type="video/mp4">
</video>
<div class="container">
<h1 class="heading">temperature converter</h1>
<div class="temp-container">
<label for="celsius">celsius:</label>
<input
onchange="computetemp(event)"
type="number"
name="celsius"
id="celsius"
placeholder="enter temperature"
class="input"
/>
</div>
<div class="temp-container">
<label for="fahrenheit">fahrenheit:</label>
<input
onchange="computetemp(event)"
type="number"
name="fahrenheit"
id="fahrenheit"
placeholder="enter temperature"
class="input"
/>
</div>
<div class="temp-container">
<label for="kelvin">kelvin:</label>
<input
onchange="computetemp(event)"
type="number"
name="kelvin"
id="kelvin"
placeholder="enter temperature"
class="input"
/>
</div>
</div>
<div class="footer">
<p>made with ❤️ by abhishek gurjar</p>
</div>
</body>
</html>
css
styles.css 文件设置温度转换器的样式，提供干净且响应式的布局。以下是一些关键风格：
body {
margin: 0;
background: url(./images/bg.mp4);
min-height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
font-family: monospace;
color: white;
}
.container {
background: #202124;
padding: 20px;
box-shadow: 0 4px 10px rgba(null, 0, 0, 0.3);
border-radius: 10px;
width: 85%;
max-width: 450px;
min-width: 350px;
display: flex;
flex-direction: column;
align-items: center;
}
.heading {
font-size: 32px;
}
.temp-container {
width: 100%;
padding: 15px;
font-weight: bold;
font-size: 18px;
}
.input {
width: 220px;
font-family: monospace;
padding: 5px;
float: right;
outline: none;
background: white;
border-color: white;
border-radius: 5px;
color: black;
font-size: 18px;
}
.input::placeholder {
color: gray;
}
#background-video {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
.footer {
margin-top: 200px;
text-align: center;
}
javascript
script.js 文件处理转换逻辑，根据用户输入更新温度值。这是一个片段：
const celsiusEl = document.getElementById("celsius");
const fahrenheitEl = document.getElementById("fahrenheit");
const kelvinEl = document.getElementById("kelvin");
function computeTemp(event) {
const currentValue = +event.target.value;
switch (event.target.name) {
case "celsius":
kelvinEl.value = (currentValue + 273.32).toFixed(2);
fahrenheitEl.value = (currentValue * 1.8 + 32).toFixed(2);
break;
case "fahrenheit":
celsiusEl.value = ((currentValue - 32) / 1.8).toFixed(2);
kelvinEl.value = ((currentValue - 32) / 1.8 + 273.32).toFixed(2);
break;
case "kelvin":
celsiusEl.value = (currentValue - 273.32).toFixed(2);
fahrenheitEl.value = ((currentValue - 273.32) * 1.8 + 32).toFixed(2);
break;
default:
break;
}
}
现场演示
您可以在这里查看温度转换器的现场演示。
结论
构建这个温度转换器是一次有益的经历，它增强了我对 javascript 以及如何创建交互式 web 应用程序的理解。我希望这个项目能够激励您进一步探索并构建自己的转换工具。快乐编码！
制作人员
这个项目是我不断提高 web 开发技能的一部分，重点关注 javascript 和 dom 操作。
作者