├── screenshots
├── preview1.png
├── preview2.png
└── preview3.png
├── default.html
├── data
└── students.json
├── README.md
├── theme.css
└── function.js
/screenshots/preview1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reezicyb/estrada-es6-asynchronous-programming/HEAD/screenshots/preview1.png
--------------------------------------------------------------------------------
/screenshots/preview2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reezicyb/estrada-es6-asynchronous-programming/HEAD/screenshots/preview2.png
--------------------------------------------------------------------------------
/screenshots/preview3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reezicyb/estrada-es6-asynchronous-programming/HEAD/screenshots/preview3.png
--------------------------------------------------------------------------------
/default.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | ES6 & Asynchronous Programming
6 |
7 |
8 |
9 |
10 |
11 |
12 | ES6 & Asynchronous Programming
13 |
14 |
15 |
16 |
17 |
18 |
19 | Console demos
20 | Open the browser console to see the Promise (.then) and Async/Await logs.
21 |
22 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/data/students.json:
--------------------------------------------------------------------------------
1 | {
2 | "students": [
3 | {
4 | "id": 1,
5 | "name": "Daniel Padilla",
6 | "age": 30,
7 | "course": "Computer Science"
8 | },
9 | {
10 | "id": 2,
11 | "name": "Enrique Gil",
12 | "age": 33,
13 | "course": "Information Technology"
14 | },
15 | {
16 | "id": 3,
17 | "name": "Raiko Estrada",
18 | "age": 18,
19 | "course": "Software Engineering"
20 | },
21 | {
22 | "id": 4,
23 | "name": "Brent Manalo",
24 | "age": 27,
25 | "course": "Data Science"
26 | },
27 | {
28 | "id": 5,
29 | "name": "James Reid",
30 | "age": 32,
31 | "course": "Cybersecurity"
32 | }
33 | ],
34 | "courses": [
35 | {
36 | "id": 101,
37 | "title": "Computer Science",
38 | "description": "Study of algorithms, programming, and computing systems."
39 | },
40 | {
41 | "id": 102,
42 | "title": "Information Technology",
43 | "description": "Focus on managing and deploying computer systems and networks."
44 | },
45 | {
46 | "id": 103,
47 | "title": "Software Engineering",
48 | "description": "Application of engineering principles to software development."
49 | },
50 | {
51 | "id": 104,
52 | "title": "Data Science",
53 | "description": "Methods and tools to extract insights from data."
54 | },
55 | {
56 | "id": 105,
57 | "title": "Cybersecurity",
58 | "description": "Protection of systems, detection and prevention of cyber threats."
59 | }
60 | ],
61 | "instructors": [
62 | {
63 | "id": 1,
64 | "name": "Lebron James",
65 | "subject": "Modern JavaScript & Next js Prerequisites"
66 | },
67 | {
68 | "id": 2,
69 | "name": "Kobe Bryant",
70 | "subject": "Data Science Fundamentals"
71 | },
72 | {
73 | "id": 3,
74 | "name": "Micheal Jordan",
75 | "subject": "Cybersecurity and Networks"
76 | }
77 | ]
78 | }
79 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 📝 IT Elective 1 – Advanced Web Development
2 |
3 | | **Activity** | **Instructor** | **Semester** | **Schedule** |
4 | |----------------|-------------------|---------------|--------------|
5 | | ES6 & Asynchronous Programming | John Rey Silverio | 1st Sem. AY 2025–2026 | Saturday, 8:00 AM – 12:00 PM |
6 |
7 | ---
8 |
9 | # Project Overview
10 |
11 | This project is an **academic activity** for IT Elective 1 (Advanced Web Development).
12 | It demonstrates the use of **ES6 features** (classes, template literals, maps, arrow functions) and **Asynchronous Programming** (Promises + Async/Await) in a web-based application.
13 |
14 | ---
15 |
16 | ## Features
17 |
18 | - **Course List** – Displays all courses with titles and descriptions.
19 | - **Instructor Section** – Shows instructors with glowing **SSS+ badges**.
20 | - **Student Section** – Lists students with:
21 | - **Rank badges** (SS, S, A, C, etc.)
22 | - **21+ badge** for students aged 21 and above
23 | - **Bold + glow effect** highlighting adult students
24 | - **Async Data Fetching** – Data is loaded from a local JSON file (`data/students.json`) using:
25 | - **Promise-based fetch**
26 | - **Async/Await fetch**
27 | - **Modern ES6+ Syntax** – Uses classes (`Student`, `Instructor`), `map()`, template literals, and modular structure.
28 |
29 | ---
30 |
31 | ## 🖼️ Previews Screenshot
32 |
33 | 
34 | 
35 | 
36 |
37 |
38 | ---
39 |
40 | ## 🗂️ Project Structure
41 | 📂 estrada-es6-asynchronous-programming
42 | ┣ 📂 data
43 | ┃ ┗ 📜 students.json
44 | ┣ 📂 screenshots
45 | ┃ ┗ 🌄 preview1.png
46 | ┃ ┗ 🌄 preview2.png
47 | ┣ 📜 index.html
48 | ┣ 📜 script.js
49 | ┣ 📜 README.md
50 | ┗ 📜 styles.css
51 |
52 | ---
53 |
54 | ## 🚀 How to Run
55 |
56 | 1. Clone or download this repository.
57 | 2. Ensure `data/students.json` is inside a `data` folder.
58 | 3. Open `index.html` in your browser.
59 | 4. Open the browser console (`F12`) to see:
60 | - Student `introduce()` messages
61 | - Instructor `teach()` messages
62 | - Promise vs. Async/Await logs
63 |
64 | ---
65 |
--------------------------------------------------------------------------------
/theme.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap");
2 |
3 | body {
4 | font-family: "Poppins", sans-serif;
5 | margin: 0;
6 | padding: 0;
7 | background: #0d1117;
8 | color: #e6e6e6;
9 | line-height: 1.6;
10 | }
11 |
12 | main {
13 | max-width: 1000px;
14 | margin: 0 auto;
15 | padding: 30px 20px;
16 | }
17 |
18 | h1 {
19 | text-align: center;
20 | font-size: 2.8rem;
21 | font-weight: 700;
22 | background: linear-gradient(135deg, #e50914, #3b82f6);
23 | -webkit-background-clip: text;
24 | -webkit-text-fill-color: transparent;
25 | margin-bottom: 30px;
26 | }
27 |
28 | h2 {
29 | color: #fff;
30 | margin: 40px 0 20px;
31 | font-size: 1.8rem;
32 | font-weight: 600;
33 | text-align: center;
34 | position: relative;
35 | }
36 |
37 | h2::after {
38 | content: "";
39 | display: block;
40 | width: 60px;
41 | height: 4px;
42 | background: #e50914;
43 | margin: 10px auto 0;
44 | border-radius: 2px;
45 | }
46 |
47 | #output {
48 | display: flex;
49 | flex-direction: column;
50 | gap: 25px;
51 | align-items: center;
52 | }
53 |
54 | .card {
55 | width: 100%;
56 | max-width: 700px;
57 | background: #161b22;
58 | padding: 20px;
59 | border-radius: 18px;
60 | box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
61 | transition: transform 0.25s ease, box-shadow 0.25s ease;
62 | }
63 |
64 | .card:hover {
65 | transform: translateY(-6px);
66 | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
67 | }
68 |
69 | .card h3 {
70 | margin-top: 0;
71 | font-size: 1.3rem;
72 | color: #3b82f6;
73 | }
74 |
75 | .card p {
76 | margin: 6px 0;
77 | color: #d1d5db;
78 | }
79 |
80 | .card ul {
81 | list-style: none;
82 | padding-left: 0;
83 | }
84 |
85 | .card li {
86 | margin: 8px 0;
87 | font-size: 1rem;
88 | }
89 |
90 | .student-highlight {
91 | font-weight: 700;
92 | color: #fff;
93 | text-shadow: 0 0 6px rgba(229, 9, 20, 0.9),
94 | 0 0 12px rgba(229, 9, 20, 0.7);
95 | }
96 |
97 | .student-badge {
98 | font-size: 0.7rem;
99 | font-weight: 700;
100 | padding: 3px 8px;
101 | border-radius: 10px;
102 | margin-left: 6px;
103 | display: inline-block;
104 | }
105 |
106 | .rank-badge {
107 | font-size: 0.75rem;
108 | font-weight: 700;
109 | padding: 4px 10px;
110 | border-radius: 10px;
111 | margin-left: 6px;
112 | display: inline-block;
113 | animation: pulseRank 2s infinite ease-in-out;
114 | }
115 |
116 | .rank-ss {
117 | background: linear-gradient(135deg, #f7e96d, #e6c94d);
118 | color: #3a3200;
119 | box-shadow: 0 0 12px rgba(247, 233, 109, 0.8),
120 | 0 0 25px rgba(230, 201, 77, 0.6);
121 | }
122 |
123 | .rank-s {
124 | background: linear-gradient(135deg, #ffe66d, #ffd633);
125 | color: #3a3200;
126 | box-shadow: 0 0 12px rgba(255, 214, 51, 0.8),
127 | 0 0 25px rgba(255, 214, 51, 0.6);
128 | }
129 |
130 | .rank-c {
131 | background: linear-gradient(135deg, #9d4edd, #5a189a);
132 | color: #f5e6ff;
133 | box-shadow: 0 0 12px rgba(157, 78, 221, 0.8),
134 | 0 0 25px rgba(90, 24, 154, 0.6);
135 | }
136 |
137 | .rank-a {
138 | background: linear-gradient(135deg, #ff9e42, #e66a00);
139 | color: #fff5e6;
140 | box-shadow: 0 0 12px rgba(255, 158, 66, 0.8),
141 | 0 0 25px rgba(230, 106, 0, 0.6);
142 | }
143 |
144 | .badge-21 {
145 | background: #e50914;
146 | color: #fff;
147 | font-size: 0.75rem;
148 | font-weight: 600;
149 | padding: 3px 8px;
150 | border-radius: 12px;
151 | margin-left: 8px;
152 | display: inline-block;
153 | box-shadow: 0 0 10px rgba(229, 9, 20, 0.8), 0 0 20px rgba(229, 9, 20, 0.5);
154 | animation: pulseGlow 1.5s infinite ease-in-out;
155 | }
156 |
157 | .instructor-badge {
158 | background: linear-gradient(135deg, #f8e800, #d4af37);
159 | color: #fff8dc;
160 | font-size: 0.75rem;
161 | font-weight: 700;
162 | padding: 4px 10px;
163 | border-radius: 12px;
164 | margin-left: 10px;
165 | display: inline-block;
166 | box-shadow: 0 0 10px rgba(255, 223, 0, 0.9),
167 | 0 0 20px rgba(255, 215, 0, 0.7);
168 | animation: pulseLegend 1.5s infinite ease-in-out;
169 | }
170 |
171 | @keyframes pulseSync {
172 | 0% { transform: scale(1); }
173 | 50% { transform: scale(1.15); }
174 | 100% { transform: scale(1); }
175 | }
176 |
177 | .rank-badge,
178 | .badge-21,
179 | .instructor-badge {
180 | animation: pulseSync 1.5s infinite ease-in-out;
181 | }
182 |
183 | section p {
184 | text-align: center;
185 | font-size: 0.95rem;
186 | color: #c9d1d9;
187 | background: #21262d;
188 | padding: 12px;
189 | border-radius: 10px;
190 | }
191 |
192 | footer {
193 | text-align: center;
194 | padding: 20px;
195 | background: #0a0f1e;
196 | color: #fff;
197 | margin-top: 50px;
198 | border-top-left-radius: 20px;
199 | border-top-right-radius: 20px;
200 | font-size: 0.9rem;
201 | }
202 |
--------------------------------------------------------------------------------
/function.js:
--------------------------------------------------------------------------------
1 | class Student {
2 | constructor(id, name, age, course) {
3 | this.id = id;
4 | this.name = name;
5 | this.age = age;
6 | this.course = course;
7 | }
8 |
9 | introduce() {
10 | return `Hi, my name is ${this.name}, I am ${this.age} years old, and I am enrolled in ${this.course}.`;
11 | }
12 | }
13 |
14 | class Instructor {
15 | constructor(id, name, subject) {
16 | this.id = id;
17 | this.name = name;
18 | this.subject = subject;
19 | }
20 |
21 | teach() {
22 | return `I am ${this.name} and I teach ${this.subject}.`;
23 | }
24 | }
25 |
26 | const outputEl = document.getElementById("output");
27 |
28 | function clearOutput() {
29 | outputEl.innerHTML = "";
30 | }
31 |
32 | function render(data) {
33 | clearOutput();
34 |
35 | const { students, courses, instructors } = data;
36 |
37 | const stCard = document.createElement("div");
38 | stCard.className = "card";
39 | stCard.innerHTML = `Students
`;
40 | const stList = document.createElement("ul");
41 |
42 | students.forEach((s) => {
43 | const li = document.createElement("li");
44 | const text = `${s.name} (${s.age}) - ${s.course}`;
45 |
46 | let badges = "";
47 |
48 | if (s.name.includes("Daniel Padilla")) {
49 | badges += `SS`;
50 | } else if (s.name.includes("Enrique Gil")) {
51 | badges += `S`;
52 | } else if (s.name.includes("Raiko Estrada")) {
53 | badges += `C`;
54 | } else if (s.name.includes("Brent Manalo")) {
55 | badges += `A`;
56 | } else if (s.name.includes("James Reid")) {
57 | badges += `A`;
58 | }
59 |
60 | if (s.age > 21) {
61 | li.innerHTML = `
62 | ${text}
63 | 21+
64 | `;
65 | } else {
66 | li.textContent = text;
67 | }
68 |
69 | li.innerHTML += ` ${badges}`;
70 | stList.appendChild(li);
71 | });
72 |
73 | stCard.appendChild(stList);
74 | outputEl.appendChild(stCard);
75 |
76 | const cCard = document.createElement("div");
77 | cCard.className = "card";
78 | cCard.innerHTML = `Courses
`;
79 | const cList = document.createElement("ul");
80 |
81 | courses.forEach((c) => {
82 | const li = document.createElement("li");
83 | li.innerHTML = `${c.title}: ${c.description}`;
84 | cList.appendChild(li);
85 | });
86 |
87 | cCard.appendChild(cList);
88 | outputEl.appendChild(cCard);
89 |
90 | const iCard = document.createElement("div");
91 | iCard.className = "card";
92 | iCard.innerHTML = `Instructors (3 Goats)
`;
93 | const iList = document.createElement("ul");
94 |
95 | instructors.forEach((i) => {
96 | const li = document.createElement("li");
97 | li.innerHTML = `
98 | ${i.name} - ${i.subject}
99 | SSS+
100 | `;
101 | iList.appendChild(li);
102 | });
103 |
104 | iCard.appendChild(iList);
105 | outputEl.appendChild(iCard);
106 | }
107 |
108 | function fetchDataPromises() {
109 | return fetch("data/students.json")
110 | .then((resp) => {
111 | if (!resp.ok) throw new Error("Network response was not ok");
112 | return resp.json();
113 | })
114 | .catch((err) => {
115 | console.error("Promise fetch error:", err);
116 | throw err;
117 | });
118 | }
119 |
120 | async function fetchDataAsync() {
121 | try {
122 | const resp = await fetch("data/students.json");
123 | if (!resp.ok) throw new Error("Network response was not ok");
124 | return await resp.json();
125 | } catch (err) {
126 | console.error("Async fetch error:", err);
127 | throw err;
128 | }
129 | }
130 |
131 | async function init() {
132 | try {
133 | const [promiseData, asyncData] = await Promise.all([
134 | fetchDataPromises(),
135 | fetchDataAsync()
136 | ]);
137 |
138 | const studentObjs = promiseData.students
139 | .slice(0, 3)
140 | .map((s) => new Student(s.id, s.name, s.age, s.course));
141 | const instructorObjs = promiseData.instructors
142 | .slice(0, 2)
143 | .map((i) => new Instructor(i.id, i.name, i.subject));
144 |
145 | console.log("Student objects:", studentObjs);
146 | console.log("Instructor objects:", instructorObjs);
147 |
148 | console.log("Promise version data:", promiseData);
149 | console.log("Async/Await version data:", asyncData);
150 |
151 | const studentsInstances = asyncData.students.map(
152 | (s) => new Student(s.id, s.name, s.age, s.course)
153 | );
154 | const instructorsInstances = asyncData.instructors.map(
155 | (i) => new Instructor(i.id, i.name, i.subject)
156 | );
157 |
158 | console.log(
159 | "Introductions (Async):",
160 | studentsInstances.map((s) => s.introduce())
161 | );
162 | console.log(
163 | "Teach messages (Async):",
164 | instructorsInstances.map((i) => i.teach())
165 | );
166 |
167 | console.log("DATA RELATIONSHIP\n\nStudents:");
168 | asyncData.students.forEach((s) => {
169 | const course = asyncData.courses.find(c => c.title === s.course);
170 | const courseDesc = course ? course.description : "No description available";
171 | console.log(`${s.name} → ${s.course} → ${courseDesc}`);
172 | });
173 |
174 | const courseInstructor = {
175 | "Computer Science": "LeBron James",
176 | "Information Technology": "LeBron James",
177 | "Software Engineering": "LeBron James",
178 | "Data Science": "Kobe Bryant",
179 | "Cybersecurity": "Michael Jordan"
180 | };
181 |
182 | console.log("\nInstructors:");
183 | asyncData.courses.forEach((c) => {
184 | const instructor = courseInstructor[c.title] || "N/A";
185 | console.log(`${c.title} → Taught by ${instructor}`);
186 | });
187 |
188 | render(asyncData);
189 |
190 | } catch (err) {
191 | outputEl.innerHTML =
192 | `Failed to load data. See console for details.
`;
193 | }
194 | }
195 |
196 | init();
--------------------------------------------------------------------------------