Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

NW6| Bakhat Begum| MODULE-JS2| Js2 todo list/week 3 | Week-4 #218

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

NW6| Bakhat Begum| MODULE-JS2| Js2 todo list/week 3 | Week-4 #218

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e399c06
final sweep of module js2
BakhatBegum Dec 4, 2023
ed6c355
added some function and title name
BakhatBegum Jan 9, 2024
0a9b393
removed codes
BakhatBegum Jan 9, 2024
f805b56
removed codes
BakhatBegum Jan 9, 2024
3414d8b
added function and did style on javascript file
BakhatBegum Jan 13, 2024
2fef305
removed all style in javaScript and added in css file
BakhatBegum Jan 15, 2024
afbbe73
removed .classList from js file
BakhatBegum Jan 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions week-1/fix/median.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
// Fix this implementation
// Start by running the tests for this function
// If you're in the week-1 directory, you can run npm test -- fix to run the tests in the fix directory
//Fix this implementation
//Start by running the tests for this function
//If you're in the week-1 directory, you can run npm test -- fix to run the tests in the fix directory

function calculateMedian(list) {
const middleIndex = Math.floor(list.length / 2);
const median = list.splice(middleIndex, 1)[0];
return median;
}

module.exports = calculateMedian;
//calculateMedian( 3, 3, 4, 5)
//module.exports = calculateMedian;

// console.log(calculateMedian( 3, 3, 4, 5))


3 changes: 2 additions & 1 deletion week-3/alarmclock/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script src="alarmclock.js" defer ></script>
<title>Title here</title>
</head>
<body>
Expand All @@ -15,6 +16,6 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
<button id="set" type="button">Set Alarm</button>
<button id="stop" type="button">Stop Alarm</button>
</div>
<script src="alarmclock.js"></script>

</body>
</html>
27 changes: 15 additions & 12 deletions week-3/todo-list/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,27 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title here</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<title>Todo List</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form>
<div>
<input type="text" placeholder="New todo..." />

<div class="todo-style">
<label for="todo-list" id="add-style">Add new Todos</label>
<div class="line"></div>

</div>
<div>
<button type="submit">Add Todo</button>
<button
type="button"
id="remove-all-completed"
class="btn btn-primary mb-3"
>
Remove all completed
</button>
<div class="btn">
<input type="text" id="todo-list" placeholder="New todo...">
<button type="button" onclick="addNewTodo()">Add Todo</button>
<button type="submit" >Remove all completed </button>
</div>
<ul id="task-list"></ul>


</form>
<script src="script.js"></script>
</body>
Expand Down
75 changes: 59 additions & 16 deletions week-3/todo-list/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,68 @@
function populateTodoList(todos) {
let list = document.getElementById("todo-list");
// Write your code to create todo list elements with completed and delete buttons here, all todos should display inside the "todo-list" element.
}

// These are the same todos that currently display in the HTML
// You will want to remove the ones in the current HTML after you have created them using JavaScript
let todos = [
{ task: "Wash the dishes", completed: false },
{ task: "Do the shopping", completed: false },
];

populateTodoList(todos);

// This function will take the value of the input field and add it as a new todo to the bottom of the todo list. These new todos will need the completed and delete buttons adding like normal.
function addNewTodo(event) {
// The code below prevents the page from refreshing when we click the 'Add Todo' button.
event.preventDefault();
// Write your code here... and remember to reset the input field to be blank after creating a todo!

let list = document.getElementById("todo-list");
let listValue = list.value;


let li = document.createElement("li")
Comment on lines +8 to +12
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well done @BakhatBegum it is very readable code.
You can improve your code by using const instead of let for variables that don't need to be reassigned. variables like list, listValue, li etc

li.classList.add("style-list");
list.appendChild(li);


let container = document.createElement("span")
container.classList.add("layout");
list.appendChild(container);

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I strongly recommend using code prettier to make sure your code has proper indentations. It'll make your code look clean and organised. Give it a try ;)


let checkIcon = document.createElement("i");
checkIcon.className = 'fa fa-check';
checkIcon.setAttribute("aria-hidden", "true");
checkIcon.onclick = function() {
li.classList.toggle("completed");
}
container.appendChild(checkIcon);


let trashIcon = document.createElement("i");
trashIcon.className = 'fa fa-trash';
trashIcon.setAttribute("aria-hidden", "true");
trashIcon.onclick = function(){
li.remove();
};
container.appendChild(trashIcon);

let textNode = document.createTextNode(listValue);
li.appendChild(container);
li.appendChild(textNode);

const ul = document.getElementById("task-list");
ul.appendChild(li);

list.value = "";
event.preventDefault();
}

// Advanced challenge: Write a fucntion that checks the todos in the todo list and deletes the completed ones (we can check which ones are completed by seeing if they have the line-through styling applied or not).
function deleteAllCompletedTodos() {
// Write your code here...

function deleteAllCompletedTodos(event) {
let todoList = document.getElementById("task-list");
let itemsTocompleted = document.querySelectorAll(".completed");
itemsTocompleted.forEach(function (item) {
todoList.removeChild(item);
});
}
Comment on lines +51 to 57
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you look at your code, you had created the deleteAllCompletedTodos function but didn't use it anywhere. You need to call it when the corresponding button-Remove all completed is clicked.
Also, if you look at your preview when you click the "Remove all completed" button, it deletes everything, even uncompleted tasks.
But why?
This happens because the button has a type of "submit", which tries to submit the form and refresh the page.
To prevent this behaviour, you can add an event listener to the button and call the deleteAllCompletedTodos function from there!!!
example:

const removeButton = document.getElementById("remove-button");//Assuming the given Id exists.
removeButton.addEventListener("click", deleteAllCompletedTodos);












96 changes: 96 additions & 0 deletions week-3/todo-list/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,97 @@

body{
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: auto;
background-image: url("./assets/world.jpg");
}

.completed{
text-decoration: line-through;
color: rgb(24, 27, 24);
}
form{
margin-left: 600px;
background-color: white;
width: 40%;
border-radius: 6px;
margin-top: 200px;
align-items: center;
justify-content: center;
}
.line{
width: 569px;
margin-top: 25px;
margin-bottom: 30px;
border: 1px solid gray;
}
#add-style{
font-size: 1.4em;
padding-left: 5px;
padding-top: 15px;
display: block;
}

.style-list{
list-style: none;
background-color: rgb(215, 211, 211);
font-size : "1.2em";
position: relative;
width: 70%;
padding: 20px;
border-radius: 7px;
margin-right: 800px;
margin-bottom: 20px;
font-size: 1.3em;
}

.layout{
position: absolute;
display: inline-block;
left: 20px;
padding-left:300px;
top: 50%;
padding-top: 20px;
transform: translateY(-50%);
}
.btn{
display: inline;
text-align: center;
display: flex;
gap: 10px;
padding-bottom: 30px;
padding-left: 8px;
}


button{
padding: 15px 15px;
font-weight: bold;
font-size: 1em;
border: none;
border-radius: 6px;
color: white;
background-color: rgb(69, 69, 233);
}

@media screen and (max-width: 768px) {
.layout{
padding-left:200px;
}
form{
align-items: flex-start;
justify-content: start;
width: 100%;
margin-bottom: 30px;
margin-left: 0px;
padding: 0px;
}
.line{
width: 100%;
}
button{
background-color: burlywood;
}

}