HTML/JavaScript Web Application Answers

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

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

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

String Starts or Ends with given String

Given an array

stringsArray of strings, and startString, endString as inputs, write a JS program to filter the strings in stringsArray starting with startString or ending with endString.

Quick Tip

You can use the array method filter() and logical operator OR ( || ).

function main() {

 const stringsArray = JSON.parse(readLine().replace(/'/g, '"'));

 const startString = readLine();

 const endString = readLine();

 /* Write your code here */

}

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)

Sample Input 1

JavaScript

S

Sample Output 1

Script

Sample Input 2

Language

air

Sample Output 2

Language

Trekking Kit

function Trekking(kit, item) {

 this.kit = kit;

 this.item = item;

}

function main() {

 const item = readLine();

 const trekkingKit = {

  ruckSackBag : true,

  clothes: ["Shirt", "T-Shirt/Full sleeves","Jeans"],

  firstAid: true,

  waterBottle: "2 liters",

  sunGlasses: "UV Protection",

  headTorch: true,

  medicines: true,

  footWear: "Non-skid",

  food: ["dry fruits", "nuts", "chocolate bars"]

 };

 /* Write your code here */

}

Sample Input 1

ruckSackBag

Sample Output 1

true

Sample Input 2

surfboard

Sample Output 2

false

i want code in between write code here

Unite Family

Given three objects

father, mother, and child, write a JS program to concatenate all the objects into the family object using the spread operator.Input

• The first line of input contains an object father
• The second line of input contains an object mother
• The third line of input contains an object child

Output

• The output should be a single line string with the appropriate statement as shown in sample outputs

Constraints

• Keys of the objects should be given in quotes

SampleInput 1

{'surname' : 'Williams', 'city': 'Columbia'}

{'dish': 'cakes'}

{'pet': 'Rocky'}

Sample Output 1

Mr and Mrs Williams went to a picnic in Columbia with a boy and a pet Rocky. Mrs Williams made a special dish "cakes"

Sample Input 2

{'surname' : 'Jones', 'city': 'Los Angeles'}

{'dish': 'puddings'}

{'pet': 'Peter'}

Sample Output 2

Mr and Mrs Jones went to a picnic in Los Angeles with a boy and a pet Peter. Mrs Jones made a special dish "puddings"

Array of Strings to UpperCase

Given an array

myArray of strings as an input, write a JS program to convert all the strings in myArray to uppercase.
Input

• The input will be a single line containing an array myArray

Output

• The output should be a single line containing an array of strings in uppercase

Sample Input 1

[ 'book', 'table', 'strawberries', 'lemons' ]

Sample Output 1

[ 'BOOK', 'TABLE', 'STRAWBERRIES', 'LEMONS' ]

Sample Input 2

[ 'my best friend', 'florida', 'winter' ]

Sample Output 2

[ 'MY BEST FRIEND', 'FLORIDA', 'WINTER' ]