html
html
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="d1" class="infobox"></div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
body{
display:grid;
align-items:center;
}
/*custom tag for red text*/
r{
color:red;
}
.infobox{
margin:auto;
margin-top:25px;
outline:2px solid red;
width:250px;
min-width:0;
height:fit-content;
border-radius:5px;
display:flex;
flex-direction:column;
}
.infobox > p{
margin:10px auto 10px 20px;
}
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// test objects
const myobj = {
name: "Alex",
hobbies: ["bird watching", "coin collecting", "painting"],
single: false,
join_date : new Date("2020-05-12")
}
const myobj2 = {
name: "Jenna",
hobbies: ["cross-stitching", "baking", "hiking"],
single: true,
join_date : new Date("2023-12-02")
}
// no string parsing
console.log(myobj);
console.log("\n--------------\n");
// using JSON.stringify()
console.log(JSON.stringify(myobj,null,2));
console.log("\n--------------\n");
BROWSER
Console
Run