Skip to content

Commit 74b9997

Browse files
coderzamancoderzaman
committed
Project Note, Web Api
1 parent 3cb43d2 commit 74b9997

File tree

16 files changed

+636
-214
lines changed

16 files changed

+636
-214
lines changed

‎17. Asynchronous JavaScript/js/script.js

Lines changed: 214 additions & 214 deletions
Large diffs are not rendered by default.

‎18. Project Take Note /img/image.png

357 KB
Loading

‎18. Project Take Note /index.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Java Script Basics</title>
8+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
9+
<style>
10+
* {
11+
margin: 0;
12+
padding: 0;
13+
}
14+
</style>
15+
</head>
16+
17+
<body>
18+
<div class="container">
19+
<div class="row">
20+
<col-8 class="auto text-center mt-4">
21+
<h2 class="fs-2 text-center">Take Your Note</h2>
22+
<p>Capture Thoughts, Organize Life!</p>
23+
</col-6>
24+
</div>
25+
<div class="row">
26+
<div class="col-8" style="margin: auto;">
27+
<form>
28+
<div class="mb-3">
29+
<input type="text" class="form-control" id="noteTitle" placeholder="Enter Your Title">
30+
</div>
31+
<div class="mb-3">
32+
<textarea class="form-control" rows="5" name="" id="noteText"
33+
placeholder="Enter Your Note"></textarea>
34+
</div>
35+
<button type="submit" class="btn btn-primary bg-dark" id="noteTakeBtn">Take Note</button>
36+
</form>
37+
</div>
38+
</div>
39+
<div class="row mt-5">
40+
<div class="col-8" style="margin: auto;">
41+
<h3 class="fs-4 text-bg-dark p-3 mb-0">Your Capture <input class="fs-5 p-1 mb-" style="float: right;"
42+
type="text" placeholder="Filter Your Task" id="filter_task"></h3>
43+
</div>
44+
</div>
45+
<div class="row">
46+
<div class="col-8" style="margin: auto;">
47+
<div class="notes bg-light">
48+
49+
</div>
50+
<button class="btn btn-danger mt-3" id="del_all">Dlete All Capture</button>
51+
</div>
52+
</div>
53+
</div>
54+
55+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
56+
<script src="js/script.js"></script>
57+
<p></p>
58+
</body>
59+
60+
</html>
61+

