LeoPrint

Administrative details

Client name:

IPD workshop helpers

Website name:

Leoprint

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: