Skip to content

Commit 2a6580a

Browse files
arnav-mehraarnav-mehra
committed
lec-5
1 parent 3e41d08 commit 2a6580a

File tree

3 files changed

+146
-9
lines changed

3 files changed

+146
-9
lines changed

‎Lecture-3-JS/script.js

+15-9
Original file line numberDiff line numberDiff line change
@@ -56,10 +56,10 @@
5656

5757
// i. user-defined objects
5858

59-
// const person = {
60-
// name: "John Doe",
61-
// email: "[email protected]"
62-
// };
59+
const person = {
60+
name: "John Doe",
61+
email: "[email protected]"
62+
};
6363
// console.log(person.name); // you can access each value via object.key
6464
// person.name = "Sam"; // we can also change key's value via object.key = new_value
6565
// console.log(person);
@@ -75,14 +75,14 @@
7575

7676
// console.log(Number("10"));
7777
// console.log(String(10));
78-
// console.log(Boolean(0), Boolean(1));
78+
// console.log(Boolean(0), Boolean(100));
7979

8080
// III. BASIC PROGRAMMING
8181

8282
// i. blocks and scoping
8383

8484
// {
85-
// var x = 5;
85+
// // let x = 5;
8686
// }
8787
// console.log(x); // x is out of scope, so for const and let we get the error: ReferenceError: x is not defined.
8888
// but var defies this scoping rule, meaning we do not run into the error.
@@ -124,6 +124,8 @@
124124
// while (i < 10) {
125125
// console.log(i);
126126
// i = i + 1; // shortand is: i += 1; or even i++;
127+
// // i += 1;
128+
// // i++;
127129
// }
128130

129131
// b. regular for loops
@@ -152,6 +154,10 @@
152154
// function add(x, y) { // this is another way we can define functions. There is a minute difference between the 2, but it's negligible for now.
153155
// return x + y;
154156
// }
155-
// const add = (x, y) => x + y; // if our function is just 1 return statement, we can use this shorthand.
156-
// const result = add(5, 10);
157-
// console.log(result);
157+
const add = (x, y) => {
158+
x + y;
159+
} // if our function is just 1 return statement, we can use this shorthand.
160+
const result = add(5, 10);
161+
console.log(result);
162+
163+
// console.log(console)

‎Lecture-5-Forms/debouncing.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Debouncing</title>
5+
</head>
6+
<body>
7+
<button onclick="myClick()">Click Me!</button>
8+
<script>
9+
var timeout = null;
10+
11+
function actualHandler() {
12+
// expensive operation
13+
console.log("clicked");
14+
console.log("another clicked");
15+
}
16+
17+
function myClick() {
18+
if (timeout !== null) {
19+
clearTimeout(timeout);
20+
}
21+
22+
timeout = setTimeout(actualHandler, 1000);
23+
}
24+
</script>
25+
</body>
26+
</html>

‎Lecture-5-Forms/forms.html

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>To Do List</title>
5+
<style>
6+
.remove-button {
7+
margin-left: 10px;
8+
}
9+
</style>
10+
</head>
11+
<body>
12+
<div>
13+
<form onsubmit="return formSubmit()" id="myform">
14+
<input type="text" id="input" name="name" placeholder="Enter a task name" required />
15+
<br />
16+
<textarea name="description"></textarea>
17+
<br />
18+
19+
<input type="submit" value="Add Task" />
20+
</form>
21+
22+
<!-- <input type="text" id="input" placeholder="Enter a task name" />
23+
<button onclick="addTask()">Add Task</button> -->
24+
</div>
25+
<ul id="tasks">
26+
</ul>
27+
<script>
28+
function formSubmit() {
29+
let form = document.getElementById("myform");
30+
let submitter = form.querySelector("input[type=submit]");
31+
let formData = new FormData(form);
32+
33+
let taskName = formData.get("name");
34+
let taskDesc = formData.get("description");
35+
36+
console.log(taskName, taskDesc);
37+
insertTask(taskName, taskDesc);
38+
39+
return false;
40+
}
41+
42+
function addTask() {
43+
let input = document.getElementById('input');
44+
let task = input.value;
45+
46+
let tasks = document.querySelector('#tasks');
47+
48+
let new_task = document.createElement('li');
49+
new_task.innerText = task;
50+
51+
insertTask(task);
52+
}
53+
54+
var tasksData = [];
55+
var taskDescs = {};
56+
57+
function showTasks() {
58+
let tasks = document.querySelector('#tasks');
59+
tasks.innerHTML = '';
60+
61+
for (let i = 0; i < tasksData.length; i++) {
62+
let taskText = tasksData[i];
63+
64+
let new_task = document.createElement('li');
65+
// new_task.innerText = tasksData[i];
66+
67+
let task_text = document.createTextNode(taskText);
68+
let task_desc_text = document.createTextNode(taskDescs[taskText]);
69+
let remove_button = document.createElement('button');
70+
71+
remove_button.innerText = 'X';
72+
remove_button.className = 'remove-button';
73+
remove_button.onclick = function () {
74+
removeTask(taskText);
75+
};
76+
77+
new_task.appendChild(task_text);
78+
new_task.appendChild(task_desc_text);
79+
new_task.appendChild(remove_button);
80+
81+
tasks.appendChild(new_task);
82+
}
83+
}
84+
85+
function insertTask(task, description) {
86+
// only insert if task is not already in the list
87+
if (tasksData.includes(task)) {
88+
return;
89+
}
90+
91+
tasksData.push(task);
92+
taskDescs[task] = description;
93+
94+
showTasks();
95+
}
96+
97+
function removeTask(task) {
98+
let newTasksData = tasksData.filter((t) => t !== task);
99+
tasksData = newTasksData;
100+
101+
showTasks();
102+
}
103+
</script>
104+
</body>
105+
</html>

0 commit comments

Comments
 (0)