CSSでパスワードジェネレータのスタイリングをしよう!

$ tree
.
├── index.html
├── script.js
└── style.css

1

2

3

4

5

6

$ tree

.

├── index.html

├── script.js

└── style.css

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
    <title>Password Generator</title>
  </head>
  <body>
    <div class="container">
      <h2>Password Generator</h2>
      <div class="result-container">
        <span id="result"></span>
        <button class="btn" id="clipboard">
          <i class="far fa-clipboard"></i>
        </button>
      </div>
      <div class="settings">
        <div class="setting">
          <label>Password Length</label>
          <input type="number" id="length" min="4" max="20" value="20">
        </div>
        <div class="setting">
          <label>Include uppercase letters</label>
          <input type="checkbox" id="uppercase" checked>
        </div>
        <div class="setting">
          <label>Include lowercase letters</label>
          <input type="checkbox" id="lowercase" checked>
        </div>
        <div class="setting">
          <label>Include numbers</label>
          <input type="checkbox" id="numbers" checked>
        </div>
        <div class="setting">
          <label>Include symbols</label>
          <input type="checkbox" id="symbols" checked>
        </div>
      </div>

      <button class="btn btn-large" id="generate">
        Generate Password
      </button>
    </div>
    <script src="script.js"></script>
  </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

<!DOCTYPE html>

<head>

<title>Password Generator</title>

</head>

<body>

<h2>Password Generator</h2>

</button>

</div>

<label>Password Length</label>

</div>

<label>Include uppercase letters</label>

</div>

<label>Include lowercase letters</label>

</div>

<label>Include numbers</label>

</div>

<label>Include symbols</label>

</div>

Generate Password

</button>

</div>

</body>

</html>

//　要素を取得する
const resultEl = document.getElementById('result')
const lengthEl = document.getElementById('length')
const uppercaseEl = document.getElementById('uppercase')
const lowercaseEl = document.getElementById('lowercase')
const numbersEl = document.getElementById('numbers')
const symbolsEl = document.getElementById('symbols')
const generateEl = document.getElementById('generate')
const clipboardEl = document.getElementById('clipboard')

// randomFuncオブジェクトに格納
const randomFunc = {
  lower: getRandomLower,
  upper: getRandomUpper,
  number: getRandomNumber,
  symbol: getRandomSymbol
}

// クリップボードにコピー
clipboardEl.addEventListener('click', () => {
  const textarea = document.createElement('textarea')
  const password = resultEl.innerText

  if(!password) { return }

  textarea.value = password
  document.body.appendChild(textarea)
  textarea.select()
  document.execCommand('copy')
  textarea.remove()
  alert('Password copied to clipboard!')
})

// クリックイベントの登録
generateEl.addEventListener('click', () => {
  const length = +lengthEl.value
  const hasLower = lowercaseEl.checked
  const hasUpper = uppercaseEl.checked
  const hasNumber = numbersEl.checked
  const hasSymbol = symbolsEl.checked

  resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length)
})

// パスワードの生成
function generatePassword(lower, upper, number, symbol, length) {
  // 初期化
  let generatedPassword = ''
  // 0 ~ 4の値が入る
  // (true + true + true + true => 4とjavascriptでは計算される)
  const typesCount = lower + upper + number + symbol
  // 変数名をKeyにしたオブジェクトを作成[{lower: true}, {upper: true}...]
  const typesArr = [{lower}, {upper}, {number}, {symbol}]
    .filter(item => Object.values(item)[0])

  if(typesCount === 0) {
      return ''
  }

  for(let i = 0; i < length; i += typesCount) {
      typesArr.forEach(type => {
          // Object.keys() メソッドでKeyを取り出す
          // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
          const funcName = Object.keys(type)[0]
          generatedPassword += randomFunc[funcName]()
      })
  }

  // 指定文字長でカット
  const finalPassword = generatedPassword.slice(0, length)

  return finalPassword
}

// ランダムの小文字を返す
function getRandomLower() {
  return String.fromCharCode(Math.floor(Math.random() * 26) + 97)
}

// ランダムの大文字を返す
function getRandomUpper() {
  return String.fromCharCode(Math.floor(Math.random() * 26) + 65)
}

// ランダムの数字を返す
function getRandomNumber() {
  return String.fromCharCode(Math.floor(Math.random() * 10) + 48)
}

// ランダムのシンボルを返す
function getRandomSymbol() {
  const symbols = '!@#$%^&*(){}[]=<>/,.'
  return symbols[Math.floor(Math.random() * symbols.length)]
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

//　要素を取得する

const resultEl = document.getElementById('result')

const lengthEl = document.getElementById('length')

const uppercaseEl = document.getElementById('uppercase')

const lowercaseEl = document.getElementById('lowercase')

const numbersEl = document.getElementById('numbers')

const symbolsEl = document.getElementById('symbols')

const generateEl = document.getElementById('generate')

const clipboardEl = document.getElementById('clipboard')

// randomFuncオブジェクトに格納

const randomFunc = {

lower: getRandomLower,

upper: getRandomUpper,

number: getRandomNumber,

symbol: getRandomSymbol

}

// クリップボードにコピー

clipboardEl.addEventListener('click', () => {

const textarea = document.createElement('textarea')

const password = resultEl.innerText

if(!password) { return }

textarea.value = password

document.body.appendChild(textarea)

textarea.select()

document.execCommand('copy')

textarea.remove()

alert('Password copied to clipboard!')

})

// クリックイベントの登録

generateEl.addEventListener('click', () => {

const length = +lengthEl.value

const hasLower = lowercaseEl.checked

const hasUpper = uppercaseEl.checked

const hasNumber = numbersEl.checked

const hasSymbol = symbolsEl.checked

resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length)

})

// パスワードの生成

function generatePassword(lower, upper, number, symbol, length) {

// 初期化

let generatedPassword = ''

// 0 ~ 4の値が入る

// (true + true + true + true => 4とjavascriptでは計算される)

const typesCount = lower + upper + number + symbol

// 変数名をKeyにしたオブジェクトを作成[{lower: true}, {upper: true}...]

const typesArr = [{lower}, {upper}, {number}, {symbol}]

.filter(item => Object.values(item)[0])

if(typesCount === 0) {

return ''

}

for(let i = 0; i < length; i += typesCount) {

typesArr.forEach(type => {

// Object.keys() メソッドでKeyを取り出す

// https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

const funcName = Object.keys(type)[0]

generatedPassword += randomFunc[funcName]()

})

}

// 指定文字長でカット

const finalPassword = generatedPassword.slice(0, length)

return finalPassword

}

// ランダムの小文字を返す

function getRandomLower() {

return String.fromCharCode(Math.floor(Math.random() * 26) + 97)

}

// ランダムの大文字を返す

function getRandomUpper() {

return String.fromCharCode(Math.floor(Math.random() * 26) + 65)

}

// ランダムの数字を返す

function getRandomNumber() {

return String.fromCharCode(Math.floor(Math.random() * 10) + 48)

}

// ランダムのシンボルを返す

function getRandomSymbol() {

const symbols = '!@#$%^&*(){}[]=<>/,.'

return symbols[Math.floor(Math.random() * symbols.length)]

}

/* フォント */
@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");

* {
  /* boxのpadding/borderをwidth/heightに含める */
  box-sizing: border-box;
}

1

2

3

4

5

6

7

/* フォント */

@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");

* {

/* boxのpadding/borderをwidth/heightに含める */

box-sizing: border-box;

}

body {
  background-color: #3b3b90;
  color: #fff;
  font-family: "Muli", sans-serif;
  /* flexアイテムにする */
  display: flex;
  /* flexアイテムを積み重ねて配置する */
  flex-direction: column;
  /* flex重点にアイテムを配置 */
  align-items: center;
  /* flex横軸中央にアイテムを配置 */
  justify-content: center;
  height: 100vh;
  /* 横スクロール非表示 */
  overflow: hidden;
  padding: 10px;
  margin: 0;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

body {

background-color: #3b3b90;

color: #fff;

font-family: "Muli", sans-serif;

/* flexアイテムにする */

display: flex;

/* flexアイテムを積み重ねて配置する */

flex-direction: column;

/* flex重点にアイテムを配置 */

align-items: center;

/* flex横軸中央にアイテムを配置 */

justify-content: center;

height: 100vh;

/* 横スクロール非表示 */

overflow: hidden;

padding: 10px;

margin: 0;

}

h2 {
  /* 上 | 左右 | 下 */
  margin: 10px 0 20px;
  text-align: center;
}

1

2

3

4

5

h2 {

/* 上 | 左右 | 下 */

margin: 10px 0 20px;

text-align: center;

}

.container {
  background-color: #23235b;
  box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2);
  padding: 20px;
  width: 350px;
  max-width: 100%;
}

