HTML/JavaScript Web Application Answers

DOM Manipulations

Use the below reference image link:.

https://res.cloudinary.com/dfxicv9iv/image/upload/v1619259911/dom-manipulations-2_ax38mg.gif

Dynamically add the elements in HTML container element with id

myContainer to achieve the design.

Note

Use the checked property and classList.toggle method to achieve the functionality.

Resources

CSS Colors used:

#7a0ecc

#f2ebfe

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.