Augmented Reality

1import cv2
2import numpy as np
3
4cap=cv2.VideoCapture(2)                                         
5imgTarget=cv2.imread('F1racecars.jpeg')                         
6vidTarget= cv2.VideoCapture('F1racecars.mp4')
7               
8success, vidTarget = vidTarget.read()                           
9imgTarget=cv2.resize(imgTarget,(640,360))                       
10hT, wT, cT = imgTarget.shape   
11vidTarget=cv2.resize(vidTarget,(wT,hT))                        
12
13
14orb = cv2.ORB_create(nfeatures=1000)
15kp1, des1 = orb.detectAndCompute(imgTarget,None)
16
17detect = False
18fcount = 0
19
20
21while True:                                                     
22   success, imgWebcam= cap.read()                              
23   imgAug = imgWebcam.copy()
24
25   imgWarp = np.zeros((imgWebcam.shape[1], imgWebcam.shape[0],imgWebcam.shape[2]))
26   masknew = np.zeros((imgWebcam.shape[0], imgWebcam.shape[1],imgWebcam.shape[2]), np.uint8)
27   maskInv = np.zeros((imgWebcam.shape[0], imgWebcam.shape[1], imgWebcam.shape[2]), np.uint8)
28   Mergecamfeed =  np.zeros((imgWebcam.shape[0], imgWebcam.shape[1], imgWebcam.shape[2]), np.uint8)
29   ARfinal = np.zeros((imgWebcam.shape[0], imgWebcam.shape[1], imgWebcam.shape[2]), np.uint8)
30
31   if detect is False:
32      vidTarget.set(cv2.CAP_PROP_POS_FRAMES,0)
33      fcount =0
34   else:
35      if fcount == vidTarget.get(cv2.CAP_PROP_FRAME_COUNT, 0):
36         vidTarget.set(cv2.CAP_PROP_POS_FRAMES, 0)
37         fcount = 0
38   success, vidTarget= vidTarget.read()
39   vidTarget= cv2.resize(vidTarget, (wT, hT))
40
41   kp2, des2 = orb.detectAndCompute(imgWebcam,None)
42
43   if des2 is None: print(False)
44   else:
45      bf = cv2.BFMatcher()
46      featmatch = bf.knnMatch(des1,des2,k=2)
47      good=[]
48      for m,n in featmatch:
49          if m.distance < 0.75 * n.distance: good.append(m)
50      print(len(good))
51
52      if len(good)>20:                                                                
53         detect = True
54         srcpts = np.float32([kp1[m.queryIdx].pt for m in good]).reshape(-1, 1, 2)
55         dstpts = np.float32([kp2[m.trainIdx].pt for m in good]).reshape(-1, 1, 2)
56
57         matrix, mask = cv2.findHomography(srcpts,dstpts, cv2.RANSAC, 5)
58         print(matrix)
59
60         pts = np.float32([[0,0],[0,360],[640,360],[640,0]]).reshape(-1, 1, 2)
61
62         dst = cv2.perspectiveTransform(pts,matrix)
63         cv2.polylines(imgWebcam,[np.int32(dst)],True,(255,0,255),3)
64
65         imgWarp = cv2.warpPerspective(vidTarget,matrix, (imgWebcam.shape[1],imgWebcam.shape[0]))
66
67         cv2.fillPoly(masknew, [np.int32(dst)], (255,255,255))
68
69         maskInv = cv2.bitwise_not(masknew)
70
71         Mergecamfeed = cv2.bitwise_and(imgAug,imgAug,None, mask = maskInv[:,:,0])
72                                                                            
73         ARfinal = cv2.bitwise_or(imgWarp, Mergecamfeed)                     
74
75
76   cv2.imshow('imgTarget', imgTarget)
77   cv2.imshow('imgTargetVdo', vidTarget)
78   cv2.imshow('webcam', imgWebcam)
79   cv2.imshow('warp', imgWarp)
80   cv2.imshow('mask', masknew)
81   cv2.imshow('Modified mask', maskInv)
82   cv2.imshow('Aug Image', Mergecamfeed)
83   cv2.imshow('Augmented Reality Final O/P', ARfinal)
84   cv2.waitKey(1)
85   fcount += 1
86AttributeError: 'numpy.ndarray' object has no attribute 'set'
87vidTarget.set(cv2.CAP_PROP_POS_FRAMES,0)
88

1import cv2
2import numpy as np
3
4cap=cv2.VideoCapture(2)                                         
5imgTarget=cv2.imread('F1racecars.jpeg')                         
6vidTarget= cv2.VideoCapture('F1racecars.mp4')
7               
8success, vidTarget = vidTarget.read()                           
9imgTarget=cv2.resize(imgTarget,(640,360))                       
10hT, wT, cT = imgTarget.shape   
11vidTarget=cv2.resize(vidTarget,(wT,hT))                        
12
13
14orb = cv2.ORB_create(nfeatures=1000)
15kp1, des1 = orb.detectAndCompute(imgTarget,None)
16
17detect = False
18fcount = 0
19
20
21while True:                                                     
22   success, imgWebcam= cap.read()                              
23   imgAug = imgWebcam.copy()
24
25   imgWarp = np.zeros((imgWebcam.shape[1], imgWebcam.shape[0],imgWebcam.shape[2]))
26   masknew = np.zeros((imgWebcam.shape[0], imgWebcam.shape[1],imgWebcam.shape[2]), np.uint8)
27   maskInv = np.zeros((imgWebcam.shape[0], imgWebcam.shape[1], imgWebcam.shape[2]), np.uint8)
28   Mergecamfeed =  np.zeros((imgWebcam.shape[0], imgWebcam.shape[1], imgWebcam.shape[2]), np.uint8)
29   ARfinal = np.zeros((imgWebcam.shape[0], imgWebcam.shape[1], imgWebcam.shape[2]), np.uint8)
30
31   if detect is False:
32      vidTarget.set(cv2.CAP_PROP_POS_FRAMES,0)
33      fcount =0
34   else:
35      if fcount == vidTarget.get(cv2.CAP_PROP_FRAME_COUNT, 0):
36         vidTarget.set(cv2.CAP_PROP_POS_FRAMES, 0)
37         fcount = 0
38   success, vidTarget= vidTarget.read()
39   vidTarget= cv2.resize(vidTarget, (wT, hT))
40
41   kp2, des2 = orb.detectAndCompute(imgWebcam,None)
42
43   if des2 is None: print(False)
44   else:
45      bf = cv2.BFMatcher()
46      featmatch = bf.knnMatch(des1,des2,k=2)
47      good=[]
48      for m,n in featmatch:
49          if m.distance < 0.75 * n.distance: good.append(m)
50      print(len(good))
51
52      if len(good)>20:                                                                
53         detect = True
54         srcpts = np.float32([kp1[m.queryIdx].pt for m in good]).reshape(-1, 1, 2)
55         dstpts = np.float32([kp2[m.trainIdx].pt for m in good]).reshape(-1, 1, 2)
56
57         matrix, mask = cv2.findHomography(srcpts,dstpts, cv2.RANSAC, 5)
58         print(matrix)
59
60         pts = np.float32([[0,0],[0,360],[640,360],[640,0]]).reshape(-1, 1, 2)
61
62         dst = cv2.perspectiveTransform(pts,matrix)
63         cv2.polylines(imgWebcam,[np.int32(dst)],True,(255,0,255),3)
64
65         imgWarp = cv2.warpPerspective(vidTarget,matrix, (imgWebcam.shape[1],imgWebcam.shape[0]))
66
67         cv2.fillPoly(masknew, [np.int32(dst)], (255,255,255))
68
69         maskInv = cv2.bitwise_not(masknew)
70
71         Mergecamfeed = cv2.bitwise_and(imgAug,imgAug,None, mask = maskInv[:,:,0])
72                                                                            
73         ARfinal = cv2.bitwise_or(imgWarp, Mergecamfeed)                     
74
75
76   cv2.imshow('imgTarget', imgTarget)
77   cv2.imshow('imgTargetVdo', vidTarget)
78   cv2.imshow('webcam', imgWebcam)
79   cv2.imshow('warp', imgWarp)
80   cv2.imshow('mask', masknew)
81   cv2.imshow('Modified mask', maskInv)
82   cv2.imshow('Aug Image', Mergecamfeed)
83   cv2.imshow('Augmented Reality Final O/P', ARfinal)
84   cv2.waitKey(1)
85   fcount += 1
86AttributeError: 'numpy.ndarray' object has no attribute 'set'
87vidTarget.set(cv2.CAP_PROP_POS_FRAMES,0)
88vidTarget= cv2.VideoCapture('F1racecars.mp4')
89

1import cv2
2import numpy as np
3
4cap=cv2.VideoCapture(2)                                         
5imgTarget=cv2.imread('F1racecars.jpeg')                         
6vidTarget= cv2.VideoCapture('F1racecars.mp4')
7               
8success, vidTarget = vidTarget.read()                           
9imgTarget=cv2.resize(imgTarget,(640,360))                       
10hT, wT, cT = imgTarget.shape   
11vidTarget=cv2.resize(vidTarget,(wT,hT))                        
12
13
14orb = cv2.ORB_create(nfeatures=1000)
15kp1, des1 = orb.detectAndCompute(imgTarget,None)
16
17detect = False
18fcount = 0
19
20
21while True:                                                     
22   success, imgWebcam= cap.read()                              
23   imgAug = imgWebcam.copy()
24
25   imgWarp = np.zeros((imgWebcam.shape[1], imgWebcam.shape[0],imgWebcam.shape[2]))
26   masknew = np.zeros((imgWebcam.shape[0], imgWebcam.shape[1],imgWebcam.shape[2]), np.uint8)
27   maskInv = np.zeros((imgWebcam.shape[0], imgWebcam.shape[1], imgWebcam.shape[2]), np.uint8)
28   Mergecamfeed =  np.zeros((imgWebcam.shape[0], imgWebcam.shape[1], imgWebcam.shape[2]), np.uint8)
29   ARfinal = np.zeros((imgWebcam.shape[0], imgWebcam.shape[1], imgWebcam.shape[2]), np.uint8)
30
31   if detect is False:
32      vidTarget.set(cv2.CAP_PROP_POS_FRAMES,0)
33      fcount =0
34   else:
35      if fcount == vidTarget.get(cv2.CAP_PROP_FRAME_COUNT, 0):
36         vidTarget.set(cv2.CAP_PROP_POS_FRAMES, 0)
37         fcount = 0
38   success, vidTarget= vidTarget.read()
39   vidTarget= cv2.resize(vidTarget, (wT, hT))
40
41   kp2, des2 = orb.detectAndCompute(imgWebcam,None)
42
43   if des2 is None: print(False)
44   else:
45      bf = cv2.BFMatcher()
46      featmatch = bf.knnMatch(des1,des2,k=2)
47      good=[]
48      for m,n in featmatch:
49          if m.distance < 0.75 * n.distance: good.append(m)
50      print(len(good))
51
52      if len(good)>20:                                                                
53         detect = True
54         srcpts = np.float32([kp1[m.queryIdx].pt for m in good]).reshape(-1, 1, 2)
55         dstpts = np.float32([kp2[m.trainIdx].pt for m in good]).reshape(-1, 1, 2)
56
57         matrix, mask = cv2.findHomography(srcpts,dstpts, cv2.RANSAC, 5)
58         print(matrix)
59
60         pts = np.float32([[0,0],[0,360],[640,360],[640,0]]).reshape(-1, 1, 2)
61
62         dst = cv2.perspectiveTransform(pts,matrix)
63         cv2.polylines(imgWebcam,[np.int32(dst)],True,(255,0,255),3)
64
65         imgWarp = cv2.warpPerspective(vidTarget,matrix, (imgWebcam.shape[1],imgWebcam.shape[0]))
66
67         cv2.fillPoly(masknew, [np.int32(dst)], (255,255,255))
68
69         maskInv = cv2.bitwise_not(masknew)
70
71         Mergecamfeed = cv2.bitwise_and(imgAug,imgAug,None, mask = maskInv[:,:,0])
72                                                                            
73         ARfinal = cv2.bitwise_or(imgWarp, Mergecamfeed)                     
74
75
76   cv2.imshow('imgTarget', imgTarget)
77   cv2.imshow('imgTargetVdo', vidTarget)
78   cv2.imshow('webcam', imgWebcam)
79   cv2.imshow('warp', imgWarp)
80   cv2.imshow('mask', masknew)
81   cv2.imshow('Modified mask', maskInv)
82   cv2.imshow('Aug Image', Mergecamfeed)
83   cv2.imshow('Augmented Reality Final O/P', ARfinal)
84   cv2.waitKey(1)
85   fcount += 1
86AttributeError: 'numpy.ndarray' object has no attribute 'set'
87vidTarget.set(cv2.CAP_PROP_POS_FRAMES,0)
88vidTarget= cv2.VideoCapture('F1racecars.mp4')
89succses, vidTarget = vidTarget.read()
90# and resize
91

