diff --git a/Day1Exercise/BusinessCard.PNG b/Day1Exercise/BusinessCard.PNG new file mode 100644 index 0000000..ab416f5 Binary files /dev/null and b/Day1Exercise/BusinessCard.PNG differ diff --git a/Day1Exercise/Q1/cardStyles.css b/Day1Exercise/Q1/cardStyles.css new file mode 100644 index 0000000..7b1e7fe --- /dev/null +++ b/Day1Exercise/Q1/cardStyles.css @@ -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; +} \ No newline at end of file diff --git a/Day1Exercise/Q1/cv.jpg b/Day1Exercise/Q1/cv.jpg new file mode 100644 index 0000000..793d957 Binary files /dev/null and b/Day1Exercise/Q1/cv.jpg differ diff --git a/Day1Exercise/Q1/index.html b/Day1Exercise/Q1/index.html new file mode 100644 index 0000000..f7443e4 --- /dev/null +++ b/Day1Exercise/Q1/index.html @@ -0,0 +1,29 @@ + + + + + + Business Card + + + + +
+
+

Yik Teng Hie

+
+
+ Bart +

123 Edgedale Plain
+ #11-233
+ Singapore
+ Tel : 65 - 88890820
+ Mail: net@gmail.com
+

+
+ +
+ + \ No newline at end of file diff --git a/Day1Exercise/Q2/scatter.html b/Day1Exercise/Q2/scatter.html new file mode 100644 index 0000000..3215976 --- /dev/null +++ b/Day1Exercise/Q2/scatter.html @@ -0,0 +1,29 @@ + + + + + + + Scatter Plot + + + + + + + + + + + \ No newline at end of file diff --git a/Day1Exercise/Q2/scatterPlot.js b/Day1Exercise/Q2/scatterPlot.js new file mode 100644 index 0000000..04322fe --- /dev/null +++ b/Day1Exercise/Q2/scatterPlot.js @@ -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); + /* + */ +} \ No newline at end of file diff --git a/Day1Exercise/Q3/reverseString.js b/Day1Exercise/Q3/reverseString.js new file mode 100644 index 0000000..7d9fa96 --- /dev/null +++ b/Day1Exercise/Q3/reverseString.js @@ -0,0 +1,9 @@ +let strGreet = "Hello"; + +let strReverse = ""; + +for (i = strGreet.length - 1; i > -1; i--) { + strReverse += strGreet[i]; +} + +console.log(strReverse); diff --git a/Day1Exercise/README.md b/Day1Exercise/README.md new file mode 100644 index 0000000..777b697 --- /dev/null +++ b/Day1Exercise/README.md @@ -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 `
,