HTML/JavaScript Web Application Answers

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' ]

Time Converter from hours and minutes to seconds

Time Converter

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

Refer to the below image.

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.

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

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 p elements with class name error-message should have ids siteNameErrMsg and siteUrlErrMsg respectively
• The HTML unordered list element with the class name bookmarks-container should have the 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 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
• 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 container.
• 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.

Foundations Page

In this assignment, let's build a Foundations page by applying the concepts we learned till now. You can use the Bootstrap concepts as well.

Refer to the below image.

https://assets.ccbp.in/frontend/content/static-website/foundations-output-v2-img.png

Resources

Use the image given below.

• https://assets.ccbp.in/frontend/static-website/foundations-bg.png
• https://assets.ccbp.in/frontend/static-website/foundations-python-img.png
• https://assets.ccbp.in/frontend/static-website/foundations-javascript-img.png
• https://assets.ccbp.in/frontend/static-website/foundations-html5-img.png
• https://assets.ccbp.in/frontend/static-website/foundations-java-img.png

CSS Colors used:

Background color Hex Code values:

#ffffff

Text color Hex Code values:

#323f4b

#7b8794

Border color Hex Code values:

#cbd2d9

CSS Font families used:

• Roboto

Favorite Stores Page

In this assignment, let's build a Favorite Stores Page by applying the concepts we learned till now. You can use the Bootstrap concepts as well.

Refer to the below image.

https://assets.ccbp.in/frontend/content/static-website/favourite-stores-output-img.png

Note

Try to achieve the design as close as possible.

Resources

Use the image URLs given below.

• https://assets.ccbp.in/frontend/static-website/stores-img.png
• https://assets.ccbp.in/frontend/static-website/amazon-logo-img.png
• https://assets.ccbp.in/frontend/static-website/ikea-logo-img.png
• https://assets.ccbp.in/frontend/static-website/bewakoof-logo-img.png
• https://assets.ccbp.in/frontend/static-website/flipkart-logo-img.png

CSS Colors used:

Background color Hex Code values:

#894bca

#ffffff

Text color Hex Code values:

#f780c3

#ffffff

#323f4b

#7b8794

CSS Font families used:

• Bree Serif

In terms of content.1. what guidelines will you put out to guide the users on what and how they can contribute to the website ?
2. what mission statement will you use? what about a tagline? will you use one ?3. what section will you include?
4. will you upload forms such as : registration form, calendar of events , and list of artwork ? why or why not ?​

Create a simple mashup page that displays both the BBC news (https://www.bbc.com/news) and BBC Pidgin (https://www.bbc.com/pidgin) home pages. Your solution should be in a file p3.html. Note: your solution for this problem does not need to validate.