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...
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...
can you do this js and html question. ill give you the html and
js and css files just fix my error use if and else like what i did
dont use switch just fix my erorr.
<!DOCTYPE html>
<!-- Webpage HTML document for Lab 4.
Authors: Amirhossein Chinaei, Andriy Pavlovych
For: EECS 1012, York University, Lassonde School of Engineering
-->
<html lang="En">
<head>
<meta charset="UTF-8">
<!-- title for web page -->
<title> EECS1012: Lab 4 - Computational Thinking
</title>...
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 =...
WEB230 - JavaScript 1 Assignment 6a Use Events and DOM manipulation to create a playable Tic Tac Toe game. Do the following using JavaScript. Do not modify the HTML file. When you see this symbol: save and refresh the browser (this should happen automatically if you are using Brackets with Live Preview), then check your code to make sure it is working before you proceed. 1. Create two variables called "playerX" and "playero". Set them to the DOM element with...
Form Processing HTML
One of the most ubiquitous uses of JavaScript is validating form
data on the client side before it is submitted to the server. It is
done everywhere because it is fast and it gives you a great deal of
flexibility in how you handle errors insofar as the GUI is
concerned.
Attached is an image of some code I wrote (so Blackboard can't
mess it up). Some things to notice that will help you with the
lab....