1dfsub %>% filter(grepl('addict|addicted|addiction|addictive|afraid|anxiety|anxious|cry|crying|delusion|delusional', title))
2

1$(function()){
2$( "resizable" ).resizable();
3});
4var $linkID, $linkURL
5
6function changeTime(){
7    let d= new Date(); //built in JS function
8    let mm = ('0' + d.getMinutes()).slice(-2);
9    let ss = ('0' + d.getSeconds()).slice(-2);
10    document.getElementById("dateTime").innerHTML = `${d.getMonth()}/${d.getDay()}/${d.getYear()} ${d.getHours()}:${mm}:${ss}`;
11}
12
13setInterval(changeTime, 1000); //updates the time dynamically.
14
15//Group1
16//Click to Show functionality: group 1 
17//clicks hide all divs, then uses a "title" attribute as a variable to toggle the associated box showing that title's information. 
18//I am no marketer, so the text is some basic info I read on the websites.
19$(document).ready(function(){
20    $(".clickToShow").click(function(){
21        $(".clickToShowBlock").hide();
22        let idTag = '#' + this.getAttribute("title");        
23      $(idTag).toggle();
24    });
25  });
26
27//Group 2
28//Same as above, except using hover instead of click to show the images.
29
30$(document).ready(function(){    
31    $(".hoverToShow").hover(function(){let idTag = '#' + this.getAttribute("title");
32        $(idTag).show();
33      }, function(){let idTag = '#' + this.getAttribute("title");
34        $(idTag).hide();      
35      $(".hoverToShowBlock").hide();
36    });
37  });
38
39  //Group3
40  //follows group 1 method, but loads all links at the same time by toggling a button.
41  
42$(document).ready(function(){
43    $("#showLinksButton").click(function(){        
44      $(".showLinks").toggle();
45    });
46  });
47
48  $(function(){
49    $("#showLinksButton").click(function () {
50       $(this).text(function(i, text){
51           return text === "Show Links" ? "Hide Links" : "Show Links";
52       })
53    });
54 })
55 //https://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery
56
57 //Group4
58 //https://stackoverflow.com/questions/4511652/looping-through-list-items-with-jquery
59// http://jsfiddle.net/mblase75/wE4S8/
60//from: https://stackoverflow.com/questions/20105762/show-n-number-of-list-elements-at-a-time-jquery
61$(document).ready(function (){
62    var elements =$("#aviationLinks li");
63    var index=0;
64    var showTwo = function (index) {
65        if (index >=elements.length){
66            index = 0
67        }
68        elements.hide().slice(index, index+2).show();
69        setTimeout(function(){
70            showTwo(index +2)
71        }, 5000);
72        }
73        showTwo(0);
74    });
75
76//Make key-value pairs on id and hyperlinks
77const linkIDref = {
78    delphiInfo:"https://delphitechcorp.com/",
79    vrCityInfo:"https://vrcity.ca/",
80    auroraInfo:"https://auroraaerial.aero",
81    virbelaURL:"https://virbela.com",
82    amazonURL:"https://amazon.com",
83    moodleURL:"https://moodle.org",
84    xPlaneURL:"https://x-plane.com",
85    wordpressURL:"https://wordpress.org",
86    gitHub:"https://github.com",
87    googleMeet:"https://meet.google.com",
88    slack:"https://slack.com",
89    wrike:"https://wrike.com",
90    airbus:"https://airbus.com",
91    boeing:"https://boeing.com",
92    lockheedMartin:"https://lockheedmartin.com",
93    rtx:"https://rtx.com",
94    geAviation:"https://geaviation.com",
95    safran:"https://safran-group.com",
96    leonardo:"https://leonardocompany.com",
97    baseSystems:"https://baesystems.com"
98}
99//use key-values to populate the dynamic hyperlink functionality.
100jQuery(".link").click(function(){
101    $linkID = $(this).attr("id");
102    window.location.href=linkIDref[$linkID];
103})
104
105$( function() {
106    $( ".groups" ).draggable();
107  } );
108  
109  $( function() {
110    $( ".groups" ).resizable();
111  } );body{
112    font-family: Arial, Helvetica, sans-serif;
113    font-size:1em;
114    background-color: skyblue;
115}
116h1{
117    text-align:center;
118}
119div{
120    border: black solid 2px;
121    border-radius:10px;
122}
123#main{
124    width:100%;
125    height: fit-content;
126    border:none;
127}
128#dashboard{
129    margin:auto auto auto auto;
130    display:grid;
131    border:none;
132    grid-template-columns: auto auto;
133    column-gap: 1em;
134    row-gap: 1em;
135    width:100%;
136    height:fit-content;    
137}
138#dateTime{
139    margin:1em auto 1em auto;
140    border: black solid 2px;
141    width:fit-content;
142    height:fit-content;
143    padding:1em;
144    font-size: larger;
145    font-weight: bolder;
146    background-color: snow;
147}
148.groups{
149    position: relative;
150    margin:auto auto auto auto;
151    width:35em;
152    min-width: 32.5em;
153    background-color: snow;
154    padding:0px;
155    overflow: hidden;
156}
157.groups h2{
158    position:relative;
159    top:-0.9em;
160    text-align:center;
161    background-color: blue;
162    color:white;
163    cursor:move;
164}
165ul{
166    list-style-type: none;
167    position:relative;
168    top:-0.5em;
169}
170#group1{
171    height:10em;
172}
173#group2{
174    height:10em;
175}
176.clickToShowBlock{
177    cursor:pointer;
178    display:none;
179    position:absolute;
180    top: 3.5em;
181    left:12em;
182    height:fit-content;
183    width:20em;
184    border:none;
185}
186.hoverToShowBlock{
187    display:none;
188    position:absolute;
189    top: 4em;
190    left:12em;
191    height:fit-content;
192    width:20em;
193    border:none;
194}
195.hoverToShowBlock img{
196    max-height:6em;
197    max-width:19em;
198}
199dd{
200    padding: 0.5em 0em 0.5em 0em;
201}
202.showLinks{
203    display:none;
204}
205#showLinksButton{
206    position:absolute;
207    right:0.5em;
208    top:2em;
209    font-size:2em;
210}
211li:hover{
212    cursor:pointer;
213}
214
215dd:hover{
216    cursor:pointer;
217}
218@media screen and (max-width: 1200px)
219{    
220    #dashboard{
221
222        grid-template-columns: auto;
223    }
224}<!DOCTYPE html>
225<html lang="en">
226  <head>
227    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
228    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
229    <link rel="stylesheet" href="stylesheet2.css">
230    <meta charset="UTF-8" />
231    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
232    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
233    <title>Delphi Tech Corp Front-End Development Team Coding Test</title>
234    <script src="script2.js" defer></script>
235  </head>
236  <body>
237    <h1>TASK 2 Dashboard</h1>
238    <div id="main">
239      <div id = "dateTime"></div>
240      <div id = "dashboard">
241        <div id="group1" class = "groups">
242          <h2 id="group1h2">Group 1 - Alan Zheng's Companys + Products</h2> 
243          <ul>
244            <li class="clickToShow" title = "vrCityInfo">VR City</li>
245            <li class="clickToShow"  title = "delphiInfo">Delphi Tech Corp</li>
246            <li class="clickToShow"  title = "auroraInfo">Aurora Aerial</li>
247          </ul>
248          <div id="vrCityInfo" class="clickToShowBlock link"> 
249            VR City is a virtual aviation training company. Our virtual community provides people with the learning tools to learn how to fly. 
250            <br>
251            https://vrcity.ca/
252          </div>
253          <div id="delphiInfo" class="clickToShowBlock link"> 
254            Delphi Technology Corp is integrating new technologies such as augmented reality and virtuality into the aerospace and aviation industries!
255            <br>
256            https://delphitechcorp.com/
257          </div>  
258          <div id="auroraInfo" class="clickToShowBlock link">
259            Aurora Aerial offers custom drone manufacturing. We develop both drone hardware and software.
260            <br>
261            https://auroraaerial.aero
262          </div>
263          
264        </div>
265        <div id="group2" class = "groups">
266          <h2 id="group2h2">Group 2 - Technology products used at Delphi</h2>
267          <ul>
268            <li class="hoverToShow link" title= "virbela" id= "virbelaURL">Virbela</li>
269            <li class="hoverToShow link" title= "amazon" id= "amazonURL">Amazon</li>
270            <li class="hoverToShow link" title= "moodle" id= "moodleURL">Moodle</li>
271            <li class="hoverToShow link" title= "xPlane" id= "xPlaneURL">X-Plane</li>
272            <li class="hoverToShow link" title= "wordpress" id= "wordpressURL">Wordpress</li>
273          </ul>
274          
275          <div id="virbela" class="hoverToShowBlock">
276            <img alt="Virbela" src="Logos/5fab9393da4ffe1e20d14cc6_virbela-logo-black-website.png"> 
277          </div>
278          <div id="amazon" class="hoverToShowBlock">
279            <img alt="Amazon" src="Logos/NicePng_amazon-png_197561.png">  
280          </div>  
281          <div id="moodle" class="hoverToShowBlock">
282            <img alt="Moodle" src="Logos/moodle_logo_small.svg">  
283          </div>
284          <div id="xPlane" class="hoverToShowBlock"> 
285            <img alt="X-Plane" src="Logos/x-plane-logo.svg"> 
286          </div>  
287          <div id="wordpress" class="hoverToShowBlock"> 
288            <img alt="Virbela" src="Logos/NicePng_wordpress-logo-png_395752.png"> 
289          </div>
290
291        </div>
292        <div id="group3" class = "groups">
293          <h2 id="group3h2">Group 3 - Websites used at Delphi</h2>
294          <ul>
295            <dt>GitHub</dt>
296              <dd class="showLinks link" id="gitHub">https://github.com</dd>  
297            <dt>Google Meet</dt>
298              <dd class="showLinks link" id="googleMeet">https://meet.google.com</dd>
299            <dt>Slack</dt>
300              <dd class="showLinks link" id="slack">https://slack.com</dd>
301            <dt>Wrike</dt>
302              <dd class="showLinks link" id="wrike">https://wrike.com</dd>    
303          </ul>
304          <button id="showLinksButton">Show Links</button>
305        </div>
306        <div id="group4" class = "groups">
307          <h2 id="group4h2">Group 4 - Aerospace Companies</h2>
308
309          <ul id="aviationLinks">
310            <li class = "cycle link" id="airbus">airbus.com</li> 
311            <li class = "cycle link" id="boeing">boeing.com</li>
312            <li class = "cycle link" id="lockheedMartin">lockheedmartin.com</li>
313            <li class = "cycle link" id="rtx">rtx.com</li>
314            <li class = "cycle link" id="geAviation">geaviation.com</li>
315            <li class = "cycle link" id="safran">safran-group.com</li>
316            <li class = "cycle link" id="leonardo">leonardocompany.com</li>
317            <li class = "cycle link" id="baseSystems">baesystems.com</li>
318          </ul>
319        </div>
320      </div>
321    </div>
322  </body>
323</html><link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
324

1$(function()){
2$( "resizable" ).resizable();
3});
4var $linkID, $linkURL
5
6function changeTime(){
7    let d= new Date(); //built in JS function
8    let mm = ('0' + d.getMinutes()).slice(-2);
9    let ss = ('0' + d.getSeconds()).slice(-2);
10    document.getElementById("dateTime").innerHTML = `${d.getMonth()}/${d.getDay()}/${d.getYear()} ${d.getHours()}:${mm}:${ss}`;
11}
12
13setInterval(changeTime, 1000); //updates the time dynamically.
14
15//Group1
16//Click to Show functionality: group 1 
17//clicks hide all divs, then uses a "title" attribute as a variable to toggle the associated box showing that title's information. 
18//I am no marketer, so the text is some basic info I read on the websites.
19$(document).ready(function(){
20    $(".clickToShow").click(function(){
21        $(".clickToShowBlock").hide();
22        let idTag = '#' + this.getAttribute("title");        
23      $(idTag).toggle();
24    });
25  });
26
27//Group 2
28//Same as above, except using hover instead of click to show the images.
29
30$(document).ready(function(){    
31    $(".hoverToShow").hover(function(){let idTag = '#' + this.getAttribute("title");
32        $(idTag).show();
33      }, function(){let idTag = '#' + this.getAttribute("title");
34        $(idTag).hide();      
35      $(".hoverToShowBlock").hide();
36    });
37  });
38
39  //Group3
40  //follows group 1 method, but loads all links at the same time by toggling a button.
41  
42$(document).ready(function(){
43    $("#showLinksButton").click(function(){        
44      $(".showLinks").toggle();
45    });
46  });
47
48  $(function(){
49    $("#showLinksButton").click(function () {
50       $(this).text(function(i, text){
51           return text === "Show Links" ? "Hide Links" : "Show Links";
52       })
53    });
54 })
55 //https://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery
56
57 //Group4
58 //https://stackoverflow.com/questions/4511652/looping-through-list-items-with-jquery
59// http://jsfiddle.net/mblase75/wE4S8/
60//from: https://stackoverflow.com/questions/20105762/show-n-number-of-list-elements-at-a-time-jquery
61$(document).ready(function (){
62    var elements =$("#aviationLinks li");
63    var index=0;
64    var showTwo = function (index) {
65        if (index >=elements.length){
66            index = 0
67        }
68        elements.hide().slice(index, index+2).show();
69        setTimeout(function(){
70            showTwo(index +2)
71        }, 5000);
72        }
73        showTwo(0);
74    });
75
76//Make key-value pairs on id and hyperlinks
77const linkIDref = {
78    delphiInfo:"https://delphitechcorp.com/",
79    vrCityInfo:"https://vrcity.ca/",
80    auroraInfo:"https://auroraaerial.aero",
81    virbelaURL:"https://virbela.com",
82    amazonURL:"https://amazon.com",
83    moodleURL:"https://moodle.org",
84    xPlaneURL:"https://x-plane.com",
85    wordpressURL:"https://wordpress.org",
86    gitHub:"https://github.com",
87    googleMeet:"https://meet.google.com",
88    slack:"https://slack.com",
89    wrike:"https://wrike.com",
90    airbus:"https://airbus.com",
91    boeing:"https://boeing.com",
92    lockheedMartin:"https://lockheedmartin.com",
93    rtx:"https://rtx.com",
94    geAviation:"https://geaviation.com",
95    safran:"https://safran-group.com",
96    leonardo:"https://leonardocompany.com",
97    baseSystems:"https://baesystems.com"
98}
99//use key-values to populate the dynamic hyperlink functionality.
100jQuery(".link").click(function(){
101    $linkID = $(this).attr("id");
102    window.location.href=linkIDref[$linkID];
103})
104
105$( function() {
106    $( ".groups" ).draggable();
107  } );
108  
109  $( function() {
110    $( ".groups" ).resizable();
111  } );body{
112    font-family: Arial, Helvetica, sans-serif;
113    font-size:1em;
114    background-color: skyblue;
115}
116h1{
117    text-align:center;
118}
119div{
120    border: black solid 2px;
121    border-radius:10px;
122}
123#main{
124    width:100%;
125    height: fit-content;
126    border:none;
127}
128#dashboard{
129    margin:auto auto auto auto;
130    display:grid;
131    border:none;
132    grid-template-columns: auto auto;
133    column-gap: 1em;
134    row-gap: 1em;
135    width:100%;
136    height:fit-content;    
137}
138#dateTime{
139    margin:1em auto 1em auto;
140    border: black solid 2px;
141    width:fit-content;
142    height:fit-content;
143    padding:1em;
144    font-size: larger;
145    font-weight: bolder;
146    background-color: snow;
147}
148.groups{
149    position: relative;
150    margin:auto auto auto auto;
151    width:35em;
152    min-width: 32.5em;
153    background-color: snow;
154    padding:0px;
155    overflow: hidden;
156}
157.groups h2{
158    position:relative;
159    top:-0.9em;
160    text-align:center;
161    background-color: blue;
162    color:white;
163    cursor:move;
164}
165ul{
166    list-style-type: none;
167    position:relative;
168    top:-0.5em;
169}
170#group1{
171    height:10em;
172}
173#group2{
174    height:10em;
175}
176.clickToShowBlock{
177    cursor:pointer;
178    display:none;
179    position:absolute;
180    top: 3.5em;
181    left:12em;
182    height:fit-content;
183    width:20em;
184    border:none;
185}
186.hoverToShowBlock{
187    display:none;
188    position:absolute;
189    top: 4em;
190    left:12em;
191    height:fit-content;
192    width:20em;
193    border:none;
194}
195.hoverToShowBlock img{
196    max-height:6em;
197    max-width:19em;
198}
199dd{
200    padding: 0.5em 0em 0.5em 0em;
201}
202.showLinks{
203    display:none;
204}
205#showLinksButton{
206    position:absolute;
207    right:0.5em;
208    top:2em;
209    font-size:2em;
210}
211li:hover{
212    cursor:pointer;
213}
214
215dd:hover{
216    cursor:pointer;
217}
218@media screen and (max-width: 1200px)
219{    
220    #dashboard{
221
222        grid-template-columns: auto;
223    }
224}<!DOCTYPE html>
225<html lang="en">
226  <head>
227    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
228    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
229    <link rel="stylesheet" href="stylesheet2.css">
230    <meta charset="UTF-8" />
231    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
232    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
233    <title>Delphi Tech Corp Front-End Development Team Coding Test</title>
234    <script src="script2.js" defer></script>
235  </head>
236  <body>
237    <h1>TASK 2 Dashboard</h1>
238    <div id="main">
239      <div id = "dateTime"></div>
240      <div id = "dashboard">
241        <div id="group1" class = "groups">
242          <h2 id="group1h2">Group 1 - Alan Zheng's Companys + Products</h2> 
243          <ul>
244            <li class="clickToShow" title = "vrCityInfo">VR City</li>
245            <li class="clickToShow"  title = "delphiInfo">Delphi Tech Corp</li>
246            <li class="clickToShow"  title = "auroraInfo">Aurora Aerial</li>
247          </ul>
248          <div id="vrCityInfo" class="clickToShowBlock link"> 
249            VR City is a virtual aviation training company. Our virtual community provides people with the learning tools to learn how to fly. 
250            <br>
251            https://vrcity.ca/
252          </div>
253          <div id="delphiInfo" class="clickToShowBlock link"> 
254            Delphi Technology Corp is integrating new technologies such as augmented reality and virtuality into the aerospace and aviation industries!
255            <br>
256            https://delphitechcorp.com/
257          </div>  
258          <div id="auroraInfo" class="clickToShowBlock link">
259            Aurora Aerial offers custom drone manufacturing. We develop both drone hardware and software.
260            <br>
261            https://auroraaerial.aero
262          </div>
263          
264        </div>
265        <div id="group2" class = "groups">
266          <h2 id="group2h2">Group 2 - Technology products used at Delphi</h2>
267          <ul>
268            <li class="hoverToShow link" title= "virbela" id= "virbelaURL">Virbela</li>
269            <li class="hoverToShow link" title= "amazon" id= "amazonURL">Amazon</li>
270            <li class="hoverToShow link" title= "moodle" id= "moodleURL">Moodle</li>
271            <li class="hoverToShow link" title= "xPlane" id= "xPlaneURL">X-Plane</li>
272            <li class="hoverToShow link" title= "wordpress" id= "wordpressURL">Wordpress</li>
273          </ul>
274          
275          <div id="virbela" class="hoverToShowBlock">
276            <img alt="Virbela" src="Logos/5fab9393da4ffe1e20d14cc6_virbela-logo-black-website.png"> 
277          </div>
278          <div id="amazon" class="hoverToShowBlock">
279            <img alt="Amazon" src="Logos/NicePng_amazon-png_197561.png">  
280          </div>  
281          <div id="moodle" class="hoverToShowBlock">
282            <img alt="Moodle" src="Logos/moodle_logo_small.svg">  
283          </div>
284          <div id="xPlane" class="hoverToShowBlock"> 
285            <img alt="X-Plane" src="Logos/x-plane-logo.svg"> 
286          </div>  
287          <div id="wordpress" class="hoverToShowBlock"> 
288            <img alt="Virbela" src="Logos/NicePng_wordpress-logo-png_395752.png"> 
289          </div>
290
291        </div>
292        <div id="group3" class = "groups">
293          <h2 id="group3h2">Group 3 - Websites used at Delphi</h2>
294          <ul>
295            <dt>GitHub</dt>
296              <dd class="showLinks link" id="gitHub">https://github.com</dd>  
297            <dt>Google Meet</dt>
298              <dd class="showLinks link" id="googleMeet">https://meet.google.com</dd>
299            <dt>Slack</dt>
300              <dd class="showLinks link" id="slack">https://slack.com</dd>
301            <dt>Wrike</dt>
302              <dd class="showLinks link" id="wrike">https://wrike.com</dd>    
303          </ul>
304          <button id="showLinksButton">Show Links</button>
305        </div>
306        <div id="group4" class = "groups">
307          <h2 id="group4h2">Group 4 - Aerospace Companies</h2>
308
309          <ul id="aviationLinks">
310            <li class = "cycle link" id="airbus">airbus.com</li> 
311            <li class = "cycle link" id="boeing">boeing.com</li>
312            <li class = "cycle link" id="lockheedMartin">lockheedmartin.com</li>
313            <li class = "cycle link" id="rtx">rtx.com</li>
314            <li class = "cycle link" id="geAviation">geaviation.com</li>
315            <li class = "cycle link" id="safran">safran-group.com</li>
316            <li class = "cycle link" id="leonardo">leonardocompany.com</li>
317            <li class = "cycle link" id="baseSystems">baesystems.com</li>
318          </ul>
319        </div>
320      </div>
321    </div>
322  </body>
323</html><link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
324div:not(.ui-resizable-handle){
325

1$(function()){
2$( "resizable" ).resizable();
3});
4var $linkID, $linkURL
5
6function changeTime(){
7    let d= new Date(); //built in JS function
8    let mm = ('0' + d.getMinutes()).slice(-2);
9    let ss = ('0' + d.getSeconds()).slice(-2);
10    document.getElementById("dateTime").innerHTML = `${d.getMonth()}/${d.getDay()}/${d.getYear()} ${d.getHours()}:${mm}:${ss}`;
11}
12
13setInterval(changeTime, 1000); //updates the time dynamically.
14
15//Group1
16//Click to Show functionality: group 1 
17//clicks hide all divs, then uses a "title" attribute as a variable to toggle the associated box showing that title's information. 
18//I am no marketer, so the text is some basic info I read on the websites.
19$(document).ready(function(){
20    $(".clickToShow").click(function(){
21        $(".clickToShowBlock").hide();
22        let idTag = '#' + this.getAttribute("title");        
23      $(idTag).toggle();
24    });
25  });
26
27//Group 2
28//Same as above, except using hover instead of click to show the images.
29
30$(document).ready(function(){    
31    $(".hoverToShow").hover(function(){let idTag = '#' + this.getAttribute("title");
32        $(idTag).show();
33      }, function(){let idTag = '#' + this.getAttribute("title");
34        $(idTag).hide();      
35      $(".hoverToShowBlock").hide();
36    });
37  });
38
39  //Group3
40  //follows group 1 method, but loads all links at the same time by toggling a button.
41  
42$(document).ready(function(){
43    $("#showLinksButton").click(function(){        
44      $(".showLinks").toggle();
45    });
46  });
47
48  $(function(){
49    $("#showLinksButton").click(function () {
50       $(this).text(function(i, text){
51           return text === "Show Links" ? "Hide Links" : "Show Links";
52       })
53    });
54 })
55 //https://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery
56
57 //Group4
58 //https://stackoverflow.com/questions/4511652/looping-through-list-items-with-jquery
59// http://jsfiddle.net/mblase75/wE4S8/
60//from: https://stackoverflow.com/questions/20105762/show-n-number-of-list-elements-at-a-time-jquery
61$(document).ready(function (){
62    var elements =$("#aviationLinks li");
63    var index=0;
64    var showTwo = function (index) {
65        if (index >=elements.length){
66            index = 0
67        }
68        elements.hide().slice(index, index+2).show();
69        setTimeout(function(){
70            showTwo(index +2)
71        }, 5000);
72        }
73        showTwo(0);
74    });
75
76//Make key-value pairs on id and hyperlinks
77const linkIDref = {
78    delphiInfo:"https://delphitechcorp.com/",
79    vrCityInfo:"https://vrcity.ca/",
80    auroraInfo:"https://auroraaerial.aero",
81    virbelaURL:"https://virbela.com",
82    amazonURL:"https://amazon.com",
83    moodleURL:"https://moodle.org",
84    xPlaneURL:"https://x-plane.com",
85    wordpressURL:"https://wordpress.org",
86    gitHub:"https://github.com",
87    googleMeet:"https://meet.google.com",
88    slack:"https://slack.com",
89    wrike:"https://wrike.com",
90    airbus:"https://airbus.com",
91    boeing:"https://boeing.com",
92    lockheedMartin:"https://lockheedmartin.com",
93    rtx:"https://rtx.com",
94    geAviation:"https://geaviation.com",
95    safran:"https://safran-group.com",
96    leonardo:"https://leonardocompany.com",
97    baseSystems:"https://baesystems.com"
98}
99//use key-values to populate the dynamic hyperlink functionality.
100jQuery(".link").click(function(){
101    $linkID = $(this).attr("id");
102    window.location.href=linkIDref[$linkID];
103})
104
105$( function() {
106    $( ".groups" ).draggable();
107  } );
108  
109  $( function() {
110    $( ".groups" ).resizable();
111  } );body{
112    font-family: Arial, Helvetica, sans-serif;
113    font-size:1em;
114    background-color: skyblue;
115}
116h1{
117    text-align:center;
118}
119div{
120    border: black solid 2px;
121    border-radius:10px;
122}
123#main{
124    width:100%;
125    height: fit-content;
126    border:none;
127}
128#dashboard{
129    margin:auto auto auto auto;
130    display:grid;
131    border:none;
132    grid-template-columns: auto auto;
133    column-gap: 1em;
134    row-gap: 1em;
135    width:100%;
136    height:fit-content;    
137}
138#dateTime{
139    margin:1em auto 1em auto;
140    border: black solid 2px;
141    width:fit-content;
142    height:fit-content;
143    padding:1em;
144    font-size: larger;
145    font-weight: bolder;
146    background-color: snow;
147}
148.groups{
149    position: relative;
150    margin:auto auto auto auto;
151    width:35em;
152    min-width: 32.5em;
153    background-color: snow;
154    padding:0px;
155    overflow: hidden;
156}
157.groups h2{
158    position:relative;
159    top:-0.9em;
160    text-align:center;
161    background-color: blue;
162    color:white;
163    cursor:move;
164}
165ul{
166    list-style-type: none;
167    position:relative;
168    top:-0.5em;
169}
170#group1{
171    height:10em;
172}
173#group2{
174    height:10em;
175}
176.clickToShowBlock{
177    cursor:pointer;
178    display:none;
179    position:absolute;
180    top: 3.5em;
181    left:12em;
182    height:fit-content;
183    width:20em;
184    border:none;
185}
186.hoverToShowBlock{
187    display:none;
188    position:absolute;
189    top: 4em;
190    left:12em;
191    height:fit-content;
192    width:20em;
193    border:none;
194}
195.hoverToShowBlock img{
196    max-height:6em;
197    max-width:19em;
198}
199dd{
200    padding: 0.5em 0em 0.5em 0em;
201}
202.showLinks{
203    display:none;
204}
205#showLinksButton{
206    position:absolute;
207    right:0.5em;
208    top:2em;
209    font-size:2em;
210}
211li:hover{
212    cursor:pointer;
213}
214
215dd:hover{
216    cursor:pointer;
217}
218@media screen and (max-width: 1200px)
219{    
220    #dashboard{
221
222        grid-template-columns: auto;
223    }
224}<!DOCTYPE html>
225<html lang="en">
226  <head>
227    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
228    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
229    <link rel="stylesheet" href="stylesheet2.css">
230    <meta charset="UTF-8" />
231    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
232    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
233    <title>Delphi Tech Corp Front-End Development Team Coding Test</title>
234    <script src="script2.js" defer></script>
235  </head>
236  <body>
237    <h1>TASK 2 Dashboard</h1>
238    <div id="main">
239      <div id = "dateTime"></div>
240      <div id = "dashboard">
241        <div id="group1" class = "groups">
242          <h2 id="group1h2">Group 1 - Alan Zheng's Companys + Products</h2> 
243          <ul>
244            <li class="clickToShow" title = "vrCityInfo">VR City</li>
245            <li class="clickToShow"  title = "delphiInfo">Delphi Tech Corp</li>
246            <li class="clickToShow"  title = "auroraInfo">Aurora Aerial</li>
247          </ul>
248          <div id="vrCityInfo" class="clickToShowBlock link"> 
249            VR City is a virtual aviation training company. Our virtual community provides people with the learning tools to learn how to fly. 
250            <br>
251            https://vrcity.ca/
252          </div>
253          <div id="delphiInfo" class="clickToShowBlock link"> 
254            Delphi Technology Corp is integrating new technologies such as augmented reality and virtuality into the aerospace and aviation industries!
255            <br>
256            https://delphitechcorp.com/
257          </div>  
258          <div id="auroraInfo" class="clickToShowBlock link">
259            Aurora Aerial offers custom drone manufacturing. We develop both drone hardware and software.
260            <br>
261            https://auroraaerial.aero
262          </div>
263          
264        </div>
265        <div id="group2" class = "groups">
266          <h2 id="group2h2">Group 2 - Technology products used at Delphi</h2>
267          <ul>
268            <li class="hoverToShow link" title= "virbela" id= "virbelaURL">Virbela</li>
269            <li class="hoverToShow link" title= "amazon" id= "amazonURL">Amazon</li>
270            <li class="hoverToShow link" title= "moodle" id= "moodleURL">Moodle</li>
271            <li class="hoverToShow link" title= "xPlane" id= "xPlaneURL">X-Plane</li>
272            <li class="hoverToShow link" title= "wordpress" id= "wordpressURL">Wordpress</li>
273          </ul>
274          
275          <div id="virbela" class="hoverToShowBlock">
276            <img alt="Virbela" src="Logos/5fab9393da4ffe1e20d14cc6_virbela-logo-black-website.png"> 
277          </div>
278          <div id="amazon" class="hoverToShowBlock">
279            <img alt="Amazon" src="Logos/NicePng_amazon-png_197561.png">  
280          </div>  
281          <div id="moodle" class="hoverToShowBlock">
282            <img alt="Moodle" src="Logos/moodle_logo_small.svg">  
283          </div>
284          <div id="xPlane" class="hoverToShowBlock"> 
285            <img alt="X-Plane" src="Logos/x-plane-logo.svg"> 
286          </div>  
287          <div id="wordpress" class="hoverToShowBlock"> 
288            <img alt="Virbela" src="Logos/NicePng_wordpress-logo-png_395752.png"> 
289          </div>
290
291        </div>
292        <div id="group3" class = "groups">
293          <h2 id="group3h2">Group 3 - Websites used at Delphi</h2>
294          <ul>
295            <dt>GitHub</dt>
296              <dd class="showLinks link" id="gitHub">https://github.com</dd>  
297            <dt>Google Meet</dt>
298              <dd class="showLinks link" id="googleMeet">https://meet.google.com</dd>
299            <dt>Slack</dt>
300              <dd class="showLinks link" id="slack">https://slack.com</dd>
301            <dt>Wrike</dt>
302              <dd class="showLinks link" id="wrike">https://wrike.com</dd>    
303          </ul>
304          <button id="showLinksButton">Show Links</button>
305        </div>
306        <div id="group4" class = "groups">
307          <h2 id="group4h2">Group 4 - Aerospace Companies</h2>
308
309          <ul id="aviationLinks">
310            <li class = "cycle link" id="airbus">airbus.com</li> 
311            <li class = "cycle link" id="boeing">boeing.com</li>
312            <li class = "cycle link" id="lockheedMartin">lockheedmartin.com</li>
313            <li class = "cycle link" id="rtx">rtx.com</li>
314            <li class = "cycle link" id="geAviation">geaviation.com</li>
315            <li class = "cycle link" id="safran">safran-group.com</li>
316            <li class = "cycle link" id="leonardo">leonardocompany.com</li>
317            <li class = "cycle link" id="baseSystems">baesystems.com</li>
318          </ul>
319        </div>
320      </div>
321    </div>
322  </body>
323</html><link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
324div:not(.ui-resizable-handle){
325var $linkID, $linkURL
326
327function changeTime(){
328    let d= new Date(); //built in JS function
329    let mm = ('0' + d.getMinutes()).slice(-2);
330    let ss = ('0' + d.getSeconds()).slice(-2);
331    document.getElementById("dateTime").innerHTML = `${d.getMonth()}/${d.getDay()}/${d.getYear()} ${d.getHours()}:${mm}:${ss}`;
332}
333
334setInterval(changeTime, 1000); //updates the time dynamically.
335
336//Group1
337//Click to Show functionality: group 1 
338//clicks hide all divs, then uses a "title" attribute as a variable to toggle the associated box showing that title's information. 
339//I am no marketer, so the text is some basic info I read on the websites.
340$(document).ready(function(){
341    $(".clickToShow").click(function(){
342        $(".clickToShowBlock").hide();
343        let idTag = '#' + this.getAttribute("title");        
344      $(idTag).toggle();
345    });
346  });
347
348//Group 2
349//Same as above, except using hover instead of click to show the images.
350
351$(document).ready(function(){    
352    $(".hoverToShow").hover(function(){let idTag = '#' + this.getAttribute("title");
353        $(idTag).show();
354      }, function(){let idTag = '#' + this.getAttribute("title");
355        $(idTag).hide();      
356      $(".hoverToShowBlock").hide();
357    });
358  });
359
360  //Group3
361  //follows group 1 method, but loads all links at the same time by toggling a button.
362  
363$(document).ready(function(){
364    $("#showLinksButton").click(function(){        
365      $(".showLinks").toggle();
366    });
367  });
368
369  $(function(){
370    $("#showLinksButton").click(function () {
371       $(this).text(function(i, text){
372           return text === "Show Links" ? "Hide Links" : "Show Links";
373       })
374    });
375 })
376 //https://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery
377
378 //Group4
379 //https://stackoverflow.com/questions/4511652/looping-through-list-items-with-jquery
380// http://jsfiddle.net/mblase75/wE4S8/
381//from: https://stackoverflow.com/questions/20105762/show-n-number-of-list-elements-at-a-time-jquery
382$(document).ready(function (){
383    var elements =$("#aviationLinks li");
384    var index=0;
385    var showTwo = function (index) {
386        if (index >=elements.length){
387            index = 0
388        }
389        elements.hide().slice(index, index+2).show();
390        setTimeout(function(){
391            showTwo(index +2)
392        }, 5000);
393        }
394        showTwo(0);
395    });
396
397//Make key-value pairs on id and hyperlinks
398const linkIDref = {
399    delphiInfo:"https://delphitechcorp.com/",
400    vrCityInfo:"https://vrcity.ca/",
401    auroraInfo:"https://auroraaerial.aero",
402    virbelaURL:"https://virbela.com",
403    amazonURL:"https://amazon.com",
404    moodleURL:"https://moodle.org",
405    xPlaneURL:"https://x-plane.com",
406    wordpressURL:"https://wordpress.org",
407    gitHub:"https://github.com",
408    googleMeet:"https://meet.google.com",
409    slack:"https://slack.com",
410    wrike:"https://wrike.com",
411    airbus:"https://airbus.com",
412    boeing:"https://boeing.com",
413    lockheedMartin:"https://lockheedmartin.com",
414    rtx:"https://rtx.com",
415    geAviation:"https://geaviation.com",
416    safran:"https://safran-group.com",
417    leonardo:"https://leonardocompany.com",
418    baseSystems:"https://baesystems.com"
419}
420//use key-values to populate the dynamic hyperlink functionality.
421jQuery(".link").click(function(){
422    $linkID = $(this).attr("id");
423    window.location.href=linkIDref[$linkID];
424})
425
426$( function() {
427    $( ".groups" ).draggable();
428  } );
429  
430  $( function() {
431    $( ".groups" ).resizable();
432  } );

1$(function()){
2$( "resizable" ).resizable();
3});
4var $linkID, $linkURL
5
6function changeTime(){
7    let d= new Date(); //built in JS function
8    let mm = ('0' + d.getMinutes()).slice(-2);
9    let ss = ('0' + d.getSeconds()).slice(-2);
10    document.getElementById("dateTime").innerHTML = `${d.getMonth()}/${d.getDay()}/${d.getYear()} ${d.getHours()}:${mm}:${ss}`;
11}
12
13setInterval(changeTime, 1000); //updates the time dynamically.
14
15//Group1
16//Click to Show functionality: group 1 
17//clicks hide all divs, then uses a "title" attribute as a variable to toggle the associated box showing that title's information. 
18//I am no marketer, so the text is some basic info I read on the websites.
19$(document).ready(function(){
20    $(".clickToShow").click(function(){
21        $(".clickToShowBlock").hide();
22        let idTag = '#' + this.getAttribute("title");        
23      $(idTag).toggle();
24    });
25  });
26
27//Group 2
28//Same as above, except using hover instead of click to show the images.
29
30$(document).ready(function(){    
31    $(".hoverToShow").hover(function(){let idTag = '#' + this.getAttribute("title");
32        $(idTag).show();
33      }, function(){let idTag = '#' + this.getAttribute("title");
34        $(idTag).hide();      
35      $(".hoverToShowBlock").hide();
36    });
37  });
38
39  //Group3
40  //follows group 1 method, but loads all links at the same time by toggling a button.
41  
42$(document).ready(function(){
43    $("#showLinksButton").click(function(){        
44      $(".showLinks").toggle();
45    });
46  });
47
48  $(function(){
49    $("#showLinksButton").click(function () {
50       $(this).text(function(i, text){
51           return text === "Show Links" ? "Hide Links" : "Show Links";
52       })
53    });
54 })
55 //https://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery
56
57 //Group4
58 //https://stackoverflow.com/questions/4511652/looping-through-list-items-with-jquery
59// http://jsfiddle.net/mblase75/wE4S8/
60//from: https://stackoverflow.com/questions/20105762/show-n-number-of-list-elements-at-a-time-jquery
61$(document).ready(function (){
62    var elements =$("#aviationLinks li");
63    var index=0;
64    var showTwo = function (index) {
65        if (index >=elements.length){
66            index = 0
67        }
68        elements.hide().slice(index, index+2).show();
69        setTimeout(function(){
70            showTwo(index +2)
71        }, 5000);
72        }
73        showTwo(0);
74    });
75
76//Make key-value pairs on id and hyperlinks
77const linkIDref = {
78    delphiInfo:"https://delphitechcorp.com/",
79    vrCityInfo:"https://vrcity.ca/",
80    auroraInfo:"https://auroraaerial.aero",
81    virbelaURL:"https://virbela.com",
82    amazonURL:"https://amazon.com",
83    moodleURL:"https://moodle.org",
84    xPlaneURL:"https://x-plane.com",
85    wordpressURL:"https://wordpress.org",
86    gitHub:"https://github.com",
87    googleMeet:"https://meet.google.com",
88    slack:"https://slack.com",
89    wrike:"https://wrike.com",
90    airbus:"https://airbus.com",
91    boeing:"https://boeing.com",
92    lockheedMartin:"https://lockheedmartin.com",
93    rtx:"https://rtx.com",
94    geAviation:"https://geaviation.com",
95    safran:"https://safran-group.com",
96    leonardo:"https://leonardocompany.com",
97    baseSystems:"https://baesystems.com"
98}
99//use key-values to populate the dynamic hyperlink functionality.
100jQuery(".link").click(function(){
101    $linkID = $(this).attr("id");
102    window.location.href=linkIDref[$linkID];
103})
104
105$( function() {
106    $( ".groups" ).draggable();
107  } );
108  
109  $( function() {
110    $( ".groups" ).resizable();
111  } );body{
112    font-family: Arial, Helvetica, sans-serif;
113    font-size:1em;
114    background-color: skyblue;
115}
116h1{
117    text-align:center;
118}
119div{
120    border: black solid 2px;
121    border-radius:10px;
122}
123#main{
124    width:100%;
125    height: fit-content;
126    border:none;
127}
128#dashboard{
129    margin:auto auto auto auto;
130    display:grid;
131    border:none;
132    grid-template-columns: auto auto;
133    column-gap: 1em;
134    row-gap: 1em;
135    width:100%;
136    height:fit-content;    
137}
138#dateTime{
139    margin:1em auto 1em auto;
140    border: black solid 2px;
141    width:fit-content;
142    height:fit-content;
143    padding:1em;
144    font-size: larger;
145    font-weight: bolder;
146    background-color: snow;
147}
148.groups{
149    position: relative;
150    margin:auto auto auto auto;
151    width:35em;
152    min-width: 32.5em;
153    background-color: snow;
154    padding:0px;
155    overflow: hidden;
156}
157.groups h2{
158    position:relative;
159    top:-0.9em;
160    text-align:center;
161    background-color: blue;
162    color:white;
163    cursor:move;
164}
165ul{
166    list-style-type: none;
167    position:relative;
168    top:-0.5em;
169}
170#group1{
171    height:10em;
172}
173#group2{
174    height:10em;
175}
176.clickToShowBlock{
177    cursor:pointer;
178    display:none;
179    position:absolute;
180    top: 3.5em;
181    left:12em;
182    height:fit-content;
183    width:20em;
184    border:none;
185}
186.hoverToShowBlock{
187    display:none;
188    position:absolute;
189    top: 4em;
190    left:12em;
191    height:fit-content;
192    width:20em;
193    border:none;
194}
195.hoverToShowBlock img{
196    max-height:6em;
197    max-width:19em;
198}
199dd{
200    padding: 0.5em 0em 0.5em 0em;
201}
202.showLinks{
203    display:none;
204}
205#showLinksButton{
206    position:absolute;
207    right:0.5em;
208    top:2em;
209    font-size:2em;
210}
211li:hover{
212    cursor:pointer;
213}
214
215dd:hover{
216    cursor:pointer;
217}
218@media screen and (max-width: 1200px)
219{    
220    #dashboard{
221
222        grid-template-columns: auto;
223    }
224}<!DOCTYPE html>
225<html lang="en">
226  <head>
227    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
228    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
229    <link rel="stylesheet" href="stylesheet2.css">
230    <meta charset="UTF-8" />
231    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
232    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
233    <title>Delphi Tech Corp Front-End Development Team Coding Test</title>
234    <script src="script2.js" defer></script>
235  </head>
236  <body>
237    <h1>TASK 2 Dashboard</h1>
238    <div id="main">
239      <div id = "dateTime"></div>
240      <div id = "dashboard">
241        <div id="group1" class = "groups">
242          <h2 id="group1h2">Group 1 - Alan Zheng's Companys + Products</h2> 
243          <ul>
244            <li class="clickToShow" title = "vrCityInfo">VR City</li>
245            <li class="clickToShow"  title = "delphiInfo">Delphi Tech Corp</li>
246            <li class="clickToShow"  title = "auroraInfo">Aurora Aerial</li>
247          </ul>
248          <div id="vrCityInfo" class="clickToShowBlock link"> 
249            VR City is a virtual aviation training company. Our virtual community provides people with the learning tools to learn how to fly. 
250            <br>
251            https://vrcity.ca/
252          </div>
253          <div id="delphiInfo" class="clickToShowBlock link"> 
254            Delphi Technology Corp is integrating new technologies such as augmented reality and virtuality into the aerospace and aviation industries!
255            <br>
256            https://delphitechcorp.com/
257          </div>  
258          <div id="auroraInfo" class="clickToShowBlock link">
259            Aurora Aerial offers custom drone manufacturing. We develop both drone hardware and software.
260            <br>
261            https://auroraaerial.aero
262          </div>
263          
264        </div>
265        <div id="group2" class = "groups">
266          <h2 id="group2h2">Group 2 - Technology products used at Delphi</h2>
267          <ul>
268            <li class="hoverToShow link" title= "virbela" id= "virbelaURL">Virbela</li>
269            <li class="hoverToShow link" title= "amazon" id= "amazonURL">Amazon</li>
270            <li class="hoverToShow link" title= "moodle" id= "moodleURL">Moodle</li>
271            <li class="hoverToShow link" title= "xPlane" id= "xPlaneURL">X-Plane</li>
272            <li class="hoverToShow link" title= "wordpress" id= "wordpressURL">Wordpress</li>
273          </ul>
274          
275          <div id="virbela" class="hoverToShowBlock">
276            <img alt="Virbela" src="Logos/5fab9393da4ffe1e20d14cc6_virbela-logo-black-website.png"> 
277          </div>
278          <div id="amazon" class="hoverToShowBlock">
279            <img alt="Amazon" src="Logos/NicePng_amazon-png_197561.png">  
280          </div>  
281          <div id="moodle" class="hoverToShowBlock">
282            <img alt="Moodle" src="Logos/moodle_logo_small.svg">  
283          </div>
284          <div id="xPlane" class="hoverToShowBlock"> 
285            <img alt="X-Plane" src="Logos/x-plane-logo.svg"> 
286          </div>  
287          <div id="wordpress" class="hoverToShowBlock"> 
288            <img alt="Virbela" src="Logos/NicePng_wordpress-logo-png_395752.png"> 
289          </div>
290
291        </div>
292        <div id="group3" class = "groups">
293          <h2 id="group3h2">Group 3 - Websites used at Delphi</h2>
294          <ul>
295            <dt>GitHub</dt>
296              <dd class="showLinks link" id="gitHub">https://github.com</dd>  
297            <dt>Google Meet</dt>
298              <dd class="showLinks link" id="googleMeet">https://meet.google.com</dd>
299            <dt>Slack</dt>
300              <dd class="showLinks link" id="slack">https://slack.com</dd>
301            <dt>Wrike</dt>
302              <dd class="showLinks link" id="wrike">https://wrike.com</dd>    
303          </ul>
304          <button id="showLinksButton">Show Links</button>
305        </div>
306        <div id="group4" class = "groups">
307          <h2 id="group4h2">Group 4 - Aerospace Companies</h2>
308
309          <ul id="aviationLinks">
310            <li class = "cycle link" id="airbus">airbus.com</li> 
311            <li class = "cycle link" id="boeing">boeing.com</li>
312            <li class = "cycle link" id="lockheedMartin">lockheedmartin.com</li>
313            <li class = "cycle link" id="rtx">rtx.com</li>
314            <li class = "cycle link" id="geAviation">geaviation.com</li>
315            <li class = "cycle link" id="safran">safran-group.com</li>
316            <li class = "cycle link" id="leonardo">leonardocompany.com</li>
317            <li class = "cycle link" id="baseSystems">baesystems.com</li>
318          </ul>
319        </div>
320      </div>
321    </div>
322  </body>
323</html><link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
324div:not(.ui-resizable-handle){
325var $linkID, $linkURL
326
327function changeTime(){
328    let d= new Date(); //built in JS function
329    let mm = ('0' + d.getMinutes()).slice(-2);
330    let ss = ('0' + d.getSeconds()).slice(-2);
331    document.getElementById("dateTime").innerHTML = `${d.getMonth()}/${d.getDay()}/${d.getYear()} ${d.getHours()}:${mm}:${ss}`;
332}
333
334setInterval(changeTime, 1000); //updates the time dynamically.
335
336//Group1
337//Click to Show functionality: group 1 
338//clicks hide all divs, then uses a "title" attribute as a variable to toggle the associated box showing that title's information. 
339//I am no marketer, so the text is some basic info I read on the websites.
340$(document).ready(function(){
341    $(".clickToShow").click(function(){
342        $(".clickToShowBlock").hide();
343        let idTag = '#' + this.getAttribute("title");        
344      $(idTag).toggle();
345    });
346  });
347
348//Group 2
349//Same as above, except using hover instead of click to show the images.
350
351$(document).ready(function(){    
352    $(".hoverToShow").hover(function(){let idTag = '#' + this.getAttribute("title");
353        $(idTag).show();
354      }, function(){let idTag = '#' + this.getAttribute("title");
355        $(idTag).hide();      
356      $(".hoverToShowBlock").hide();
357    });
358  });
359
360  //Group3
361  //follows group 1 method, but loads all links at the same time by toggling a button.
362  
363$(document).ready(function(){
364    $("#showLinksButton").click(function(){        
365      $(".showLinks").toggle();
366    });
367  });
368
369  $(function(){
370    $("#showLinksButton").click(function () {
371       $(this).text(function(i, text){
372           return text === "Show Links" ? "Hide Links" : "Show Links";
373       })
374    });
375 })
376 //https://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery
377
378 //Group4
379 //https://stackoverflow.com/questions/4511652/looping-through-list-items-with-jquery
380// http://jsfiddle.net/mblase75/wE4S8/
381//from: https://stackoverflow.com/questions/20105762/show-n-number-of-list-elements-at-a-time-jquery
382$(document).ready(function (){
383    var elements =$("#aviationLinks li");
384    var index=0;
385    var showTwo = function (index) {
386        if (index >=elements.length){
387            index = 0
388        }
389        elements.hide().slice(index, index+2).show();
390        setTimeout(function(){
391            showTwo(index +2)
392        }, 5000);
393        }
394        showTwo(0);
395    });
396
397//Make key-value pairs on id and hyperlinks
398const linkIDref = {
399    delphiInfo:"https://delphitechcorp.com/",
400    vrCityInfo:"https://vrcity.ca/",
401    auroraInfo:"https://auroraaerial.aero",
402    virbelaURL:"https://virbela.com",
403    amazonURL:"https://amazon.com",
404    moodleURL:"https://moodle.org",
405    xPlaneURL:"https://x-plane.com",
406    wordpressURL:"https://wordpress.org",
407    gitHub:"https://github.com",
408    googleMeet:"https://meet.google.com",
409    slack:"https://slack.com",
410    wrike:"https://wrike.com",
411    airbus:"https://airbus.com",
412    boeing:"https://boeing.com",
413    lockheedMartin:"https://lockheedmartin.com",
414    rtx:"https://rtx.com",
415    geAviation:"https://geaviation.com",
416    safran:"https://safran-group.com",
417    leonardo:"https://leonardocompany.com",
418    baseSystems:"https://baesystems.com"
419}
420//use key-values to populate the dynamic hyperlink functionality.
421jQuery(".link").click(function(){
422    $linkID = $(this).attr("id");
423    window.location.href=linkIDref[$linkID];
424})
425
426$( function() {
427    $( ".groups" ).draggable();
428  } );
429  
430  $( function() {
431    $( ".groups" ).resizable();
432  } );body{
433    font-family: Arial, Helvetica, sans-serif;
434    font-size:1em;
435    background-color: skyblue;
436}
437h1{
438    text-align:center;
439}
440div:not(.ui-resizable-handle){  /* Added an exception to your generic rule */
441    border: black solid 2px;
442    border-radius:10px;
443}
444#main{
445    width:100%;
446    height: fit-content;
447    border:none;
448}
449#dashboard{
450    margin:auto auto auto auto;
451    display:grid;
452    border:none;
453    grid-template-columns: auto auto;
454    column-gap: 1em;
455    row-gap: 1em;
456    width:100%;
457    height:fit-content;    
458}
459#dateTime{
460    margin:1em auto 1em auto;
461    border: black solid 2px;
462    width:fit-content;
463    height:fit-content;
464    padding:1em;
465    font-size: larger;
466    font-weight: bolder;
467    background-color: snow;
468}
469.groups{
470    position: relative;
471    margin:auto auto auto auto;
472    width:35em;
473    min-width: 32.5em;
474    background-color: snow;
475    padding:0px;
476    overflow: hidden;
477}
478.groups h2{
479    position:relative;
480    top:-0.9em;
481    text-align:center;
482    background-color: blue;
483    color:white;
484    cursor:move;
485}
486ul{
487    list-style-type: none;
488    position:relative;
489    top:-0.5em;
490}
491#group1{
492    height:10em;
493}
494#group2{
495    height:10em;
496}
497.clickToShowBlock{
498    cursor:pointer;
499    display:none;
500    position:absolute;
501    top: 3.5em;
502    left:12em;
503    height:fit-content;
504    width:20em;
505    border:none;
506}
507.hoverToShowBlock{
508    display:none;
509    position:absolute;
510    top: 4em;
511    left:12em;
512    height:fit-content;
513    width:20em;
514    border:none;
515}
516.hoverToShowBlock img{
517    max-height:6em;
518    max-width:19em;
519}
520dd{
521    padding: 0.5em 0em 0.5em 0em;
522}
523.showLinks{
524    display:none;
525}
526#showLinksButton{
527    position:absolute;
528    right:0.5em;
529    top:2em;
530    font-size:2em;
531}
532li:hover{
533    cursor:pointer;
534}
535
536dd:hover{
537    cursor:pointer;
538}
539@media screen and (max-width: 1200px)
540{    
541    #dashboard{
542
543        grid-template-columns: auto;
544    }
545}

