HTML/JavaScript Web Application Answers

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.

BOOK SEARCH:

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

Speed Typing Test:

Instructions:

• Add HTML container element with id speedTypingTest
• Add HTML paragraph elements with id timer, quoteDisplay and result
• Add HTML textarea element with id quoteInput
• Add HTML button elements with id submitBtn and resetBtn
• Add the Bootstrap component spinner

By following the above instructions, achieve the given functionality.

• When the page is opened
• Make a HTTP request to get a random quotation
• URL: https://apis.ccbp.in/random-quote
• Display the random quotation in the HTML paragraph element with id quoteDisplay
• Start the timer and display the time in seconds in the HTML paragraph element with id timer
• When a value is entered in the HTML textarea element with id quoteInput and the HTML button element with id submitBtn is clicked
• If the value entered in the HTML textarea element with id quoteInput is same as the quotation in the HTML paragraph element with id quoteDisplay
• The timer should be stopped and a success message should be shown in the HTML paragraph element with id result
• If the value entered in the HTML textarea element with id quoteInput does not match the quotation in the HTML paragraph element with id quoteDisplay
• The timer should be running and an error message should be shown in the HTML paragraph element with id result
• When the HTML button with id resetBtn is clicked
• Make a HTTP request to get a new random quotation
• Display the new random quotation in the HTML paragraph element with id quoteDisplay
• Reset the timer to 0 seconds and display the time in seconds in the HTML paragraph element with id timer
• Empty the HTML textarea element with id quoteInput
• Add loading status with Bootstrap component spinner while making an HTTP request.

String Starts or Ends with given String

Given an array

stringsArray of strings, and startString, endString as inputs, write a JS program to filter the strings in stringsArray starting with startString or ending with endString.

Quick Tip

You can use the array method filter() and logical operator OR ( || ).

Input

• The first line of input contains a string stringsArray
• The second line of input contains a string startString
• The third line of input contains a number endString

Output

• The output should be a single line containing an array of filtered strings

Sample Input 1

['teacher', 'friend', 'cricket', 'farmer', 'rose', 'talent', 'trainer']

t

r

Sample Output 1

[ 'teacher', 'farmer', 'talent', 'trainer' ]

Sample Input 2

['dream', 'player', 'read', 'write', 'trend']

p

d

Sample Output 2

[ 'player', 'read', 'trend' ]