Clicky

<henri>

Appearance

BID7 ​

Here's the main idea: "An auction site is looking to launch a website where users can add items to be bid on, and bid on items other users have put up for auction. When a new user joins the website, they are given 1000 credits to use on the site. They can get credits by selling items and use credit by buying items. Non-registered users can search through the listings, but only registered users can make bids on listings".

Product ​

Bid7 1Bid7 2Bid7 3Bid7 4

Design concept ​

The aim of this exercise was to practice the use of the Bootstrap CSS framework, in its pure form – although some SASS was utilised in order to customise the colour and shape of specific elements of the interface.

Style guide ​

Bid7 1

User stories ​

  • The client has specified the following requirements in the form of User Stories:
  • A user with a stud.noroff.no email may register
  • A registered user may login
  • A registered user may logout
  • A registered user may update their avatar
  • A registered user may view their total credit
  • A registered user may create a Listing with a title, deadline date, media gallery and description
  • A registered user may add a Bid to another user’s Listing
  • A registered user may view Bids made on a Listing
  • A registered user may use credit to make a Bid on another user’s Listing
  • An unregistered user may search through Listings

Tools and libraries ​

  • Adobe XD
  • HTML
  • Bootstrap
  • SASS
  • Vanilla Javascript
  • Noroff API

Code snippet ​

You gotta start somewhere. This was the first time I coded a carrousel-like image gallery from scratch. There are much better ways to achieve that, of course. It was a fun exercise nevertheless.

js
export function createGallery(listingData) {
  for (let i = 0; i < listingData.media.length; i++) {
    const buttonContainer = document.querySelector("#slider-buttons-container");
    const imageContainer = document.querySelector("#image-container");
    buttonContainer.innerHTML += `
        <button type="button" data-bs-target="#gallery-container" data-bs-slide-to="${i}" class="active"></button>
    `;
    imageContainer.innerHTML += `
        <div class="carousel-item active">
            <img src="${listingData.media[i]}" alt="Image of ${listingData.title}" class="d-block" style="width: 100%; height: 50vh; object-fit: cover;"/>
        </div>
    `;
  }
  if (listingData.media.length === 1) {
    const sliderButtons = document.querySelector("#slider-buttons-container");
    sliderButtons.style.display = "none";

    const sliderArrows = document.querySelector("#slider-arrows");
    sliderArrows.style.display = "none";
  }
}