fix: remove placeholder from input in favor of label, remove sr-only …

…rule, adjust styling
freeCodeCamp · Nov 20, 2023 · a8b5e4a · a8b5e4a
1 parent f610236
commit a8b5e4a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 17 deletions.
diff --git a/apps/pokemon-search-app/index.html b/apps/pokemon-search-app/index.html
@@ -16,16 +16,8 @@
     <h1>Pokémon Search App</h1>
     <div class="container">
       <form role="search" id="search-form">
-        <label for="search-input" class="sr-only"
-          >Search for Pokémon Name or ID</label
-        >
-        <input
-          type="text"
-          name="pokemon"
-          id="search-input"
-          placeholder="Enter Pokémon Name or ID"
-          required
-        />
+        <label for="search-input">Search for Pokémon Name or ID:</label>
+        <input type="text" name="pokemon" id="search-input" required />
         <button id="search-button">Search</button>
       </form>
       <div class="output">

diff --git a/apps/pokemon-search-app/public/styles.css b/apps/pokemon-search-app/public/styles.css
@@ -33,6 +33,8 @@ body {
 h1 {
   color: #fff;
   margin-top: 20px;
+  font-size: 1.7em;
+  text-align: center;
 }
 
 .container {
@@ -52,12 +54,17 @@ h1 {
 }
 
 #search-form {
+  flex-wrap: wrap;
   margin: 10px 0;
   padding: 5px;
   border-radius: 8px 8px 0 0;
   gap: 10px;
 }
 
+label {
+  align-self: center;
+}
+
 #search-input {
   height: 40px;
   padding-left: 10px;
@@ -74,13 +81,6 @@ h1 {
   border: none;
 }
 
-.sr-only {
-  position: absolute;
-  left: -10000px;
-  width: 1px;
-  height: 1px;
-}
-
 .output {
   margin: 10px 0;
   padding: 5px;
@@ -237,6 +237,10 @@ th {
 }
 
 @media screen and (min-width: 550px) {
+  h1 {
+    font-size: 2em;
+  }
+
   .container {
     width: 450px;
   }