Skip to content

Commit 50b4372

Browse files
gururaj1512gururaj1512
authored
Merge branch 'thinkswell:master' into master
2 parents 6ff718f + 3f5d8ba commit 50b4372

File tree

13 files changed

+1606
-10
lines changed

13 files changed

+1606
-10
lines changed

‎BulbOnOffButton/LakshyaMalik/assets/Bulb-off2.png‎

82.8 KB
Loading

‎BulbOnOffButton/LakshyaMalik/assets/Bulb-on2.png‎

89.9 KB
Loading

‎BulbOnOffButton/LakshyaMalik/assets/Bulb.png‎

184 KB
Loading

‎BulbOnOffButton/LakshyaMalik/assets/switch-button.svg‎

Lines changed: 1328 additions & 0 deletions
Loading

‎BulbOnOffButton/LakshyaMalik/index.html‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,16 @@
1212
<h1>Toggle the given Button to turn the bulb On or Off</h1>
1313
</div>
1414
<div class="container">
15-
<img src="./assets/bulb-off.png" alt="Bulb is turned On" id="bulbimg">
16-
<button title="press to toggle" onclick="ToggleBulb()" class="btn"><img src="./assets/button-svg.svg" alt="On/off"></button>
15+
<img src="./assets/Bulb-off2.png" alt="Bulb is turned On" id="bulbimg">
16+
<button title="press to toggle" onclick="ToggleBulb()" class="btn"><img src="./assets/switch-button.svg" alt="On/off"></button>
17+
1718
</div>
19+
<div id="dialogueBox" class="dialogue-box" style="display:none;">
20+
<p>Don't forget to turn it off before leaving</p>
21+
<button class="ok-button" onclick="closeDialogue()">Ok</button>
22+
</div>
23+
24+
1825

1926
<script src="./script.js"></script>
2027
</body>

‎BulbOnOffButton/LakshyaMalik/script.js‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,29 @@ const ToggleBulb = () =>{
33

44
let Bulb = document.getElementById('bulbimg');
55

6-
if (Bulb.src.match('./assets/bulb-on.png')){
7-
Bulb.setAttribute('src','./assets/bulb-off.png');
6+
if (Bulb.src.match('./assets/Bulb-on2.png')){
7+
Bulb.setAttribute('src','./assets/Bulb-off2.png');
88
console.log('dfghjkl');
9+
closeDialogue();
910
}
1011

1112
else{
12-
Bulb.setAttribute('src','./assets/bulb-on.png');
13+
Bulb.setAttribute('src','./assets/Bulb-on2.png');
14+
openDialogue();
1315
}
16+
}
17+
const openDialogue = () => {
18+
document.getElementById("dialogueBox");
19+
dialogueBox.style.display = "inline-grid";
20+
dialogueBox.style.position = "fixed"; // Use absolute if you want it relative to a positioned ancestor
21+
dialogueBox.style.top = "60%";
22+
dialogueBox.style.left = "56%";
23+
24+
25+
}
26+
27+
28+
29+
const closeDialogue = () => {
30+
document.getElementById("dialogueBox").style.display = "none";
1431
}

‎BulbOnOffButton/LakshyaMalik/style.css‎

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
}
55

66
.bg{
7-
background-color: #070707;
7+
background-color: #8c8686;
88
}
99

1010
.container {
@@ -28,15 +28,13 @@
2828
}
2929

3030
.btn {
31-
border-radius: 100%;
32-
margin-bottom: 10px;
33-
margin-left: 20px;
34-
background-color: rgba(0, 0, 0, 0.768);
31+
width: 100px;
3532
}
3633

3734
#bulbimg {
3835
width: 100%;
3936
max-width: 200px;
37+
margin: 35px;
4038
}
4139

4240
@media (max-width: 576px) {
@@ -54,6 +52,37 @@
5452
justify-self: auto;
5553
margin: 0;
5654
}
55+
.dialogue-box {
56+
57+
margin-left: 600px;
58+
background-color: white;
59+
padding: 20px;
60+
border-radius: 10px;
61+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
62+
z-index: 1000;
63+
64+
65+
}
66+
67+
.dialogue-box p {
68+
69+
margin-bottom: 10px;
70+
}
71+
72+
73+
.ok-button {
74+
width: 200px;
75+
padding: 5px 10px;
76+
background-color: #4CAF50;
77+
color: white;
78+
border: #8c8686;
79+
border-radius: 3px;
80+
cursor: pointer;
81+
margin-top: 10px; /* Add some space between the paragraph and the button */
82+
margin-left: 600px;
83+
}
84+
85+
5786

5887
#bulbimg {
5988
width: 100%;

