client side form validation etc.

dahltina · Mar 20, 2021 · aefd13e · aefd13e
1 parent 0952a1c
commit aefd13e
Show file tree

Hide file tree

Showing 11 changed files with 366 additions and 130 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/CSS/index.css b/CSS/index.css
@@ -8,8 +8,8 @@
 
 :root {
   --main: #0a3641;
-  --orange: #ee9c47;
-  --green: #8dba7e;
+  --orange: #FF8500;
+  --green: #4DAA46;
   --white: #ffffff;
   --light-blue: #e2e2eb;
   --gray: #969696;
@@ -35,6 +35,10 @@ body {
   margin-right: 10%;
 }
 
+a {
+  color: var(--main);
+}
+
 h1,
 h2,
 h3 {
@@ -130,6 +134,7 @@ nav li {
 nav a {
   color: var(--main);
   text-decoration: none;
+  transition: 0.5s ease-in;
 }
 
 nav a:hover {
@@ -170,6 +175,7 @@ nav a:hover {
   font-weight: 700;
   font-size: 1rem;
   text-decoration: none;
+  cursor: pointer;
 }
 
 .btn-large:hover {
@@ -216,8 +222,6 @@ nav a:hover {
 
 .small {
   width: 100%;
-  max-width: 343px;
-  max-height: 343px;
   transition: transform 0.2s;
 }
 
@@ -228,7 +232,7 @@ nav a:hover {
 }
 
 .thumb {
-  max-width: 100%;
+  width: 100%;
   max-width: 160px;
   max-height: 160px;
 }
@@ -243,6 +247,7 @@ nav a:hover {
 main {
   grid-area: main;
 }
+
 .container-1 {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -364,8 +369,8 @@ label[for="color-select"],
 .thumb-images {
   display: flex;
   flex-wrap: nowrap;
-  max-width: 100%;
   max-height: 160px;
+  margin-top: 30px;
 }
 
 .forest {
@@ -385,6 +390,38 @@ select {
   color: black;
 }
 
+ul.jacket-specs {
+  padding: 15px;
+}
+
+.addedToCart {
+  position: relative;
+  top: 10px;
+  color: var(--green);
+  font-weight: bold;
+  text-align: center;
+  padding: 10px;
+  transition: 0.5s ease-in;
+  border: 1px solid var(--green);
+}
+
+
+/* .itemsInCart {
+  position: relative;
+  top: 5px;
+  left: -10px;
+  background-color: var(--orange);
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  z-index: 10;
+  text-align: center;
+  font-weight: bold;
+  color: var(--white); 
+} */
+
+
+
 /* -------------about------------------
 ------------------------------------- */
 img.about {
@@ -442,6 +479,7 @@ textarea {
 
 input[type="submit"] {
   text-decoration: none;
+  text-align: center;
   border-radius: 1.5rem;
   background: var(--orange);
   color: var(--white);
@@ -458,6 +496,20 @@ textarea:focus {
   border: none;
 }
 
+/* form messages */
+
+.formError {
+  color: rgb(158, 41, 25);
+  padding-top: 5px;
+  display: none;
+}
+
+.success-message {
+  color: var(--green);
+  border: 1px solid var(--green);
+  border-radius: 0.3rem;
+}
+
 /*------------footer------------------*/
 footer {
   grid-area: footer;

diff --git a/contact.html b/contact.html
@@ -59,22 +59,27 @@
         <main>
           <h1 class="h1-contact">Get in Touch</h1>
           <div class="line"></div>
-          <form action="form-success.php" method="GET">
+          <div id="success-message"></div>
+          <form action="form-success.php" method="GET" id="form">
             <div class="first-name">
               <label for="first-name">First name </label>
-              <input type="text" name="first-name" id="first-name" required />
+              <input type="text" name="first-name" id="first-name" >
+              <div id="firstNameError" class="formError">Please provide your first name</div>
             </div>
             <div class="last-name">
               <label for="last-name">Last name </label>
-              <input type="text" name="last-name" id="last-name" required />
+              <input type="text" name="last-name" id="last-name" />
+              <div id="lastNameError" class="formError">Please provide your last name</div>
             </div>
-            <div class="e-mail">
+            <div class="email">
               <label for="name">E-mail </label>
-              <input type="text" name="e-mail" id="e-mail" required />
+              <input type="email" name="email" id="email" />
+              <div id="emailError" class="formError">Please provide a valid email</div>
             </div>
             <div class="textarea">
               <label for="textarea">Message </label>
-              <textarea name="message"></textarea>
+              <textarea name="message" id="message"></textarea>
+              <div id="messageError" class="formError">Message must be at least 20 characters</div>
             </div>
             <input id="submit" type="submit" value="SEND" />
           </form>
@@ -111,5 +116,6 @@ <h1 class="h1-contact">Get in Touch</h1>
             </form>
         </section> 
       </footer>
+      <script src="js/form.js"></script>
     </body>
   </html>
diff --git a/forest-jacket.html b/forest-jacket.html
@@ -31,7 +31,9 @@
         <div class="topnav">
           <div class="favorites item"><img src="images/icons/like.svg" alt="favorites"/></div>
           <div class="profile item"><img src="images/icons/profile.svg" alt="profile"/></div>
-          <div class="cart item"><a href="checkout.html"><img src="images/icons/cart.svg" alt="shopping cart"></a></div>
+          <div class="cart item"><a href="checkout.html"><img src="images/icons/cart.svg" alt="shopping cart"></a>
+            <div id="itemsInCart" class="itemsInCart"></div>
+          </div>
           <div class="search item"><img src="images/icons/search.svg" alt="search"/></div>
         </div>
       </header>
@@ -74,14 +76,15 @@
             <h2 class="forest">Forest Jacket</h2>
             USD 54
             <div class="favorite-icon"><img src="images/icons/like.svg" alt="add to favorites"></div>
+              <ul class="jacket-specs">
+                <li>Waterproof</li>
+                <li>Windproof</li>
+                <li>Breathing material</li>
+                <li>Lightweight</li>
+              </ul>
               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                  Ipsum maiores necessitatibus deserunt tempore, ipsa saepe, 
-                 nihil quod eaque odit porro voluptatibus id. 
-                 Natus quibusdam commodi voluptatem error aspernatur. Lorem ipsum 
-                 dolor sit amet consectetur adipisicing elit. Similique, dolore! 
-                 Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
-                 Assumenda odio officia et obcaecati, quas eius esse perspiciatis 
-                 maiores dolorum ratione.
+                 nihil quod eaque odit porro voluptatibus id.
               </p>
               <label for="color-select">Color</label>
               <select name="color" id="color-select">
@@ -99,8 +102,11 @@ <h2 class="forest">Forest Jacket</h2>
                 <option value="xl">XL</option>
                 <option value="xxl">XXL</option>
               </select>
-              <button class="btn-large cart">add to cart</button>
-              <button class="btn-large cart green">buy it now</button>
+              <button class="btn-large cart" id="add">add to cart</button>
+              <button class="btn-large cart green" id="buyNow">buy it now</button>
+              <!---------- added to cart --------------->
+              <div id="cart-add">
+              </div>
             </div>
           </main>
           </div>
@@ -135,5 +141,6 @@ <h2 class="forest">Forest Jacket</h2>
             </form>
          </section>   
       </footer>
+    <script src="js/script.js"></script>
   </body>
 </html>
diff --git a/index.html b/index.html
@@ -72,43 +72,53 @@ <h2>Explore our new collection</h2>
       <h2>Featured items</h2>
       <div class="container-3">
         <div class="box-1">
-          <img class="new" src="images/buttons/neww.png" alt="new item">
-          <img class="img small" src="images/jacket-amuse.jpg" alt="Men's red amuse jacket">
-          <div class="jacket-title"><h3>Amuse Jacket</h3></div>
-          <div class="like-icon"><img src="images/icons/like.svg" alt="add to favorites"></div>
+          <a href="forest-jacket.html">
+            <img class="new" src="images/buttons/neww.png" alt="new item">
+            <img class="img small" src="images/jacket-amuse.jpg" alt="Men's red amuse jacket">
+            <div class="jacket-title"><h3>Amuse Jacket</h3></div>
+          </a>
+          <img class="like-icon" src="images/icons/like.svg" alt="add to favorites">
           <div class="rating"><img src="images/buttons/rating.svg" alt="rating"></div>
           <div class="colors"><img src="images/buttons/colors.svg" alt="available colors"></div>
           <div class="price"> USD 78</div>
         </div>
         <div class="box-1">
-          <img class="sale" src="images/buttons/sale.png" alt="item on sale">
-          <img class="img small" src="images/jacket-elements.jpg" alt="Women's yellow elements jacket">
-          <div class="jacket-title"><h3>Elements Jacket</h3></div>
-          <div class="like-icon"><img src="images/icons/like.svg" alt="add to favorites"></div>
+          <a href="forest-jacket.html">
+            <img class="sale" src="images/buttons/sale.png" alt="item on sale">
+            <img class="img small" src="images/jacket-elements.jpg" alt="Women's yellow elements jacket">
+            <div class="jacket-title"><h3>Elements Jacket</h3></div>
+          </a>
+          <img class="like-icon" src="images/icons/like.svg" alt="add to favorites">
           <div class="rating"><img src="images/buttons/rating2.svg" alt="rating"></div>
           <div class="colors"><img src="images/buttons/colors3.svg" alt="available colors"></div>
           <div class="price dropped">USD 49 <s>USD 69</s></div>
         </div>
         <div class="box-1">
-          <img class="img small" src="images/jacket-edge.jpg" alt="Men's red edge jacket" >
-          <div class="jacket-title"><h3>Edge Jacket</h3></div>
-          <div class="like-icon"><img src="images/icons/like.svg" alt="add to favorites"></div>
+          <a href="forest-jacket.html">
+            <img class="img small" src="images/jacket-edge.jpg" alt="Men's red edge jacket" >
+            <div class="jacket-title"><h3>Edge Jacket</h3></div>
+          </a>
+          <img class="like-icon" src="images/icons/like.svg" alt="add to favorites">
           <div class="rating"><img src="images/buttons/rating-edge.svg" alt="rating"></div>
           <div class="colors"><img src="images/buttons/colors.svg" alt="available colors"></div>
           <div class="price">USD 58</div>
         </div>
         <div class="box-1">
-          <img class="img small" src="images/jacket-voss.jpg" alt="Women's yellow voss jacket" >
-          <div class="jacket-title"><h3>Voss Jacket</h3></div>
-          <div class="like-icon"><img src="images/icons/like.svg" alt="add to favorites"></div>
+          <a href="forest-jacket.html">
+            <img class="img small" src="images/jacket-voss.jpg" alt="Women's yellow voss jacket" >
+            <div class="jacket-title"><h3>Voss Jacket</h3></div>
+          </a>
+          <img class="like-icon" src="images/icons/like.svg" alt="add to favorites">
           <div class="rating"><img src="images/buttons/rating2.svg" alt="rating"></div>
           <div class="colors"><img src="images/buttons/colors3.svg" alt="available colors"></div>
           <div class="price">USD 59 </div>
         </div>
         <div class="box-1">
-          <img class="img small" src="images/jacket-explore.jpg" alt="Women's black explore jacket" >
-          <div class="jacket-title"><h3>Explore Jacket</h3></div>
-          <div class="like-icon"><img src="images/icons/like.svg" alt="add to favorites"></div>
+          <a href="forest-jacket.html">
+            <img class="img small" src="images/jacket-explore.jpg" alt="Women's black explore jacket" >
+            <div class="jacket-title"><h3>Explore Jacket</h3></div>
+          </a>
+          <img class="like-icon" src="images/icons/like.svg" alt="add to favorites">
           <div class="rating"><img src="images/buttons/rating.svg" alt="rating"></div>
           <div class="colors"><img src="images/buttons/colors3.svg" alt="available colors"></div>
           <div class="price">USD 68 </div>
@@ -119,32 +129,38 @@ <h2>Featured items</h2>
             <img class="img small" src="images/jacket-forest.jpg" alt="men's black forest jacket">
             <div class="jacket-title"><h3>Forest Jacket</h3></div>
           </a>
-          <div class="like-icon"><img src="images/icons/like.svg" alt="add to favorites"></div>
+          <img class="like-icon" src="images/icons/like.svg" alt="add to favorites">
           <div class="rating"><img src="images/buttons/rating2.svg" alt="rating"></div>
           <div class="colors"><img src="images/buttons/colors-forest.svg" alt="available colors"></div>
           <div class="price">USD 54 </div>
         </div>
         <div class="box-1">
-          <img class="img small" src="images/jacket-edge2.jpg" alt="men's orange edge jacket" >
-          <div class="jacket-title"><h3>Edge Jacket</h3></div>
-          <div class="like-icon"><img src="images/icons/like.svg" alt="add to favorites"></div>
+          <a href="forest-jacket.html">
+            <img class="img small" src="images/jacket-edge2.jpg" alt="men's orange edge jacket" >
+            <div class="jacket-title"><h3>Edge Jacket</h3></div>
+          </a>
+          <img class="like-icon" src="images/icons/like.svg" alt="add to favorites">
           <div class="rating"><img src="images/buttons/rating2.svg" alt="rating"></div>
           <div class="colors"><img src="images/buttons/colors-voss.svg" alt="available colors"></div>
           <div class="price">USD 64 </div>
         </div>
         <div class="box-1">
-          <img class="sale" src="images/buttons/sale.png" alt="item on sale">
-          <img class="img small" src="images/jacket-voss2.jpg" alt="men's blue voss jacket" >
-          <div class="jacket-title"><h3>Voss Jacket</h3></div>
-          <div class="like-icon"><img src="images/icons/like.svg" alt="add to favorites"></div>
+          <a href="forest-jacket.html">
+            <img class="sale" src="images/buttons/sale.png" alt="item on sale">
+            <img class="img small" src="images/jacket-voss2.jpg" alt="men's blue voss jacket" >
+            <div class="jacket-title"><h3>Voss Jacket</h3></div>
+          </a>
+          <img class="like-icon" src="images/icons/like.svg" alt="add to favorites">
           <div class="rating"><img src="images/buttons/rating-edge.svg" alt="rating"></div>
           <div class="colors"><img src="images/buttons/colors2.svg" alt="available colors"></div>
           <div class="price dropped">USD 54 <s>USD 79</s> </div>
         </div>
         <div class="box-1">
-          <img class="img small" src="images/jacket-forest2.jpg" alt="men's yellow city jacket" >
-          <div class="jacket-title"><h3>City Jacket</h3></div>
-          <div class="like-icon"><img src="images/icons/like.svg" alt="add to favorites"></div>
+          <a href="forest-jacket.html">
+            <img class="img small" src="images/jacket-forest2.jpg" alt="men's yellow city jacket" >
+            <div class="jacket-title"><h3>City Jacket</h3></div>
+          </a>
+          <img class="like-icon" src="images/icons/like.svg" alt="add to favorites">
           <div class="rating"><img src="images/buttons/rating2.svg" alt="rating"></div>
           <div class="colors"><img src="images/buttons/colors-voss.svg" alt="available colors"></div>
           <div class="price">USD 69 </div>