feat: improve responsiveness, changed new-query btn so it resets filt…

…ers from now

submissions/ivan-chukhalo/friends-app/app.js

@@ -53,7 +53,7 @@ const BTN_SORT_BY_NAME_REVERSE = document.getElementById('btn__sort-name_alphabe
 const BTN_FILTER_BY_AGE = document.getElementById('btn__filter_by-age');
 const BTN_FILTER_BY_NAME = document.getElementById('btn__filter_by-name');
 const BTN_FILTER_BY_SEX = document.getElementById('btn__filter_by-sex');
-const BTN_NEW_QUERY = document.getElementById('btn_new-query');
+const BTN_RESET = document.getElementById('btn_reset');
 const INPUT_AGE_FIELD = document.getElementById('input__filter_by-age');
 const INPUT_NAME_FIELD = document.getElementById('input__filter_by-name');
 const BTN_RADIO_MALE = document.getElementById('sex_male');
@@ -178,7 +178,7 @@ ASIDE.addEventListener('click', event => {
     if (event.target === BTN_FILTER_BY_SEX){
         renderCards(getFilteredBySex(filteredUsers));
     }
-    if (event.target === BTN_NEW_QUERY){
-        fetchData();
+    if (event.target === BTN_RESET){
+        renderCards(users);
     }
 });

submissions/ivan-chukhalo/friends-app/index.html

@@ -36,11 +36,11 @@ <h1 class="header">Friends App</h1>
                 </div>
             </div>
             <div class="sorters">
-                <input type="number" class="input"  id="input__filter_by-age" min="18" max="100" placeholder="Type age">
+                <input type="number" class="input"  id="input__filter_by-age" min="18" max="100" placeholder="Age">
                 <button class="btn-filter" id="btn__filter_by-age">Filter by age</button>
             </div>
             <div class="sorters">
-                <input type="text" class="input"  id="input__filter_by-name" maxlength="25" placeholder="Type name">
+                <input type="text" class="input"  id="input__filter_by-name" maxlength="25" placeholder="Name">
                 <button id="btn__filter_by-name" class="btn-filter">Filter by name</button>
             </div>
             <div class="sorters">
@@ -60,7 +60,7 @@ <h1 class="header">Friends App</h1>
                 </div>
                 <button class="btn-filter" id="btn__filter_by-sex">Filter by sex</button>
             </div>
-            <button class="btn-filter" id="btn_new-query">New query</button>
+            <button class="btn-filter" id="btn_reset">Reset</button>
         </div>
     </aside>
     <main class="main" id="main">

submissions/ivan-chukhalo/friends-app/style.css

@@ -86,8 +86,9 @@ body{
 }
 
 .input{
-    width: 100%;
-    margin-bottom: 5px;
+    width: 30%;
+    margin: 0 auto 5px;
+    display: block;
 }
 
 .btn-filter{
@@ -151,6 +152,12 @@ body{
     border-top-right-radius: 2%;
 }
 
+@media (max-width: 1440px){
+    .input{
+        width: 100%;
+    }
+}
+
 @media (max-width: 1024px){
     .card{
         width: calc(20% - 20px);
@@ -179,6 +186,9 @@ body{
 }
 
 @media (max-width: 425px){
+    .card{
+        width: calc(50% - 20px);
+    }
     .card__info{
         font-size: 10px;
     }