Skip to content

Commit 382d2d7

Browse files
MrbrianojeeMrbrianojee
authored
Reintroduced accessibility icons
1 parent f79afd2 commit 382d2d7

1 file changed

Lines changed: 205 additions & 0 deletions

File tree

‎full-stack-project-implementation-guide.html‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1547,6 +1547,211 @@ <h5>What Should Be in Place By The End Of This Phase?</h5>
15471547

15481548
</script>
15491549
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
1550+
</script>
1551+
<script type="text/javascript">
1552+
document.addEventListener("DOMContentLoaded", () => {
1553+
// Add icons before specific h5 and h2 elements based on their content
1554+
document.querySelectorAll('.accordion-body h5').forEach(h5 => {
1555+
if (h5.textContent.includes("Expected Performance (Do's)")) {
1556+
const icon = document.createElement("span");
1557+
icon.textContent = "✓"; // Checkmark icon
1558+
icon.style.color = "#0091DB"; // Accent color
1559+
icon.style.marginRight = "10px"; // Spacing
1560+
h5.prepend(icon); // Add the icon before the h5 text
1561+
} else if (h5.textContent.includes("Areas for Improvement (Don'ts)")) {
1562+
const icon = document.createElement("span");
1563+
icon.textContent = "✗"; // Cross icon
1564+
icon.style.color = "#F48C06"; // Warning color
1565+
icon.style.marginRight = "10px"; // Spacing
1566+
h5.prepend(icon); // Add the icon before the h5 text
1567+
} else if (h5.textContent.includes("Documentation Task")) {
1568+
const icon = document.createElement("span");
1569+
icon.textContent = "📝"; // Document icon
1570+
icon.style.color = "#6c757d"; // Neutral color
1571+
icon.style.marginRight = "10px"; // Spacing
1572+
h5.prepend(icon); // Add the icon before the h5 text
1573+
}
1574+
});
1575+
// Add an icon for "Health and Well-Being Guidance"
1576+
document.querySelectorAll('.accordion-header button').forEach(button => {
1577+
if (button.textContent.includes("Health and Well-Being Guidance")) {
1578+
const icon = document.createElement("span");
1579+
icon.textContent = "💡"; // Light bulb icon for guidance
1580+
icon.style.color = "#FFD700"; // Gold color for emphasis
1581+
icon.style.marginRight = "10px"; // Spacing
1582+
button.prepend(icon); // Add the icon before the button text
1583+
}
1584+
});
1585+
// Add icons for each phase header
1586+
document.querySelectorAll('.accordion-header button').forEach(button => {
1587+
if (button.textContent.includes("Phase 1: Ideation & Initial Setup")) {
1588+
const icon = document.createElement("span");
1589+
icon.textContent = "🧠"; // Brain icon for ideation
1590+
icon.style.color = "#007BFF"; // Blue color for creativity
1591+
icon.style.marginRight = "10px"; // Spacing
1592+
button.prepend(icon); // Add the icon before the button text
1593+
} else if (button.textContent.includes("Phase 2: Must User Stories Implementation & Testing")) {
1594+
const icon = document.createElement("span");
1595+
icon.textContent = "✔"; // Checkmark icon for essential tasks
1596+
icon.style.color = "#28A745"; // Green color for importance
1597+
icon.style.marginRight = "10px"; // Spacing
1598+
button.prepend(icon); // Add the icon before the button text
1599+
} else if (button.textContent.includes("Phase 3: Should User Stories Implementation & Advanced Features")) {
1600+
const icon = document.createElement("span");
1601+
icon.textContent = "⭐"; // Star icon for enhancements
1602+
icon.style.color = "#FFC107"; // Yellow color for features
1603+
icon.style.marginRight = "10px"; // Spacing
1604+
button.prepend(icon); // Add the icon before the button text
1605+
} else if (button.textContent.includes("Phase 4: Final Testing, Debugging & Deployment")) {
1606+
const icon = document.createElement("span");
1607+
icon.textContent = "🚀"; // Rocket icon for deployment
1608+
icon.style.color = "#DC3545"; // Red color for culmination
1609+
icon.style.marginRight = "10px"; // Spacing
1610+
button.prepend(icon); // Add the icon before the button text
1611+
}
1612+
});
1613+
});
1614+
</script>
1615+
1616+
<script type="text/javascript">
1617+
document.addEventListener("DOMContentLoaded", () => {
1618+
// Add icons for the Health and Well-Being Guidance bullet headings
1619+
document.querySelectorAll('.accordion-body ul > li').forEach(listItem => {
1620+
const text = listItem.textContent.trim();
1621+
1622+
// Add icons for main headings
1623+
if (text.startsWith("Manage Your Time Wisely")) {
1624+
const icon = document.createElement("span");
1625+
icon.textContent = "⏰"; // Clock icon
1626+
icon.style.color = "#007BFF"; // Blue color for time management
1627+
icon.style.marginRight = "10px"; // Spacing
1628+
listItem.prepend(icon);
1629+
} else if (text.startsWith("Take Regular, Short Breaks")) {
1630+
const icon = document.createElement("span");
1631+
icon.textContent = "🔄"; // Refresh icon for breaks
1632+
icon.style.color = "#28A745"; // Green color for refreshing
1633+
icon.style.marginRight = "10px"; // Spacing
1634+
listItem.prepend(icon);
1635+
} else if (text.startsWith("Maintain a Functional Workspace")) {
1636+
const icon = document.createElement("span");
1637+
icon.textContent = "💺"; // Chair icon
1638+
icon.style.color = "#FFC107"; // Yellow color for workspace
1639+
icon.style.marginRight = "10px"; // Spacing
1640+
listItem.prepend(icon);
1641+
} else if (text.startsWith("Stay Hydrated and Nourished")) {
1642+
const icon = document.createElement("span");
1643+
icon.textContent = "💧"; // Water drop icon
1644+
icon.style.color = "#00BFFF"; // Light blue color for hydration
1645+
icon.style.marginRight = "10px"; // Spacing
1646+
listItem.prepend(icon);
1647+
} else if (text.startsWith("Balance Work and Rest")) {
1648+
const icon = document.createElement("span");
1649+
icon.textContent = "⚖"; // Balance scale icon
1650+
icon.style.color = "#6c757d"; // Neutral gray color for balance
1651+
icon.style.marginRight = "10px"; // Spacing
1652+
listItem.prepend(icon);
1653+
} else if (text.startsWith("Get Enough Rest Before the Project")) {
1654+
const icon = document.createElement("span");
1655+
icon.textContent = "🛌"; // Bed icon
1656+
icon.style.color = "#8A2BE2"; // Purple color for rest
1657+
icon.style.marginRight = "10px"; // Spacing
1658+
listItem.prepend(icon);
1659+
} else if (text.startsWith("Reflect and Adjust")) {
1660+
const icon = document.createElement("span");
1661+
icon.textContent = "🔍"; // Magnifying glass icon
1662+
icon.style.color = "#FF4500"; // Orange-red color for reflection
1663+
icon.style.marginRight = "10px"; // Spacing
1664+
listItem.prepend(icon);
1665+
} else if (text.startsWith("Stay Positive and Focused")) {
1666+
const icon = document.createElement("span");
1667+
icon.textContent = "🌟"; // Star icon
1668+
icon.style.color = "#FFD700"; // Gold color for positivity
1669+
icon.style.marginRight = "10px"; // Spacing
1670+
listItem.prepend(icon);
1671+
}
1672+
1673+
});
1674+
});
1675+
</script>
1676+
1677+
<script type="text/javascript">
1678+
document.addEventListener("DOMContentLoaded", () => {
1679+
// Add icons for Task headings
1680+
document.querySelectorAll('.accordion-item > .accordion-header button').forEach(button => {
1681+
const text = button.textContent.trim();
1682+
1683+
// Add icons for each task
1684+
if (text.startsWith("Task 1: Ideation and User Story Definition")) {
1685+
const icon = document.createElement("span");
1686+
icon.textContent = "💡"; // Light bulb icon
1687+
icon.style.color = "#007BFF"; // Blue color for ideation
1688+
icon.style.marginRight = "10px"; // Spacing
1689+
button.prepend(icon);
1690+
} else if (text.startsWith("Task 2: Initial Planning and Wireframing")) {
1691+
const icon = document.createElement("span");
1692+
icon.textContent = "🖊"; // Pen icon
1693+
icon.style.color = "#28A745"; // Green color for planning
1694+
icon.style.marginRight = "10px"; // Spacing
1695+
button.prepend(icon);
1696+
} else if (text.startsWith("Task 3: Environment Setup and Version Control")) {
1697+
const icon = document.createElement("span");
1698+
icon.textContent = "🖥"; // Desktop computer icon
1699+
icon.style.color = "#6C757D"; // Neutral gray for environment setup
1700+
icon.style.marginRight = "10px"; // Spacing
1701+
button.prepend(icon);
1702+
}
1703+
1704+
1705+
if (text.startsWith("Task 4: Must User Stories Implementation")) {
1706+
const icon = document.createElement("span");
1707+
icon.textContent = "✅"; // Checkmark icon
1708+
icon.style.color = "#28A745"; // Green color for 'must-have' tasks
1709+
icon.style.marginRight = "10px"; // Spacing
1710+
button.prepend(icon);
1711+
} else if (text.startsWith("Task 5: Visual Progress & Testing")) {
1712+
const icon = document.createElement("span");
1713+
icon.textContent = "🔍"; // Magnifying glass icon
1714+
icon.style.color = "#FFC107"; // Yellow color for testing
1715+
icon.style.marginRight = "10px"; // Spacing
1716+
button.prepend(icon);
1717+
} else if (text.startsWith("Task 6: Adjustments & Refinement")) {
1718+
const icon = document.createElement("span");
1719+
icon.textContent = "⚙️"; // Gear icon
1720+
icon.style.color = "#6C757D"; // Neutral gray for refinement
1721+
icon.style.marginRight = "10px"; // Spacing
1722+
button.prepend(icon);
1723+
}
1724+
1725+
if (text.startsWith("Task 7: Should User Stories Implementation")) {
1726+
const icon = document.createElement("span");
1727+
icon.textContent = "⭐"; // Star icon for enhancements
1728+
icon.style.color = "#17A2B8"; // Teal for 'should-have' tasks
1729+
icon.style.marginRight = "10px"; // Spacing
1730+
button.prepend(icon);
1731+
} else if (text.startsWith("Task 8: Final Documentation")) {
1732+
const icon = document.createElement("span");
1733+
icon.textContent = "📝"; // Document icon
1734+
icon.style.color = "#007BFF"; // Blue for documentation
1735+
icon.style.marginRight = "10px"; // Spacing
1736+
button.prepend(icon);
1737+
}
1738+
1739+
if (text.startsWith("Task 9: Final Testing & Debugging")) {
1740+
const icon = document.createElement("span");
1741+
icon.textContent = "🛠️"; // Tools icon
1742+
icon.style.color = "#FFC107"; // Amber for testing/debugging
1743+
icon.style.marginRight = "10px"; // Spacing
1744+
button.prepend(icon);
1745+
} else if (text.startsWith("Task 10: Deployment")) {
1746+
const icon = document.createElement("span");
1747+
icon.textContent = "🚀"; // Rocket icon
1748+
icon.style.color = "#28A745"; // Green for deployment success
1749+
icon.style.marginRight = "10px"; // Spacing
1750+
button.prepend(icon);
1751+
}
1752+
});
1753+
});
1754+
</script>
15501755
</body>
15511756

15521757
</html>

0 commit comments

Comments
 (0)