Scribd
Upload
3 views3 pages

Webtech t1

The document outlines a course on Web Technology and Cyber Security, detailing learning objectives related to Java scripting, web development frameworks, cyber security defenses, and web page development. It includes practical assignments such as creating an animated progress bar, building a React component with real-time text processing, and writing CSS rules for styling web elements. Additionally, it presents code snippets for analysis and justification, emphasizing the application of learned concepts.

Uploaded by

vnair6915
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views3 pages

Webtech t1

The document outlines a course on Web Technology and Cyber Security, detailing learning objectives related to Java scripting, web development frameworks, cyber security defenses, and web page development. It includes practical assignments such as creating an animated progress bar, building a React component with real-time text processing, and writing CSS rules for styling web elements. Additionally, it presents code snippets for analysis and justification, emphasizing the application of learned concepts.

Uploaded by

vnair6915
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

21B12CS315 Web Technology and Cyber Security

CO1 Understand Advanced Java Scripting language and related web development concepts Understand (level 2)
Understand event-driven programming concepts and open-source web development
CO2 Understand (level 2)
frameworks
CO3 Examine defense mechanisms for cyber security Apply (Level 3)
CO4 Develop web pages using fundamental building blocks of web development. Apply (Level 3)

CO5 Analyze hacking techniques to attack websites and describe their countermeasures Analyze (Level 4)

1. Implement JavaScript code that creates an animated progress bar on a webpage. Initially, the progress
bar should be empty, and after every 500 milliseconds, it should gradually fill up until it reaches 100%. Once it
reaches 100%, it should reset back to 0% and start filling up again. [CO1, 4 Marks]

2. Build a function component in React that comprises of a Parent Component and a Child Component.
The parent component passes a default string “JIIT” to the child component. The child component has (i) an
input field which allows the user to type a text and (ii) displays the output text in real time. [CO2, 3+5 Marks]
a. The child component receives the data from the Parent and initially displays the default string sent by
the parent component when the app runs for the first time, as shown in the figure below. Use appropriate
method to keep track of the text state.

b. Define a function in child component that removes all the vowels whenever the user types any text in
real time. Every time the user enters a string, the child component removes all the vowels and the text gets
updated and is always displayed without a vowel. For instance, if the user wants to enter a string in the input
text “JIIT UNIVERSITY” then all vowels will be removed and displayed as below. If user enters a string
without vowel “CRYPT”, entire string will be displayed.

3. What would be the output of the following codes? Give suitable justification in each case. [CO1, 4
Marks]

1.
var myvar = 1; 2.
if (function compute() {}) { let myvar = 5;
myvar += typeof(compute); } setTimeout(() => {
console.log(myvar); console.log(' Waiting to print ');
myvar = 3;}, 2000)
while(myvar!=7) {
console.log(' Printing');
myvar++;}

4. Write a CSS style specification rule that would style [CO4, 4 Marks]
a) All paragraphs with a class of "content" to have a font size of 16 pixels and a line height of 1.5.
b) Make all hyperlinks (<a> tags) inside a navigation bar (<nav>) have a text color of green and no underline.
On hover, change the color to orange.
c) All images (<img> tags) with a class of "featured" to have a maximum width of 100% and a border of 2
pixels solid #333.
d) Style the first letter of every paragraph to be bold and have a font size of 24 pixels.

App.js

import React from "react";


import InputField from "./problem";

function App() {
return (
<div className="App">
<InputField mystring="JIIT" />
</div>
);
}

export default App;

Component. Js
import React, { useState } from 'react';

function InputField(props)
{
sname=props.mystring
const [text, setText] = useState(sname);
function handleInputChange(event) {
processedstring=event.target.value
let al = [ 'a', 'e', 'i', 'o', 'u', 'A', 'E', 'I', 'O', 'U' ];
let result = "";
for(let i = 0; i < processedstring.length; i++)
{

if (!al.includes(processedstring[i]))
{
result += processedstring[i];
}
}

setText(result);
}

return (
<div>

<p>Input text: {text}</p>


<input type="text" value={text} onChange={handleInputChange} />
</div>
);
}

export default InputField;


https://www.clientside.dev/blog/react-use-state-practice-exercises

You might also like