kandi background
Explore Kits

zheng | 基于SpringSpringMVCMybatis分布式敏捷开发系统架构,提供整套公共微服务服务模块:集中权限管理(单点登录)、内容管理、支付中心、用户管理(支持第三方登录)、微信平台、存储系统、配置中心、日志分析、任务和通知等,支持服务治理、监控和追踪,努力为中小型企业打造全方位J2EE企业级开发解 | Messaging library

 by   shuzheng Java Version: Current License: MIT

 by   shuzheng Java Version: Current License: MIT

Download this library from

kandi X-RAY | zheng Summary

zheng is a Java library typically used in Messaging, Spring Boot, Spring applications. zheng has no bugs, it has no vulnerabilities, it has build file available, it has a Permissive License and it has medium support. You can download it from GitHub.
基于Spring+SpringMVC+Mybatis分布式敏捷开发系统架构,提供整套公共微服务服务模块:集中权限管理(单点登录)、内容管理、支付中心、用户管理(支持第三方登录)、微信平台、存储系统、配置中心、日志分析、任务和通知等,支持服务治理、监控和追踪,努力为中小型企业打造全方位J2EE企业级开发解决方案。
Support
Support
Quality
Quality
Security
Security
License
License
Reuse
Reuse

kandi-support Support

  • zheng has a medium active ecosystem.
  • It has 16240 star(s) with 7463 fork(s). There are 1487 watchers for this library.
  • It had no major release in the last 12 months.
  • There are 34 open issues and 62 have been closed. On average issues are closed in 69 days. There are 38 open pull requests and 0 closed requests.
  • It has a neutral sentiment in the developer community.
  • The latest version of zheng is current.
zheng Support
Best in #Messaging
Average in #Messaging
zheng Support
Best in #Messaging
Average in #Messaging

quality kandi Quality

  • zheng has 0 bugs and 0 code smells.
zheng Quality
Best in #Messaging
Average in #Messaging
zheng Quality
Best in #Messaging
Average in #Messaging

securitySecurity

  • zheng has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
  • zheng code analysis shows 0 unresolved vulnerabilities.
  • There are 0 security hotspots that need review.
zheng Security
Best in #Messaging
Average in #Messaging
zheng Security
Best in #Messaging
Average in #Messaging

license License

  • zheng is licensed under the MIT License. This license is Permissive.
  • Permissive licenses have the least restrictions, and you can use them in most projects.
zheng License
Best in #Messaging
Average in #Messaging
zheng License
Best in #Messaging
Average in #Messaging

buildReuse

  • zheng releases are not available. You will need to build from source code and install.
  • Build file is available. You can build the component from source.
  • Installation instructions are not available. Examples and code snippets are available.
zheng Reuse
Best in #Messaging
Average in #Messaging
zheng Reuse
Best in #Messaging
Average in #Messaging
Top functions reviewed by kandi - BETA

kandi has reviewed zheng and discovered the below as its top functions. This is intended to give you an instant insight into zheng implemented functionality, and help decide if they suit your requirements.

  • Create a generator .
  • Gets the HTML of the request .
  • validate client session
  • generate random image
  • Decompress a jar file
  • encode content to AES
  • Around invocation point .
  • Gets authorization policy .
  • Delete UMS session .
  • Gets the MD5 hash of a string .

zheng Key Features

基于Spring+SpringMVC+Mybatis分布式敏捷开发系统架构,提供整套公共微服务服务模块:集中权限管理(单点登录)、内容管理、支付中心、用户管理(支持第三方登录)、微信平台、存储系统、配置中心、日志分析、任务和通知等,支持服务治理、监控和追踪,努力为中小型企业打造全方位J2EE企业级开发解决方案。

组织结构

copy iconCopydownload iconDownload
zheng
├── zheng-common -- SSM框架公共模块
├── zheng-admin -- 后台管理模板
├── zheng-ui -- 前台thymeleaf模板[端口:1000]
├── zheng-config -- 配置中心[端口:1001]
├── zheng-upms -- 用户权限管理系统
|    ├── zheng-upms-common -- upms系统公共模块
|    ├── zheng-upms-dao -- 代码生成模块,无需开发
|    ├── zheng-upms-client -- 集成upms依赖包,提供单点认证、授权、统一会话管理
|    ├── zheng-upms-rpc-api -- rpc接口包
|    ├── zheng-upms-rpc-service -- rpc服务提供者
|    └── zheng-upms-server -- 用户权限系统及SSO服务端[端口:1111]
├── zheng-cms -- 内容管理系统
|    ├── zheng-cms-common -- cms系统公共模块
|    ├── zheng-cms-dao -- 代码生成模块,无需开发
|    ├── zheng-cms-rpc-api -- rpc接口包
|    ├── zheng-cms-rpc-service -- rpc服务提供者
|    ├── zheng-cms-search -- 搜索服务[端口:2221]
|    ├── zheng-cms-admin -- 后台管理[端口:2222]
|    ├── zheng-cms-job -- 消息队列、任务调度等[端口:2223]
|    └── zheng-cms-web -- 网站前台[端口:2224]
├── zheng-pay -- 支付系统
|    ├── zheng-pay-common -- pay系统公共模块
|    ├── zheng-pay-dao -- 代码生成模块,无需开发
|    ├── zheng-pay-rpc-api -- rpc接口包
|    ├── zheng-pay-rpc-service -- rpc服务提供者
|    ├── zheng-pay-sdk -- 开发工具包
|    ├── zheng-pay-admin -- 后台管理[端口:3331]
|    └── zheng-pay-web -- 演示示例[端口:3332]
├── zheng-ucenter -- 用户系统(包括第三方登录)
|    ├── zheng-ucenter-common -- ucenter系统公共模块
|    ├── zheng-ucenter-dao -- 代码生成模块,无需开发
|    ├── zheng-ucenter-rpc-api -- rpc接口包
|    ├── zheng-ucenter-rpc-service -- rpc服务提供者
|    └── zheng-ucenter-web -- 网站前台[端口:4441]
├── zheng-wechat -- 微信系统
|    ├── zheng-wechat-mp -- 微信公众号管理系统
|    |    ├── zheng-wechat-mp-dao -- 代码生成模块,无需开发
|    |    ├── zheng-wechat-mp-service -- 业务逻辑
|    |    └── zheng-wechat-mp-admin -- 后台管理[端口:5551]
|    └── zheng-ucenter-app -- 微信小程序后台
├── zheng-api -- API接口总线系统
|    ├── zheng-api-common -- api系统公共模块
|    ├── zheng-api-rpc-api -- rpc接口包
|    ├── zheng-api-rpc-service -- rpc服务提供者
|    └── zheng-api-server -- api系统服务端[端口:6666]
├── zheng-oss -- 对象存储系统
|    ├── zheng-oss-sdk -- 开发工具包
|    ├── zheng-oss-web -- 前台接口[端口:7771]
|    └── zheng-oss-admin -- 后台管理[端口:7772]
├── zheng-message -- 实时通知系统
|    ├── zheng-message-sdk -- 开发工具包
|    ├── zheng-message-server -- 服务端[端口:8881,SocketIO端口:8882]
|    └── zheng-message-client -- 客户端
├── zheng-shop -- 电子商务系统
└── zheng-demo -- 示例模块(包含一些示例代码等)
     ├── zheng-demo-rpc-api -- rpc接口包
     ├── zheng-demo-rpc-service -- rpc服务提供者
     └── zheng-demo-web -- 演示示例[端口:9999]

框架规范约定

copy iconCopydownload iconDownload

- service类,需要在叫名`service`的包下,并以`Service`结尾,如`CmsArticleServiceImpl`

- controller类,需要在以`controller`结尾的包下,类名以Controller结尾,如`CmsArticleController.java`,并继承`BaseController`

- spring task类,需要在叫名`task`的包下,并以`Task`结尾,如`TestTask.java`

- mapper.xml,需要在名叫`mapper`的包下,并以`Mapper.xml`结尾,如`CmsArticleMapper.xml`

- mapper接口,需要在名叫`mapper`的包下,并以`Mapper`结尾,如`CmsArticleMapper.java`

- model实体类,需要在名叫`model`的包下,命名规则为数据表转驼峰规则,如`CmsArticle.java`

- spring配置文件,命名规则为`applicationContext-*.xml`

- 类名:首字母大写驼峰规则;方法名:首字母小写驼峰规则;常量:全大写;变量:首字母小写驼峰规则,尽量非缩写

- springmvc配置加到对应模块的`springMVC-servlet.xml`文件里

- 配置文件放到`src/main/resources`目录下

- 静态资源文件放到`src/main/webapp/resources`目录下

- jsp文件,需要在`/WEB-INF/jsp`目录下

- `RequestMapping`和返回物理试图路径的url尽量写全路径,如:`@RequestMapping("/manage")`、`return "/manage/index"`

- `RequestMapping`指定method

- 模块命名为`项目`-`子项目`-`业务`,如`zheng-cms-admin`

- 数据表命名为:`子系统`_`表`,如`cms_article`

- 更多规范,参考[[阿里巴巴Java开发手册] http://git.oschina.net/shuzheng/zheng/attach_files

Jquery .resizable function - resize icon not displaying properly

copy iconCopydownload iconDownload
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
div:not(.ui-resizable-handle){
var $linkID, $linkURL

function changeTime(){
    let d= new Date(); //built in JS function
    let mm = ('0' + d.getMinutes()).slice(-2);
    let ss = ('0' + d.getSeconds()).slice(-2);
    document.getElementById("dateTime").innerHTML = `${d.getMonth()}/${d.getDay()}/${d.getYear()} ${d.getHours()}:${mm}:${ss}`;
}

setInterval(changeTime, 1000); //updates the time dynamically.

//Group1
//Click to Show functionality: group 1 
//clicks hide all divs, then uses a "title" attribute as a variable to toggle the associated box showing that title's information. 
//I am no marketer, so the text is some basic info I read on the websites.
$(document).ready(function(){
    $(".clickToShow").click(function(){
        $(".clickToShowBlock").hide();
        let idTag = '#' + this.getAttribute("title");        
      $(idTag).toggle();
    });
  });

//Group 2
//Same as above, except using hover instead of click to show the images.

$(document).ready(function(){    
    $(".hoverToShow").hover(function(){let idTag = '#' + this.getAttribute("title");
        $(idTag).show();
      }, function(){let idTag = '#' + this.getAttribute("title");
        $(idTag).hide();      
      $(".hoverToShowBlock").hide();
    });
  });

  //Group3
  //follows group 1 method, but loads all links at the same time by toggling a button.
  
$(document).ready(function(){
    $("#showLinksButton").click(function(){        
      $(".showLinks").toggle();
    });
  });

  $(function(){
    $("#showLinksButton").click(function () {
       $(this).text(function(i, text){
           return text === "Show Links" ? "Hide Links" : "Show Links";
       })
    });
 })
 //https://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery

 //Group4
 //https://stackoverflow.com/questions/4511652/looping-through-list-items-with-jquery
// http://jsfiddle.net/mblase75/wE4S8/
//from: https://stackoverflow.com/questions/20105762/show-n-number-of-list-elements-at-a-time-jquery
$(document).ready(function (){
    var elements =$("#aviationLinks li");
    var index=0;
    var showTwo = function (index) {
        if (index >=elements.length){
            index = 0
        }
        elements.hide().slice(index, index+2).show();
        setTimeout(function(){
            showTwo(index +2)
        }, 5000);
        }
        showTwo(0);
    });

//Make key-value pairs on id and hyperlinks
const linkIDref = {
    delphiInfo:"https://delphitechcorp.com/",
    vrCityInfo:"https://vrcity.ca/",
    auroraInfo:"https://auroraaerial.aero",
    virbelaURL:"https://virbela.com",
    amazonURL:"https://amazon.com",
    moodleURL:"https://moodle.org",
    xPlaneURL:"https://x-plane.com",
    wordpressURL:"https://wordpress.org",
    gitHub:"https://github.com",
    googleMeet:"https://meet.google.com",
    slack:"https://slack.com",
    wrike:"https://wrike.com",
    airbus:"https://airbus.com",
    boeing:"https://boeing.com",
    lockheedMartin:"https://lockheedmartin.com",
    rtx:"https://rtx.com",
    geAviation:"https://geaviation.com",
    safran:"https://safran-group.com",
    leonardo:"https://leonardocompany.com",
    baseSystems:"https://baesystems.com"
}
//use key-values to populate the dynamic hyperlink functionality.
jQuery(".link").click(function(){
    $linkID = $(this).attr("id");
    window.location.href=linkIDref[$linkID];
})

$( function() {
    $( ".groups" ).draggable();
  } );
  
  $( function() {
    $( ".groups" ).resizable();
  } );
body{
    font-family: Arial, Helvetica, sans-serif;
    font-size:1em;
    background-color: skyblue;
}
h1{
    text-align:center;
}
div:not(.ui-resizable-handle){  /* Added an exception to your generic rule */
    border: black solid 2px;
    border-radius:10px;
}
#main{
    width:100%;
    height: fit-content;
    border:none;
}
#dashboard{
    margin:auto auto auto auto;
    display:grid;
    border:none;
    grid-template-columns: auto auto;
    column-gap: 1em;
    row-gap: 1em;
    width:100%;
    height:fit-content;    
}
#dateTime{
    margin:1em auto 1em auto;
    border: black solid 2px;
    width:fit-content;
    height:fit-content;
    padding:1em;
    font-size: larger;
    font-weight: bolder;
    background-color: snow;
}
.groups{
    position: relative;
    margin:auto auto auto auto;
    width:35em;
    min-width: 32.5em;
    background-color: snow;
    padding:0px;
    overflow: hidden;
}
.groups h2{
    position:relative;
    top:-0.9em;
    text-align:center;
    background-color: blue;
    color:white;
    cursor:move;
}
ul{
    list-style-type: none;
    position:relative;
    top:-0.5em;
}
#group1{
    height:10em;
}
#group2{
    height:10em;
}
.clickToShowBlock{
    cursor:pointer;
    display:none;
    position:absolute;
    top: 3.5em;
    left:12em;
    height:fit-content;
    width:20em;
    border:none;
}
.hoverToShowBlock{
    display:none;
    position:absolute;
    top: 4em;
    left:12em;
    height:fit-content;
    width:20em;
    border:none;
}
.hoverToShowBlock img{
    max-height:6em;
    max-width:19em;
}
dd{
    padding: 0.5em 0em 0.5em 0em;
}
.showLinks{
    display:none;
}
#showLinksButton{
    position:absolute;
    right:0.5em;
    top:2em;
    font-size:2em;
}
li:hover{
    cursor:pointer;
}

