Created and developed by Alex Morton
Ladies Code Collective is a community of creative coding women. Productivity and collaboration for coding ladies who crave the dedicated time to bring their creative projects to life.
As a woman on a journey of teaching myself how to code and ultimately making a career transition into software engineering, I created Ladies Code Collective in June 2020 as a podcast and an online community for other women along the same journey.
As an avid blogger documening each day of my coding progress over the course of this year, I felt that I could connect with more women in a similar position by sharing my personal views on the level of dedication, focus, curiosity, creativity that it takes when learning to code.
The podcast and overall brand message meets at the intersection of coding and creativity.
This project is the overall website for both The Ladies Code Collective Podcast, as well as the 6-Week Productivity Cohorts for working together to start and finish any creative coding side project.
The website has three main pages: Home (index), Podcast, and Cohorts
The slideshow on the Home (index) page functions via a JavaScript function that swaps out 4 images on a timed interval:
// HEADER SLIDESHOW
let num = 0;
setInterval(() => {
num++;
if (num <= 4) {
document.querySelector(".heading_slide").src =
"resources/img/slide_" + num + ".png";
} else {
num = 0;
}
}, 1000);
The podcast episodes on the Podcast page are rendered dynamically from an object containing each episode's data in the JavaScript file:
const episodes [
{
title: 'Working Slower to Achieve Your Coding Goals Faster',
id: 5245168,
url: 'https://www.buzzsprout.com/1184462/52...',
description: "Lately I've been playing around with the concept ..."
},
...
];
function renderListItems(list) {
let dataKey = 0;
list.forEach(el => {
let html = `<section class="episode" data-key=${dataKey}><h2 style="text-align: center;">${el.title}</h2><div id="buzzsprout-player-${el.id}" class="podcast-player"> </div><span>${el.description}Music credit to <a href="https://soundcloud.com/thisislegang" rel="noopener" target="_blank">Le Gang</a></span></section>
`;
document.querySelector('#episode-list').insertAdjacentHTML('beforeend', html);
dataKey++;
});
}
Lastly, a script source for each podcast episode needs to be created to successfully render on the Podcast page. This occurs when the page is loaded:
window.addEventListener('load', () => {
// Render all podcast episodes
renderListItems(episodes);
// Add individual script tags for each podcast player
const episodeHtml = document.querySelectorAll('.episode');
episodeHtml.forEach(el => {
let i = el.getAttribute('data-key');
let script = document.createElement('script');
script.src = episodes[i].url;
el.appendChild(script);
});
});