Skip to content

Commit 7fe1a7f

Browse files
amit265amit265
committed
meta added
1 parent 59fa699 commit 7fe1a7f

File tree

16 files changed

+988
-829
lines changed

16 files changed

+988
-829
lines changed

‎binary-converter/index.html‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,38 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
3+
4+
<head>
5+
<meta name="description"
6+
content="Create a Binary Converter using JavaScript to convert numbers between binary and decimal." />
7+
<meta name="keywords" content="Binary Converter, JavaScript, web app, data conversion, educational tool" />
8+
<meta property="og:title" content="Binary Converter" />
9+
<meta property="og:description"
10+
content="Create a Binary Converter using JavaScript to convert numbers between binary and decimal." />
11+
<meta property="og:image" content="https://coderespite.com/image/js-projects/binary-converter.png" />
12+
<meta property="og:url" content="https://coderespite.com/projects/js-projects/binary-converter" />
13+
<meta name="twitter:card" content="summary_large_image" />
14+
<meta name="twitter:title" content="Binary Converter" />
15+
<meta name="twitter:description"
16+
content="Create a Binary Converter using JavaScript to convert numbers between binary and decimal." />
17+
<meta name="twitter:image" content="https://coderespite.com/image/js-projects/binary-converter.png" />
18+
419
<meta charset="UTF-8" />
520
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
621
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
722
<title>Decimal to Binary Converter</title>
823
<link rel="stylesheet" href="styles.css" />
9-
</head>
10-
<body>
24+
</head>
25+
26+
<body>
1127
<h1>Decimal to Binary Converter</h1>
1228
<div class="input-container">
13-
<label for="number-input">Enter a decimal number:</label>
14-
<input
15-
value=""
16-
type="number"
17-
name="decimal number input"
18-
id="number-input"
19-
class="number-input"
20-
/>
21-
<button class="convert-btn" id="convert-btn">Convert</button>
29+
<label for="number-input">Enter a decimal number:</label>
30+
<input value="" type="number" name="decimal number input" id="number-input" class="number-input" />
31+
<button class="convert-btn" id="convert-btn">Convert</button>
2232
</div>
2333
<output id="result" for="number-input"></output>
2434
<div id="animation-container"></div>
2535
<script src="script.js"></script>
26-
</body>
36+
</body>
37+
2738
</html>

‎calorie-counter/index.html‎

