Category Archives: Javascript Assignments

Collection of Javascript Assignments based on real projects that you will encounter in your experience as a javascript programmer.

Solve this assignment using the best javascript standards and coding guidelines and in  no time you will start feeling like an experienced javascript programmer.

Javascript Digital Clock

In this assignment you have to build a javascript digital clock that will keep displaying the current time in digital format ie. : 09:39:15 PM.

Javascript Digital Clock : Functional Requirement

The clock should functiona as below :

  • Show the current time from the users system in 12 hours format when the page is loaded
  • Keep updating time after every seconds
  • It should show AM / PM depending on the hours
  • Incase of hours/minutes/seconds less than 10, it should prepend ‘0’ before it. It will always appears like 00:00:00 AM

Javascript Digital Clock : Hints

You will make use of the following javascript concepts:

  • Events
  • Set Interval
  • Date Objects
  • If/else construct
  • Operators
  • Functions

Javascript Digital Clock : Planning the logic

YOu will need to perform the following tasks

  • Get the current time of the user system
  • Check if the hours is less than 12 than Append AM else Append PM at the end
  • Upate the seconds every second, Increment Minute if the second count reaches 60.
  • Increment Hours if the Minutes count reach 60
  • Reset Seconds and Minutes to 0 if it counts more than 60
  • Reset Hours to 12 if it reaches more than 13
  • Prepend 0 if the count of hours, minutes or seconds is less than 10
  • Finally display the clock on the page in any HTML element

Find this challenging? Give it a spin.

Trying solving the assignment using any of the online editors and send me an email if you need any help or feedback on your code.

Javascript pagination

In this assignment you have to build a javascript pagination that will help the users to navigate through different record sets.

Javascript pagination: Basic Functionality

This is how the pagination functionality will work :

  • Set the number of ‘recordset’ you want to display on the page
  • Load the items from an array. The array can consist of just the names of guest for now
  • The code should generate links to record sets depending on the total number of items in the array divided by recordset
  • For eg. if you have 90 records in the array and your recordset per page is set to 10, than it should generate 9 links with numbers 1 to 9
  • Clicking on each number should load the recordset accordingly for eg. if I click on number ‘5’ it should load recordset from 41-50
  • It should also apply class ‘active’ to the current recordset number

Javascript pagination: Advance Functionality

You can add a little smartness to the feature by adding the following functionality :

  • Generate ‘Next’ and ‘Previous’ links along with the numbers
  • Cliking on ‘Next’ and ‘Previous’ should switch to next and previous record set
  • It should also switch the active link while switching recordsets
  • Previous should only come when you are not on first recordset
  • Next should disappear when you are on last recordset
  • Finally generate a select element (dropdown) with number of pages and update the recordset when the user changes the number in this

Javascript pagination : Hints

You will have to make use of the following javascript concepts:

  • Events
  • Arrays
  • Functions
  • If/else construct
  • Loops
  • Functions
  • DOM Manipulation

Javascript pagination : Planning the logic

You will need to perform the following tasks

  • Read the items from the array and display the first recordset in the Div or Unordered list
  • Set counter for the current recordset.On load it should be 1.
  • Generate links for each record sets
  • Clicking on each link will update counter and refresh the recordset
  • Add class ‘active’ to the current recordset number.
  • Next and Previous will increment the counter and refresh the recordset. It will also update the active link in the pages
  • Populate the select(drop down) with the number of recordset
  • On change of drop update the recordset

Find this challenging? Give it a spin.

Trying solving the assignment using any of the online editors and send me an email if you need any help or feedback on your code.

Simple Javascript photogallery

In this assignment the programmers will develop a Simple Javascript photogallery to let users browse through different photos on your website.

Photo gallery is a basic need in any website or web based project. The project will help you utilize your basic logic and coding skills.

Simple Javascript photogallery Рrequirements

  • Generate the thumbnails from the photo details stored in a javascript or JSON object
  • Load the first photo by default
  • On clicking the thumb nails the respective image should load
  • On clicking on next/prev icons the next and previous image should load
  • If you are on the last photo, the next arrow should load the first image
  • If you are on the first image the previous arrow should load the last image

Continue reading