Skip to content

Commit 4629b0f

Browse files
Rawan0-0Rawan0-0
committed
worked on the sprint
1 parent 877e0de commit 4629b0f

5 files changed

Lines changed: 403 additions & 6 deletions

File tree

‎Form-Controls/Prototype-Code.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!--
2+
try writing out the requirements first as comments
3+
this will also help you fill in your PR message later-->
4+
<!--Writing that out as a series of questions to ask yourself:
5+
6+
1. What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.
7+
2. What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern.
8+
3. What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours?
9+
4. What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL
10+
11+
All fields are required.-->
12+
13+
<!DOCTYPE html>
14+
<html lang="en">
15+
<head>
16+
<meta charset="utf-8" />
17+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
18+
<title>My form exercise</title>
19+
<link rel="stylesheet" href="style.css"/>
20+
<meta name="description" content="" />
21+
<meta name="viewport" content="width=device-width, initial-scale=1" />
22+
23+
</head>
24+
<body>
25+
<header>
26+
<h1>Product Pick</h1>
27+
</header>
28+
<main>
29+
<form>
30+
<!-- write your html here-->
31+
Enter your name:
32+
<input type="text" placeholder="Enter your name" name="aName" size="16" minlength="2" maxlength="16"required>
33+
34+
<!-- the size attribute control how wide the text box, "how many characters it can control-->
35+
<!-- the minlength attribute control the minimum number of characters required-->
36+
<!-- the maxlength attribute control the maximum number of characters required-->
37+
<!-- the placeholder attribute provide a hint for the user on what to enter-->
38+
<!-- the required attribute ensures the user fills out the field-->
39+
<p>Choose your T-shirt color:</p>
40+
<!-- choosing the radio buttons for color selection-->
41+
<p>please select a color:</p>
42+
<p>
43+
<input type="radio" name="color" id="red" value="Red" placeholder="Red" required>
44+
<label for="red"label>Red</label><br>
45+
<input type="radio" name="color" id="brown" value="Brown" placeholder="Brown" required>
46+
<label for="brown">Brown</label><br>
47+
<input type="radio" name="color" id="black" value="Black" placeholder="Black" required>
48+
<label for="black">Black</label><br>
49+
</p>
50+
51+
<!-- a list of suggestions using the list attribute and the datalist element -->
52+
Select your T-shirt size:
53+
<input list="SizeList" name="T-shirt Size" placeholder=" Choose your size" required><br>
54+
<datalist id="SizeList">
55+
<option value="XS">
56+
<option value="S">
57+
<option value="M">
58+
<option value="L">
59+
<option value="XL">
60+
<option value="XXL">
61+
62+
</datalist>
63+
64+
</form>
65+
66+
<p>
67+
<style>
68+
input:invalid{background: rgb(253, 251, 253);}
69+
input:valid{background: rgb(253, 251, 253);}
70+
</style>
71+
Enter your email:
72+
<input type="email" placeholder="Enter your email" required>
73+
</p>
74+
<!--The input type="email" is used so the browser can validatae the email address format-->
75+
<!--the style tag is used to style the input box. CSS pseudo-classes :valid or :invalid to check if the email is valid and notify the user-->
76+
77+
<form><input type="submit"> <input type="resit"></form>
78+
</main>
79+
<footer>
80+
<!-- change to your name-->
81+
<p>Rawan@</p>
82+
</footer>
83+
</body>
84+
</html>

‎Form-Controls/index.html‎

Lines changed: 58 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="utf-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<title>My form exercise</title>
7+
<link rel="stylesheet" href="style.css"/>
78
<meta name="description" content="" />
89
<meta name="viewport" content="width=device-width, initial-scale=1" />
910
</head>
@@ -13,15 +14,66 @@ <h1>Product Pick</h1>
1314
</header>
1415
<main>
1516
<form>
16-
<!-- write your html here-->
17-
<!--
18-
try writing out the requirements first as comments
19-
this will also help you fill in your PR message later-->
17+
<!-- write your html here-->
18+
Enter your name:
19+
<input type="text" placeholder="Enter your name" name="aName" size="16" minlength="2" maxlength="16"required>
20+
21+
<!-- the size attribute control how wide the text box, "how many characters it can control-->
22+
<!-- the minlength attribute control the minimum number of characters required-->
23+
<!-- the maxlength attribute control the maximum number of characters required-->
24+
<!-- the placeholder attribute provide a hint for the user on what to enter-->
25+
<!-- the required attribute ensures the user fills out the field-->
26+
<p>Choose your T-shirt color:</p>
27+
<!-- choosing the radio buttons for color selection-->
28+
<p>please select a color:</p>
29+
<p>
30+
<input type="radio" name="color" id="red" value="Red" placeholder="Red" required>
31+
<label for="red"label>Red</label><br>
32+
<input type="radio" name="color" id="brown" value="Brown" placeholder="Brown" required>
33+
<label for="brown">Brown</label><br>
34+
<input type="radio" name="color" id="black" value="Black" placeholder="Black" required>
35+
<label for="black">Black</label><br>
36+
</p>
37+
38+
<!-- a list of suggestions using the list attribute and the datalist element -->
39+
<!-- I need to fix the labels to increase accessbility to 100%-->
40+
<label>
41+
Select your T-shirt size:
42+
<input list="SizeList" name="T-shirt Size" placeholder=" Choose your size" required><br>
43+
</label>
44+
<datalist id="SizeList">
45+
46+
<option value="XS">
47+
<option value="S">
48+
<option value="M">
49+
<option value="L">
50+
<option value="XL">
51+
<option value="XXL">
52+
53+
</datalist>
54+
2055
</form>
56+
57+
<p>
58+
<style>
59+
input:invalid{background: rgb(253, 251, 253);}
60+
input:valid{background: rgb(253, 251, 253);}
61+
</style>
62+
Enter your email:
63+
<input type="email" placeholder="Enter your email" required>
64+
</p>
65+
<!--The input type="email" is used so the browser can validatae the email address format-->
66+
<!--the style tag is used to style the input box. CSS pseudo-classes :valid or :invalid to check if the email is valid and notify the user-->
67+
68+
<form> <label> <input type="submit"> <input type="resit">
69+
</label>
70+
</form>
2171
</main>
2272
<footer>
2373
<!-- change to your name-->
24-
<p>By HOMEWORK SOLUTION</p>
74+
<p>Rawan@</p>
2575
</footer>
2676
</body>
27-
</html>
77+
</html>
78+
79+
<!--done-->