Lines changed: 67 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,77 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
3+
4+
<head>
5+
<meta name="description" content="Build a Calorie Counter app using JavaScript to track daily caloric intake." />
6+
<meta name="keywords" content="Calorie Counter, JavaScript, web app, fitness tracker, health management" />
7+
<meta property="og:title" content="Calorie Counter" />
8+
<meta property="og:description"
9+
content="Build a Calorie Counter app using JavaScript to track daily caloric intake." />
10+
<meta property="og:image" content="https://coderespite.com/image/js-projects/calorie-counter.png" />
11+
<meta property="og:url" content="https://coderespite.com/projects/js-projects/calorie-counter" />
12+
<meta name="twitter:card" content="summary_large_image" />
13+
<meta name="twitter:title" content="Calorie Counter" />
14+
<meta name="twitter:description"
15+
content="Build a Calorie Counter app using JavaScript to track daily caloric intake." />
16+
<meta name="twitter:image" content="https://coderespite.com/image/js-projects/calorie-counter.png" />
17+
418
<meta charset="utf-8" />
519
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
620
<link rel="stylesheet" href="styles.css" />
721
<title>Calorie Counter</title>
8-
</head>
9-
<body>
22+
</head>
23+
24+
<body>
1025
<main>
11-
<h1>Calorie Counter</h1>
12-
<div class="container">
13-
<form id="calorie-counter">
14-
<label for="budget">Budget</label>
15-
<input
16-
type="number"
17-
min="0"
18-
id="budget"
19-
placeholder="Daily calorie budget"
20-
required
21-
/>
22-
<fieldset id="breakfast">
23-
<legend>Breakfast</legend>
24-
<div class="input-container"></div>
25-
</fieldset>
26-
<fieldset id="lunch">
27-
<legend>Lunch</legend>
28-
<div class="input-container"></div>
29-
</fieldset>
30-
<fieldset id="dinner">
31-
<legend>Dinner</legend>
32-
<div class="input-container"></div>
33-
</fieldset>
34-
<fieldset id="snacks">
35-
<legend>Snacks</legend>
36-
<div class="input-container"></div>
37-
</fieldset>
38-
<fieldset id="exercise">
39-
<legend>Exercise</legend>
40-
<div class="input-container"></div>
41-
</fieldset>
42-
<div class="controls">
43-
<span>
44-
<label for="entry-dropdown">Add food or exercise:</label>
45-
<select id="entry-dropdown" name="options">
46-
<option value="breakfast" selected>Breakfast</option>
47-
<option value="lunch">Lunch</option>
48-
<option value="dinner">Dinner</option>
49-
<option value="snacks">Snacks</option>
50-
<option value="exercise">Exercise</option>
51-
</select>
52-
<button type="button" id="add-entry">Add Entry</button>
53-
</span>
54-
</div>
55-
<div>
56-
<button type="submit">
57-
Calculate Remaining Calories
58-
</button>
59-
<button type="button" id="clear">Clear</button>
60-
</div>
61-
</form>
62-
<div id="output" class="output hide"></div>
63-
</div>
26+
<h1>Calorie Counter</h1>
27+
<div class="container">
28+
<form id="calorie-counter">
29+
<label for="budget">Budget</label>
30+
<input type="number" min="0" id="budget" placeholder="Daily calorie budget" required />
31+
<fieldset id="breakfast">
32+
<legend>Breakfast</legend>
33+
<div class="input-container"></div>
34+
</fieldset>
35+
<fieldset id="lunch">
36+
<legend>Lunch</legend>
37+
<div class="input-container"></div>
38+
</fieldset>
39+
<fieldset id="dinner">
40+
<legend>Dinner</legend>
41+
<div class="input-container"></div>
42+
</fieldset>
43+
<fieldset id="snacks">
44+
<legend>Snacks</legend>
45+
<div class="input-container"></div>
46+
</fieldset>
47+
<fieldset id="exercise">
48+
<legend>Exercise</legend>
49+
<div class="input-container"></div>
50+
</fieldset>
51+
<div class="controls">
52+
<span>
53+
<label for="entry-dropdown">Add food or exercise:</label>
54+
<select id="entry-dropdown" name="options">
55+
<option value="breakfast" selected>Breakfast</option>
56+
<option value="lunch">Lunch</option>
57+
<option value="dinner">Dinner</option>
58+
<option value="snacks">Snacks</option>
59+
<option value="exercise">Exercise</option>
60+
</select>
61+
<button type="button" id="add-entry">Add Entry</button>
62+
</span>
63+
</div>
64+
<div>
65+
<button type="submit">
66+
Calculate Remaining Calories
67+
</button>
68+
<button type="button" id="clear">Clear</button>
69+
</div>
70+
</form>
71+
<div id="output" class="output hide"></div>
72+
</div>
6473
</main>
6574
<script src="./script.js"></script>
66-
</body>
75+
</body>
76+
6777
</html>

‎date-formatter/index.html‎

Lines changed: 60 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,77 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
3+
4+
<head>
5+
<meta name="description"
6+
content="Develop a Date Formatter using JavaScript to manipulate and format dates effectively." />
7+
<meta name="keywords" content="Date Formatter, JavaScript, web development, date manipulation, time management" />
8+
<meta property="og:title" content="Date Formatter" />
9+
<meta property="og:description"
10+
content="Develop a Date Formatter using JavaScript to manipulate and format dates effectively." />
11+
<meta property="og:image" content="https://coderespite.com/image/js-projects/date-formatter.png" />
12+
<meta property="og:url" content="https://coderespite.com/projects/js-projects/date-formatter" />
13+
<meta name="twitter:card" content="summary_large_image" />
14+
<meta name="twitter:title" content="Date Formatter" />
15+
<meta name="twitter:description"
16+
content="Develop a Date Formatter using JavaScript to manipulate and format dates effectively." />
17+
<meta name="twitter:image" content="https://coderespite.com/image/js-projects/date-formatter.png" />
18+
419
<meta charset="UTF-8" />
520
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
621
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
722
<title>Learn the Date Object by Building a Date Formatter</title>
823
<link rel="stylesheet" href="./styles.css" />
9-
</head>
10-
<body>
24+
</head>
25+
26+
<body>
1127
<main>
12-
<div class="title-container">
13-
<h1 class="title">Today's Date</h1>
28+
<div class="title-container">
29+
<h1 class="title">Today's Date</h1>
1430

15-
<svg
16-
class="date-svg"
17-
xmlns="http://www.w3.org/2000/svg"
18-
version="1.0"
19-
width="512.000000pt"
20-
height="512.000000pt"
21-
viewBox="0 0 512.000000 512.000000"
22-
preserveAspectRatio="xMidYMid meet"
23-
>
24-
<g
25-
transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
26-
fill="#fff"
27-
stroke="none"
28-
>
29-
<path
30-
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
31-
/>
32-
<path
33-
d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
34-
/>
35-
<path
36-
d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
37-
/>
38-
<path
39-
d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
40-
/>
41-
<path
42-
d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
43-
/>
44-
<path
45-
d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
46-
/>
47-
<path
48-
d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
49-
/>
50-
<path
51-
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
52-
/>
53-
<path
54-
d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
55-
/>
56-
<path
57-
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
58-
/>
59-
</g>
60-
</svg>
61-
</div>
62-
<div class="divider"></div>
31+
<svg class="date-svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="512.000000pt"
32+
height="512.000000pt" viewBox="0 0 512.000000 512.000000" preserveAspectRatio="xMidYMid meet">
33+
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="#fff" stroke="none">
34+
<path
35+
d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z" />
36+
<path d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z" />
37+
<path d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z" />
38+
<path d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z" />
39+
<path d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z" />
40+
<path d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z" />
41+
<path d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z" />
42+
<path
43+
d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z" />
44+
<path d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z" />
45+
<path
46+
d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z" />
47+
</g>
48+
</svg>
49+
</div>
50+
<div class="divider"></div>
6351

64-
<div class="dropdown-container">
65-
<select name="date-options" id="date-options">
66-
<option value="dd-mm-yyyy">Day, Month, Year</option>
67-
<option value="yyyy-mm-dd">Year, Month, Day</option>
68-
<option value="mm-dd-yyyy-h-mm">
69-
Month, Day, Year, Hours, Minutes
70-
</option>
71-
</select>
72-
<div class="select-icon">
73-
<svg
74-
class="icon"
75-
xmlns="http://www.w3.org/2000/svg"
76-
width="25"
77-
height="35"
78-
viewBox="0 0 24 24"
79-
>
80-
<rect x="0" fill="none" width="24" height="24" />
52+
<div class="dropdown-container">
53+
<select name="date-options" id="date-options">
54+
<option value="dd-mm-yyyy">Day, Month, Year</option>
55+
<option value="yyyy-mm-dd">Year, Month, Day</option>
56+
<option value="mm-dd-yyyy-h-mm">
57+
Month, Day, Year, Hours, Minutes
58+
</option>
59+
</select>
60+
<div class="select-icon">
61+
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="25" height="35" viewBox="0 0 24 24">
62+
<rect x="0" fill="none" width="24" height="24" />
8163

82-
<g>
83-
<path d="M7 10l5 5 5-5" />
84-
</g>
85-
</svg>
64+
<g>
65+
<path d="M7 10l5 5 5-5" />
66+
</g>
67+
</svg>
68+
</div>
8669
</div>
87-
</div>
8870

89-
<p id="current-date"></p>
71+
<p id="current-date"></p>
9072
</main>
9173

9274
<script src="./script.js"></script>
93-
</body>
75+
</body>
76+
9477
</html>

0 commit comments

Comments
 (0)