‎18. Project Take Note /js/script.js

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
let titleInput = document.getElementById('noteTitle');
2+
let noteInput = document.getElementById('noteText');
3+
let noteTakeBtn = document.getElementById('noteTakeBtn');
4+
let NotesDiv = document.querySelector('.notes');
5+
let allNotes = document.querySelectorAll('.notes');
6+
let deletAll = document.getElementById('del_all');
7+
let filterInput = document.getElementById('filter_task');
8+
9+
10+
noteTakeBtn.addEventListener('click', takeNote);
11+
NotesDiv.addEventListener('click', removeNote);
12+
deletAll.addEventListener('click', deletAllNotes);
13+
filterInput.addEventListener('keyup', filterTask);
14+
15+
16+
17+
function takeNote(e) {
18+
let noteTitle = titleInput.value;
19+
let noteDescp = noteInput.value;
20+
if (noteTitle === '') {
21+
alert('Please enter Note Title');
22+
} else if (noteDescp === '') {
23+
alert('Please enter Your Note');
24+
} else {
25+
createNoteElement(noteTitle, noteDescp);
26+
}
27+
e.preventDefault();
28+
}
29+
30+
31+
function removeNote(e) {
32+
if (e.target.hasAttribute('href')) {
33+
if (confirm('Are you sure you want to remove')) {
34+
let delteNote = e.target.parentElement.parentElement;
35+
delteNote.remove();
36+
}
37+
}
38+
}
39+
40+
function deletAllNotes(e) {
41+
if (confirm("Are you Want to Delete All Notes?")) {
42+
while (allNotes.firstChild) {
43+
allNotes.removeChild(allNotes.firstChild);
44+
}
45+
}
46+
}
47+
48+
49+
function createNoteElement(title, description) {
50+
let createNoteDiv = document.createElement('div');
51+
createNoteDiv.classList = "note shadow p-3 mb-1 text-bg-secondary";
52+
53+
let createNoteTitle = document.createElement('div');
54+
createNoteTitle.classList = "note_title";
55+
56+
let noteHeading = document.createElement('h4');
57+
noteHeading.style.display = "inline-block";
58+
noteHeading.appendChild(document.createTextNode(title));
59+
60+
let deleteAncorBtn = document.createElement('a');
61+
deleteAncorBtn.setAttribute('href', '#');
62+
deleteAncorBtn.style.float = 'right';
63+
deleteAncorBtn.classList = "btn btn-danger"
64+
deleteAncorBtn.appendChild(document.createTextNode('Delete'));
65+
66+
createNoteTitle.appendChild(noteHeading);
67+
createNoteTitle.appendChild(deleteAncorBtn);
68+
69+
let dividerHr = document.createElement('hr');
70+
71+
let noteDescp = document.createElement('div');
72+
noteDescp.classList = "noteDesc";
73+
74+
let noteTextPara = document.createElement('p');
75+
noteTextPara.appendChild(document.createTextNode(description));
76+
noteDescp.appendChild(noteTextPara);
77+
78+
79+
createNoteDiv.appendChild(createNoteTitle);
80+
createNoteDiv.appendChild(dividerHr);
81+
createNoteDiv.appendChild(noteDescp);
82+
83+
84+
NotesDiv.appendChild(createNoteDiv);
85+
}
86+
87+
88+
function filterTask(e) {
89+
let searchValue = e.target.value.toLowerCase();
90+
let allNotes = document.querySelectorAll('.note');
91+
92+
allNotes.forEach(note => {
93+
let itemTitle = note.querySelector('.note_title h4').textContent.toLowerCase();
94+
95+
if(itemTitle.indexOf(searchValue) != -1){
96+
note.style.display = "block";
97+
}else{
98+
note.style.display = "none";
99+
}
100+
101+
});
102+
103+
104+
}

‎19. Web Api/Forms API/img/image.png

357 KB
Loading

‎19. Web Api/Forms API/index.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Java Script Basics</title>
8+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
9+
<style>
10+
* {
11+
margin: 0;
12+
padding: 0;
13+
}
14+
</style>
15+
</head>
16+
17+
<body>
18+
<div class="container">
19+
<div class="col-6 mt-5">
20+
<input id="input_id" type="number" class="form-control" min="100" max="400" required>
21+
<button class="btn btn-danger mt-3" onclick="validateData()">Submit</button>
22+
<p id="demo" class="mt-2"></p>
23+
</div>
24+
</div>
25+
26+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
27+
<script src="js/script.js"></script>
28+
<p></p>
29+
</body>
30+
31+
</html>

‎19. Web Api/Forms API/js/script.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// What is web API
2+
// Web API extends functionality of Web
3+
// Web One of integral parts is Frontend and another is Backend
4+
// We can expose API Frontend or Backend
5+
// Expose Means:
6+
// এক্সপোস মানে হচ্ছে কোন ওয়ে রাখা যার মাধ্যমে বাহির থেকে কিছু ফাঙ্কশনালিটি নিয়ে আমাদের ওয়েবসাইটকে আরও সমৃদ্ধ করতে পারি। বা আমাদের সাইট থেকে ফাঙ্কশনালিটি নিয়ে অন্য ওয়েবসাইট সমৃদ্ব হতে পারে। লাইক একটি সকেট থেকে প্লাগের মাধ্যমে করে কিছু নেয়া বা সকেটে অন্য জায়গা থেকে কিছু নিয়ে আশা।
7+
8+
// আমরা যদি ওয়েব এপিআই একটা পার্ট হিসেবে ব্রাউজারকে চিন্তা করি, ব্রাউজার এর সাথে ও এরকম বিভিন্ন এপিআই আছে। যেগুলা এক্সপোজ এর মাদ্দমে ব্রাউজার এর ফাঙ্কশনালিটিকে এক্সটেন্ড করে দেয়। একইভাবে যদি সার্ভারের কথা চিন্তা করি সার্ভার এর সাথেও এরকম বিভিন্ন এপিআই আছে যেগুলা আমরা এক্সপোজ সার্ভারের ফাঙ্কশনালিটি এক্সটেন্ড করতে পারি।
9+
10+
// Web Give us Some APIs, Like:
11+
// Forms API
12+
// History API
13+
// Storage API
14+
// Worker API
15+
// Fetch API
16+
// Geolocation API
17+
18+
// Forms Validation API
19+
// checkValidity() Returns true if an input element contains valid data.
20+
// setCustomValidity() Sets the validationMessage property of an input element.
21+
// validationMessage Contains the message a browser will display when the validity is false.
22+
23+
function validateData(){
24+
let inputField = document.getElementById('input_id');
25+
26+
// We can Browsers default validation messages
27+
if(inputField.validity.rangeOverflow){
28+
inputField.setCustomValidity("rangeOverflow");
29+
}else if(inputField.validity.rangeUnderflow){
30+
inputField.setCustomValidity("underflow");
31+
}
32+
33+
if(!inputField.checkValidity()){
34+
console.log(inputField.validationMessage);
35+
document.getElementById('demo').innerText = inputField.validationMessage;
36+
}
37+
}

