Skip to content

Commit 9e63753

Browse files
committed
Added classroom website in the repository
1 parent 5260037 commit 9e63753

File tree

5 files changed

+307
-0
lines changed

5 files changed

+307
-0
lines changed

CLASSROOM SCHEDULER WEBSITE/README.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<h1>Classroom Website 👩‍🏫</h1>
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+
<h3>Used Technologies</h3>
6+
<ul>
7+
<li>HTML5</li>
8+
<li>CSS3</li>
9+
<li>JavaScript</li>
10+
</ul>
11+
12+
13+
#### Steps to Use:
14+
---
15+
16+
- Download or clone the repository
17+
```
18+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
19+
```
20+
- Go to the directory
21+
- Run the index.html file
22+
- Schedule your new batch.
23+
- Add more and more batches.
24+
25+
26+
<h3> ScreenShots </h3>
27+
<img src = "./classroom.png" alt="Sample Image">
50.6 KB
Loading
Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
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>
55+
56+
57+
58+
59+
60+
61+
62+
63+
64+
65+

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: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
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+
}

0 commit comments

Comments
 (0)