London | 26-ITP-Sep | Rawan Almutairi | Sprint2 | JavaScript key excercises

Form-Controls/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>My form exercise</title>
+    <link rel="stylesheet" href="style.css"/>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
@@ -13,15 +14,66 @@ <h1>Product Pick</h1>
     </header>
     <main>
       <form>
-        <!-- write your html here-->
-        <!-- 
-          try writing out the requirements first as comments
-        this will also help you fill in your PR message later-->
+  <!-- write your html here-->
+        Enter your name:
+      <input type="text" placeholder="Enter your name" name="aName" size="16" minlength="2" maxlength="16"required>
+
+<!-- the size attribute control how wide the text box, "how many characters it can control-->
+<!-- the minlength attribute control the minimum number of characters required-->
+<!-- the maxlength attribute control the maximum number of characters required-->
+<!-- the placeholder attribute provide a hint for the user on what to enter-->
+ <!-- the required attribute ensures the user fills out the field-->
+<p>Choose your T-shirt color:</p>
+<!-- choosing the radio buttons for color selection-->
+<p>please select a color:</p>
+<p>
+<input type="radio" name="color" id="red" value="Red" placeholder="Red" required>
+<label for="red"label>Red</label><br>
+<input type="radio" name="color" id="brown" value="Brown" placeholder="Brown" required>
+<label for="brown">Brown</label><br>
+<input type="radio" name="color" id="black" value="Black" placeholder="Black" required>
+<label for="black">Black</label><br>
+</p>
+
+<!-- a list of suggestions using the list attribute and the datalist element -->
+ <!-- I need to fix the labels to increase accessbility to 100%-->
+ <label> 
+Select your T-shirt size: 
+<input list="SizeList" name="T-shirt Size" placeholder=" Choose your size" required><br> 
+</label>
+<datalist id="SizeList">
+
+<option value="XS">
+  <option value="S">
+    <option value="M">
+      <option value="L">
+        <option value="XL">
+          <option value="XXL">
+
+</datalist>
+
       </form>
+
+<p>
+       <style>
+input:invalid{background: rgb(253, 251, 253);}
+input:valid{background: rgb(253, 251, 253);}
+ </style>
+ Enter your email:
+<input type="email" placeholder="Enter your email" required>
+</p>
+<!--The input type="email" is used so the browser can validatae the email address format-->
+<!--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-->
+
+<form> <label> <input type="submit"> <input type="resit">
+  </label>
+</form>
     </main>
     <footer>
       <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>Rawan@</p>
     </footer>
   </body>
-</html>
+</html> 
+
+<!--done-->

Form-Controls/style.css

