animation

neeeeecka · Jul 28, 2020 · 0ef77f0 · 0ef77f0
1 parent 41d4c26
commit 0ef77f0
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/background.js b/background.js
@@ -4,15 +4,16 @@
 // });
 
 const bannedSlogansList = document.getElementById("bannedSlogansList");
+const page1 = document.getElementById("page1");
 const page2btn = document.getElementById("s_page2");
 const page1btn = document.getElementById("s_page1");
 const container = document.getElementById("container");
 
 page2btn.onclick = () => {
-  container.style.marginLeft = "-400px";
+  page1.style.marginLeft = "-400px";
 };
 page1btn.onclick = () => {
-  container.style.marginLeft = "0px";
+  page1.style.marginLeft = "0px";
 };
 
 function span(text) {

diff --git a/popup.html b/popup.html
@@ -11,13 +11,13 @@
       margin: 0;
     }
     .container {
-      transition: all 0.25s ease;
       width: 400px;
       overflow: hidden;
       display: flex;
       padding: 5px 0;
     }
     .page {
+      transition: all 0.25s ease;
       width: 100%;
     }
     .h {
@@ -51,7 +51,7 @@
       text-align: center;
       margin-right: 10px;
     }
-    #s_page2 {
+    .pageBtn {
       display: block;
       width: 100%;
       text-align: left;
@@ -62,20 +62,22 @@
       outline: none;
       border: none;
     }
-    #s_page2:hover {
+    .pageBtn:hover {
       background: rgb(97, 97, 97);
       color: rgb(248, 248, 248);
     }
   </style>
   <body>
     <div class="container" id="container">
       <div id="page1" class="page">
-        <button id="s_page2">> Go to word banning settings</button>
+        <button id="s_page2" class="pageBtn">
+          &gt; Go to word banning settings
+        </button>
         <span class="h">Banned slogans found on this webpage: </span>
         <div id="bannedSlogansList"></div>
       </div>
       <div id="page2" class="page">
-        <button id="s_page1">< Go back</button>
+        <button id="s_page1" class="pageBtn">&lt; Go back</button>
         <span class="h">Add your own banned words: </span>
         <div id="bannedSlogansList"></div>
       </div>