dd:hover{
    cursor:pointer;
}
@media screen and (max-width: 1200px)
{    
    #dashboard{

        grid-template-columns: auto;
    }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"><!-- Added the jQuery-ui CSS file -->
    <link rel="stylesheet" href="stylesheet2.css">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Delphi Tech Corp Front-End Development Team Coding Test</title>
    <script src="script2.js" defer></script>
  </head>
  <body>
    <h1>TASK 2 Dashboard</h1>
    <div id="main">
      <div id = "dateTime"></div>
      <div id = "dashboard">
        <div id="group1" class = "groups">
          <h2 id="group1h2">Group 1 - Alan Zheng's Companys + Products</h2> 
          <ul>
            <li class="clickToShow" title = "vrCityInfo">VR City</li>
            <li class="clickToShow"  title = "delphiInfo">Delphi Tech Corp</li>
            <li class="clickToShow"  title = "auroraInfo">Aurora Aerial</li>
          </ul>
          <div id="vrCityInfo" class="clickToShowBlock link"> 
            VR City is a virtual aviation training company. Our virtual community provides people with the learning tools to learn how to fly. 
            <br>
            https://vrcity.ca/
          </div>
          <div id="delphiInfo" class="clickToShowBlock link"> 
            Delphi Technology Corp is integrating new technologies such as augmented reality and virtuality into the aerospace and aviation industries!
            <br>
            https://delphitechcorp.com/
          </div>  
          <div id="auroraInfo" class="clickToShowBlock link">
            Aurora Aerial offers custom drone manufacturing. We develop both drone hardware and software.
            <br>
            https://auroraaerial.aero
          </div>
          
        </div>
        <div id="group2" class = "groups">
          <h2 id="group2h2">Group 2 - Technology products used at Delphi</h2>
          <ul>
            <li class="hoverToShow link" title= "virbela" id= "virbelaURL">Virbela</li>
            <li class="hoverToShow link" title= "amazon" id= "amazonURL">Amazon</li>
            <li class="hoverToShow link" title= "moodle" id= "moodleURL">Moodle</li>
            <li class="hoverToShow link" title= "xPlane" id= "xPlaneURL">X-Plane</li>
            <li class="hoverToShow link" title= "wordpress" id= "wordpressURL">Wordpress</li>
          </ul>
          
          <div id="virbela" class="hoverToShowBlock">
            <img alt="Virbela" src="Logos/5fab9393da4ffe1e20d14cc6_virbela-logo-black-website.png"> 
          </div>
          <div id="amazon" class="hoverToShowBlock">
            <img alt="Amazon" src="Logos/NicePng_amazon-png_197561.png">  
          </div>  
          <div id="moodle" class="hoverToShowBlock">
            <img alt="Moodle" src="Logos/moodle_logo_small.svg">  
          </div>
          <div id="xPlane" class="hoverToShowBlock"> 
            <img alt="X-Plane" src="Logos/x-plane-logo.svg"> 
          </div>  
          <div id="wordpress" class="hoverToShowBlock"> 
            <img alt="Virbela" src="Logos/NicePng_wordpress-logo-png_395752.png"> 
          </div>

        </div>
        <div id="group3" class = "groups">
          <h2 id="group3h2">Group 3 - Websites used at Delphi</h2>
          <ul>
            <dt>GitHub</dt>
              <dd class="showLinks link" id="gitHub">https://github.com</dd>  
            <dt>Google Meet</dt>
              <dd class="showLinks link" id="googleMeet">https://meet.google.com</dd>
            <dt>Slack</dt>
              <dd class="showLinks link" id="slack">https://slack.com</dd>
            <dt>Wrike</dt>
              <dd class="showLinks link" id="wrike">https://wrike.com</dd>    
          </ul>
          <button id="showLinksButton">Show Links</button>
        </div>
        <div id="group4" class = "groups">
          <h2 id="group4h2">Group 4 - Aerospace Companies</h2>

          <ul id="aviationLinks">
            <li class = "cycle link" id="airbus">airbus.com</li> 
            <li class = "cycle link" id="boeing">boeing.com</li>
            <li class = "cycle link" id="lockheedMartin">lockheedmartin.com</li>
            <li class = "cycle link" id="rtx">rtx.com</li>
            <li class = "cycle link" id="geAviation">geaviation.com</li>
            <li class = "cycle link" id="safran">safran-group.com</li>
            <li class = "cycle link" id="leonardo">leonardocompany.com</li>
            <li class = "cycle link" id="baseSystems">baesystems.com</li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>
-----------------------
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
div:not(.ui-resizable-handle){
var $linkID, $linkURL

function changeTime(){
    let d= new Date(); //built in JS function
    let mm = ('0' + d.getMinutes()).slice(-2);
    let ss = ('0' + d.getSeconds()).slice(-2);
    document.getElementById("dateTime").innerHTML = `${d.getMonth()}/${d.getDay()}/${d.getYear()} ${d.getHours()}:${mm}:${ss}`;
}

setInterval(changeTime, 1000); //updates the time dynamically.

//Group1
//Click to Show functionality: group 1 
//clicks hide all divs, then uses a "title" attribute as a variable to toggle the associated box showing that title's information. 
//I am no marketer, so the text is some basic info I read on the websites.
$(document).ready(function(){
    $(".clickToShow").click(function(){
        $(".clickToShowBlock").hide();
        let idTag = '#' + this.getAttribute("title");        
      $(idTag).toggle();
    });
  });

//Group 2
//Same as above, except using hover instead of click to show the images.

$(document).ready(function(){    
    $(".hoverToShow").hover(function(){let idTag = '#' + this.getAttribute("title");
        $(idTag).show();
      }, function(){let idTag = '#' + this.getAttribute("title");
        $(idTag).hide();      
      $(".hoverToShowBlock").hide();
    });
  });

  //Group3
  //follows group 1 method, but loads all links at the same time by toggling a button.
  
$(document).ready(function(){
    $("#showLinksButton").click(function(){        
      $(".showLinks").toggle();
    });
  });

  $(function(){
    $("#showLinksButton").click(function () {
       $(this).text(function(i, text){
           return text === "Show Links" ? "Hide Links" : "Show Links";
       })
    });
 })
 //https://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery

 //Group4
 //https://stackoverflow.com/questions/4511652/looping-through-list-items-with-jquery
// http://jsfiddle.net/mblase75/wE4S8/
//from: https://stackoverflow.com/questions/20105762/show-n-number-of-list-elements-at-a-time-jquery
$(document).ready(function (){
    var elements =$("#aviationLinks li");
    var index=0;
    var showTwo = function (index) {
        if (index >=elements.length){
            index = 0
        }
        elements.hide().slice(index, index+2).show();
        setTimeout(function(){
            showTwo(index +2)
        }, 5000);
        }
        showTwo(0);
    });

//Make key-value pairs on id and hyperlinks
const linkIDref = {
    delphiInfo:"https://delphitechcorp.com/",
    vrCityInfo:"https://vrcity.ca/",
    auroraInfo:"https://auroraaerial.aero",
    virbelaURL:"https://virbela.com",
    amazonURL:"https://amazon.com",
    moodleURL:"https://moodle.org",
    xPlaneURL:"https://x-plane.com",
    wordpressURL:"https://wordpress.org",
    gitHub:"https://github.com",
    googleMeet:"https://meet.google.com",
    slack:"https://slack.com",
    wrike:"https://wrike.com",
    airbus:"https://airbus.com",
    boeing:"https://boeing.com",
    lockheedMartin:"https://lockheedmartin.com",
    rtx:"https://rtx.com",
    geAviation:"https://geaviation.com",
    safran:"https://safran-group.com",
    leonardo:"https://leonardocompany.com",
    baseSystems:"https://baesystems.com"
}
//use key-values to populate the dynamic hyperlink functionality.
jQuery(".link").click(function(){
    $linkID = $(this).attr("id");
    window.location.href=linkIDref[$linkID];
})

$( function() {
    $( ".groups" ).draggable();
  } );
  
  $( function() {
    $( ".groups" ).resizable();
  } );
body{
    font-family: Arial, Helvetica, sans-serif;
    font-size:1em;
    background-color: skyblue;
}
h1{
    text-align:center;
}
div:not(.ui-resizable-handle){  /* Added an exception to your generic rule */
    border: black solid 2px;
    border-radius:10px;
}
#main{
    width:100%;
    height: fit-content;
    border:none;
}
#dashboard{
    margin:auto auto auto auto;
    display:grid;
    border:none;
    grid-template-columns: auto auto;
    column-gap: 1em;
    row-gap: 1em;
    width:100%;
    height:fit-content;    
}
#dateTime{
    margin:1em auto 1em auto;
    border: black solid 2px;
    width:fit-content;
    height:fit-content;
    padding:1em;
    font-size: larger;
    font-weight: bolder;
    background-color: snow;
}
.groups{
    position: relative;
    margin:auto auto auto auto;
    width:35em;
    min-width: 32.5em;
    background-color: snow;
    padding:0px;
    overflow: hidden;
}
.groups h2{
    position:relative;
    top:-0.9em;
    text-align:center;
    background-color: blue;
    color:white;
    cursor:move;
}
ul{
    list-style-type: none;
    position:relative;
    top:-0.5em;
}
#group1{
    height:10em;
}
#group2{
    height:10em;
}
.clickToShowBlock{
    cursor:pointer;
    display:none;
    position:absolute;
    top: 3.5em;
    left:12em;
    height:fit-content;
    width:20em;
    border:none;
}
.hoverToShowBlock{
    display:none;
    position:absolute;
    top: 4em;
    left:12em;
    height:fit-content;
    width:20em;
    border:none;
}
.hoverToShowBlock img{
    max-height:6em;
    max-width:19em;
}
dd{
    padding: 0.5em 0em 0.5em 0em;
}
.showLinks{
    display:none;
}
#showLinksButton{
    position:absolute;
    right:0.5em;
    top:2em;
    font-size:2em;
}
li:hover{
    cursor:pointer;
}

