business card
parent
d33562ea34
commit
0f1429c7a6
Binary file not shown.
|
After Width: | Height: | Size: 329 KiB |
@ -0,0 +1,59 @@
|
|||||||
|
/* block comment key: Shift + Alt + A */
|
||||||
|
/* General styles */
|
||||||
|
.card {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Selectors to be matched up with rulesets */
|
||||||
|
.card article img{
|
||||||
|
float: right;
|
||||||
|
height: 100%; /* pct of parent height */
|
||||||
|
max-width: height 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card header{
|
||||||
|
background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0,0.1));
|
||||||
|
border-radius: 1.5em 1.5em 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card footer{
|
||||||
|
background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1));
|
||||||
|
border-radius: 0 0 1.5em 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card{
|
||||||
|
width: 35em;
|
||||||
|
height: 22em;
|
||||||
|
margin: 5em auto;
|
||||||
|
background-color: limegreen;
|
||||||
|
border: 0.2 solid black;
|
||||||
|
border-radius: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* styles specific to the setup of card container */
|
||||||
|
|
||||||
|
/* styles specific to the header and footer */
|
||||||
|
.card header {
|
||||||
|
max-height: 50px;
|
||||||
|
height: 30px;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card footer{
|
||||||
|
max-height: 50px;
|
||||||
|
height: 47px;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* styles specific to main bussiness card contents */
|
||||||
|
.card article {
|
||||||
|
height: 220px;
|
||||||
|
background: rgba(47, 151, 33, 0.5);
|
||||||
|
padding-left: 15px;
|
||||||
|
color: whitesmoke;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
@ -0,0 +1,29 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Business Card</title>
|
||||||
|
<link rel="stylesheet" href="cardStyles.css">
|
||||||
|
<!-- block comment key : Shift + Alt + A -->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<section class="card">
|
||||||
|
<header>
|
||||||
|
<h2>Yik Teng Hie</h2>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<img src="cv.jpg" alt="Bart">
|
||||||
|
<p>123 Edgedale Plain <br>
|
||||||
|
#11-233 <br>
|
||||||
|
Singapore <br>
|
||||||
|
Tel : 65 - 88890820 <br>
|
||||||
|
Mail: net@gmail.com <br>
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<footer>
|
||||||
|
<p>Coding, testing and development services</p>
|
||||||
|
</footer>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Scatter Plot</title>
|
||||||
|
<script src="https://d3js.org/d3.v5.min.js"></script>
|
||||||
|
<script src="scatterPlot.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<button onclick="myScatterPlot()">Plot</button>
|
||||||
|
<!-- <svg width=600 height=600>
|
||||||
|
<circle cx="10" cy="15" r="1" fill="blue"
|
||||||
|
transform="scale(10)" />
|
||||||
|
<circle cx="20" cy="20" r="1" fill="blue"
|
||||||
|
transform="scale(10)" />
|
||||||
|
<circle cx="5" cy="20" r="1" fill="blue"
|
||||||
|
transform="scale(10)" />
|
||||||
|
<circle cx="7" cy="4" r="1" fill="blue"
|
||||||
|
transform="scale(10)" />
|
||||||
|
<circle cx="22" cy="6" r="1" fill="blue"
|
||||||
|
transform="scale(10)" />
|
||||||
|
</svg> -->
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
function myScatterPlot() {
|
||||||
|
var dataset = [[10, 15], [20, 20], [5, 20], [7, 4], [22, 6]];
|
||||||
|
|
||||||
|
|
||||||
|
var svg = d3.select("body")
|
||||||
|
.append('svg')
|
||||||
|
.attr("width", 600)
|
||||||
|
.attr("height", 600);
|
||||||
|
|
||||||
|
var xScale = d3.scale.linear()
|
||||||
|
.domain([0, d3.max(dataset, function (d) { return d[0]; })])
|
||||||
|
.range([0, w]);
|
||||||
|
|
||||||
|
var yScale = d3.scale.linear()
|
||||||
|
.domain([0, d3.max(dataset, function (d) { return d[1]; })])
|
||||||
|
.range([0, h]);
|
||||||
|
|
||||||
|
var rScale = d3.scale.linear()
|
||||||
|
.domain([0, d3.max(dataset, function (d) { return d[1]; })])
|
||||||
|
.range([2, 5]);
|
||||||
|
|
||||||
|
// https://alignedleft.com/tutorials/d3/making-a-scatterplot
|
||||||
|
svg.selectAll("circle").data(dataset).enter().append("circle")
|
||||||
|
/* .attr("transform", function (d, i) { return "scale(10)" }) */
|
||||||
|
.attr("fill", "blue")
|
||||||
|
.attr("cx", function (d) { return xScale(d[0]); })
|
||||||
|
.attr("cy", function (d) { return yScale(d[1]); })
|
||||||
|
.attr("r", rScale(1));
|
||||||
|
|
||||||
|
// print text next to the point
|
||||||
|
svg.selectAll("text")
|
||||||
|
.data(dataset)
|
||||||
|
.enter()
|
||||||
|
.append("text")
|
||||||
|
/* .attr("transform", function (d, i) { return "scale(10)" }) */
|
||||||
|
.text(function (d) {
|
||||||
|
return d[0] + "," + d[1];
|
||||||
|
})
|
||||||
|
.attr("x", function (d) {
|
||||||
|
return d[0] + 1;
|
||||||
|
})
|
||||||
|
.attr("y", function (d) {
|
||||||
|
return d[1];
|
||||||
|
})
|
||||||
|
.attr("font-family", "sans-serif")
|
||||||
|
.attr("font-size", "1px")
|
||||||
|
.attr("fill", "red");
|
||||||
|
|
||||||
|
|
||||||
|
// setup axis
|
||||||
|
var xAxis = d3.svg.axis();
|
||||||
|
xAxis.scale(xScale);
|
||||||
|
xAxis.orient("bottom");
|
||||||
|
svg.append("g")
|
||||||
|
.call(xAxis);
|
||||||
|
/* <circle cx="0" cy="0" r="10" fill="blue"
|
||||||
|
transform="scale(4)" />
|
||||||
|
*/
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
let strGreet = "Hello";
|
||||||
|
|
||||||
|
let strReverse = "";
|
||||||
|
|
||||||
|
for (i = strGreet.length - 1; i > -1; i--) {
|
||||||
|
strReverse += strGreet[i];
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(strReverse);
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
# Day 1 Exercise
|
||||||
|
|
||||||
|
## Business Card
|
||||||
|
|
||||||
|
* [HTML5 Guide](https://www.semrush.com/blog/semantic-html5-guide)
|
||||||
|
* [HTML5 Developer Guide](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)
|
||||||
|
* [Web Technology for Developer](https://developer.mozilla.org/en-US/docs/Web)
|
||||||
|
|
||||||
|
Useful html tags `<header>,<article><footer><section>`
|
||||||
|
|
||||||
|
Sample Output
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## [D3.JS](https://d3js.org/)
|
||||||
|
|
||||||
|
Draw a scatter plot graph
|
||||||
|
|
||||||
|
```
|
||||||
|
Data = [ [ 10,15], [20,20], [5,20], [7,4], [22, 6] ]
|
||||||
|
```
|
||||||
|
|
||||||
|
Tips : Use SVG circles
|
||||||
|
|
||||||
|
Scale data by 10 times
|
||||||
|
|
||||||
|
|
||||||
|
## Javascript
|
||||||
|
|
||||||
|
Create code to reverse a string
|
||||||
|
|
||||||
|
* Given string : "Hello!"
|
||||||
|
* Output: "!olleH"
|
||||||
|
|
||||||
|
## Self Assessment
|
||||||
|
|
||||||
|
[Self Assessment](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator)
|
||||||
Binary file not shown.
Loading…
Reference in New Issue