Scribd
Upload
54 views4 pages

Module Speedtest

This document provides a series of tasks across 6 sections (A through E) related to frontend and backend development. Section A involves creating mockups for a messenger app. Section B involves creating loading animations and a digital timer. Section C involves canvas animation and image splitting/transition effects. Section D involves creating a PHP calendar and adding watermark functionality. Section E involves creating an XML to JSON converter and displaying chat analytics based on a provided JSON file.

Uploaded by

plg bk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
54 views4 pages

Module Speedtest

This document provides a series of tasks across 6 sections (A through E) related to frontend and backend development. Section A involves creating mockups for a messenger app. Section B involves creating loading animations and a digital timer. Section C involves canvas animation and image splitting/transition effects. Section D involves creating a PHP calendar and adding watermark functionality. Section E involves creating an XML to JSON converter and displaying chat analytics based on a provided JSON file.

Uploaded by

plg bk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

SPEEDTEST MODULE

CONTENTS
This module has the following files:
1. MODULE_SPEEDTEST.doc
2. MODULE_SPEEDTEST_MEDIA.zip

A1. Messenger
Draw 2 screen mockups for a messenger app with size 360x640.
1 screen - a list of dialogs (avatar, full name, message preview, new message button).
2 screen - chat with the user (avatar, full name, menu (three points), messages, text
field, send button)
All elements should exist.

A2. Landing Page


Create a landing page consisting of navigation bar, logo, menu with dropdown, hero
section with heading text, and call to action (CTA).

B1. Loading Animation


We want to create the following CSS loading animation.

B2. Digital Timer


Create a digital timer, time format is: 3 digit of seconds passed, and centiseconds
following it. It’s max value is: “999:59”. “Start timer“ button starts, “Stop timer” button
stops, “Reset timer” button stops and resets to 0 the timer.

020:01
C1. Canvas Animation
Draw a circular figure in a container of 320px height and 400px width using canvas.
When the browser window reloads, the circular object must move from left to right
continuously.

C2. Transition
You are given a picture that you need to cut into N cards after “Split Image” button
clicked, with dinamic input X and Y.
Each card should disappear animated when card is clicked.
Exampe X is 5 and Y is 3.
D1. PHP Calendar

1. You can create index.php using index.html


2. When you open the index.php, in the top area of calendar, current month and current
year should be shown and today's date should be highlited like index.html
3. If you click the left arrow button the previous month calendar should be shown.
4. If you click the right arrow button the next month calendar should be shown.

D2. Watermark
Given an image and a logo (png file), the web should output an image with a watermark
in the top right.

E1. XML2JSON Converter


Create a simple xml to json convertor using pure PHP(See the example.xml).
Screen shot:
E2. Chat Analytics
Provided a JSON file of user messages, you need to make the analytics of the
messages sent which is consist:
 Top 5 sent words
 Total messages sent
 Total messages received
 Average character length sent
 Average character length received
Example:

You might also like