dd:hover{
    cursor:pointer;
}
@media screen and (max-width: 1200px)
{    
    #dashboard{

        grid-template-columns: auto;
    }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"><!-- Added the jQuery-ui CSS file -->
    <link rel="stylesheet" href="stylesheet2.css">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Delphi Tech Corp Front-End Development Team Coding Test</title>
    <script src="script2.js" defer></script>
  </head>
  <body>
    <h1>TASK 2 Dashboard</h1>
    <div id="main">
      <div id = "dateTime"></div>
      <div id = "dashboard">
        <div id="group1" class = "groups">
          <h2 id="group1h2">Group 1 - Alan Zheng's Companys + Products</h2> 
          <ul>
            <li class="clickToShow" title = "vrCityInfo">VR City</li>
            <li class="clickToShow"  title = "delphiInfo">Delphi Tech Corp</li>
            <li class="clickToShow"  title = "auroraInfo">Aurora Aerial</li>
          </ul>
          <div id="vrCityInfo" class="clickToShowBlock link"> 
            VR City is a virtual aviation training company. Our virtual community provides people with the learning tools to learn how to fly. 
            <br>
            https://vrcity.ca/
          </div>
          <div id="delphiInfo" class="clickToShowBlock link"> 
            Delphi Technology Corp is integrating new technologies such as augmented reality and virtuality into the aerospace and aviation industries!
            <br>
            https://delphitechcorp.com/
          </div>  
          <div id="auroraInfo" class="clickToShowBlock link">
            Aurora Aerial offers custom drone manufacturing. We develop both drone hardware and software.
            <br>
            https://auroraaerial.aero
          </div>
          
        </div>
        <div id="group2" class = "groups">
          <h2 id="group2h2">Group 2 - Technology products used at Delphi</h2>
          <ul>
            <li class="hoverToShow link" title= "virbela" id= "virbelaURL">Virbela</li>
            <li class="hoverToShow link" title= "amazon" id= "amazonURL">Amazon</li>
            <li class="hoverToShow link" title= "moodle" id= "moodleURL">Moodle</li>
            <li class="hoverToShow link" title= "xPlane" id= "xPlaneURL">X-Plane</li>
            <li class="hoverToShow link" title= "wordpress" id= "wordpressURL">Wordpress</li>
          </ul>
          
          <div id="virbela" class="hoverToShowBlock">
            <img alt="Virbela" src="Logos/5fab9393da4ffe1e20d14cc6_virbela-logo-black-website.png"> 
          </div>
          <div id="amazon" class="hoverToShowBlock">
            <img alt="Amazon" src="Logos/NicePng_amazon-png_197561.png">  
          </div>  
          <div id="moodle" class="hoverToShowBlock">
            <img alt="Moodle" src="Logos/moodle_logo_small.svg">  
          </div>
          <div id="xPlane" class="hoverToShowBlock"> 
            <img alt="X-Plane" src="Logos/x-plane-logo.svg"> 
          </div>  
          <div id="wordpress" class="hoverToShowBlock"> 
            <img alt="Virbela" src="Logos/NicePng_wordpress-logo-png_395752.png"> 
          </div>

        </div>
        <div id="group3" class = "groups">
          <h2 id="group3h2">Group 3 - Websites used at Delphi</h2>
          <ul>
            <dt>GitHub</dt>
              <dd class="showLinks link" id="gitHub">https://github.com</dd>  
            <dt>Google Meet</dt>
              <dd class="showLinks link" id="googleMeet">https://meet.google.com</dd>
            <dt>Slack</dt>
              <dd class="showLinks link" id="slack">https://slack.com</dd>
            <dt>Wrike</dt>
              <dd class="showLinks link" id="wrike">https://wrike.com</dd>    
          </ul>
          <button id="showLinksButton">Show Links</button>
        </div>
        <div id="group4" class = "groups">
          <h2 id="group4h2">Group 4 - Aerospace Companies</h2>

          <ul id="aviationLinks">
            <li class = "cycle link" id="airbus">airbus.com</li> 
            <li class = "cycle link" id="boeing">boeing.com</li>
            <li class = "cycle link" id="lockheedMartin">lockheedmartin.com</li>
            <li class = "cycle link" id="rtx">rtx.com</li>
            <li class = "cycle link" id="geAviation">geaviation.com</li>
            <li class = "cycle link" id="safran">safran-group.com</li>
            <li class = "cycle link" id="leonardo">leonardocompany.com</li>
            <li class = "cycle link" id="baseSystems">baesystems.com</li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>
-----------------------
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
div:not(.ui-resizable-handle){
var $linkID, $linkURL

function changeTime(){
    let d= new Date(); //built in JS function
    let mm = ('0' + d.getMinutes()).slice(-2);
    let ss = ('0' + d.getSeconds()).slice(-2);
    document.getElementById("dateTime").innerHTML = `${d.getMonth()}/${d.getDay()}/${d.getYear()} ${d.getHours()}:${mm}:${ss}`;
}

setInterval(changeTime, 1000); //updates the time dynamically.

//Group1
//Click to Show functionality: group 1 
//clicks hide all divs, then uses a "title" attribute as a variable to toggle the associated box showing that title's information. 
//I am no marketer, so the text is some basic info I read on the websites.
$(document).ready(function(){
    $(".clickToShow").click(function(){
        $(".clickToShowBlock").hide();
        let idTag = '#' + this.getAttribute("title");        
      $(idTag).toggle();
    });
  });

//Group 2
//Same as above, except using hover instead of click to show the images.

$(document).ready(function(){    
    $(".hoverToShow").hover(function(){let idTag = '#' + this.getAttribute("title");
        $(idTag).show();
      }, function(){let idTag = '#' + this.getAttribute("title");
        $(idTag).hide();      
      $(".hoverToShowBlock").hide();
    });
  });

  //Group3
  //follows group 1 method, but loads all links at the same time by toggling a button.
  
$(document).ready(function(){
    $("#showLinksButton").click(function(){        
      $(".showLinks").toggle();
    });
  });

  $(function(){
    $("#showLinksButton").click(function () {
       $(this).text(function(i, text){
           return text === "Show Links" ? "Hide Links" : "Show Links";
       })
    });
 })
 //https://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery

 //Group4
 //https://stackoverflow.com/questions/4511652/looping-through-list-items-with-jquery
// http://jsfiddle.net/mblase75/wE4S8/
//from: https://stackoverflow.com/questions/20105762/show-n-number-of-list-elements-at-a-time-jquery
$(document).ready(function (){
    var elements =$("#aviationLinks li");
    var index=0;
    var showTwo = function (index) {
        if (index >=elements.length){
            index = 0
        }
        elements.hide().slice(index, index+2).show();
        setTimeout(function(){
            showTwo(index +2)
        }, 5000);
        }
        showTwo(0);
    });

//Make key-value pairs on id and hyperlinks
const linkIDref = {
    delphiInfo:"https://delphitechcorp.com/",
    vrCityInfo:"https://vrcity.ca/",
    auroraInfo:"https://auroraaerial.aero",
    virbelaURL:"https://virbela.com",
    amazonURL:"https://amazon.com",
    moodleURL:"https://moodle.org",
    xPlaneURL:"https://x-plane.com",
    wordpressURL:"https://wordpress.org",
    gitHub:"https://github.com",
    googleMeet:"https://meet.google.com",
    slack:"https://slack.com",
    wrike:"https://wrike.com",
    airbus:"https://airbus.com",
    boeing:"https://boeing.com",
    lockheedMartin:"https://lockheedmartin.com",
    rtx:"https://rtx.com",
    geAviation:"https://geaviation.com",
    safran:"https://safran-group.com",
    leonardo:"https://leonardocompany.com",
    baseSystems:"https://baesystems.com"
}
//use key-values to populate the dynamic hyperlink functionality.
jQuery(".link").click(function(){
    $linkID = $(this).attr("id");
    window.location.href=linkIDref[$linkID];
})

$( function() {
    $( ".groups" ).draggable();
  } );
  
  $( function() {
    $( ".groups" ).resizable();
  } );
body{
    font-family: Arial, Helvetica, sans-serif;
    font-size:1em;
    background-color: skyblue;
}
h1{
    text-align:center;
}
div:not(.ui-resizable-handle){  /* Added an exception to your generic rule */
    border: black solid 2px;
    border-radius:10px;
}
#main{
    width:100%;
    height: fit-content;
    border:none;
}
#dashboard{
    margin:auto auto auto auto;
    display:grid;
    border:none;
    grid-template-columns: auto auto;
    column-gap: 1em;
    row-gap: 1em;
    width:100%;
    height:fit-content;    
}
#dateTime{
    margin:1em auto 1em auto;
    border: black solid 2px;
    width:fit-content;
    height:fit-content;
    padding:1em;
    font-size: larger;
    font-weight: bolder;
    background-color: snow;
}
.groups{
    position: relative;
    margin:auto auto auto auto;
    width:35em;
    min-width: 32.5em;
    background-color: snow;
    padding:0px;
    overflow: hidden;
}
.groups h2{
    position:relative;
    top:-0.9em;
    text-align:center;
    background-color: blue;
    color:white;
    cursor:move;
}
ul{
    list-style-type: none;
    position:relative;
    top:-0.5em;
}
#group1{
    height:10em;
}
#group2{
    height:10em;
}
.clickToShowBlock{
    cursor:pointer;
    display:none;
    position:absolute;
    top: 3.5em;
    left:12em;
    height:fit-content;
    width:20em;
    border:none;
}
.hoverToShowBlock{
    display:none;
    position:absolute;
    top: 4em;
    left:12em;
    height:fit-content;
    width:20em;
    border:none;
}
.hoverToShowBlock img{
    max-height:6em;
    max-width:19em;
}
dd{
    padding: 0.5em 0em 0.5em 0em;
}
.showLinks{
    display:none;
}
#showLinksButton{
    position:absolute;
    right:0.5em;
    top:2em;
    font-size:2em;
}
li:hover{
    cursor:pointer;
}