‎Library/worm29/books.js‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
let myLibrary = [];
2+
3+
4+
function book(title, author, numOfPages, readOrNot) {
5+
this.title = title;
6+
this.author = author;
7+
this.numOfPages = numOfPages;
8+
this.readOrNot = readOrNot;
9+
}
10+
11+
12+
function removeBookFromLibrary(index) {
13+
myLibrary.splice(index, 1);
14+
displayBook();
15+
saveLibrary();
16+
}
17+
18+
function loadLibrary() {
19+
if (localStorage.getItem('myLibrary')) {
20+
myLibrary = JSON.parse(localStorage.getItem('myLibrary'));
21+
}
22+
else {
23+
myLibrary = [];
24+
}
25+
displayBook();
26+
}
27+
28+
function saveLibrary() {
29+
localStorage.setItem('myLibrary', JSON.stringify(myLibrary));
30+
}
31+
32+
function displayBook() {
33+
const libraryContainer = document.getElementById('library-container');
34+
libraryContainer.innerHTML = '';
35+
myLibrary.forEach((element, index) => {
36+
const bookCard = document.createElement('div');
37+
bookCard.classList.add('book-card');
38+
39+
const title = document.createElement('h2');
40+
title.textContent = `Title : ${element.title}`;
41+
42+
const author = document.createElement('p');
43+
author.textContent = `Author: ${element.author}`;
44+
45+
const numOfPages = document.createElement('p');
46+
numOfPages.textContent = `NumOfPages: ${element.numOfPages}`;
47+
48+
const readOrNot = document.createElement('p');
49+
readOrNot.textContent = `Read Or Not: ${element.readOrNot}`;
50+
51+
const removeButton = document.createElement('button');
52+
removeButton.textContent = 'Remove';
53+
removeButton.setAttribute('data-index', index);
54+
removeButton.addEventListener('click', function () {
55+
removeBookFromLibrary(this.getAttribute('data-index'));
56+
});
57+
58+
59+
bookCard.appendChild(title);
60+
bookCard.appendChild(author);
61+
bookCard.appendChild(numOfPages);
62+
bookCard.appendChild(readOrNot);
63+
bookCard.appendChild(removeButton);
64+
65+
libraryContainer.appendChild(bookCard);
66+
});
67+
}
68+
69+
document.addEventListener('DOMContentLoaded', function () {
70+
loadLibrary();
71+
function addBookToTheLibrary(title, author, numOfPages, readOrNot) {
72+
const bookExists = myLibrary.some(book => book.title === title && book.author === author);
73+
if (!bookExists) {
74+
const newBook = new book(title, author, numOfPages, readOrNot)
75+
myLibrary.push(newBook);
76+
saveLibrary();
77+
displayBook();
78+
} else {
79+
const bookAlreadyExistsComponent = document.getElementById('book-exits-component');
80+
bookAlreadyExistsComponent.innerHTML = '';
81+
82+
const message = document.createElement('p');
83+
message.textContent = "Book Already Exist!!";
84+
bookAlreadyExistsComponent.appendChild(message);
85+
86+
setTimeout(() => {
87+
message.remove()
88+
}, 1000);
89+
}
90+
}
91+
92+
const newBookBtn = document.getElementById('new-book-btn');
93+
const bookFormContainer = document.getElementById('book-form-container');
94+
const bookForm = document.getElementById('book-form');
95+
96+
newBookBtn.addEventListener('click', function () {
97+
bookFormContainer.style.display = 'block';
98+
})
99+
100+
bookForm.addEventListener('submit', function (e) {
101+
e.preventDefault();
102+
103+
const title = document.getElementById('title').value;
104+
const author = document.getElementById('author').value;
105+
const numOfPages = document.getElementById('pages').value;
106+
const readOrNot = document.getElementById('readStatus').checked ? 'Read' : 'Not Read';
107+
108+
addBookToTheLibrary(title, author, numOfPages, readOrNot);
109+
displayBook();
110+
111+
bookForm.reset();
112+
bookFormContainer.style.display = 'none';
113+
});
114+
})
115+

‎Library/worm29/index.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
body {
2+
background-color: white
3+
}
4+
5+
h1 {
6+
text-align: center;
7+
}
8+
9+
.add-button {
10+
white-space: 10;
11+
}

‎Library/worm29/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
5+
<head>
6+
<link rel="stylesheet" href="index.css">
7+
</head>
8+
9+
<body>
10+
<h1 id="header">
11+
The Library
12+
</h1>
13+
14+
<div id="book-form-container" style="display: none;">
15+
<form id="book-form">
16+
<input type="text" id="title" placeholder="Title" required>
17+
<input type="text" id="author" placeholder="Author" required>
18+
<input type="number" id="pages" placeholder="Number of Pages" required>
19+
<label>
20+
<input type="checkbox" id="readStatus">
21+
Read?
22+
</label>
23+
<button type="submit">Add Book</button>
24+
</form>
25+
</div>
26+
27+
<div id="library-container"></div>
28+
<div id="book-exists-component"></div>
29+
<div>
30+
<button id="new-book-btn" class="add-button">NEW BOOK</button>
31+
</div>
32+
<script src="books.js"></script>
33+
</body>
34+
35+
</html>

0 commit comments

Comments
 (0)