1

2

3

4

5

6

7

.container {

background-color: #23235b;

box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2);

padding: 20px;

width: 350px;

max-width: 100%;

}

.result-container {
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  /* 要素位置の起点 */
  position: relative;
  font-size: 18px;
  /* 文字間の幅 */
  letter-spacing: 1px;
  padding: 12px 10px;
  height: 50px;
  width: 100%;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

.result-container {

background-color: rgba(0, 0, 0, 0.4);

display: flex;

justify-content: center;

align-items: center;

/* 要素位置の起点 */

position: relative;

font-size: 18px;

/* 文字間の幅 */

letter-spacing: 1px;

padding: 12px 10px;

height: 50px;

width: 100%;

}

.result-container #result {
  /* 改行しなければテキストがコンテンツボックスからあふれる場合に
  ブラウザーが改行を挿入するかどうかを指定 */
  word-wrap: break-word;
  max-width: calc(100% - 40px);
}

1

2

3

4

5

6

.result-container #result {

/* 改行しなければテキストがコンテンツボックスからあふれる場合に

ブラウザーが改行を挿入するかどうかを指定 */

word-wrap: break-word;

max-width: calc(100% - 40px);

}

.result-container .btn {
  /* relativeからみて絶対位置 */
  position: absolute;
  top: 5px;
  right: 5px;
  width: 40px;
  height: 40px;
  font-size: 20px;
}

1

2

3

4

5

6

7

8

9

10

.result-container .btn {

/* relativeからみて絶対位置 */

position: absolute;

top: 5px;

right: 5px;

width: 40px;

height: 40px;

font-size: 20px;

}

.btn {
  /* 枠線非表示 */
  border: none;
  background-color: #3b3b98;
  color: #fff;
  font-size: 16px;
  padding: 8px 12px;
  cursor: pointer;
}

1

2

3

4

5

6

7

8

9

.btn {

/* 枠線非表示 */

border: none;

background-color: #3b3b98;

color: #fff;

font-size: 16px;

padding: 8px 12px;

cursor: pointer;

}

.btn-large {
  display: block;
  width: 100%;
}

1

2

3

4

.btn-large {

display: block;

width: 100%;

}

.setting {
  display: flex;
  /* 各アイテムを均等に配置し
     最初のアイテムは先頭に寄せ、
     最後のアイテムは末尾に寄せる */
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
}

1

2

3

4

5

6

7

8

9

.setting {

display: flex;

/* 各アイテムを均等に配置し

最初のアイテムは先頭に寄せ、

最後のアイテムは末尾に寄せる */

justify-content: space-between;

align-items: center;

margin: 15px 0;

}

/* フォント */
@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");

* {
  /* boxのpadding/borderをwidth/heightに含める */
  box-sizing: border-box;
}

body {
  background-color: #3b3b90;
  color: #fff;
  font-family: "Muli", sans-serif;
  /* flexアイテムにする */
  display: flex;
  /* flexアイテムを積み重ねて配置する */
  flex-direction: column;
  /* flex重点にアイテムを配置 */
  align-items: center;
  /* flex横軸中央にアイテムを配置 */
  justify-content: center;
  height: 100vh;
  /* 横スクロール非表示 */
  overflow: hidden;
  padding: 10px;
  margin: 0;
}

h2 {
  /* 上 | 左右 | 下 */
  margin: 10px 0 20px;
  text-align: center;
}

.container {
  background-color: #23235b;
  box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2);
  padding: 20px;
  width: 350px;
  max-width: 100%;
}

.result-container {
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  /* 要素位置の起点 */
  position: relative;
  font-size: 18px;
  /* 文字間の幅 */
  letter-spacing: 1px;
  padding: 12px 10px;
  height: 50px;
  width: 100%;
}