dd:hover{
    cursor:pointer;
}
@media screen and (max-width: 1200px)
{    
    #dashboard{

        grid-template-columns: auto;
    }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"><!-- Added the jQuery-ui CSS file -->
    <link rel="stylesheet" href="stylesheet2.css">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Delphi Tech Corp Front-End Development Team Coding Test</title>
    <script src="script2.js" defer></script>
  </head>
  <body>
    <h1>TASK 2 Dashboard</h1>
    <div id="main">
      <div id = "dateTime"></div>
      <div id = "dashboard">
        <div id="group1" class = "groups">
          <h2 id="group1h2">Group 1 - Alan Zheng's Companys + Products</h2> 
          <ul>
            <li class="clickToShow" title = "vrCityInfo">VR City</li>
            <li class="clickToShow"  title = "delphiInfo">Delphi Tech Corp</li>
            <li class="clickToShow"  title = "auroraInfo">Aurora Aerial</li>
          </ul>
          <div id="vrCityInfo" class="clickToShowBlock link"> 
            VR City is a virtual aviation training company. Our virtual community provides people with the learning tools to learn how to fly. 
            <br>
            https://vrcity.ca/
          </div>
          <div id="delphiInfo" class="clickToShowBlock link"> 
            Delphi Technology Corp is integrating new technologies such as augmented reality and virtuality into the aerospace and aviation industries!
            <br>
            https://delphitechcorp.com/
          </div>  
          <div id="auroraInfo" class="clickToShowBlock link">
            Aurora Aerial offers custom drone manufacturing. We develop both drone hardware and software.
            <br>
            https://auroraaerial.aero
          </div>
          
        </div>
        <div id="group2" class = "groups">
          <h2 id="group2h2">Group 2 - Technology products used at Delphi</h2>
          <ul>
            <li class="hoverToShow link" title= "virbela" id= "virbelaURL">Virbela</li>
            <li class="hoverToShow link" title= "amazon" id= "amazonURL">Amazon</li>
            <li class="hoverToShow link" title= "moodle" id= "moodleURL">Moodle</li>
            <li class="hoverToShow link" title= "xPlane" id= "xPlaneURL">X-Plane</li>
            <li class="hoverToShow link" title= "wordpress" id= "wordpressURL">Wordpress</li>
          </ul>
          
          <div id="virbela" class="hoverToShowBlock">
            <img alt="Virbela" src="Logos/5fab9393da4ffe1e20d14cc6_virbela-logo-black-website.png"> 
          </div>
          <div id="amazon" class="hoverToShowBlock">
            <img alt="Amazon" src="Logos/NicePng_amazon-png_197561.png">  
          </div>  
          <div id="moodle" class="hoverToShowBlock">
            <img alt="Moodle" src="Logos/moodle_logo_small.svg">  
          </div>
          <div id="xPlane" class="hoverToShowBlock"> 
            <img alt="X-Plane" src="Logos/x-plane-logo.svg"> 
          </div>  
          <div id="wordpress" class="hoverToShowBlock"> 
            <img alt="Virbela" src="Logos/NicePng_wordpress-logo-png_395752.png"> 
          </div>

        </div>
        <div id="group3" class = "groups">
          <h2 id="group3h2">Group 3 - Websites used at Delphi</h2>
          <ul>
            <dt>GitHub</dt>
              <dd class="showLinks link" id="gitHub">https://github.com</dd>  
            <dt>Google Meet</dt>
              <dd class="showLinks link" id="googleMeet">https://meet.google.com</dd>
            <dt>Slack</dt>
              <dd class="showLinks link" id="slack">https://slack.com</dd>
            <dt>Wrike</dt>
              <dd class="showLinks link" id="wrike">https://wrike.com</dd>    
          </ul>
          <button id="showLinksButton">Show Links</button>
        </div>
        <div id="group4" class = "groups">
          <h2 id="group4h2">Group 4 - Aerospace Companies</h2>

          <ul id="aviationLinks">
            <li class = "cycle link" id="airbus">airbus.com</li> 
            <li class = "cycle link" id="boeing">boeing.com</li>
            <li class = "cycle link" id="lockheedMartin">lockheedmartin.com</li>
            <li class = "cycle link" id="rtx">rtx.com</li>
            <li class = "cycle link" id="geAviation">geaviation.com</li>
            <li class = "cycle link" id="safran">safran-group.com</li>
            <li class = "cycle link" id="leonardo">leonardocompany.com</li>
            <li class = "cycle link" id="baseSystems">baesystems.com</li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>
-----------------------
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
div:not(.ui-resizable-handle){
var $linkID, $linkURL

function changeTime(){
    let d= new Date(); //built in JS function
    let mm = ('0' + d.getMinutes()).slice(-2);
    let ss = ('0' + d.getSeconds()).slice(-2);
    document.getElementById("dateTime").innerHTML = `${d.getMonth()}/${d.getDay()}/${d.getYear()} ${d.getHours()}:${mm}:${ss}`;
}

setInterval(changeTime, 1000); //updates the time dynamically.

//Group1
//Click to Show functionality: group 1 
//clicks hide all divs, then uses a "title" attribute as a variable to toggle the associated box showing that title's information. 
//I am no marketer, so the text is some basic info I read on the websites.
$(document).ready(function(){
    $(".clickToShow").click(function(){
        $(".clickToShowBlock").hide();
        let idTag = '#' + this.getAttribute("title");        
      $(idTag).toggle();
    });
  });

//Group 2
//Same as above, except using hover instead of click to show the images.

$(document).ready(function(){    
    $(".hoverToShow").hover(function(){let idTag = '#' + this.getAttribute("title");
        $(idTag).show();
      }, function(){let idTag = '#' + this.getAttribute("title");
        $(idTag).hide();      
      $(".hoverToShowBlock").hide();
    });
  });

  //Group3
  //follows group 1 method, but loads all links at the same time by toggling a button.
  
$(document).ready(function(){
    $("#showLinksButton").click(function(){        
      $(".showLinks").toggle();
    });
  });

  $(function(){
    $("#showLinksButton").click(function () {
       $(this).text(function(i, text){
           return text === "Show Links" ? "Hide Links" : "Show Links";
       })
    });
 })
 //https://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery

 //Group4
 //https://stackoverflow.com/questions/4511652/looping-through-list-items-with-jquery
// http://jsfiddle.net/mblase75/wE4S8/
//from: https://stackoverflow.com/questions/20105762/show-n-number-of-list-elements-at-a-time-jquery
$(document).ready(function (){
    var elements =$("#aviationLinks li");
    var index=0;
    var showTwo = function (index) {
        if (index >=elements.length){
            index = 0
        }
        elements.hide().slice(index, index+2).show();
        setTimeout(function(){
            showTwo(index +2)
        }, 5000);
        }
        showTwo(0);
    });

//Make key-value pairs on id and hyperlinks
const linkIDref = {
    delphiInfo:"https://delphitechcorp.com/",
    vrCityInfo:"https://vrcity.ca/",
    auroraInfo:"https://auroraaerial.aero",
    virbelaURL:"https://virbela.com",
    amazonURL:"https://amazon.com",
    moodleURL:"https://moodle.org",
    xPlaneURL:"https://x-plane.com",
    wordpressURL:"https://wordpress.org",
    gitHub:"https://github.com",
    googleMeet:"https://meet.google.com",
    slack:"https://slack.com",
    wrike:"https://wrike.com",
    airbus:"https://airbus.com",
    boeing:"https://boeing.com",
    lockheedMartin:"https://lockheedmartin.com",
    rtx:"https://rtx.com",
    geAviation:"https://geaviation.com",
    safran:"https://safran-group.com",
    leonardo:"https://leonardocompany.com",
    baseSystems:"https://baesystems.com"
}
//use key-values to populate the dynamic hyperlink functionality.
jQuery(".link").click(function(){
    $linkID = $(this).attr("id");
    window.location.href=linkIDref[$linkID];
})

$( function() {
    $( ".groups" ).draggable();
  } );
  
  $( function() {
    $( ".groups" ).resizable();
  } );
body{
    font-family: Arial, Helvetica, sans-serif;
    font-size:1em;
    background-color: skyblue;
}
h1{
    text-align:center;
}
div:not(.ui-resizable-handle){  /* Added an exception to your generic rule */
    border: black solid 2px;
    border-radius:10px;
}
#main{
    width:100%;
    height: fit-content;
    border:none;
}
#dashboard{
    margin:auto auto auto auto;
    display:grid;
    border:none;
    grid-template-columns: auto auto;
    column-gap: 1em;
    row-gap: 1em;
    width:100%;
    height:fit-content;    
}
#dateTime{
    margin:1em auto 1em auto;
    border: black solid 2px;
    width:fit-content;
    height:fit-content;
    padding:1em;
    font-size: larger;
    font-weight: bolder;
    background-color: snow;
}
.groups{
    position: relative;
    margin:auto auto auto auto;
    width:35em;
    min-width: 32.5em;
    background-color: snow;
    padding:0px;
    overflow: hidden;
}
.groups h2{
    position:relative;
    top:-0.9em;
    text-align:center;
    background-color: blue;
    color:white;
    cursor:move;
}
ul{
    list-style-type: none;
    position:relative;
    top:-0.5em;
}
#group1{
    height:10em;
}
#group2{
    height:10em;
}
.clickToShowBlock{
    cursor:pointer;
    display:none;
    position:absolute;
    top: 3.5em;
    left:12em;
    height:fit-content;
    width:20em;
    border:none;
}
.hoverToShowBlock{
    display:none;
    position:absolute;
    top: 4em;
    left:12em;
    height:fit-content;
    width:20em;
    border:none;
}
.hoverToShowBlock img{
    max-height:6em;
    max-width:19em;
}
dd{
    padding: 0.5em 0em 0.5em 0em;
}
.showLinks{
    display:none;
}
#showLinksButton{
    position:absolute;
    right:0.5em;
    top:2em;
    font-size:2em;
}
li:hover{
    cursor:pointer;
}

dd:hover{
    cursor:pointer;
}
@media screen and (max-width: 1200px)
{    
    #dashboard{

        grid-template-columns: auto;
    }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"><!-- Added the jQuery-ui CSS file -->
    <link rel="stylesheet" href="stylesheet2.css">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Delphi Tech Corp Front-End Development Team Coding Test</title>
    <script src="script2.js" defer></script>
  </head>
  <body>
    <h1>TASK 2 Dashboard</h1>
    <div id="main">
      <div id = "dateTime"></div>
      <div id = "dashboard">
        <div id="group1" class = "groups">
          <h2 id="group1h2">Group 1 - Alan Zheng's Companys + Products</h2> 
          <ul>
            <li class="clickToShow" title = "vrCityInfo">VR City</li>
            <li class="clickToShow"  title = "delphiInfo">Delphi Tech Corp</li>
            <li class="clickToShow"  title = "auroraInfo">Aurora Aerial</li>
          </ul>
          <div id="vrCityInfo" class="clickToShowBlock link"> 
            VR City is a virtual aviation training company. Our virtual community provides people with the learning tools to learn how to fly. 
            <br>
            https://vrcity.ca/
          </div>
          <div id="delphiInfo" class="clickToShowBlock link"> 
            Delphi Technology Corp is integrating new technologies such as augmented reality and virtuality into the aerospace and aviation industries!
            <br>
            https://delphitechcorp.com/
          </div>  
          <div id="auroraInfo" class="clickToShowBlock link">
            Aurora Aerial offers custom drone manufacturing. We develop both drone hardware and software.
            <br>
            https://auroraaerial.aero
          </div>
          
        </div>
        <div id="group2" class = "groups">
          <h2 id="group2h2">Group 2 - Technology products used at Delphi</h2>
          <ul>
            <li class="hoverToShow link" title= "virbela" id= "virbelaURL">Virbela</li>
            <li class="hoverToShow link" title= "amazon" id= "amazonURL">Amazon</li>
            <li class="hoverToShow link" title= "moodle" id= "moodleURL">Moodle</li>
            <li class="hoverToShow link" title= "xPlane" id= "xPlaneURL">X-Plane</li>
            <li class="hoverToShow link" title= "wordpress" id= "wordpressURL">Wordpress</li>
          </ul>
          
          <div id="virbela" class="hoverToShowBlock">
            <img alt="Virbela" src="Logos/5fab9393da4ffe1e20d14cc6_virbela-logo-black-website.png"> 
          </div>
          <div id="amazon" class="hoverToShowBlock">
            <img alt="Amazon" src="Logos/NicePng_amazon-png_197561.png">  
          </div>  
          <div id="moodle" class="hoverToShowBlock">
            <img alt="Moodle" src="Logos/moodle_logo_small.svg">  
          </div>
          <div id="xPlane" class="hoverToShowBlock"> 
            <img alt="X-Plane" src="Logos/x-plane-logo.svg"> 
          </div>  
          <div id="wordpress" class="hoverToShowBlock"> 
            <img alt="Virbela" src="Logos/NicePng_wordpress-logo-png_395752.png"> 
          </div>

        </div>
        <div id="group3" class = "groups">
          <h2 id="group3h2">Group 3 - Websites used at Delphi</h2>
          <ul>
            <dt>GitHub</dt>
              <dd class="showLinks link" id="gitHub">https://github.com</dd>  
            <dt>Google Meet</dt>
              <dd class="showLinks link" id="googleMeet">https://meet.google.com</dd>
            <dt>Slack</dt>
              <dd class="showLinks link" id="slack">https://slack.com</dd>
            <dt>Wrike</dt>
              <dd class="showLinks link" id="wrike">https://wrike.com</dd>    
          </ul>
          <button id="showLinksButton">Show Links</button>
        </div>
        <div id="group4" class = "groups">
          <h2 id="group4h2">Group 4 - Aerospace Companies</h2>

          <ul id="aviationLinks">
            <li class = "cycle link" id="airbus">airbus.com</li> 
            <li class = "cycle link" id="boeing">boeing.com</li>
            <li class = "cycle link" id="lockheedMartin">lockheedmartin.com</li>
            <li class = "cycle link" id="rtx">rtx.com</li>
            <li class = "cycle link" id="geAviation">geaviation.com</li>
            <li class = "cycle link" id="safran">safran-group.com</li>
            <li class = "cycle link" id="leonardo">leonardocompany.com</li>
            <li class = "cycle link" id="baseSystems">baesystems.com</li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>