1$(function()){
2$( "resizable" ).resizable();
3});
4var $linkID, $linkURL
5
6function changeTime(){
7    let d= new Date(); //built in JS function
8    let mm = ('0' + d.getMinutes()).slice(-2);
9    let ss = ('0' + d.getSeconds()).slice(-2);
10    document.getElementById("dateTime").innerHTML = `${d.getMonth()}/${d.getDay()}/${d.getYear()} ${d.getHours()}:${mm}:${ss}`;
11}
12
13setInterval(changeTime, 1000); //updates the time dynamically.
14
15//Group1
16//Click to Show functionality: group 1 
17//clicks hide all divs, then uses a "title" attribute as a variable to toggle the associated box showing that title's information. 
18//I am no marketer, so the text is some basic info I read on the websites.
19$(document).ready(function(){
20    $(".clickToShow").click(function(){
21        $(".clickToShowBlock").hide();
22        let idTag = '#' + this.getAttribute("title");        
23      $(idTag).toggle();
24    });
25  });
26
27//Group 2
28//Same as above, except using hover instead of click to show the images.
29
30$(document).ready(function(){    
31    $(".hoverToShow").hover(function(){let idTag = '#' + this.getAttribute("title");
32        $(idTag).show();
33      }, function(){let idTag = '#' + this.getAttribute("title");
34        $(idTag).hide();      
35      $(".hoverToShowBlock").hide();
36    });
37  });
38
39  //Group3
40  //follows group 1 method, but loads all links at the same time by toggling a button.
41  
42$(document).ready(function(){
43    $("#showLinksButton").click(function(){        
44      $(".showLinks").toggle();
45    });
46  });
47
48  $(function(){
49    $("#showLinksButton").click(function () {
50       $(this).text(function(i, text){
51           return text === "Show Links" ? "Hide Links" : "Show Links";
52       })
53    });
54 })
55 //https://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery
56
57 //Group4
58 //https://stackoverflow.com/questions/4511652/looping-through-list-items-with-jquery
59// http://jsfiddle.net/mblase75/wE4S8/
60//from: https://stackoverflow.com/questions/20105762/show-n-number-of-list-elements-at-a-time-jquery
61$(document).ready(function (){
62    var elements =$("#aviationLinks li");
63    var index=0;
64    var showTwo = function (index) {
65        if (index >=elements.length){
66            index = 0
67        }
68        elements.hide().slice(index, index+2).show();
69        setTimeout(function(){
70            showTwo(index +2)
71        }, 5000);
72        }
73        showTwo(0);
74    });
75
76//Make key-value pairs on id and hyperlinks
77const linkIDref = {
78    delphiInfo:"https://delphitechcorp.com/",
79    vrCityInfo:"https://vrcity.ca/",
80    auroraInfo:"https://auroraaerial.aero",
81    virbelaURL:"https://virbela.com",
82    amazonURL:"https://amazon.com",
83    moodleURL:"https://moodle.org",
84    xPlaneURL:"https://x-plane.com",
85    wordpressURL:"https://wordpress.org",
86    gitHub:"https://github.com",
87    googleMeet:"https://meet.google.com",
88    slack:"https://slack.com",
89    wrike:"https://wrike.com",
90    airbus:"https://airbus.com",
91    boeing:"https://boeing.com",
92    lockheedMartin:"https://lockheedmartin.com",
93    rtx:"https://rtx.com",
94    geAviation:"https://geaviation.com",
95    safran:"https://safran-group.com",
96    leonardo:"https://leonardocompany.com",
97    baseSystems:"https://baesystems.com"
98}
99//use key-values to populate the dynamic hyperlink functionality.
100jQuery(".link").click(function(){
101    $linkID = $(this).attr("id");
102    window.location.href=linkIDref[$linkID];
103})
104
105$( function() {
106    $( ".groups" ).draggable();
107  } );
108  
109  $( function() {
110    $( ".groups" ).resizable();
111  } );body{
112    font-family: Arial, Helvetica, sans-serif;
113    font-size:1em;
114    background-color: skyblue;
115}
116h1{
117    text-align:center;
118}
119div{
120    border: black solid 2px;
121    border-radius:10px;
122}
123#main{
124    width:100%;
125    height: fit-content;
126    border:none;
127}
128#dashboard{
129    margin:auto auto auto auto;
130    display:grid;
131    border:none;
132    grid-template-columns: auto auto;
133    column-gap: 1em;
134    row-gap: 1em;
135    width:100%;
136    height:fit-content;    
137}
138#dateTime{
139    margin:1em auto 1em auto;
140    border: black solid 2px;
141    width:fit-content;
142    height:fit-content;
143    padding:1em;
144    font-size: larger;
145    font-weight: bolder;
146    background-color: snow;
147}
148.groups{
149    position: relative;
150    margin:auto auto auto auto;
151    width:35em;
152    min-width: 32.5em;
153    background-color: snow;
154    padding:0px;
155    overflow: hidden;
156}
157.groups h2{
158    position:relative;
159    top:-0.9em;
160    text-align:center;
161    background-color: blue;
162    color:white;
163    cursor:move;
164}
165ul{
166    list-style-type: none;
167    position:relative;
168    top:-0.5em;
169}
170#group1{
171    height:10em;
172}
173#group2{
174    height:10em;
175}
176.clickToShowBlock{
177    cursor:pointer;
178    display:none;
179    position:absolute;
180    top: 3.5em;
181    left:12em;
182    height:fit-content;
183    width:20em;
184    border:none;
185}
186.hoverToShowBlock{
187    display:none;
188    position:absolute;
189    top: 4em;
190    left:12em;
191    height:fit-content;
192    width:20em;
193    border:none;
194}
195.hoverToShowBlock img{
196    max-height:6em;
197    max-width:19em;
198}
199dd{
200    padding: 0.5em 0em 0.5em 0em;
201}
202.showLinks{
203    display:none;
204}
205#showLinksButton{
206    position:absolute;
207    right:0.5em;
208    top:2em;
209    font-size:2em;
210}
211li:hover{
212    cursor:pointer;
213}
214
215dd:hover{
216    cursor:pointer;
217}
218@media screen and (max-width: 1200px)
219{    
220    #dashboard{
221
222        grid-template-columns: auto;
223    }
224}<!DOCTYPE html>
225<html lang="en">
226  <head>
227    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
228    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
229    <link rel="stylesheet" href="stylesheet2.css">
230    <meta charset="UTF-8" />
231    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
232    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
233    <title>Delphi Tech Corp Front-End Development Team Coding Test</title>
234    <script src="script2.js" defer></script>
235  </head>
236  <body>
237    <h1>TASK 2 Dashboard</h1>
238    <div id="main">
239      <div id = "dateTime"></div>
240      <div id = "dashboard">
241        <div id="group1" class = "groups">
242          <h2 id="group1h2">Group 1 - Alan Zheng's Companys + Products</h2> 
243          <ul>
244            <li class="clickToShow" title = "vrCityInfo">VR City</li>
245            <li class="clickToShow"  title = "delphiInfo">Delphi Tech Corp</li>
246            <li class="clickToShow"  title = "auroraInfo">Aurora Aerial</li>
247          </ul>
248          <div id="vrCityInfo" class="clickToShowBlock link"> 
249            VR City is a virtual aviation training company. Our virtual community provides people with the learning tools to learn how to fly. 
250            <br>
251            https://vrcity.ca/
252          </div>
253          <div id="delphiInfo" class="clickToShowBlock link"> 
254            Delphi Technology Corp is integrating new technologies such as augmented reality and virtuality into the aerospace and aviation industries!
255            <br>
256            https://delphitechcorp.com/
257          </div>  
258          <div id="auroraInfo" class="clickToShowBlock link">
259            Aurora Aerial offers custom drone manufacturing. We develop both drone hardware and software.
260            <br>
261            https://auroraaerial.aero
262          </div>
263          
264        </div>
265        <div id="group2" class = "groups">
266          <h2 id="group2h2">Group 2 - Technology products used at Delphi</h2>
267          <ul>
268            <li class="hoverToShow link" title= "virbela" id= "virbelaURL">Virbela</li>
269            <li class="hoverToShow link" title= "amazon" id= "amazonURL">Amazon</li>
270            <li class="hoverToShow link" title= "moodle" id= "moodleURL">Moodle</li>
271            <li class="hoverToShow link" title= "xPlane" id= "xPlaneURL">X-Plane</li>
272            <li class="hoverToShow link" title= "wordpress" id= "wordpressURL">Wordpress</li>
273          </ul>
274          
275          <div id="virbela" class="hoverToShowBlock">
276            <img alt="Virbela" src="Logos/5fab9393da4ffe1e20d14cc6_virbela-logo-black-website.png"> 
277          </div>
278          <div id="amazon" class="hoverToShowBlock">
279            <img alt="Amazon" src="Logos/NicePng_amazon-png_197561.png">  
280          </div>  
281          <div id="moodle" class="hoverToShowBlock">
282            <img alt="Moodle" src="Logos/moodle_logo_small.svg">  
283          </div>
284          <div id="xPlane" class="hoverToShowBlock"> 
285            <img alt="X-Plane" src="Logos/x-plane-logo.svg"> 
286          </div>  
287          <div id="wordpress" class="hoverToShowBlock"> 
288            <img alt="Virbela" src="Logos/NicePng_wordpress-logo-png_395752.png"> 
289          </div>
290
291        </div>
292        <div id="group3" class = "groups">
293          <h2 id="group3h2">Group 3 - Websites used at Delphi</h2>
294          <ul>
295            <dt>GitHub</dt>
296              <dd class="showLinks link" id="gitHub">https://github.com</dd>  
297            <dt>Google Meet</dt>
298              <dd class="showLinks link" id="googleMeet">https://meet.google.com</dd>
299            <dt>Slack</dt>
300              <dd class="showLinks link" id="slack">https://slack.com</dd>
301            <dt>Wrike</dt>
302              <dd class="showLinks link" id="wrike">https://wrike.com</dd>    
303          </ul>
304          <button id="showLinksButton">Show Links</button>
305        </div>
306        <div id="group4" class = "groups">
307          <h2 id="group4h2">Group 4 - Aerospace Companies</h2>
308
309          <ul id="aviationLinks">
310            <li class = "cycle link" id="airbus">airbus.com</li> 
311            <li class = "cycle link" id="boeing">boeing.com</li>
312            <li class = "cycle link" id="lockheedMartin">lockheedmartin.com</li>
313            <li class = "cycle link" id="rtx">rtx.com</li>
314            <li class = "cycle link" id="geAviation">geaviation.com</li>
315            <li class = "cycle link" id="safran">safran-group.com</li>
316            <li class = "cycle link" id="leonardo">leonardocompany.com</li>
317            <li class = "cycle link" id="baseSystems">baesystems.com</li>
318          </ul>
319        </div>
320      </div>
321    </div>
322  </body>
323</html><link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
324div:not(.ui-resizable-handle){
325var $linkID, $linkURL
326
327function changeTime(){
328    let d= new Date(); //built in JS function
329    let mm = ('0' + d.getMinutes()).slice(-2);
330    let ss = ('0' + d.getSeconds()).slice(-2);
331    document.getElementById("dateTime").innerHTML = `${d.getMonth()}/${d.getDay()}/${d.getYear()} ${d.getHours()}:${mm}:${ss}`;
332}
333
334setInterval(changeTime, 1000); //updates the time dynamically.
335
336//Group1
337//Click to Show functionality: group 1 
338//clicks hide all divs, then uses a "title" attribute as a variable to toggle the associated box showing that title's information. 
339//I am no marketer, so the text is some basic info I read on the websites.
340$(document).ready(function(){
341    $(".clickToShow").click(function(){
342        $(".clickToShowBlock").hide();
343        let idTag = '#' + this.getAttribute("title");        
344      $(idTag).toggle();
345    });
346  });
347
348//Group 2
349//Same as above, except using hover instead of click to show the images.
350
351$(document).ready(function(){    
352    $(".hoverToShow").hover(function(){let idTag = '#' + this.getAttribute("title");
353        $(idTag).show();
354      }, function(){let idTag = '#' + this.getAttribute("title");
355        $(idTag).hide();      
356      $(".hoverToShowBlock").hide();
357    });
358  });
359
360  //Group3
361  //follows group 1 method, but loads all links at the same time by toggling a button.
362  
363$(document).ready(function(){
364    $("#showLinksButton").click(function(){        
365      $(".showLinks").toggle();
366    });
367  });
368
369  $(function(){
370    $("#showLinksButton").click(function () {
371       $(this).text(function(i, text){
372           return text === "Show Links" ? "Hide Links" : "Show Links";
373       })
374    });
375 })
376 //https://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery
377
378 //Group4
379 //https://stackoverflow.com/questions/4511652/looping-through-list-items-with-jquery
380// http://jsfiddle.net/mblase75/wE4S8/
381//from: https://stackoverflow.com/questions/20105762/show-n-number-of-list-elements-at-a-time-jquery
382$(document).ready(function (){
383    var elements =$("#aviationLinks li");
384    var index=0;
385    var showTwo = function (index) {
386        if (index >=elements.length){
387            index = 0
388        }
389        elements.hide().slice(index, index+2).show();
390        setTimeout(function(){
391            showTwo(index +2)
392        }, 5000);
393        }
394        showTwo(0);
395    });
396
397//Make key-value pairs on id and hyperlinks
398const linkIDref = {
399    delphiInfo:"https://delphitechcorp.com/",
400    vrCityInfo:"https://vrcity.ca/",
401    auroraInfo:"https://auroraaerial.aero",
402    virbelaURL:"https://virbela.com",
403    amazonURL:"https://amazon.com",
404    moodleURL:"https://moodle.org",
405    xPlaneURL:"https://x-plane.com",
406    wordpressURL:"https://wordpress.org",
407    gitHub:"https://github.com",
408    googleMeet:"https://meet.google.com",
409    slack:"https://slack.com",
410    wrike:"https://wrike.com",
411    airbus:"https://airbus.com",
412    boeing:"https://boeing.com",
413    lockheedMartin:"https://lockheedmartin.com",
414    rtx:"https://rtx.com",
415    geAviation:"https://geaviation.com",
416    safran:"https://safran-group.com",
417    leonardo:"https://leonardocompany.com",
418    baseSystems:"https://baesystems.com"
419}
420//use key-values to populate the dynamic hyperlink functionality.
421jQuery(".link").click(function(){
422    $linkID = $(this).attr("id");
423    window.location.href=linkIDref[$linkID];
424})
425
426$( function() {
427    $( ".groups" ).draggable();
428  } );
429  
430  $( function() {
431    $( ".groups" ).resizable();
432  } );body{
433    font-family: Arial, Helvetica, sans-serif;
434    font-size:1em;
435    background-color: skyblue;
436}
437h1{
438    text-align:center;
439}
440div:not(.ui-resizable-handle){  /* Added an exception to your generic rule */
441    border: black solid 2px;
442    border-radius:10px;
443}
444#main{
445    width:100%;
446    height: fit-content;
447    border:none;
448}
449#dashboard{
450    margin:auto auto auto auto;
451    display:grid;
452    border:none;
453    grid-template-columns: auto auto;
454    column-gap: 1em;
455    row-gap: 1em;
456    width:100%;
457    height:fit-content;    
458}
459#dateTime{
460    margin:1em auto 1em auto;
461    border: black solid 2px;
462    width:fit-content;
463    height:fit-content;
464    padding:1em;
465    font-size: larger;
466    font-weight: bolder;
467    background-color: snow;
468}
469.groups{
470    position: relative;
471    margin:auto auto auto auto;
472    width:35em;
473    min-width: 32.5em;
474    background-color: snow;
475    padding:0px;
476    overflow: hidden;
477}
478.groups h2{
479    position:relative;
480    top:-0.9em;
481    text-align:center;
482    background-color: blue;
483    color:white;
484    cursor:move;
485}
486ul{
487    list-style-type: none;
488    position:relative;
489    top:-0.5em;
490}
491#group1{
492    height:10em;
493}
494#group2{
495    height:10em;
496}
497.clickToShowBlock{
498    cursor:pointer;
499    display:none;
500    position:absolute;
501    top: 3.5em;
502    left:12em;
503    height:fit-content;
504    width:20em;
505    border:none;
506}
507.hoverToShowBlock{
508    display:none;
509    position:absolute;
510    top: 4em;
511    left:12em;
512    height:fit-content;
513    width:20em;
514    border:none;
515}
516.hoverToShowBlock img{
517    max-height:6em;
518    max-width:19em;
519}
520dd{
521    padding: 0.5em 0em 0.5em 0em;
522}
523.showLinks{
524    display:none;
525}
526#showLinksButton{
527    position:absolute;
528    right:0.5em;
529    top:2em;
530    font-size:2em;
531}
532li:hover{
533    cursor:pointer;
534}
535
536dd:hover{
537    cursor:pointer;
538}
539@media screen and (max-width: 1200px)
540{    
541    #dashboard{
542
543        grid-template-columns: auto;
544    }
545}<!DOCTYPE html>
546<html lang="en">
547  <head>
548    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
549    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
550    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"><!-- Added the jQuery-ui CSS file -->
551    <link rel="stylesheet" href="stylesheet2.css">
552    <meta charset="UTF-8" />
553    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
554    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
555    <title>Delphi Tech Corp Front-End Development Team Coding Test</title>
556    <script src="script2.js" defer></script>
557  </head>
558  <body>
559    <h1>TASK 2 Dashboard</h1>
560    <div id="main">
561      <div id = "dateTime"></div>
562      <div id = "dashboard">
563        <div id="group1" class = "groups">
564          <h2 id="group1h2">Group 1 - Alan Zheng's Companys + Products</h2> 
565          <ul>
566            <li class="clickToShow" title = "vrCityInfo">VR City</li>
567            <li class="clickToShow"  title = "delphiInfo">Delphi Tech Corp</li>
568            <li class="clickToShow"  title = "auroraInfo">Aurora Aerial</li>
569          </ul>
570          <div id="vrCityInfo" class="clickToShowBlock link"> 
571            VR City is a virtual aviation training company. Our virtual community provides people with the learning tools to learn how to fly. 
572            <br>
573            https://vrcity.ca/
574          </div>
575          <div id="delphiInfo" class="clickToShowBlock link"> 
576            Delphi Technology Corp is integrating new technologies such as augmented reality and virtuality into the aerospace and aviation industries!
577            <br>
578            https://delphitechcorp.com/
579          </div>  
580          <div id="auroraInfo" class="clickToShowBlock link">
581            Aurora Aerial offers custom drone manufacturing. We develop both drone hardware and software.
582            <br>
583            https://auroraaerial.aero
584          </div>
585          
586        </div>
587        <div id="group2" class = "groups">
588          <h2 id="group2h2">Group 2 - Technology products used at Delphi</h2>
589          <ul>
590            <li class="hoverToShow link" title= "virbela" id= "virbelaURL">Virbela</li>
591            <li class="hoverToShow link" title= "amazon" id= "amazonURL">Amazon</li>
592            <li class="hoverToShow link" title= "moodle" id= "moodleURL">Moodle</li>
593            <li class="hoverToShow link" title= "xPlane" id= "xPlaneURL">X-Plane</li>
594            <li class="hoverToShow link" title= "wordpress" id= "wordpressURL">Wordpress</li>
595          </ul>
596          
597          <div id="virbela" class="hoverToShowBlock">
598            <img alt="Virbela" src="Logos/5fab9393da4ffe1e20d14cc6_virbela-logo-black-website.png"> 
599          </div>
600          <div id="amazon" class="hoverToShowBlock">
601            <img alt="Amazon" src="Logos/NicePng_amazon-png_197561.png">  
602          </div>  
603          <div id="moodle" class="hoverToShowBlock">
604            <img alt="Moodle" src="Logos/moodle_logo_small.svg">  
605          </div>
606          <div id="xPlane" class="hoverToShowBlock"> 
607            <img alt="X-Plane" src="Logos/x-plane-logo.svg"> 
608          </div>  
609          <div id="wordpress" class="hoverToShowBlock"> 
610            <img alt="Virbela" src="Logos/NicePng_wordpress-logo-png_395752.png"> 
611          </div>
612
613        </div>
614        <div id="group3" class = "groups">
615          <h2 id="group3h2">Group 3 - Websites used at Delphi</h2>
616          <ul>
617            <dt>GitHub</dt>
618              <dd class="showLinks link" id="gitHub">https://github.com</dd>  
619            <dt>Google Meet</dt>
620              <dd class="showLinks link" id="googleMeet">https://meet.google.com</dd>
621            <dt>Slack</dt>
622              <dd class="showLinks link" id="slack">https://slack.com</dd>
623            <dt>Wrike</dt>
624              <dd class="showLinks link" id="wrike">https://wrike.com</dd>    
625          </ul>
626          <button id="showLinksButton">Show Links</button>
627        </div>
628        <div id="group4" class = "groups">
629          <h2 id="group4h2">Group 4 - Aerospace Companies</h2>
630
631          <ul id="aviationLinks">
632            <li class = "cycle link" id="airbus">airbus.com</li> 
633            <li class = "cycle link" id="boeing">boeing.com</li>
634            <li class = "cycle link" id="lockheedMartin">lockheedmartin.com</li>
635            <li class = "cycle link" id="rtx">rtx.com</li>
636            <li class = "cycle link" id="geAviation">geaviation.com</li>
637            <li class = "cycle link" id="safran">safran-group.com</li>
638            <li class = "cycle link" id="leonardo">leonardocompany.com</li>
639            <li class = "cycle link" id="baseSystems">baesystems.com</li>
640          </ul>
641        </div>
642      </div>
643    </div>
644  </body>
645</html>