‎19. Web Api/History API/img/image.png

357 KB
Loading

‎19. Web Api/History API/index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Main</title>
8+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<div class="col-6 mt-5">
14+
<a class="btn btn-secondary" href="one.html">Page One</a>
15+
</div>
16+
</div>
17+
18+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
19+
<script src="js/script.js"></script>
20+
<p></p>
21+
</body>
22+
23+
</html>

‎19. Web Api/History API/js/script.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
2+
// History API
3+
function back(){
4+
window.history.back();
5+
}
6+
7+
function forward(){
8+
window.history.forward();
9+
}
10+
11+
function backTo(n){
12+
window.history.go(n);
13+
}
14+
15+
function getHitory(){
16+
alert(window.history.length);
17+
}

‎19. Web Api/History API/one.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Java Script Basics</title>
8+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
9+
<style>
10+
* {
11+
margin: 0;
12+
padding: 0;
13+
}
14+
</style>
15+
</head>
16+
17+
<body>
18+
<div class="container">
19+
<div class="col-6 mt-5">
20+
<a class="btn btn-secondary" href="two.html">Page Two</a>
21+
<button class="btn btn-warning" onclick="back()">Go Back</button>
22+
<button class="btn btn-primary" onclick="forward()">Forward</button>
23+
</div>
24+
</div>
25+
26+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
27+
<script src="js/script.js"></script>
28+
<p></p>
29+
</body>
30+
31+
</html>

‎19. Web Api/History API/two.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Two</title>
8+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
9+
<style>
10+
* {
11+
margin: 0;
12+
padding: 0;
13+
}
14+
</style>
15+
</head>
16+
17+
<body>
18+
<div class="container">
19+
<div class="col-6 mt-5">
20+
<button class="btn btn-warning" onclick="backTo(-2)">Go Two Back Page</button>
21+
<button class="btn btn-success" onclick="getHitory()">Go History</button>
22+
</div>
23+
</div>
24+
25+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
26+
<script src="js/script.js"></script>
27+
<p></p>
28+
</body>
29+
30+
</html>

‎19. Web Api/Storage API/img/image.png

357 KB
Loading

‎19. Web Api/Storage API/index.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Main</title>
8+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<div class="col-6 mt-5">
14+
<form>
15+
<div class="mb-3">
16+
<label for="exampleInputEmail1" class="form-label">Email address</label>
17+
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
18+
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
19+
</div>
20+
<div class="mb-3">
21+
<label for="exampleInputPassword1" class="form-label">Password</label>
22+
<input type="password" class="form-control" id="exampleInputPassword1">
23+
</div>
24+
<div class="mb-3 form-check">
25+
<input type="checkbox" class="form-check-input" id="exampleCheck1">
26+
<label class="form-check-label" for="exampleCheck1">Check me out</label>
27+
</div>
28+
<button type="submit" class="btn btn-primary">Login</button>
29+
<a class="btn btn-primary" href="signUp.html">Sign Up</a>
30+
</form>
31+
</div>
32+
</div>
33+
34+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
35+
<script src="js/script.js"></script>
36+
<p></p>
37+
</body>
38+
39+
</html>

0 commit comments

Comments
 (0)