-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathMMtoCarat.html
146 lines (139 loc) · 5.98 KB
/
MMtoCarat.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
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stone Shape Converter</title>
</head>
<body>
<h1>Stone Shape Converter</h1>
<form id="converterForm">
<label for="shape">Select Stone Shape:</label>
<select id="shape" name="shape">
<option value="Round">Round</option>
<option value="Princess">Princess</option>
<option value="Cushion">Cushion</option>
<option value="Oval">Oval</option>
<option value="Radiant">Radiant</option>
<option value="Emerald">Emerald</option>
<option value="Pear">Pear</option>
<option value="Heart">Heart</option>
<option value="Marquise">Marquise</option>
<option value="Triangle">Triangle</option>
<option value="Trillion">Trillion</option>
<option value="Baguette">Baguette</option>
<option value="TaperedBaguette">Tapered Baguette</option>
</select><br><br>
<label for="unit">Select Unit:</label>
<select id="unit" name="unit">
<option value="mm">Millimeter (mm)</option>
<option value="carat">Carat (ct)</option>
</select><br><br>
<label for="value">Enter Value:</label>
<input type="text" id="value" name="value" placeholder="e.g. 2,2 or 2*2"><br>
<span id="valueMessage" style="color: grey;"></span><br>
<span id="errorMsg" style="color: red; display: none;"></span><br>
<button type="submit">Convert</button>
</form>
<div id="result"></div>
<!-- Importing JavaScript files -->
<script src="converter.js" type="module"></script>
<script>
// Function to update the value message based on the selected shape and unit
function updateValueMessage() {
// Get the selected shape value
var shape = document.getElementById('shape').value;
// Get the selected unit value
var unit = document.getElementById('unit').value;
// Get the value input field
var valueInput = document.getElementById('value');
// Remove required attribute initially
valueInput.removeAttribute('required');
// Set the required attribute based on the selected shape and unit
if (unit == 'mm') {
switch (shape) {
case 'Round':
case 'Princess':
case 'Heart':
case 'Triangle':
case 'Trillion':
document.getElementById('valueMessage').innerText = 'Enter 1 value';
break;
case 'Cushion':
case 'Baguette':
case 'Marquise':
case 'Emerald':
case 'Oval':
case 'Radiant':
case 'Pear':
document.getElementById('valueMessage').innerText = 'Enter 2 values separated by ","';
break;
case 'TaperedBaguette':
document.getElementById('valueMessage').innerText = 'Enter 3 values separated by ","';
break
default:
valueInput.removeAttribute('required');
document.getElementById('valueMessage').innerText = '';
break;
}
}
}
// Add event listener to the shape select element
document.getElementById('shape').addEventListener('change', function() {
updateValueMessage();
});
// Add event listener to the unit select element
document.getElementById('unit').addEventListener('change', function() {
updateValueMessage();
});
// Add event listener to the value input field
document.getElementById('value').addEventListener('input', function() {
// Get the selected shape value
var shape = document.getElementById('shape').value;
// Get the value input field
var valueInput = document.getElementById('value');
// Check if the input is required and not filled
var values = valueInput.value.split(',');
var requiredValues = 1;
switch (shape) {
case 'Cushion':
case 'Baguette':
case 'Marquise':
case 'Emerald':
case 'Oval':
case 'Radiant':
case 'Pear':
requiredValues = 2;
break;
case 'TaperedBaguette':
requiredValues = 3;
break;
}
if (values.length > requiredValues) {
// Trim extra values
valueInput.value = values.slice(0, requiredValues).join(',');
}
updateValueMessage();
});
// Add event listener for form submission
document.getElementById('converterForm').addEventListener('submit', function(event) {
// Get the selected shape value
var shape = document.getElementById('shape').value;
// Get the value input field
var valueInput = document.getElementById('value');
// Check if the input is required and not filled
if (valueInput.hasAttribute('required') && valueInput.value.trim() === '') {
// Display error message
document.getElementById('errorMsg').style.display = 'block';
// Prevent form submission
event.preventDefault();
} else {
// Hide error message if input is filled correctly
document.getElementById('errorMsg').style.display = 'none';
}
});
// Call updateValueMessage initially
updateValueMessage();
</script>
</body>
</html>