1override func viewDidLoad() {
2    super.viewDidLoad()
3        
4    arView.session.delegate = self
5        
6    // Check if the device supports the AR experience
7    if (!ARConfiguration.isSupported) {
8        TLogger.shared.error_objc("Device does not support Augmented Reality")
9        return
10    }
11        
12    guard let qrCodeReferenceImage = UIImage(named: "QRCode") else { return }
13    let detectionImages: Set<ARReferenceImage> = convertToReferenceImages([qrCodeReferenceImage])
14        
15    let configuration = ARWorldTrackingConfiguration()
16    configuration.detectionImages = detectionImages
17        
18    arView.session.run(configuration, options: [.resetTracking, .removeExistingAnchors])
19}
20func session(_ session: ARSession, didAdd anchors: [ARAnchor]) {
21    for anchor in anchors {
22        guard let imageAnchor = anchor as? ARImageAnchor else { return }
23        let position = imageAnchor.transform
24
25        addEntity(self.localModelPath!, position)
26    }
27}
28func addEntity(_ modelPath: URL, _ position: float4x4) {
29    // Load 3D Object as Entity
30    let entity = try! Entity.load(contentsOf: modelPath)
31        
32    // Create the Anchor which gets added to the AR Scene
33    let anchor = AnchorEntity(world: position)
34    anchor.addChild(entity)
35    anchor.transform.matrix = position
36    arView.scene.addAnchor(anchor)
37}
38anchor.transform.matrix = position
39

1override func viewDidLoad() {
2    super.viewDidLoad()
3        
4    arView.session.delegate = self
5        
6    // Check if the device supports the AR experience
7    if (!ARConfiguration.isSupported) {
8        TLogger.shared.error_objc("Device does not support Augmented Reality")
9        return
10    }
11        
12    guard let qrCodeReferenceImage = UIImage(named: "QRCode") else { return }
13    let detectionImages: Set<ARReferenceImage> = convertToReferenceImages([qrCodeReferenceImage])
14        
15    let configuration = ARWorldTrackingConfiguration()
16    configuration.detectionImages = detectionImages
17        
18    arView.session.run(configuration, options: [.resetTracking, .removeExistingAnchors])
19}
20func session(_ session: ARSession, didAdd anchors: [ARAnchor]) {
21    for anchor in anchors {
22        guard let imageAnchor = anchor as? ARImageAnchor else { return }
23        let position = imageAnchor.transform
24
25        addEntity(self.localModelPath!, position)
26    }
27}
28func addEntity(_ modelPath: URL, _ position: float4x4) {
29    // Load 3D Object as Entity
30    let entity = try! Entity.load(contentsOf: modelPath)
31        
32    // Create the Anchor which gets added to the AR Scene
33    let anchor = AnchorEntity(world: position)
34    anchor.addChild(entity)
35    anchor.transform.matrix = position
36    arView.scene.addAnchor(anchor)
37}
38anchor.transform.matrix = position
39entity.position.z = anchor.position.z - 0.3
40

