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


コメントを読む

新着ピック  


蜂谷 蜂谷 4時間前上場企業バックエンドエンジニア




















新着ニュース

ドラクエウォークに上級職「魔法戦士」追加 ストーリーも久しぶりの更新

各国の中国人コミュニティ向けフードデリバリーのHungryPandaが22.3億円を調達 | TechCrunch Japan

メガドラミニの「アジアエディション」が国内発売--「エイリアンソルジャー」を収録

電気自動車の保有車両管理は新しい巨大市場、Electriphiが約4億円調達 | TechCrunch Japan

東京都・東大・NTT東、ローカル5Gで協定 技術を検証、中小企業での活用促す

「返金して」──au PAYの還元の条件変更に批判 ユーザーや店員から不満の声

既存環境の設定を引き継いでElasticBeanstalkのプラットフォームのメジャーバージョンアップをする | Developers.IO

Amazonのゲームストリーミング「Twitch」視聴者は2021年に4000万人超との予測 | TechCrunch Japan

【Alteryx Server】スケジュール設定したいのに設定画面にたどり着けない!そんなとき | Developers.IO

アディダスが国際宇宙ステーションで靴のソール製造実験へ | TechCrunch Japan

とりあえず MediaLive を触りたい時に使える CloudFormation テンプレートを作ってみた | Developers.IO

Egnyteがセキュリティと生産性向上のツールをシングルプラットフォームに統合 | TechCrunch Japan

東海道新幹線、車内テロップでのニュース配信を終了 全列車に無料Wi-Fi完備、「スマホで読める環境整った」

フランスのScalewayが専用サーバーのラインアップを一新、クラウドへの統合を展望 | TechCrunch Japan

日鉄興和不動産、マンション専用MaaS「FRECRU」を実験運行--MONETのシステム活用

40周年のガンプラ、ついに「ガンダリウム合金モデル」登場

ワーナーの新ストリーミング「HBO Max」がYouTube TVで視聴可能に | TechCrunch Japan

「東京ポートシティ竹芝」にIoTマンション--顔認証システムやスマートロック導入

HTC、VIVE Cosmosシリーズにビデオパススルー含む3モデル投入 フェースプレート変更で機能追加

「NHKプラス」を先行体験--「放送局の強み」を活かしたアプリに

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

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