Испытание всех уникальных символов в HTML, CSS и JavaScript

HTML:

<div class="wrapper">
<h1>All Unique Characters</h1><br>
<p>A prompt from <a href="https://buttondown.email/cassidoo/archive/keep-your-face-always-toward-the-sunshine-and/">Cassidy Williams' newsletter</a>: <br>Write a function that determines if all <br>the characters in a given string are unique.</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:

* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
background-color: #ffffff;
background-image: radial-gradient(black 1px, transparent 1px),
radial-gradient(black 1px, white 1px);
background-size: 54px 54px;
background-position: 0 0, 27px 27px;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
border: 5px solid black;
background-color: white;
box-shadow: 20px 15px 0 gray;
padding: 50px;
margin: 50px;
}
p {
text-align: center;
}
.form-start {
display: flex;
justify-content: center;
margin: 0;
box-shadow: 20px 15px 0 grey;
}
.text,
.text:focus {
border: 5px solid black;
border-radius: none;
outline: none;
background-color: white;
padding: 8px 16px;
}
.btn {
cursor: pointer;
border: none;
font-weight: bold;
color: white;
background-color: black;
padding: 8px 16px;
}
.btn:hover {
transform: translate(5px, 5px);
}
.confirmed {
box-shadow: 20px 15px 0 green;
}
.denied {
box-shadow: 20px 15px 0 red;
}

JavaScript:

// https://patrikrizek.github.io/
console.clear();
const {
core: { describe, it, expect, run },
prettify
} = window.jestLite;
document.addEventListener("keypress", function (event) {
if (event.key === "Enter") {
event.preventDefault();
document.getElementById("submit").click();
}
});
function displayResult() {
const uniqueText = document.getElementById("unique-text").value;
const agreeWrapper = document.querySelector(".wrapper");
const agreeForm = document.querySelector(".form-start");
const charactersOnly = /^[A-Za-z\s]+$/;
if (!charactersOnly.test(uniqueText)) {
document.getElementById("unique-text").select();
alert("Only letters are allowed. No spacing on beginning and the end.");
} else {
agreeWrapper.classList.remove("confirmed", "denied");
agreeForm.classList.remove("confirmed", "denied");
if (testUniqueChars(uniqueText)) {
agreeWrapper.classList.add("confirmed");
agreeForm.classList.add("confirmed");
} else {
agreeWrapper.classList.add("denied");
agreeForm.classList.add("denied");
}
}
}
function testUniqueChars(text) {
// This is where you write the implementation, CodePen Challenge friends!
const unique = new Set(text);
return text.length == unique.size;
}
// These are the tests you are trying to make pass, if you choose to use the test suite.
describe("testUniqueChars", () => {
it("has unique chars", () => {
expect(testUniqueChars("Code")).toBe(true);
expect(testUniqueChars("Pen")).toBe(true);
expect(testUniqueChars("CodePen")).toBe(false);
expect(testUniqueChars("Challenge")).toBe(false);
});
});

Фрагменты кода HTML, CSS и JavaScript включены, AllWebCodes.com

Сделанный! И наслаждайтесь фрагментами испытаний всех уникальных персонажей

Загрузить сейчас