@@ -0,0 +1,20 @@
+<!-- styling-->
+
+ body { color: #141414; 
+
+    background-color: #6aa57e; 
+
+     font-family: Georgia; 
+
+
+
+
+h1{
+
+font-family: sans-serif;
+color:  rgba(15, 15, 15, 0.267); 
+background-color: #f5eeda;  
+text-align: center;
+font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+
+}

Form-Controls/validate-pr-metadata

@@ -0,0 +1,19 @@
+name: Validate PR Metadata
+on:
+  pull_request_target:
+    types:
+      - labeled
+      - unlabeled
+      - opened
+      - edited
+      - reopened
+
+jobs:
+  validate_pr_metadata:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: CodeYourFuture/actions/validate-pr-metadata@main
+        with:
+          give_more_specific_comment_for_earlier_learners: true
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Sprint-2/1-key-exercises/1-count.js

@@ -4,3 +4,4 @@ count = count + 1;
 
 // Line 1 is a variable declaration, creating the count variable with an initial value of 0
 // Describe what line 3 is doing, in particular focus on what = is doing
+//a variable is initialised and assigned a value zero, than it was reassigned additing 1 to its value

Sprint-2/1-key-exercises/2-initials.js

@@ -5,6 +5,18 @@ const lastName = "Johnson";
 // Declare a variable called initials that stores the first character of each string.
 // This should produce the string "CKJ", but you must not write the characters C, K, or J in the code of your solution.
 
-const initials = ``;
+//const initials = ``;
 
 // https://www.google.com/search?q=get+first+character+of+string+mdn
+
+const initials = `${firstName[0]}${middleName[0]}${lastName[0]}`;
+
+console.log(initials); // Output: CKJ
+
+
+
+
+
+
+
+

Sprint-2/1-key-exercises/3-paths.js

@@ -9,15 +9,52 @@
 
 // (All spaces in the "" line should be ignored. They are purely for formatting.)
 
+//const filePath = "/Users/mitch/cyf/Module-JS1/week-1/interpret/file.txt";
+//const lastSlashIndex = filePath.lastIndexOf("/");
+//const base = filePath.slice(lastSlashIndex + 1);
+//console.log(`The base part of ${filePath} is ${base}`);
+
+// Create a variable to store the dir part of the filePath variable
+// Create a variable to store the ext part of the variable
+
+
+//const dir = ;
+//const ext = ;
+
+// https://www.google.com/search?q=slice+mdn
+
+// from here start my explaination of the code I see for education purposes.
+// this is a file system that allows users to manipulate what files they see and what information they omit, and they use string 
+//methods to do that 
+// most common methods developers use to manipulate the files are included in this file Sprint-2\1-key-exercises\manipulating files.txt
+
+//  in this example the string methods are used to manipulate the file system
+
 const filePath = "/Users/mitch/cyf/Module-JS1/week-1/interpret/file.txt";
-const lastSlashIndex = filePath.lastIndexOf("/");
-const base = filePath.slice(lastSlashIndex + 1);
-console.log(`The base part of ${filePath} is ${base}`);
+// a variable is created to store the file path of a file in the file system
+//const lastSlashIndex = filePath.lastIndexOf("/");
+// a variable is created and identified to find the last occurance of the "/" character in the filePath variable, which is used to separate directories and files in a file system
+//const base = filePath.slice(lastSlashIndex + 1);
+// a variable is created and identified to extract the base part of the filePath variable, which is the name of the file and its extension, by using the slice method 
+//console.log(`The base part of ${filePath} is ${base}`);
+// console.log is used to print the base part of the filePath variable to the console, which is the name of the file and its extension
 
 // Create a variable to store the dir part of the filePath variable
 // Create a variable to store the ext part of the variable
 
-const dir = ;
-const ext = ;
+const lastSlashIndex = filePath.lastIndexOf("/");
+// here we have the variable lastslashIndex already created and identified its position
+// stores the position or (index) of "/" in filePath, so this "/" is used as a symbol that storers the number index or a place that seprate dir from base 
+const dir = filePath.slice(0, lastSlashIndex);
+console.log(dir);
+// we show our result in the console
+const lastDotIndex = filePath.lastIndexOf('.');
+// we create a variable and assign its value using the indexOf to be from the dot location
+const ext = filePath.slice(lastDotIndex);
+// we create a variable where we assign its value using the slice method to be from the dot only
 
-// https://www.google.com/search?q=slice+mdn
+console.log(ext)
+// we print our result in the console
+//slice(startIndex, endIndex)
+// means, start here and stop here. we are doing this to seprate the dir from base so we need to tell it where to start and where to end, hence that is why we use slice method,
+//my comments needs correcting to look profissional -_-

Sprint-2/1-key-exercises/4-random.js

@@ -7,3 +7,16 @@ const num = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
 // Try breaking down the expression and using documentation to explain what it means
 // It will help to think about the order in which expressions are evaluated
 // Try logging the value of num and running the program several times to build an idea of what the program is doing
+
+
+//here starts my learning 
+
+// first const minimun, const maximum are the variables 
+// = the assignmen operator
+// what comes after = is what the variable will store 
+// Math.floor is a method and here we are telling it that its argument is to use the random method 
+// and multiply the result before rounding with the maximum and minimum variables we created 
+// * is a multiplication operator 
+// to understand what is going on we need to understand what the floor and random methods do
+//Math.floor (rounds down to the nearest whole number) and than pass it to Math.floor
+// we are asking the program to round whatever result we have to the nearest whole number.