You can do it!
I’m an illustrator and designer, but I wanted to hone my skills in front-end development and animation. I designed and built this website from scratch, and boy was it a wild ride. I’ve documented my steps, the resources I used, and some of the bumps in the road that I encountered.
Set achievable goals: I jotted down ideas and narrowed down the site objective to one type of workout routine.
Inspiration: I used Figma to create a moodboard of inspirational images and websites.
Wireframes: Following Superhi’s Plan, Design + Code Your First Website course, I created wireframes on paper.
High Fidelity Prototype: I built out my wireframes into a high fidelity prototype on Figma, using placeholder images.
New discoveries: Having had experience with HTML and CSS, it wasn’t hard to get the basic framework for the website down.
Javascript & jquery: I can only describe javascript as a temperamental demon, operating under nuanced rules that are both difficult to understand and in a language I don't speak. With some help from a bonafide programmer, I managed to grasp the basics of javascript and jquery to manipulate behaviours of elements on the site.
I broke Superhi’s editor: I wrote a while loop that both broke my code and stopped Superhi’s editor from loading. Subsequently, the possibility of losing my work also stopped my heart from loading.
Workout Timer: Attempt 1
let tick = 1;
if (tick < 600) {
tick = tick + 1;
}
if (tick == 1) {
$('#duration-1')
.removeClass('duration')
.addClass('durationCountdown') }
}
Workout Timer: Attempt 2
let tick = 0;
let timer;
let button_state = 'start';
function update_page_on_timer() {
tick = tick + 1
if (tick > 600) {
window.clearInterval(timer)
}
const time_per_block = 30;
let current_block = Math.floor(tick / time_per_block);
let time_in_block = tick % time_per_block;
let block_percentage = 100 - (time_in_block / 30 * 100);
if (current_block == 0) {
$("#duration-bar.bar-1").width(block_percentage + '%')
}
else if (current_block == 2) {
$("#duration-bar.bar-3").width(block_percentage + '%')
}
else if (current_block == 4) {
$("#duration-bar.bar-5").width(block_percentage + '%')
}
else if (current_block == 6) {
$("#duration-bar.bar-7").width(block_percentage + '%')
}
else if (current_block == 8) {
$("#duration-bar.bar-9").width(block_percentage + '%')
}
// get timer bar for the rest_block + set percentage (reverse current_block)
let rest_percentage = (time_in_block/ 30 * 100);
if (current_block == 1) {
$("#rest .bar-2").width(rest_percentage + '%')
}
else if (current_block == 3) {
$("#rest .bar-4").width(rest_percentage + '%')
}
else if (current_block == 5) {
$("#rest .bar-6").width(rest_percentage + '%')
}
else if (current_block == 7) {
$("#rest .bar-8").width(rest_percentage + '%')
}
else if (current_block == 9) {
$("#rest .bar-10").width(rest_percentage + '%')
}
}
Workout Timer: Attempt 3
const time_per_block = 30; //setting blocks of 30 sec
let current_block = Math.floor(tick / time_per_block); //rounding down to block (starts at 0)
let time_in_block = tick % time_per_block; //dividing for remainder to derive current time in block
// get timer bar for the current_block + set percentage
let block_percentage;
if (current_block % 2 == 0) {
// currently on exercise
block_percentage = 100 - (time_in_block / 30 * 100);
$(".bar-"+current_block).width('100%')
} else {
// currently on rest
block_percentage = (time_in_block / 30 * 100);
$(".bar-"+current_block).width('0')
}
$(".bar-"+(current_block+1)).width(block_percentage + '%')
}
Why does this get a special section? Because it was the biggest learning curve.
First attempt: I created a ticker that counted up by one after clicking the start button. At the appropriate ticker count, a new class would apply to the duration bar, set to a transition-duration of 30 seconds. While this animated the bar from full to 0 in 30 seconds, it did not account for the actual time of a second, and didn’t allow for pausing.
Second attempt: The ticker was modified to only count up, once per second. The seconds were broken up into 30 second increments that paired with a duration bar. The width of the duration bar is matched to the percentage of time passed such that when the time was paused, the duration bar also pauses.
Third attempt: Cleaning up the code to eliminate repetition and allow for iteration.
Last but not least: I saved these for last as they were less daunting than programming a website from scratch.
Illustrations: The illustrations were created and layered in Adobe Illustrator
Animation: The animations were done in Adobe After Effects with the help of Duik Bassel.2 and Motion Design School’s Motion Tools Script. Exploring the auto-rig features of Duik Brassel.2 was a lot of fun.
Simeon Wong for his help with the javascript elements of the website and entertaining this endless loop of conversation: “Why isn’t this working?! Oh I figured it out....I broke it.”