JustPaste
HomeCategoriesAboutDonateContactTerms of UsePrivacy Policy
JustPaste

Free online notepad — write and share instantly

Navigate

  • Home
  • Timeline
  • Categories

Info

  • About
  • Donate
  • Contact

Legal

  • Terms of Use
  • Privacy Policy

© 2026 JustPaste.app. All rights reserved.

Made with ♥ by JustPaste

CSS CODES | JustPaste.app
about 2 months ago0 views
💻Technology

CSS CODES 

EXP1
1) Display the dialog box using alert to display mutliline text.
<!DOCTYPE html>
<html>
<head>
    <title>EXP1</title>
</head>
<body>
<h2>Display Text using HTML Tags</h2>
<p><b>This is bold text</b></p>
<p><i>This is italic text</i></p>
<p><u>This is underlined text</u></p>
<script>
    alert("Hello!\nThis is multiline text\nJavaScript Alert Box");
</script>
</body>
</html>
OUTPUT
 

2) Display the text in document.write using HTML formatting tags.
<!DOCTYPE html>
<html>
<body>
<script>
document.write("<h1>Hello</h1>");
document.write("<p><b>This Is Client Side Scripting</b></p>");
</script>
</body>
</html>
OUTPUT

EXP 5
1)	Develop New Employee registration form with different form controls and validate it with ng-show.
<!DOCTYPE html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<h3>Employee Form</h3>
<form name="empForm">
Name: <input type="text" name="name" ng-model="name" required>
<span ng-show="empForm.name.$touched && empForm.name.$invalid" style="color:red;">
Required
</span><br><br>
Email: <input type="email" name="email" ng-model="email" required>
<span ng-show="empForm.email.$touched && empForm.email.$invalid" style="color:red;">
Invalid Email
</span>
</form>
</body>
</html>
OUTPUT
 

2)  Develop Student exam registration form and validate it with ng-controller directive
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<h3>Student Form</h3>
Name: <input type="text" ng-model="name"><br><br>
Roll: <input type="number" ng-model="roll"><br><br>
<button ng-click="submit()">Submit</button>
<p>{{msg}}</p>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope){
    $scope.submit = function(){
        if($scope.name && $scope.roll){
            $scope.msg = "Form Submitted";
        } else {
            $scope.msg = "Fill all fields";
        }
    };
});
</script>
</body>
</html>
OUTPUT
 

3) Develop a form with different controls and validate it onclick of submit button using ng-click
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<h3>Student Form</h3>
Name: <input type="text" ng-model="name"><br><br>
Roll: <input type="number" ng-model="roll"><br><br>
<button ng-click="submit()">Submit</button>
<p>{{msg}}</p>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope){
    $scope.submit = function(){
        if($scope.name && $scope.roll){
            $scope.msg = "Form Submitted";
        } else {
            $scope.msg = "Fill all fields";
        }
    };
});
</script>
</body>
</html>
OUTPUT
 


EXP 6
1)	Create new angular application and Display Hello <name> Set the name as your name
<!DOCTYPE html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<h3>Display Name</h3>
<div ng-init="name='Rutika'">
    Hello {{name}}
</div>
</body>
</html>
OUTPUT
 


2)	 Create new angular application and Set the first name and last name in separate property and display full name
<!DOCTYPE html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<h3>Full Name</h3>
<div ng-init="fname='Rutika'; lname='Sawant'">
    First Name: {{fname}} <br>
    Last Name: {{lname}} <br><br>
    Full Name: {{fname + ' ' + lname}}
</div>
</body>
</html>
OUTPUT
 



EXP 7
1)  Accept name in text field in the form and display it using angular
<!DOCTYPE html>
<html ng-app=””>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js”></script>
</head>
<body>
<h3>Enter Name</h3>
Name: <input type=”text” ng-model=”name”>
<h3>Hello {{name}}</h3>
</body>
</html>

OUTPUT


 



2)  Created a registration form. The user fills in the details and clicks on the submit button. On clicking on the submit button the details filled by the user are displayed using angular directives.
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="ctrl">
<h3>Registration Form</h3>
Name: <input type="text" ng-model="user.name"><br><br>
Email: <input type="email" ng-model="user.email"><br><br>
<button ng-click="show()">Submit</button>
<div ng-show="display">
    <h4>Details:</h4>
    Name: {{user.name}} <br>
    Email: {{user.email}}
</div>
<script>
var app = angular.module("app", []);
app.controller("ctrl", function($scope){
    $scope.user = {};
    $scope.display = false;
    $scope.show = function(){
        $scope.display = true;
    };
});
</script>
</body>
</html>
OUTPUT
 

EXP 8
1) Use angular filters and take input from user as first name and last name and display fullname in capital letter.
<!DOCTYPE html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
First Name: <input type="text" ng-model="fname"><br><br>
Last Name: <input type="text" ng-model="lname"><br><br>
Full Name: {{ (fname + ' ' + lname) | uppercase }}
</body>
</html>
OUTPUT
 




2) Use angular filters and Accept amount from user and display it in currency format.
<!DOCTYPE html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
Enter Amount: <input type="number" ng-model="amt"><br><br>
Currency: {{ amt | currency:'₹' }}
</body>
</html>
OUTPUT
 


3) Use angular filters and Display date in MM/DD/YYYY format.
<!DOCTYPE html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
Select Date: <input type="date" ng-model="today"><br><br>
Formatted Date: {{ today | date:'MM/dd/yyyy' }}
</body>
</html>
OUTPUT
 



EXP 9
1) Using angular event handling directives Change the button color after clicking it.
<!DOCTYPE html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<button ng-click="color='red'" style="background:{{color}}">
    Click Me
</button>
</body>
</html>
OUTPUT
	 

2) Using angular event handling directives Show count of key press in the text box.
<!DOCTYPE html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<input type="text" ng-keypress="count = count + 1">
<p>Key Press Count: {{count}}</p>
</body>
</html>
OUTPUT
 


3) Using angular event handling directives Try to display x and y coordinates in different mouse events.
<!DOCTYPE html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div style="width:300px;height:200px;border:1px solid black"
     ng-mousemove="x=$event.clientX; y=$event.clientY">
Move mouse here
<p>X: {{x}}</p>
<p>Y: {{y}}</p>
</div>
</body>
</html>
OUTPUT
 
EXP 11
1) Using suitable angular directives display 10 students data in the table format with different styles for odd and even rows.
<!DOCTYPE html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
.odd { background-color: lightgray; }
.even { background-color: lightblue; }
</style>
</head>
<body ng-init="students=[
{name:'A',age:20},{name:'B',age:21},{name:'C',age:22},
{name:'D',age:23},{name:'E',age:24},{name:'F',age:25},
{name:'G',age:26},{name:'H',age:27},{name:'I',age:28},
{name:'J',age:29}
]">
<table border="1">
<tr><th>Name</th><th>Age</th></tr>
<tr ng-repeat="s in students" ng-class="$odd ? 'odd' : 'even'">
<td>{{s.name}}</td>
<td>{{s.age}}</td>
</tr>
</table>
</body>
</html>
OUTPUT
 



2)  Using suitable angular directives display data for 10 employees and display odd rows with light green color
<!DOCTYPE html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-init="emp=[
{name:'Ram',sal:20000},{name:'Shyam',sal:25000},
{name:'Raj',sal:30000},{name:'Amit',sal:22000},
{name:'Neha',sal:27000},{name:'Pooja',sal:28000},
{name:'Riya',sal:26000},{name:'Kiran',sal:24000},
{name:'Vijay',sal:31000},{name:'Anil',sal:23000}
]">
<table border="1">
<tr><th>Name</th><th>Salary</th></tr>
<tr ng-repeat="e in emp" 
ng-style="$odd && {'background':'lightgreen'}">
<td>{{e.name}}</td>
<td>{{e.sal}}</td>
</tr>
</table>
</body>
</html>
OUTPUT
 

