surajondev · surajondev · Oct 9, 2022 · Oct 9, 2022
diff --git a/JavaScript TODO list generator/PROBLEM.md b/JavaScript TODO list generator/PROBLEM.md
@@ -0,0 +1,17 @@
+# Problem Statement: Create a TODO List Application
+
+### Use below image for UI visualisation and understanding the problem
+
+ ![Make a Todo List](./todo-list.png)
+
+### Requirements:
+
+ - When a User enters Todo item into the input box, and presses the "Add Todo" button, the Todo item goes in the list below
+ - Do not allow a blank Todo item to be filled in the list
+ - Make an ordered list and maintain the count
+ - Each Todo item in the list will have a "Remove" button in front of it
+ - On Clicking the "Remove" Button, that particular item is removed from the list
+ - After the removal,the ordered list should arrange itself in order, and there should be no missing numbers
+ - Use Bootstrap Grid for aligning UI elements
+ - You are allowed to use Bootstrap components
+ - Use your UX ideas to make the application responsive for mobile screens
diff --git a/JavaScript TODO list generator/README.md b/JavaScript TODO list generator/README.md
@@ -0,0 +1,48 @@
+## Boilerplate Repository
+
+### Instructions
+Refer the [PROBLEM.md](./PROBLEM.md) file for problem description.
+
+#### To use this as a boilerplate for your assignment, please follow these steps
+
+1. **FORK** this repository in your Gitlab account
+
+2. **CLONE** the forked repository, containing the boilerplate in your local machine
+
+3. Navigate to cloned folder
+
+    ` cd <clonedfoldername>`
+
+4. Check the status of your repository
+
+     `git status`
+
+5. Complete the solution as per the instructions given in problem.md. All files should be created inside the cloned folder
+
+6. Use the following command to update the index using the current content found in the working tree, to prepare the content staged for the next commit.
+
+     `git add .`
+
+7. Commit and Push the project to git
+
+     `git commit -a -m "Initial commit | or place your comments according to your need"`
+
+     `git push -u origin master`
+
+8. Check on the git repo online, if the files have been pushed
+
+9. Submit your solution to your mentor
+
+
+### Important instructions for Participants
+> - We expect you to write the assignment on your own by following through the guidelines, learning plan, and the practice exercises
+> - The code must not be plagiarized, the mentors will randomly pick the submissions and may ask you to explain the solution
+> - The code must be properly indented, code structure maintained as per the boilerplate and properly commented
+> - Follow through the problem statement given in [PROBLEM.md](./PROBLEM.md) file
+
+### MENTORS TO BEGIN REVIEW YOUR WORK ONLY AFTER ->
+> - You add the respective Mentor as a Reporter/Master into your Assignment Repository
+> - Intimate your Mentor on Slack and/or Send an Email to learner.support@stackroute.in - with your Git URL - Once you done working and is ready for final submission.
+
+
+
diff --git a/JavaScript TODO list generator/index.html b/JavaScript TODO list generator/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>TODO List</title>
+
+    <!-- bootstrap CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+
+    <style>
+        .input-box {
+            display: flex;
+            align-items: center;
+            padding: 20px;
+        }
+
+        .todolist ol li {
+            padding: 10px 0;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-6 col-md-offset-3">
+                <div class="col-md-12 input-box">
+                    <div class="col-md-8">
+                        <input type="text" id="myInput" class="form-control" value="" placeholder="please enter the todo item here">
+                    </div>
+                    <div class="col-md-4">
+                        <button class="btn btn-default" onclick="newElement()">ADD TODO</button>
+                    </div>
+                </div>
+
+                <div class="col-md-8 todolist">
+                    <ol id="myUL">
+                        <li>Play Cricket</li>
+                        <li>Listen Music</li>
+                        <li>Buy Groceries</li>
+                    </ol>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="./script.js">
+    </script>
+</body>
+
+</html>
diff --git a/JavaScript TODO list generator/script.js b/JavaScript TODO list generator/script.js
@@ -0,0 +1,51 @@
+var myNodelist = document.getElementsByTagName("LI");
+var i;
+for (i = 0; i < myNodelist.length; i++) {
+    var span = document.createElement("SPAN");
+    var txt = document.createTextNode("Remove");
+    span.className = "closeitem btn btn-default pull-right";
+    span.appendChild(txt);
+    myNodelist[i].appendChild(span);
+}
+
+var close = document.getElementsByClassName("closeitem");
+var i;
+for (i = 0; i < close.length; i++) {
+    close[i].onclick = function() {
+        var div = this.parentElement;
+        div.style.display = "none";
+    }
+}
+
+var list = document.querySelector('ul');
+list.addEventListener('click', function(ev) {
+    if (ev.target.tagName === 'LI') {
+        ev.target.classList.toggle('checked');
+    }
+}, false);
+
+function newElement() {
+    var li = document.createElement("li");
+    var inputValue = document.getElementById("myInput").value;
+    var t = document.createTextNode(inputValue);
+    li.appendChild(t);
+    if (inputValue === '') {
+        alert("You must write something!");
+    } else {
+        document.getElementById("myUL").appendChild(li);
+    }
+    document.getElementById("myInput").value = "";
+
+    var span = document.createElement("SPAN");
+    var txt = document.createTextNode("Remove");
+    span.className = "closeitem btn btn-default pull-right";
+    span.appendChild(txt);
+    li.appendChild(span);
+
+    for (i = 0; i < close.length; i++) {
+        close[i].onclick = function() {
+            var div = this.parentElement;
+            div.style.display = "none";
+        }
+    }
+}
diff --git a/JavaScript TODO list generator/todo-list.png b/JavaScript TODO list generator/todo-list.png