HTML/JavaScript Web Application Answers

Capital and Country

The goal of this coding exam is to quickly get you off the ground with HTML select element

Use the below reference image

https://assets.ccbp.in/frontend/content/dynamic-webapps/capital-and-country-op.gif

Achieve the design with HTML, CSS, and functionality with JS

• When the capital name is changed in the HTML select element then the text content in the HTML paragraph element should be the country name of the selected capital.

Warning

Do not delete the prefilled code in JS.

Note

HTML option element should consist of selected as an attribute for the value newDelhi by default.

CCBP Login

The goal of this coding exam is to quickly get you off the ground with CCBP Login Page

Use the below reference image

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

Achieve the given functionality using JS

• When the HTML input element with the id name lost the focus,
• If its value is empty, the HTML paragraph element with the id nameErrMsg should have the error message as Required* else should have an empty string.
• When the HTML input element with the id password lost the focus,
• If its value is empty, the HTML paragraph element with the id passwordErrMsg should have the error message as Required* else should have an empty string.
• When the HTML button with attribute type submit is clicked
• If the value of HTML input elements with ids name and password are not empty then the text content in the HTML paragraph element with id resultMsg should be displayed as Login Success. Otherwise, it should be displayed as Fill in the required details.

Bike Search

The goal of this coding exam is to quickly get you off the ground with HTML search input element and Bootstrap spinner

Use the below reference image.

https://assets.ccbp.in/frontend/content/dynamic-webapps/bike-search-op.gif

Instructions

Add the id searchInput to the HTML input element

• Add the id searchResults to the HTML container element

Achieve the design with HTML, CSS, and functionality with JS

• When the page is opened or a value is entered in the HTML input element with id searchInput and press on Enter key
• Make an HTTP Request (GET method) using Fetch with URL https://apis.ccbp.in/city-bikes?bike_name=
• The value entered in the HTML input element with id searchInput should be the value for the query parameter of the given URL
• Add the loading status with the Bootstrap component spinner while making HTTP Request (GET method) as shown in the image.

Random Activity

The goal of this coding exam is to quickly get you off the ground with the DOM Manipulations.

Refer to the below image.

https://assets.ccbp.in/frontend/content/dynamic-webapps/random-activity-output.gif

Achieve the given functionality using JS.

• Make a HTTP request(GET method) using fetch with the URL
• https://apis.ccbp.in/random-activity to get a random activity.
• Add
• loading status with Bootstrap component spinner while making an HTTP request.

Keyboard Events

The goal of this coding exam is to quickly get you off the ground with Keydown event

Use the below reference image

https://assets.ccbp.in/frontend/content/dynamic-webapps/keyboard-event-op.gif

Achieve the given functionality using JS

• When the key is entered in the HTML input element with id userInput
• The value in the HTML span element with id keydownCounter should be Incremented
• The value in the HTML span element with id keydownCode should contain the key code of the latest key in the input element.

Favourite Place

The goal of this coding exam is to quickly get you off the ground with HTML radio input elements

Use the below reference image.

https://assets.ccbp.in/frontend/content/dynamic-webapps/favourite-place-op.gif

Achieve the design with HTML, CSS, and functionality with JS

• When the Submit button is clicked
• Text content in the HTML paragraph element should contain the value of the checked HTML radio input element.

Note

• The HTML radio input element with value Agra, should have checked atrribute by default.
• You can use HTML form element.

All syntaxes of Event Listeners

The goal of this coding exam is to quickly get you off the ground with All Syntaxes Of Event Listeners

Use the below reference image.

https://assets.ccbp.in/frontend/content/dynamic-webapps/all-syntaxes-of-event-listeners-op.gif

Achieve the given functionality using JS

• When the HTML Button with Inline event listener is clicked
• Text content in the HTML paragraph element with id messageshould be displayed as "Inline event listener".
• The content of paragraph element should be updated using javascript Inline event listener.
• When the HTML button with id onEventListenerBtn is clicked
• Text content in the HTML paragraph element with id messageshould be displayed as "onevent listener".
• The content of paragraph element should be updated using javascript onevent listener.
• When the HTML button with id addEventListenerBtn is clicked
• Text content in the HTML paragraph element with id messageshould be displayed as "addEventListener".

Showing loading text with setTimeout

The goal of this coding exam is to quickly get you off the ground with the setTimeout.

Refer to the below image.

https://assets.ccbp.in/frontend/content/react-js/showing-loading-text-with-setTimeout-op.gif

Achieve the given functionality using JS.

When the HTML button element is clicked

• The text content of the button should change to Loading... for 1 second.
• After 1 second the text content of the button should change to Show Loading for 1 sec.

HTML

<!DOCTYPE html>

<html>

 <head>

  </head>

 <body>

  <div class="text-center">

  <button id="button" class="button" >

    Show Loading for 1 sec 

  </button>

  </div>

 </body>

</html>

Hourly Stop Watch

The goal of this coding exam is to quickly get you off the ground with the clearInterval and setInterval.

Refer to the below image.

https://assets.ccbp.in/frontend/content/react-js/hourly-stop-watch-op.gif

Achieve the given functionality using JS.

The timer should be initiated at 0.

• When the HTML button element with the id
• startBtn is clicked, the timer should be started.
• When the HTML button element with the id
• stopBtn is clicked, the timer should be stopped.
• When the HTML button element with the id
• startBtn is clicked after the HTML button element with id stopBtn clicked, the timer should be resumed.
• Timer should reset to 00 minutes, 00 seconds after one hour.

Note

This is a one hour timer. The maximum time is one hour.

Clear Interval

The goal of this coding exam is to quickly get you off the ground with the clearInterval.

Refer to the below image.

https://assets.ccbp.in/frontend/content/react-js/clear-interval-op.gif

Achieve the given functionality using JS.

• The counter should be intially at 0.
• When the HTML button element with the id
• clearCount is clicked,Clear the counter timer using the clearInterval method.

HTML

<!DOCTYPE html>

<html>

<head>

  </head>

<body>

  <div class="text-center">

    <p id="counter" class="paragraph">0</p>

    <button id="clearCount" class="clear-interval-button">Clear Interval</button>

  </div>

</body>

</html>

CSS

.clear-interval-button {

  border-radius: 10px;

  margin-top: 10px;

  padding: 15px;

  background-color: #0275d8;

  color: white;

  border: none;

  outline: none !important;

}

.paragraph {

  font-size: 50px;

}