added to-do app functionality

TryEnlight · Jul 8, 2020 · 4d8e75e · 4d8e75e
1 parent 024de5c
commit 4d8e75e
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 10 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,19 @@
+function newItem() {
+	var item = document.getElementById('input').value;
+	var ul = document.getElementById("list");
+	var li = document.createElement('li');
+  li.appendChild(document.createTextNode("- "+item));
+  ul.appendChild(li);
+  document.getElementById('input').value="";
+  li.onclick = removeItem;
+}
+
+document.body.onkeyup = function(e){
+      if(e.keyCode == 13){
+        newItem();
+      }
+  }
+
+function removeItem(e) {
+  e.target.parentElement.removeChild(e.target);
+}
diff --git a/index.html b/index.html
@@ -5,10 +5,12 @@
     <meta name="viewport"
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>electron-app</title>
+    <link rel="stylesheet" href="style.css" />
+    <title>My To Do List App</title>
 </head>
-<body>
-    <h1>This app is built with HTML!</h1>
-    <h3>And it's not witchcraft! It's Electron!</h3>
-</body>
+   <body>
+      <input id="input" placeholder="What needs to be done?">
+      <ul id="list"></ul> 
+   </body>
+   <script src="app.js"></script>
 </html>
diff --git a/index.js b/index.js
@@ -12,13 +12,8 @@ nodeIntegration: true
 
 // and load the index.html of the app.
 win.loadFile('index.html')
-
-// Open the DevTools.
-win.webContents.openDevTools()
-
 }
 
-
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.

diff --git a/style.css b/style.css
@@ -0,0 +1,32 @@
+html{
+	font-family: "Avenir Next", Helevetica, sans-serif;
+	text-align: center;
+}
+
+body {
+	max-width: 500px;
+	margin: 0 auto;
+} 
+
+input {
+	padding-top: 30px;
+	width: 500px;
+	height: 60px;
+	font-size: 40px;
+	border: 0;
+}
+
+input:focus {
+	outline:none;
+}
+
+li { 
+	text-align: left;
+	font-size: 40px;
+	list-style: none;
+	margin: 0;
+}
+
+li:hover {
+	text-decoration: line-through;
+}