HTML/JavaScript Web Application Answers

Write a javascript program that asks the user to enter his or her first name and then last name, and then

constructs, stores, and displays a third string consisting of the user’s last name followed by a comma, a

space, and first name. Use string objects and methods from the string header file. A sample run could

look like this:

Enter your first name: Paul

Enter your last name: Smith

Here’s the information in a single string: Smith, Paul

Write a javascript program that asks the user to enter up to 10 golf scores, which are to be stored in an array. You should provide a means for the user to terminate input prior to entering 10 scores. The program should display all the scores on one line and report the average score. Handle input, display, and the average calculation with three separate array processing functions.

Yoga Page

In this assignment, let's build a Yoga 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.

Home Page Background Image

• https://assets.ccbp.in/frontend/static-website/yoga-bg.png

Home Page Girl Image

• https://assets.ccbp.in/frontend/static-website/yoga-girl-with-headphones-img.png

Types of Yoga Page Images

• https://assets.ccbp.in/frontend/static-website/yoga-girl-without-headphones-img.png
• https://assets.ccbp.in/frontend/static-website/yoga-card1-img.png
• https://assets.ccbp.in/frontend/static-website/yoga-card2-img.png
• https://assets.ccbp.in/frontend/static-website/yoga-card3-img.png
• https://assets.ccbp.in/frontend/static-website/yoga-card4-img.png

CSS Colors used:

Background color Hex Code values:

#ffedcb

#132d84

#ffe2ab

Text color Hex Code values:

#323f4b

#fad693

#132d84

#253263

CSS Font families used:

• Roboto

Yoga Page

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

Refer to the below image.

Yoga Page

Note

• When clicked on the Get Started button on the Yoga Home Page, it must display the Types of Yoga Page.
• Try to achieve the design as close as possible.

Resources

Use the image URLs given below.

Home Page Background Image

• https://assets.ccbp.in/frontend/static-website/yoga-bg.png

Home Page Girl Image

• https://assets.ccbp.in/frontend/static-website/yoga-girl-with-headphones-img.png

Types of Yoga Page Images

• https://assets.ccbp.in/frontend/static-website/yoga-girl-without-headphones-img.png
• https://assets.ccbp.in/frontend/static-website/yoga-card1-img.png
• https://assets.ccbp.in/frontend/static-website/yoga-card2-img.png
• https://assets.ccbp.in/frontend/static-website/yoga-card3-img.png
• https://assets.ccbp.in/frontend/static-website/yoga-card4-img.png

CSS Colors used:

Background color Hex Code values:

#ffedcb

#132d84

#ffe2ab

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.

Gardening

We have a task to do Gardening.

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

Color Palette

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

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