Some size add,

the buttons rectangular and borders arranged.
mulfranck · Dec 26, 2021 · be896b4 · be896b4
1 parent aaef266
commit be896b4
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -19,19 +19,20 @@ <h1>Etchy Witty Sketchy</h1>
             <section class="board"></section>
             <section class="settings">
                 <div class="sizes">
-                    <p>Basic sizes:</p>
                     <button class="size" id="4">4</button>
                     <button class="size" id="8">8</button>
                     <button class="size" id="16">16</button>
+                    <button class="size" id="24">24</button>
                     <button class="size" id="32">32</button>
+                    <button class="size" id="32">42</button>
                     <button class="size" id="64">64</button>
                 </div>
                 <div class="colors">
                     <div id="basicColors" class="mode">
                         <div id="currentColor"></div>
                         <div class="hide_basic_colors float">
                             <button class="color" id="black">black</button>
-                            <button class="color" id="purple">grey</button>
+                            <button class="color" id="purple">purple</button>
                             <button class="color" id="blue">blue</button>
                         </div>
 
@@ -46,7 +47,7 @@ <h1>Etchy Witty Sketchy</h1>
                     </div>
                 </div>
 
-                <div>
+                <div class="cleaning">
                     <button id="erase">erase</button>
                     <button id="clear">clear</button>
                 </div>

diff --git a/script/script.js b/script/script.js
@@ -75,6 +75,7 @@ function change_sizes(e) {
     }
     create_board(size);
     create_content(size, behavior);
+    add_active(e)
 }
 $size_btns.forEach($btn => {
     $btn.addEventListener('click', change_sizes);
@@ -97,7 +98,6 @@ function rainbowColors () {
 
    return `rgb(${r}, ${g}, ${b})`;
 }
-console.log($rainbow)
 $rainbow.addEventListener('click', rainbowColors)
 //create a similly pop off look for basic colors
 function show_basicColor() {
@@ -118,6 +118,7 @@ $etchy.addEventListener('click', () => {
     behavior = !behavior;
 })
 
+
 // coloring the background of the target elements
 // by adding adding a bg prop styling
 function handle_mouse_moving(e) {

diff --git a/styles/style.css b/styles/style.css
@@ -48,6 +48,7 @@ main .board {
     display: grid;
 
     background:rgb(223, 228, 226);
+    /* background-color: ; */
     box-shadow: 1px -1px 4px rgb(37, 29, 24),-1px 1px 4px black;
 }
 
@@ -67,6 +68,7 @@ main .board {
     margin-top: .3rem;
     margin-bottom: .3rem;
 }
+
 .colors button {
     margin: 0;
     border: 0;
@@ -76,9 +78,8 @@ main .board {
 
 
 #currentColor {
-    width: 3rem;
-    height: 1.5rem;
-    opacity: .7;
+    width: 3.2rem;
+    height: 1.62rem;
 }
 #basicColors {
     position: relative;
@@ -88,7 +89,7 @@ main .board {
     position: absolute;
     top: -1.5rem;
     background-color: rgb(75, 73, 73);
-    width: 10rem;
+    width: 12rem;
     height: 60px;
 
     padding: 1rem;
@@ -97,24 +98,66 @@ main .board {
 }
 
 
+.colors .mode #rainbow {
+    border-left: 1px solid rgb(43, 41, 41);
+    border-right: 1px solid rgb(43, 41, 41);
+}
+.colors {
+    border: 1px solid rgb(37, 29, 24);
+}
 
 
-/* footer  */
-footer {
+/* ** Sizes ** */
+.sizes {
+    border:1px solid rgb(37, 29, 24);
     display: flex;
-    width: 100%;
     justify-content: center;
-    font-size: .9rem;
-    gap: 5rem;
+}
+.size {
+    flex: 1;
+    border: 0;
+
+}
+.size:nth-child(2),
+.size:nth-child(4),
+.size:nth-child(6) {
+    /* background-color:; */
+    border-right: 1px solid rgb(37, 29, 24);
+    border-left: 1px solid rgb(37, 29, 24);
 }
 
+.size:hover,
+button:hover {
+    background-color: rgb(169, 189, 248);
+}
 
-/* ** temporal ** */
+/* ** cleaning ** */
+.settings .cleaning {
+    display: flex;
+    justify-content: center;
+}
+.cleaning button:first-child{
+    border: 1px solid rgb(37, 29, 24);
+    /* border-right: 0; */
 
-.items {
-    background-color: rgb(37, 36, 36);
 }
+.cleaning button:last-child{
+    border: 1px solid rgb(37, 29, 24);
+    border-left: 0;
+}
+.cleaning button {
+    padding: .3rem .4rem;
+}
+
 
+/* footer  */
+footer {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    font-size: .9rem;
+    gap: 5rem;
+}