1override func viewDidLoad() {
2    super.viewDidLoad()
3        
4    arView.session.delegate = self
5        
6    // Check if the device supports the AR experience
7    if (!ARConfiguration.isSupported) {
8        TLogger.shared.error_objc("Device does not support Augmented Reality")
9        return
10    }
11        
12    guard let qrCodeReferenceImage = UIImage(named: "QRCode") else { return }
13    let detectionImages: Set<ARReferenceImage> = convertToReferenceImages([qrCodeReferenceImage])
14        
15    let configuration = ARWorldTrackingConfiguration()
16    configuration.detectionImages = detectionImages
17        
18    arView.session.run(configuration, options: [.resetTracking, .removeExistingAnchors])
19}
20func session(_ session: ARSession, didAdd anchors: [ARAnchor]) {
21    for anchor in anchors {
22        guard let imageAnchor = anchor as? ARImageAnchor else { return }
23        let position = imageAnchor.transform
24
25        addEntity(self.localModelPath!, position)
26    }
27}
28func addEntity(_ modelPath: URL, _ position: float4x4) {
29    // Load 3D Object as Entity
30    let entity = try! Entity.load(contentsOf: modelPath)
31        
32    // Create the Anchor which gets added to the AR Scene
33    let anchor = AnchorEntity(world: position)
34    anchor.addChild(entity)
35    anchor.transform.matrix = position
36    arView.scene.addAnchor(anchor)
37}
38anchor.transform.matrix = position
39entity.position.z = anchor.position.z - 0.3
40AnchorEntity(.image(group: "GroupName", name: "forModel"))
41

