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
  • I need a small website that to where I need to interlink a CSS file into...

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

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

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

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

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

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

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