Skip to content

Commit af1e38c

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #142 from RiyaGupta89/classroom-website
Added classroom website in the repository
2 parents d1e34cd + d370b3b commit af1e38c

File tree

5 files changed

+303
-0
lines changed

5 files changed

+303
-0
lines changed

‎CLASSROOM SCHEDULER WEBSITE/README.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<h2> Welcome to the Classroom Website 👩‍🏫</h2>
2+
3+
<p>A website that lets you write about all your classes at one place. You can also search by typing the name of the teacher if you have so many classes to take.</p>
4+
5+
<h4>Used Technologies</h4>
6+
<ul>
7+
<li>HTML5</li>
8+
<li>CSS3</li>
9+
<li>JavaScript</li>
10+
</ul>
11+
12+
<h4> Use of this Project </h4>
13+
<p> This project is helpful to students managing their classes, the student can schedule their batch and its timing here. Its easier for students to have all the classes at one place rather searching for which class to attend now. 🏫</p>
14+
15+
16+
#### Steps to Use:
17+
---
18+
19+
- Download or clone the repository
20+
```
21+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
22+
```
23+
- Go to the directory
24+
- Run the index.html file
25+
- Schedule your new batch.
26+
- Add more and more batches.
27+
28+
29+
<h4> ScreenShots </h4>
30+
31+
![project-img](./classroom.png)
32+
33+
### Happy Coding! 👩‍💻

‎CLASSROOM SCHEDULER WEBSITE/classroom.png

50.6 KB
Loading

‎CLASSROOM SCHEDULER WEBSITE/index.html

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<link rel="preconnect" href="https://fonts.gstatic.com">
8+
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;1,300&display=swap" rel="stylesheet">
9+
<link rel="stylesheet" href="style.css" />
10+
<title>Classroom Scheduler</title>
11+
</head>
12+
13+
<body>
14+
<nav class="navbar">
15+
<div class="left">
16+
<div id="logo"><h1>Classroom scheduler.</h1></div>
17+
<div>
18+
<ul>
19+
<li><a href="#">View your batches</a></li>
20+
</ul>
21+
</div>
22+
</div>
23+
<div class="searchBox">
24+
<input type="search" name="searchBar" placeholder="Search" id="searchTxt" />
25+
<button class="btn">Search Teacher</button>
26+
</div>
27+
</nav>
28+
29+
<div class="wrapper">
30+
<h1 class="heading">Schedule your batch.</h1>
31+
<label for="addingNote" class="addingNote">Add Batch</label> <br />
32+
<input
33+
name="textarea"
34+
id="title"
35+
cols="100"
36+
rows="2"
37+
placeholder="Enter batch timing"
38+
></input>
39+
<br />
40+
<label for="addingNote" class="addingNote">Add a Teacher</label> <br />
41+
<input name="textarea" id="note-text" cols="100" rows="6" placeholder="Enter teacher's name"></input>
42+
<br />
43+
<button class="note-btn">Schedule Batch</button>
44+
45+
<hr class="margin-top hr" />
46+
<h1 class="class">Your Classes</h1>
47+
48+
<hr class="hr"/>
49+
<div class="showNotes" id="notes"></div>
50+
</div>
51+
52+
<script src="script.js"></script>
53+
</body>
54+
</html>

‎CLASSROOM SCHEDULER WEBSITE/script.js

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
showNotes();
2+
const title = document.querySelector("#title");
3+
const textArea = document.querySelector("#note-text");
4+
const button = document.querySelector(".note-btn");
5+
button.addEventListener("click", function (e) {
6+
let notes = localStorage.getItem("notes");
7+
if (notes == null) {
8+
notesObj = [];
9+
} else {
10+
notesObj = JSON.parse(notes);
11+
}
12+
13+
let myObj = {
14+
title: title.value,
15+
textArea: textArea.value
16+
}
17+
18+
19+
20+
21+
22+
notesObj.push(myObj);
23+
localStorage.setItem("notes", JSON.stringify(notesObj));
24+
textArea.value = '';
25+
title.value = '';
26+
showNotes();
27+
});
28+
29+
function showNotes() {
30+
31+
let notes = localStorage.getItem("notes");
32+
if (notes == null) {
33+
notesObj = [];
34+
} else {
35+
notesObj = JSON.parse(notes);
36+
}
37+
38+
let html = '';
39+
notesObj.forEach(function (element, index) {
40+
html += `
41+
<div>
42+
<div class="card">
43+
<h2>${element.textArea} </h2>
44+
<p>${element.title}</p>
45+
<button onClick="deleteNote(this.id)" id="${index}" class="deleteBtn">Delete Note</button>
46+
</div>
47+
</div>`;
48+
});
49+
50+
let insertNotes = document.getElementById("notes");
51+
if (notesObj.length == 0) {
52+
53+
insertNotes.innerHTML = `Nothing to show! Please click on "Schedule Batch" button to add a new class.`
54+
insertNotes.style.color = "gray";
55+
insertNotes.style.paddingTop = "10px";
56+
insertNotes.style.fontSize = "15px";
57+
} else {
58+
insertNotes.innerHTML = html;
59+
}
60+
}
61+
62+
63+
function deleteNote(index) {
64+
let notes = localStorage.getItem("notes");
65+
if (notes == null) {
66+
notesObj = [];
67+
} else {
68+
notesObj = JSON.parse(notes);
69+
}
70+
notesObj.splice(index, 1);
71+
localStorage.setItem("notes", JSON.stringify(notesObj));
72+
showNotes();
73+
}
74+
75+
76+
let searchTxt = document.getElementById("searchTxt");
77+
searchTxt.addEventListener("input", function () {
78+
let inputVal = searchTxt.value;
79+
console.log("input event fired", inputVal);
80+
let cards = document.getElementsByClassName("card");
81+
Array.from(cards).forEach(function (element) {
82+
let cardTxt = element.getElementsByTagName('h2')[0].innerHTML;
83+
if (cardTxt.includes(inputVal)) {
84+
element.style.display = "block";
85+
} else {
86+
element.style.display = "none";
87+
}
88+
})
89+
})
90+

‎CLASSROOM SCHEDULER WEBSITE/style.css

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
2+
3+
*, *::after, *::before {
4+
padding: 0;
5+
margin: 0;
6+
box-sizing: border-box;
7+
font-family: 'Open Sans', sans-serif;
8+
}
9+
10+
.navbar {
11+
background-color: rgb(236, 189, 87);
12+
height: 80px;
13+
display: flex;
14+
align-items: center;
15+
color: white;
16+
justify-content: space-between;
17+
}
18+
19+
.left {
20+
display: flex;
21+
align-items: center;
22+
justify-content: flex-start;
23+
padding-left: 20px;
24+
}
25+
26+
.logo {
27+
font-size: 40px;
28+
}
29+
30+
ul li {
31+
padding-left: 30px;
32+
list-style: none;
33+
}
34+
35+
ul li a {
36+
text-decoration: none;
37+
color: white;
38+
}
39+
40+
ul li a:hover {
41+
padding-bottom: 5px;
42+
border-bottom: 2px solid white;
43+
}
44+
45+
.searchBox {
46+
padding-right: 20px;
47+
}
48+
49+
#searchTxt {
50+
border: none;
51+
padding: 5px 10px;
52+
/* border-radius: 9px; */
53+
}
54+
55+
.btn {
56+
border: 1px solid #111;
57+
padding: 6px 19px;
58+
/* border-radius: 9px; */
59+
}
60+
61+
.btn:hover {
62+
background-color: #111;
63+
color: white;
64+
}
65+
66+
input:focus {
67+
outline: none;
68+
}
69+
70+
.wrapper {
71+
margin-left: 20px;
72+
}
73+
74+
.heading {
75+
padding: 10px 0;
76+
}
77+
78+
.note-btn {
79+
background-color: rgb(236, 189, 87);
80+
border: none;
81+
padding: 12px 27px;
82+
border-radius: 25px;
83+
margin: 15px 0;
84+
color: white;
85+
font-size: 17px;
86+
}
87+
88+
.note-btn:hover {
89+
background-color: rgb(238, 173, 31);
90+
}
91+
92+
.class {
93+
padding: 10px 0;
94+
}
95+
96+
.showNotes {
97+
display: flex;
98+
flex-wrap: wrap;
99+
justify-content: space-around;
100+
align-items: center;
101+
}
102+
103+
.card {
104+
margin: 10px;
105+
border: 3px solid gray;
106+
border-radius: 10px;
107+
padding: 20px;
108+
}
109+
110+
.deleteBtn {
111+
background-color: rgb(238, 173, 31);
112+
border: none;
113+
border-radius: 10px;
114+
padding: 8px 19px;
115+
margin-top: 10px;
116+
color: white;
117+
}
118+
119+
.deleteBtn:hover {
120+
background-color: rgb(204, 142, 9);
121+
}
122+
123+
.wrapper input {
124+
padding: 3px 15px;
125+
}
126+

0 commit comments

Comments
 (0)