Hong Kong Industrial University

Name : Ryan Dyson Darmawan

SID : 57883349

Colors used

1. Use of positioning scheme

  1. universal css - footer/header/navbar (default.css)
    • line: 107 - position: fixed; to anchor the back to the top button to the bottom of the page regardless of scrolling
    • line: 108, 134 - bottom: px; to make sure the back to the top button is always a certain amount of pixels away from the bottom of the browser
    • line: 109, 135 - right: px; to ensure the button is a certain amount of pixels from the right side of the browser
  2. home page (./css/home.css)
    • line: 9 - position: relative; to ensure the welcome block is positioned relative to the body tag
    • line: 26, 45, 56, 60, 61 to properly space out the welcome text that is above the blurred picture
    • line: 57, 60, 64 - transform: translate() to properly space out the text of welcome block
    • line: 124,144 - position: relative | absolute; was given to container of the carousell cards to make sure the cards dont shift when the animation is playing
    • line: 182, 189 - position: absolute; was given to the carousel cards when they are hovered over so that the cards do not shift when it get bigger when hovered.
  3. About page - (./css/about.css)
    • beside the page up button of which is just copy pasted from the default css, there are no significant use of position
  4. Apply page - (./css/apply.css & ./ccs/applyPrint.css)
    • line: 14 - position: relative was so that the heading of the form does not move or change regardless if the majors application form are expanded or not
  5. Visit page - (./css/visit.css)
    • no meaningful positioning was used
  6. Program page - (./css/program.css)
    • no meaningful positioning was used
  7. Contact - (./css/contact.css)
    • no meaningful positioning was used

2. CSS3 techniques

  1. universal css - footer/header/navbar (default.css)
    • line: 14-17 - background: gradient(); for the header background, a gradient was given through multiple lines of code for cross browser support (-moz for mozilla firefox, webkit for chrome and chromium based browsers)
    • line: 96-98 - background: gradient(); for the footing background, a gradient was given through multiple lines of code for cross browser support (-moz for mozilla firefox, webkit for chrome and chromium based browsers)
    • line: 55, 100 - border-radius: px; was used to give rounded corners to squares and rectangle.
    • line: 155 - border-radius: 100%; was used to make the circle for the back to the top button.
    • line: 64 - transform: skew(-10deg); was used to make the navigation buttons parallelograms.
    • line: 70 - transform: skew(10deg) !important; was used so that the text inside of the navigation button is not skewed, rather still upright.
    • line: 80-82 - text-shadow: ; & box-shadow: ; was used to give shadow when the navigation button is hovered over to give a slight 3d illusion of popping out. -webkit-box-shadow was also implemented for better multi browser support
    • line: 136-138 - text-shadow: ; & box-shadow: ; the same effect from above was also used for the back to the top button
    • line: 76, 114, 128 - transition: ; transition was used on the navigation buttons and back to the top button so that there is a smoother transition between state of objects.
    • line 6 - scroll-behavior: smooth; to give a smooth scroll up when the back to the top button is clicked.
  2. home page (./css/home.css)
    • line: 15 - background-image: url(); was used to give a background image to the welcome block.
    • line: 16 - filter: blur(); was used to give the welcome block background an appropriate amount of blur.
    • line: 17-19 - background-postion: ;,background-repeat: ;, background-size: ; was implemented so that the blurred bg image of the welcome block is properly cropped and position
    • line: 21 - clip-path: inset(): was used to make sure the blurred background does go overflow into other divs and containers of the page
    • line: 29, 44, 57, 61, 65 - transform: translate(); was given so that the heading and paragraph of the welcome block are properly positioned in the right place;
    • line: 130, 167 - transition: ; was given so that when hovered over, the blocks inside of the discipline carousel has a smooth transition.
    • line 129 - animation: ; to enable the sliding animation of the infinite carousel. do not to implement a perfect infinite carousel, javascript would need to be involved.
    • line 135 - animation-play-state: paused; to enable the pausing of the sliding carousel when the carousel is hovered over by the cursor.
    • line 192-199 - @keyframes slide{} is written to enable the previous animation syntax to function.
    • line 161 - transform: skew(-10deg); like the navigation buttons, skew was used for the carousel majors
    • line 180,186 - transform: skew(10deg) !important; simarly, this syntax was used to so that the text inside the majors carousell isnt skewed.
  3. About page - (./css/about.css)
    • line: 138 - transition:0.1s; was given so that when hovered over, the row of the table has a nice transition instead of instantly changing colors.
    • line: 134 - border-radius: 5px; was given to give the table header row nice rounded corners
  4. Apply page - (./css/apply.css & ./ccs/applyPrint.css)
    • line: 22-16 - background: gradient(); was given so that the heading of the application form has a nice gradient. similarly to before, multiple types of gradient is implemented so there cross browser support.
    • line: 17,26,38,88,104,148,164,208,225,313 - border-radius: px; was given to style multiple elements a slight rounded corner for aesthethic reasonings.
    • line: 44-45, 51-52, 62-63, 68-69, 74-75, 81-82, 129-130, 141-142, 189-190, 201,202 - border-bottom-left-radius & border-bottom-right-radius was given so that. the heading of the form, when hovered over, the bottom corners of the heading change slightly from rounded to not rounded. This is done for aesthethic reasons to sort of mimic the file explorer inside computers.
    • line: 39, 57, 92, 135, 152, 195, 212, 277, 285, 315 - transition: 0.1s; was used to give smooth transition between object states like hovered, active, etc.
  5. Visit page - (./css/visit.css)
    • line: 22 - transition: 0.1s; was used to give smooth transition between object states
    • line: 21,39,49,79,84,92 - border-radius:; was given to style multiple elements a slight rounded corner for aesthethic reasonings.
  6. Program page - (./css/program.css)
    • line: 65 - transition: 0.1s; was used to give smooth transition when the row of the table is hovered over.
    • line: 19,26,42,53 - border-radius:; was given to style multiple elements a slight rounded corner for aesthethic reasonings.
  7. Contact - (./css/contact.css)
    • line: 24 - transition: 0.1s; was used to give smooth transition when the row of the table is hovered over.
    • line: 20 - border-radius:; was given to style multiple elements a slight rounded corner for aesthethic reasonings.

3. how styles are grouped into style sheet(s)/embedded style

4. sources

5. Event Handler Setup

  1. with HTML
    • apply.html (line 147), apply.js (line 169)  -   < a id="table-reset" onclick="reset_clicked();">Reset </a>  -  function reset_clicked() {}
  2. with javascript
    • obj.event = function();
      • program.js (line 32) - window.onload() = function()
      • apply.js (line3 1) - window.onload = function () {}
      • apply.js (line 38) - bttn[i].onclick = function() {}
    • obj.AddEventListener('event', function());
      • program.js (line 21) - video.addEventListener('ended', function video_loop() {});
      • visit.js (line 4) - form.addEventListener('submit', function on_submit () {});
      • apply.js (line 53) - rank_button[i].addEventListener('click', () => {});

6. ES6 Features Implementation

  1. const
    • program.js (line 1&2), visit.js (line 1&2), apply.js(2-10)
    • in general, const was used for DOM selector variables. These variables are variables i dont want to change its value of hence i use const to make sure the values dont get updated/mutated.
  2. let
    • progam.js (line 6,7,20), visit.js (line 7,8,9,30), apply.js (line 11,12,37,39,50,52,54,55,56,58,82,103,104,112,113,114,127,132,151,152,153,156,157,172,180)
    • i used let in favor of var to make sure that the variable's scope did not overlap with other variables within the same block.
    • for example, when there are multiple nested loops. i could use for(let i=0) for the outer loops but also for(let i=0) for the inner loop without any errors.
  3. map
    • apply.js (line 12) - i used map in the apply.js to track the applied majors. this line is to declare data as a new Map.
    • apply.js (line 75) - data.set() was used to push an array of the applied major to data when an user click the 'rank of choice' button.
    • apply.js (line 82,179) - new Map([...data].sort((a,b) => {...})) was used to create a new map derived from data but with correctly ordered key in ascending order. This is because when a user click the 'rank of choice' button, the data map may have key that is out of order. For the map to be properly implemented in the html table, i needed to order the keys in ascending order.
    • apply.js (line 112,114,117) - some map methods like Array.from(data.keys()) was used here for creating and checking gaps in the table.
    • overall, i used map to record the applied majors in the apply page and then put them inside the html table according to the correct order of keys.
  4. Set & Class
    • i did not use set and class in my JS as i feel it would be unnecessary
Back to the top