-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtut2.html
184 lines (171 loc) · 6.17 KB
/
tut2.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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ISBN Calculation Tutorial</title>
<style>
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f0f8ff;
color: #333;
}
header {
background: linear-gradient(135deg, #4CAF50, #81C784);
color: white;
text-align: center;
padding: 15px 20px;
}
header h1 {
font-size: 2em;
margin: 0;
}
.container {
max-width: 900px;
margin: 20px auto;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h2 {
color: #4CAF50;
}
.step {
margin-bottom: 20px;
}
.example-box {
background: #f9f9f9;
border: 1px solid #ddd;
padding: 10px;
margin-top: 10px;
border-radius: 5px;
}
.example-box strong {
color: #4CAF50;
}
.link-container {
text-align: center;
margin-top: 20px;
}
.link-container a {
display: inline-block;
padding: 12px 24px;
background: #4CAF50;
color: white;
text-decoration: none;
font-size: 16px;
border-radius: 5px;
transition: background 0.3s;
}
.link-container a:hover {
background: #388E3C;
}
.toggle-buttons {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.toggle-buttons button {
margin: 0 10px;
padding: 10px 20px;
background: #4CAF50;
border: none;
color: white;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}
.toggle-buttons button:hover {
background: #388E3C;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<header>
<h1>How to Calculate ISBN-10 and ISBN-13</h1>
</header>
<div class="container">
<div class="toggle-buttons">
<button id="btn-isbn10">Show ISBN-10</button>
<button id="btn-isbn13">Show ISBN-13</button>
</div>
<div id="isbn10-tutorial">
<h2>Step-by-Step: ISBN-10</h2>
<div class="step">
<h3>Step 1: Understand the Format</h3>
<p>An ISBN-10 consists of 9 digits followed by a check digit. The check digit ensures the integrity of the ISBN.</p>
</div>
<div class="step">
<h3>Step 2: Calculate the Weighted Sum</h3>
<p>Multiply each digit by its position (1 to 9) and sum the products.</p>
<div class="example-box">
<strong>Example:</strong><br>
ISBN: 0-306-40615-<u>?</u><br>
Weighted Sum = (0×1) + (3×2) + (0×3) + (6×4) + (4×5) + (0×6) + (6×7) + (1×8) + (5×9)<br>
= 0 + 6 + 0 + 24 + 20 + 0 + 42 + 8 + 45 = <strong>145</strong>
</div>
</div>
<div class="step">
<h3>Step 3: Find the Check Digit</h3>
<p>Divide the weighted sum by 11. The remainder is the check digit. If the remainder is 10, use 'X'.</p>
<div class="example-box">
<strong>Example:</strong><br>
Check Digit = 145 mod 11 = 2<br>
Final ISBN: 0-306-40615-<strong>2</strong>
</div>
</div>
</div>
<div id="isbn13-tutorial" class="hidden">
<h2>Step-by-Step: ISBN-13</h2>
<div class="step">
<h3>Step 1: Understand the Format</h3>
<p>An ISBN-13 consists of 12 digits followed by a check digit. It uses alternating weights of 1 and 3.</p>
</div>
<div class="step">
<h3>Step 2: Calculate the Weighted Sum</h3>
<p>Multiply each digit alternately by 1 and 3, then sum the results.</p>
<div class="example-box">
<strong>Example:</strong><br>
ISBN: 978-0-306-40615-<u>?</u><br>
Weighted Sum = (9×1) + (7×3) + (8×1) + (0×3) + (3×1) + (0×3) + (6×1) + (4×3) + (0×1) + (6×3) + (1×1) + (5×3)<br>
= 9 + 21 + 8 + 0 + 3 + 0 + 6 + 12 + 0 + 18 + 1 + 15 = <strong>93</strong>
</div>
</div>
<div class="step">
<h3>Step 3: Find the Check Digit</h3>
<p>Take the weighted sum modulo 10. Subtract the result from 10. If the result is 10, use '0'.</p>
<div class="example-box">
<strong>Example:</strong><br>
Check Digit = (10 - (93 mod 10)) mod 10<br>
= (10 - 3) mod 10 = 7<br>
Final ISBN: 978-0-306-40615-<strong>7</strong>
</div>
</div>
</div>
<div class="link-container">
<a href="https://www.youtube.com/results?search_query=isbn+calculation+tutorial" target="_blank">Watch Tutorial on YouTube</a>
</div>
</div>
<script>
const btnIsbn10 = document.getElementById('btn-isbn10');
const btnIsbn13 = document.getElementById('btn-isbn13');
const isbn10Tutorial = document.getElementById('isbn10-tutorial');
const isbn13Tutorial = document.getElementById('isbn13-tutorial');
btnIsbn10.addEventListener('click', () => {
isbn10Tutorial.classList.remove('hidden');
isbn13Tutorial.classList.add('hidden');
});
btnIsbn13.addEventListener('click', () => {
isbn10Tutorial.classList.add('hidden');
isbn13Tutorial.classList.remove('hidden');
});
</script>
</body>
</html>