-----------------------
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
div:not(.ui-resizable-handle){
var $linkID, $linkURL

function changeTime(){
    let d= new Date(); //built in JS function
    let mm = ('0' + d.getMinutes()).slice(-2);
    let ss = ('0' + d.getSeconds()).slice(-2);
    document.getElementById("dateTime").innerHTML = `${d.getMonth()}/${d.getDay()}/${d.getYear()} ${d.getHours()}:${mm}:${ss}`;
}

setInterval(changeTime, 1000); //updates the time dynamically.

//Group1
//Click to Show functionality: group 1 
//clicks hide all divs, then uses a "title" attribute as a variable to toggle the associated box showing that title's information. 
//I am no marketer, so the text is some basic info I read on the websites.
$(document).ready(function(){
    $(".clickToShow").click(function(){
        $(".clickToShowBlock").hide();
        let idTag = '#' + this.getAttribute("title");        
      $(idTag).toggle();
    });
  });

//Group 2
//Same as above, except using hover instead of click to show the images.

$(document).ready(function(){    
    $(".hoverToShow").hover(function(){let idTag = '#' + this.getAttribute("title");
        $(idTag).show();
      }, function(){let idTag = '#' + this.getAttribute("title");
        $(idTag).hide();      
      $(".hoverToShowBlock").hide();
    });
  });

  //Group3
  //follows group 1 method, but loads all links at the same time by toggling a button.
  
$(document).ready(function(){
    $("#showLinksButton").click(function(){        
      $(".showLinks").toggle();
    });
  });

  $(function(){
    $("#showLinksButton").click(function () {
       $(this).text(function(i, text){
           return text === "Show Links" ? "Hide Links" : "Show Links";
       })
    });
 })
 //https://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery

 //Group4
 //https://stackoverflow.com/questions/4511652/looping-through-list-items-with-jquery
// http://jsfiddle.net/mblase75/wE4S8/
//from: https://stackoverflow.com/questions/20105762/show-n-number-of-list-elements-at-a-time-jquery
$(document).ready(function (){
    var elements =$("#aviationLinks li");
    var index=0;
    var showTwo = function (index) {
        if (index >=elements.length){
            index = 0
        }
        elements.hide().slice(index, index+2).show();
        setTimeout(function(){
            showTwo(index +2)
        }, 5000);
        }
        showTwo(0);
    });

//Make key-value pairs on id and hyperlinks
const linkIDref = {
    delphiInfo:"https://delphitechcorp.com/",
    vrCityInfo:"https://vrcity.ca/",
    auroraInfo:"https://auroraaerial.aero",
    virbelaURL:"https://virbela.com",
    amazonURL:"https://amazon.com",
    moodleURL:"https://moodle.org",
    xPlaneURL:"https://x-plane.com",
    wordpressURL:"https://wordpress.org",
    gitHub:"https://github.com",
    googleMeet:"https://meet.google.com",
    slack:"https://slack.com",
    wrike:"https://wrike.com",
    airbus:"https://airbus.com",
    boeing:"https://boeing.com",
    lockheedMartin:"https://lockheedmartin.com",
    rtx:"https://rtx.com",
    geAviation:"https://geaviation.com",
    safran:"https://safran-group.com",
    leonardo:"https://leonardocompany.com",
    baseSystems:"https://baesystems.com"
}
//use key-values to populate the dynamic hyperlink functionality.
jQuery(".link").click(function(){
    $linkID = $(this).attr("id");
    window.location.href=linkIDref[$linkID];
})

$( function() {
    $( ".groups" ).draggable();
  } );
  
  $( function() {
    $( ".groups" ).resizable();
  } );
body{
    font-family: Arial, Helvetica, sans-serif;
    font-size:1em;
    background-color: skyblue;
}
h1{
    text-align:center;
}
div:not(.ui-resizable-handle){  /* Added an exception to your generic rule */
    border: black solid 2px;
    border-radius:10px;
}
#main{
    width:100%;
    height: fit-content;
    border:none;
}
#dashboard{
    margin:auto auto auto auto;
    display:grid;
    border:none;
    grid-template-columns: auto auto;
    column-gap: 1em;
    row-gap: 1em;
    width:100%;
    height:fit-content;    
}
#dateTime{
    margin:1em auto 1em auto;
    border: black solid 2px;
    width:fit-content;
    height:fit-content;
    padding:1em;
    font-size: larger;
    font-weight: bolder;
    background-color: snow;
}
.groups{
    position: relative;
    margin:auto auto auto auto;
    width:35em;
    min-width: 32.5em;
    background-color: snow;
    padding:0px;
    overflow: hidden;
}
.groups h2{
    position:relative;
    top:-0.9em;
    text-align:center;
    background-color: blue;
    color:white;
    cursor:move;
}
ul{
    list-style-type: none;
    position:relative;
    top:-0.5em;
}
#group1{
    height:10em;
}
#group2{
    height:10em;
}
.clickToShowBlock{
    cursor:pointer;
    display:none;
    position:absolute;
    top: 3.5em;
    left:12em;
    height:fit-content;
    width:20em;
    border:none;
}
.hoverToShowBlock{
    display:none;
    position:absolute;
    top: 4em;
    left:12em;
    height:fit-content;
    width:20em;
    border:none;
}
.hoverToShowBlock img{
    max-height:6em;
    max-width:19em;
}
dd{
    padding: 0.5em 0em 0.5em 0em;
}
.showLinks{
    display:none;
}
#showLinksButton{
    position:absolute;
    right:0.5em;
    top:2em;
    font-size:2em;
}
li:hover{
    cursor:pointer;
}

dd:hover{
    cursor:pointer;
}
@media screen and (max-width: 1200px)
{    
    #dashboard{

        grid-template-columns: auto;
    }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"><!-- Added the jQuery-ui CSS file -->
    <link rel="stylesheet" href="stylesheet2.css">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Delphi Tech Corp Front-End Development Team Coding Test</title>
    <script src="script2.js" defer></script>
  </head>
  <body>
    <h1>TASK 2 Dashboard</h1>
    <div id="main">
      <div id = "dateTime"></div>
      <div id = "dashboard">
        <div id="group1" class = "groups">
          <h2 id="group1h2">Group 1 - Alan Zheng's Companys + Products</h2> 
          <ul>
            <li class="clickToShow" title = "vrCityInfo">VR City</li>
            <li class="clickToShow"  title = "delphiInfo">Delphi Tech Corp</li>
            <li class="clickToShow"  title = "auroraInfo">Aurora Aerial</li>
          </ul>
          <div id="vrCityInfo" class="clickToShowBlock link"> 
            VR City is a virtual aviation training company. Our virtual community provides people with the learning tools to learn how to fly. 
            <br>
            https://vrcity.ca/
          </div>
          <div id="delphiInfo" class="clickToShowBlock link"> 
            Delphi Technology Corp is integrating new technologies such as augmented reality and virtuality into the aerospace and aviation industries!
            <br>
            https://delphitechcorp.com/
          </div>  
          <div id="auroraInfo" class="clickToShowBlock link">
            Aurora Aerial offers custom drone manufacturing. We develop both drone hardware and software.
            <br>
            https://auroraaerial.aero
          </div>
          
        </div>
        <div id="group2" class = "groups">
          <h2 id="group2h2">Group 2 - Technology products used at Delphi</h2>
          <ul>
            <li class="hoverToShow link" title= "virbela" id= "virbelaURL">Virbela</li>
            <li class="hoverToShow link" title= "amazon" id= "amazonURL">Amazon</li>
            <li class="hoverToShow link" title= "moodle" id= "moodleURL">Moodle</li>
            <li class="hoverToShow link" title= "xPlane" id= "xPlaneURL">X-Plane</li>
            <li class="hoverToShow link" title= "wordpress" id= "wordpressURL">Wordpress</li>
          </ul>
          
          <div id="virbela" class="hoverToShowBlock">
            <img alt="Virbela" src="Logos/5fab9393da4ffe1e20d14cc6_virbela-logo-black-website.png"> 
          </div>
          <div id="amazon" class="hoverToShowBlock">
            <img alt="Amazon" src="Logos/NicePng_amazon-png_197561.png">  
          </div>  
          <div id="moodle" class="hoverToShowBlock">
            <img alt="Moodle" src="Logos/moodle_logo_small.svg">  
          </div>
          <div id="xPlane" class="hoverToShowBlock"> 
            <img alt="X-Plane" src="Logos/x-plane-logo.svg"> 
          </div>  
          <div id="wordpress" class="hoverToShowBlock"> 
            <img alt="Virbela" src="Logos/NicePng_wordpress-logo-png_395752.png"> 
          </div>

        </div>
        <div id="group3" class = "groups">
          <h2 id="group3h2">Group 3 - Websites used at Delphi</h2>
          <ul>
            <dt>GitHub</dt>
              <dd class="showLinks link" id="gitHub">https://github.com</dd>  
            <dt>Google Meet</dt>
              <dd class="showLinks link" id="googleMeet">https://meet.google.com</dd>
            <dt>Slack</dt>
              <dd class="showLinks link" id="slack">https://slack.com</dd>
            <dt>Wrike</dt>
              <dd class="showLinks link" id="wrike">https://wrike.com</dd>    
          </ul>
          <button id="showLinksButton">Show Links</button>
        </div>
        <div id="group4" class = "groups">
          <h2 id="group4h2">Group 4 - Aerospace Companies</h2>

          <ul id="aviationLinks">
            <li class = "cycle link" id="airbus">airbus.com</li> 
            <li class = "cycle link" id="boeing">boeing.com</li>
            <li class = "cycle link" id="lockheedMartin">lockheedmartin.com</li>
            <li class = "cycle link" id="rtx">rtx.com</li>
            <li class = "cycle link" id="geAviation">geaviation.com</li>
            <li class = "cycle link" id="safran">safran-group.com</li>
            <li class = "cycle link" id="leonardo">leonardocompany.com</li>
            <li class = "cycle link" id="baseSystems">baesystems.com</li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

The prefix &quot;crs&quot; for element &quot;crs:course&quot; is not bound

copy iconCopydownload iconDownload
xmins:crs="http://example.com/higheredtestprep/courses/ns"
  ^
xmlns:crs="http://example.com/higheredtestprep/courses/ns"
  ^
-----------------------
xmins:crs="http://example.com/higheredtestprep/courses/ns"
  ^
xmlns:crs="http://example.com/higheredtestprep/courses/ns"
  ^

Why am I getting this Powershell hash literal was incomplete error?

