Change List editor and page Style.

Silica163 · Jun 4, 2023 · 7c9a6df · 7c9a6df
1 parent 2950d05
commit 7c9a6df
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 3 deletions.
diff --git a/css/board.css b/css/board.css
@@ -19,7 +19,7 @@
 .item > pre{
 	white-space:pre-wrap;
 	overflow-y:auto;
-	max-height:80%;
+	max-height:75%;
 }
 
 .item > .del {

diff --git a/css/editor.css b/css/editor.css
@@ -1,3 +1,8 @@
+/*create new item*/
+.newbtn{
+	padding:0.5em;
+}
+
 /*editor section*/
 
 #blur_board{

diff --git a/index.html b/index.html
@@ -20,10 +20,14 @@
 <body>
 	<h1>Task - Note</h1>
 
-	<!-- VIEWER -->
-	<section id=board>
+	<!-- CREATE NEW ITEM -->
+	<section id=newItem>
+		<button onclick="newList()" value="New List" class=newbtn>New List</button>
+		<button onclick="newNote()" value="New Note" class=newbtn>New Note</button>
 	</section>
 
+	<!-- VIEWER -->
+	<section id=board></section>
 
 	<!-- EDITOR -->
 	<section id=note_editor>

diff --git a/src/editor.js b/src/editor.js
@@ -20,6 +20,11 @@ note.children['cancelbtn'].addEventListener('click',resetNoteData);
 
 const note_comp = note.children;
 
+function newNote(){
+	note.setAttribute("status","active");
+	bb.setAttribute("status","active");
+}
+
 function resetNoteData(){
 	note_comp['title'].value = "";
 	note_comp['title'].disabled = false;
@@ -60,6 +65,11 @@ list.children['savebtn'].addEventListener('click',save);
 
 const list_comp = list.children;
 
+function newList(){
+	list.setAttribute("status","active");
+	bb.setAttribute("status","active");
+}
+
 function getListData(){
 	const listboard = list_comp['task'];
 	var data = {
@@ -82,13 +92,17 @@ function resetListData(){
 	list_comp['title'].disabled = false;
 	list_comp['task'].innerHTML = "";
 	list_comp['add_list'].children[0].value = "";
+	list.setAttribute("status","");
+	bb.setAttribute("status","");
 }
 
 function editList(id){
 	const {type,data} = local.get(id);
 
 	list_comp["title"].value = id;
 	list_comp['title'].disabled = true;
+	list.setAttribute("status","active");
+	bb.setAttribute("status","active");
 
 	const listBoard = list_comp["task"];
 	listBoard.innerHTML = "";