forked from khaledkzy/pixel-vh-vw-converter
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (111 loc) · 3.7 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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="/anime/lib/anime.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,400;0,500;1,500;1,600&display=swap" rel="stylesheet">
<title>Pixel to Viewport Conversion</title>
</head>
<body>
<header>
<nav>
<h1>
<a href="https://github.com/LuckyCrack/pixel-vh-VW-converter">Pixel to Viewport Conversion</a>
</h1>
</nav>
</header>
<main>
<!-- 1 -->
<div class="crd">
<div class="option_1st">
<input type="radio" id="r1_px" name="options_1" value="px" checked>
<label for="r1_px"><span>px</span></label>
<input type="radio" id="r1_vh" name="options_1" value="vh">
<label for="r1_vh"><span>vh</span></label>
<input type="radio" id="r1_vw" name="options_1" value="vw">
<label for="r1_vw"><span>vw</span></label>
</div>
<input placeholder="0.00" size="4" id="cc1" value="0.00" onkeyup="convert(this.value, this.id)">
<div class="ssvg">
<svg xmlns="http://www.w3.org/2000/svg" width="5" height="458" viewBox="0 0 5 458">
<path id="Path_1" data-name="Path 1" d="M0,0V453" transform="translate(2.5 2.5)" fill="none" stroke="#a099e1" stroke-linecap="round" stroke-width="5"/>
</svg>
</div>
<input placeholder="0.00" size="4" id="cc2" value="0.00" onkeyup="convert(this.value, this.id)">
<div class="options_2nd">
<input type="radio" id="r2_px" name="options_2" value="px" checked>
<label for="r2_px"><span>px</span></label>
<input type="radio" id="r2_vh" name="options_2" value="vh">
<label for="r2_vh"><span>vh</span></label>
<input type="radio" id="r2_vw" name="options_2" value="vw">
<label for="r2_vw"><span>vw</span></label>
</div>
</div>
</main>
</body>
<script>
var id_was = "cc2"
function convert(value, id)
{
var r1_px = document.getElementById('r1_px')
var r1_vh = document.getElementById('r1_vh')
var r1_vw = document.getElementById('r1_vw')
var r2_px = document.getElementById('r2_px')
var r2_vh = document.getElementById('r2_vh')
var r2_vw = document.getElementById('r2_vw')
var res_val = "0.00"
if(r1_px.checked && r2_vh.checked)
{
res_val = ((100 * value) / window.innerHeight).toFixed(2);
}
if(r1_px.checked && r2_vw.checked)
{
res_val = ((100 * value) / window.innerWidth).toFixed(2);
}
if(r1_vh.checked && r2_px.checked)
{
res_val = ((window.innerHeight * value) / 100).toFixed(2);
}
if(r1_vw.checked && r2_px.checked)
{
res_val = ((window.innerWidth * value) / 100).toFixed(2);
}
if(r1_px.checked && r2_px.checked || r1_vw.checked && r2_vw.checked || r1_vh.checked && r2_vh.checked)
{
res_val = value;
}
if(r1_vw.checked && r2_vh.checked || r1_vh.checked && r2_vw.checked)
{
res_val = "Invalid";
}
if(id == "cc1")
{
document.querySelector("#cc2").value = res_val
id_was = "cc1"
}
else
{
if(id == 'cc2')
{
document.querySelector("#cc1").value = res_val
id_was = "cc1"
}
}
}
window.addEventListener('resize', updateMeasurements)
function updateMeasurements()
{
if(id_was == "cc1")
{
convert(document.querySelector("#cc1").value,id_was)
}
if(id_was == 'cc2')
{
convert(document.querySelector("#cc2").value,id_was)
}
}
</script>
</html>