copy iconCopydownload iconDownload
$users = @{abertram = 'Adam Bertram'; raquelcer = 'Raquel Cerillo'; zheng21 = 'Justin Zheng'}
$users =
@{
    abertram = 'Adam Bertram'
    raquelcer = 'Raquel Cerillo'
    zheng21 = 'Justin Zheng'
}
-----------------------
$users = @{abertram = 'Adam Bertram'; raquelcer = 'Raquel Cerillo'; zheng21 = 'Justin Zheng'}
$users =
@{
    abertram = 'Adam Bertram'
    raquelcer = 'Raquel Cerillo'
    zheng21 = 'Justin Zheng'
}

Placing literature references in a table in Rmd

copy iconCopydownload iconDownload
---
title: "test"
author: "David"
date: "27/01/2021"
output: html_document
bibliography: test.bib
---

test[@guan_clinical_2020]

``` {r, echo = F}
library("flextable")
library("ftExtra")
dat <- dplyr::tibble("study_id" = c(1,2),
               "lead_author" = c("Guan, Ni", "Guan, Liang"),
               "sample_size" = c(1099, 1590),
               "refs" = c("[@guan_clinical_2020]",
                          "[@guan_comorbidity_2020]"))
dat %>%
  flextable() %>%
  colformat_md() %>%
  autofit()
```

How can I detect when a font is downloaded via CSS's &quot;unicode-range&quot; descriptor?

copy iconCopydownload iconDownload
document.fonts.ready.then( () => {
  const loaded_fonts = [ ...document.fonts ]
    // simplify the objects for logging here
    .map( ({unicodeRange, status}, index) => ({ unicodeRange, status, index }) )
    .filter( ({status}) => status === "loaded" );

  console.log( loaded_fonts );
});
/* cyrillic-ext index:0 */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic index:1*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext index:2*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek index:3*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese index:4 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext index:5 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin index:6 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


body {
  font-family: "Roboto";
}
Hello thế giới
( async () => {
  // <DEMO only>
  // just to be sure the font was not loaded yet
  await document.fonts.ready;
  logLoadedFontsCount( "after document.fonts ready" );
  // </DEMO only>
  
  // now try to draw using that font face anyway
  const canvas = document.querySelector( "canvas" );
  const ctx = canvas.getContext( "2d" );
  const font_shorthand = "30px Roboto";
  const text = "Привет мир";

  // force loading fonts
  await document.fonts.load( font_shorthand, text );
  // now we can use it
  ctx.font = font_shorthand;
  ctx.fillText( text, 30, 50 );

  // <DEMO only>
  logLoadedFontsCount( "after loading of customs fonts" );
  // </DEMO only>
} )();

// <DEMO only>
// logs how many FontFaces are currently loaded
function logLoadedFontsCount( when = "" ) {
  const loaded_fonts = [ ...document.fonts ]
    .filter( ({status}) => status === "loaded" );
  console.log( "%s fonts loaded %s", loaded_fonts.length, when );
} 
// </DEMO only>
/* cyrillic-ext index:0 */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic index:1*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext index:2*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek index:3*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese index:4 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext index:5 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin index:6 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
<canvas></canvas>
-----------------------
document.fonts.ready.then( () => {
  const loaded_fonts = [ ...document.fonts ]
    // simplify the objects for logging here
    .map( ({unicodeRange, status}, index) => ({ unicodeRange, status, index }) )
    .filter( ({status}) => status === "loaded" );

  console.log( loaded_fonts );
});
/* cyrillic-ext index:0 */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic index:1*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext index:2*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek index:3*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese index:4 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext index:5 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin index:6 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


body {
  font-family: "Roboto";
}
Hello thế giới
( async () => {
  // <DEMO only>
  // just to be sure the font was not loaded yet
  await document.fonts.ready;
  logLoadedFontsCount( "after document.fonts ready" );
  // </DEMO only>
  
  // now try to draw using that font face anyway
  const canvas = document.querySelector( "canvas" );
  const ctx = canvas.getContext( "2d" );
  const font_shorthand = "30px Roboto";
  const text = "Привет мир";

  // force loading fonts
  await document.fonts.load( font_shorthand, text );
  // now we can use it
  ctx.font = font_shorthand;
  ctx.fillText( text, 30, 50 );

  // <DEMO only>
  logLoadedFontsCount( "after loading of customs fonts" );
  // </DEMO only>
} )();

// <DEMO only>
// logs how many FontFaces are currently loaded
function logLoadedFontsCount( when = "" ) {
  const loaded_fonts = [ ...document.fonts ]
    .filter( ({status}) => status === "loaded" );
  console.log( "%s fonts loaded %s", loaded_fonts.length, when );
} 
// </DEMO only>
/* cyrillic-ext index:0 */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic index:1*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext index:2*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek index:3*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese index:4 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext index:5 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin index:6 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
<canvas></canvas>
-----------------------
document.fonts.ready.then( () => {
  const loaded_fonts = [ ...document.fonts ]
    // simplify the objects for logging here
    .map( ({unicodeRange, status}, index) => ({ unicodeRange, status, index }) )
    .filter( ({status}) => status === "loaded" );

  console.log( loaded_fonts );
});
/* cyrillic-ext index:0 */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic index:1*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext index:2*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek index:3*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese index:4 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext index:5 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin index:6 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


body {
  font-family: "Roboto";
}
Hello thế giới
( async () => {
  // <DEMO only>
  // just to be sure the font was not loaded yet
  await document.fonts.ready;
  logLoadedFontsCount( "after document.fonts ready" );
  // </DEMO only>
  
  // now try to draw using that font face anyway
  const canvas = document.querySelector( "canvas" );
  const ctx = canvas.getContext( "2d" );
  const font_shorthand = "30px Roboto";
  const text = "Привет мир";

  // force loading fonts
  await document.fonts.load( font_shorthand, text );
  // now we can use it
  ctx.font = font_shorthand;
  ctx.fillText( text, 30, 50 );

  // <DEMO only>
  logLoadedFontsCount( "after loading of customs fonts" );
  // </DEMO only>
} )();

// <DEMO only>
// logs how many FontFaces are currently loaded
function logLoadedFontsCount( when = "" ) {
  const loaded_fonts = [ ...document.fonts ]
    .filter( ({status}) => status === "loaded" );
  console.log( "%s fonts loaded %s", loaded_fonts.length, when );
} 
// </DEMO only>
/* cyrillic-ext index:0 */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic index:1*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext index:2*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek index:3*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese index:4 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext index:5 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin index:6 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
<canvas></canvas>
-----------------------
document.fonts.ready.then( () => {
  const loaded_fonts = [ ...document.fonts ]
    // simplify the objects for logging here
    .map( ({unicodeRange, status}, index) => ({ unicodeRange, status, index }) )
    .filter( ({status}) => status === "loaded" );

  console.log( loaded_fonts );
});
/* cyrillic-ext index:0 */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic index:1*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext index:2*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek index:3*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese index:4 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext index:5 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin index:6 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


body {
  font-family: "Roboto";
}
Hello thế giới
( async () => {
  // <DEMO only>
  // just to be sure the font was not loaded yet
  await document.fonts.ready;
  logLoadedFontsCount( "after document.fonts ready" );
  // </DEMO only>
  
  // now try to draw using that font face anyway
  const canvas = document.querySelector( "canvas" );
  const ctx = canvas.getContext( "2d" );
  const font_shorthand = "30px Roboto";
  const text = "Привет мир";

  // force loading fonts
  await document.fonts.load( font_shorthand, text );
  // now we can use it
  ctx.font = font_shorthand;
  ctx.fillText( text, 30, 50 );

  // <DEMO only>
  logLoadedFontsCount( "after loading of customs fonts" );
  // </DEMO only>
} )();

// <DEMO only>
// logs how many FontFaces are currently loaded
function logLoadedFontsCount( when = "" ) {
  const loaded_fonts = [ ...document.fonts ]
    .filter( ({status}) => status === "loaded" );
  console.log( "%s fonts loaded %s", loaded_fonts.length, when );
} 
// </DEMO only>
/* cyrillic-ext index:0 */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic index:1*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext index:2*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek index:3*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese index:4 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext index:5 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin index:6 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
<canvas></canvas>
-----------------------
document.fonts.ready.then( () => {
  const loaded_fonts = [ ...document.fonts ]
    // simplify the objects for logging here
    .map( ({unicodeRange, status}, index) => ({ unicodeRange, status, index }) )
    .filter( ({status}) => status === "loaded" );

  console.log( loaded_fonts );
});
/* cyrillic-ext index:0 */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic index:1*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext index:2*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek index:3*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese index:4 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext index:5 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin index:6 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


body {
  font-family: "Roboto";
}
Hello thế giới
( async () => {
  // <DEMO only>
  // just to be sure the font was not loaded yet
  await document.fonts.ready;
  logLoadedFontsCount( "after document.fonts ready" );
  // </DEMO only>
  
  // now try to draw using that font face anyway
  const canvas = document.querySelector( "canvas" );
  const ctx = canvas.getContext( "2d" );
  const font_shorthand = "30px Roboto";
  const text = "Привет мир";

  // force loading fonts
  await document.fonts.load( font_shorthand, text );
  // now we can use it
  ctx.font = font_shorthand;
  ctx.fillText( text, 30, 50 );

  // <DEMO only>
  logLoadedFontsCount( "after loading of customs fonts" );
  // </DEMO only>
} )();

// <DEMO only>
// logs how many FontFaces are currently loaded
function logLoadedFontsCount( when = "" ) {
  const loaded_fonts = [ ...document.fonts ]
    .filter( ({status}) => status === "loaded" );
  console.log( "%s fonts loaded %s", loaded_fonts.length, when );
} 
// </DEMO only>
/* cyrillic-ext index:0 */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic index:1*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext index:2*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek index:3*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese index:4 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext index:5 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin index:6 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
<canvas></canvas>
-----------------------
document.fonts.ready.then( () => {
  const loaded_fonts = [ ...document.fonts ]
    // simplify the objects for logging here
    .map( ({unicodeRange, status}, index) => ({ unicodeRange, status, index }) )
    .filter( ({status}) => status === "loaded" );

  console.log( loaded_fonts );
});
/* cyrillic-ext index:0 */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic index:1*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext index:2*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek index:3*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese index:4 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext index:5 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin index:6 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


body {
  font-family: "Roboto";
}
Hello thế giới
( async () => {
  // <DEMO only>
  // just to be sure the font was not loaded yet
  await document.fonts.ready;
  logLoadedFontsCount( "after document.fonts ready" );
  // </DEMO only>
  
  // now try to draw using that font face anyway
  const canvas = document.querySelector( "canvas" );
  const ctx = canvas.getContext( "2d" );
  const font_shorthand = "30px Roboto";
  const text = "Привет мир";

  // force loading fonts
  await document.fonts.load( font_shorthand, text );
  // now we can use it
  ctx.font = font_shorthand;
  ctx.fillText( text, 30, 50 );

  // <DEMO only>
  logLoadedFontsCount( "after loading of customs fonts" );
  // </DEMO only>
} )();

// <DEMO only>
// logs how many FontFaces are currently loaded
function logLoadedFontsCount( when = "" ) {
  const loaded_fonts = [ ...document.fonts ]
    .filter( ({status}) => status === "loaded" );
  console.log( "%s fonts loaded %s", loaded_fonts.length, when );
} 
// </DEMO only>
/* cyrillic-ext index:0 */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic index:1*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext index:2*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek index:3*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese index:4 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext index:5 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin index:6 - should be loaded */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
<canvas></canvas>

Scrapy - Some questions about scraping a forum

copy iconCopydownload iconDownload
thread_links = ['thread1','thread2']

def thread_links(self,response)
    for thread_link in self.thread_links:
        yield scrapy.Request(url=thread_link,callback=self.parse_thread)

def parse_thread(self,response):
    print(response.text)
def parse_thread(self, response):
    def extract_thread_data(xpath_expression):
        return response.selector.xpath(xpath_expression).getall()
