Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Andreas Christensen Frontend test #54

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
+4,479 −0
Open

Andreas Christensen Frontend test #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
914f53f
Add json, add loop + bootstap cards
AndreasChristensen89 Apr 13, 2022
c7e6732
Add bootstrap styling, add css file
AndreasChristensen89 Apr 14, 2022
38c72bf
Sort json file, add discount mark, add navbar
AndreasChristensen89 Apr 14, 2022
10b3fd5
Add footer, needs work
AndreasChristensen89 Apr 14, 2022
cee4ec1
Add additional styling and tweaks, member+discount
AndreasChristensen89 Apr 15, 2022
a200b35
Media queries finished
AndreasChristensen89 Apr 15, 2022
eb872e9
Add readme content
AndreasChristensen89 Apr 15, 2022
bceb420
Add scroll-to-top button
AndreasChristensen89 Apr 16, 2022
6894e7c
Add small css tweaks, scroll to top smooth
AndreasChristensen89 Apr 16, 2022
1c16d51
Add details to readme
AndreasChristensen89 Apr 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 67 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,70 @@ https://help.github.com/articles/fork-a-repo/

https://help.github.com/articles/using-pull-requests/


Solution by Andreas Christensen

# My "normal" solution
During my time as a student I would use Django (full-stack), meaning I would get the queryset from the backend in the view code, then use a template loop to display all the items. The JSON file would be imported into a datamodel that fits the data fields of the products, and I would then be able to generate queries from this.

# My posted solution
In my posted solution I'm using only front-end, so I'm not using Django functionality. I added the JSON file in the main directory. I'm doing most of the work in the Javascript file as I need to add the loop there, so I'm extracting the JSON contents into a data array which I can use in the loop. I'm using bootstrap, but I'm also adding my own styling on top for personal tweaks.

I decided that bootstrap cards would be fitting to display the products, and to this I'm adding a box-shadow on each card to make them look more appealing.

I have included a bootstrap navbar in the top using the same green color as the heading and the price. The content is the same as on the UniSport webpage. Also in the bottom a simple footer is present with links to standard social media and also my own GitHub profile.

The product information used in the cards are as follows:
- Discount percentage (if any), added to the top left corner.
- Member's only tag (if any), added to the top left corner. Comes second to discount (is present)
- Product image, top center of the card, takes up about half of the card.
- Product title, underneath image, centered, shortened at 40 chars
- Price - if discounted then price minus discount. Centered under title, green color that matches navbar/discount
- Old price - is added if discount is applied. Under price, text is muted and crossed out.
- Sizes available - if more than 45 chars then replaced by standard sentence. Sizes is bold, following text is normal.

The styling is simple and the products follow a rounded and centered theme. Each product has a light hover effect which moves it 5px up.

## HTML file
In the head of the HTML file I have included links to bootstrap, the css file, google fonts using Lato, font-awesome for icons and JQuery min version.

Boostraps navbar is at the top of the body.

A button element is under the navbar. It's position is fixed on the screen and can be placed anywhere.

Following the navbar comes a container which holds all the product content. At the top is a row with a col and a h1 header with the page title.

Underneath is another row with an intro text in a paragraph. The paragraph is centered.

Below is the row that holds all the cards. All cards are generate using JavaScript so the row is empty here except for the ID used for JavaScript.

Underneath is the footer.

At the bottom of the body is the script which references the JavaScript file. Additionally there is a script tag which holds the code for the back-to-top button, which is shown after user has scrolled 100px down, and which disappears at the top.

## JSON file
The JSON file is copied from the dataset used for this test:
https://www.unisport.dk/api/products/batch/?list=200776,223466,217763,217769,213591,223214,217706,222189,213590,222649,200777,225707,225811,198079,222191,226547,213576,223226,223002,217710,226546,217740,226350,190711,217758,226542,222824,222192,225701,226114,202481,225705,222316,233943,223191,222314,206016,226102,222822,213587

