Skip to content

Commit a995873

Browse files
daironreijnadaironreijna
committed
starting elements
1 parent 61e58f7 commit a995873

File tree

5 files changed

+362
-0
lines changed

5 files changed

+362
-0
lines changed

‎LICENSE

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
MIT License
2+
3+
Copyright (c) 2023 Dairon Reijna
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6+
7+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8+
9+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎assets/css/style.css

+137
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
*,
2+
*::before,
3+
*::after {
4+
box-sizing: border-box;
5+
}
6+
7+
html,
8+
body,
9+
.wrapper {
10+
height: 100%;
11+
margin: 0;
12+
padding: 0;
13+
}
14+
15+
body {
16+
font-family: sans-serif;
17+
background-color: #f9fbfd;
18+
}
19+
20+
.wrapper {
21+
padding-top: 30px;
22+
padding-left: 20px;
23+
padding-right: 20px;
24+
}
25+
26+
header {
27+
text-align: center;
28+
padding: 20px;
29+
padding-top: 0px;
30+
color: hsl(206, 17%, 28%);
31+
}
32+
33+
.card {
34+
background-color: hsl(0, 0%, 100%);
35+
border-radius: 5px;
36+
border-width: 1px;
37+
box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px 0px;
38+
color: hsl(206, 17%, 28%);
39+
font-size: 18px;
40+
margin: 0 auto;
41+
max-width: 800px;
42+
padding: 30px 40px;
43+
}
44+
45+
.card-header::after {
46+
content: " ";
47+
display: block;
48+
width: 100%;
49+
background: #e7e9eb;
50+
height: 2px;
51+
}
52+
53+
.card-body {
54+
min-height: 100px;
55+
}
56+
57+
.card-footer {
58+
text-align: center;
59+
}
60+
61+
.card-footer::before {
62+
content: " ";
63+
display: block;
64+
width: 100%;
65+
background: #e7e9eb;
66+
height: 2px;
67+
}
68+
69+
.card-footer::after {
70+
content: " ";
71+
display: block;
72+
clear: both;
73+
}
74+
75+
.btn {
76+
border: none;
77+
background-color: hsl(360, 91%, 36%);
78+
border-radius: 25px;
79+
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 6px 0px rgba(0, 0, 0, 0.2) 0px 1px 1px
80+
0px;
81+
color: hsl(0, 0%, 100%);
82+
display: inline-block;
83+
font-size: 22px;
84+
line-height: 22px;
85+
margin: 16px 16px 16px 20px;
86+
padding: 14px 34px;
87+
text-align: center;
88+
cursor: pointer;
89+
}
90+
91+
button[disabled] {
92+
cursor: default;
93+
background: #c0c7cf;
94+
}
95+
96+
.float-right {
97+
float: right;
98+
}
99+
100+
#password {
101+
-webkit-appearance: none;
102+
-moz-appearance: none;
103+
appearance: none;
104+
border: none;
105+
display: block;
106+
width: 100%;
107+
padding-top: 15px;
108+
padding-left: 15px;
109+
padding-right: 15px;
110+
padding-bottom: 85px;
111+
font-size: 1.2rem;
112+
text-align: center;
113+
margin-top: 10px;
114+
margin-bottom: 10px;
115+
border: 2px dashed #c0c7cf;
116+
border-radius: 6px;
117+
resize: none;
118+
overflow: hidden;
119+
}
120+
121+
@media (max-width: 690px) {
122+
.btn {
123+
font-size: 1rem;
124+
margin: 16px 0px 0px 0px;
125+
padding: 10px 15px;
126+
}
127+
128+
#password {
129+
font-size: 1rem;
130+
}
131+
}
132+
133+
@media (max-width: 500px) {
134+
.btn {
135+
font-size: 0.8rem;
136+
}
137+
}

‎assets/images/05-javascript-challenge-demo.png

20.9 KB
Loading

‎assets/script/script.js