def parse_thread(self,response):
    yield response.xpath(xpath_expression).getall()
USER_AGENT = 'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Mobile Safari/537.36'


ROBOTSTXT_OBEY = False
-----------------------
thread_links = ['thread1','thread2']

def thread_links(self,response)
    for thread_link in self.thread_links:
        yield scrapy.Request(url=thread_link,callback=self.parse_thread)

def parse_thread(self,response):
    print(response.text)
def parse_thread(self, response):
    def extract_thread_data(xpath_expression):
        return response.selector.xpath(xpath_expression).getall()
def parse_thread(self,response):
    yield response.xpath(xpath_expression).getall()
USER_AGENT = 'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Mobile Safari/537.36'


ROBOTSTXT_OBEY = False
-----------------------
thread_links = ['thread1','thread2']

def thread_links(self,response)
    for thread_link in self.thread_links:
        yield scrapy.Request(url=thread_link,callback=self.parse_thread)

def parse_thread(self,response):
    print(response.text)
def parse_thread(self, response):
    def extract_thread_data(xpath_expression):
        return response.selector.xpath(xpath_expression).getall()
def parse_thread(self,response):
    yield response.xpath(xpath_expression).getall()
USER_AGENT = 'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Mobile Safari/537.36'


ROBOTSTXT_OBEY = False
-----------------------
thread_links = ['thread1','thread2']

def thread_links(self,response)
    for thread_link in self.thread_links:
        yield scrapy.Request(url=thread_link,callback=self.parse_thread)

def parse_thread(self,response):
    print(response.text)
def parse_thread(self, response):
    def extract_thread_data(xpath_expression):
        return response.selector.xpath(xpath_expression).getall()
def parse_thread(self,response):
    yield response.xpath(xpath_expression).getall()
USER_AGENT = 'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Mobile Safari/537.36'


ROBOTSTXT_OBEY = False

Connect to OKEX private api using cURL?

copy iconCopydownload iconDownload
GET/api/swap/v3/<instrument_id>/position

Community Discussions

Trending Discussions on zheng
  • Jquery .resizable function - resize icon not displaying properly
  • The prefix &quot;crs&quot; for element &quot;crs:course&quot; is not bound
  • Why am I getting this Powershell hash literal was incomplete error?
  • Placing literature references in a table in Rmd
  • How can I detect when a font is downloaded via CSS's &quot;unicode-range&quot; descriptor?
  • Scrapy - Some questions about scraping a forum
  • Connect to OKEX private api using cURL?
  • Building gRPC C++ from source
Trending Discussions on zheng

QUESTION

Jquery .resizable function - resize icon not displaying properly

Asked 2022-Jan-26 at 01:30

New to coding and doing an interview challenge.

They've asked for a dashboard made from JQuery (which I've never used before). Lots of help from W3schools and here in stack has me accomplished 100% of the functionality I need (even if the design could be improved: functionality first polish later!)

One of the bonus is to have some UI /UX functionality, so I've made the divs dragable, and I added the snip below from https://jqueryui.com/resizable/ to make the divs resizable.

$(function()){
$( "resizable" ).resizable();
});

But when it runs, the little resize icon seems to do something different from the example on the page above.

Are there any ideas how I can fix it back into the resize icon, the way it is supposed to look?

var $linkID, $linkURL

function changeTime(){
    let d= new Date(); //built in JS function
    let mm = ('0' + d.getMinutes()).slice(-2);
    let ss = ('0' + d.getSeconds()).slice(-2);
    document.getElementById("dateTime").innerHTML = `${d.getMonth()}/${d.getDay()}/${d.getYear()} ${d.getHours()}:${mm}:${ss}`;
}

setInterval(changeTime, 1000); //updates the time dynamically.

//Group1
//Click to Show functionality: group 1 
//clicks hide all divs, then uses a "title" attribute as a variable to toggle the associated box showing that title's information. 
//I am no marketer, so the text is some basic info I read on the websites.
$(document).ready(function(){
    $(".clickToShow").click(function(){
        $(".clickToShowBlock").hide();
        let idTag = '#' + this.getAttribute("title");        
      $(idTag).toggle();
    });
  });

//Group 2
//Same as above, except using hover instead of click to show the images.

$(document).ready(function(){    
    $(".hoverToShow").hover(function(){let idTag = '#' + this.getAttribute("title");
        $(idTag).show();
      }, function(){let idTag = '#' + this.getAttribute("title");
        $(idTag).hide();      
      $(".hoverToShowBlock").hide();
    });
  });

  //Group3
  //follows group 1 method, but loads all links at the same time by toggling a button.
  
$(document).ready(function(){
    $("#showLinksButton").click(function(){        
      $(".showLinks").toggle();
    });
  });

  $(function(){
    $("#showLinksButton").click(function () {
       $(this).text(function(i, text){
           return text === "Show Links" ? "Hide Links" : "Show Links";
       })
    });
 })
 //https://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery

 //Group4
 //https://stackoverflow.com/questions/4511652/looping-through-list-items-with-jquery
// http://jsfiddle.net/mblase75/wE4S8/
//from: https://stackoverflow.com/questions/20105762/show-n-number-of-list-elements-at-a-time-jquery
$(document).ready(function (){
    var elements =$("#aviationLinks li");
    var index=0;
    var showTwo = function (index) {
        if (index >=elements.length){
            index = 0
        }
        elements.hide().slice(index, index+2).show();
        setTimeout(function(){
            showTwo(index +2)
        }, 5000);
        }
        showTwo(0);
    });

//Make key-value pairs on id and hyperlinks
const linkIDref = {
    delphiInfo:"https://delphitechcorp.com/",
    vrCityInfo:"https://vrcity.ca/",
    auroraInfo:"https://auroraaerial.aero",
    virbelaURL:"https://virbela.com",
    amazonURL:"https://amazon.com",
    moodleURL:"https://moodle.org",
    xPlaneURL:"https://x-plane.com",
    wordpressURL:"https://wordpress.org",
    gitHub:"https://github.com",
    googleMeet:"https://meet.google.com",
    slack:"https://slack.com",
    wrike:"https://wrike.com",
    airbus:"https://airbus.com",
    boeing:"https://boeing.com",
    lockheedMartin:"https://lockheedmartin.com",
    rtx:"https://rtx.com",
    geAviation:"https://geaviation.com",
    safran:"https://safran-group.com",
    leonardo:"https://leonardocompany.com",
    baseSystems:"https://baesystems.com"
}
//use key-values to populate the dynamic hyperlink functionality.
jQuery(".link").click(function(){
    $linkID = $(this).attr("id");
    window.location.href=linkIDref[$linkID];
})

$( function() {
    $( ".groups" ).draggable();
  } );
  
  $( function() {
    $( ".groups" ).resizable();
  } );
body{
    font-family: Arial, Helvetica, sans-serif;
    font-size:1em;
    background-color: skyblue;
}
h1{
    text-align:center;
}
div{
    border: black solid 2px;
    border-radius:10px;
}
#main{
    width:100%;
    height: fit-content;
    border:none;
}
#dashboard{
    margin:auto auto auto auto;
    display:grid;
    border:none;
    grid-template-columns: auto auto;
    column-gap: 1em;
    row-gap: 1em;
    width:100%;
    height:fit-content;    
}
#dateTime{
    margin:1em auto 1em auto;
    border: black solid 2px;
    width:fit-content;
    height:fit-content;
    padding:1em;
    font-size: larger;
    font-weight: bolder;
    background-color: snow;
}
.groups{
    position: relative;
    margin:auto auto auto auto;
    width:35em;
    min-width: 32.5em;
    background-color: snow;
    padding:0px;
    overflow: hidden;
}
.groups h2{
    position:relative;
    top:-0.9em;
    text-align:center;
    background-color: blue;
    color:white;
    cursor:move;
}
ul{
    list-style-type: none;
    position:relative;
    top:-0.5em;
}
#group1{
    height:10em;
}
#group2{
    height:10em;
}
.clickToShowBlock{
    cursor:pointer;
    display:none;
    position:absolute;
    top: 3.5em;
    left:12em;
    height:fit-content;
    width:20em;
    border:none;
}
.hoverToShowBlock{
    display:none;
    position:absolute;
    top: 4em;
    left:12em;
    height:fit-content;
    width:20em;
    border:none;
}
.hoverToShowBlock img{
    max-height:6em;
    max-width:19em;
}
dd{
    padding: 0.5em 0em 0.5em 0em;
}
.showLinks{
    display:none;
}
#showLinksButton{
    position:absolute;
    right:0.5em;
    top:2em;
    font-size:2em;
}
li:hover{
    cursor:pointer;
}

dd:hover{
    cursor:pointer;
}
@media screen and (max-width: 1200px)
{    
    #dashboard{

        grid-template-columns: auto;
    }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="stylesheet2.css">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Delphi Tech Corp Front-End Development Team Coding Test</title>
    <script src="script2.js" defer></script>
  </head>
  <body>
    <h1>TASK 2 Dashboard</h1>
    <div id="main">
      <div id = "dateTime"></div>
      <div id = "dashboard">
        <div id="group1" class = "groups">
          <h2 id="group1h2">Group 1 - Alan Zheng's Companys + Products</h2> 
          <ul>
            <li class="clickToShow" title = "vrCityInfo">VR City</li>
            <li class="clickToShow"  title = "delphiInfo">Delphi Tech Corp</li>
            <li class="clickToShow"  title = "auroraInfo">Aurora Aerial</li>
          </ul>
          <div id="vrCityInfo" class="clickToShowBlock link"> 
            VR City is a virtual aviation training company. Our virtual community provides people with the learning tools to learn how to fly. 
            <br>
            https://vrcity.ca/
          </div>
          <div id="delphiInfo" class="clickToShowBlock link"> 
            Delphi Technology Corp is integrating new technologies such as augmented reality and virtuality into the aerospace and aviation industries!
            <br>
            https://delphitechcorp.com/
          </div>  
          <div id="auroraInfo" class="clickToShowBlock link">
            Aurora Aerial offers custom drone manufacturing. We develop both drone hardware and software.
            <br>
            https://auroraaerial.aero
          </div>
          
        </div>
        <div id="group2" class = "groups">
          <h2 id="group2h2">Group 2 - Technology products used at Delphi</h2>
          <ul>
            <li class="hoverToShow link" title= "virbela" id= "virbelaURL">Virbela</li>
            <li class="hoverToShow link" title= "amazon" id= "amazonURL">Amazon</li>
            <li class="hoverToShow link" title= "moodle" id= "moodleURL">Moodle</li>
            <li class="hoverToShow link" title= "xPlane" id= "xPlaneURL">X-Plane</li>
            <li class="hoverToShow link" title= "wordpress" id= "wordpressURL">Wordpress</li>
          </ul>
          
          <div id="virbela" class="hoverToShowBlock">
            <img alt="Virbela" src="Logos/5fab9393da4ffe1e20d14cc6_virbela-logo-black-website.png"> 
          </div>
          <div id="amazon" class="hoverToShowBlock">
            <img alt="Amazon" src="Logos/NicePng_amazon-png_197561.png">  
          </div>  
          <div id="moodle" class="hoverToShowBlock">
            <img alt="Moodle" src="Logos/moodle_logo_small.svg">  
          </div>
          <div id="xPlane" class="hoverToShowBlock"> 
            <img alt="X-Plane" src="Logos/x-plane-logo.svg"> 
          </div>  
          <div id="wordpress" class="hoverToShowBlock"> 
            <img alt="Virbela" src="Logos/NicePng_wordpress-logo-png_395752.png"> 
          </div>

        </div>
        <div id="group3" class = "groups">
          <h2 id="group3h2">Group 3 - Websites used at Delphi</h2>
          <ul>
            <dt>GitHub</dt>
              <dd class="showLinks link" id="gitHub">https://github.com</dd>  
            <dt>Google Meet</dt>
              <dd class="showLinks link" id="googleMeet">https://meet.google.com</dd>
            <dt>Slack</dt>
              <dd class="showLinks link" id="slack">https://slack.com</dd>
            <dt>Wrike</dt>
              <dd class="showLinks link" id="wrike">https://wrike.com</dd>    
          </ul>
          <button id="showLinksButton">Show Links</button>
        </div>
        <div id="group4" class = "groups">
          <h2 id="group4h2">Group 4 - Aerospace Companies</h2>

          <ul id="aviationLinks">
            <li class = "cycle link" id="airbus">airbus.com</li> 
            <li class = "cycle link" id="boeing">boeing.com</li>
            <li class = "cycle link" id="lockheedMartin">lockheedmartin.com</li>
            <li class = "cycle link" id="rtx">rtx.com</li>
            <li class = "cycle link" id="geAviation">geaviation.com</li>
            <li class = "cycle link" id="safran">safran-group.com</li>
            <li class = "cycle link" id="leonardo">leonardocompany.com</li>
            <li class = "cycle link" id="baseSystems">baesystems.com</li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