‎Form-Controls/style.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
3+
body { color: #141414;
4+
5+
background-color: #6aa57e;
6+
7+
font-family: Georgia;
8+
9+
10+
11+
12+
h1{
13+
14+
font family: "sans-serif";
15+
color: rgba(15, 15, 15, 0.267);
16+
background-color: #f5eeda;
17+
text-align: center;
18+
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
19+
20+
}

‎Sprint-2/1-key-exercises/manipulating files.txt‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
2+
3+
========================================
4+
NODE.JS FILE SYSTEM CHEAT SHEET
5+
========================================
6+
7+
MENTAL MODEL
8+
9+
String Methods
10+
↓
11+
Path Module
12+
↓
13+
File System Module (fs)
14+
↓
15+
Actual Files on Disk
16+
17+
18+
========================================
19+
1. STRING METHODS
20+
========================================
21+
22+
Purpose:
23+
Manipulate path strings manually.
24+
25+
Example Path:
26+
27+
/Users/rawan/project/file.txt
28+
29+
30+
slice()
31+
32+
Purpose:
33+
Extract part of a string.
34+
35+
Example:
36+
filePath.slice(7)
37+
38+
39+
split()
40+
41+
Purpose:
42+
Break a string into pieces.
43+
44+
Example:
45+
filePath.split("/")
46+
47+
Result:
48+
["", "Users", "rawan", "project", "file.txt"]
49+
50+
51+
includes()
52+
53+
Purpose:
54+
Check if text exists.
55+
56+
Example:
57+
filePath.includes("rawan")
58+
59+
60+
startsWith()
61+
62+
Purpose:
63+
Check beginning of string.
64+
65+
Example:
66+
filePath.startsWith("/Users")
67+
68+
69+
endsWith()
70+
71+
Purpose:
72+
Check ending of string.
73+
74+
Example:
75+
filePath.endsWith(".txt")
76+
77+
78+
indexOf()
79+
80+
Purpose:
81+
Find first occurrence.
82+
83+
Example:
84+
filePath.indexOf("/")
85+
86+
87+
lastIndexOf()
88+
89+
Purpose:
90+
Find last occurrence.
91+
92+
Example:
93+
filePath.lastIndexOf("/")
94+
95+
96+
replace()
97+
98+
Purpose:
99+
Replace text.
100+
101+
Example:
102+
filePath.replace(".txt", ".pdf")
103+
104+
105+
substring()
106+
107+
Purpose:
108+
Extract part of a string.
109+
110+
Example:
111+
filePath.substring(7, 12)
112+
113+
114+
trim()
115+
116+
Purpose:
117+
Remove whitespace.
118+
119+
Example:
120+
filePath.trim()
121+
122+
123+
124+
========================================
125+
2. PATH MODULE
126+
========================================
127+
128+
Import:
129+
130+
const path = require("path");
131+
132+
Purpose:
133+
Manipulate file paths safely.
134+
135+
136+
path.basename()
137+
138+
Purpose:
139+
Get filename.
140+
141+
Example:
142+
143+
path.basename("/Users/rawan/file.txt")
144+
145+
Result:
146+
147+
file.txt
148+
149+
150+
path.dirname()
151+
152+
Purpose:
153+
Get directory path.
154+
155+
Example:
156+
157+
path.dirname("/Users/rawan/file.txt")
158+
159+
Result:
160+
161+
/Users/rawan
162+
163+
164+
path.extname()
165+
166+
Purpose:
167+
Get extension.
168+
169+
Example:
170+
171+
path.extname("file.txt")
172+
173+
Result:
174+
175+
.txt
176+
177+
178+
path.join()
179+
180+
Purpose:
181+
Join path pieces.
182+
183+
Example:
184+
185+
path.join("users", "rawan)

0 commit comments

Comments
 (0)