Question

Langauges: HTML,CSS, AngularJS

8. Define two color schemes for your page. That is, choose 3 different elements, and give them all the same background color (1 scheme is 1 color, the other scheme is another) a. In the previous assignment, you were supposed to have written a function called changeBackground. Adapt this function and make it an Angular function called changleColorScheme b. This function should automatically toggle the color schemes (background colors) for the 3 elements you have chosen

0 0
Add a comment Improve this question Transcribed image text
Answer #1

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

Add a comment
Know the answer?
Add Answer to:
Langauges: HTML,CSS, AngularJS 8. Define two color schemes for your page. That is, choose 3 different...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions
  • Create a CSS-styled Table Page For this Assignment you will first read the appropriate chapters in...

    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...

    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...

    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...

    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...

    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" />...

    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...

    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...

    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...

    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...

    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....

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT