gh

UI/css/main.css

@@ -156,7 +156,8 @@ nav{
 }
 .profile_img{
 	padding-top: 10px;
-	background: white;
+    background: white;
+    height: 210px;
 }
 
 .profile_img > img{
@@ -323,6 +324,38 @@ article{
 	font-size: 20px;
 }
 
+.home::before{
+    position: absolute;
+    content: '\f015';
+    font-weight: 900;
+    font-size: 25px;
+    top:-5px;
+    right:200px;
+}
+
+.pos::before{
+    position: absolute;
+    content: '\f067';
+    font-weight: 900;
+    left:70px;
+    font-size:20px
+}
+
+.ord::before{
+    position: absolute;
+    content: '\f218';
+    font-weight: 900;
+    font-size: 20px;
+    left: 70px
+}
+.mads::before{
+    position: absolute;
+    content: '\f02c';
+    font-weight: 900;
+    left:70px;
+    font-size:20px
+}
+
 .grow {
 	transform: scale(1);
 }
@@ -339,7 +372,7 @@ article{
     justify-content: center
 }
 
-.tag-button > button{
+.tag-button > button, .postAds{
     margin: 60px 10px 10px 10px;
     padding:20px;
     font-size: 16px;
@@ -350,6 +383,11 @@ article{
     transition: all 0.25s linear;
 }
 
+.postAds{
+    margin:0;
+    margin-right:120px;
+}
+
 .tag-button > button:nth-child(1){
     background: red;
 }
@@ -429,6 +467,53 @@ article > p{
     margin: 7px
 }
 
+.loader {
+	border: 5px solid #f3f3f3;
+	border-radius: 50%;
+	border-top: 5px solid #3498db;
+	width: 20px;
+	height: 20px;
+	animation: spin 1s linear infinite;
+    position: absolute;
+    /* top: auto; */
+    /* bottom: auto; */
+    left: 0;
+    right:0;
+    margin: auto;
+	/* margin-top: -5px; */
+	/* padding:  */
+
+  }
+
+  @keyframes spin {
+	0% { transform: rotate(0deg); }
+	100% { transform: rotate(360deg); }
+  }
+
+
+  .connn{
+    display: flex;
+    align-items: center;
+    width: 100%;
+    /* position: relative; */
+  }
+  .loaderw {
+	border: 5px solid #f3f3f3;
+	border-radius: 50%;
+	border-top: 5px solid #3498db;
+	width: 40px;
+	height: 40px;
+	animation: spin 1s linear infinite;
+    position: absolute;
+    top: 250px;
+    /* bottom: 0; */
+    left: 0;
+    right:0;
+    margin: auto;
+	/* margin-top: -5px; */
+	/* padding:  */
+
+  }
 
 #main_bar{
     height: 91vh;
@@ -636,14 +721,15 @@ h3{
     width:400px;
     height:300px;
     border:2px solid grey;
-    padding: 3px
+    padding: 3px;
+    margin-right: 150px;
 }
 .car-model > label{
     display: flex;
-    margin: auto;
+    margin-left: 100px;
     margin-top: 20px;
     padding:10px;
-    width:25%;
+    width:20%;
     border: 2px solid slateblue;
     background: white;
     transition: all 0.25 linear ease;

UI/css/style.css

@@ -111,7 +111,7 @@ nav{
         rgba(0,0,0,0.8),
         rgba(96,73,203,0.8)
         ),
-        url(../img/34.jpg) no-repeat;
+        url(http://res.cloudinary.com/amoslv/image/upload/v1582802896/f2srootnaczaeav2agsv.jpg) no-repeat;
     background-size: cover;
 	display: flex;
 	align-items: center;
@@ -980,4 +980,4 @@ footer{
 		font-size: 16px
 	}
 
-}
+}

UI/index.html

@@ -269,8 +269,8 @@ <h3>24 Hour</h3>
 					  <label>Password</label>
 			   <!-- <input id="passwordAgain" type="password" required > -->
 					  <!-- <labe/l> Confirm Password</label> -->
-			   <input id="number" type="number" required >
-					  <label>Mobile Number</label>
+			   <input id="address" type="address" required >
+					  <label>Address</label>
 			   <button class="bnt"><div class="spinner loader"></div>Sign Up</button>
 			   </form>
 			</div>

UI/js/automart.js

@@ -0,0 +1,112 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-undef */
+
+const showBox = document.querySelector('.scrolling-ads');
+const input = document.querySelector('.iin');
+const post = document.querySelector('.postAds');
+const spinne = document.querySelector('.spinne');
+const spin = document.querySelector('.spin');
+const Bar = document.querySelector('#bar');
+const modelDetails = document.querySelector('.model-details');
+const profile = document.querySelector('.pross');
+
+
+modelDetails.style.display = 'none';
+showBox.style.display = 'none';
+Bar.style.display = 'none';
+let carStatus;
+const displayCars = (carObj) => {
+  carStatus = 'newest';
+  const {
+    id, car_image, manufacturer, model, status, price,
+  } = carObj;
+  // console.log(carObj);
+  if (status === 'sold') carStatus = 'solder';
+  const carHtml = `</a>
+  <a href="#section2" class="${carStatus} carss">
+  <article id = ${id} class="four">
+      <img src=${car_image} class="cars">
+      <h4>${manufacturer} ${model}</h4>
+           <p class="location icon">Nigeria</p>
+      <p>N${price}</p>
+  </article>
+  </a>`;
+
+  return carHtml;
+};
+
+const getCarDetails = () => {
+  const manufacturer = document.querySelector('.manufacturer').value;
+  const model = document.querySelector('.model').value;
+  const bodyType = document.querySelector('.body-type').value;
+  const price = document.querySelector('.price').value;
+  const state = document.querySelector('.state').value;
+  // const location = document.querySelector('.locationn').value;
+  const carObj = {
+    manufacturer, model, body_type: bodyType, price, state,
+  };
+  return carObj;
+};
+let carimage;
+
+input.addEventListener('input', async (e) => {
+  // console.log(profile);
+  profile.attributes.src.value = URL.createObjectURL(input.files[0]);
+  const fet = async (formData) => {
+    const object = {
+      method: 'post',
+      headers: new Headers({
+        token,
+      }),
+      body: formData,
+    };
+
+    const response = await fetch(`${devURL}upload`, object);
+    const statusCode = response.status;
+    const responseObj = await response.json();
+    return { responseObj, statusCode };
+  };
+
+  const formData = new FormData();
+  formData.append('photo', input.files[0]);
+  formData.append('files', 'photo');
+
+  spin.showModal();
+
+  carimage = await fet(formData);
+  // console.log(carimage);
+
+  spin.className = 'grow';
+
+  if (carimage.statusCode === 200) {
+    modelDetails.style.display = 'block';
+    spin.close();
+    // post.disable = false;
+  }
+
+  if (carimage.statusCode === 400) {
+    // modelDetails.style.display = 'none';
+    notify.textContent = 'Network Error, Please Reload';
+    spin.close();
+  }
+});
+// console.log(post.disable = true);
+post.addEventListener('click', async () => {
+  if (carimage.responseObj.data) {
+    const carDetails = getCarDetails();
+    const url = `${devURL}/car/`;
+    const postCar = await fetcher(url, 'POST', carDetails);
+
+    if (postCar.statusCode === 201) {
+      const urx = `${devURL}cars/${postCar.responseObj.data.id}`;
+      const { responseObj, statusCode } = await fetcher(urx, 'PATCH', { car_image: carimage.responseObj.data });
+      if (statusCode === 200) {
+        // console.log(responseObj);
+        window.location = 'main.html';
+      }
+    }
+    // if (statusCode === 400) {
+
+    // }
+  }
+});

UI/js/config.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable no-undef */
 
-const { authtoken } = localStorage;
+const { token } = localStorage;
 
 
 // const devURL = 'http://localhost:3000/api/v1/';
@@ -13,13 +13,15 @@ const fetcher = async (url, method, body = undefined) => {
     method,
     headers: new Headers({
       'Content-Type': 'application/json',
-      authtoken,
+      token,
     }),
     body: JSON.stringify(body),
   };
+  // console.log(object);
   const response = await fetch(url, object);
+  // console.log(response);
   const statusCode = response.status;
   const responseObj = await response.json();
-  console.log(responseObj);
+  // console.log(responseObj);
   return { responseObj, statusCode };
 };

UI/js/login.js

@@ -75,17 +75,18 @@ display.addEventListener('click', async (event) => {
       display.classList.add('effect');
       display.classList.remove('uuu');
     }
-    
+
     if (checker && !submitFlag) {
       const url = `${devURL}user`;
       const { responseObj, statusCode } = await fetcher(url, 'POST', details);
 
       if (statusCode === 200) {
         add.classList.add('move-left');
         add.classList.remove('move-right');
-        userName.textContent = `${responseObj.data.firstName} ${responseObj.data.lastName}`;
+        console.log(responseObj);
+        userName.textContent = `${responseObj.data.first_name} ${responseObj.data.last_name}`;
         userEmail.textContent = `${responseObj.data.email}`;
-        image.attributes.src.value = 'img/avatar.png';
+        image.attributes.src.value = `${responseObj.data.profile_pic}`;
         detailss.style.opacity = '1';
         goBack.style.display = 'initial';
         spinner.style.display = 'none';
@@ -127,7 +128,9 @@ display.addEventListener('click', async (event) => {
       no.style.display = 'block';
       no.style.color = 'rgb(23, 148, 23)';
       const { token } = responseObj.data;
-      localStorage.setItem('authtoken', token);
+      localStorage = '';
+      localStorage.setItem('token', token);
+      localStorage.setItem('userDet', input[1].value);
 
       if (responseObj.data.email === 'admin@automart.com') {
         setTimeout(() => { window.location = 'admin.html'; }, 3000);
@@ -146,7 +149,6 @@ display.addEventListener('click', async (event) => {
     }
 
     if (!checker) {
-      console.log('im here');
       spinner.style.display = 'none';
       display.classList.add('effect');
       display.classList.remove('uuu');
@@ -181,4 +183,4 @@ window.addEventListener('load', () => {
   inputs.forEach((input) => {
     input.value = '';
   });
-});
+});