Merge pull request #40 from konstantin-it-lysenko/foqter_4

fix p
konstantin-it-lysenko · Oct 21, 2023 · 3135cb1 · 3135cb1
2 parents 1c41cee + 6f399fc
commit 3135cb1
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 30 deletions.
diff --git a/src/css/common.css b/src/css/common.css
@@ -23,6 +23,8 @@ h3 {
   --primary-white-color: #f4f4f4;
   --primary-color-c6cdd1: #c6cdd1;
 
+  --transition: 300ms linear;
+
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;

diff --git a/src/css/footer.css b/src/css/footer.css
@@ -1,13 +1,13 @@
 .footer {
-  background-color: #242424;
+  background-color: var(--primary-black-color);
 }
 .container {
   max-width: 375px;
   padding-top: 40px;
   padding-bottom: 20px;
 }
 .footer_logo_icon {
-  fill: #f4f4f4;
+  fill: var(--primary-white-color);
 }
 .footer_soc_list {
   margin-top: 20px;
@@ -22,23 +22,38 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: all var(--transition);
 }
 .footer_soc_icon {
-  fill: #f4f4f4;
+  fill: var(--primary-white-color);
+  transition: fill var(--transition);
 }
+
+.footer_soc_link:hover,
+.footer_soc_link:focus {
+  background-color: var(--primary-white-color);
+  border-color: var(--dark-green-color);
+  /* transform: translate(-1px, -1px); */
+  /* box-shadow: 0px 2px 5px 0px var(--primary-color-c6cdd1); */
+}
+.footer_soc_link:hover .footer_soc_icon,
+.footer_soc_link:focus .footer_soc_icon {
+  fill: var(--primary-black-color);
+  opacity: 0.8;
+}
+
 .footer_title {
   max-width: 365px;
   margin-top: 40px;
-  color: #f4f4f4;
-
+  color: var(--primary-white-color);
   font-size: 40px;
   font-style: normal;
   font-weight: 400;
   line-height: 48px; /* 120% */
   letter-spacing: 0.02em;
 }
 .footer_title_span {
-  color: #f4f4f4;
+  color: var(--primary-white-color);
   font-size: 40px;
   font-style: italic;
   font-weight: 400;
@@ -53,7 +68,7 @@
   gap: 20px;
 }
 .fotter_form_title {
-  color: #f4f4f4;
+  color: var(--primary-white-color);
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
@@ -64,9 +79,9 @@
   line-height: 18px;
   padding: 12px;
   border-radius: 30px;
-  border: 1px solid #f4f4f4;
+  border: 1px solid var(--primary-white-color);
   background-color: transparent;
-  color: #f4f4f4;
+  color: var(--primary-white-color);
 }
 .footer_form_btn {
   display: flex;
@@ -75,16 +90,16 @@
   justify-content: center;
   align-items: center;
   border-radius: 30px;
-  background: #f4f4f4;
-  color: #242424;
+  background: var(--primary-white-color);
+  color: var(--primary-black-color);
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 18px;
 }
 .footer_text {
   margin-top: 100px;
-  color: #c6cdd1;
+  color: var(--primary-color-c6cdd1);
   opacity: 0.9;
   font-size: 14px;
   font-style: normal;
@@ -104,7 +119,7 @@
 
 .footer_item_info {
   text-decoration: none;
-  color: #c6cdd1;
+  color: var(--primary-color-c6cdd1);
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
@@ -113,15 +128,21 @@
 }
 .footer_link_info {
   text-decoration: none;
-  color: #c6cdd1;
+  color: var(--primary-color-c6cdd1);
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 18px; /* 128.571% */
   letter-spacing: -0.02em;
+  transition: all var(--transition);
+}
+.footer_link_info:hover,
+.footer_link_info:focus {
+  color: var(--primary-white-color);
 }
+
 .footer_text_year {
-  color: #c6cdd1;
+  color: var(--primary-color-c6cdd1);
   opacity: 0.9;
   font-size: 14px;
   font-style: normal;

diff --git a/src/js/api-service/footer-api.js b/src/js/api-service/footer-api.js
@@ -0,0 +1,11 @@
+import { API_PROPS } from '../api/api';
+import axios from 'axios';
+const { BASE_URL, SUBSCR_EDPOINT } = API_PROPS;
+
+export function fetchPostApi(subscriptionData) {
+  return axios.post(`${BASE_URL}${SUBSCR_EDPOINT}`, subscriptionData, {
+    // headers: {
+    //   'Content-Type': 'application/json',
+    // },
+  });
+}
diff --git a/src/js/footer.js b/src/js/footer.js
@@ -1,8 +1,5 @@
-import { API_PROPS } from './api/api';
-import axios from 'axios';
 import Notiflix from 'notiflix';
-
-const { BASE_URL, SUBSCR_EDPOINT } = API_PROPS;
+import { fetchPostApi } from './api-service/footer-api';
 
 const formSubmit = document.querySelector('.js-footer-form');
 
@@ -22,29 +19,21 @@ function fetchSubscription(event) {
     email: email,
   };
 
-  axios
-    .post(`${BASE_URL}${SUBSCR_EDPOINT}`, subscriptionData, {
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    })
-
+  fetchPostApi(subscriptionData)
     .then(resp => {
       Notiflix.Notify.success(
         'Were excited to have you on board! 🎉 Thank you f…ep towards improving your fitness and well-being.'
       );
-      console.log('respons', resp);
     })
     .catch(error => {
       if (error.response.status === 409) {
         Notiflix.Notify.warning('Subscription already exists');
       }
-      console.dir(error);
     });
-
-  console.log(13456);
+  formSubmit.reset();
 }
 function isValidEmail(email) {
   const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
+
   return emailPattern.test(email);
 }