Skip to content

Latest commit

 

History

History
101 lines (54 loc) · 4.3 KB

Javascript Assignment.md

File metadata and controls

101 lines (54 loc) · 4.3 KB

Javascript Assignment

Guidelines:

  1. This assignment is mandatory for everyone
  2. There will only be a single attempt for each exam and no deadline extension in case of assignments
  3. Any case of unfair means or plagiarism would lead to debarring in final placements without any further consideration.
  4. The images of the applications are only for reference, the app design/theme/colors can be different but all the components mentioned in the image of the apps should be present.

Problem 1:

Build a digital clock with start/stop function

Primary Objective:

Build a digital clock which should display current time and update the time after every second.

When the user clicks Stop Button the clock should stop updating the time. When the user clicks on the Start button later the clock should start updating the current time again as shown below:-

Learnings:

How to make use of setInterval and clearInterval method in Javascript

Problem 2:

Build random quote generator using Javascript or Jquery

Primary Objectives:

  1. The title section should show a greeting statement depending on time of the day:- Let's start our [timeOfDay] with a new quote

The three options to be shown in place of timeOfDay placeholder would be:-

  1. morning
  2. afternoon
  3. evening/night

For example if the user opens the page in the evening the title would be as shown in the screenshot:-

Note: The exact time slabs for the logic behind displaying morning, evening or afternoon can be your choice.

  1. The user should be shown a different quote after clicking the New Quote button with a new theme in the background.

For this create a collection of at least 10 quotes and display one of them randomly when the user clicks on the New Quote button.

Also create a collection of at least 10 colors from which one color is randomly chosen and applied in the background of the page. The same color is also applied to button and quote text.

Example:-

  1. UI before user clicks on New Quote button:
  2. UI after user clicks on New Quote button:

Learnings:

How to make use of DOM manipulation methods in Javascript/Jquery Resources:

The quote symbol before and after the quote can be taken from font-awesome library:

https://fontawesome.com/icons?d=gallery&q=quote

Tutorial on font awesome icons:- https://www.w3schools.com/icons/fontawesome_icons_intro.asp

Color codes for the background colors used in the sample design can be taken from material palette website:- https://www.materialpalette.com/

Problem 3:

Build a student’s virtual college id card generator using Javascript or Jquery

Objective:

A student should be able to upload details on the left side of the page including option to upload image initially:-

After entering details, once user clicks on generate card button, the right hand side should show a virtual card as shown in image below:-

Note: There is no need to store user details in backend or local storage. The task is to only extract the values from the form fields on the left and display them on the right side after button click.

Learnings

How to use HTML5 form elements, input file type and Javascript DOM manipulation

Resources

The icons before form inputs can be taken from font-awesome library: https://fontawesome.com/icons?d=gallery&q=quote

Tutorial on font awesome icons:- https://www.w3schools.com/icons/fontawesome_icons_intro.asp

Blue color shade used in sample design:- #4047F0

Id photo background gradient:- linear-gradient(to top, #4047F0, #8f94fb)