HTML、CSS 和 JavaScript 中的所有唯一字符挑战
HTML：
<div class="wrapper">
<h1>所有独特的字符</h1><br>
<p>来自<a href="https://buttondown.email/cassidoo/archive/keep-your-face-always-toward-the-sunshine-and/">Cassidy Williams 时事通讯</a>的提示：<br>编写一个函数，确定是否所有<br>给定字符串中的字符是唯一的。</p><br> <form class="form-start">
<input type="text" class="text" id="unique-text" placeholder="Insert your text" pattern="^[^\s].[A-Za-z\s]+[^\s]$" focus required>
<input type="button" class="btn" id="submit" onclick="displayResult()" value="Check Unique Text">
</form>
</div>
CSS：
* {
边距：0；
填充：0；
字体系列：无衬线；
} 身体 {
高度：100vh；
显示：弯曲；
弹性方向：列；
证明内容：中心；
对齐项目：居中；
溢出：隐藏；
背景颜色：#ffffff；
背景图像：径向渐变（黑色 1px，透明 1px），
径向渐变（黑色 1px，白色 1px）；
背景尺寸：54px 54px；
背景位置：0 0, 27px 27px;
} .wrapper {
显示：弯曲；
弹性方向：列；
对齐项目：居中；
边框：5px 纯黑色；
背景颜色：白色；
盒子阴影：20px 15px 0 灰色；
填充：50px；
边距：50px；
} p {
文本对齐：居中；
} .form-start {
显示：弯曲；
证明内容：中心；
边距：0；
盒子阴影：20px 15px 0 灰色；
} 。文本，
.文本：焦点{
边框：5px 纯黑色；
边界半径：无；
大纲：无；
背景颜色：白色；
填充：8px 16px；
} .btn {
光标：指针；
边框：无；
字体粗细：粗体；
白颜色;
背景颜色：黑色；
填充：8px 16px；
} .btn:悬停{
变换：翻译（5px，5px）；
} 。确认的 {
盒子阴影：20px 15px 0 绿色；
} .拒绝{
盒子阴影：20px 15px 0 红色；
}
JavaScript：
// https://patrikrizek.github.io/ 控制台.clear(); 常量 {
核心：{描述，它，期望，运行}，
美化
} = 窗口.isLite; document.addEventListener("keypress", function (event) {
if (event.key === "Enter") {
event.preventDefault();
document.getElementById("提交").click();
}
}); 函数显示结果（）{
const uniqueText = document.getElementById("unique-text").value;
const 同意包装器 = document.querySelector(".wrapper");
常量同意表单 = document.querySelector(".form-start"); const charactersOnly = /^[A-Za-z\s]+$/; 如果（！charactersOnly.test（uniqueText））{
document.getElementById("唯一文本").select();
alert("只允许字母。开头和结尾没有空格。");
} 别的 {
同意Wrapper.classList.remove("确认", "拒绝");
同意Form.classList.remove("确认", "拒绝"); 如果（testUniqueChars（uniqueText））{
同意Wrapper.classList.add("确认");
同意Form.classList.add("确认");
} 别的 {
同意Wrapper.classList.add("拒绝");
同意Form.classList.add("拒绝");
}
}
} 功能 testUniqueChars（文本）{
// 这是你编写实现的地方，CodePen Challenge 朋友们！
常量唯一 = 新设置（文本）；
返回 text.length == unique.size;
} // 如果您选择使用测试套件，这些是您试图通过的测试。
描述（“testUniqueChars”，（）=> {
it("有独特的字符", () => {
期望（testUniqueChars（“代码”））.toBe（真）；
期望（testUniqueChars（“笔”））.toBe（真）；
期望(testUniqueChars("CodePen")).toBe(false);
期望（testUniqueChars（“挑战”））.toBe（假）；
});
});
HTML、CSS 和 JavaScript 代码片段开启， AllWebCodes.com
完毕！享受 所有独特角色挑战片段
