HTML/JavaScript Web Application Answers

In this assignment, let's build a Speed Typing Test by using Html,CSS and java script

By following the above instructions,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 with id quote Display,Start the timer & display time in seconds in the HTML paragraph with id timer,When a value is entered in the HTML textarea element with id quoteInput & the HTML button element with id submitBtn is clicked.If the value entered in textarea element with id quoteInput is same as the quotation with id quoteDisplay. The timer should be stopped & success message should be shown with in id result.If the value entered in the HTML textarea element with id quoteInput does not match the quotation in the element with id quoteDisplay.The timer should be running & error msg should be shown in with id result.

Time Converter:

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

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

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

Time Converter:

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

we want HTML , CSS & JAVASCRIPT code are written in different different ,

Articles Page

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

Resources

Use the image URLs given below.

Categories Icons Images

• https://assets.ccbp.in/frontend/static-website/articles-technology-icon-img.png
• https://assets.ccbp.in/frontend/static-website/articles-science-icon-img.png
• https://assets.ccbp.in/frontend/static-website/articles-healthcare-icon-img.png
• https://assets.ccbp.in/frontend/static-website/articles-business-icon-img.png

Carousel Images (Technology)

• https://assets.ccbp.in/frontend/static-website/articles-technology-c1-img.png
• https://assets.ccbp.in/frontend/static-website/articles-technology-c2-img.png
• https://assets.ccbp.in/frontend/static-website/articles-technology-c3-img.png

Carousel Images (Science)

• https://assets.ccbp.in/frontend/static-website/articles-science-c1-img.png
• https://assets.ccbp.in/frontend/static-website/articles-science-c2-img.png

Given two boolean values

1. isGrassTrimmerFound and isWaterHosePipeFound as inputs, create three JS promises using async/await and try/catch blocks. For cutting the grass,

• resolve with "Grass Trimmed" text, if the isGrassTrimmerFound is true
• reject with "Grass Trimmer Not Found" text, if the isGrassTrimmerFound is false

1. For cleaning the garden,

• resolve with "Garden Cleaned" text

1. For watering the plants,

• resolve with "Watered Plants" text, if the isWaterHosePipeFound is true
• reject with "Water Hose Pipe Not Found" text, if the isWaterHosePipeFound is false

Input

• The first line of input contains a boolean isGrassTrimmerFound
• The second line of input contains a boolean isWaterHosePipeFound

Sample Input 1

true

true

Sample Output 1

Grass Trimmed

Garden Cleaned

Watered Plants

Sample Input 2

true

false

Sample Output 2

Grass Trimmed

Garden Cleaned

Water Hose Pipe Not Found

Search Item in a Mart

Given an array 

mart of objects in the prefilled code and categoryOfItem, item as inputs, create a JS promise,

resolve with "Item Found" text, if the 

categoryOfItem matches with the category and the corresponding items list includes the item

reject with "Category Not Found" text, if the 

categoryOfItem does not match with any catergory in the mart

reject with "Item Not Found" text, if the 

items list does not include item

Use async/await and try/catch blocks.

Quick Tip
You can use array methods find() and includes().
Input
The first line of input contains a string categoryOfItem
The second line of input contains a number item
Output
The output should be a single line string with the appropriate message
Sample Input 1
pulses
green gram
Sample Output 1
Item Found

Sample Input 2
detergents
tide
Sample Output 2
Category Not Found

Trekking Kit

Given an object

trekkingKit in the prefilled code and item item as an input, write a JS program to add the method isKitContains to the constructor function Trekking using the prototype. The method

isKitContains checks whether the trekkingKit contains the given item.

Quick Tip

The Object.getOwnPropertyNames() method gives an array containing the properties of the object.

Input

The input will be a single line containing a string

itemOutput

The output should be a single line containing a boolean value

Sample Input 1

ruckSackBag

Sample Output 1

true

Sample Input 2

surfboard

Sample Output 2

false

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

• When clicked on each category card, the page should display the List of Topics.
• Try to achieve the design as close as possible.