Entries Closed 💪 [Front-end] 5 lines of HTML, 5 lines of CSS, 5 lines of JavaScript

Entries Closed 💪 [Front-end] 5 lines of HTML, 5 lines of CSS, 5 lines of JavaScript

Status
Not open for further replies.

Adam

Mr. Webwide
Administrator
Local time
03:35
Joined
Sep 24, 2019
Messages
1,252
Pronouns
he/him

Come one, come all. Roll-up, roll-up. Welcome to the first friendly Webwide front-end code challenge.

Challenge: 5 lines of HTML, 5 lines of CSS, 5 lines of JavaScript
Closes: Saturday 12th October 2019 (12:00pm UTC+1)

Limitations:

  1. No more than 1 HTML tag group per line
  2. No more than 1 CSS selector per line (you can have more than one declaration per line)
  3. No more than 1 JavaScript statement per line.
What can you make with just 15 lines of code? 😉

You can opt-in to submit yours for voting where Webwide members will vote for their favourite with the winner receiving an exclusive profile trophy. Else just participate for fun with no pressure.

Users can submit as many entries as they would like.

Submit a CodePen (or alternative) link below using the following format to enter:

Title:
Codepen link:
Submit for voting: Yes/No

----------

Entries so far...

Title: Neon Name
Codepen link: https://codepen.io/Gummibeer/pen/abbbLOj
Submit for voting: Yes
HTML: 1/5 lines
CSS: 3/5 lines
JS: 0/5 lines
Title: 5 Line Flags
Website link: https://5lines.kognise.repl.co/
Code link: 5Lines
Submit for voting: Yes

I had some extra lines available so I added the flag of Germany and some text. There's some pretty gnarly JavaScript to populate all the stars, I felt it was kinda against the spirit to put all the stars in the markup.

Title: Templating engine
Codepen link: https://codepen.io/m1guelpiedrafita/pen/qBBBYzy
Submit for voting: Yes
HTML: 1/5 lines
CSS: 0/5 lines
JS: 5/5 lines

Who needs Vue or Reach when you can make your own in 5 lines? 😄

@Gummibeer done

Title: Templating engine v2
Codepen link: https://codepen.io/m1guelpiedrafita/pen/NWWWzpb
Submit for voting: Yes
HTML: 4/5 lines
CSS: 0/5 lines
JS: 5/5 lines

Title: Excuseme
Codepen link: https://codepen.io/sfcgeorge/pen/WNNNyrG
Submit for voting: Yes
HTML: 5/5 lines
CSS: 4/5 lines
JS: 5/5 lines

I'm especially pleased with how short the Javascript is. AND as a bonus, the form actually works (though there's no confirmation). You have to hit tab, start typing an email, use autofill to complete it, then hit enter. Slick UX.

Title: You are awesome
Codepen link: https://codepen.io/Gummibeer/pen/GRRRPoB
Submit for voting: Yes
HTML: 4/5 lines
CSS: 5/5 lines
JS: 5/5 lines

 
Last edited:

kognise

Member
Local time
23:35
Joined
Oct 5, 2019
Messages
44
Pronouns
He/him/his

Is it ok if I submit a link on Repl.it?

 

Dominic

Member
Local time
04:35
Joined
Oct 5, 2019
Messages
130

What about preprocessors? I usually write my pages in pug, stylus and coffeescript.

 

Gummibeer

Astroneer
Moderator
Local time
04:35
Joined
Oct 5, 2019
Messages
1,161
Pronouns
he/him

Is it forced to be 5/5/5 or can I also do 5 HTML, 10 CSS and no JS?

 

Adam

Mr. Webwide
Administrator
Local time
03:35
Joined
Sep 24, 2019
Messages
1,252
Pronouns
he/him

Is it forced to be 5/5/5 or can I also do 5 HTML, 10 CSS and no JS?

Hmm... you can use no JS but CSS is capped at 5 lines. What you count as a line is up to you. 😉

 

Dominic

Member
Local time
04:35
Joined
Oct 5, 2019
Messages
130

What I just realized: lines are not a very good measure because you can write infinitely much html on one line. For the next time: I guess, numer of characters would be better

 

Gummibeer

Astroneer
Moderator
Local time
04:35
Joined
Oct 5, 2019
Messages
1,161
Pronouns
he/him

What I just realized: lines are not a very good measure because you can write infinitely much html on one line. For the next time: I guess, numer of characters would be better
Exactly, or the line should be limited to a number of chars or it should be stated that every tag is a new line.

 

Adam

Mr. Webwide
Administrator
Local time
03:35
Joined
Sep 24, 2019
Messages
1,252
Pronouns
he/him

Who’s judging? Or is it going to a vote?

There'll be a public poll after closing for all members to vote in (on submissions opted in for voting).

 

kognise

Member
Local time
23:35
Joined
Oct 5, 2019
Messages
44
Pronouns
He/him/his

Title: 5 Line Flags
Website link: https://5lines.kognise.repl.co/
Code link: 5Lines
Submit for voting: Yes

I had some extra lines available so I added the flag of Germany and some text. There's some pretty gnarly JavaScript to populate all the stars, I felt it was kinda against the spirit to put all the stars in the markup.

 

kognise

Member
Local time
23:35
Joined
Oct 5, 2019
Messages
44
Pronouns
He/him/his

is the font 'monoton' included in codepen?

It looks like they put it in the stuff for head box.

 
Last edited:

Gummibeer

Astroneer
Moderator
Local time
04:35
Joined
Oct 5, 2019
Messages
1,161
Pronouns
he/him

@kognise & @Adam I just want to know if the JS is really just 5 lines? There are multiple Object.assign() calls on a single line. 🤔

 

kognise

Member
Local time
23:35
Joined
Oct 5, 2019
Messages
44
Pronouns
He/him/his

@kognise & @Adam I just want to know if the JS is really just 5 lines? There are multiple Object.assign() calls on a single line. 🤔

Yeah, I wasn't totally sure about this. But I'm pretty sure this doesn't count as multiple statements on one line. It's just a bunch of nested function calls.

JavaScript:
s.appendChild(((e, s) => (Object.assign(e.style, s), e))(Object.assign(document.createElement('div'), { innerText: '★' }), { top: `calc(${i * 53.846 / 5.385}% + 1%)`, left: `calc(${j * 40 / 6}vw + 1.2vw + ${(i % 2) * 3.2}vw)`, position: 'absolute', fontSize: '4vw' }))

 
Last edited:
Status
Not open for further replies.
Top