gh-pg

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(https://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) {
+
+    // }
+  }
+});