3) Using suitable angular directives display staff details for 10 staff and display even rows with light green color.
<!DOCTYPE html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-init="staff=[
{name:'S1',dept:'IT'},{name:'S2',dept:'HR'},
{name:'S3',dept:'Admin'},{name:'S4',dept:'IT'},
{name:'S5',dept:'HR'},{name:'S6',dept:'Admin'},
{name:'S7',dept:'IT'},{name:'S8',dept:'HR'},
{name:'S9',dept:'Admin'},{name:'S10',dept:'IT'}
]">
<table border="1">
<tr><th>Name</th><th>Dept</th></tr>
<tr ng-repeat="s in staff" 
ng-style="$even && {'background':'lightgreen'}">
<td>{{s.name}}</td>
<td>{{s.dept}}</td>
</tr>
</table>
</body>
</html>
OUTPUT
 

EXP 12
1) Write a program to display student details (name, roll no, marks) using a controller.
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="stuCtrl">
<h3>Student Details</h3>
Name: {{student.name}} <br>
Roll No: {{student.roll}} <br>
Marks: {{student.marks}}
<script>
var app = angular.module("app", []);
app.controller("stuCtrl", function($scope){
    $scope.student = {
        name: "Rutika",
        roll: 101,
        marks: 85
    };
});
</script>
</body>
</html>
OUTPUT
 
2) Write a program where one controller is nested inside another (Parent-Child).
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="parentCtrl">
<h3>Parent Controller</h3>
Message: {{msg}}
<div ng-controller="childCtrl">
    <h4>Child Controller</h4>
    Message: {{msg}}
</div>
<script>
var app = angular.module("app", []);
app.controller("parentCtrl", function($scope){
    $scope.msg = "Hello from Parent";
});
app.controller("childCtrl", function($scope){
    $scope.msg = "Hello from Child";
});
</script>
</body>
</html>
OUTPUT
 

EXP 13
1)Write a program to display a message using an external controller.
Index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="myCtrl">
<h2>{{msg}}</h2>
</body>
</html>

App.js
var app = angular.module("app", []);
app.controller("myCtrl", function($scope){
    $scope.msg = "Hello from External Controller";
});
OUTPUT
 

2)Write a program to create a table of students and apply orderBy filter to sort names.
<!DOCTYPE html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-init="students=[
{name:'Rahul',marks:80},
{name:'Amit',marks:75},
{name:'Neha',marks:90}
]">
<table border="1">
<tr><th>Name</th><th>Marks</th></tr>
<tr ng-repeat="s in students | orderBy:'name'">
<td>{{s.name}}</td>
<td>{{s.marks}}</td>
</tr>
</table>
</body>
</html>
OUTPUT
 
3) Write a program to display text in uppercase and lowercase using filters.
<!DOCTYPE html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
Enter Text: <input type="text" ng-model="text"><br><br>
Uppercase: {{text | uppercase}} <br>
Lowercase: {{text | lowercase}}
</body>
</html>
OUTPUT
 



EXP 14
1)Using react usestate hook Create a registration form that collects name, email, and password, and clears in puts after submission.
<!DOCTYPE html>
<html>
<head>
  <title>React Form</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function RegistrationForm() {
  const [formData, setFormData] = React.useState({
    name: "",
    email: "",
    password: ""
  });
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    alert("Registration Successful!");
    setFormData({ name: "", email: "", password: "" });
  };
  return (
    <div>
      <h2>Registration Form</h2>
      <form onSubmit={handleSubmit}>
        <input name="name" value={formData.name} onChange={handleChange} placeholder="Enter Name" />
        <br /><br />
        <input name="email" value={formData.email} onChange={handleChange} placeholder="Enter Email" />
        <br /><br />
        <input type="password" name="password" value={formData.password} onChange={handleChange} placeholder="Enter Password" />
        <br /><br />
        <button type="submit">Register</button>
      </form>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<RegistrationForm />);
</script>
</body>
</html>
OUTPUT
 



2)Using react usestate hook Demonstrate how to handle form data dynamically using an object to store multiple input fields
<!DOCTYPE html>
<html>
<head>
  <title>Dynamic Form</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function DynamicForm() {
  const [formData, setFormData] = React.useState({
    name: "",
    email: "",
    password: ""
  });
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value
    });
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    alert("Form Submitted!");
    setFormData({
      name: "",
      email: "",
      password: ""
    });
  };
  return (
    <div>
      <h2>Dynamic Form</h2>
      <form onSubmit={handleSubmit}>
        <input
          name="name"
          value={formData.name}
          onChange={handleChange}
          placeholder="Enter Name"
        />
        <br /><br />
        <input
          name="email"
          value={formData.email}
          onChange={handleChange}
          placeholder="Enter Email"
        />
        <br /><br />

        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
          placeholder="Enter Password"
        />
        <br /><br />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<DynamicForm />);
</script>
</body>
</html>
OUTPUT
 

EXP 16
1) Write a program to pass function argument into React component
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Child(props){
  return <button onClick={props.show}>Click</button>;
}
function App(){
  const msg = () => alert("Hello");
  return <Child show={msg} />;
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
</script>
</body>
</html>
OUTPUT
 

2) Implement the Life Cycle of React
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component {
  constructor(){
    super();
    console.log("Constructor");
  }
  componentDidMount(){
    console.log("Mounted");
  }
  render(){
    return <h2>Hello</h2>;
  }
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
</script>
</body>
</html>
OUTPUT
 
EXP 17
1) Write a React program to change the background color of a div when a button is clicked using the useState hook.
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App(){
  const [color,setColor] = React.useState("white");
  return (
    <div style={{background:color,height:"100vh"}}>
      <button onClick={()=>setColor("yellow")}>
        Change Color
      </button>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
</script>
</body>
</html>
OUTPUT
 

2) Write a React program to manage user input using the useState hook.
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App(){
  const [name,setName] = React.useState("");
  return (
    <div>
      <input onChange={(e)=>setName(e.target.value)} />
      <h2>Hello {name}</h2>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
</script>
</body>
</html>
OUTPUT
 
EXP 20
1) Write a React program to display a list of student names without using keys and using unique keys.
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App(){
  const students = ["A","B","C"];
  return (
    <div>
      <h3>Without Key</h3>
      {students.map(s => <li>{s}</li>)}
      <h3>With Key</h3>
      {students.map((s,i) => <li key={i}>{s}</li>)}
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
</script>
</body>
</html>
OUTPUT
 

2) write a React program to delete and update an item from a list using a key.
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App(){
  const [list,setList] = React.useState(["A","B","C"]);
  const del = (i) => {
    setList(list.filter((_,index)=>index!==i));
  };
  const update = (i) => {
    const newList = [...list];
    newList[i] = "Updated";
    setList(newList);
  };
  return (
    <div>
      {list.map((item,i)=>
        <li key={i}>
          {item}
          <button onClick={()=>del(i)}>Del</button>
          <button onClick={()=>update(i)}>Update</button>
        </li>
      )}
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
</script>
</body>
</html>
OUTPUT
 

EXP 22
1) Write a React program that demonstrates all three CSS approaches Inline, Stylesheet, and CSS Modules.
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <!-- External CSS -->
  <style>
    .para{ color: blue; }
    .module{ color: green; }
  </style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App(){
  return (
    <div>
      {/* Inline */}
      <h2 style={{color:"red"}}>Inline Style</h2>
      {/* External CSS */}
      <p className="para">External CSS</p>
      {/* CSS Module (demo) */}
      <h3 className="module">CSS Module Style</h3>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
</script>
</body>
</html>
OUTPUT
 

3)	Write a program that uses an external CSS file (App.css) to style a heading, paragraph, and button with different colors and padding.
Html
<!DOCTYPE html>
<html>
<head>
  <title>External CSS Example</title>
  <link rel="stylesheet" href="App.css"> <!-- External CSS -->
</head>
<body>

  <h1 class="heading">Welcome to HTML</h1>
  <p class="para">This is styled using external CSS file.</p>
  <button class="btn">Click Me</button>

</body>
</html>

App.css
<!DOCTYPE html>
<html>
<head>
  <title>External CSS Example</title>
  <link rel="stylesheet" href="App.css"> <!-- External CSS -->
</head>
<body>

  <h1 class="heading">Welcome to HTML</h1>
  <p class="para">This is styled using external CSS file.</p>
  <button class="btn">Click Me</button>

</body>
</html>
← Back to timeline