🚀 GeekInk JavaScript Foundations

3 Weeks | 3 Days per Week | Project-Based Learning

---

📌 Course Overview

This course guides learners from zero JavaScript knowledge to confidently building interactive, real-world applications.

By the end of the program, students will:

• Understand JavaScript fundamentals deeply
• Write clean, reusable logic
• Manipulate the DOM confidently
• Work with modern JavaScript syntax
• Fetch and handle real API data
• Build portfolio-ready mini applications

This curriculum is designed to be the single source of truth for teaching JavaScript fundamentals at GeekInk.

---

📅 Program Structure

• Duration: 3 Weeks
• Frequency: 3 Days per Week
• Sessions: 9 Total
• Format: Project-Based, Build-As-You-Learn
• Capstone: Mini Learning Portal

---

🌱 WEEK 1 — Core JavaScript & Logical Thinking

Theme: From Zero to Logic Builder

🎯 Week Outcome

Students understand how JavaScript works, write logic confidently, and manipulate structured data.

---

📍 Day 1 — JS Foundations & Data Types

Concepts Covered

• What is JavaScript?
• How JavaScript works with HTML
• Variables (let, const)
• Data Types:
  • String
  • Number
  • Boolean
  • Null
  • Undefined
• Operators
• String methods
• Template literals

🛠 Project 1 — Student Bio Generator

Students build:

• A simple HTML page
• A dynamic JS-powered student bio

Example Output:

"Adamu is currently learning JavaScript at GeekInk and is progressing at beginner level."

Skills Reinforced

• Variables
• String interpolation
• DOM manipulation
• Basic logic

---

📍 Day 2 — Arrays, Objects & Conditional Logic

Concepts Covered

• Arrays
• Objects
• Accessing & modifying values
• Conditional statements (if/else)
• Comparison operators

🛠 Project 2 — Student Performance Tracker

Students build:

• An array of student objects
• Each student contains:
  • name
  • score
  • completedModules

Features

• Display all students
• Show only students above 70%
• Show "Needs Support" if score < 50

Skills Reinforced

• Arrays of objects
• Conditional logic
• Manual filtering
• Intro to looping concepts

---

📍 Day 3 — Functions, Loops & Reusability

Concepts Covered

• Function declarations
• Arrow functions
• Parameters & return values
• Scope
• Loops (for, for...of)

🛠 Project 3 — Progress Calculator

Students build:

• Function to calculate average score
• Function to determine student level:
  • Beginner
  • Intermediate
  • Advanced
• Loop through student list and assign level

Skills Reinforced

• Reusable logic
• Looping arrays
• Clean function structure
• Separation of concerns

---

🔥 WEEK 2 — DOM & Interactivity

Theme: From Logic to Real Interaction

🎯 Week Outcome

Students build interactive applications using real user input and dynamic UI updates.

---

📍 Day 4 — DOM Manipulation Deep Dive

Concepts Covered

• querySelector
• addEventListener
• Updating HTML dynamically
• Understanding event objects

🛠 Project 4 — Task Manager (Part 1)

Students build:

• Input field
• Add task button
• Display tasks in a list

Pure JavaScript — no frameworks.

---

📍 Day 5 — Dynamic Rendering & State

Concepts Covered

• Rendering lists dynamically
• Removing items
• Updating UI state
• Basic form validation

🛠 Project 5 — Task Manager (Part 2)

Add:

• Delete task
• Mark task as complete
• Prevent empty submissions

Skills Reinforced

• State management thinking
• Event-driven programming
• Conditional UI updates

---

📍 Day 6 — Consolidation Project

🛠 Project 6 — Productivity Dashboard

Combine:

• Student tracker
• Task manager
• Progress calculator

Students build a mini dashboard showing:

• Total tasks
• Completed tasks
• Student progress percentage
• Dynamic UI updates

Outcome

This becomes the first portfolio-level project.

---

⚡ WEEK 3 — Modern JavaScript & Real Data

Theme: From Static to Real-World

🎯 Week Outcome

Students understand asynchronous JavaScript and modern syntax patterns.

---

📍 Day 7 — Array Methods & Modern Syntax

Concepts Covered

• map()
• filter()
• reduce() (intro)
• Destructuring
• Spread operator

🛠 Project 7 — Student Ranking System

Students:

• Sort students
• Filter top performers
• Display ranked list
• Use destructuring inside map()

Skills Reinforced

• Functional programming mindset
• Cleaner, modern syntax
• Data transformation

---

📍 Day 8 — Fetch, Promises & Async/Await

Concepts Covered

• What is an API?
• fetch()
• Promises
• async/await
• Error handling
• Loading states

🛠 Project 8 — Course Explorer

Students:

• Fetch data from a public API
• Display courses (mock data)
• Display instructors
• Handle loading state
• Handle errors properly

Skills Reinforced

• Asynchronous programming
• Error handling discipline
• Real-world integration

---

📍 Day 9 — Final Capstone Project

🛠 Final Project — Mini Learning Portal

Students must build:

Features

• Display courses (fetched from API)
• Allow enrolling in a course
• Track progress
• Show completion percentage
• Use:
  • Functions
  • Array methods
  • DOM manipulation
  • Async/Await
  • Modular structure (basic import/export)

Outcome

• Graduation project
• Portfolio piece
• Interview talking point

---

📂 Standard Repository Structure

Each student repository must follow: