Question

In: Computer Science

You first needs to create a file called “myJS.js” in your project directory. Then, include the...

You first needs to create a file called “myJS.js” in your project directory. Then, include the AngularJS library and myJS.js in the header of the index.html page. Now, you need to define your angular application and a controller in this file such that the controller has the following variables with these initial values:

name = "Alex Cool";

faculty= "Faculty of Busienss and IT";

university = {name:"University of Ontario Institute of Technology",

url:"http://www.uoit.ca"};

contacts = {email:"[email protected]", phone:"xxx-xxx-xxxx"};

skills = [

{name: "Web Security",

text: "I am so great in web security."},

{name: "Typing with my toes",

text: "I can type 500 words in a minute with my toes!!!"} ];

prog_skills = ["C++", "Java", "Python"];

courses = [

{ name : "Web Programming",

number: "INFR 3120",

time:["Monday 2:10--3:30",

"Wednesday 2:10--3:30"],

instructor: "Amirali Abari"

{

name : "Web Programming",

number: "INFR 3120",

time:["Monday 11:10--12:30",

"Wednesday 11:10--12:30"],

instructor: "Amirali Abari"

{

name : "Best Programming",

number: "INFR 3120",

time:["Monday 2:10--3:30",

"Wednesday 2:10--3:30"],

instructor: "Amirali Abari"

}

];

You should edit the values of these variables to include your own information. Also, you need to slightly change the name of these variables when you are putting them in your Angular controller (Hint: remember $scope). Now modify the code of your index.html to use these variables. Some specific tasks follow:

Your name on top of the page, in contact section, and bottom of the page all come from the “name” variable defined above.

All contact Information about faculty, university, email address, and phone number should come from their relevant variables.

Your professional skills heading (i.e., the bold part) and their explanation should come from the “skills” variable. Hint: use ng-repeat.

Programming skills should come from the prog skills variable. Hint: use ng-repeat.

The content of course schedule table should come from the array of courses. Hint: use ng-repeat and also you might need to useto iterate over two rows.

Define events for your table such that if each header of column is clicked, then all rows are ordered by that column.

Index HTML

<!DOCTYPE html>
<html>
<head>
<title>Siba Lalik's Webpage</title>
<link rel="stylesheet" href="mycss.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

<div class="header">
Siba Lalik's Webpage
</div>
<div class="topnav">
<a href="#contact">Contacts</a>
<a href="#about">About me</a>
<a href="#programming">Programming</a>
<a href="#professional">Professional</a>
<a href="#schedules">Schedules</a>
</div>
<div class="row">
<div class="column half">
<img src = "IMG_5425.jpeg" ></td>
</div>
<div class="column half">
<h2 style="margin:0;" id="contact">Contacts</h2>
Hiba Malik<br>
Faculty of Busienss and IT <br>
<a href = "https://www.ontariotechu.ca">Ontario TechU</a><br>
Email address: [email protected] <br>
Phone number: 5472622926 <br>
</div>
</div>

<div class="row">
<div class="column side">
<h2 id="about">About Hiba</h2>
<p>
My name is Siba Lalik. I am in my second year at OTU. I tested positive for COVID in March and recovered, that is my story.
<br> It feels odd to write just one sentence when I have a whole webpage available to work with.
<br> I like to write, hike and paint.
<br> I own a cat. I am not very good at programming but I try.
</p>
</div>

<div class="column middle">
<h2 id="professional"> Professional Skills </h2>
<ol type= "i">
<li><strong>Operating Systems:</strong> I can download Windows on my MacBook with no assistance.</li>
<li><strong>Project Management:</strong> I put together the daily worksheets with everyone's tasks at work.</li>
<li><strong>Leadership:</strong> I always walk in front of everyone.</li>
<li><strong>Communications and Negotiation Expert:</strong> In short, I love to talk but not more than I love to be right.</li>
</ol>
</p>
</div>

<div class="column side">
<h2 id="programming"> Programming Skills </h2>
<ul style="list-style-type: square">
<li>C++</li>
<li>Java</li>
<li>Ruby</li>
<li>HTML</li>
</ul>
</p>
</div>

<div class="row">
<div class="column" style="width:100%">
<h2 id="schedules"> Course Schedules </h2>
<p>Here is the table of courses that I take this semester.</p>
<table>
<tr>
<th>Course name</th>
<th>Course number</th>
<th> Days and Time </th>
<th> Instructor </th>
</tr>
<td rowspan = "2"><strong> Web programming</td>
<td rowspan = "2"> INFR 3120</td>
<td rowspan = "1"> Monday 2:10--3:30</td>
<td rowspan = "2"> Amirali Abari</td>
</tr>
<tr>
<td rowspan = "1"> Wednesday 2:10--3:30</td>
</tr>
<td rowspan = "2"><strong> Statistics</td>
<td rowspan = "2"> INFR 1450</td>
<td rowspan = "1"> Wednesday 5:10--8:30</td>
<td rowspan = "2"> Amir Rastpour</td>
</tr>
<tr>
<td rowspan = "1"> Friday 2:10--5:10</td>
</tr>
<td rowspan = "2"><strong> Intro to Entrepreneurship</td>
<td rowspan = "2"> BUSI 1700</td>
<td rowspan = "1"> Friday 3:40--6:30</td>
<td rowspan = "2"> Jeffrey Overall</td>
</tr>
</table>
</div>

<div class="footer">
<p>Designed by Siba @ 2020</p>
</div>
</html>

Solutions

Expert Solution

<!DOCTYPE html>
<html>
<head>
<title>Siba Lalik's Webpage</title>
<link rel="stylesheet" href="mycss.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript" src="myJS.js"></script
</head>

<body ng-app="sampleApp" ng-controller="mainCtrl">
<div class="header">
    {{name}}'s Webpage
</div>
<div class="topnav">
    <a href="#contact">Contacts</a>
    <a href="#about">About me</a>
    <a href="#programming">Programming</a>
    <a href="#professional">Professional</a>
    <a href="#schedules">Schedules</a>
</div>
<div class="row">
  <div class="column half">
    <img src = "IMG_5425.jpeg" ></td>
  </div>
  <div class="column half">
    <h2 style="margin:0;" id="contact">Contacts</h2>
    {{name}}<br>
    {{faculty}} <br>
    <a href = {{university.url}}>{{university.name}}</a><br>
    Email address: {{contacts.email}} <br>
    Phone number: {{contacts.phone}} <br>
</div>
</div>


<div class="row">
<div class="column side">
<h2 id="about">About {{name}}</h2>
<p>
My name is {{name}}. I am in my second year at OTU. I tested positive for COVID in March and recovered, that is my story.
<br> It feels odd to write just one sentence when I have a whole webpage available to work with.
<br> I like to write, hike and paint.
<br> I own a cat. I am not very good at programming but I try.
</p>
</div>

<div class="column middle">
  <h2 id="professional"> Professional Skills </h2>
  <ol type= "i">
    <li ng-repeat="mySkill in skills"><strong>{{mySkill.name}}:</strong> {{mySkill.text}}</li>
  </ol>
</div>

<div class="column side">
  <h2 id="programming"> Programming Skills </h2>
  <ul style="list-style-type: square">
    <li ng-repeat="skill in prog_skills">{{skill}}</li>
  </ul>
  </p>
</div>

<div class="row">
<div class="column" style="width:100%">
<h2 id="schedules"> Course Schedules </h2>
<p>Here is the table of courses that I take this semester.</p>
<table>
  <thead>
    <tr>
      <th ng-click="orderByColumn='name'">Course name</th>
      <th ng-click="orderByColumn='number'">Course number</th>
      <th ng-click="orderByColumn='time'"> Days and Time </th>
      <th ng-click="orderByColumn='instructor'"> Instructor </th>
    </tr>
  </thead>
  <tbody ng-repeat="course in courses | orderBy: orderByColumn">
    <tr ng-repeat="(index,time) in course.time">
      <td ng-if="index===0" rowspan = "2"><strong> {{course.name}}</td>
      <td ng-if="index===0" rowspan = "2"> {{course.number}}</td>
      <td rowspan = "1"> {{time}}</td>
      <td ng-if="index===0" rowspan = "2"> {{course.instructor}}</td>
    </tr>
  </tbody>
</table>
</div>
  
<div class="footer">
<p>Designed by {{name}} @ 2020</p>
</div>
</body>
</html>

JS:

var app = angular.module('sampleApp', []);

app.controller('mainCtrl', function($scope) {
  $scope.name = "Alex Cool";
  $scope.faculty= "Faculty of Busienss and IT";
  $scope.university = {
    name:"University of Ontario Institute of Technology",
    url:"http://www.uoit.ca"
  };
  $scope.contacts = {
    email:"[email protected]", 
    phone:"xxx-xxx-xxxx"
  };
  $scope.skills = [
    {
      name: "Web Security",
      text: "I am so great in web security."
    },
    {
      name: "Typing with my toes",
      text: "I can type 500 words in a minute with my toes!!!"
    }
  ];
  $scope.prog_skills = ["C++", "Java", "Python"];
  $scope.courses = [
    { 
      name : "Web Programming",
      number: "INFR 3120",
      time:["Monday 2:10--3:30","Wednesday 2:10--3:30"],
      instructor: "Amirali Abari"
    },
    {
      name : "Web Programming",
      number: "INFR 3120",
      time:["Monday 11:10--12:30","Wednesday 11:10--12:30"],
      instructor: "Amirali Abari"
    },
    {
      name : "Best Programming",
      number: "INFR 3120",
      time:["Monday 2:10--3:30","Wednesday 2:10--3:30"],
      instructor: "Amirali Abari"
    }
  ];
  $scope.orderByColumn="";
});

Please take a look on the code and feel free to ask in comment section if you have any doubts. Thanks!

venereology answered 8 months ago

Next > < Previous

Related Solutions

In STS, create Java Project, called java_generics_yourNameLastname that; (Under source directory called, src, create a package...

In STS, create Java Project, called java_generics_yourNameLastname that; (Under source directory called, src, create a package csci3444.generics and put all code in it) Create a generic interface called “MyGenInterface” that takes 2 generic types K,V with below methods; public K getKey(); public V getValue(); Create a generic class called “MyGenClass” that implements “MyGenInterface” interface. has attributes “K key” and “V value” that can be inherited has a constructor that takes “K _key”, “V _value” inputs and initializes “key”, “value” attributes...

Go to your “Documents” directory; a) Create a file “file1” with the text “hello” in it;...

Go to your “Documents” directory; a) Create a file “file1” with the text “hello” in it; Provide command and screenshot. b) Create a hard link named “file2” linked to “file1”; c) Create a soft link named “soft1” linked to “file1”; create another soft link named “soft2” linked to “file2”. d) View information of the 4 files (what command should you use to produce output) – how do you verify which file is a hard link and which file is a...

