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

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


コメントを読む

新着ピック  






















新着ニュース

JavaScriptでブラウザのインターネット接続を判定する方法 | Developers.IO

JAWS-UG 4支部合同 オンラインハンズオンで  コンタクトセンター + デスクトップライブ配信 に入門しました! #jawsug | Developers.IO

台湾の天才IT大臣、医療用マスクを家庭で消毒する方法を日本向けに紹介

Raspberry Piを極限まで無駄なくバックアップする | Developers.IO

クラスメソッドにJOINしたイ・ビョンヒョンです! | Developers.IO

クラスメソッドにJOINしましたホンギです! | Developers.IO

クラスメソッドにJOINした李守宰(イ・スジェ)です! | Developers.IO

クラスメソッドにJOINしたハウンです | Developers.IO

クラスメソッドに新卒エンジニアとしてJOINしました石橋です。 | Developers.IO

渋谷の人出が半減 外出自粛要請の効果、行動データで明らかに

クラスメソッドにJOINしたSong Yeongjin(ソン·ヨンジン)です! | Developers.IO

クラスメソッドにJOINしたキム・スンヨンです! | Developers.IO

ソニー、総額108億円のファンド設立 コロナに苦しむ業界に寄付や支援 医療や教育など対象

クラスメソッドにジョインしましたたいがーです! | Developers.IO

なぜ政府は「布マスク2枚」を配るのか

クラスメソッドにJOINしたギーの話🌼 | Developers.IO

GAテクノロジーズ、内覧時間が最大4倍に--オンライン内覧コンテンツを強化

S3 のバケットポリシーで GetObject を定義した際に “Action does not apply to any resource(s) in statement” というエラーが表示されて失敗します | Developers.IO

LINE、個人向けローンの利息を5月末まで実質無料化 新型コロナ対策支援で

見た目が“ハイエンド機っぽい”「moto g8 plus」 カメラの実力はどう?

もっと見る
記事をPICKする
会員登録
Register
記事をPICKする

会員登録すると、もっと便利に利用できます。