🔑무작위 암호 생성기

HTML, CSS 및 JavaScript를 사용하여 Random Password Generator 앱을 만들었습니다. 나는 Front End Developer Career path에서 Scrimba을 복용하고 있습니다. 저는 이 프로젝트를 코딩하는 것이 매우 재미있었습니다. Coding Addict의 John도 사용했습니다. 나는 전에 John의 비디오를 보았고 그의 시작 파일을 좋아합니다. 이를 통해 프로젝트 생성을 더 빨리 시작할 수 있습니다! 그가 스타터 파일을 사용하는 이유에 대한 비디오를 시청하는 것이 좋습니다. 시작 파일과 원하는 대로 파일을 변경하는 방법에 대해 자세히 설명합니다! 이 앱을 빌드한 후 저는 스타터 파일과 그 이면의 힘에 대해 더 잘 이해하게 되었습니다!


다음은 최종 제품입니다.



이 프로젝트의 전체 아이디어는 버튼을 클릭하면 4개의 임의 비밀번호가 생성되어 UI에 표시되는 것입니다.


먼저 HTML로 시작했습니다. HTML은 몇 개의 제목, 단락 및 4개의 빈 입력 4개 필드로 구성되었습니다. 원래 프로젝트에서는 필드가 비어있을 때 아이콘이 있어야했지만 그 당시에는 그 부분을 파악할 수 없었습니다! 😂 그래서 대신에 조금 다른 것을 추가했습니다!

다음으로 CSS 작업을 했습니다. 내가 사용한 많은 CSS는 이 프로젝트가 위의 기본 스타일 가이드에서 다시 가져온 것입니다. 그래서 내가 한 것은 CSS 변수를 변경한 것입니다.

body {
  background: var(--backgroundColor);
  font-family: var(--bodyFont);
  font-weight: 400;
  line-height: 1.75;
  color: var(--textColor);
}

p {
  margin-top: 0;
  margin-bottom: 1.5rem;
  max-width: 40em;
}

파일 맨 위에 모든 CSS 변수가 정의되어 있으므로 나중에 코드에서 사용할 수 있습니다. CSS 변수를 사용한 것은 이번이 처음이었고 이것이 얼마나 유용할 수 있는지 마침내 이해하게 되었습니다! JavaScript로 이동하기 전에 언급하고 싶은 한 가지는 CSS를 처음 사용하는 경우 처음에 NOT 스타터 파일을 사용하지 않는 것이 좋습니다. 처음 시작할 때 필요한 많은 근육 기억을 제거합니다. 몇 가지 프로젝트를 직접 구축했다면 개인 또는 프리랜서 프로젝트를 위한 프로젝트 스타터 파일을 더 자세히 살펴보겠습니다! 다시 John은 자신의 채널에서 이유와 방법에 대해 자세히 설명합니다. 그의 비디오를 본 후에 나는 파일을 편집하고 내 취향에 맞게 만드는 방법을 이해합니다. 그의 비디오는 조금 길지만 그만한 가치가 있을 것이라고 약속합니다! 프로젝트를 빠르게 구축하는 방법을 배우려는 경우! 이제 일부 JavaScript로 넘어갈 수 있습니다!

let letter = "abcdefghijklmnopqrstuvqaxyz"
letter += letter.toUpperCase()
letter += "@#$&*(){}?|!^-+=/"
const lettersArray = Object.assign([], letter)
 let pw1 = document.getElementById("pw1")
 pw1.value = "Cake"

 let pw2 = document.getElementById("pw2")
 pw2.value = "is"

 let pw3 = document.getElementById("pw3")
 pw3.value = "a"

 let pw4 = document.getElementById("pw4")
 pw4.value = "Lie"

비밀번호에 내가 원하는 모든 가능한 값으로 문자열을 만들었습니다. 내장 JavaScript 메서드를 사용하여 모든 대문자를 가져온 다음 동일한 문자열에 추가했습니다. 그런 다음 일부 특수 문자를 추가했습니다. 그런 다음 Assign이라는 메서드를 찾았습니다. 설명할 수는 없지만 링크를 통해 mdn 문서로 이동합니다! (😂) 마침내 우리는 그가 Password 메소드를 생성하도록 했습니다!

 function generatePassword(){
     var message1 = ""
     var message2 = ""
     var message3 = ""
     var message4 = ""
     for(let i = 0; i < 13; i++){
        message1 += lettersArray[Math.floor(Math.random() * letter.length)]
        message2 += lettersArray[Math.floor(Math.random() * letter.length)]
        message3 += lettersArray[Math.floor(Math.random() * letter.length)]
        message4 += lettersArray[Math.floor(Math.random() * letter.length)]
     }
     pw1.value = message1
     pw2.value = message2
     pw3.value = message3
     pw4.value = message4
 }

이 메서드는 버튼을 클릭할 때마다 호출됩니다. 여기서는 13자로 하드 코딩했습니다. 아마도 향후 업데이트에서 사용자가 비밀번호를 원하는 기간을 선택할 수 있도록 허용할 것입니다!
이것으로 이 프로젝트를 마치겠습니다! 내가 배운 것 중 가장 좋아하는 것은!

시작 CSS 파일을 시작하고 실행하는 방법

개체.할당

입력 상자의 값을 변경하려면 .Value! 디

마크 다운 쓰는 방법

오늘은 여기까지입니다 읽어주셔서 감사합니다! 내가 작업하고 있는 프로젝트에 대한 자세한 내용을 게시할 수 있는 트위터와 Dev Vlog가 있는 YouTube 채널에 대한 링크를 남길 것입니다. 다음 편에서 만나요!