Create a file named work.sh in your hw5 directory. Give this file read and write permission...

Create a file named work.sh in your hw5 directory. Give this file read and write permission (no execute permissions) for you alone. No other account should have any access privileges to this file. Change the permissions on the work.sh file so you have read and write permissions. Give everybody else, including the group, read permissions only. Give yourself read, write and execute permissions to the file work.sh. Give everyone else, including the group, execute permissions only. Create a directory named...

Write a program that creates a file called "data.dat" in the current directory. Prompt the user...

Write a program that creates a file called "data.dat" in the current directory. Prompt the user for five numbers, and write them, one at a time, on both the screen and into the file. Close the file, then open it again for reading only, and display the contents on the screen. Handle error conditions that may occur. Please Need this to be done in PERL. Thanks

The project requires you to implement 4 functions of your choice in a file called Utilities.java....

The project requires you to implement 4 functions of your choice in a file called Utilities.java. The functions may relate to statistics, graphics/animation, audio, text, or image applications. Deliverables (files that need to be submitted): 1. A word document that briefly describes the functions that were implemented and the API. 2. Utilities.java file with the 4 functions and a Test.java file that provides examples of using the functions in Utilities.java.

PYTHON - You are given a data.csv file in the /root/customers/ directory containing information about your...

PYTHON - You are given a data.csv file in the /root/customers/ directory containing information about your customers. It has the following columns: ID,NAME,CITY,COUNTRY,CPERSON,EMPLCNT,CONTRCNT,CONTRCOST where ID: Unique id of the customer NAME: Official customer company name CITY: Location city name COUNTRY: Location country name CPERSON: Email of the customer company contact person EMPLCNT: Customer company employees number CONTRCNT: Number of contracts signed with the customer CONTRCOST: Total amount of money paid by customer (float in format dollars.cents) Read and analyze the...

