-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
70 lines (58 loc) · 2.84 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Editor de border-radius</title>
<link rel="stylesheet" type='text/css' href="/styles/reset.css"></link>
<link rel="stylesheet" type='text/css' href="/styles/global.css"></link>
<link rel="shortcut icon" type="imagex/png" href="/assets/icon.ico">
<!-- importando fontes -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nova+Mono&family=VT323&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<main>
<h1 class="title">Border Radius</h1>
<div class="box-form-inputs">
<input id="input-unit-of-measurement" class="pattern-input" type="text" value="rem">
<div class="checkForRem" id="divCheck">
<input id="forRem" type="checkbox" class="input-checkbox">
<label for="forRem">Considerar font-size da tag html como 62.5%?</label>
</div>
<input id="topLeft" class="pattern-input" type="text" value="0">
<input id="topRight" class="pattern-input" type="text" value="0">
<div class="form" id="element-example">
</div>
<input id="bottomLeft" class="pattern-input" type="text" value="0">
<input id="bottomRight" class="pattern-input" type="text" value="0">
<div id="codeBlock" class="copyCode">
<input id="code" class="paragraghCode pattern-input" type="text" value="border-radius: 0rem 0rem 0rem 0rem;" readonly>
<div id="copy" class="div-copy-img">
<img src="/assets/copy-img.svg">
</div>
</div>
</div>
</main>
<script>
const formExample = document.getElementById('element-example');
let borderMeasure = document.getElementById('input-unit-of-measurement');
let borderTopRight = document.getElementById('topRight');
let borderTopLeft = document.getElementById('topLeft');
let borderBottomLeft = document.getElementById('bottomLeft');
let borderBottomRight = document.getElementById('bottomRight');
let btnCopy = document.getElementById('copy');
let code = document.getElementById('code');
function copyCode(){
code.select();
document.execCommand('copy');
console.log('copiei');
}
btnCopy.addEventListener('click', copyCode);
</script>
<script src="/main.js" type="module"></script>
</body>
</html>