x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-03-04 17:14:11 +03:00 committed by GitHub
parent 1eae20851d
commit 2341dd9c22
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 66 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
100_projects/11-generate-random-serial-number/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="serial"></div>
<span class="generate">Generate</span>
<script src="main.js"></script>
</body>
</html>

12
100_projects/11-generate-random-serial-number/main.js Normal file
View File

@ -0,0 +1,12 @@
let btnEl = document.querySelector('.generate');
let serialEl = document.querySelector('.serial');
btnEl.onclick = function(){
let chars = '1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
let charsCount = 15;
let randomSerial = "";
for (let i = 0; i < charsCount; i++){
randomSerial += chars[Math.floor(Math.random() * chars.length)];
}
serialEl.innerHTML = randomSerial;
};

40
100_projects/11-generate-random-serial-number/style.css Normal file
View File

@ -0,0 +1,40 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #E9BF8B;
min-height: 100vh;
}
.serial {
width: 400px;
height: 66px;
padding: 20px;
background-color: #2C2D2A;
color: #E9BF8B;
margin: 40px auto 0;
border-radius: 4px;
text-align: center;
font-size: 22px;
font-weight: bold;
}
.generate {
display: block;
width: fit-content;
margin: 20px auto;
background-color: #2C2D2A;
color:#E9BF8B;
padding: 10px 20px;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
transition: 0.2s;
user-select: none;
}
.generate:hover {
color: #2C2D2A;
border: 1px solid #2C2D2A;
background-color: #E9BF8B;
box-shadow: 5px 5px 1px #2C2D2A;
}