You might not need JavaScript

JavaScript is great, and by all means use it, while also being aware that you can build so many functional UI components without the additional dependancy.

Maybe you can include a few lines of utility code, or a mixin, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more than what the browser ships with.

This site is fully copied from youmightnotneedjquery.com, an excellent resource for vanilla JavaScript created by @adamfschwartz and @zackbloom. But this time, we take a look at the power of modern native HTML and CSS as well as some of the syntactic sugar of Sass. Because, you might not need scripts for that task at all! (Note: these methods can all be accessible, but the demos may not be. Please take a moment to test these before using in production)

Your search didn't match any comparisons.

Components

Image Slider

resources:

CODEPEN

See the Pen CSS-Only Slider: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

HTML

<div id="slider"></div>
<div id="slide-holder">
  <div class="slide">content1</div>
  <div class="slide">content2</div>
  <div class="slide">content3</div>
</div>

SCSS

#slider {
	width: $slide-width;
	height: $slide-height;
	overflow: hidden;
}

.slide {
	width: $slide-width;
	height: $slide-height;
	float: left;
	position: relative;
}

#slide-holder {
  // wide enough to fit all the slides
	width: 400%;
	position: relative;
	left: 0;
  will-change: transform;
	animation: scroller 10s infinite;
}

// need a step for each slide
@keyframes scroller {
  0% { transform: translateX(0); }
  33% { transform: translateX(-$slide-width); }
  66% { transform: translateX(-$slide-width*2); }
  100% { transform: translateX(0); }
}

View Switcher

resources:

CODEPEN

See the Pen CSS-Only Image Switcher: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

HTML

<div id="slider">

  <!-- Slide Images -->
	<img id="slide-1" src="img1.jpg" />
  <img id="slide-2" src="img2.jpg" />
  <img id="slide-3" src="img3.jpg" />
  <img id="slide-4" src="img4.jpg" />
	
	<!-- Navigation for the slides -->
	<ul>
		<li><a href="#slide-1">1</a></li>
		<li><a href="#slide-2">2</a></li>
		<li><a href="#slide-3">3</a></li>
		<li><a href="#slide-4">4</a></li>
	</ul>
</div>

SCSS

#slider {
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 200px;
    
    &:target {
      transition: all .5s ease-in-out;
    }
    
    &:not(:target), 
    &:target ~ img#slide-4  {
      position: relative;
      opacity: 0;
    }

    // set initially visible
    &#slide-4 {
      position: absolute;
      opacity: 1;
     }
  }
}

Forms

resources:

Color Picker

CODEPEN

See the Pen HTML File Upload: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

HTML

<form>
  <input type="color" />
</form>

File Upload

CODEPEN

See the Pen HTML File Upload: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

HTML

<form>
  <input type="file" accept="image/*">
  <input type="submit">
</form>

Form Validation

resources:

CODEPEN

See the Pen HTML Form Validation: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

HTML

<!-- A few examples from links above -->

<form>
  <!-- Case insensitive binary choice -->
  <label for="item1">Would you prefer a banana or a cherry?</label>
  <input id="item1" pattern="[Bb]anana|[Cc]herry">

  <!-- Email validation -->
  <label for="item2">What's your e-mail?</label>
  <input id="item2" type="email" name="email">

  <!-- Max length validation -->
  <label for="item3">Leave a short message</label>
  <textarea id="item3" name="msg" maxlength="140" rows="5"></textarea>

  <!-- Numeric + Symbol pattern as required field -->
  <label for="item4">Phone Number (format: xxxx-xxx-xxxx):</label><br/>
  <input id="item4" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required >

  <button>Submit</button>
</form>

Interactions

Scroll Indicator

resources:

CODEPEN

See the Pen CSS Only Scroll Indicator: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

HTML

<header class="scroller"></header>
<main>
	content must be longer than 100vh
</main>

SCSS

body {	
	background: linear-gradient(to right top, 
      $scroller-color 50%, 
      $scroller-background 50%);
	background-size: 100% calc(100% - 100vh + #{$scroller-height}); 
	background-repeat: no-repeat;
}

body:before {
	content:'';
	position: fixed;
	top: $scroller-height;
	bottom: 0;
	width: 100%;
	z-index: -1;
	background: $body-background;
}