+182
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
// User view
2+
/*
3+
User will visit website and will see a container/card with a heading, a prompt, and a button to generate a password.
4+
The user will click the generate a password button.
5+
6+
How long due you want the password to be?
7+
8+
Do you want capital letters in the password?
9+
Do you want numbers to be generated in the password?
10+
11+
Would you like special characters in the password?
12+
13+
Alert - The user will receive an output from the webpage with a password that has been generated.
14+
15+
(the output from this round would be a wireframe of the website to be built, with relevant elements incorporated)
16+
17+
18+
// What developer has to do
19+
// ============================================
20+
21+
Make button clickable.
22+
23+
A prompt that will request for password length.
24+
Check to make sure appropriate number (value and type) has been entered by user.
25+
26+
second 'confirm' to request - if characters should include capitalisation.
27+
if true then yes added within generated password.
28+
if false then none added
29+
30+
3rd 'confirm' to request - if user wants characters to include numbers.
31+
if true then yes added within generated password.
32+
if false then none added
33+
34+
4th and last 'confirm' to ask user if they would like special characters within the generated password.
35+
if true then yes added within generated password.
36+
if false then none added
37+
38+
An alert provides the user with the generated password.
39+
40+
(Options are prompt - alert or confirm.)
41+
42+
43+
// tools to accomplish above tasks.
44+
// =========================================
45+
1. generate password button should call a function
46+
2. Prompt to request password length
47+
3. Confirm for user to decide inclusion of capital letters
48+
Add to potential characters that can be choosed from.
49+
4. Confirm for user to decide inclusion of numbers
50+
Add to potential characters that can be choosed from.
51+
5. Confirm for user to decide inclusion of special characters
52+
Add to potential characters that can be choosed from.
53+
6. Alert to user
54+
55+
7. create an array that will allow the relevant function/code to call from, and pull potentialCharacters for the generatedPassword.
56+
so atleast I need one array
57+
8. using a for loop to iterate over the new array, in order to generate the new password.
58+
59+
Return math.ceil(Math.random() * userInput)
60+
61+
And use this to iterate over the array.index to get the characters you need.
62+
63+
*/
64+
65+
// Array of special characters to be included in password
66+
var specialCharacters = [
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+
// Array of numeric characters to be included in password
93+
var numericCharacters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
94+
95+
// Array of lowercase characters to be included in password
96+
var lowerCasedCharacters = [
97+
'a',
98+
'b',
99+
'c',
100+
'd',
101+
'e',
102+
'f',
103+
'g',
104+
'h',
105+
'i',
106+
'j',
107+
'k',
108+
'l',
109+
'm',
110+
'n',
111+
'o',
112+
'p',
113+
'q',
114+
'r',
115+
's',
116+
't',
117+
'u',
118+
'v',
119+
'w',
120+
'x',
121+
'y',
122+
'z'
123+
];
124+
125+
// Array of uppercase characters to be included in password
126+
var upperCasedCharacters = [
127+
'A',
128+
'B',
129+
'C',
130+
'D',
131+
'E',
132+
'F',
133+
'G',
134+
'H',
135+
'I',
136+
'J',
137+
'K',
138+
'L',
139+
'M',
140+
'N',
141+
'O',
142+
'P',
143+
'Q',
144+
'R',
145+
'S',
146+
'T',
147+
'U',
148+
'V',
149+
'W',
150+
'X',
151+
'Y',
152+
'Z'
153+
];
154+
155+
// Function to prompt user for password options
156+
function getPasswordOptions() {
157+
158+
}
159+
160+
// Function for getting a random element from an array
161+
function getRandom(arr) {
162+
163+
}
164+
165+
// Function to generate password with user input
166+
function generatePassword() {
167+
168+
}
169+
170+
// Get references to the #generate element
171+
var generateBtn = document.querySelector('#generate');
172+
173+
// Write password to the #password input
174+
function writePassword() {
175+
var password = generatePassword();
176+
var passwordText = document.querySelector('#password');
177+
178+
passwordText.value = password;
179+
}
180+
181+
// Add event listener to generate button
182+
generateBtn.addEventListener('click', writePassword);

‎index.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en-gb">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Password Generator</title>
8+
<link rel="stylesheet" href="./assets/css/style.css" />
9+
</head>
10+
<body>
11+
<div class="wrapper">
12+
<header>
13+
<h1>Password Generator</h1>
14+
</header>
15+
<div class="card">
16+
<div class="card-header">
17+
<h2>Generate a Password</h2>
18+
</div>
19+
<div class="card-body">
20+
<textarea
21+
readonly
22+
id="password"
23+
placeholder="Your Secure Password"
24+
aria-label="Generated Password"
25+
></textarea>
26+
</div>
27+
<div class="card-footer">
28+
<button id="generate" class="btn">Generate Password</button>
29+
</div>
30+
</div>
31+
</div>
32+
<script src="./assets/script/script.js"></script>
33+
</body>
34+
</html>

0 commit comments

Comments
 (0)