## CSS file
The CSS holds styling used for the different parts of the card as well as additional styling for bootstrap elements.

At the bottom media queries are used. Bootstraps own media queries are matched, but there are also my own breakpoints for the smallest screen sizes in order to cater to the smallest phones. The smallest width I have adjusted for is 240px.

## JS file
The JSON data first is sorted according to discount percentage and has the object with the highest discount first.

Loop is started for each product, each loop creates a card which is added to a div, which is then added to the product row.

Inside the card an info box is added in the top left corner which holds the potential discount tag and members only tag. The tags are added in the following if they exist or qualify.

Following this a product image is added. I'm using bootstraps image classes to handle media queries.

The card body is added.

In the card body I'm adding the title. The title is cut short and has "..." inserted if it exceeds 45 characters

If discount is present then discount is subtracted from price before being added. It is also rounded down to no decimals.
- I can see in the JSON file that there is a max price, a minimum price, and a recommended retail price. I decided to display the recommended retail price.

Sizes are then added. I'm adding one paragraph with sizes written in bold and with a new line. Following this I loop through the sizes of each object and add them. If it's the last item I'm not adding the comma and space.
125 changes: 125 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
<!DOCTYPE html>
<html lang="en" class="h-100">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="products.css">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<title>Unisport Fontend Test</title>
</head>

<body>
<nav class="navbar navbar-expand-lg navbar-light nav-bg text-white fixed-top">
<a class="navbar-brand" href="#">Unisport</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Alle Produkter <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Fodbold
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Fodboldstøvler</a>
<a class="dropdown-item" href="#">Fodboldtrøjer</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Træningsbukser</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Træningssokker</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Om Unisport</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

<button onclick="topFunction()" id="topBtn" title="Go to top">Top</button>

<div class="container">

<div class="row mt-5">
<div class="col-12 py-5 text-center">
<h1 class="h1 mx-auto rounded" id="products-heading">
Alle Produkter
</h1>
</div>
</div>

<div class="row">
<div class="col-10 mx-auto text-center">
<p class="lead">Her hos Unisport lægger vi en masse energi i vores udvalg.
Alle varer er godkendt af xxx, og lever alle op til strenge
skandinaviske krav omkring byggelse, komfort, og sikkerhed.</p>
</div>
</div>

<div class="row my-5 text-center" id="productRow">

</div>
</div>

<footer class="footer mt-auto py-3">
<p class="m-0 text-center text-white">Made by Dre</p>
<p class="m-0 text-center text-white">Follow me:
<a href="https://facebook.com" aria-label="Visit our Facebook page (opens in a new tab)" target="_blank"
rel="noopener"><i class="fab fa-facebook-square mx-2 text-white" aria-hidden="true"></i></a>
<a href="https://youtube.com" aria-label="Visit our Youtube channel (opens in a new tab)" target="_blank"
rel="noopener"><i class="fab fa-youtube-square mx-2 text-white" aria-hidden="true"></i></a>
<a href="https://github.com/AndreasChristensen89?tab=repositories"
aria-label="Visit my Github page (opens in a new tab)" target="_blank" rel="noopener"><i
class="fab fa-github mx-2 text-white" aria-hidden="true"></i></a>
<a href="https://instagram.com" aria-label="Visit our instagram page (opens in a new tab)" target="_blank"
rel="noopener"><i class="fab fa-instagram-square mx-2 text-white" aria-hidden="true"></i></a>
</p>
</footer>
<script src="products.js"></script>
<script>
// JS for the back-to-top button
//Get the button
var topButton = document.getElementById("topBtn");

// The button is shown when user scrolls down 100px
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
topButton.style.display = "block";
} else {
topButton.style.display = "none";
}
}

// When clicked scroll to the top of the document
function topFunction() {
window.scrollTo({top: 0, behavior: 'smooth'});
}
</script>
</body>

</html>
Loading