HTML/JavaScript Web Application Answers

Book Search

In this assignment, let's build a Book Search page by applying the concepts we learned till now.

Refer to the below image.

https://assets.ccbp.in/frontend/content/dynamic-webapps/book_search_output.gif

Instructions:

• Add HTML input element with id searchInput inside an HTML container element
• Add HTML select element with id selectDisplayCount inside an HTML container element
• Add HTML container element with id searchResults

By following the above instructions, achieve the given functionality.

• When a value is entered in the HTML input element with id searchInput and press on Enter key
• Get title, imageLink, author (HTTP response with key search_results) by making HTTP request using fetch with URL https://apis.ccbp.in/book-store?title=kalam&maxResults=30
• Set imageLink in the HTML img element and set author in the HTML paragraph element
• When a value is entered in the HTML input element with id searchInput and an option is selected in the drop down
• Make a HTTP GET request to fetch the books based on the title entered and maximum number of results
• If search results not equal to zero, then append the search results to the HTML container element with id searchResults
• If search results equal to zero, then display "No results found"
• Add loading status with Bootstrap component spinner while making an HTTP request

Resources

Use this Background image:

https://assets.ccbp.in/frontend/dynamic-webapps/book-search-bg.png

CSS Colors used:

Text colors Hex code values used:

#323f4b

#ffffff

CSS Font families used:

• Roboto

Time Converter

In this assignment, let's build a Time Converter by applying the concepts we learned till now.

Refer to the below image.

https://assets.ccbp.in/frontend/content/dynamic-webapps/time-converter-output.gif

Instructions:

• The HTML input element for entering the number of hours should have the id hoursInput
• The HTML input element for entering the number of minutes should have the id minutesInput
• Add HTML label elements for HTML input elements with ids hoursInput and minutesInput
• The HTML button element should have the id convertBtn
• The HTML p element to display the converted time in seconds should have the id timeInSeconds
• The HTML p element to display the error message should have the id errorMsg

By following the above instructions, achieve the given functionality.

• When values are entered in HTML input elements with ids hoursInput and minutesInput, the HTML button with id convertBtn is clicked
• The converted time in seconds should be displayed in the HTML p element with id timeInSeconds
• The HTML p element with id errorMsg should be empty
• The HTML p element with id errorMsg should display an error message in the following cases
• When the HTML input element with id hoursInput is empty and convertBtn is clicked
• When the HTML input element with id minutesInput is empty and convertBtn is clicked
• When both the HTML input elements hoursInput and minutesInput are empty and convertBtn is clicked

Quick Tip

• timeInSeconds = ((hours) *60 + minutes) * 60

Note

• The values given for the HTML input elements with ids hoursInput and minutes
• Input should be positive integers.

Resources

Use this Background image:

• https://assets.ccbp.in/frontend/dynamic-webapps/time-converter-bg.png

CSS Colors used:

Text colors Hex code values used:

#f5f7fa

#000000

#ffffff

CSS Font families used:

• Open Sans

A parking garage charges a $2.00 minimum fee to park for up to three hours. The 

garage charges an additional $0.50 per hour for each hour or part thereof in excess of 

three hours. The maximum charge for any given 24-hour period is $10.00. Assume that 

no car parks for longer than 24 hours at a time. Write a script that calculates and 

displays the parking charges for each customer who parked a car in this garage 

yesterday. You should input from the user the hours parked for each customer. The 

program should display the charge for the current customer and should calculate and 

display the running total of yesterday's receipts. The program should use the function 

calculate-Charges to determine the charge for each customer. Use a prompt dialog to 

obtain the input from the user.

Split and Replace

Given three strings

inputString, separator and replaceString as inputs. Write a JS program to split the

inputString with the given separator and replace strings in the resultant array with the replaceString whose length is greater than 7.

• You can use the string method split()
• You can use the array method map()

input:

Javascript-is-amazing

-

programming

output:

programming is amazing

input:

the&lion&king

&

tiger

output:

the lion king

In this assignment, let's build a Book Search page by applying the concepts we learned till now.

Refer to the below image.

Instructions:

• Add HTML input element with id searchInput inside an HTML container element
• Add HTML select element with id selectDisplayCount inside an HTML container element
• Add HTML container element with id searchResults

By following the above instructions, achieve the given functionality.

• When a value is entered in the HTML input element with id searchInput and press on Enter key
• Get title, imageLink, author (HTTP response with key search_results) by making HTTP request using fetch with URL https://apis.ccbp.in/book-store?title=kalam&maxResults=30
• Set imageLink in the HTML img element and set author in the HTML paragraph element
• When a value is entered in the HTML input element with id searchInput and an option is selected in the drop down
• Make a HTTP GET request to fetch the books based on the title entered and maximum number of results
• If search results not equal to zero, then append the search results to the HTML container element with id searchResults
• If search results equal to zero, then display "No results found"
• Add loading status with Bootstrap component spinner while making an HTTP request

Resources

Use this Background image:

https://assets.ccbp.in/frontend/dynamic-webapps/book-search-bg.png

CSS Colors used:

Text colors Hex code values used:

#323f4b

#ffffff

CSS Font families used:

• Roboto

Bookmark Maker

In this assignment, let's build a Bookmark Maker by applying the concepts we learned till now.

Refer to the below image.

Instructions:

• The page should have HTML form element with id bookmarkForm
• The HTML form element with id bookmarkForm should have HTML input elements with ids siteNameInput and siteUrlInput
• The HTML form element with id bookmarkForm should have HTML button element with id submitBtn
• Add HTML label elements for HTML input elements with ids siteNameInput and siteUrlInput
• The HTML form element with id bookmarkForm should have HTML p elements with ids siteNameErrMsg and siteUrlErrMsg
• The page should have HTML unordered list element with id bookmarksList
• Each bookmark item should contain a HTML anchor element to navigate to the bookmarked site

Warning

• Please provide valid URL's to the siteUrlInput element

By following the above instructions, achieve the given functionality.

• When the HTML button element with the id submitBtn is clicked,
• If the values are entered in the HTML input elements with ids siteNameInput and siteUrlInput
• A new bookmark should be added to the bookmarksList as list item.
• If the siteNameInput value is empty,
• The HTML p element with id siteNameErrMsg should have error message
• If the siteUrlInput value is empty,
• The HTML p element with id siteUrlErrMsg should have error message
• When the visit button of a bookmark is clicked the site URL should open in a new tab.
• When the HTML input element with id siteNameInput is empty after changing the value inside the input
• The HTML p element with id siteNameErrMsg should have error message
• When the HTML input element with id siteUrlInput is empty after changing the value inside the input
• The HTML p element with id siteUrlErrMsg should have error message

Resources

CSS Colors used:

Background colors Hex code values used:

#2d3a8c

#ffffff

#f5f7fa

#21396c

Text colors Hex code values used:

#323f4b

#ffffff

#7b8794

#dc3545

Border Colors Hex code values used:

#cbd2d9

#e4e7eb

CSS Font families used:

• Roboto

Flats Page

In this assignment, let's build the Sunrise Avenue page by applying the concepts we learned till now. You can use the Bootstrap concepts and CCBP UI Kit as well.

Refer to the below images.

Flats List Page

https://assets.ccbp.in/frontend/content/static-website/flats-output.gif

Note

• When clicked on the Book Flat button on the Sunrise Avenue Home Page, it must display the Flats List Page.
• When clicked on each flat in Flats List Page, it must display the respective Flat Details Page.
• When clicked on Confirm button in Flat Details Page, it must display Sunrise Avenue Home Page
• When clicked on Back button in Flat Details Page, it must display Flats List Page
• Try to achieve the design as close as possible.

Resources

Use the image URLs given below.

Home Page Background Image

• https://assets.ccbp.in/frontend/static-website/flats-list-bg.png

Flats List Card Images

• https://assets.ccbp.in/frontend/static-website/flats-list-card1-img.png
• https://assets.ccbp.in/frontend/static-website/flats-list-card2-img.png
• https://assets.ccbp.in/frontend/static-website/flats-list-card3-img.png

Location Icon

• https://assets.ccbp.in/frontend/static-website/flats-list-location-icon-img.png

Flats Description Images

• https://assets.ccbp.in/frontend/static-website/flats-list-d1-img.png
• https://assets.ccbp.in/frontend/static-website/flats-list-d2-img.png
• https://assets.ccbp.in/frontend/static-website/flats-list-d3-img.png

CSS Colors used:

Background color Hex Code values:

#f19116

#222222

#ffffff

Text color Hex Code values:

#f19116

#7b8794

#ffffff

#0f0e46

#6c6b70

CSS Font families used:

• Bree Serif

JavaScript

Split and Replace

Given three strings

inputString, separator and replaceString as inputs. Write a JS program to split the

inputString with the given separator and replace strings in the resultant array with the replaceString whose length is greater than 7.

Quick Tip

• You can use the string method split()
• You can use the array method map()

Input

• The first line of input contains a string inputString
• The second line of input contains a string separator
• The third line of input contains a string replaceString

Output

• The output should be a single line containing the strings separated by a space

Sample Input 1

JavaScript-is-amazing

-

Programming

Sample Output 1

Programming is amazing

Sample Input 2

The&Lion&King

&

Tiger

Sample Output 2

The Lion King

Matrix Rotations

You are given a square matrix A of dimensions NxN. You need to apply the below given 3 operations on the matrix A.

Rotation: It is represented as R S where S is an integer in {90, 180, 270, 360, 450, ...} which denotes the number of degrees to rotate. You need to rotate the matrix A by angle S in the clockwise direction. The angle of rotation(S) will always be in multiples of 90 degrees.

Update: It is represented as U X Y Z. In initial matrix A (as given in input), you need to update the element at row index X and column index Y with value Z.

After the update, all the previous rotation operations have to be applied to the updated initial matrix.

Querying: It is represented as Q K L. You need to print the value at row index K and column index L of the matrix A. Input

The first line contains a single integer N.

Next N lines contain N space-separated integers Aij (i - index of the row, j - index of the column).

Next lines contain various operations on the array. Each operation on each line (Beginning either with R, U or Q).

-1 will represent the end of input.Output

For each Query operation print the element present at row index K and colum index L of the matrix in its current state.Explanation

For Input:

2

1 2

3 4

R 90

Q 0 0

Q 0 1

R 90

Q 0 0

U 0 0 6

Q 1 1

-1

Initial Matrix

1 2

3 4

For R 90, clockwise rotation by 90 degrees, the matrix will become

3 1

4 2

For Q 0 0, print the element at row index 0 and column index 0 of A, which is 3.

For Q 0 1, print the element at row index 0 and column index 1 of A, which is 1.

Again for R 90, clockwise rotation by 90 degrees, the matrix will become

4 3

2 1

For Q 0 0, print the element at row index 0 and column index 0 of A, which is 4.

For U 0 0 6, update the value at row index 0 and column index 1 in the initial matrix to 6. So the updated matrix will be,

6 2

3 4

After updating, we need to rotate the matrix by sum of all rotation angles applied till now(i.e. R 90 and R 90 => 90 + 90 => 180 degrees in clockwise direction).

After rotation the matrix will now become

4 3

2 6

Next for Q 1 1, print the element at row index 1 and column index 1 of A, which is 6.

output

3

1

4

6

Sample Input 1

2

1 2

3 4

R 90

Q 0 0

Q 0 1

R 90

Q 0 0

U 0 0 6

Q 1 1

-1

Sample Output 1

3

1

4

6

Sample Input 2

2

5 6

7 8

R 90

Q 0 1

R 270

Q 1 1

R 180

U 0 0 4

Q 0 0

-1

Sample Output 2

5

8

8

but got output:

5

8

5

Output one is success but output 2 is not success

Time Converter:

Instructions:

• The HTML input element for entering the number of hours should have the id hoursInput
• The HTML input element for entering the number of minutes should have the id minutesInput
• Add HTML label elements for HTML input elements with ids hoursInput and minutesInput
• The HTML button element should have the id convertBtn
• The HTML p element to display the converted time in seconds should have the id timeInSeconds
• The HTML p element to display the error message should have the id errorMsg

By following the above instructions, achieve the given functionality.

• When values are entered in HTML input elements with ids hoursInput and minutesInput, the HTML button with id convertBtn is clicked
• The converted time in seconds should be displayed in the HTML p element with id timeInSeconds
• The HTML p element with id errorMsg should be empty
• The HTML p element with id errorMsg should display an error message in the following cases
• When the HTML input element with id hoursInput is empty and convertBtn is clicked
• When the HTML input element with id minutesInput is empty and convertBtn is clicked
• When both the HTML input elements hoursInput and minutesInput are empty and convertBtn is clicked

Quick Tip

• timeInSeconds = ((hours) *60 + minutes) * 60

Note

• The values given for the HTML input elements with ids hoursInput and minutesInput should be positive integers.