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

完毕！享受 所有独特角色挑战片段

现在下载

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/11680/51500311