enter image description here

ANSWER

Answered 2021-Dec-18 at 21:46

You simply did not use the jQuery-ui CSS file...

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">

And you have a way too "wide" rule on div. So specific to the rezise handles, it needed an exception using the :not() selector.

div:not(.ui-resizable-handle){

var $linkID, $linkURL

function changeTime(){
    let d= new Date(); //built in JS function
    let mm = ('0' + d.getMinutes()).slice(-2);
    let ss = ('0' + d.getSeconds()).slice(-2);
    document.getElementById("dateTime").innerHTML = `${d.getMonth()}/${d.getDay()}/${d.getYear()} ${d.getHours()}:${mm}:${ss}`;
}

setInterval(changeTime, 1000); //updates the time dynamically.

//Group1
//Click to Show functionality: group 1 
//clicks hide all divs, then uses a "title" attribute as a variable to toggle the associated box showing that title's information. 
//I am no marketer, so the text is some basic info I read on the websites.
$(document).ready(function(){
    $(".clickToShow").click(function(){
        $(".clickToShowBlock").hide();
        let idTag = '#' + this.getAttribute("title");        
      $(idTag).toggle();
    });
  });

//Group 2
//Same as above, except using hover instead of click to show the images.

$(document).ready(function(){    
    $(".hoverToShow").hover(function(){let idTag = '#' + this.getAttribute("title");
        $(idTag).show();
      }, function(){let idTag = '#' + this.getAttribute("title");
        $(idTag).hide();      
      $(".hoverToShowBlock").hide();
    });
  });

  //Group3
  //follows group 1 method, but loads all links at the same time by toggling a button.
  
$(document).ready(function(){
    $("#showLinksButton").click(function(){        
      $(".showLinks").toggle();
    });
  });

  $(function(){
    $("#showLinksButton").click(function () {
       $(this).text(function(i, text){
           return text === "Show Links" ? "Hide Links" : "Show Links";
       })
    });
 })
 //https://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery

 //Group4
 //https://stackoverflow.com/questions/4511652/looping-through-list-items-with-jquery
// http://jsfiddle.net/mblase75/wE4S8/
//from: https://stackoverflow.com/questions/20105762/show-n-number-of-list-elements-at-a-time-jquery
$(document).ready(function (){
    var elements =$("#aviationLinks li");
    var index=0;
    var showTwo = function (index) {
        if (index >=elements.length){
            index = 0
        }
        elements.hide().slice(index, index+2).show();
        setTimeout(function(){
            showTwo(index +2)
        }, 5000);
        }
        showTwo(0);
    });

//Make key-value pairs on id and hyperlinks
const linkIDref = {
    delphiInfo:"https://delphitechcorp.com/",
    vrCityInfo:"https://vrcity.ca/",
    auroraInfo:"https://auroraaerial.aero",
    virbelaURL:"https://virbela.com",
    amazonURL:"https://amazon.com",
    moodleURL:"https://moodle.org",
    xPlaneURL:"https://x-plane.com",
    wordpressURL:"https://wordpress.org",
    gitHub:"https://github.com",
    googleMeet:"https://meet.google.com",
    slack:"https://slack.com",
    wrike:"https://wrike.com",
    airbus:"https://airbus.com",
    boeing:"https://boeing.com",
    lockheedMartin:"https://lockheedmartin.com",
    rtx:"https://rtx.com",
    geAviation:"https://geaviation.com",
    safran:"https://safran-group.com",
    leonardo:"https://leonardocompany.com",
    baseSystems:"https://baesystems.com"
}
//use key-values to populate the dynamic hyperlink functionality.
jQuery(".link").click(function(){
    $linkID = $(this).attr("id");
    window.location.href=linkIDref[$linkID];
})

$( function() {
    $( ".groups" ).draggable();
  } );
  
  $( function() {
    $( ".groups" ).resizable();
  } );
body{
    font-family: Arial, Helvetica, sans-serif;
    font-size:1em;
    background-color: skyblue;
}
h1{
    text-align:center;
}
div:not(.ui-resizable-handle){  /* Added an exception to your generic rule */
    border: black solid 2px;
    border-radius:10px;
}
#main{
    width:100%;
    height: fit-content;
    border:none;
}
#dashboard{
    margin:auto auto auto auto;
    display:grid;
    border:none;
    grid-template-columns: auto auto;
    column-gap: 1em;
    row-gap: 1em;
    width:100%;
    height:fit-content;    
}
#dateTime{
    margin:1em auto 1em auto;
    border: black solid 2px;
    width:fit-content;
    height:fit-content;
    padding:1em;
    font-size: larger;
    font-weight: bolder;
    background-color: snow;
}
.groups{
    position: relative;
    margin:auto auto auto auto;
    width:35em;
    min-width: 32.5em;
    background-color: snow;
    padding:0px;
    overflow: hidden;
}
.groups h2{
    position:relative;
    top:-0.9em;
    text-align:center;
    background-color: blue;
    color:white;
    cursor:move;
}
ul{
    list-style-type: none;
    position:relative;
    top:-0.5em;
}
#group1{
    height:10em;
}
#group2{
    height:10em;
}
.clickToShowBlock{
    cursor:pointer;
    display:none;
    position:absolute;
    top: 3.5em;
    left:12em;
    height:fit-content;
    width:20em;
    border:none;
}
.hoverToShowBlock{
    display:none;
    position:absolute;
    top: 4em;
    left:12em;
    height:fit-content;
    width:20em;
    border:none;
}
.hoverToShowBlock img{
    max-height:6em;
    max-width:19em;
}
dd{
    padding: 0.5em 0em 0.5em 0em;
}
.showLinks{
    display:none;
}
#showLinksButton{
    position:absolute;
    right:0.5em;
    top:2em;
    font-size:2em;
}
li:hover{
    cursor:pointer;
}

dd:hover{
    cursor:pointer;
}
@media screen and (max-width: 1200px)
{    
    #dashboard{

        grid-template-columns: auto;
    }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"><!-- Added the jQuery-ui CSS file -->
    <link rel="stylesheet" href="stylesheet2.css">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Delphi Tech Corp Front-End Development Team Coding Test</title>
    <script src="script2.js" defer></script>
  </head>
  <body>
    <h1>TASK 2 Dashboard</h1>
    <div id="main">
      <div id = "dateTime"></div>
      <div id = "dashboard">
        <div id="group1" class = "groups">
          <h2 id="group1h2">Group 1 - Alan Zheng's Companys + Products</h2> 
          <ul>
            <li class="clickToShow" title = "vrCityInfo">VR City</li>
            <li class="clickToShow"  title = "delphiInfo">Delphi Tech Corp</li>
            <li class="clickToShow"  title = "auroraInfo">Aurora Aerial</li>
          </ul>
          <div id="vrCityInfo" class="clickToShowBlock link"> 
            VR City is a virtual aviation training company. Our virtual community provides people with the learning tools to learn how to fly. 
            <br>
            https://vrcity.ca/
          </div>
          <div id="delphiInfo" class="clickToShowBlock link"> 
            Delphi Technology Corp is integrating new technologies such as augmented reality and virtuality into the aerospace and aviation industries!
            <br>
            https://delphitechcorp.com/
          </div>  
          <div id="auroraInfo" class="clickToShowBlock link">
            Aurora Aerial offers custom drone manufacturing. We develop both drone hardware and software.
            <br>
            https://auroraaerial.aero
          </div>
          
        </div>
        <div id="group2" class = "groups">
          <h2 id="group2h2">Group 2 - Technology products used at Delphi</h2>
          <ul>
            <li class="hoverToShow link" title= "virbela" id= "virbelaURL">Virbela</li>
            <li class="hoverToShow link" title= "amazon" id= "amazonURL">Amazon</li>
            <li class="hoverToShow link" title= "moodle" id= "moodleURL">Moodle</li>
            <li class="hoverToShow link" title= "xPlane" id= "xPlaneURL">X-Plane</li>
            <li class="hoverToShow link" title= "wordpress" id= "wordpressURL">Wordpress</li>
          </ul>
          
          <div id="virbela" class="hoverToShowBlock">
            <img alt="Virbela" src="Logos/5fab9393da4ffe1e20d14cc6_virbela-logo-black-website.png"> 
          </div>
          <div id="amazon" class="hoverToShowBlock">
            <img alt="Amazon" src="Logos/NicePng_amazon-png_197561.png">  
          </div>  
          <div id="moodle" class="hoverToShowBlock">
            <img alt="Moodle" src="Logos/moodle_logo_small.svg">  
          </div>
          <div id="xPlane" class="hoverToShowBlock"> 
            <img alt="X-Plane" src="Logos/x-plane-logo.svg"> 
          </div>  
          <div id="wordpress" class="hoverToShowBlock"> 
            <img alt="Virbela" src="Logos/NicePng_wordpress-logo-png_395752.png"> 
          </div>

        </div>
        <div id="group3" class = "groups">
          <h2 id="group3h2">Group 3 - Websites used at Delphi</h2>
          <ul>
            <dt>GitHub</dt>
              <dd class="showLinks link" id="gitHub">https://github.com</dd>  
            <dt>Google Meet</dt>
              <dd class="showLinks link" id="googleMeet">https://meet.google.com</dd>
            <dt>Slack</dt>
              <dd class="showLinks link" id="slack">https://slack.com</dd>
            <dt>Wrike</dt>
              <dd class="showLinks link" id="wrike">https://wrike.com</dd>    
          </ul>
          <button id="showLinksButton">Show Links</button>
        </div>
        <div id="group4" class = "groups">
          <h2 id="group4h2">Group 4 - Aerospace Companies</h2>

          <ul id="aviationLinks">
            <li class = "cycle link" id="airbus">airbus.com</li> 
            <li class = "cycle link" id="boeing">boeing.com</li>
            <li class = "cycle link" id="lockheedMartin">lockheedmartin.com</li>
            <li class = "cycle link" id="rtx">rtx.com</li>
            <li class = "cycle link" id="geAviation">geaviation.com</li>
            <li class = "cycle link" id="safran">safran-group.com</li>
            <li class = "cycle link" id="leonardo">leonardocompany.com</li>
            <li class = "cycle link" id="baseSystems">baesystems.com</li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

Source https://stackoverflow.com/questions/70407246

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install zheng

You can download it from GitHub.
You can use zheng like any standard Java library. Please include the the jar files in your classpath. You can also use any IDE and you can run and debug the zheng component as you would do with any other Java program. Best practice is to use a build tool that supports dependency management such as Maven or Gradle. For Maven installation, please refer maven.apache.org. For Gradle installation, please refer gradle.org .

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

DOWNLOAD this Library from

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

Explore Related Topics

Share this Page

share link
Compare Messaging Libraries with Highest Support
Compare Messaging Libraries with Highest Security
Compare Messaging Libraries with Permissive License
Compare Messaging Libraries with Highest Reuse
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

  • © 2022 Open Weaver Inc.