1override func viewDidLoad() {
2    super.viewDidLoad()
3        
4    arView.session.delegate = self
5        
6    // Check if the device supports the AR experience
7    if (!ARConfiguration.isSupported) {
8        TLogger.shared.error_objc("Device does not support Augmented Reality")
9        return
10    }
11        
12    guard let qrCodeReferenceImage = UIImage(named: "QRCode") else { return }
13    let detectionImages: Set<ARReferenceImage> = convertToReferenceImages([qrCodeReferenceImage])
14        
15    let configuration = ARWorldTrackingConfiguration()
16    configuration.detectionImages = detectionImages
17        
18    arView.session.run(configuration, options: [.resetTracking, .removeExistingAnchors])
19}
20func session(_ session: ARSession, didAdd anchors: [ARAnchor]) {
21    for anchor in anchors {
22        guard let imageAnchor = anchor as? ARImageAnchor else { return }
23        let position = imageAnchor.transform
24
25        addEntity(self.localModelPath!, position)
26    }
27}
28func addEntity(_ modelPath: URL, _ position: float4x4) {
29    // Load 3D Object as Entity
30    let entity = try! Entity.load(contentsOf: modelPath)
31        
32    // Create the Anchor which gets added to the AR Scene
33    let anchor = AnchorEntity(world: position)
34    anchor.addChild(entity)
35    anchor.transform.matrix = position
36    arView.scene.addAnchor(anchor)
37}
38anchor.transform.matrix = position
39entity.position.z = anchor.position.z - 0.3
40AnchorEntity(.image(group: "GroupName", name: "forModel"))
41import UIKit
42import RealityKit
43
44class ViewController: UIViewController {
45    
46    @IBOutlet var arView: ARView!
47    
48    override func viewDidLoad() {
49        super.viewDidLoad()
50        
51        let entity = ModelEntity(mesh: .generateSphere(radius: 0.1))
52        let anchor = AnchorEntity(.image(group: "AR Resources", 
53                                          name: "appClipCode"))
54        anchor.addChild(entity)
55        
56        entity.position.z = anchor.position.z - 0.3
57        arView.scene.anchors.append(anchor)
58    }
59}
60