HTML5とVanilla JSだけで作られたオープンソースのミニプロジェクト集「Vanilla Web Project」

2020/02/06 01:30

Vanilla Web Project
https://github.com/bradtraversy/vanillawebprojects

Vanilla Web Projectの特徴

「Vanilla Web  Project」は、HTML5とCSS、Vanilla JS(ピュアJS)だけで作られたオープンソースプロジェクト集です。

デザイン・機能もさることながら、フレームワークが一切含まれていない構成のため、再利用しやすいのが最大のメリットです。

Formバリデーター

https://vanillawebprojects.com/projects/form-validator/

ビデオプレーヤー

https://vanillawebprojects.com/projects/custom-video-player/

スライダーメニュー(ハンバーガーメニュー)

https://vanillawebprojects.com/projects/modal-menu-slider/

ミュージックプレイヤー

https://vanillawebprojects.com/projects/music-player/

ブロックくずしゲーム

https://vanillawebprojects.com/projects/breakout-game/

リストソートのドラック&ドロップ

https://vanillawebprojects.com/projects/sortable-list/

Vanilla Web Projectのプログラム構成

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Form Validator</title>
  </head>
  <body>
    <div class="container">
      <form id="form" class="form">
        <h2>Register With Us</h2>
        <div class="form-control">
          <label for="username">Username</label>
          <input type="text" id="username" placeholder="Enter username" />
          <small>Error message</small>
        </div>
....

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

:root {
  --success-color: #2ecc71;
  --error-color: #e74c3c;
}

* {
  box-sizing: border-box;
}

body {
  background-color: #f9fafb;
  font-family: 'Open Sans', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

.container {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  width: 400px;
}

...

スクリプト 

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');

// Show input error message
function showError(input, message) {
  const formControl = input.parentElement;
  formControl.className = 'form-control error';
  const small = formControl.querySelector('small');
  small.innerText = message;
}

// Show success outline
function showSuccess(input) {
  const formControl = input.parentElement;
  formControl.className = 'form-control success';
}

HTML、CSS、Scriptの3つのファイルで構成されています。ノーフレームワークのため、どんなプロジェクトでもコピペで使い回しできそうです。

Vanilla Web Project
https://github.com/bradtraversy/vanillawebprojects

appstore
googleplay
会員登録
URLからPICKする

会員登録して、もっと便利に利用しよう

  • 1.

    記事をストックできる
    気になる記事をPickして、いつでも読み返すことができます。
  • 2.

    新着ニュースをカスタマイズできます
    好きなニュースフィードをフォローすると、新着ニュースが受け取れます。