Gottfrids Munkar

Gottfrids Donuts Webshop

Welcome to Gottfrids Donuts Webshop, a simple e-commerce project where users can browse, add, and remove donuts from their cart. This project was created as part of a student assignment at Medieinstitutet, using JavaScript, HTML, and CSS.

The purpose of this project was to learn JavaScript while getting more familiar with HTML and CSS. The primary focus was to experiment with JavaScript through hands-on learning. Reflecting back, there are areas I would now approach differently, such the overall structure of the JavaScript code and refining some design choices. However, I'm proud of the end result, considering this is my first experience working with JavaScript.

Table of contents

• Project overview
  • Key features
  • Special e-comers rules
  • development timeline
  • Contributors
• Tools and tecnolegies
• Screenshots
• Links
• Thanks

Project Overview

The assignment was to develop an online platform for the fictional donut shop "Gottfrids Munkar." The project provided basic guidelines, allowing a lot of room for creativity in design and functionality, but we were given some requirements to implement:

Key features:

• Single-Page Application: The website operates as an SPA.
• Fully Responsive: The design is optimized for mobile, tablet, and desktop devices.
• Filtering Options: Users can filter products by rating, name, category, and price, making it easy to find their favorite donuts.

Special E-commerce Rules:

• Monday Discount: Customers get a 10% discount on the entire order before 10 AM on Mondays.
• Weekend Price Increase: On Fridays after 3 PM, Saturdays, Sundays, and Mondays before 3 AM, prices increase by 15%.
• Invoice Limitation: If the total order exceeds 800 kr, payment via invoice is disabled.
• Bulk Discount: Ordering 10 or more donuts of the same type grants a 10% discount on that product.
• Free Shipping: Orders with more than 15 donuts qualify for free shipping. Otherwise, shipping costs 25 kr plus 10% of the order total.
• Inactivity Reload: If the user is inactive for more than 15 minutes, the page reloads, and the user is notified.

Development Timeline

The entire project, including the design, planning, and implementation, was completed within a four-week timeframe.

Contributors

The site was designed and developed by Agnes Wilson. All images used were generated using Adobe Express (AI-based image generator).

Tools & Technologies

Adobe was used for designing the wireframe

• 

• Wireframe mobile // Wireframe desktop

Github pages were used to publish the page

• 

• Live page

Github was used for version control

• 

HTML(5) Vanilla JavaScript and Scss were the languages used

• 

Screenshots

Here are three screenshots showcasing the responsive design across mobile, tablet and desktop (in dark mode) devices:

Links

• Live page

Reports

• Lighthouse-report
• HTML validation
• CSS validation

screenshots

• Mobile
• Tablet
• Desktop in Dark Mode

Wireframes

• Wireframe mobile
• Wireframe desktop

Thanks

Thank you for taking the time to read through this page!

Connect with me!

• Agnes github-profile
• Agnes LinkedIn

test :) test