HTML/JavaScript Web Application Answers

HTML Placeholder Attribute

Placeholder Attribute.

Use the below reference image link:.

https://assets.ccbp.in/frontend/content/dynamic-webapps/ce-3-2-1-html-placeholder-attribute-op.png

using CSS Border Properties

Properties.

Use the below reference image link:

https://res.cloudinary.com/dfxicv9iv/image/upload/v1619085330/css-border-properties-output_a4ucou.png

Achieve the design by using CSS border

border-* properties. The * indicates the direction.Apply the border shorthand property with the width

5px, style solid, and hex color code #184b73 to the HTML button element with the class name border-shorthandResources

CSS Colors used:

#184b73

#ffffff

by using for...of loop.

Use the below reference image link:

https://assets.ccbp.in/frontend/content/dynamic-webapps/ce-3-1-3-for-of-loop-op.png.

Achieve the design using the

for...of loop to iterate over an array in the JS prefilled code.

USE;Dynamic Event Listeners

Achieve the given functionality.

• When the HTML button element with the id createBtn is clicked,
• Create an HTML main heading element with non-empty content and apply CSS property color using JS in an HTML container element with id myContainer

Resources

CSS Colors used:

Text colors Hex code values used:

#0000ff

USE;

Creating and Appending Elements Dynamically with JS.

Use the below reference image.

Achieve the given design using JS.

• Create an HTML main heading element dynamically and append it to the HTML container element with the id myContainer.

Resources

CSS Colors used:

Text colors Hex code values used:

#0000ff

• using Conversions and Conditional Statements.;
• When the HTML button element with the id signInBtn is clicked,
• If the username is empty then show the Please Enter Username message in the HTML paragraph element with the id messageText
• If the username is not empty and the password is empty then show the Please Enter Password message in the HTML paragraph element with the id messageText
• If the username and password are not empty then show the Welcome message in the HTML paragraph element with the id messageText

Achieve the given functionality using JS.

• When the HTML button element with the id decreaseBtn is clicked,
• If the count is odd then decrease the counter value by -1 as shown in the image.
• If the count is even then decrease the counter value by -2 as shown in the image.
• When the HTML button element with the id increaseBtn is clicked,
• If the count is odd then increase the counter value by 10 as shown in the image.
• If the count is even then increase the counter value by 5 as shown in the image.
• When the HTML button element with the id resetBtn is clicked,
• Set counter value as 0.

product of array items

given an array integers, write a JS program to get the product of the given integers in the array

sample input1

[1,2,3]

sample output1

1*2*3 = 6

"use strict";

process.stdin.resume();

process.stdin.setEncoding("utf-8");

let inputString = "";

let currentLine = 0;

process.stdin.on("data", (inputStdin) => {

 inputString += inputStdin;

});

process.stdin.on("end", (_) => {

 inputString = inputString

  .trim()

  .split("\n")

  .map((str) => str.trim());

 main();

});

function readLine() {

 return inputString[currentLine++];

}

function main() {

 let integers = JSON.parse(readLine());

 /* Please do not modify anything above this line */

 /* Write your code here and log the output */

}

Squares of array items

given an array myArray write a JS program to get the squares of each item in the given array

input1

[[1,2],[3,4][5,6]]

output1

[ [1,4],[9,6], [25, 36]]

"use strict";

process.stdin.resume();

process.stdin.setEncoding("utf-8");

let inputString = "";

let currentLine = 0;

process.stdin.on("data", (inputStdin) => {

 inputString += inputStdin;

});

process.stdin.on("end", (_) => {

 inputString = inputString

  .trim()

  .split("\n")

  .map((str) => str.trim());

 main();

});

function readLine() {

 return inputString[currentLine++];

}

function main() {

 let myArray = JSON.parse(readLine());

 /* Please do not modify anything above this line */

 /* Write your code here and log the output */

}

find the first value

given an array myArray of positive integers, write a JS program to find the first smallest integer divisible 2 and 3 Log the number or Undefined.in case no integer is found divisible by 2 and 3

input1

[51,18,15,12]

output1

[12]

input2

[41,29,17,19,31]

output2

undefined

"use strict";

process.stdin.resume();

process.stdin.setEncoding("utf-8");

let inputString = "";

let currentLine = 0;

process.stdin.on("data", (inputStdin) => {

 inputString += inputStdin;

});

process.stdin.on("end", (_) => {

 inputString = inputString

  .trim()

  .split("\n")

  .map((str) => str.trim());

 main();

});

function readLine() {

 return inputString[currentLine++];

}

function main() {

 let myArray = JSON.parse(readLine());

 /* Please do not modify anything above this line */

 /* Write your code here and log the output */

}