Merge pull request #13 from gudzsv/feature/work-together

Feature/work together

src/partials/work-together/userDataApi.js

@@ -0,0 +1,8 @@
+import axios from 'axios';
+
+export const sendUserDataApi = async ({ email, comment }) => {
+  const URL = 'https://portfolio-js.b.goit.study/api/requests';
+
+  const { data } = await axios.post(URL, { email, comment });
+  return data;
+};

src/partials/work-together/work-together.css

@@ -1,3 +1,159 @@
-.work-together {
-  background-color: darkcyan;
+@media only screen and (min-width: 1440px) {
+  .work-together .container {
+    padding-inline-start: 196px;
+  }
+}
+.title-work-together {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  max-width: 542px;
+  margin-block-start: 32px;
+  margin-block-end: 63px;
+}
+@media only screen and (min-width: 768px) {
+  .title-work-together {
+    margin-block-start: 80px;
+    margin-block-end: 18px;
+  }
+}
+.title-image {
+  width: 44px;
+  height: 44px;
+}
+@media only screen and (min-width: 768px) {
+  .title-image {
+    width: 70px;
+    height: 70px;
+  }
+}
+.submit-form {
+  margin-block-end: 63px;
+}
+@media only screen and (min-width: 768px) {
+  .submit-form {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 32px;
+    margin-block-end: 18px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .submit-form {
+    margin-block-end: 18px;
+    /* display: flex;
+    justify-content: space-between;
+    align-items: center; */
+  }
+}
+.input {
+  padding-block-start: 0;
+  padding-block-end: 20px;
+  margin-block-end: 16px;
+  outline: none;
+  width: 100%;
+  height: 44px;
+  border-bottom: 1px solid var(--Opacity_20);
+  color: var(--Main_text);
+  text-overflow: ellipsis;
+  transition: border-color var(--Animation_cubic);
+}
+@media only screen and (min-width: 768px) {
+  .input {
+    max-width: 245px;
+    margin-block-end: 0;
+  }
+}
+.input:nth-child(2) {
+  margin-block-end: 32px;
+}
+@media only screen and (min-width: 768px) {
+  .input:nth-child(2) {
+    margin-block-end: 0;
+  }
+}
+.input:hover,
+.input:focus,
+.input:active {
+  border-bottom: 1px solid var(--Opacity_60);
+}
+.input:user-valid {
+  border-color: var(--Success_message);
+}
+.input:user-invalid {
+  border-color: var(--Error_message);
+}
+@media only screen and (min-width: 1440px) {
+  .input {
+    max-width: 390px;
+  }
+}
+.send-btn {
+  width: 100px;
+  height: 100px;
+  border-radius: 100%;
+  background-color: var(--Button_text);
+  color: var(--Main_text);
+  transition: background-color var(--Animation_cubic);
+}
+.send-btn:hover,
+.send-btn:focus,
+.send-btn:active {
+  background-color: var(--Button_background);
+}
+@media only screen and (min-width: 768px) {
+  .send-btn {
+    width: 150px;
+    height: 150px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .send-btn {
+    margin-inline-start: 68px;
+  }
+}
+.contacts {
+}
+.contacts-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+@media only screen and (min-width: 768px) {
+  .contacts-list {
+    gap: 8px;
+  }
+}
+.contacts-item {
+  width: fit-content;
+  border: 1px solid var(--Opacity_20);
+  border-radius: 60px;
+  padding-inline-start: 12px;
+  padding-inline-end: 12px;
+  transition: border-color var(--Animation_cubic);
+}
+@media only screen and (min-width: 768px) {
+  .contacts-item {
+    padding-inline-start: 32px;
+    padding-inline-end: 32px;
+  }
+}
+.contacts-item:hover,
+.contacts-item:focus,
+.contacts-item:active {
+  border: 1px solid var(--Main_text);
+}
+.contacts-link {
+  display: flex;
+  align-items: center;
+  height: 37px;
+  font-size: 14px;
+}
+@media only screen and (min-width: 768px) {
+  .contacts-link {
+    height: 55px;
+  }
 }

src/partials/work-together/work-together.html

@@ -1 +1,63 @@
-<footer class="work-together">WORK_TOGETHER</footer>
+<footer class="work-together section-pb">
+  <div class="container">
+    <h2 class="title-work-together header-2">
+      <picture class="title-image">
+        <source
+          srcset="
+            /assets/img/work-togeter/image_tabl_desk_1x.webp 1x,
+            /assets/img/work-togeter/image_tabl_desk_2x.webp 2x
+          "
+          media="(min-width: 1440px)"
+        />
+        <source
+          srcset="
+            /assets/img/work-togeter/image_mobile_1x.webp 1x,
+            /assets/img/work-togeter/image_mobile_2x.webp 2x
+          "
+          media="(max-width: 1139px)"
+        />
+        <img
+          src="/assets/img/work-togeter/image_mobile_1x.webp"
+          alt="Man's photo"
+          width="70"
+          height="70"
+        />
+      </picture>
+      Let’s <span class="text-decoration-red"> work</span> together
+    </h2>
+    <form class="submit-form js-submit-form" autocomplete="off">
+      <input
+        type="email"
+        class="input"
+        name="userEmail"
+        id="user-email"
+        placeholder="[email protected]"
+        pattern="^\w+(\.\w+)?@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$"
+        required
+      />
+      <input
+        type="text"
+        class="input"
+        name="userComments"
+        id="user-comments"
+        placeholder="comments"
+        required
+      />
+      <button class="send-btn" type="submit">Send</button>
+    </form>
+    <address class="contacts">
+      <ul class="contacts-list">
+        <li class="contacts-item">
+          <a href="mailto:[email protected]" class="contacts-link"
+            >[email protected]</a
+          >
+        </li>
+        <li class="contacts-item">
+          <a href="tel:+3801111111111" class="contacts-link"
+            >+380 11 1111 11 11</a
+          >
+        </li>
+      </ul>
+    </address>
+  </div>
+</footer>

src/partials/work-together/work-together.js

@@ -1 +1,60 @@
-console.log('WORK-TOGETHER');
+import { sendUserDataApi } from './userDataApi';
+
+const STORAGE_KEY = 'formData';
+
+const formData = getFromLocalStorage() || {
+  userEmail: '',
+  userComments: '',
+};
+
+const form = document.querySelector('.js-submit-form');
+const [inputEmail, inputComments] = form;
+inputEmail.value = formData.userEmail;
+inputComments.value = formData.userComments;
+
+form.addEventListener('input', event => {
+  const { name, value } = event.target;
+  formData[name] = value;
+  setToLocalStorage(formData);
+});
+
+form.addEventListener('submit', onSubmit);
+
+async function onSubmit(event) {
+  event.preventDefault();
+  const { userEmail, userComments } = formData;
+
+  if (!userEmail || !userComments) {
+    return;
+  }
+
+  try {
+    const data = await sendUserDataApi({
+      email: userEmail,
+      comment: userComments,
+    });
+
+    // const { title, message } = data;
+    // TODO open modal window
+
+    resetData();
+  } catch (error) {
+    // izitoast
+    console.error(error);
+  }
+}
+
+// helpers
+function setToLocalStorage(value, key = STORAGE_KEY) {
+  localStorage.setItem(key, JSON.stringify(value));
+}
+function getFromLocalStorage(key = STORAGE_KEY) {
+  return JSON.parse(localStorage.getItem(key));
+}
+
+function resetData(key = STORAGE_KEY) {
+  localStorage.removeItem(key);
+  form.reset();
+  formData.userEmail = '';
+  formData.userComments = '';
+}