Skip to content

Commit 9e07c90

Browse files
ryohilmiryohilmi
committed
feat: dynamically render elements
1 parent 18c9ae6 commit 9e07c90

File tree

4 files changed

+110
-93
lines changed

4 files changed

+110
-93
lines changed

‎assets/js/elements.js

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
export const appElements = [
2+
{
3+
name: "About Me",
4+
image: "/assets/images/about.png",
5+
target: "about-window",
6+
},
7+
{
8+
name: "Skills",
9+
image: "/assets/images/skills.png",
10+
target: "skills-window",
11+
},
12+
{
13+
name: "Education",
14+
image: "/assets/images/education.png",
15+
target: "education-window",
16+
},
17+
{
18+
name: "Portfolio",
19+
image: "/assets/images/portfolio.png",
20+
target: "portfolio-window",
21+
},
22+
{
23+
name: "Contact",
24+
image: "/assets/images/contacts.png",
25+
target: "contact-window",
26+
},
27+
];
28+
29+
export const windowElements = [
30+
{
31+
id: "welcome",
32+
title: "Welcome :)",
33+
content: "/markdown/welcome.md",
34+
active: true,
35+
},
36+
{
37+
id: "about-window",
38+
title: "About Me",
39+
},
40+
{
41+
id: "skills-window",
42+
title: "Skills",
43+
},
44+
{
45+
id: "education-window",
46+
title: "Education",
47+
},
48+
{
49+
id: "portfolio-window",
50+
title: "Portfolio",
51+
},
52+
{
53+
id: "contact-window",
54+
title: "Contact",
55+
},
56+
];
57+
58+
export function renderApp(app) {
59+
const appElement = document.createElement("div");
60+
appElement.classList.add("app");
61+
appElement.setAttribute("data-target", app.target);
62+
appElement.innerHTML = `
63+
<img src="${app.image}" alt="${app.name}" />
64+
<p>${app.name}</p>
65+
`;
66+
return appElement;
67+
}
68+
69+
export function renderWindow(window) {
70+
const windowElement = document.createElement("div");
71+
windowElement.id = window.id;
72+
windowElement.classList.add("window");
73+
if (window.active) windowElement.classList.add("active");
74+
75+
const windowContent = window?.content
76+
? `
77+
<md-block src="${window.content}"> </md-block>
78+
`
79+
: "";
80+
81+
windowElement.innerHTML = `
82+
<div class="header">
83+
<span>${window.title}</span>
84+
<button class="fullscreen">O</button>
85+
<button class="close">X</button>
86+
</div>
87+
<div class="content">
88+
${windowContent}
89+
</div>
90+
<div class="resizer"></div>
91+
`;
92+
return windowElement;
93+
}

‎assets/js/script.js

+14-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,17 @@
1+
import {
2+
appElements,
3+
windowElements,
4+
renderApp,
5+
renderWindow,
6+
} from "./elements";
7+
8+
const desktop = document.getElementById("screen");
9+
appElements.forEach((app) => desktop.appendChild(renderApp(app)));
10+
windowElements.forEach((window) => desktop.appendChild(renderWindow(window)));
11+
12+
const MIN_WINDOW_WIDTH = 400;
13+
const MIN_WINDOW_HEIGHT = 170;
14+
115
const time = document.querySelector("#time");
216
const apps = document.querySelectorAll(".app");
317
const appsWindow = document.querySelectorAll(".window");
@@ -6,9 +20,6 @@ let startPos;
620
let endPos;
721
let windowIndexes = {};
822

9-
const MIN_WINDOW_WIDTH = 250;
10-
const MIN_WINDOW_HEIGHT = 150;
11-
1223
setTime();
1324
positionApps();
1425

‎assets/scss/style.scss

+1
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,7 @@ body {
155155
#start-btn {
156156
@include outset-border;
157157
@include button;
158+
font-family: 'Windows 95';
158159
padding: 3px 10px;
159160
margin: 2px;
160161
font-weight: bold;

‎index.html

+2-90
Original file line numberDiff line numberDiff line change
@@ -15,99 +15,11 @@
1515
type="module"
1616
src="https://md-block.verou.me/md-block.js"
1717
></script>
18+
<script src="/assets/js/elements.js"></script>
1819
<script type="module" src="./assets/js/script.js" defer></script>
1920
</head>
2021
<body>
21-
<div id="screen">
22-
<div class="app" data-target="about-window">
23-
<img src="/assets/images/about.png" alt="Recycle bin" />
24-
<span>About Me</span>
25-
</div>
26-
27-
<div class="app" data-target="skills-window">
28-
<img src="/assets/images/skills.png" alt="Recycle bin" />
29-
<span>Skills</span>
30-
</div>
31-
32-
<div class="app" data-target="education-window">
33-
<img src="/assets/images/education.png" alt="Recycle bin" />
34-
<span>Education</span>
35-
</div>
36-
37-
<div class="app" data-target="portfolio-window">
38-
<img src="/assets/images/portfolio.png" alt="Recycle bin" />
39-
<span>Portfolio</span>
40-
</div>
41-
42-
<div class="app" data-target="contact-window">
43-
<img src="/assets/images/contacts.png" alt="Recycle bin" />
44-
<span>Contact</span>
45-
</div>
46-
47-
<div class="window active" id="welcome">
48-
<div class="header">
49-
<span>Welcome :)</span>
50-
<button class="fullscreen">O</button>
51-
<button class="close">X</button>
52-
</div>
53-
<div class="content">
54-
<md-block src="/markdown/welcome.md"> </md-block>
55-
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
56-
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
57-
</div>
58-
<div class="resizer"></div>
59-
</div>
60-
61-
<div class="window" id="about-window">
62-
<div class="header">
63-
<span>About Me</span>
64-
<button class="fullscreen">O</button>
65-
<button class="close">X</button>
66-
</div>
67-
<div class="content"></div>
68-
<div class="resizer"></div>
69-
</div>
70-
71-
<div class="window" id="skills-window">
72-
<div class="header">
73-
<span>Skills</span>
74-
<button class="fullscreen">O</button>
75-
<button class="close">X</button>
76-
</div>
77-
<div class="content"></div>
78-
<div class="resizer"></div>
79-
</div>
80-
81-
<div class="window" id="education-window">
82-
<div class="header">
83-
<span>Education</span>
84-
<button class="fullscreen">O</button>
85-
<button class="close">X</button>
86-
</div>
87-
<div class="content"></div>
88-
<div class="resizer"></div>
89-
</div>
90-
91-
<div class="window" id="portfolio-window">
92-
<div class="header">
93-
<span>Portfolio</span>
94-
<button class="fullscreen">O</button>
95-
<button class="close">X</button>
96-
</div>
97-
<div class="content"></div>
98-
<div class="resizer"></div>
99-
</div>
100-
</div>
101-
102-
<div class="window" id="contact-window">
103-
<div class="header">
104-
<span>Contact</span>
105-
<button class="fullscreen">O</button>
106-
<button class="close">X</button>
107-
</div>
108-
<div class="content"></div>
109-
<div class="resizer"></div>
110-
</div>
22+
<div id="screen"></div>
11123

11224
<div id="taskbar">
11325
<button id="start-btn">Start</button>

0 commit comments

Comments
 (0)