WIP: Mega Menu

My current project is to create a Multi-Course menu, which will allow students to switch between their courses. This is the desktop version of new IINLC menu. Next step is to make this menu responsive. Stay tuned…

White Board: Wire-frame (Rough)

menu-rough-wireframe

Working with product owner to create a quick wire-frame

Photoshop: Mock-up

menu3

After initial wire-frame and gathering requirements created high fidelity PS mock-up

Starting Responsive

1st Break Point: 1040px or 65em

Menu-Close

Menu-Open

On Github

Turned mock-up into working HTML, CSS and JavaScript. Mega Menu

See in Action

Go…

Advertisements

Arc Graph

On Github

https://github.com/SalmanMunawar/graph

Code


/**
 * Created by Salman Munawar on 1/4/2015.
 */
(function () {

    "use strict";

    var draw = {

        circle: function (params) {

            //Canvas Api:
            //arc(cx, y, radius, startAngle, endAngle, direction)

            /*
             Circle Function API
             draw.circle({

                     canvas: DOM Element,
                     size: Canvas size,
                     radius: Circle Size,
                     color: Circle color
             });
             */

            if (params.canvas) {

                var
                    canvas = params.canvas,
                    size = parseInt(params.size, 10) || 128,
                    radius = parseInt(params.radius, 10) || 64,
                    color = params.color || "#eeeeee",

                    xCoord = size / 2,
                    yCoord = size / 2,

                    ctx = canvas.getContext("2d");

                ctx.beginPath();
                ctx.arc(xCoord, yCoord, radius, 0, Math.PI * 2);
                ctx.fillStyle = color;
                ctx.fill();
                ctx.closePath();

            } else {

                console.error("Please select canvas");

            }

        },
        arc: function (params) {

            //Canvas Api:
            //arc(cx, y, radius, startAngle, endAngle, direction)

            /*
             Arc Function API
             draw.arc({
                     canvas: DOM element,
                     size: Canvas size,
                     radius: Arc Size,
                     color: Arc color,
                     percentage: Arc percentage,
                     width: Thickness of arc
             });
             */

            if (params.canvas) {

                var
                    canvas = params.canvas,
                    size = parseInt(params.size, 10) || 128,
                    radius = parseInt(params.radius, 10) || 64,
                    color = params.color || "#eeeeee",
                    width= params.width || 8,
                    percentage = params.percentage ? Math.PI * 2 * parseInt(params.percentage, 10) / 100 : 75,

                    xCoord = size / 2,
                    yCoord = size / 2,

                    ctx = canvas.getContext("2d");

                ctx.rotate(-Math.PI / 2);

                ctx.beginPath();
                ctx.arc(-xCoord, yCoord, radius, 0, percentage);
                ctx.strokeStyle = color;
                ctx.lineWidth = width;
                ctx.stroke();
                ctx.closePath();

            } else {

                console.error("Please select canvas");

            }//End if

        },
        score: function (element) {
            /*
             Score Function API

            Usage:
             JS
                draw.score(DOM Element);
             */

            if (element) {

                var paper = document.querySelector(element),
                    graphSize = parseInt(paper.width, 10),
                    radius = graphSize / 2;

                //Draw graph background
                this.circle({
                    canvas: paper,
                    size: graphSize,
                    radius: radius,
                    color: paper.getAttribute('data-background-color')
                });

                //Draw inner circle
                this.circle({
                    canvas: paper,
                    size: graphSize,
                    radius: radius * .75,
                    color: paper.getAttribute('data-core-color')
                });

                ////Draw arc
                this.arc({

                    canvas: paper,
                    size: graphSize,
                    percentage: paper.getAttribute('data-percentage'),
                    radius: (graphSize / 2) * .875,
                    width: (graphSize / 2) * .25,
                    color: paper.getAttribute('data-arc-color')

                });

            } else {

                console.error("Please select canvas");

            }//End if

        }//End Score

    }; //End Draw

    //Call draw.score function which will draw.circle twice and draw.arc once
    draw.score(".score");

}());

IIN Learning Center

My project at IIN. Started in April 2013 version 1 launched in May 2014. I was responsible for coding the front-end and design as well.

Highlights

  • Mockups Designed in Photoshop
  • Front-end Built with AngularJs
  • Powered by Drupal RESTFUL Api

Code Sample


//String Format
dashboard.filter('strFormat', function () {
/*
  //String library
  vm.text = '$1 of $2';

  //Controller
  vm.data.s1 = 3;
  vm.data.s2 = 10;

  //Template
  ng-bind-html="vm.text | 
  strFormat:{$1: vm.data.s1, $2: vm.data.s2}"

*/

 return function (input, replacements) {

   angular.forEach(replacements, 
   
   function (val, ind) {

        input = input.replace(ind, val);

    });

    return input;
  }

 });
//End String Format

Introducing iWebDraft.com. A Complete Site Resigned

This is my portfolio site for 2014. Created with Photoshop, HTML 5, CSS 3, Less.js, Javascript, and AngularJs. The blog and portfolio pages utiltize WordPress’s RESTFul API. The final code is minified and concatenated. In up coming posts I will discuss/share designs and code snippet from this project.

Highlights

  • Full Screen Layout
  • Driven by WordPress RESTFul Api
  • Built with AngularJs
  • Flat and Responsive Design

Branding

#0F5CBF#94CEF2#D90B0B#666666

Fonts

Oxygen

See it in action

launch project