HTML/JavaScript Web Application Answers

let's build a Book Search page Refer to the below image.

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

achieve 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 drop down
• Make HTTP GET request to fetch books based on the title entered, maximum number of results
• If search results not equal to zero, append the search results to the HTML container element with id searchResults
• If search results equal to zero, then "No results found"

Bg img:

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

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

Design Section

In this assignment, let's build a Design Section by applying the CSS concepts we learned till now.

Refer to the below images.

The following images illustrate all device sizes, from extra small to extra large.

Instructions:

• The page should have two different background images in devices below 768px and devices equal and above 768px.
• The HTML main heading element should have different font-sizes in devices below 768px and devices equal and above 768px.
• Add the given images as background images to the HTML container element.

Note

• Achieve the design using the CSS Flexbox layout and Media queries.

Resources

Use the image URL's given below.

• https://assets.ccbp.in/frontend/intermediate-rwd/design-section-sm-bg.png
• https://assets.ccbp.in/frontend/intermediate-rwd/design-section-lg-bg.png
• https://assets.ccbp.in/frontend/intermediate-rwd/design-section-bulb-img.png

CSS Colors used:

Background color Hex Code values:

#12022f

#ffffff

Text color Hex Code values:

#12022f

#7b8794

CSS Font families used:

• Roboto

Popular Blog

let's build a Popular Blog by applying the CSS concepts

The following images illustrate all device sizes, from extra small to extra large.

Instructions:

• The page should have two different background images for Marketing Strategies and Laptop cards in devices below 768px and devices equal and above 768px.
• Add the given images as background images for the cards.
• For the devices below 992px the heading should be centered and for the rest of devices it should align to the left.

Note

• Achieve the design using the CSS Flexbox layout and Media queries.

 Use the image URL's given below.

• https://assets.ccbp.in/frontend/intermediate-rwd/popular-blog-marketing-strategies-lg-bg.png
• https://assets.ccbp.in/frontend/intermediate-rwd/popular-blog-marketing-strategies-sm-bg.png
• https://assets.ccbp.in/frontend/intermediate-rwd/popular-blog-coffee-bg.png

CSS Colors used:

Background color Hex Code values:

#95b2ff

#ffffff

Text color Hex Code values:

#12022f

CSS Font families used:

• Roboto

Color Palette

In this assignment, let's build a Color Palette by applying the CSS concepts we learned till now.

Instructions:

• The text on each card should be centered vertically and horizontally.
• The colors should wrap into multiple lines based on the width available.

Note

• Achieve the design using the CSS Flexbox layout.

CSS Colors used:

Text Color Hex Codes Used:

#011e3f

#ffffff

Background Color Hex Codes Used:

#f87171

#fb923c

#fbbf24

#facc15

#a3e635

#4ade80

#34d399

#22d3ee

#38bdf8

#60a5fa

#818cf8

#c084fc

#e879f9

#f472b6

#fb7185

CSS Font families used:

• Roboto

String Slicing

Given two strings

inputString and subString as inputs, write a JS program to slice the inputString if it includes the subString. Slice the inputString starting from the subString to the end of the inputString.
Input

• The first line of input contains a string inputString
• The second line of input contains a string subString

Output

• The output should be a sliced string or inputString (if the inputString does not include the subString)

function main() {

 let inputString = readLine();

 const subString = readLine();

 /* Write your code here */

}

i want code in between write code here

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

• 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

Use this Background image:

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

Speed Typing Test

In this assignment, let's build a Speed Typing Test by applying the concepts we learned till now.

Refer to the below image.

https://assets.ccbp.in/frontend/content/dynamic-webapps/speed-typing-test-output.gif

String Slicing

Given two strings

inputString and subString as inputs, write a JS program to slice the inputString if it includes the subString. Slice the inputString starting from the subString to the end of the inputString.
Input

• The first line of input contains a string inputString
• The second line of input contains a string subString

Output

• The output should be a sliced string or inputString (if the inputString does not include the subString)

function main() {

 let inputString = readLine();

 const subString = readLine();

 /* Write your code here */

}

Example code to create a web page with HTML and CSS