## Administrative details

### Client name:

IPD workshop helpers

### Website name:

Leoprint

Go to the website!
P1 requirements
P2 design
P4 testing

## The changes we have made

- ### Globally

  - The buttons are white until you hover over them because it looks better.
  - The buttons are more rounded in the edges and is aesthetically better looking.
  - h1 which is the big light orange text telling what side you are on stays fixed when you scroll on the site because it looks better.
  - We dont have a footer even though p2 said we would because we dont think we need one.
  - The fontsizes are changed from being defined in px to using a clamp function and rem sizing, so that they are more responsive, and allows people to have different font size settings on their devices.
  - We decided to make the menu through a javascript, menu.js, so the only repeated code in each html related to the menu bar is a div with id nav. This script also defines the burger menu.
  - The site you are on currently is marked blue in the navigation menu at the top of the page so the user knows where they are.
  - The menu changes from the top to a burger menu in the corner at 760px and not on mobile size like we said it would in p2 because this is when the text in the menu gets too close to each other.
  - We changed the visuals of the forms so that it looks better.
  - We changed the plan from doing all the css in one style.css file to do all global styles in this file, and do indivitual style sheets for each page to make the placement of content more tidy.

- ### Home page

  - Visual changes because of aesthetical evaluations we made. For instance the 3D in the backgound is bigger than the h1 on other pages because it looked so small if it is the same size.

- ### How to page

  - We added color to the links.
  - the links at the top sends you down to the section you want to read. This function was not in the original plan.
  - The h1 now says "How to" instead of "How" because it describes the page better.

- ### Booking

  - We changed some visuals so the page looks more aesthetically pleasing.
  - Now the calendar is at the center of the screen with the buttons on top. We also made it so when the screen is smaller than the width of the calendar it does not make a scroll on the entire body, but just scroll the calendar in x direction to view the printers that fall out of the view.
  - To avoid lots of repeating of table elemets in the calendar the calendar.js uses for loops to make the elemets.

- ### Gallery

  - We added two javascripts to this page. One to show and hide the form, when it's not needed and vice versa. Another to validate the form.
  - Also added some extra HTML pages, to represent the different inputted projects.
  - We did not add a javascript to make the add-project-form appear as a pop-up. Hiding it and showing it using the show-hide javascript provided a more seamless experience.

- ### Ask for help

  - On wide screens the studass to the left stays fixed when you scroll in the form.
  - we changed what you have to fill out in the form. Now you have to fill out last name and email in addition to what we planned in p2.

## Folder Structure

### List of files and folders:

- homepage.html
- calendar.html
- howTo.html
- help.html
- gallery.html
- project_1.html
- project_2.html
- project_3.html
- images/
  - leoLogo.png
  - projectImage1.jpg
  - projecImage2.jpg
  - ...
  - projectImageXX.jpg
- menu.js
- burgerMenu.js
- calendar.js
- help.js
- addProjectForm_Show-Hide.js
- addProjectForm_Form-Response.js
- style.css
- homeStyle.css
- howToStyle.css
- helpStyle.css
- calendarStyle.css
- galleryStyle.css

Emma filled her minimum requrements by making the gallery and project sites. She also was responsible for defining the fontsizes to be responsive. She also made the script that shows and hides forms for the add project part of the gallery site, and the booking on the calendar site.

Michelle made the ask for help site. In collaboration with Emma and Sigrid she made the script for form validation to all the three pages using forms.

Lisa made the page for directions on how to use the 3D printers. She also made the function in the menu script that marks the active site as blue in the menu so you can see which page you are on.

Sigrid made the booking and calendar site. She used a script to make all the empty table elements in the calendar to avoid repetition of the same elemet in the html file.

Mari made the home page. She also made the menu bar used on each page as well as the burger menu.

All group members made their own site responsive and helpen each other out when needed.

### Division of tasks:

Filename | Description | Completed it
--- | --- | ---
style.css | The code that styles the global styles to all the pages. | All
homepage.html | The homepage. | Mari
homeStyle.css | styling the home page. Placement of the elements. | Mari
calendar.html | The calendar shows bookings, and the button directs you to the popup of the booking form. | Sigrid
calendarStyle.css | Styling the calendar. | Sigrid
howTo.html | Guide on how to use the printers. | Lisa
howToStyle.css | Styling the how to page. | Lisa
help.html | Gives you contact information to the workshop helpers. Includes a form where you can send a message. | Michelle
helpStyle.css | Styling the contact page. | Michelle
gallery.html | A gallery with old 3D-printing projects. “Add new project” button at the top. Form for adding new project appears when you click the "add project button". | Emma
galleryStyle.css | styles the Gallery and the projects. | Emma
project_1.html | Shows how a project would look like. | Emma
project_2.html | Shows how a project would look like. | Emma
project_3.html | Shows how a project would look like. | Emma
Images | Needed pictures of old projects. | Emma
menu.js | Define the menu in a javascript so the code is not repeated in each html file. Also defines the burger menu and marks the active page blue. | Mari and Lisa
burgerMenu.js | When burger is clicked the script calls the css animation and the menu slides in from the side. | Mari
calendar.js | Makes the calendar elements. Shows todays date ad default. Updates to the chosen date. Changes the color of the box of selected time. | Sigrid
help.js | Validates all of the forms in this website. | Michelle, Sigrid and Emma
addProjectForm_Show-Hide.js | Shows and hides forms, when clicking certain buttons. | Emma