Scribd
Upload
28 views6 pages

Question - W19 - D2 Lab Coding Challenges

Uploaded by

Khushi Gupta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views6 pages

Question - W19 - D2 Lab Coding Challenges

Uploaded by

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

Day 2 Lab Coding Challenges

Problem 1.

The lab project aims to solve the following problems. These problems will help
you to apply logic in front-end development.

Create a vertical bar graph with the help of animation.

1. when the page is opened/refreshed, the bar should move from bottom to top, to
a predefined percentage. Mention the percentage name below. Create 3 such
graphs with 30%, 40% and 80%.
2. Below percentage print h1 with text “Bar Plot”
3. Position it in the center of the page.

Learning Objectives:

1. Apply the concepts learnt to develop the web pages.


2. Be as creative as possible.
3. Have a good understanding of the concepts.
Problem 2.
Imagine you are a front-end developer in “Spread The Message” News organization. Your
Organization provides Digital and Physical paper also. You are given a task to create a
News Web Page with various functionalities like, logIn Page, signUp Page, Support Page
(complaint form) and an Advertisement Form.

See the requirements below for every page and design and develop the application accordingly.

Home Page:

● Make sure that you will be able to access all the other pages from the Home Page.

● Create a Header Section and below that a horizontal navigation bar with news
categories and at the right end display Login and Sign Up options.

● Make the horizontal bar stick at top of the page when scrolling the page.

● On the header’s right end, display Support and Advertisement links.

● Divide your Page into various blocks for World News, Indian News, Regional News
and Business News.

● Horizontally align every news of each category.

● On Hovering to every news item, make sure the news title is visible, else hidden.

● At the end of the page provide at least 8 advertisements with videos/Images.

● Also create a Footer with Copyright information.

News Details:

● When clicked on a specific news item a new Page has to open with that news details.

● Create an aside bar with latest news and related news article links.

Login Page:

● Create username and password fields.


● Create a button to log in where you are redirected to the home page.

● With the help of the sign up link from the login page or from the sign up link from the
home page open sign up page.

Sign Up Page:

● In the SignUp Page take user data of First Name, Last Name, Email, Username,
Password, Re-enter Password.

● Create a button, when clicked redirect to the login page.

Support:

● This is the form where users can raise complaints for any issues which are related to
offline or online.

● The forms collect data of Name, Phone Number, Email Address, Home Address,
Digital Subscribers or not? and complaint description.

● Perform form validations.

● Create Reset and Submit buttons where data has to be accepted or reset accordingly.

Advertise Your Business:

● Create a page which collects details of the advertisee such as company name,
Person name, phone number, company address, type of advertisement, area of
advertisement on digital platform, Duration of the advertisement with start date and
end date, total cost, advertisement description and upload documents.

● Perform form validations.

● Include submit and reset buttons where data has to be accepted or reset accordingly.

Learning Objectives:
1. Develop a close to real life frontend application.
2. Strategize & Understand the development process.
3. Follow Clean Coding Practices.
4. Keep Experimenting.

Sample Outputs:

You might also like