diff --git a/Form-Controls/README.md b/Form-Controls/README.md deleted file mode 100644 index c356f8844..000000000 --- a/Form-Controls/README.md +++ /dev/null @@ -1,72 +0,0 @@ -# Form Controls - -## Learning Objectives - - - -- [ ] Interpret requirements and check against a list of criteria -- [ ] Write a valid form -- [ ] Test with Devtools -- [ ] Refactor using Devtools -- [ ] Use version control by committing often and pushing regularly to GitHub -- [ ] Develop the habit of writing clean, well-structured, and error-free code - - -## Task - -We are selling T-shirts. Write a form to collect the following data: - -Our customers already have accounts, so we know their addresses and charging details already. We don't need to collect that data. We want to confirm they are the right person, then get them to choose a colour and size. - -Writing that out as a series of questions to ask yourself: - -1. What is the customer's name? I must collect this data and ensure it contains at least two non-space characters. -2. What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern. -3. What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours? -4. What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL - -All fields are required. -Do not write a form action for this project. - -> [!TIP] -> To check whether the customer's name contains at least two non-space characters you may need to use a **regular expression** (or **regex** for short), which is a tool used to match patterns in text. If you wish to learn more about regular expressions there are plenty of resources on the web including the [official MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions), but for this task you can use this regex that we have pre-written for you: `.*\S.*\S.*`. -> -> Now you have the regular expression, it's up to you to figure out how to use it in the context of an HTML form! - -## Acceptance Criteria - -### Developers must test their work. - -Let's write out our testable criteria. Check each one off as you complete it. - -- [ ] I have only used HTML and CSS. -- [ ] I have not used any JavaScript. - -### HTML - -- [ ] My form is semantic HTML. -- [ ] All inputs have associated labels. -- [ ] My Lighthouse Accessibility score is 100. -- [ ] I require a valid name. -- [ ] I require a valid email. -- [ ] I require one colour from a defined set of 3 colours. -- [ ] I require one size from a defined set of 6 sizes. - -### Developers must adhere to professional standards. - -> Before you say you're done: Is your code readable? Does it run correctly? Does it look professional? - -These practices reflect the level of quality expected in professional work. -They ensure your code is reliable, maintainable, and presents a polished, credible experience to users. - -- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/ -- [ ] My code is consistently formatted -- [ ] My page content is free of typos and grammatical mistakes -- [ ] I commit often and push regularly to GitHub - -## Resources -- [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms) -- [MDN: Form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) -- [Lighthouse](https://developers.google.com/web/tools/lighthouse) -- [Lighthouse Guide](https://programming.codeyourfuture.io/guides/testing/lighthouse) -- [Format Code and Make Logical Commits in VS Code](../practical_guide.md) diff --git a/Form-Controls/index.html b/Form-Controls/index.html deleted file mode 100644 index 74b591ffc..000000000 --- a/Form-Controls/index.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - My form exercise - - - - -
-

Product Pick

-
-
-
- - -
-
- - - diff --git a/Sprint-2/1-key-exercises/1-count.js b/Sprint-2/1-key-exercises/1-count.js index 117bcb2b6..d0686196f 100644 --- a/Sprint-2/1-key-exercises/1-count.js +++ b/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. \ No newline at end of file diff --git a/Sprint-2/1-key-exercises/2-initials.js b/Sprint-2/1-key-exercises/2-initials.js index 964c9563c..a749c3066 100644 --- a/Sprint-2/1-key-exercises/2-initials.js +++ b/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 + + + + + + + + diff --git a/Sprint-2/1-key-exercises/3-paths.js b/Sprint-2/1-key-exercises/3-paths.js index ab90ebb28..e1b3c3cda 100644 --- a/Sprint-2/1-key-exercises/3-paths.js +++ b/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 \ No newline at end of file +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 -_- \ No newline at end of file diff --git a/Sprint-2/1-key-exercises/4-random.js b/Sprint-2/1-key-exercises/4-random.js index 292f83aab..8a2a984df 100644 --- a/Sprint-2/1-key-exercises/4-random.js +++ b/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 \ No newline at end of file