Skip to content

Instantly share code, notes, and snippets.

@handrihmw

handrihmw/jds_handri_css1.html

Created January 7, 2019 03:36
Show Gist options
  • Save handrihmw/a27e6ea47d9a7d113b8a684fbe1cc20f to your computer and use it in GitHub Desktop.
Save handrihmw/a27e6ea47d9a7d113b8a684fbe1cc20f to your computer and use it in GitHub Desktop.
Download ZIP
JDS - Technical Answers
Raw
jds_handri_css1.html
<!-- Answer CSS#1 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Avatar</title>
<style>
/* Write your CSS solution here (do not edit the surrounding HTML) */
.avatar{
height:150px;
width:150px;
border-radius:50%;
border:2px solid gray;
}
</style>
</head>
<body>
<img class="avatar" src="https://goo.gl/khGCrk" alt="avatar"/>
</body>
</html>
<!-- == Author: Handri Hermawan | handrihmw.github.io == -->
Raw
jds_handri_css2.html
<!-- Answer CSS#2 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Modal Dialog</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#dialog">Open</button>
<div class="modal" id="dialog">
<div class="modal-dialog">
<div class="modal-body modal-content">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</body>
</html>
<!-- == Author: Handri Hermawan | handrihmw.github.io == -->
Raw
jds_handri_html.html
<!-- Answer HTML -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Company page</title>
</head>
<body>
<p>Welcome! Here you can find the following things:</p>
<ol>
<li><em><a href="#logo">Company's logo</a></em></li>
<li><a href="#employees">List of employees</a></li>
</ol>
<h1>Company's logo</h1>
<p>Company uses the following logos:</p>
<ul>
<li>New logo:<img src="new_logo.gif"/></li>
<li>Old logo:<img src="old_logo.gif"/></li>
</ul>
<h1>List of employees</h1>
<table>
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mary</td>
<td>Williams</td>
</tr>
<tr>
<td>James</td>
<td>Smith</td>
</tr>
</tbody>
</table>
</body>
</html>
<!-- == Author: Handri Hermawan | handrihmw.github.io == -->
Raw
jds_handri_javascript.js
//Answer Javascript
function appendChildren(decorateDivFunction) {
var allDivs = document.querySelectorAll("div");
for (var i = 0; i < allDivs.length; i++) {
var newDiv = document.createElement("div");
decorateDivFunction(newDiv);
allDivs[i].appendChild(newDiv);
}
}
// Example case.
document.body.innerHTML = `
<div id="a">
<div id="b">
</div>
</div>`;
//appendChildren(function(div) {});
console.log(document.body.innerHTML);
// == Author: Handri Hermawan | handrihmw.github.io ==
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment