diff --git a/src/ex1/README.md b/src/ex1/README.md
index 2e293e238..2ebc9b4fc 100644
--- a/src/ex1/README.md
+++ b/src/ex1/README.md
@@ -13,24 +13,24 @@ A todo app!
Almost as cool as our boards, but with a bit less functionality.
The requirements:
- [x] Import the relevant CSS (style.css) and JS (script.js) files - already done for you
-- [ ] Choose a name for your app and update the title to your app name
-- [ ] Add your app name in the top of the screen (see mock)
-- [ ] Build the layout according to the mock. (background, centered white box, etc...)
-- [ ] Add a textbox to be used for adding tasks
-- [ ] Add a button ("Add task")
-- [ ] When "Add task" button is clicked, add a task to the task list
-- [ ] Change the background and cursor type of an item when hovered on
-- [ ] When a list item is clicked, show 'alert' (**Hint**: check the [alert](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert) method) with the item name
-- [ ] Delete an item when "Delete" button is clicked
+- [x] Choose a name for your app and update the title to your app name
+- [x] Add your app name in the top of the screen (see mock)
+- [x] Build the layout according to the mock. (background, centered white box, etc...)
+- [x] Add a textbox to be used for adding tasks
+- [x] Add a button ("Add task")
+- [x] When "Add task" button is clicked, add a task to the task list
+- [x] Change the background and cursor type of an item when hovered on
+- [x] When a list item is clicked, show 'alert' (**Hint**: check the [alert](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert) method) with the item name
+- [x] Delete an item when "Delete" button is clicked
Bonus
-- [ ] Clear the input when a new item is added
-- [ ] Add input validation. e.g when the text input is empty, show a message with an error
-- [ ] Add "empty state" - when there are no items on the list, show some nice and inviting UI to encourage the user to add items
-- [ ] Add ability to sort the list by name
-- [ ] Add task when enter key is pressed
-- [ ] Add animation when a new item is added
+- [x] Clear the input when a new item is added
+- [x] Add input validation. e.g when the text input is empty, show a message with an error
+- [x] Add "empty state" - when there are no items on the list, show some nice and inviting UI to encourage the user to add items
+- [x] Add ability to sort the list by name
+- [x] Add task when enter key is pressed
+- [x] Add animation when a new item is added
- [ ] have another cool idea? Go wild!
When you finish, it should look like this:
diff --git a/src/ex1/index.html b/src/ex1/index.html
index 4d8c49943..346d92318 100644
--- a/src/ex1/index.html
+++ b/src/ex1/index.html
@@ -1,14 +1,37 @@
+
- Exercise 1
+
+
+
+ My Todo List
+
+
-
-
-
Todo list
+
+
+
My Todo list
+
+
+
+
+
+
+
+
+
Time to add your first task
+
+
+ You have 0 pending tasks
+
+
+
+
-
+
+
\ No newline at end of file
diff --git a/src/ex1/script.js b/src/ex1/script.js
index e69de29bb..f77f1023c 100644
--- a/src/ex1/script.js
+++ b/src/ex1/script.js
@@ -0,0 +1,100 @@
+const taskInput = document.querySelector(" #taskInput ");
+const addBtn = document.querySelector(" #addBtn ");
+const clearAllBtn = document.querySelector(" #clearAllBtn ");
+const sortAllBtn = document.querySelector(" #sortAllBtn ");
+const taskList = document.querySelector(" #taskList ");
+const placeHolder = document.querySelector(" .placeHolder ")
+const pedingTaskText = document.querySelector(" #peding-task-text ")
+
+const taskArr = JSON.parse(localStorage.getItem("tasks")) || [];
+
+
+//waiting for user input before enable the add button
+taskInput.addEventListener('keyup', () => addBtn.disabled = !taskInput.value)
+
+// add a task when user press Enter key
+taskInput.addEventListener("keypress", (e) => { if (e.key === 'Enter') addNewTask(taskInput.value) });
+
+//add click event listener to add button
+addBtn.addEventListener("click", () => addNewTask(taskInput.value));
+
+//sort the tasks list add them to html list element and save them to the LocalStorage
+sortAllBtn.addEventListener("click", () => {
+ taskArr.sort();
+ taskList.innerHTML = '';
+ insertAllTasks();
+ localStorage.setItem("tasks", JSON.stringify(taskArr)); //add the updated task array to the localStorage
+})
+
+//Clear the tasks list
+clearAllBtn.addEventListener("click", () => {
+ taskArr.length = 0;
+ taskList.innerHTML = ''; //Clear the list of tasks element
+ localStorage.setItem("tasks", JSON.stringify(taskArr)); //add the updated task array to the localStorage
+ updateForm();
+})
+
+//function to add task and update the list and the localStorage
+function addNewTask(taskValue) {
+ taskArr.push(taskValue); //add the user value to the task array
+ taskList.appendChild(createLi(taskValue));
+ taskInput.value = ''; //clear the input after added
+ addBtn.disabled = true;
+ localStorage.setItem("tasks", JSON.stringify(taskArr)); //add the updated task array to the localStorage
+ updateForm();
+}
+
+// function to remove task that have been clicked
+function removeTask(li, taskValue) {
+ taskArr.splice(taskArr.indexOf(taskValue), 1);
+ taskList.removeChild(li);
+ localStorage.setItem("tasks", JSON.stringify(taskArr)); //add the updated task array to the localStorage
+ updateForm();
+}
+
+//update the button and the placeHolder if necessary
+function updateForm() {
+ pedingTaskText.innerHTML = "You have " + taskArr.length + " pending tasks"
+ if (taskArr.length === 0) { //if there are no task any more disable the clear and sort button
+ clearAllBtn.disabled = true;
+ sortAllBtn.disabled = true;
+ placeHolder.classList.remove("hidden");
+ }
+ else {
+ clearAllBtn.disabled = false;
+ sortAllBtn.disabled = false;
+ placeHolder.classList.add("hidden");
+ }
+}
+
+//function to insert the all tasks from the localStorage to the html list element
+function insertAllTasks() {
+ taskArr.forEach((taskValue) => {
+ taskList.appendChild(createLi(taskValue));
+ });
+ updateForm();
+}
+
+//Function to create the li element and its childs and assign a click event to them
+function createLi(taskValue) {
+ const li = document.createElement("li");
+ const span = document.createElement("span");
+ const i = document.createElement("i");
+ li.innerHTML = taskValue;
+ i.classList.add("fa", "fa-trash-o");
+ span.appendChild(i);
+ li.appendChild(span);
+ span.onclick = (e) => {
+ e.stopPropagation(); //stop the parent elemnt to listen to click event
+ removeTask(li, taskValue);
+ };
+ li.onclick = () => alert(taskValue);
+ li.classList.add('new-li');
+ return li;
+}
+
+//if there are some task in the localStorage insert them
+function init() {
+ if (taskArr.length != 0) insertAllTasks();
+ else placeHolder.classList.remove("hidden");
+}
\ No newline at end of file
diff --git a/src/ex1/style.css b/src/ex1/style.css
index e69de29bb..1254c3b94 100644
--- a/src/ex1/style.css
+++ b/src/ex1/style.css
@@ -0,0 +1,163 @@
+* {
+ font-family: Alef, Arial, Helvetica, sans-serif;
+ font-size: 20px;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ width: 100%;
+ background: linear-gradient(to top, rgb(47, 255, 102) 0%, rgb(0, 200, 255) 100%);
+}
+
+h1 {
+ font-size: 35px;
+}
+
+
+.container {
+ background-color: white;
+ border-radius: 10px;
+ width: 100%;
+ max-width: 500px;
+ padding: 25px;
+}
+
+.btn[disabled] {
+ opacity: 0.3;
+ box-shadow: none;
+ border: none;
+}
+
+.btn[disabled]:hover {
+ cursor: not-allowed;
+ box-shadow: none;
+}
+
+.btn {
+ height: 100%;
+ text-align: center;
+ color: white;
+ border: none;
+ margin-left: 10px;
+ border-radius: 8px;
+ cursor: pointer;
+ background-color: rgb(30, 75, 254);
+}
+
+.btn:hover {
+ background-color: rgb(0, 51, 255);
+ box-shadow: 0.5px 0.5px 10px 0.5px grey;
+}
+
+
+.placeHolder {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ color: greenyellow;
+ font-size: 100px;
+ opacity: 0.3;
+ padding: 60px;
+ border: 1px solid rgb(99, 99, 99);
+ border-radius: 8px;
+}
+
+.hidden {
+ display: none;
+}
+
+.placeHolder p {
+ margin-top: 5px;
+ color: black;
+}
+
+#addBtn {
+ width: 60px;
+ font-size: 30px;
+}
+
+#add-task {
+ display: flex;
+ width: 100%;
+ height: 50px;
+ margin: 30px 0;
+}
+
+#add-task input {
+ width: 90%;
+ height: 100%;
+ border: 1px solid #ccc;
+ border-radius: 8px;
+ padding-left: 15px;
+ outline: none;
+}
+
+
+#taskList {
+ max-height: 260px;
+ overflow-y: auto;
+}
+
+
+#taskList li {
+ list-style: none;
+ line-height: 45px;
+ margin-bottom: 8px;
+ background-color: rgb(237, 237, 237);
+ border-radius: 8px;
+ padding-left: 15px;
+ position: relative;
+ overflow: hidden;
+}
+
+#taskList li span {
+ position: absolute;
+ right: -45px;
+ background-color: red;
+ color: white;
+ width: 40px;
+ text-align: center;
+ border-radius: 0 8px 8px 0;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+#taskList li:hover span {
+ right: 0;
+}
+
+#info {
+ display: flex;
+ justify-content: space-around;
+ width: 100%;
+ margin-top: 20px;
+ align-items: center;
+}
+
+#clearAllBtn,
+#sortAllBtn {
+ padding: 10px;
+}
+
+@keyframes append-animate {
+ from {
+ transform: translateX(-100%);
+ opacity: 1;
+ }
+
+ to {
+ transform: translateX(0%);
+ opacity: 1;
+ }
+}
+
+/* animate new box */
+.new-li {
+ animation: append-animate .4s linear;
+}
\ No newline at end of file
diff --git a/src/ex2/ItemManager.js b/src/ex2/ItemManager.js
new file mode 100644
index 000000000..411ad7c01
--- /dev/null
+++ b/src/ex2/ItemManager.js
@@ -0,0 +1,29 @@
+class ItemManager {
+ constructor() {
+ this.taskArr = JSON.parse(localStorage.getItem("tasks")) || [];
+ }
+
+ addNewTask(taskValue) {
+ this.taskArr.push(taskValue); //add the user value to the task array
+ this.updateLocalStorage(this.taskArr);
+ }
+
+ removeTask(taskValue) {
+ this.taskArr = this.taskArr.filter(task => task !== taskValue);
+ this.updateLocalStorage(this.taskArr);
+ }
+
+ sortArr() {
+ this.taskArr.sort();
+ this.updateLocalStorage(this.taskArr);
+ }
+
+ clearArr() {
+ this.taskArr.length = 0;
+ this.updateLocalStorage(this.taskArr);
+ }
+
+ updateLocalStorage(valueToUpdate) {
+ localStorage.setItem("tasks", JSON.stringify(valueToUpdate)); //add the updated task array to the localStorage
+ }
+}
diff --git a/src/ex2/PokemonClient.js b/src/ex2/PokemonClient.js
new file mode 100644
index 000000000..b653a1fc8
--- /dev/null
+++ b/src/ex2/PokemonClient.js
@@ -0,0 +1,31 @@
+API_BASE = "https://pokeapi.co/api/v2/pokemon-form/";
+
+class PokemonClient {
+ async getPokemon(id) {
+ try {
+ const response = await fetch(`${API_BASE}${id}`, {
+ method: "GET"
+ })
+ const result = await response.json()
+ return result.name;
+ } catch (e) {
+ return false;
+ }
+ }
+
+ async getPokemons(ids) {
+ const promiseIDs = [];
+ const IDs = ids.split(",");
+ try {
+ IDs.forEach(id => {
+ promiseIDs.push(fetch(`${API_BASE}${id}`, { method: "GET" }))
+ });
+ const responses = await Promise.all(promiseIDs);
+ const result = await Promise.all(responses.map(r => r.json()));
+ return result.map(r => r.name)
+ } catch (e) {
+ return false;
+ }
+ }
+}
+
diff --git a/src/ex2/index.html b/src/ex2/index.html
index ae7f3e8cc..bdeea8a9e 100644
--- a/src/ex2/index.html
+++ b/src/ex2/index.html
@@ -1,24 +1,39 @@
-
- Listy
+
+
+
+
+
+ My Todo List
+
+
-
-
-