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
622
Reaction score
581
Points
665
Location
United Kingdom
Local Time
Today, 10:31
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. 🤔
I'm gonna allow it. Too cool not to. Whether the voters think that's acceptable or not in the final vote remains to be seen. 😉
 

Gummibeer

Well-known member
Joined
Oct 5, 2019
Messages
664
Reaction score
518
Points
635
Age
26
Location
Hamburg, Germany
Local Time
Today, 11:31
Website
gummibeer.de
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' }))
That's why I asked - I'm not used to JS and what's a statement and what not.

And yes, the flags idea is pretty cool! Primary because my one is represented. 😅🇩🇪
 
  • Haha
Reactions: kognise

m1guelpf

17-year-old maker
Gold Member
Joined
Oct 5, 2019
Messages
56
Reaction score
59
Points
325
Age
17
Location
Oviedo, Spain
Local Time
Today, 12:31
Website
miguelpiedrafita.com
Pronouns
he, him
Last edited:

Gummibeer

Well-known member
Joined
Oct 5, 2019
Messages
664
Reaction score
518
Points
635
Age
26
Location
Hamburg, Germany
Local Time
Today, 11:31
Website
gummibeer.de
@m1guelpf I had to do it but it's not following the rules so not submitting for vote:

Title: Templating engine
Codepen link: https://codepen.io/Gummibeer/pen/gOOOKaO
Submit for voting: No
HTML: 4/5 lines
CSS: 0/5 lines
JS: 6/5 lines

My problem here is the needed function. If anyone has an idea to reduce the JS line count just do it.
 
Last edited:
  • Wow
Reactions: VickiLanger

sfcgeorge

Member
Gold Member
Joined
Oct 5, 2019
Messages
44
Reaction score
42
Points
415
Location
London, England
Local Time
Today, 10:31
Website
www.sfcgeorge.co.uk
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.
 

kognise

Member
Joined
Oct 5, 2019
Messages
43
Reaction score
46
Points
240
Location
New York
Local Time
Today, 05:31
Website
kognise.dev
Pronouns
He/him/his
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.
LOVE it! Awesome concept. Sadly, I couldn't submit the form in Codepen.
 

sfcgeorge

Member
Gold Member
Joined
Oct 5, 2019
Messages
44
Reaction score
42
Points
415
Location
London, England
Local Time
Today, 10:31
Website
www.sfcgeorge.co.uk
Hehe thanks 😁 It is very hard to submit, and I don't have enough spare code do do anything about it. I assume CodePen is stealing focus or something. If I press cmd or @ then it looses focus, so I can't paste and can't type the @ but letters worked for me and then autofill kicked in. Stupid thing 😂

I could add a submit button but you wouldn't be able to click it 🤣
 
Last edited:

kognise

Member
Joined
Oct 5, 2019
Messages
43
Reaction score
46
Points
240
Location
New York
Local Time
Today, 05:31
Website
kognise.dev
Pronouns
He/him/his
Hehe thanks 😁 It is very hard to submit, and I don't have enough spare code do do anything about it. I assume CodePen is stealing focus or something. If I press cmd or @ then it looses focus, so I can't paste and can't type the @ but letters worked for me and then autofill kicked in. Stupid thing 😂

I could add a submit button but you wouldn't be able to click it 🤣
No, I was able to tab to the field and submit it, but the form's action page wouldn't load in the CodePen frame.
 

sfcgeorge

Member
Gold Member
Joined
Oct 5, 2019
Messages
44
Reaction score
42
Points
415
Location
London, England
Local Time
Today, 10:31
Website
www.sfcgeorge.co.uk
I think you could use a single SVG <path> to do a heart. You'd be over the HTML budget with the <svg> opening and closing tags as well, but I think you could do without your container div, and you can
 
Status
Not open for further replies.