Webwide is the inclusive discussion community for web designers, developers & makers.

Whether you're an enthusiast, in training, or a seasoned pro – you'll fit right in at Webwide. Creating an account is fast, easy and completely free so you can start participating right away.

Read our Code of Conduct

Free Membership Benefits

  • Participate in hundreds of interesting discussions
  • Network with industry peers and make new connections
  • Show off your own projects and relevant content
  • Get help and feedback for your coding and designs
  • Buy and sell services and resources in the marketplace
  • Participate in our friendly community challenges
  • Earn trophies and work your way up our leaderboards
  • Enjoy exclusive Webwide member discounts and offers
  • ...and so much more!

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
Joined
Sep 24, 2019
Messages
662
Reaction score
608
Points
665
Location
United Kingdom
Local Time
Today, 09:10
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:

Dominic

Member
Joined
Oct 5, 2019
Messages
109
Reaction score
76
Points
250
Location
Zurich
Local Time
Today, 10:10
Website
dominiclooser.ch
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
 
  • Like
Reactions: Gummibeer

Gummibeer

Well-known member
Joined
Oct 5, 2019
Messages
707
Reaction score
548
Points
635
Age
26
Location
Hamburg, Germany
Local Time
Today, 10:10
Website
gummibeer.de
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.
 

kognise

Member
Joined
Oct 5, 2019
Messages
43
Reaction score
46
Points
240
Location
New York
Local Time
Today, 04:10
Website
kognise.dev
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.
 
  • Wow
  • Like
Reactions: Daniel and Adam

kognise

Member
Joined
Oct 5, 2019
Messages
43
Reaction score
46
Points
240
Location
New York
Local Time
Today, 04:10
Website
kognise.dev
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.