Skip to content

Commit f93c387

Browse files
committed
update after practicals
1 parent 4a60fb6 commit f93c387

File tree

88 files changed

+23120
-230
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

88 files changed

+23120
-230
lines changed
363 KB
Loading
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Book Form</title>
9+
<link rel="stylesheet" href="./style.css">
10+
</head>
11+
12+
<body>
13+
<header>
14+
<h1>📚 Book Form 📚</h1>
15+
</header>
16+
17+
<form id="form">
18+
<div class="input-div">
19+
<input class="input" type="text" name="name" id="name" required>
20+
<label class="input-label" for="name">Name</label>
21+
</div>
22+
23+
<div class="input-div">
24+
<input class="input" type="text" name="author" id="author" required>
25+
<label class="input-label" for="author">Author</label>
26+
</div>
27+
28+
<div class="input-div">
29+
<input class="input" type="number" name="price" id="price" min="0" step="0.01" required>
30+
<label class="input-label" for="price">Price</label>
31+
</div>
32+
33+
<div class="input-div">
34+
<input class="input" type="text" name="publisher" id="publisher" required>
35+
<label class="input-label" for="publisher">Publisher</label>
36+
</div>
37+
<div class="input-div">
38+
<input class="input" type="text" name="category" id="category" required>
39+
<label class="input-label" for="category">Category</label>
40+
</div>
41+
42+
<div class="btn-group">
43+
<button type="submit">Submit</button>
44+
<button type="reset">Reset</button>
45+
</div>
46+
</form>
47+
48+
<footer>
49+
<div>Created for IT Practical by Sudipto Ghosh on 20-11-2021</div>
50+
</footer>
51+
52+
<script src="./script.js"></script>
53+
</body>
54+
55+
</html>
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const form = document.getElementById('form');
2+
form.addEventListener('submit', (e) => {
3+
e.preventDefault();
4+
const book = Object();
5+
book.name = document.getElementById('name').value;
6+
book.author = document.getElementById('author').value;
7+
book.price = document.getElementById('price').value;
8+
book.publisher = document.getElementById('publisher').value;
9+
book.category = document.getElementById('category').value;
10+
console.log('Object:', book);
11+
console.log('JSON:', JSON.stringify(book, null, 2));
12+
window.alert('Printed Book Object to the Console');
13+
});
Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
body, html {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: 'Fira Code', 'Courier New', Courier, monospace;
6+
}
7+
8+
body {
9+
display: flex;
10+
flex-direction: column;
11+
justify-content: space-between;
12+
align-content: space-between;
13+
height: 100vh;
14+
background-image: url('https://images.pexels.com/photos/590493/pexels-photo-590493.jpeg');
15+
background-size: cover;
16+
}
17+
18+
header {
19+
position: relative;
20+
top: 0;
21+
left: 0;
22+
width: 100%;
23+
height: 10em;
24+
display: flex;
25+
justify-content: center;
26+
align-items: center;
27+
background-color: #fafafa;
28+
}
29+
30+
form {
31+
display: flex;
32+
flex-direction: column;
33+
align-items: center;
34+
justify-content: center;
35+
width: 30%;
36+
height: 100%;
37+
padding: 0.5rem;
38+
margin: 2em auto;
39+
background-color: #ffffff;
40+
border-radius: 80px;
41+
}
42+
43+
form > label {
44+
display: inline-block;
45+
margin-bottom: 0.5rem;
46+
}
47+
48+
form > input {
49+
padding: 0.75em;
50+
margin: 0.5em 0;
51+
border-radius: 20px;
52+
font-family: 'Fira Code', 'Courier New', Courier, monospace;
53+
}
54+
55+
.input-div {
56+
display: flex;
57+
flex-direction: column-reverse;
58+
position: relative;
59+
padding-top: 1.5rem;
60+
}
61+
62+
.input-div + .input-div {
63+
margin-top: 1.5rem;
64+
}
65+
66+
.input-label {
67+
color: #aaaaaa;
68+
position: absolute;
69+
top: 1.5rem;
70+
transition: 0.25s ease;
71+
}
72+
73+
.input {
74+
border: 0;
75+
z-index: 1;
76+
background-color: transparent;
77+
border-bottom: 2px solid #eee;
78+
font: inherit;
79+
font-size: 1.125rem;
80+
padding: 0.25rem 0;
81+
}
82+
83+
.input:focus, .input:valid {
84+
outline: 0;
85+
border-bottom-color: #444444;
86+
}
87+
88+
.input:focus + .input, .input:valid + .input-label {
89+
color: #444444;
90+
transform: translateY(-1.5rem);
91+
}
92+
93+
.btn-group {
94+
margin-top: 1.5rem;
95+
}
96+
97+
form > div > button {
98+
color: #ffffff;
99+
font-family: 'Fira Code', 'Courier New', Courier, monospace;
100+
padding: 1em 2em;
101+
margin: 0.5em 0;
102+
border-radius: 40px;
103+
text-transform: uppercase;
104+
transition-duration: 500ms;
105+
cursor: pointer;
106+
}
107+
108+
form > div > button[type="submit"] {
109+
background-color: #444444;
110+
}
111+
112+
form > div > button[type="reset"] {
113+
color: #ffffff;
114+
background-color: #ff2e2e;
115+
}
116+
117+
form > div > button[type="submit"]:hover {
118+
background-color: #eeeeee;
119+
color: #444444;
120+
}
121+
122+
form > div > button[type="reset"]:hover {
123+
background-color: #eeeeee;
124+
color: #ff2e2e;
125+
}
126+
127+
footer {
128+
bottom: 0;
129+
left: 0;
130+
width: 100%;
131+
display: flex;
132+
flex-direction: row;
133+
justify-content: center;
134+
align-items: center;
135+
background-color: #444444;
136+
}
137+
138+
footer div {
139+
padding: 1rem;
140+
color: white;
141+
font-weight: 600;
142+
}
Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Menu</title>
9+
<link rel="stylesheet" href="./style.css">
10+
</head>
11+
12+
<body>
13+
<header>
14+
<h1>🍽️ Menu 🍝</h1>
15+
</header>
16+
17+
<label class="switch">
18+
<input type="checkbox" id="toggle">
19+
<span class="slider round"></span>
20+
</label>
21+
22+
<div id="menu">
23+
<div id="veg-menu">
24+
<h2>Veg Menu</h2>
25+
</div>
26+
27+
<div id="non-veg-menu" class="hidden">
28+
<h2>Non-Veg Menu</h2>
29+
</div>
30+
31+
<ul id="menu-times">
32+
<li>
33+
<div>Breakfast</div>
34+
<ol id="breakfast-items">
35+
<li class="item-1">Item 1</li>
36+
<li class="item-2">Item 2</li>
37+
<li class="item-3">Item 3</li>
38+
<li class="item-4">Item 4</li>
39+
<li class="item-5">Item 5</li>
40+
</ol>
41+
</li>
42+
<li>
43+
<div>Lunch</div>
44+
<ol id="lunch-items">
45+
<li class="item-1">Item 1</li>
46+
<li class="item-2">Item 2</li>
47+
<li class="item-3">Item 3</li>
48+
<li class="item-4">Item 4</li>
49+
<li class="item-5">Item 5</li>
50+
</ol>
51+
</li>
52+
<li>
53+
<div>Dinner</div>
54+
<ol id="dinner-items">
55+
<li class="item-1">Item 1</li>
56+
<li class="item-2">Item 2</li>
57+
<li class="item-3">Item 3</li>
58+
<li class="item-4">Item 4</li>
59+
<li class="item-5">Item 5</li>
60+
</ol>
61+
</li>
62+
</ul>
63+
</div>
64+
65+
<footer>
66+
<div>Created for IT Practical by Sudipto Ghosh on 20-11-2021</div>
67+
</footer>
68+
69+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
70+
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
71+
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
72+
<script src="./script.js"></script>
73+
</body>
74+
75+
</html>
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
$(document).ready(function () {
2+
var flag = 'veg';
3+
$('#toggle').click(function () {
4+
$('#veg-menu').toggleClass('hidden');
5+
$('#non-veg-menu').toggleClass('hidden');
6+
if (flag === 'veg') {
7+
$('#breakfast-items>li').last().after('<li class="eggs">Eggs</li>');
8+
$('#dinner-items>li').last().after('<li class="eggs">Eggs</li>');
9+
$('.item-3').text('Non-veg Item 3');
10+
flag = 'non-veg';
11+
} else {
12+
$('.eggs').remove();
13+
$('.item-3').text('Item 3');
14+
flag = 'veg';
15+
}
16+
});
17+
});

0 commit comments

Comments
 (0)