Using PyCharm, create a new Project lab8. Under lab8 create a new Directory exercise, then create...

Using PyCharm, create a new Project lab8. Under lab8 create a new Directory exercise, then create a Python file called nested.py, type the following: Test your code by putting the following at the bottom of the file: make_table_of_stars(2,3) (as shown in the code above). Run the file by right clicking in the code area of Pycharm, then choosing “Run nested”. Your output should be: *** *** (2 rows with 3 columns of stars). Reverse the 2 and 3. What happens?...

Problem 1 Create a new project called Lab7 Create a class in that project called ListORama...

Problem 1 Create a new project called Lab7 Create a class in that project called ListORama Write a static method in that class called makeLists that takes no parameters and returns no value In makeLists, create an ArrayList object called avengers that can hold String objects. Problem 2 Add the following names to the avengers list, one at a time: Chris, Robert, Scarlett, Clark, Jeremy, Gwyneth, Mark Print the avengers object. You will notice that the contents are displayed in...

Your code needs to do the following: Create a function called pigLatin that accepts a string...

Your code needs to do the following: Create a function called pigLatin that accepts a string of English words in the parameter sentence and returns a string of those words translated into Pig Latin. English is translated to Pig Latin by taking the first letter of every word, moving it to the end of the word and adding ‘ay’. For example the sentence “The quick brown fox” becomes “hetay uickqay rownbay oxfay”. You may assume the words in the parameter...

Demonstrate your grasp of the Unix file system by constructing a directory structure as follows: In...

Demonstrate your grasp of the Unix file system by constructing a directory structure as follows: In your home ( ~ ) directory, create a directory named “UnixCourse”. This directory will be used in the remaining assignments of this course, as well as this one. Several of the commands that you will issue in this course will examine files in this directory and, in some cases, send me a listing of those files or even copies of those files for grading...

Subjects