.result-container #result {
  /* 改行しなければテキストがコンテンツボックスからあふれる場合に
  ブラウザーが改行を挿入するかどうかを指定 */
  word-wrap: break-word;
  max-width: calc(100% - 40px);
}

.result-container .btn {
  /* relativeからみて絶対位置 */
  position: absolute;
  top: 5px;
  right: 5px;
  width: 40px;
  height: 40px;
  font-size: 20px;
}

.btn {
  /* 枠線非表示 */
  border: none;
  background-color: #3b3b98;
  color: #fff;
  font-size: 16px;
  padding: 8px 12px;
  cursor: pointer;
}

.btn-large {
  display: block;
  width: 100%;
}

.setting {
  display: flex;
  /* 各アイテムを均等に配置し
     最初のアイテムは先頭に寄せ、
     最後のアイテムは末尾に寄せる */
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

/* フォント */

@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");

* {

/* boxのpadding/borderをwidth/heightに含める */

box-sizing: border-box;

}

body {

background-color: #3b3b90;

color: #fff;

font-family: "Muli", sans-serif;

/* flexアイテムにする */

display: flex;

/* flexアイテムを積み重ねて配置する */

flex-direction: column;

/* flex重点にアイテムを配置 */

align-items: center;

/* flex横軸中央にアイテムを配置 */

justify-content: center;

height: 100vh;

/* 横スクロール非表示 */

overflow: hidden;

padding: 10px;

margin: 0;

}

h2 {

/* 上 | 左右 | 下 */

margin: 10px 0 20px;

text-align: center;

}

.container {

background-color: #23235b;

box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2);

padding: 20px;

width: 350px;

max-width: 100%;

}

.result-container {

background-color: rgba(0, 0, 0, 0.4);

display: flex;

justify-content: center;

align-items: center;

/* 要素位置の起点 */

position: relative;

font-size: 18px;

/* 文字間の幅 */

letter-spacing: 1px;

padding: 12px 10px;

height: 50px;

width: 100%;

}

.result-container #result {

/* 改行しなければテキストがコンテンツボックスからあふれる場合に

ブラウザーが改行を挿入するかどうかを指定 */

word-wrap: break-word;

max-width: calc(100% - 40px);

}

.result-container .btn {

/* relativeからみて絶対位置 */

position: absolute;

top: 5px;

right: 5px;

width: 40px;

height: 40px;

font-size: 20px;

}

.btn {

/* 枠線非表示 */

border: none;

background-color: #3b3b98;

color: #fff;

font-size: 16px;

padding: 8px 12px;

cursor: pointer;

}

.btn-large {

display: block;

width: 100%;

}

.setting {

display: flex;

/* 各アイテムを均等に配置し

最初のアイテムは先頭に寄せ、

最後のアイテムは末尾に寄せる */

justify-content: space-between;

align-items: center;

margin: 15px 0;

}

CSSでパスワードジェネレータのスタイリングをしよう!

実装するもの

ワークスペース

JavaScript版

HTML & JavaScript

スタイル

全体の設定

bodyの設定

h2の設定

containerの設定

result-containerの設定

result-container #resultの設定

result-container .btnの設定

btnの設定

btn-largeの設定

settingの設定

おわりに

CSSまとめ

CSSソースコード

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

2021年4月
月	火	水	木	金	土	日
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

実装するもの

ワークスペース

JavaScript版

HTML & JavaScript

スタイル

全体の設定

bodyの設定

h2の設定

containerの設定

result-containerの設定

result-container #resultの設定

result-container .btnの設定

btnの設定

btn-largeの設定

settingの設定

おわりに

CSSまとめ

CSSソースコード

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

[golang]TCPサーバーを作ろう!

JavaScriptでUnsplash APIから画像取得処理を実装しよう!

[Go言語]ginフレームワークでアプリ開発~Controllerのテスト編…

[Golang]~MovieApp: Dockerで開発環境を構築しよう!~

GitLab RunnerのパイプラインでDocker daemonに接続で…

CSSでかっこいいランディングページをスタリングしよう!

RemoteSSHで「The VS Code Server failed t…

Go言語でtmuxを操作しよう

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル