Developer-Student-Clubs-MMDU · ashif4ai · Sep 11, 2021 · Sep 11, 2021 · Sep 11, 2021 · Sep 11, 2021
diff --git a/README.md b/README.md
@@ -1,30 +1,17 @@
-# HTML CSS JAVASCRIPT - Todo Web App
-
-This project is a part of the DevBond200 a Techinical Event in UniversuMM 2021 (Youth Festival organised by MMDU, Mullana).
-
-More information at [UniversuMM](https://universumm.mmumullana.org/technical.php)
-
-## How To Use
-
-To clone and run this application, you'll need [Git](https://git-scm.com/) and Latest Version of any web browser(prefered Chrome or Firefox) installed on your computer.
-
-      # Clone this repository
-      $ git clone https://github.com/Developer-Student-Clubs-MMDU/DevBond200-Web-App.git
-
-      # Go into the repository
-      $ cd DevBond200-Web-App
-
-      # Run the app
-      # Open the index.html file in the web browser
-
-## Contribute
-
-1. Fork the repository here on GitHub.
-1. Clone the repository on your system.
-1. Develop and test your changes.
-1. Commit your changes and make sure your commit message clearly describe your changes.
-1. Send a pull request.
-
-For help getting started with the project, view
-[Mozilla's documentation](https://flutter.dev/docs) on Web, which offers tutorials,
-samples, guidance on web development, and a full API reference.
+# HTML CSS JAVASCRIPT - Todo Web App
+
+This project is a part of the DevBond200 a Techinical Event in UniversuMM 2021 (Youth Festival organised by MMDU, Mullana).
+
+More information at [UniversuMM](https://universumm.mmumullana.org/technical.php)
+
+# Features Added
+Auto Hide Unnecessary Elements
+More easy to Use, for small devices
+Aded Task Details field
+
+
+# Screenshot
+
+![Alt text](/img/1.jpg?raw=true "Optional Title")
+![Alt text](/img/2.jpg?raw=true "Optional Title")
+![Alt text](/img/3.jpg?raw=true "Optional Title")
diff --git a/app.js b/app.js
@@ -1,16 +1,39 @@
-const taskInput = document.getElementById("task-input"),
-	addTask = document.getElementById("task-add"),
-	taskList = document.getElementById("task-list");
-
-function createTaskItem(task) {
-	let li = document.createElement("li");
-	li.classList.add("task");
-	li.innerText = task;
-
-	taskList.appendChild(li);
-}
-
-addTask.addEventListener("click", function () {
-	createTaskItem(taskInput.value);
-	taskInput.value = "";
-});
+const taskInput = document.getElementById("task-input"),
+ 	tasktitle = document.getElementById("task-title"),
+	addTask = document.getElementById("task-add"),
+	taskList = document.getElementById("task-list"),
+	taskbutton = document.getElementById("task-btn"),
+	taskwrapper = document.getElementById("task-wrapper"),
+	taskform = document.getElementById("task-form");
+//
+
+taskbutton.addEventListener("click", function () {
+	taskwrapper.style.display = "none";
+	taskform.style.display = "block";
+});
+
+function createTaskItem(taskTitle,task) {
+
+	let taskcard = document.createElement("div");
+	let taskTit = document.createElement("div");
+	let taskDisc = document.createElement("p");
+
+	taskcard.classList.add("taskcard");
+	taskTit.classList.add("taskTitle");
+	taskDisc.classList.add("taskDisc");
+
+	taskTit.innerText = taskTitle;
+	taskDisc.innerText = task;
+
+	taskList.appendChild(taskcard);
+	taskcard.appendChild(taskTit);
+	taskcard.appendChild(taskDisc);
+}
+
+addTask.addEventListener("click", function () {
+	createTaskItem(tasktitle.value,taskInput.value);
+	tasktitle.value = "";
+	taskInput.value = "";
+	taskwrapper.style.display = "block";
+	taskform.style.display = "none";
+});
diff --git a/img/1.jpg b/img/1.jpg
diff --git a/img/2.jpg b/img/2.jpg
diff --git a/img/3.jpg b/img/3.jpg
diff --git a/index.html b/index.html
@@ -1,31 +1,39 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-   <meta charset="UTF-8">
-   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-   <title>UniversuMM - ToDo App</title>
-   <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-   <header id="header">
-      <h1>To-Do App</h1>
-   </header>
-
-   <form class="task-form">
-      <textarea name="task-input" id="task-input" autofocus></textarea>
-      <input type="button" value="ADD TASK" id="task-add">
-   </form>
-
-   <main class="tasks-wrapper">
-      <h2>Tasks</h2>
-      <ul id="task-list"></ul>
-   </main>
-
-
-   <script src="app.js"></script>
-</body>
-
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+   <meta charset="UTF-8">
+   <meta http-equiv="X-UA-Compatible" content="IE=edge">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <title>UniversuMM - ToDo App</title>
+   <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+   <header id="header">
+      <h1>To-Do App</h1>
+   </header>
+
+<div class="container">
+
+   <form class="task-form" id="task-form">
+      <input type="text" class="task-title" name="task-title" id="task-title" placeholder="Enter Task"> 
+      <textarea name="task-input" id="task-input" placeholder="Enter Discription"></textarea>
+      <input type="button" value="ADD TASK" id="task-add">
+   </form>
+
+   <main class="tasks-wrapper" id="task-wrapper">
+      <div class="row">
+         <h2>Tasks</h2>
+         <button id="task-btn">+ Add a task</button>
+      </div>
+      <ul id="task-list"></ul>
+   </main>
+
+</div>
+
+
+   <script src="app.js"></script>
+</body>
+
 </html>