Frontend Weekly
Published in

Frontend Weekly

Combining Design & Development with Target Archery

A Creative Mashup of Skill and Interest

The Concept

My first concept notes

The Metrics

1. Average Score

2. Average Variation

3. Group Center

A Note on Scoring

The Design

Interface wireframes
Mockup built using Adobe XD

The Math

Cartesian Coordinates


d = sqrt((x1 - x2)² + (y1 - y2)²)
c = (((x1 + x2 + ... + xn) / n), (y1 + y2 + ... + yn) / n)

The Development

HTML, CSS, and JavaScript

Vanilla JS

// jQuery
// JavaScript
var divs = document.getElementsByTagName('DIV');
for (i = 0; i < divs.length; i++) {

The Data

Grid overlay
Yes, as in the RGB color space

The Results


The Wrap-up



It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store