SourceCode:
<html ng-app="myapp">
<head>
<!-- Angular cdn -->
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Styling the html element -->
<style>
p{
width: 100%;
text-align: center;
}
pre{
width: 100%;
}
pre h1{
text-align: center;
}
button{
width: 100%;
height: 20%;
}
</style>
</head>
<!-- Declaring thecomtroller -->
<body ng-controller="myCtrl">
<!-- Calling the changeColorofP onclick event and assigning the
css stles -->
<p ng-style="myObjOfP" ng-click="changeColorofP(1)">
Click Me <br>
Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of
Lorem Ipsum.
</p>
<br><br>
<!-- Calling the changeColorofP onclick event and assigning the
css stles -->
<pre ng-style="myObjOfPre"
ng-click="changeColorofPre(1)">
<h1>Click Me</h1>
It is a long established fact that a
reader will be distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum is that it
has a more-or-less normal distribution of letters, as opposed to
using 'Content here, content here', making it look like readable
English. Many desktop publishing packages and web page editors now
use Lorem Ipsum as their default model text, and a search for
'lorem ipsum' will uncover many web sites still in their infancy.
Various versions have evolved over the years, sometimes by
accident, sometimes on purpose (injected humour and the
like).
It is a long established fact that a
reader will be distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum is that it
has a more-or-less normal distribution of letters, as opposed to
using 'Content here, content here', making it look like readable
English. Many desktop publishing packages and web page editors now
use Lorem Ipsum as their default model text, and a search for
'lorem ipsum' will uncover many web sites still in their infancy.
Various versions have evolved over the years, sometimes by
accident, sometimes on purpose (injected humour and the
like).
</pre>
<br><br>
<!-- Calling the changeColorofP onclick event and assigning the
css stles -->
<button type="button" class="btn btn-default"
ng-style="myObjOfButton" ng-click="changeColorofButton(1)">Click
Me</button>
<br>
<script>
//Intialising the angular app
var app = angular.module('myapp',[])
//Declaring the controller
app.controller('myCtrl',
function($scope){
//Declaring the
variables
var nump = 0
;
var numpre = 0
;
var numbutton =
0 ;
//Declaring the
functions
$scope.changeColorofP = function(num){
nump = nump + num;
//Checking the conditions andassigning the
styles rules
if (nump%2 == 0) {
$scope.myObjOfP = {
"color" : "white",
"background-color" : "coral",
}
}else{
$scope.myObjOfP = {
"color" : "white",
"background-color" : "GREENYELLOW",
}
}
}
//Declaring the function
$scope.changeColorofPre = function(num){
numpre = numpre + num;
//Checking the conditions andassigning the
styles rules
if (numpre%2 == 0) {
$scope.myObjOfPre = {
"color" : "white",
"background-color" : "coral",
}
}else{
$scope.myObjOfPre = {
"color" : "white",
"background-color" : "GREENYELLOW",
}
}
}
//Declaring the function
$scope.changeColorofButton = function(num){
numbutton =
numbutton + num;
//Checking the conditions andassigning the
styles rules
if (numbutton%2 == 0) {
$scope.myObjOfButton =
{
"color" : "white",
"background-color" : "coral",
}
}else{
$scope.myObjOfButton =
{
"color" : "white",
"background-color" : "GREENYELLOW",
}
}
}
});
</script>
</body>
</html>
OUTPUT

Langauges: HTML,CSS, AngularJS 8. Define two color schemes for your page. That is, choose 3 different...
I need a small website that to where I need to interlink a CSS file into the HTML file. I don't know to save the files to have to be able to run with the CSS attributes show up in the browser when I do click the "open with" after I click on the saved HTML file. Basically when I copy files from the internet, to see if the HTML and CSS would interlink and run, the HTML would run...
Create a CSS-styled Table Page For this Assignment you will first read the appropriate chapters in the textbook and then a create web page, for example called table.html, in your ubunix.buffalo.eduaccount just as you did in Home Page Assignment. Assignment Requirements Your new web page should utilize the following HTML tags and include the following: A <body> tag that uses an appropriate style value to change the background color of the web page. Appropriate <table>, <tr>, <th>, and <td> tags...
Can someone plz help me??? I would like a website that has to do with guitars or something to do with music, someone asked me what kind of website I would like to have and that would be awesome. The attributes to be included, are below. I need a small website that to where I need to interlink a CSS file into the HTML file. I don't know to save the files to have to be able to run with...
given below are the project description and their Html and css
files i need javascript according to the project and other
files!
WEB230 - JavaScript 1 Assignment 6b - Event Delegation Before starting, study the HTML and open it in a browser so that you understand the structure of the document. You will add functionality to perform several tasks in our shopping list app. Clicking the red "X" at the right of an item will delete that item. Clicking on...
Problems:
Develop a web page that allows a user to try out different text
and background color combinations by clicking buttons. Use
Javascript to implement the functionalities.
Below are two screen shots of the working application. Clicking
the buttons at the bottom changes either the foreground color or
the background color. The following descriptions are about the
details. Specifically, you have to implement:
An HTML file should include the following features (3
points)
Some texts (Anything you like)
Put the...
HTML / CSS
Content Requirements
Create a home page with the following elements and settings:
Set the background, font colors, and “theme” to match those used
in lab assignment #1 using an external css file; inline styling
should be used only where necessary to override styling from the
external css
H1 element, centered at the top of the page, with “Thank you for
choosing Your Company Name. . . “ text*
Div or other container with at least 5 sentences...
Code for the movies page:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="style.css"
/>
<title>Daniel's Movie Page</title>
</head>
<body>
<a href="hobbies.html">Hobbies</a>
<h1>Movies and Actors</h1>
<ol>
<li class="ol-list1">Gravity</li>
<li>Avenger</li>
<li>Marshal</li>
<li>Interstellar</li>
<li>Dark Knight</li>
<li>Superman</li>
</ol>
<ul>
<li class="ul-list1">Robet Downey jr.</li>
<li>Sharuk Khan</li>
<li>Ranbir Kapoor</li>
<li>Sidhhart Malhotra</li>
<li>Angela Joli</li>
<li>Leonardo DiCaprio/li>
</ul>
<h2>Favorite Movie</h2>
<p>
<b>Gravity:</b> The movie portrayed what happens to
an astronaut if he/she
is pushed away from spaceship.It was terrifying how much...
Fake News This exercise is about modifying the content of a page in your web browser using Javascript. As we have said, Javascript has access to the current page via the Document Object Model or DOM. In your browser, the variable document represents the current document and your code can use it to read and write to the current page. In this exercise we will use the developer tools Javascript console to write Javascript to access parts of the main...
i need help with this homework webpage and code too: The webpage must include: Global Structure Tags Text Tags Images Your first page must be named index.html Include a table within your site, challenge yourself to add a header in the table, and choose interesting border and/or cell formatting. Include a hyperlink within your site. Include an image in your site. Include a form in your site to demonstrate understanding of a variety of form components (the form does not...
NEED HELP with HTML with Javascript embedding
for form validation project below. I have my code
below but I'm stuck with validation. If anyone can fix it, I'd
really appreciate.
******************************************************************************
CODE:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project
Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Nice</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<script>
var textFromTextArea;
function getWords(){
var text =...