-
It's me!
-
- Naomi Carrigan
-Welcome to my portfolio page!
--
Projects
-Here's what I've worked on!
-- - - - -
-
Contact me!
-Use the links below to get in touch.
-FreeCodeCamp.org | GitHub | Facebook | LinkedIn -
- Pokemon Daycare Service -
-What we offer
-
-
-
- 
-
-
- Guaranteed friendly and loving staff!
-
-
-
-
-
-
-
- Comfortable environment for Pokemon to explore and play!
-
-
-
-
-
-
-
-
- Multiple membership plans to fit your lifestyle!
-
- Check us out!
- A sneak peek into our facility: -- -
Membership Plans
-
-
-
- Basic Membership
-
- -
-
-
- One Pokemon -
- Food and berries provided -
- Silver Membership
-
- -
-
-
- Up to Three Pokemon -
- Food and berries provided -
- Grooming and accessories included -
- Gold Membership
-
- -
-
-
- Up to six Pokemon! -
- Food and berries provided -
- Grooming and accessories included -
- Personal training for each Pokemon -
- Breeding and egg hatching -
Survey Form
-The card below was built as a sample survey form for freeCodeCamp.
-Join the Togepi Fan Club!
-- Enter your information here to receive updates about club activities, - our monthly newsletter, and other email communications. -
- -- Welcome to a basic introduction of algebra. In this tutorial, we will - review some of the more common algebraic concepts. -
-- To start with, let's define some of the more common terms used in - algebra: -
--
-
- - Variable: A variable is an unknown value, usually represented - by a letter. - -
- - Expression: Essentially a mathematical object. For the - purpose of this tutorial, an expression is one part of an equation. - -
- - Equation: An equation is a mathematical argument in which two - expressions result in the same value. - -
- Sometimes it is easier to understand the definitions when you have a
- physical example to look at. Here is an example of the above terms.
- x + 5 = 12
- In this above example, we have:
-
-
-
- Variable: The variable in the example is "x". -
- - Expression: There are two expressions in this example. They - are "x+5" and "12". - -
- - Equation: The entire example, "x+5=12", is an equation. - -
- The primary use for algebra is to determine an unknown value, the
- "variable", with the information provided. Continuing to use our
- example from above, we can find the value of the variable "x".
- x + 5 = 12
- In an equation, both sides result in the same value. So you can
- manipulate the two expressions however you need, as long as you
- perform the same operation (or change) to each side. You do this
- because the goal when solving an equation is to
- get the variable into its own expression, or by itself on one side
- of the = sign.
For this example, we want to remove the "+5" so the "x" is
- alone. To do this, we can subtract 5, because subtraction is
- the opposite operation to addition. But remember, we have to perform
- the same operation to both sides of the equation. Now our equation
- looks like this.
- x + 5 - 5 = 12 - 5
- The equation looks like a mess right now, because we haven't completed
- the operations. We can simplify this equation to make it easier
- to read by performing the operations "5-5" and "12-5". The result
- is:
- x = 7
- We now have our solution to this equation!
-
- Let us look at a slightly more challenging equation.
- 3x + 4 = 13
- Again we can start with subtraction. In this case, we want to subtract
- 4 from each side of the equation. We will also go ahead and simplify
- with each step. So now we have:
- 3x = 9
- "3x" translates to "3*x", where the "*" symbol indicates
- multiplication. We use the "*" to avoid confusion, as the "x" is now a
- variable instead of a multiplication symbol. The opposite operation
- for multiplication is division, so we need to
- divide each expression by 3.
- x = 3
- And now we have our solution!
-
- Now we are getting in to more complex operations. Here is another
- equation for us to look at:
- x^2 - 8 = 8
- Our very first step will be to add 8 to each side. This is
- different from our previous examples, where we had to subtract. But
- remember, our goal is to get the variable alone by performing opposite
- operations.
- x^2 = 16
- But what does the "^2" mean? The "^" symbol is used to denote
- exponents in situations where superscript is not available. When
- superscript is available, you would see it as x2.
- For the sake of this project, however, we will use the "^" symbol.
- An exponent tells you how many times the base (in our case, "x") is
- multiplied by itself. So, "x^2" would be the same as "x*x". Now the
- opposite function of multiplication is division, but we would have to
- divide both sides by "x". We do not want to do this, as that
- would put an "x" on the other side of the equation. So instead, we
- need to use the root operation! For an exponent of "2", we call this
- the "square root" and denote it with "√". Our equation is now:
-
- x = √9
- Performing a root operation by hand can be a tedious process, so we
- recommend using a calculator when necessary. However, we are lucky in
- that "9" is a
- perfect square, so we do not need to calculate anything. Instead, we find our
- answer to be:
- x = 3
-
- As you explore your algebra studies further, you may start to run
- across equations with more than one variable. The first such equations
- will likely look like:
- y = 3x
- An equation like this does not have one single solution.
- Rather, there are a series of values for which the equation is true.
- For example, if "x=3" and "y=9", the equation is true. These equations
- are usually used to plot a graph.
- Getting more complicated, though, you may be given a pair of
- equations. This is called a "system of equations", and CAN be solved.
- Let's look at how we do this! Consider the following system of
- equations:
- y = 3x | y - 6 = x
- A system of equations IS solvable, but it is a multi-step process. To
- get started, we need to chose a variable we are solving for. Let's
- solve for "x" first. From the second equation, we know that "x" equals
- "y - 6", but we cannot simplify that further because we do not have a
- value for "y". Except, thanks to the system of equations, we DO have a
- value for "y". We know that "y" equals "3x". So, looking at our second
- equation, we can replace "y" with "3x" because they have the same
- value. We then get:
- 3x - 6 = x
- Now we can solve for "x"! We start by adding 6 to each side.
- 3x = x + 6
- We still need to get "x" by itself, so we subtract "x" from both sides
- and get:
- 2x = 6
- If this confuses you, remember that "3x" is the same as "x+x+x".
- Subtract an "x" from that and you get "x+x", or "2x". Now we divide
- both sides by 2 and have our value for x!
- x = 3
- However, our work is not done yet. We still need to find the value for
- "y". Let's go back to our first equation:
- y = 3x
- We have a value for "x" now, so let's see what happens if we put that
- value in.
- y = 3*3
- We perform the multiplication and discover that "y=9"! Our solution to
- this system of equations then is:
- x = 3 and y = 9
-
Coming Soon!
-Keep an eye out for new additions!
-Check out the following links for more information!
--
-
- - Wolfram Alpha - is a great source for multiple mathematic fields. - -
- - Wikipedia's Algebra page - for more general information. - -
Tribute Page
-The below card was designed as a tribute page for freeCodeCamp.
-
- 
- Togepi, happy as always.
-
-
- Togepi
--
-
-
- - Togepi was first discovered in the Johto region, when Ash Ketchum - discovered a mysterious egg. However, when the egg hatched, Togepi saw - Ash's friend Misty first and imprinted on her. Like many other - creatures, this imprinting process created a bond and Togepi views - Misty as his mother. -
-- Togepi is a very childlike Pokemon, and is very emotionally - expressive. He demonstrates extreme levels of joy and sadness. -
--
Battle Information
--
-
- Type: Fairy -
- Evolutions: Togepi -> Togetic -> Togekiss -
- Moves: Growl, Pound, Sweet Kiss, Charm -
- Weaknesses: Poison, Steel -
- Resistances: Dragon -
- Check out this - Bulbapedia article on Togepi - for more information on this great Pokemon. -
-Zap -ABC -jane -fred -jane- ---- - -
Zap -ABC -Zap- ---- - -
ABC -Zap -jane- ---- - -
ABC -Zap -ABC- ---- - -
Zap -Zap -Zap- -## --video-solution-- - -4 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md deleted file mode 100644 index dc30911a305..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06d -title: Comparing and Sorting Tuples -challengeType: 11 -videoId: dZXzBXUxxCs -bilibiliIds: - aid: 931886163 - bvid: BV1HM4y1T7TK - cid: 376533673 -dashedName: comparing-and-sorting-tuples ---- - -# --description-- - -More resources: - -\- Exercise - -# --question-- - -## --text-- - -Which does the same thing as the following code?: - -```python -lst = [] -for key, val in counts.items(): - newtup = (val, key) - lst.append(newtup) -lst = sorted(lst, reverse=True) -print(lst) -``` - -## --answers-- - -```python -print( sorted( [ (v,k) for k,v in counts.items() ], reverse=True ) ) -``` - ---- - -```python -print( [ (k,v) for k,v in counts.items().sorted() ] ) -``` - ---- - -```python -print( sorted( [ (v,k) for k,v in counts.keys() ] ) ) -``` - ---- - -```python -print( [ (k,v) for k,v in counts.values().sort() ] ) -``` - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md deleted file mode 100644 index c7e87b2f7ed..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f058 -title: Conditional Execution -challengeType: 11 -videoId: gz_IfIsZQtc -bilibiliIds: - aid: 206949935 - bvid: BV1Jh411z7bY - cid: 376337035 -dashedName: conditional-execution ---- - -# --question-- - -## --text-- - -Which code is indented correctly to print "Yes" if x = 0 and y = 10? - -## --answers-- - -```python -if 0 == x: -if y == 10: -print("Yes") -``` - ---- - -```python -if 0 == x: - if y == 10: - print("Yes") -``` - ---- - -```python -if 0 == x: -if y == 10: - print("Yes") -``` - ---- - -```python -if 0 == x: - if y == 10: - print("Yes") -``` - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md deleted file mode 100644 index 133a570f303..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 5e7b9f6a0b6c005b0e76f097 -title: 'تصور البيانات: القوائم البريدية (Data Visualization: Mailing Lists)' -challengeType: 11 -videoId: RYdW660KkaQ -bilibiliIds: - aid: 334465586 - bvid: BV18w411R7dD - cid: 377545473 -dashedName: data-visualization-mailing-lists ---- - -# --description-- - -مزيد من الموارد: - -\- Exercise: Geodata - -\- Exercise: Gmane Model - -\- Exercise: Gmane Spider - -\- Exercise: Gmane Viz - -\- Exercise: Page Rank - -\- Exercise: Page Spider - -\- Exercise: Page Viz - -# --question-- - -## --text-- - -Which is a common JavaScript visualization library? - -## --answers-- - -DataViz.js - ---- - -D3 - ---- - -Lowcharts - ---- - -DATA6 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md deleted file mode 100644 index db4878ed822..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f6a0b6c005b0e76f096 -title: 'Data Visualization: Page Rank' -challengeType: 11 -videoId: 6-w_qIUwaxU -bilibiliIds: - aid: 376950472 - bvid: BV1ho4y1Q72u - cid: 377544599 -dashedName: data-visualization-page-rank ---- - -# --question-- - -## --text-- - -How does the PageRank algorithm work? - -## --answers-- - -It determines which pages are most highly connected. - ---- - -It ranks pages based on view counts. - ---- - -It figures out which pages contain the most important content. - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md deleted file mode 100644 index f01b3320828..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 5e7b9f0a0b6c005b0e76f069 -title: Dictionaries and Loops -challengeType: 11 -videoId: EEmekKiKG70 -bilibiliIds: - aid: 589401038 - bvid: BV1eq4y1X7xU - cid: 376387132 -dashedName: dictionaries-and-loops ---- - -# --description-- - -More resources: - -\- Exercise - -# --question-- - -## --text-- - -What will the following code print?: - -```python -counts = { 'chuck' : 1 , 'annie' : 42, 'jan': 100} -for key in counts: - if counts[key] > 10: - print(key, counts[key]) -``` - -## --answers-- - -
annie 42 -jan 100- ---- - -
chuck 1 -annie 42 -jan 100- ---- - -
chuck 1- ---- - -
[Error]- -## --video-solution-- - -1 diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md deleted file mode 100644 index aef8d142872..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f068 -title: 'Dictionaries: Common Applications' -challengeType: 11 -videoId: f17xPfIXct0 -bilibiliIds: - aid: 805747023 - bvid: BV1v34y1D7ug - cid: 414168867 -dashedName: dictionaries-common-applications ---- - -# --question-- - -## --text-- - -What will the following code print? - -```python -counts = { 'quincy' : 1 , 'mrugesh' : 42, 'beau': 100, '0': 10} -print(counts.get('kris', 0)) -``` - -## --answers-- - -2 - ---- - -quincy - ---- - -0 - ---- - -10 - ---- - -[will return error] - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md deleted file mode 100644 index 75d21cc8994..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f063 -title: Files as a Sequence -challengeType: 11 -videoId: cIA0EokbaHE -bilibiliIds: - aid: 974380307 - bvid: BV1p44y1m7br - cid: 376388846 -dashedName: files-as-a-sequence ---- - -# --description-- - -More resources: - -\- Exercise - -# --question-- - -## --text-- - -What does the word 'continue' do in the middle of a loop? - -## --answers-- - -Skips to the code directly after the loop. - ---- - -Skips to the next line in the code. - ---- - -Skips to the next iteration of the loop. - ---- - -Skips the next block of code. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md deleted file mode 100644 index d70a408080f..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f057 -title: Intermediate Expressions -challengeType: 11 -videoId: dKgUaIa5ATg -bilibiliIds: - aid: 334428894 - bvid: BV1uw411R7gH - cid: 376318468 -dashedName: intermediate-expressions ---- - -# --description-- - -More resources: - -\- Exercise 1 - -\- Exercise 2 - -# --question-- - -## --text-- - -What will print out after running this code: - -```python -width = 15 -height = 12.0 -print(height/3) -``` - -## --answers-- - -39 - ---- - -4 - ---- - -4.0 - ---- - -5.0 - ---- - -5 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md deleted file mode 100644 index c2bcadfe2b0..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f061 -title: Intermediate Strings -challengeType: 11 -videoId: KgT_fYLXnyk -bilibiliIds: - aid: 291983121 - bvid: BV1Zf4y157yG - cid: 376394116 -dashedName: intermediate-strings ---- - -# --description-- - -More resources: - -\- Exercise - -# --question-- - -## --text-- - -What is the value of i in the following code? - -```python -word = "bananana" -i = word.find("na") -``` - -## --answers-- - -nanana - ---- - -2 - ---- - -3 - ---- - -True - ---- - -na - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md deleted file mode 100644 index 8b4f0cda163..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -id: 5e6a54c358d3af90110a60a3 -title: 'Introduction: Elements of Python' -challengeType: 11 -videoId: aRY_xjL35v0 -bilibiliIds: - aid: 674420725 - bvid: BV1MU4y1H7Lj - cid: 376315889 -dashedName: introduction-elements-of-python ---- - -# --question-- - -## --text-- - -What will the following program print out: - -```python -x = 43 -x = x + 1 -print(x) -``` - -## --answers-- - -x - ---- - -x + 1 - ---- - -44 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md deleted file mode 100644 index ca70295ff28..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e6a54af58d3af90110a60a1 -title: 'Introduction: Hardware Architecture' -challengeType: 11 -videoId: H6qtjRTfSog -bilibiliIds: - aid: 206977572 - bvid: BV1zh411z7Ak - cid: 376199262 -dashedName: introduction-hardware-architecture ---- - -# --question-- - -## --text-- - -Where are your programs stored when they are running? - -## --answers-- - -Hard Drive. - ---- - -Memory. - ---- - -Central Processing Unit. - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md deleted file mode 100644 index a5d07b24723..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e6a54ba58d3af90110a60a2 -title: 'Introduction: Python as a Language' -challengeType: 11 -videoId: 0QeGbZNS_bY -bilibiliIds: - aid: 674404602 - bvid: BV1GU4y1H7vB - cid: 376315625 -dashedName: introduction-python-as-a-language ---- - -# --question-- - -## --text-- - -What will print out after running these two lines of code: - -```python -x = 6 -print(x) -``` - -## --answers-- - -x - ---- - -6 - ---- - -x = 6 - ---- - -(x) - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md deleted file mode 100644 index 0d33e12e8f9..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e6a54a558d3af90110a60a0 -title: 'Introduction: Why Program?' -challengeType: 11 -videoId: 3muQV-Im3Z0 -bilibiliIds: - aid: 206882253 - bvid: BV1Fh411z7tr - cid: 376314257 -videoLocaleIds: - espanol: 3muQV-Im3Z0 - italian: 3muQV-Im3Z0 - portuguese: 3muQV-Im3Z0 -dashedName: introduction-why-program ---- - -# --description-- - -More resources: - -\- Install Python on Windows - -\- Install Python on MacOS - -# --question-- - -## --text-- - -Who should learn to program? - -## --answers-- - -College students. - -### --feedback-- - -College students should learn to program, but there's a better answer. - ---- - -People who want to become software developers. - -### --feedback-- - -People who want to become software developers should learn to program, but there's a better answer. - ---- - -Everyone. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md deleted file mode 100644 index 7e1ed038bca..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05d -title: 'Iterations: Definite Loops' -challengeType: 11 -videoId: hiRTRAqNlpE -bilibiliIds: - aid: 291987032 - bvid: BV1ff4y157Q3 - cid: 376385255 -dashedName: iterations-definite-loops ---- - -# --question-- - -## --text-- - -How many lines will the following code print?: - -```python -for i in [2,1,5]: - print(i) -``` - -## --answers-- - -1 - ---- - -2 - ---- - -3 - ---- - -5 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md deleted file mode 100644 index 70a07c31848..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05e -title: 'Iterations: Loop Idioms' -challengeType: 11 -videoId: AelGAcoMXbI -bilibiliIds: - aid: 334491369 - bvid: BV1tw411R7Mm - cid: 376530765 -dashedName: iterations-loop-idioms ---- - -# --question-- - -## --text-- - -Below is code to find the smallest value from a list of values. One line has an error that will cause the code to not work as expected. Which line is it?: - -```python -smallest = None -print("Before:", smallest) -for itervar in [3, 41, 12, 9, 74, 15]: - if smallest is None or itervar < smallest: - smallest = itervar - break - print("Loop:", itervar, smallest) -print("Smallest:", smallest) -``` - -## --answers-- - -3 - ---- - -4 - ---- - -6 - ---- - -7 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md deleted file mode 100644 index d0c75d1cd52..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05f -title: 'Iterations: More Patterns' -challengeType: 11 -videoId: 9Wtqo6vha1M -bilibiliIds: - aid: 674492981 - bvid: BV1hU4y1H7tF - cid: 376531204 -dashedName: iterations-more-patterns ---- - -# --description-- - -More resources: - -\- Exercise - -# --question-- - -## --text-- - -Which of these evaluates to False? - -## --answers-- - -```python -0 == 0.0 -``` - ---- - -```python -0 is 0.0 -``` - ---- - -```python -0 is not 0.0 -``` - ---- - -```python -0 = 0.0 -``` - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md deleted file mode 100644 index 51ed9ff4dbc..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05c -title: Loops and Iterations -challengeType: 11 -videoId: dLA-szNRnUY -bilibiliIds: - aid: 674492981 - bvid: BV1hU4y1H7tF - cid: 376531204 -dashedName: loops-and-iterations ---- - -# --question-- - -## --text-- - -What will the following code print out?: - -```python -n = 0 -while True: - if n == 3: - break - print(n) - n = n + 1 -``` - -## --answers-- - -
0 -1 -2- ---- - -
0 -1 -2 -3- ---- - -
1 -2- ---- - -
1 -2 -3- -## --video-solution-- - -1 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md deleted file mode 100644 index 9fbd557d8d6..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f08b -title: Make a Relational Database -challengeType: 11 -videoId: MQ5z4bdF92U -bilibiliIds: - aid: 249380678 - bvid: BV1vv411E76L - cid: 377531786 -dashedName: make-a-relational-database ---- - -# --question-- - -## --text-- - -What SQL command would you use to retrieve all users that have the email address `quincy@freecodecamp.org`? - -## --answers-- - -```sql -SELECT Users WHERE email="quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT Users WHERE email IS "quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT ALL Users WHERE email="quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT * FROM Users WHERE email IS "quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT * FROM Users WHERE email="quincy@freecodecamp.org" -``` - -## --video-solution-- - -5 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md deleted file mode 100644 index 3ef5463b743..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f059 -title: More Conditional Structures -challengeType: 11 -videoId: HdL82tAZR20 -bilibiliIds: - aid: 631930118 - bvid: BV1Nb4y1r7z2 - cid: 376337449 -dashedName: more-conditional-structures ---- - -# --description-- - -More resources: - -\- Exercise 1 - -\- Exercise 2 - -# --question-- - -## --text-- - -Given the following code: - -```python -temp = "5 degrees" -cel = 0 -fahr = float(temp) -cel = (fahr - 32.0) * 5.0 / 9.0 -print(cel) -``` - -Which line/lines should be surrounded by `try` block? - -## --answers-- - -1 - ---- - -3 - ---- - -3,4 - ---- - -4 - ---- - -None - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md deleted file mode 100644 index 47d6d52de45..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f072 -title: Networking Protocol -challengeType: 11 -videoId: c6vZGescaSc -bilibiliIds: - aid: 931950996 - bvid: BV1cM4y1N7K6 - cid: 376388317 -dashedName: networking-protocol ---- - -# --question-- - -## --text-- - -What type of HTTP request is usually used to access a website? - -## --answers-- - -POST - ---- - -GET - ---- - -WEB - ---- - -ACCESS - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md deleted file mode 100644 index db73bd6e5f7..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f074 -title: 'Networking: Text Processing' -challengeType: 11 -videoId: Pv_pJgVu8WI -bilibiliIds: - aid: 804442498 - bvid: BV16y4y1j7WW - cid: 377329124 -dashedName: networking-text-processing ---- - -# --question-- - -## --text-- - -Which type of encoding do most websites use? - -## --answers-- - -UTF-8 - ---- - -UTF-16 - ---- - -UTF-32 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md deleted file mode 100644 index 1413e0471b4..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 5e7b9f0d0b6c005b0e76f075 -title: 'Networking: Using urllib in Python' -challengeType: 11 -videoId: 7lFM1T_CxBs -bilibiliIds: - aid: 546908270 - bvid: BV1Xq4y1H7e6 - cid: 377331524 -dashedName: networking-using-urllib-in-python ---- - -# --question-- - -## --text-- - -What will the output of the following code be like?: - -```python -import urllib.request -fhand = urllib.request.urlopen('http://data.pr4e.org/romeo.txt') -for line in fhand: - print(line.decode().strip()) -``` - -## --answers-- - -Just contents of "romeo.txt". - ---- - -A header and the contents of "romeo.txt". - ---- - -A header, a footer, and the contents of "romeo.txt". - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md deleted file mode 100644 index 2d1fb18d938..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f0d0b6c005b0e76f076 -title: 'Networking: Web Scraping with Python' -challengeType: 11 -videoId: Uyioq2q4cEg -bilibiliIds: - aid: 674382625 - bvid: BV1oU4y1n7zQ - cid: 377331774 -dashedName: networking-web-scraping-with-python ---- - -# --description-- - -More resources: - -\- Exercise: socket1 - -\- Exercise: urllib - -\- Exercise: urllinks - -# --question-- - -## --text-- - -What Python library is used for parsing HTML documents and extracting data from HTML documents? - -## --answers-- - -socket - ---- - -http - ---- - -BeautifulSoup - ---- - -PrettyBiscuit - ---- - -WonderfulSalad - ---- - -HttpParser - ---- - -GrunkleStan - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md deleted file mode 100644 index f21045dff29..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f071 -title: Networking with Python -challengeType: 11 -videoId: _kJvneKVdNM -bilibiliIds: - aid: 419494612 - bvid: BV1r341167jT - cid: 376385858 -dashedName: networking-with-python ---- - -# --question-- - -## --text-- - -What Python library gives access to TCP Sockets? - -## --answers-- - -tcp - ---- - -socket - ---- - -http - ---- - -port - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md deleted file mode 100644 index e8127560b52..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f073 -title: 'Networking: Write a Web Browser' -challengeType: 11 -videoId: zjyT9DaAjx4 -bilibiliIds: - aid: 761908574 - bvid: BV1j64y1x7wx - cid: 377319579 -dashedName: networking-write-a-web-browser ---- - -# --question-- - -## --text-- - -What does the following code create?: - -```py -import socket - -mysock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) -mysock.connect(('data.pr4e.org', 80)) -cmd = 'GET http://data.pr4e.org/romeo.txt HTTP/1.0\r\n\r\n'.encode() -mysock.send(cmd) - -while True: - data = mysock.recv(512) - if len(data) < 1: - break - print(data.decode(),end='') -mysock.close() -``` - -## --answers-- - -A simple web server. - ---- - -A simple email client. - ---- - -A simple todo list. - ---- - -A simple web browser. - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md deleted file mode 100644 index be8ff0ffce1..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f087 -title: Object Lifecycle -challengeType: 11 -videoId: p1r3h_AMMIM -bilibiliIds: - aid: 461998717 - bvid: BV1JL411n7Hr - cid: 377529681 -dashedName: object-lifecycle ---- - -# --question-- - -## --text-- - -What will the following program print?: - -```python -class PartyAnimal: - x = 0 - name = '' - def __init__(self, nam): - self.name = nam - print(self.name,'constructed') - def party(self): - self.x = self.x + 1 - print(self.name,'party count',self.x) - -q = PartyAnimal('Quincy') -m = PartyAnimal('Miya') - -q.party() -m.party() -q.party() -``` - -## --answers-- - -
-Quincy constructed -Miya constructed -Quincy party count 1 -Miya party count 2 -Quincy party count 3 -- ---- - -
-Quincy constructed -Miya constructed -Quincy party count 1 -Miya party count 1 -Quincy party count 2 -- ---- - -
-Quincy constructed -Quincy party count 1 -Quincy party count 2 -Miya constructed -Miya party count 1 -- -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md deleted file mode 100644 index 956ee3e10ff..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -id: 5e7b9f160b6c005b0e76f086 -title: 'Objects: A Sample Class' -challengeType: 11 -videoId: FiABKEuaSJ8 -bilibiliIds: - aid: 589451777 - bvid: BV1rq4y1X7TG - cid: 377523194 -dashedName: objects-a-sample-class ---- - -# --question-- - -## --text-- - -What will the following program print?: - -```python -class PartyAnimal: - x = 0 - def party(self): - self.x = self.x + 2 - print(self.x) - -an = PartyAnimal() -an.party() -an.party() -``` - -## --answers-- - -
-So far 1 -So far 2 -- ---- - -
-0 -0 -- ---- - -
-2 -2 -- ---- - -
-2 -4 -- -## --video-solution-- - -4 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md deleted file mode 100644 index 285061db3ac..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f088 -title: 'Objects: Inheritance' -challengeType: 11 -videoId: FBL3alYrxRM -bilibiliIds: - aid: 631990691 - bvid: BV1sb4y1r7GF - cid: 377529901 -dashedName: objects-inheritance ---- - -# --question-- - -## --text-- - -What is inheritance in object-oriented programming? - -## --answers-- - -A new class created when a parent class is extended. - ---- - -A constructed instance of a class. - ---- - -The ability to create a new class by extending an existing class. - ---- - -A method that is called at the moment when a class is being used to construct an object. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md deleted file mode 100644 index 962ec931113..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f067 -title: Python Dictionaries -challengeType: 11 -videoId: dnzvfimrRMg -bilibiliIds: - aid: 631893305 - bvid: BV19b4y167kj - cid: 376386176 -dashedName: python-dictionaries ---- - -# --question-- - -## --text-- - -What does dict equal after running this code?: - -```python -dict = {"Fri": 20, "Thu": 6, "Sat": 1} -dict["Thu"] = 13 -dict["Sat"] = 2 -dict["Sun"] = 9 -``` - -## --answers-- - -```python -{'Fri': 20, 'Thu': 6, 'Sat': 1} -``` - ---- - -```python -{'Fri': 20, 'Thu': 6, 'Sat': 1, 'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - ---- - -```python -{'Sun': 9} -``` - ---- - -```python -{'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - ---- - -```python -{'Fri': 20, 'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - -## --video-solution-- - -5 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-functions.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-functions.md deleted file mode 100644 index 3b5ea72b3c7..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-functions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05a -title: Python Functions -challengeType: 11 -videoId: 3JGF-n3tDPU -bilibiliIds: - aid: 631881917 - bvid: BV1Xb4y167P4 - cid: 376337920 -dashedName: python-functions ---- - -# --question-- - -## --text-- - -What is the purpose of the "def" keyword in Python? - -## --answers-- - -It is slang that means "The following code is really cool." - ---- - -It indicates the start of a function. - ---- - -It indicates that the following indented section of code is to be stored for later. - ---- - -It indicates the start of a function, and the following indented section of code is to be stored for later. - ---- - -None of the above. - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-lists.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-lists.md deleted file mode 100644 index 4266a29a5e0..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-lists.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f064 -title: Python Lists -challengeType: 11 -videoId: Y0cvfDpYC_c -bilibiliIds: - aid: 249460305 - bvid: BV1Dv411E7Uj - cid: 376532993 -dashedName: python-lists ---- - -# --question-- - -## --text-- - -What is the value of x after running this code: - -```python -fruit = "banana" -x = fruit[1] -``` - -## --answers-- - -banana - ---- - -a - ---- - -b - ---- - -True - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-objects.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-objects.md deleted file mode 100644 index 6e8ed9b8c55..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-objects.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f160b6c005b0e76f085 -title: Python Objects -challengeType: 11 -videoId: uJxGeTYy0us -bilibiliIds: - aid: 889496260 - bvid: BV1ZP4y1s7G6 - cid: 377522762 -dashedName: python-objects ---- - -# --question-- - -## --text-- - -Which is NOT true about objects in Python? - -## --answers-- - -Objects get created and used. - ---- - -Objects are bits of code and data. - ---- - -Objects hide detail. - ---- - -Objects are one of the five standard data types. - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/reading-files.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/reading-files.md deleted file mode 100644 index c4cc75d8e4d..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/reading-files.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f062 -title: Reading Files -challengeType: 11 -videoId: Fo1tW09KIwo -bilibiliIds: - aid: 334439927 - bvid: BV1pw411R7UK - cid: 376532076 -dashedName: reading-files ---- - -# --question-- - -## --text-- - -What is used to indicate a new line in a string? - -## --answers-- - -\\n - ---- - -{new_line} - ---- - -{n} - ---- - -/n - ---- - -/new - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md deleted file mode 100644 index 2426a907099..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06f -title: 'Regular Expressions: Matching and Extracting Data' -challengeType: 11 -videoId: LaCZnTbQGkE -bilibiliIds: - aid: 975629041 - bvid: BV1i44y1b7hE - cid: 414167130 -dashedName: regular-expressions-matching-and-extracting-data ---- - -# --question-- - -## --text-- - -What will the following program print?: - -```python -import re -s = 'A message from csev@umich.edu to cwen@iupui.edu about meeting @2PM' -lst = re.findall('\\S+@\\S+', s) -print(lst) -``` - -## --answers-- - -['csev@umich.edu', 'cwen@iupui.edu'] - ---- - -['csev@umich.edu'] - ---- - -['umich.edu', 'iupui.edu'] - ---- - -['csev@', 'cwen@'] - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md deleted file mode 100644 index 865668ab710..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f070 -title: 'Regular Expressions: Practical Applications' -challengeType: 11 -videoId: xCjFU9G6x48 -bilibiliIds: - aid: 546924659 - bvid: BV1mq4y1H7rZ - cid: 376386493 -dashedName: regular-expressions-practical-applications ---- - -# --question-- - -## --text-- - -What will search for a "$" in a regular expression? - -## --answers-- - -$ - ---- - -\\dollar\\ - ---- - -\\$ - ---- - -!$ - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md deleted file mode 100644 index d48b4942469..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06e -title: Regular Expressions -challengeType: 11 -videoId: Yud_COr6pZo -bilibiliIds: - aid: 759422542 - bvid: BV1W64y167YD - cid: 376387549 -dashedName: regular-expressions ---- - -# --question-- - -## --text-- - -Which regex matches only a white space character? - -## --answers-- - -\\S - ---- - -\\s - ---- - -. - ---- - -\_ - ---- - -\\. - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md deleted file mode 100644 index d891951cb05..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08c -title: Relational Database Design -challengeType: 11 -videoId: AqdfbrpkbHk -bilibiliIds: - aid: 504388066 - bvid: BV1Qg411j742 - cid: 377532216 -dashedName: relational-database-design ---- - -# --question-- - -## --text-- - -What is the best practice for how many times a piece of string data should be stored in a database? - -## --answers-- - -0 - ---- - -1 - ---- - -2 - ---- - -3 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md deleted file mode 100644 index a7c898a3d22..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f08a -title: Relational Databases and SQLite -challengeType: 11 -videoId: QlNod5-kFpA -bilibiliIds: - aid: 249449958 - bvid: BV12v411E74H - cid: 377530805 -dashedName: relational-databases-and-sqlite ---- - -# --description-- - -Download SQLite -Download DB Browser for SQLite -SQLite usage - -# --question-- - -## --text-- - -Which is NOT a primary data structure in a database? - -## --answers-- - -index - ---- - -table - ---- - -row - ---- - -column - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md deleted file mode 100644 index 85f34ae6128..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08f -title: 'Relational Databases: Join Operation' -challengeType: 11 -videoId: jvDw3D9GKac -bilibiliIds: - aid: 804461215 - bvid: BV1Ry4y1j7tv - cid: 377542880 -dashedName: relational-databases-join-operation ---- - -# --question-- - -## --text-- - -When using a JOIN clause in an SQL statement, what does ON do? - -## --answers-- - -It indicates what tables to perform the JOIN on. - ---- - -It specifies the fields to use for the JOIN. - ---- - -It indicates how the two tables are to be joined. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md deleted file mode 100644 index 53b73ce222b..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f190b6c005b0e76f090 -title: 'Relational Databases: Many-to-many Relationships' -challengeType: 11 -videoId: z-SBYcvEQOc -bilibiliIds: - aid: 291965127 - bvid: BV1Af4y1L7BK - cid: 377543409 -dashedName: relational-databases-many-to-many-relationships ---- - -# --description-- - -More resources: - -\- Exercise: Email - -\- Exercise: Roster - -\- Exercise: Tracks - -\- Exercise: Twfriends - -\- Exercise: Twspider - -# --question-- - -## --text-- - -Which is an example of a many-to-many relationship? - -## --answers-- - -teacher to student - ---- - -customer to order - ---- - -book to pages - ---- - -city to country - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md deleted file mode 100644 index b9d6049238e..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08e -title: 'Relational Databases: Relationship Building' -challengeType: 11 -videoId: CSbqczsHVnc -bilibiliIds: - aid: 376996473 - bvid: BV1jo4y1S7VY - cid: 377532966 -dashedName: relational-databases-relationship-building ---- - -# --question-- - -## --text-- - -What does the INSERT command do in SQL? - -## --answers-- - -It defines a new row by listing the fields we want to include followed by the values we want placed in the new row. - ---- - -It defines a new column by listing the rows we want to include followed by the values we want placed in the new column. - ---- - -It defines a new table by listing the rows and fields we want to include followed by the values that we want placed in the table. - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md deleted file mode 100644 index 0d5729bb07a..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08d -title: Representing Relationships in a Relational Database -challengeType: 11 -videoId: '-orenCNdC2Q' -bilibiliIds: - aid: 931953070 - bvid: BV1FM4y1N7hc - cid: 377532529 -dashedName: representing-relationships-in-a-relational-database ---- - -# --question-- - -## --text-- - -What is a foreign key? - -## --answers-- - -A key that is not supposed to be there. - ---- - -A key that uses non-latin characters. - ---- - -A number that points to the primary key of an associated row in a different table. - ---- - -A key that the "real world" might use to look up a row. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md deleted file mode 100644 index 9ba1ca3e9c8..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f066 -title: Strings and Lists -challengeType: 11 -videoId: lxcFa7ldCi0 -bilibiliIds: - aid: 804401443 - bvid: BV1By4y1j7F9 - cid: 376385517 -dashedName: strings-and-lists ---- - -# --description-- - -More resources: - -\- Exercise - -# --question-- - -## --text-- - -What does n equal in this code? - -```python -words = 'His e-mail is q-lar@freecodecamp.org' -pieces = words.split() -parts = pieces[3].split('-') -n = parts[1] -``` - -## --answers-- - -mail - ---- - -q - ---- - -lar - ---- - -`lar@freecodecamp.org` - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md deleted file mode 100644 index 25d7a36267e..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f060 -title: Strings in Python -challengeType: 11 -videoId: LYZj207fKpQ -bilibiliIds: - aid: 504434218 - bvid: BV1Lg41177s8 - cid: 376531802 -dashedName: strings-in-python ---- - -# --question-- - -## --text-- - -What will the following code print?: - -```python -for n in "banana": - print(n) -``` - -## --answers-- - -
-n -n -- ---- - -
-0 -1 -- ---- - -
-0 -1 -2 -3 -4 -5 -- ---- - -
-b -a -n -a -n -a -- -## --video-solution-- - -4 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md deleted file mode 100644 index a5bdb4ead0d..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5e7b9f0a0b6c005b0e76f06c -title: The Tuples Collection -challengeType: 11 -videoId: 3Lxpladfh2k -bilibiliIds: - aid: 334468209 - bvid: BV1aw411R77G - cid: 376533308 -dashedName: the-tuples-collection ---- - -# --question-- - -## --text-- - -What will the following code print?: - -```python -d = dict() -d['quincy'] = 1 -d['beau'] = 5 -d['kris'] = 9 -for (k,i) in d.items(): - print(k, i) -``` - -## --answers-- - -
-k i -k i -k i -- ---- - -
-quincy 0 -beau 1 -kris 2 -- ---- - -
-quincy 1 -beau 5 -kris 9 -- ---- - -
-1 quincy -5 beau -9 kris -- -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/using-web-services.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/using-web-services.md deleted file mode 100644 index efde4ee7116..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/using-web-services.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07a -title: Using Web Services -challengeType: 11 -videoId: oNl1OVDPGKE -bilibiliIds: - aid: 759406136 - bvid: BV1b64y16746 - cid: 377332189 -dashedName: using-web-services ---- - -# --question-- - -## --text-- - -What are the two most common ways to send data over the internet? - -## --answers-- - -JSON and TXT - ---- - -JSON and XML - ---- - -XML and TXT - ---- - -XML and PHP - ---- - -PHP and TXT - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md deleted file mode 100644 index 09fc7f3864e..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f056 -title: 'Variables, Expressions, and Statements' -challengeType: 11 -videoId: nELR-uyyrok -bilibiliIds: - aid: 419396811 - bvid: BV1iV411p7Mn - cid: 376318116 -dashedName: variables-expressions-and-statements ---- - -# --question-- - -## --text-- - -What is the symbol used in an assignment statement? - -## --answers-- - -~ - ---- - -& - ---- - -= - ---- - -\| - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md deleted file mode 100644 index 31853c7188d..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f690b6c005b0e76f095 -title: Visualizing Data with Python -challengeType: 11 -videoId: e3lydkH0prw -bilibiliIds: - aid: 291996462 - bvid: BV15f4y1L7jH - cid: 377544192 -dashedName: visualizing-data-with-python ---- - -# --question-- - -## --text-- - -Most data needs to be \_\_\_\_\_\_ before using it. - -## --answers-- - -converted to JSON format - ---- - -graphed - ---- - -cleaned - ---- - -memorized - ---- - -turned into song - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md deleted file mode 100644 index 53f2e714cae..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 5e7b9f150b6c005b0e76f080 -title: 'Web Services: API Rate Limiting and Security' -challengeType: 11 -videoId: pI-g0lI8ngs -bilibiliIds: - aid: 249456172 - bvid: BV1Sv411E7qa - cid: 377336269 -dashedName: web-services-api-rate-limiting-and-security ---- - -# --description-- - -More resources: - -\- Exercise: GeoJSON - -\- Exercise: JSON - -\- Exercise: Twitter - -\- Exercise: XML - -# --question-- - -## --text-- - -When making a request from the Twitter API, what information must always be sent with the request? - -## --answers-- - -Twitter username - ---- - -date range - ---- - -search term - ---- - -key - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md deleted file mode 100644 index 64d89a2f9c9..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f150b6c005b0e76f07f -title: 'Web Services: APIs' -challengeType: 11 -videoId: oUNn1psfBJg -bilibiliIds: - aid: 589451017 - bvid: BV1zq4y1X7A9 - cid: 377336011 -dashedName: web-services-apis ---- - -# --question-- - -## --text-- - -What does API stand for? - -## --answers-- - -Application Portable Intelligence - ---- - -Associate Programming International - ---- - -Application Program Interface - ---- - -Action Portable Interface - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-json.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-json.md deleted file mode 100644 index 9716520ee1b..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-json.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f140b6c005b0e76f07d -title: 'Web Services: JSON' -challengeType: 11 -videoId: ZJE-U56BppM -bilibiliIds: - aid: 419491911 - bvid: BV1r3411672w - cid: 377332928 -dashedName: web-services-json ---- - -# --question-- - -## --text-- - -What will the following code print?: - -```python -import json -data = ''' - [ - { "id" : "001", - "x" : "2", - "name" : "Quincy" - } , - { "id" : "009", - "x" : "7", - "name" : "Mrugesh" - } - ] -''' -info = json.loads(data) -print(info[1]['name']) -``` - -## --answers-- - -Quincy - ---- - -Mrugesh - ---- - -001 - ---- - -009 - ---- - -[Error] - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md deleted file mode 100644 index e246a3b48ff..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f140b6c005b0e76f07e -title: 'Web Services: Service Oriented Approach' -challengeType: 11 -videoId: muerlsCHExI -bilibiliIds: - aid: 846899335 - bvid: BV1E54y1J7oz - cid: 377333277 -dashedName: web-services-service-oriented-approach ---- - -# --question-- - -## --text-- - -With a services oriented approach to developing web apps, where is the data located? - -## --answers-- - -Spread across many computer systems connected via the internet or internal network. - ---- - -Within different services on the main web server. - ---- - -On a separate database server. - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md deleted file mode 100644 index 585ea239633..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07c -title: 'Web Services: XML Schema' -challengeType: 11 -videoId: yWU9kTxW-nc -bilibiliIds: - aid: 631951466 - bvid: BV1Vb4y1r7m7 - cid: 377332603 -dashedName: web-services-xml-schema ---- - -# --question-- - -## --text-- - -What is XSD? - -## --answers-- - -The W3C Schema specification for XML. - ---- - -The standard JSON schema from MOZ. - ---- - -Extensible Situational Driver - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md deleted file mode 100644 index 226d773ca77..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07b -title: 'Web Services: XML' -challengeType: 11 -videoId: _pZ0srbg7So -bilibiliIds: - aid: 761920032 - bvid: BV1n64y1x7KW - cid: 377332379 -dashedName: web-services-xml ---- - -# --question-- - -## --text-- - -What is wrong with the following XML?: - -```xml -
css flexbox photo gallery
-
- 
- 
- 
- 
- 
- 
- 
- 
- 
-
-
-
-```
-
-```css
-* {
- box-sizing: border-box;
-}
-
-body {
- margin: 0;
- font-family: sans-serif;
- background: #f5f6f7;
-}
-
-.header {
- text-align: center;
- text-transform: uppercase;
- padding: 32px;
- background-color: #0a0a23;
- color: #fff;
- border-bottom: 4px solid #fdb347;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-.gallery img {
- width: 100%;
- max-width: 350px;
- height: 300px;
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md
deleted file mode 100644
index 8dc14b62c09..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md
+++ /dev/null
@@ -1,112 +0,0 @@
----
-id: 60b69a66b6ddb80858c51578
-title: الخطوة 1
-challengeType: 0
-dashedName: step-1
----
-
-# --description--
-
-ابدأ بإعداد بنية HTML الخاصة بك. قم بإضافة تعريف `` وعنصر `html` مع سمة `lang` تم تعيينها إلى `en`. ضمن عنصر `html` أضف عنصر `head` وعنصر `body`.
-
-# --hints--
-
-يجب أن يحتوي الكود الخاص بك على `DOCTYPE`.
-
-```js
-assert(code.match(/` بعد تحديد النوع.
-
-```js
-assert(code.match(/html\s*>/gi));
-```
-
-يجب أن يكون تعريف `DOCTYPE` في بداية HTML الخاص بك.
-
-```js
-assert(__helpers.removeHtmlComments(code).match(/^\s*/i));
-```
-
-يجب أن يحتوي عنصر `html` الخاص بك على علامة افتتاحية مع سمة `lang` بقيمة `en`
-
-```js
-assert(code.match(/
-
-
-
-
-
-
-
-
-
- --fcc-editable-region--
-
- --fcc-editable-region--
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md
deleted file mode 100644
index 4a4ab125d94..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md
+++ /dev/null
@@ -1,84 +0,0 @@
----
-id: 60b69a66b6ddb80858c51583
-title: الخطوة 13
-challengeType: 0
-dashedName: step-13
----
-
-# --description--
-
-قم بإنشاء أربعة عناصر `div` داخل عنصر`offwhite-character` الخاص بك. اعطي تلك العناصر `div` قيم `id` التالية، بالترتيب: `white-hat` و `black-mask` و `gray-instrument` و `tan-table`.
-
-# --hints--
-
-يجب عليك إضافة أربعة عناصر `div` ضمن عنصر `.offwhite-character` الخاص بك.
-
-```js
-assert(document.querySelectorAll('#offwhite-character div').length === 4);
-```
-
-يجب أن يحتوي العنصر `div` الجديد على `id` بقيمة `white-hat`.
-
-```js
-assert(document.querySelectorAll('#offwhite-character div')[0]?.getAttribute('id') === 'white-hat');
-```
-
-يجب أن يحتوي عنصر `div` الجديد الثاني على `id` بقيمة `black-mask`.
-
-```js
-assert(document.querySelectorAll('#offwhite-character div')[1]?.getAttribute('id') === 'black-mask');
-```
-
-عنصر `div` الجديد الثالث الخاص بك يجب أن يحتوي على `id` بقيمة `gray-instrument`.
-
-```js
-assert(document.querySelectorAll('#offwhite-character div')[2]?.getAttribute('id') === 'gray-instrument');
-```
-
-عنصر `div` الجديد الرابع يجب أن يحتوي على `id` بقيمة `tan-table`.
-
-```js
-assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id') === 'tan-table');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md
deleted file mode 100644
index 44ad086484f..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md
+++ /dev/null
@@ -1,79 +0,0 @@
----
-id: 60b69a66b6ddb80858c51584
-title: الخطوة 14
-challengeType: 0
-dashedName: step-14
----
-
-# --description--
-
-هذه الشخصية تحتاج إلى عينين. أنشئ عنصرين `div` في عنصر `#black-mask`. اعطيهم الـ classes الآتية `eyes left` و `eyes right`، بذلك الترتيب.
-
-# --hints--
-
-يجب عليك إنشاء عنصرين `div` ضمن عنصر `#black-mask` الخاص بك.
-
-```js
-assert(document.querySelectorAll('#black-mask div').length === 2);
-```
-
-يجب أن تحتوي أول `div` جديدة على `eyes` و `left`.
-
-```js
-assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('eyes'));
-assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('left'));
-```
-
-يجب أن تحتوي ثاني `div` جديدة على classes تدعي `eyes` و `right`.
-
-```js
-assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('eyes'));
-assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('right'));
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
- --fcc-editable-region--
-
- --fcc-editable-region--
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md
deleted file mode 100644
index e4804032c22..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-id: 60b69a66b6ddb80858c51585
-title: الخطوة 15
-challengeType: 0
-dashedName: step-15
----
-
-# --description--
-
-قم بإنشاء بعض "النقاط" للجهاز (instrument). أضف خمس عناصر `div` داخل عنصرك `#gray-instrument`. قم بتعيين `class` كل منهما إلى `black-dot`.
-
-# --hints--
-
-يجب أن يكون لديك خمسة عناصر `div` جديدة داخل عنصر `#gray-instrument` الخاص بك.
-
-```js
-assert(document.querySelectorAll('#gray-instrument div').length === 5);
-```
-
-يجب أن تحتوي عناصر `div` الخمسة الخاصة بك على الـ classes الآتية `black-dot`.
-
-```js
-assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
- --fcc-editable-region--
-
- --fcc-editable-region--
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md
deleted file mode 100644
index 84c26b6197d..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md
+++ /dev/null
@@ -1,93 +0,0 @@
----
-id: 60b69a66b6ddb80858c51586
-title: الخطوة 16
-challengeType: 0
-dashedName: step-16
----
-
-# --description--
-
-استخدم محدد معرف (id selector) لإنشاء قاعدة تستهدف عنصر يحتوي على معرف (id) يسمى `offwhite-character`. أعطيه `width` بقيمة `300px`،و `height` بقيمة `550px`، و `background-color` بقيمة `GhostWhite`.
-
-# --hints--
-
-يجب عليك استخدام منتقي `#offwhite-character`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character'));
-```
-
-يجب أن يكون لـ `#offwhite-character` الخاص بك خاصية `width` بقيمة `300px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.width === '300px');
-```
-
-يجب أن يكون لـ `#offwhite-character` الخاص بك خاصية `height` بقيمة `550px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.height === '550px');
-```
-
-يجب أن يحتوي `#offwhite-character` على خاصية `background-color` تم تعيينها إلى `GhostWhite`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgroundColor === 'ghostwhite');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region--
-
- --fcc-editable-region--
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md
deleted file mode 100644
index cca3572b53e..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-id: 60b69a66b6ddb80858c51587
-title: الخطوة 17
-challengeType: 0
-dashedName: step-17
----
-
-# --description--
-
-أنقل `#offwhite-character` إلى مكانه بواسطة إعطائه `position` بقيمة `absolute` و `top` بقيمة `20%` و `left` بقيمة `17.5%`.
-
-# --hints--
-
-يجب أن يكون لمنتقي `#offwhite-character` الخاص بك خاصية `position` بقيمة `absolute`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.position === 'absolute');
-```
-
-يجب أن يحتوي منتقي `#offwhite-character` على خاصية `top` بقيمة `20%`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.top === '20%');
-```
-
-يجب أن يحتوي منتقي `#offwhite-character` على خاصية `left` بقيمة `17.5%`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left === '17.5%');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md
deleted file mode 100644
index d82b2ee629e..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md
+++ /dev/null
@@ -1,102 +0,0 @@
----
-id: 60b69a66b6ddb80858c51588
-title: الخطوة 18
-challengeType: 0
-dashedName: step-18
----
-
-# --description--
-
-باستخدام منتقي معرف (id selector)، صمم العنصر مع معرف (id) يسمى `white-hat`. أعطيه `width` و `height` بقيمة `0`، و `border-style` بقيمة `solid`.
-
-# --hints--
-
-يجب عليك استخدام منتقي `#white-hat`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#white-hat'));
-```
-
-يجب أن يكون لمنتقي `#white-hat` الخاص بك الخاصية `width` بقيمة `0`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.width === '0px');
-```
-
-يجب أن يكون لمنتقي `#white-hat` الخاص بك الخاصية `height` بقيمة `0`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.height === '0px');
-```
-
-يجب أن يكون لمنتقي `#white-hat` الخاص بك الخاصية `border-style` بقيمة `solid`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === 'solid');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md
deleted file mode 100644
index 89b5a3d41ac..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md
+++ /dev/null
@@ -1,88 +0,0 @@
----
-id: 60b69a66b6ddb80858c51589
-title: الخطوة 19
-challengeType: 0
-dashedName: step-19
----
-
-# --description--
-
-هذا لا يبدو صحيحا. قم بتعيين `border-width` الى `0 120px 140px 180px` لتحديد حجم القبعة (hat) بشكل صحيح.
-
-# --hints--
-
-يجب أن يكون لمنتقي `#white-hat` الخاص بك خاصية `border-width` بقيمة `0 120px 140px 180px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '0px 120px 140px 180px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md
deleted file mode 100644
index 7392e2477c1..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md
+++ /dev/null
@@ -1,107 +0,0 @@
----
-id: 60b69a66b6ddb80858c5158a
-title: الخطوة 20
-challengeType: 0
-dashedName: step-20
----
-
-# --description--
-
-الآن لديك صندوق كبير. إعطائه `border-top-color`, و`border-right-color`, و`border-left-color` من `transparent`. عيّن `border-bottom-color` إلى `GhostWhite`. وهذا سيجعلها تبدو أشبه بالقبعة.
-
-# --hints--
-
-يجب يحمل منتقيك `#white-hat` خاصية `border-top-color` بقيمة `transparent`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderTopColor === 'transparent');
-```
-
-يجب يحمل منتقيك `#white-hat` خاصية `border-right-color` بقيمة `transparent`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderRightColor === 'transparent');
-```
-
-يجب يحمل منتقيك `#white-hat` خاصية `border-left-color` بقيمة `transparent`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderLeftColor === 'transparent');
-```
-
-يجب يحمل منتقيك `#white-hat` خاصية `border-bottom-color` بقيمة `GhostWhite`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor === 'ghostwhite');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md
deleted file mode 100644
index d82aae312c7..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md
+++ /dev/null
@@ -1,105 +0,0 @@
----
-id: 60b69a66b6ddb80858c5158b
-title: الخطوة 21
-challengeType: 0
-dashedName: step-21
----
-
-# --description--
-
-أعطي القبعة `position` بقيمة `absolute`، و`top` بقيمة `-140px`، و `left` بقيمة `0`.
-
-# --hints--
-
-يجب أن يحتوي منتقيك `#white-hat` على خاصية `position` بقيمة `absolute`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.position === 'absolute');
-```
-
-يجب أن يحتوي منتقيك `#white-hat` الخاصية `top` بقيمة `-140px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.top === '-140px');
-```
-
-يجب يحمل منتقيك `#white-hat` خاصية `left` بقيمة `0`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md
deleted file mode 100644
index 0f9a51263e2..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md
+++ /dev/null
@@ -1,116 +0,0 @@
----
-id: 60b69a66b6ddb80858c5158c
-title: الخطوة 22
-challengeType: 0
-dashedName: step-22
----
-
-# --description--
-
-استخدم محدد معرف (id selector) لإنشاء قاعدة تستهدف عنصر يحتوي على معرف (id) يسمى `black-mask`. أعطيه `width` بقيمة `100%`، و `height` بقيمة `50px`، و `background-color` بقيمة `rgb(45, 31, 19)`.
-
-# --hints--
-
-يجب أن يكون لديك منتقي `#black-mask`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-mask'));
-```
-
-يجب أن يحتوي منتقيك `#black-mask` على خاصية `width` بقيمة `100%`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.width === '100%');
-```
-
-يجب أن يحتوي منتقيك `#black-mask` على خاصية `height` بقيمة `50px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.height === '50px');
-```
-
-يجب أن يحتوي منتقي `#black-mask` على خاصية `background-color` بقيمة `rgb(45, 31, 19)`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor === 'rgb(45, 31, 19)');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md
deleted file mode 100644
index 6816cd8a9b1..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-id: 60b69a66b6ddb80858c5158d
-title: الخطوة 23
-challengeType: 0
-dashedName: step-23
----
-
-# --description--
-
-اعطي قناع `position` بقيمة `absolute`، و`top` و`left` بقيمة `0`.
-
-# --hints--
-
-يجب أن يكون لمنتقي `#black-mask` الخاص بك خاصية `position` بقيمة `absolute`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.position === 'absolute');
-```
-
-يجب أن يحتوي منتقي `#black-mask` الخاص بك على خاصية `top` بقيمة `0`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.top === '0px');
-```
-
-يجب أن يحتوي منتقي `#black-mask` الخاص بك على خاصية `left` بقيمة `0`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md
deleted file mode 100644
index a467e4f6e88..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md
+++ /dev/null
@@ -1,105 +0,0 @@
----
-id: 60b69a66b6ddb80858c5158e
-title: الخطوة 24
-challengeType: 0
-dashedName: step-24
----
-
-# --description--
-
-للتأكد من أنك تستطيع رؤية الأقنعة (mask)، قم بإعطائه `z-index` بقيمة `1`.
-
-# --hints--
-
-يجب أن يحتوي منتقي `#black-mask` على خاصية `z-index` بقيمة `1`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md
deleted file mode 100644
index 54a0c86a751..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md
+++ /dev/null
@@ -1,126 +0,0 @@
----
-id: 60b69a66b6ddb80858c5158f
-title: الخطوة 25
-challengeType: 0
-dashedName: step-25
----
-
-# --description--
-
-باستعمال منتقي معرف (id selector), اعطي عنصر الذي يحتوي على معرف (id) يسمى `gray-instrument` خاصية `width` بقيمة `15%`، و`height` بقيمة `40%`، و `background-color` بقيمة `rgb(167, 162, 117)`.
-
-# --hints--
-
-يجب أن يكون لديك منتقي `#gray-instrument`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument'));
-```
-
-يجب أن يحتوي منتقيك `#gray-instrument` على خاصية `width` بقيمة `15%`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.width === '15%');
-```
-
-يجب أن يحتوي منتقيك `#gray-instrument` على خاصية `height` بقيمة `40%`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.height === '40%');
-```
-
-يجب أن يحتوي منتقي `#gray-instrument` على خاصية `background-color` بقيمة `rgb(167, 162, 117)`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundColor === 'rgb(167, 162, 117)');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md
deleted file mode 100644
index b905d1c14eb..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md
+++ /dev/null
@@ -1,124 +0,0 @@
----
-id: 60b69a66b6ddb80858c51590
-title: الخطوة 26
-challengeType: 0
-dashedName: step-26
----
-
-# --description--
-
-الآن انقله إلى مكانه باستخدام `position` بقيمة `absolute` و `top` بقيمة `50px` و `left` بقيمة `125px`.
-
-# --hints--
-
-يجب أن يكون لمنتقي `#gray-instrument` الخاص بك خاصية `position` بقيمة `absolute`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.position === 'absolute');
-```
-
-يجب أن يكون لمنتقي `#gray-instrument` الخاص بك خاصية `top` بقيمة `50px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.top === '50px');
-```
-
-يجب أن يكون لمنتقي `#gray-instrument` الخاص بك خاصية `left` بقيمة `125px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '125px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md
deleted file mode 100644
index 341ef635948..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md
+++ /dev/null
@@ -1,115 +0,0 @@
----
-id: 60b69a66b6ddb80858c51591
-title: الخطوة 27
-challengeType: 0
-dashedName: step-27
----
-
-# --description--
-
-عيّن `z-index` إلى `1`.
-
-# --hints--
-
-يجب أن يحتوي منتقيك `#gray-instrument` على خاصية `z-index` بقيمة `1`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex === '1');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md
deleted file mode 100644
index 64b7dc37b47..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md
+++ /dev/null
@@ -1,136 +0,0 @@
----
-id: 60b69a66b6ddb80858c51592
-title: الخطوة 28
-challengeType: 0
-dashedName: step-28
----
-
-# --description--
-
-استخدم منتقي الفئة (class selector) لإنشاء قاعدة لعناصر يحتوي على فئة (class) تسمى `black-dot`. عيّن `width` بقيمة `10px`, و`height` بقيمة `10px`, و`background-color` بقيمة `rgb(45, 31, 19)`.
-
-# --hints--
-
-يجب أن يكون لديك منتقي `.black-dot`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.black-dot'));
-```
-
-يجب أن يحتوي منتقي `.black-dot` على خاصية `width` بقيمة `10px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.width === '10px');
-```
-
-يجب أن يكون لدى منتقي `.black-dot` خاصية `height` تم تعيينها إلى `10px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.height === '10px');
-```
-
-منتقي `.black-dot` يجب أن يكون لديه خاصية `background-color` بقيمة `rgb(45, 31, 19)`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor === 'rgb(45, 31, 19)');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md
deleted file mode 100644
index ad8ee165e56..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md
+++ /dev/null
@@ -1,125 +0,0 @@
----
-id: 60b69a66b6ddb80858c51593
-title: الخطوة 29
-challengeType: 0
-dashedName: step-29
----
-
-# --description--
-
-هذه النِّقَاط هي مجرد مربعا قليلاً. امنح فئة `black-dot` خاصية `border-radius` بقيمة `50%` لتصليحا.
-
-# --hints--
-
-يجب أن يحتوي منتقيك `.black-dot` على خاصية `border-radius` بقيمة `50%`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopLeftRadius, '50%');
-assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopRightRadius, '50%');
-assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomRightRadius, '50%');
-assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomLeftRadius, '50%');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md
deleted file mode 100644
index 6ddfd6b25ad..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md
+++ /dev/null
@@ -1,135 +0,0 @@
----
-id: 60b69a66b6ddb80858c51594
-title: الخطوة 30
-challengeType: 0
-dashedName: step-30
----
-
-# --description--
-
-نقل النِّقَاط إلى مكانها عن طريق تحديد `display` بقيمة `block`، و`margin` بقيمة `auto`، و`margin-top` بقيمة `65%`.
-
-# --hints--
-
-يجب أن يحتوي منتقيك `.black-dot` على خاصية `display` بقيمة `block`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.display === 'block');
-```
-
-يجب أن يكون لمنتقيك `.black-dot` خاصية `margin` بقيمة `auto`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.margin?.includes('auto'));
-```
-
-يجب أن يكون لمنتقيك `.black-dot` خاصية `margin-top` بقيمة `65%`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65%');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md
deleted file mode 100644
index f58bd5b6309..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md
+++ /dev/null
@@ -1,146 +0,0 @@
----
-id: 60b69a66b6ddb80858c51595
-title: الخطوة 31
-challengeType: 0
-dashedName: step-31
----
-
-# --description--
-
-استخدام منتقي معرف (id selector) لتصميم عنصر مع معرف (id) يسمى `tan-table`. أعطيه `width` بقيمة `450px`، و`height` بقيمة `140px`، و`background-color` بقيمة `#D2691E`.
-
-# --hints--
-
-يجب أن يكون لديك منتقي `#tan-table`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#tan-table'));
-```
-
-يجب أن يحتوي لمنتقيك `#tan-table` على خاصية `width` بقيمة `450px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.width === '450px');
-```
-
-يجب أن يحتوي لمنتقيك `#tan-table` على خاصية `height` بقيمة `140px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.height === '140px');
-```
-
-يجب أن يحتوي لمنتقيك `#tan-table` على خاصية `background-color` بقيمة `#D2691E`.
-
-```js
-assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor === 'rgb(210, 105, 30)');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
- --fcc-editable-region--
-
- --fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md
deleted file mode 100644
index 0014d9e2376..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md
+++ /dev/null
@@ -1,144 +0,0 @@
----
-id: 60b69a66b6ddb80858c51596
-title: الخطوة 32
-challengeType: 0
-dashedName: step-32
----
-
-# --description--
-
-أنقل الجدول (table) إلى مكانه بواسطة إعطائه `position` بقيمة `absolute` وخاصية `top` بقيمة `275px`, وخاصية `left` بقيمة `15px`.
-
-# --hints--
-
-يجب أن يحتوي منتقيك `#tan-table` على خاصية `position` بقيمة `absolute`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.position === 'absolute');
-```
-
-يجب أن يحتوي منتقي `#tan-table` على خاصية `top` تم تعيينها إلى `275px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.top === '275px');
-```
-
-يجب أن يحتوي منتقيك `#tan-table` على خاصية `left` تم تعيينها إلى `15px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md
deleted file mode 100644
index 0b55e2e1d9b..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md
+++ /dev/null
@@ -1,135 +0,0 @@
----
-id: 60b69a66b6ddb80858c51597
-title: الخطوة 33
-challengeType: 0
-dashedName: step-33
----
-
-# --description--
-
-إعطاء الجدول `z-index` بقيمة `1`.
-
-# --hints--
-
-يجب أن يحتوي منتقيك `#tan-table` على خاصية `z-index` بقيمة `1`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md
deleted file mode 100644
index a1b8a063b08..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md
+++ /dev/null
@@ -1,142 +0,0 @@
----
-id: 60b69a66b6ddb80858c51598
-title: الخطوة 34
-challengeType: 0
-dashedName: step-34
----
-
-# --description--
-
-بعد عنصرك `div#offwhite-character`، أضف `div` مع `id` بقيمة `black-character`.
-
-# --hints--
-
-يجب عليك إضافة عنصر `div` جديد داخل عنصر `.characters`.
-
-```js
-assert(document.querySelectorAll('.characters > div')?.length === 2);
-```
-
-يجب أن يحتوي عنصر `div` الجديد على `id` تم تعينه إلى `black-character`.
-
-```js
-assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') === 'black-character');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md
deleted file mode 100644
index f4bb9a0bf44..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md
+++ /dev/null
@@ -1,156 +0,0 @@
----
-id: 60b69a66b6ddb80858c51599
-title: الخطوة 35
-challengeType: 0
-dashedName: step-35
----
-
-# --description--
-
-ضمن عنصر `#black-character`، أضف ثلاث عناصر `div` مع قيم `id` التالية، بالترتيب: `black-hat`، و`gray-mask`، و`white-paper`.
-
-# --hints--
-
-يجب أن يكون لديك ثلاث عناصر `div` داخل عنصرك `#black-character`.
-
-```js
-assert(document.querySelectorAll('#black-character > div')?.length === 3);
-```
-
-يجب أن يحتوي أول عنصرك `div` على `id` يسمي `black-hat`.
-
-```js
-assert(document.querySelectorAll('#black-character > div')?.[0]?.getAttribute('id') === 'black-hat');
-```
-
-يجب أن يحتوي ثاني عنصرك `div` على `id` يسمي `gray-mask`.
-
-```js
-assert(document.querySelectorAll('#black-character > div')?.[1]?.getAttribute('id') === 'gray-mask');
-```
-
-يجب أن يحتوي ثالث عنصرك `div` على `id` يسمي `white-paper`.
-
-```js
-assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('id') === 'white-paper');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
- --fcc-editable-region--
-
- --fcc-editable-region--
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md
deleted file mode 100644
index 528474af6f0..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md
+++ /dev/null
@@ -1,158 +0,0 @@
----
-id: 60b69a66b6ddb80858c5159a
-title: الخطوة 36
-challengeType: 0
-dashedName: step-36
----
-
-# --description--
-
-إن القناع يحتاج إلى عيون. ضمن عنصر `#gray-mask`، أضف عنصرين `div`. يجب أن يكون الأول `class` يسمى `eyes left`, وينبغي أن يكون الثاني `class` يسمى `eyes right`.
-
-# --hints--
-
-يجب أن يكون لديك عنصران `div` ضمن عنصرك `#gray-mask`.
-
-```js
-assert(document.querySelectorAll('#gray-mask > div')?.length === 2);
-```
-
-يجب أن يحتوي أول عنصرك `div` على `class` يسمي `eyes left`.
-
-```js
-const first = document.querySelectorAll('#gray-mask > div')?.[0];
-assert(first?.classList?.contains('eyes'));
-assert(first?.classList?.contains('left'));
-```
-
-يجب أن يحتوي ثاني عنصرك `div` على `class` يسمي `eyes right`.
-
-```js
-const second = document.querySelectorAll('#gray-mask > div')?.[1];
-assert(second?.classList?.contains('eyes'));
-assert(second?.classList?.contains('right'));
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region--
-
- --fcc-editable-region--
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md
deleted file mode 100644
index 1fb187dd99e..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md
+++ /dev/null
@@ -1,161 +0,0 @@
----
-id: 60b69a66b6ddb80858c5159b
-title: الخطوة 37
-challengeType: 0
-dashedName: step-37
----
-
-# --description--
-
-حان الوقت لاستخدام بعض FontAwesome icons.
-
-يتم استخدام عنصر `i` للنص الاصطلاحي (idiomatic)، أو النص المنفصل عن محتوى النص "العادي". يمكن أن يكون هذا للنص _italic_، مثل المصطلحات العلمية، أو للرموز مثل تلك المقدمة من FontAwesome.
-
-ضمن عنصر `#white-paper`، أضف أربع عناصر `i`. أعطيهم جميع `class` بقيمة `fas fa-music`.
-
-تحدد هذه الفئة المميزة كيفية تحميل رمز FontAwesome. يشير `fas` إلى فئة الأيقونات (FontAwesome Solid، هنا)، بينما يختار `fa-music` الرمز المحدد.
-
-# --hints--
-
-يجب أن يكون لديك أربع عناصر `i` جديدة داخل عنصرك `#white-paper`.
-
-```js
-assert(document.querySelectorAll('#white-paper > i')?.length === 4);
-```
-
-يجب أن تحتوي جميع عناصرك `i` على `class` بقيمة `fas fa-music`.
-
-```js
-const icons = document.querySelectorAll('#white-paper > i');
-for (const icon of icons) {
- assert(icon.classList?.contains('fas'));
- assert(icon.classList?.contains('fa-music'));
-};
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region--
-
- --fcc-editable-region--
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md
deleted file mode 100644
index 721ea97ef0d..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md
+++ /dev/null
@@ -1,169 +0,0 @@
----
-id: 60b69a66b6ddb80858c5159c
-title: الخطوة 38
-challengeType: 0
-dashedName: step-38
----
-
-# --description--
-
-استخدم محدد معرف (id selector) لإنشاء قاعدة تستهدف عنصر يحتوي على معرف (id) يسمى `black-character`. عيّن `width` بقيمة `300px`, و`height` بقيمة `500px`, و`background-color` بقيمة `rgb(45, 31, 19)`.
-
-# --hints--
-
-يجب عليك استخدام منتقيك `#black-character`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-character'));
-```
-
-يجب أن يحتوي منتقيك `#black-character` على خاصية `width` بقيمة `300px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.width === '300px');
-```
-
-يجب أن يحتوي منتقيك `#black-character` على خاصية `height` بقيمة `500px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.height === '500px');
-```
-
-يجب أن يحتوي منتقيك `#black-character` على خاصية `background-color` بقيمة `rgb(45, 31, 19)`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundColor === 'rgb(45, 31, 19)');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region--
-
- --fcc-editable-region--
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md
deleted file mode 100644
index afd00ea48ac..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md
+++ /dev/null
@@ -1,167 +0,0 @@
----
-id: 60b69a66b6ddb80858c5159d
-title: الخطوة 39
-challengeType: 0
-dashedName: step-39
----
-
-# --description--
-
-أنقل عنصر `#black-character` إلى المكان عن طريق تعيين `position` بقيمة `absolute`, و`top` بقيمة `30%`, و`left` بقيمة `59%`.
-
-# --hints--
-
-يجب أن يحتوي منتقيك `#black-character` على خاصية `position` بقيمة `absolute`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.position === 'absolute');
-```
-
-يجب أن يحتوي منتقيك `#black-character` على خاصية `top` بقيمة `30%`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.top === '30%');
-```
-
-يجب أن يحتوي منتقيك `#black-character` على خاصية `left` بقيمة `59%`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '59%');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md
deleted file mode 100644
index a7908d2d66a..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md
+++ /dev/null
@@ -1,178 +0,0 @@
----
-id: 60b69a66b6ddb80858c5159e
-title: الخطوة 40
-challengeType: 0
-dashedName: step-40
----
-
-# --description--
-
-استخدم محدد معرف (id selector) لإنشاء قاعدة تستهدف عنصر يحتوي على معرف (id) يسمى `black-hat`. أعطيه `width` قيمة `0`, و`height` قيمة `0`، و`border-style` قيمة `solid`.
-
-# --hints--
-
-يجب أن يكون لديك منتقي `#black-hat`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-hat'));
-```
-
-يجب أن يحتوي منتقيك `#black-hat` على خاصية `width` بقيمة `0`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.width === '0px');
-```
-
-يجب أن يحتوي منتقيك `#black-hat` على خاصية `height` بقيمة `0`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.height === '0px');
-```
-
-يجب أن يحتوي منتقيك `#black-hat` على خاصية `border-style` بقيمة `solid`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderStyle === 'solid');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md
deleted file mode 100644
index da7fd00f4c9..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md
+++ /dev/null
@@ -1,183 +0,0 @@
----
-id: 60b69a66b6ddb80858c5159f
-title: الخطوة 42
-challengeType: 0
-dashedName: step-42
----
-
-# --description--
-
-تماماً مثل `#white-hat`، صمم الحدود (style border) لعنصر `#black-hat`. قم باعطائه `border-top-color`، و `border-right-color` و `border-bottom-color` بقيمة `transparent`. عيّن `border-left-color` بقيمة `rgb(45, 31, 19)`.
-
-# --hints--
-
-منتقي `#black-hat` الخاص بك يجب ان يحتوي على خاصية `border-top-color` بقيمة `transparent`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderTopColor === 'transparent');
-```
-
-يجب ان يحمل منتقي `#black-hat` الخاص بك خاصية `border-right-color` بقيمة `transparent`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderRightColor === 'transparent');
-```
-
-يجب ان يحمل منتقي `#black-hat` الخاص بك خاصية `border-bottom-color` بقيمة `transparent`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderBottomColor === 'transparent');
-```
-
-منتقي `#black-hat` يجب أن يكون لديه خاصية `border-left-color` بقيمة `rgb(45, 31, 19)`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor === 'rgb(45, 31, 19)');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md
deleted file mode 100644
index 51f6bdd2049..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md
+++ /dev/null
@@ -1,181 +0,0 @@
----
-id: 60b69a66b6ddb80858c515a0
-title: الخطوة 43
-challengeType: 0
-dashedName: step-43
----
-
-# --description--
-
-الآن ضع عنصر `#black-hat`. أعطيه `position` بقيمة `absolute`، و`top` بقيمة `-150px`، و `left` بقيمة `0`.
-
-# --hints--
-
-يجب أن يكون لمنتقيك `#black-hat` خاصية `position` بقيمة `absolute`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.position === 'absolute');
-```
-
-يجب يحمل منتقيك `#black-hat` الخاصية `top` بقيمة `-150px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.top === '-150px');
-```
-
-يجب أن يحتوي منتقيك `#black-hat` على خاصية `left` بقيمة `0`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.left === '0px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md
deleted file mode 100644
index f8087411ea0..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md
+++ /dev/null
@@ -1,192 +0,0 @@
----
-id: 60b69a66b6ddb80858c515a1
-title: الخطوة 44
-challengeType: 0
-dashedName: step-44
----
-
-# --description--
-
-باستخدام منتقي معرف (id selector)، صمم العنصر مع معرف (id) يسمى `gray-mask`. أعطيه `width` بقيمة `150px`، و `height` بقيمة `150px`، و `background-color` بقيمة `rgb(167, 162, 117)`.
-
-# --hints--
-
-يجب أن يكون لديك منتقي `#gray-mask`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#gray-mask'));
-```
-
-يجب أن يحتوي منتقي `#gray-mask` على خاصية `width` بقيمة `150px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px');
-```
-
-يجب أن يحتوي منتقي `#gray-mask` على خاصية `height` بقيمة `150px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px')
-```
-
-يجب أن يكون لدي منتقي `#gray-mask` خاصية `background-color` بقيمة `rgb(167, 162, 117)`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor === 'rgb(167, 162, 117)');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md
deleted file mode 100644
index 31585d09911..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md
+++ /dev/null
@@ -1,190 +0,0 @@
----
-id: 60b69a66b6ddb80858c515a2
-title: الخطوة 45
-challengeType: 0
-dashedName: step-45
----
-
-# --description--
-
-غير موضع عنصر `#gray-mask` عن طريق إضافة `position` بقيمة `absolute`، و`top` بقيمة `-10px`, و`left` بقيمة `70px`.
-
-# --hints--
-
-يجب أن يكون لمنتقي `#gray-mask` الخاص بك خاصية `position` بقيمة `absolute`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.position === 'absolute');
-```
-
-يجب أن يحتوي منتقي `#gray-mask` على خاصية `top` بقيمة `-10px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.top === '-10px');
-```
-
-يجب أن يحتوي منتقي `#gray-mask` على خاصية `left` بقيمة `70px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md
deleted file mode 100644
index c71c4723405..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md
+++ /dev/null
@@ -1,201 +0,0 @@
----
-id: 60b69a66b6ddb80858c515a3
-title: الخطوة 46
-challengeType: 0
-dashedName: step-46
----
-
-# --description--
-
-باستخدام منتقي معرف (id selector)، أنشئ قاعدة لأستهداف معرف (id) يسمى `white-paper`. عيّن `width` بقيمة `400px`, و`height` بقيمة `100px`, و`background-color` بقيمة `GhostWhite`.
-
-# --hints--
-
-يجب أن يكون لديك منتقي `#white-paper`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#white-paper'));
-```
-
-يجب أن يكون لمنتقيك `#white-paper` الخاصية `width` بقيمة `400px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.width === '400px');
-```
-
-يجب أن يكون لمنتقيك `#white-paper` الخاصية `height` بقيمة `100px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.height === '100px');
-```
-
-يجب يحمل منتقيك `#white-paper` خاصية `background-color` بقيمة `GhostWhite`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor === 'ghostwhite');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md
deleted file mode 100644
index 17f306d6223..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md
+++ /dev/null
@@ -1,199 +0,0 @@
----
-id: 60b69a66b6ddb80858c515a4
-title: الخطوة 47
-challengeType: 0
-dashedName: step-47
----
-
-# --description--
-
-اعطي `#white-paper` خاصية `position` بقيمة `absolute`، و`top` بقيمة `250px`، و`left` بقيمة `-150px` لنقلها إلى مكانها.
-
-# --hints--
-
-يجب أن يحتوي منتقيك `#white-paper` على خاصية `position` بقيمة `absolute`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.position === 'absolute');
-```
-
-يجب أن يحتوي منتقيك `#white-paper` على خاصية `top` بقيمة `250px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.top === '250px');
-```
-
-يجب أن يحتوي منتقيك `#white-paper` على خاصية `left` بقيمة `-150px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md
deleted file mode 100644
index 04b78dafdfd..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md
+++ /dev/null
@@ -1,190 +0,0 @@
----
-id: 60b69a66b6ddb80858c515a5
-title: الخطوة 48
-challengeType: 0
-dashedName: step-48
----
-
-# --description--
-
-عيّن `z-index` في عنصر `#white-paper` بقيمة `1`.
-
-# --hints--
-
-يجب أن يكون لدى منتقي `#white-paper` خاصية `z-index` تم تعيينها إلى `1`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md
deleted file mode 100644
index 01e93a6f05d..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md
+++ /dev/null
@@ -1,211 +0,0 @@
----
-id: 60b69a66b6ddb80858c515a6
-title: الخطوة 49
-challengeType: 0
-dashedName: step-49
----
-
-# --description--
-
-يأتوا FrontAwesome icons مع أسلوبهم الخاص لتعريف الأيقونة. ومع ذلك، لا يزال بإمكانك ضبط الأسلوب بنفسك أيضاً، لتغيير أشياء مثل اللون والحجم. حالياً, استخدم منتقي الفئة (class selector) لاستهداف أيقونة (icons) تحتوي على فئة (class) تسمى `fa-music`. عيّن `display` بقيمة `inline-block`, و`margin-top` بقيمة `8%`، و`margin-left` بقيمة `13%`.
-
-# --hints--
-
-يجب أن يكون لديك منتقي `.fa-music`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.fa-music'));
-```
-
-يجب أن يحتوي منتقي `.fa-music` على خاصية `display` بقيمة `inline-block`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.display === 'inline-block');
-```
-
-يجب أن يكون لمنتقيك `.fa-music` خاصية `margin-top` بقيمة `8%`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginTop === '8%');
-```
-
-يجب أن يكون لمنتقيك `.fa-music` خاصية `margin-left` بقيمة `13%`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13%');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md
deleted file mode 100644
index bf951eaf387..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md
+++ /dev/null
@@ -1,217 +0,0 @@
----
-id: 60b69a66b6ddb80858c515a7
-title: الخطوة 50
-challengeType: 0
-dashedName: step-50
----
-
-# --description--
-
-تحت عنصر `#black-character`، أضف عنصرين `div` جديدين. ستكون هذه هي الوشاح. أعطِ كليهما `class` من `blue`. ثم أعطى الأول `id` قيمته `blue-left`, والثاني هو `id` قيمته `blue-right`.
-
-# --hints--
-
-يجب أن يكون لديك عنصران `div` جديدان ضمن عنصر `.characters` الخاص بك.
-
-```js
-assert(document.querySelectorAll('.characters > div')?.length === 4);
-```
-
-عنصرين `div` الجديدين الخاصين بك يجب أن يحتويا على `class` يسمي `blue`.
-
-```js
-const divs = document.querySelectorAll('.characters > div');
-assert(divs?.[2]?.classList?.contains('blue'))
-assert(divs?.[3]?.classList?.contains('blue'))
-```
-
-يجب أن يحمل أول `div` جديد `id` من `blue-left`.
-
-```js
-assert(document.querySelectorAll('.characters > div')?.[2]?.getAttribute('id') === 'blue-left');
-```
-
-يجب أن يحمل ثاني `div` جديد `id` من `blue-right`.
-
-```js
-assert(document.querySelectorAll('.characters > div')?.[3]?.getAttribute('id') === 'blue-right');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md
deleted file mode 100644
index 2a402bdc5bc..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md
+++ /dev/null
@@ -1,207 +0,0 @@
----
-id: 60b69a66b6ddb80858c515a8
-title: الخطوة 51
-challengeType: 0
-dashedName: step-51
----
-
-# --description--
-
-استخدم منتقي الفئة (class selector) لاستهداف العناصر الجديدة تحتوي على فئة (class) تسمى `blue`. عيّن `background-color` إلى `#1E90FF`.
-
-# --hints--
-
-يجب أن يكون لديك منتقي `.blue`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.blue'));
-```
-
-يجب أن يحتوي منتقي `.blue` على خاصية `background-color` بقيمة `#1E90FF`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(30, 144, 255)');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region--
-
- --fcc-editable-region--
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md
deleted file mode 100644
index 3feb17a185e..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md
+++ /dev/null
@@ -1,217 +0,0 @@
----
-id: 60b69a66b6ddb80858c515a9
-title: الخطوة 52
-challengeType: 0
-dashedName: step-52
----
-
-# --description--
-
-حدد العنصر مع معرف (id) يسمى `blue-left` باستخدام محدد المعرف (id selector). أعطيه `width` قيمته `500px` و`height` قيمته `300px`.
-
-# --hints--
-
-يجب أن يكون لديك منتقي `#blue-left`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#blue-left'));
-```
-
-يجب أن يحتوي منتقيك `#blue-left` على خاصية `width` بقيمة `500px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.width === '500px');
-```
-
-يجب أن يكون لمنتقيك `#blue-left` الخاصية `height` بقيمة `300px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md
deleted file mode 100644
index 5651a784c14..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md
+++ /dev/null
@@ -1,220 +0,0 @@
----
-id: 60b69a66b6ddb80858c515aa
-title: الخطوة 53
-challengeType: 0
-dashedName: step-53
----
-
-# --description--
-
-الآن قم بتعيين `position` إلى `absolute` و `top` إلى `20%`و `left` إلى `20%`.
-
-# --hints--
-
-يجب أن يكون لمنتقي `#blue-left` الخاص بك خاصية `position` بقيمة `absolute`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.position === 'absolute');
-```
-
-يجب أن يكون لمنتقي `#blue-left` الخاص بك الخاصية `top` بقيمة `20%`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.top === '20%');
-```
-
-يجب أن يكون لمنتقي `#blue-left` الخاص بك الخاصية `left` بقيمة `20%`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md
deleted file mode 100644
index ed8c471eb77..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md
+++ /dev/null
@@ -1,225 +0,0 @@
----
-id: 60b69a66b6ddb80858c515ab
-title: الخطوة 54
-challengeType: 0
-dashedName: step-54
----
-
-# --description--
-
-بعد ذلك, أستهدف عنصر مع معرف (id) يسمى `blue-right` باستخدام محدد المعرف (id selector). تقم بتعيين `width` إلى `400px` و `height` إلى `300px`.
-
-# --hints--
-
-يجب أن يكون لديك منتقي `#blue-right`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#blue-right'));
-```
-
-يجب أن يكون لمنتقي `#blue-right` الخاص بك الخاصية `width` بقيمة `400px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.width === '400px');
-```
-
-يجب أن يكون لمنتقي `#blue-right` الخاص بك الخاصية `height` بقيمة `300px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md
deleted file mode 100644
index 79586441153..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md
+++ /dev/null
@@ -1,228 +0,0 @@
----
-id: 60b69a66b6ddb80858c515ac
-title: الخطوة 55
-challengeType: 0
-dashedName: step-55
----
-
-# --description--
-
-اعطي عنصر `#blue-right` المكان الصحيح بإضافة `position` بقيمة `absolute` و `top` بقيمة `50%` و `left` بقيمة `40%`.
-
-# --hints--
-
-يجب أن يحتوي منتقيك `#blue-right` على خاصية `position` بقيمة `absolute`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.position === 'absolute');
-```
-
-يجب أن يحتوي منتقيك `#blue-right` على خاصية `top` بقيمة `50%`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.top === '50%');
-```
-
-يجب أن يحتوي منتقيك `#blue-right` على خاصية `left` بقيمة `40%`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md
deleted file mode 100644
index a3133d32cc5..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md
+++ /dev/null
@@ -1,225 +0,0 @@
----
-id: 60b69a66b6ddb80858c515ad
-title: الخطوة 56
-challengeType: 0
-dashedName: step-56
----
-
-# --description--
-
-أسفل عناصرك `.blue`، أضف `div` آخر. قم باعطائه `id` بقيمة `orange-character`.
-
-# --hints--
-
-يجب أن يكون لديك عنصر `div` جديد داخل عنصرك `.characters`.
-
-```js
-assert(document.querySelectorAll('.characters > div')?.length === 5);
-```
-
-يجب أن يحتوي عنصر `div` الجديد على `id` تم تعينه إلى `orange-character`.
-
-```js
-assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') === 'orange-character');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md
deleted file mode 100644
index 36dde9970bd..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md
+++ /dev/null
@@ -1,245 +0,0 @@
----
-id: 60b69a66b6ddb80858c515ae
-title: الخطوة 57
-challengeType: 0
-dashedName: step-57
----
-
-# --description--
-
-ضمن عنصر `#orange-character`، أضف أربع عناصر `div`. اعطي `id` قيم `black-round-hat`، و`eyes-div`, و `triangles`، و `guitar`، بالترتيب.
-
-# --hints--
-
-يجب أن يكون لديك أربع عناصر `div` جديدة داخل عنصرك `#orange-character`.
-
-```js
-assert(document.querySelectorAll('#orange-character > div')?.length === 4);
-```
-
-يجب أن يحتوي أول عنصرك `div` على `id` يسمي `black-round-hat`.
-
-```js
-assert(document.querySelectorAll('#orange-character > div')?.[0]?.getAttribute('id') === 'black-round-hat');
-```
-
-يجب أن يحتوي ثاني عنصرك `div` على `id` يسمي `eyes-div`.
-
-```js
-assert(document.querySelectorAll('#orange-character > div')?.[1]?.getAttribute('id') === 'eyes-div');
-```
-
-يجب أن يحتوي ثالث عنصرك `div` على `id` يسمي `triangles`.
-
-```js
-assert(document.querySelectorAll('#orange-character > div')?.[2]?.getAttribute('id') === 'triangles');
-```
-
-يجب أن يحتوي عنصر `div` الجديد الرابع على `id` يسمى `guitar`.
-
-```js
-assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('id') === 'guitar');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region--
-
- --fcc-editable-region--
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md
deleted file mode 100644
index 32fa574b438..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md
+++ /dev/null
@@ -1,240 +0,0 @@
----
-id: 60b69a66b6ddb80858c515af
-title: الخطوة 58
-challengeType: 0
-dashedName: step-58
----
-
-# --description--
-
-يجب أن يحمل عنصر `#eyes-div` ببعض العيون. أضف عنصرين `div` داخلهما. اعطي أول `class` أسم `eyes left`, إعطاء `class` الثانية من `eyes right`.
-
-# --hints--
-
-يجب أن يدخل عنصراك `div` في عنصر `#eyes-div`.
-
-```js
-assert(document.querySelectorAll('#eyes-div > div')?.length === 2);
-```
-
-يجب أن يحمل أول `div` جديد `class` باسم `eyes left`.
-
-```js
-assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('eyes'));
-assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('left'));
-```
-
-يجب أن يحمل ثاني `div` جديد `class` باسم `eyes right`.
-
-```js
-assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('eyes'));
-assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('right'));
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region--
-
- --fcc-editable-region--
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md
deleted file mode 100644
index 695d10cc533..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md
+++ /dev/null
@@ -1,238 +0,0 @@
----
-id: 60b69a66b6ddb80858c515b0
-title: الخطوة 59
-challengeType: 0
-dashedName: step-59
----
-
-# --description--
-
-ضمن عنصر `#triangles`، ستحتاج إلى إضافة العناصر التي ستصبح مثلثاتك. أنشئ ثلاثين عناصر `div` وإعطاء كل منهم فئة `triangle`.
-
-# --hints--
-
-يجب أن يكون لديك 30 عناصر `div` داخل عنصرك `#triangles`.
-
-```js
-assert(document.querySelectorAll('#triangles > div')?.length === 30);
-```
-
-يجب أن يكون جميع 30 عناصر `div` الجديد `class` باسم `triangle`.
-
-```js
-const divDivDiv = document.querySelectorAll('#triangles > div');
-for (const div of divDivDiv) {
- assert(div?.classList?.contains('triangle'));
-}
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region--
-
- --fcc-editable-region--
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md
deleted file mode 100644
index 78d44112878..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md
+++ /dev/null
@@ -1,298 +0,0 @@
----
-id: 60b69a66b6ddb80858c515b1
-title: الخطوة 60
-challengeType: 0
-dashedName: step-60
----
-
-# --description--
-
-داخل عنصر `#guitar`، أنشئ ثلاث عناصر `div`. اعطي أول اثنين `class` باسم `guitar`. ثم أعطى الأول `id` أسم `guitar-left`, والثاني `id` اسم `guitar-right`. إضافة `id` إلى ثالث `div` باسم `guitar-neck`.
-
-أما الثالث `div` فلا ينبغي أن يحتوي على فئة `guitar`.
-
-# --hints--
-
-يجب أن يكون لديك ثلاث عناصر `div` جديدة بداخل عنصرك `#guitar`.
-
-```js
-assert(document.querySelectorAll('#guitar > div')?.length === 3);
-```
-
-يجب أن تحتوي أول `div` جديد على `class` باسم `guitar`.
-
-```js
-assert(document.querySelectorAll('#guitar > div')?.[0]?.classList?.contains('guitar'));
-```
-
-يجب أن يحتوي أول `div` جديد على `id` باسم `guitar-left`.
-
-```js
-assert(document.querySelectorAll('#guitar > div')?.[0]?.getAttribute('id') === 'guitar-left');
-```
-
-يجب أن تحتوي ثاني `div` جديد على `class` باسم `guitar`.
-
-```js
-assert(document.querySelectorAll('#guitar > div')?.[1]?.classList?.contains('guitar'));
-```
-
-يجب أن يحتوي ثاني `div` جديد على `id` باسم `guitar-right`.
-
-```js
-assert(document.querySelectorAll('#guitar > div')?.[1]?.getAttribute('id') === 'guitar-right');
-```
-
-يجب أن يحتوي ثالث `div` جديد على `id` باسم `guitar-neck`.
-
-```js
-assert(document.querySelectorAll('#guitar > div')?.[2]?.getAttribute('id') === 'guitar-neck');
-```
-
-لا ينبغي أن تعطي الفئة الجديدة الثالثة `div` يحمل `class` باسم `guitar`.
-
-```js
-assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar'));
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region--
-
- --fcc-editable-region--
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md
deleted file mode 100644
index 09122970c0d..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md
+++ /dev/null
@@ -1,281 +0,0 @@
----
-id: 60b69a66b6ddb80858c515b2
-title: الخطوة 61
-challengeType: 0
-dashedName: step-61
----
-
-# --description--
-
-استخدم أيقونة FontAwesome الأخرى في `.guitar` الخاص بك. داخل كل من عنصرين `#guitar-left` و`#guitar-right`، أضف عنصر `i` وأعطيه `class` باسم `fas fa-bars`.
-
-# --hints--
-
-ضمن عنصرك `#guitar-left`، يجب عليك إضافة عنصر `i`.
-
-```js
-assert(document.querySelectorAll('#guitar-left > i')?.length === 1);
-```
-
-داخل عنصرك `#guitar-right`، يجب عليك إضافة عنصر `i`.
-
-```js
-assert(document.querySelectorAll('#guitar-right > i')?.length === 1);
-```
-
-يجب أن يحتوي العنصران الجديدان `i` على `class` باسم `fas fa-bars`.
-
-```js
-assert(document.querySelector('#guitar-left > i')?.classList?.contains('fas'));
-assert(document.querySelector('#guitar-left > i')?.classList?.contains('fa-bars'));
-assert(document.querySelector('#guitar-right > i')?.classList?.contains('fas'));
-assert(document.querySelector('#guitar-right > i')?.classList?.contains('fa-bars'));
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region--
-
- --fcc-editable-region--
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md
deleted file mode 100644
index e154d8e2d08..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md
+++ /dev/null
@@ -1,287 +0,0 @@
----
-id: 60b69a66b6ddb80858c515b3
-title: الخطوة 62
-challengeType: 0
-dashedName: step-62
----
-
-# --description--
-
-حدد عنصرك `orange-character` مع المنتقي المعرف (id selector). أعطيه `width` بقيمة `250px`، و `height` بقيمة `550px`، و `background-color` بقيمة `rgb(240, 78, 42)`.
-
-# --hints--
-
-يجب أن يكون لديك منتقي `#orange-character`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#orange-character'));
-```
-
-يجب أن يحتوي منتقيك `#orange-character` على خاصية `width` بقيمة `250px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.width === '250px');
-```
-
-يجب أن يحتوي منتقي `#orange-character` على خاصية `height` بقيمة `550px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.height === '550px');
-```
-
-يجب أن يكون لدى منتقي `#orange-character` خاصية `background-color` بقيمة `rgb(240, 78, 42)`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.backgroundColor === 'rgb(240, 78, 42)');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region--
-
-
-
-
-
-
-
- --fcc-editable-region--
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md
deleted file mode 100644
index 28d3302fc82..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md
+++ /dev/null
@@ -1,285 +0,0 @@
----
-id: 60b69a66b6ddb80858c515b4
-title: الخطوة 63
-challengeType: 0
-dashedName: step-63
----
-
-# --description--
-
-اعطي عنصر `#orange-character` خاصية `position` بقيمة `absolute`، و`top` بقيمة `25%`، و`left` بقيمة `40%`.
-
-# --hints--
-
-يجب أن يكون لمنتقي `#orange-character` الخاص بك خاصية `position` بقيمة `absolute`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.position === 'absolute');
-```
-
-يجب أن يحتوي منتقي `#orange-character` على خاصية `top` بقيمة `25%`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.top === '25%');
-```
-
-يجب أن يحتوي منتقي `#orange-character` على خاصية `left` بقيمة `40%`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '40%');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md
deleted file mode 100644
index 1e00ce809b2..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md
+++ /dev/null
@@ -1,296 +0,0 @@
----
-id: 60b69a66b6ddb80858c515b5
-title: الخطوة 64
-challengeType: 0
-dashedName: step-64
----
-
-# --description--
-
-حدد العنصر يحتوي على معرف (id) يسمى `black-round-hat` باستخدام محدد المعرف (id selector). عيّن `width` بقيمة `180px`, و`height` بقيمة `150px`, و`background-color` بقيمة `rgb(45, 31, 19)`.
-
-# --hints--
-
-يجب أن يكون لديك منتقي `#black-round-hat`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat'));
-```
-
-يجب أن يحتوي منتقي `#black-round-hat` على خاصية `width` بقيمة `180px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.width === '180px');
-```
-
-يجب أن يحتوي منتقي `#black-round-hat` على خاصية `height` بقيمة `150px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.height === '150px');
-```
-
-يجب أن يكون لدى منتقي `#black-round-hat` خاصية `background-color` بقيمة `rgb(45, 31, 19)`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundColor === 'rgb(45, 31, 19)');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md
deleted file mode 100644
index 71c33d05e5c..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md
+++ /dev/null
@@ -1,282 +0,0 @@
----
-id: 60b69a66b6ddb80858c515b6
-title: الخطوة 65
-challengeType: 0
-dashedName: step-65
----
-
-# --description--
-
-يجب أن يكون عنصر `#black-round-hat` مستدير (round). أعطيه `border-radius` بقيمة `50%` لإصلاح هذا.
-
-# --hints--
-
-يجب أن يكون لمنتقيك `#black-round-hat` خاصية `border-radius` بقيمة `50%`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadius === '50%');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md
deleted file mode 100644
index 0401b845bb9..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md
+++ /dev/null
@@ -1,295 +0,0 @@
----
-id: 60b69a66b6ddb80858c515b7
-title: الخطوة 66
-challengeType: 0
-dashedName: step-66
----
-
-# --description--
-
-أنقل عنصر `#black-round-hat` إلى مكانها مع `position` بقيمة `absolute`، و `top` بقيمة `-100px`، و `left` بقيمة `5px`.
-
-# --hints--
-
-يجب أن يكون لمنتقي `#black-round-hat` الخاص بك خاصية `position` بقيمة `absolute`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.position === 'absolute');
-```
-
-يجب أن يحتوي منتقي `#black-round-hat` على خاصية `top` بقيمة `-100px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.top === '-100px');
-```
-
-يجب أن يحتوي منتقي `#black-round-hat` على خاصية `left` بقيمة `5px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md
deleted file mode 100644
index 17371f47b2d..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md
+++ /dev/null
@@ -1,286 +0,0 @@
----
-id: 60b69a66b6ddb80858c515b8
-title: الخطوة 67
-challengeType: 0
-dashedName: step-67
----
-
-# --description--
-
-ضع عنصر `#black-round-hat` على الطبقة الصحيحة مع `z-index` بقيمة `-1`.
-
-# --hints--
-
-يجب أن يحتوي منتقي `#black-round-hat` على خاصية `z-index` بقيمة `-1`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex === '-1');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- position: absolute;
- top: -100px;
- left: 5px;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md
deleted file mode 100644
index f058f3f46ba..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md
+++ /dev/null
@@ -1,301 +0,0 @@
----
-id: 60b69a66b6ddb80858c515b9
-title: الخطوة 68
-challengeType: 0
-dashedName: step-68
----
-
-# --description--
-
-استخدم محدد معرف (id selector) لإنشاء قاعدة تستهدف عنصر يحتوي على معرف (id) يسمى `eyes-div`. عيّن `width` إلى `180px` و `height` إلى `50px`.
-
-# --hints--
-
-يجب عليك إنشاء منتقي `#eyes-div`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#eyes-div'));
-```
-
-يجب أن يحتوي منتقي `#eyes-div` على خاصية `width` بقيمة `180px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.width === '180px');
-```
-
-يجب أن يكون لمنتقي `#eyes-div` الخاص بك الخاصية `height` بقيمة `50px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- position: absolute;
- top: -100px;
- left: 5px;
- z-index: -1;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md
deleted file mode 100644
index e9cdd9e8a70..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md
+++ /dev/null
@@ -1,304 +0,0 @@
----
-id: 60b69a66b6ddb80858c515ba
-title: الخطوة 69
-challengeType: 0
-dashedName: step-69
----
-
-# --description--
-
-الآن أنقل عنصر `#eyes-div` إلى الموضع `position` بقيمة `absolute`، و`top` بقيمة `-40px`، و `left` بقيمة `20px`.
-
-# --hints--
-
-يجب أن يكون لمنتقيك `#eyes-div` خاصية `position` بقيمة `absolute`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.position === 'absolute');
-```
-
-يجب أن يحتوي منتقيك `#eyes-div` على خاصية `top` بقيمة `-40px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.top === '-40px');
-```
-
-يجب أن يكون لمنتقيك `#eyes-div` الخاصية `left` بقيمة `20px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- position: absolute;
- top: -100px;
- left: 5px;
- z-index: -1;
-}
-
-#eyes-div {
- width: 180px;
- height: 50px;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md
deleted file mode 100644
index 20abde21a50..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md
+++ /dev/null
@@ -1,295 +0,0 @@
----
-id: 60b69a66b6ddb80858c515bc
-title: الخطوة 70
-challengeType: 0
-dashedName: step-70
----
-
-# --description--
-
-اعطي عنصر `#eyes-div` خاصية `z-index` بقيمة `3`.
-
-# --hints--
-
-يجب أن تكون خاصية `z-index` لمنتقي `#eyes-div` الخاص بك بقيمة `3`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- position: absolute;
- top: -100px;
- left: 5px;
- z-index: -1;
-}
-
-#eyes-div {
- width: 180px;
- height: 50px;
- position: absolute;
- top: -40px;
- left: 20px;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md
deleted file mode 100644
index 95783d4e0bb..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md
+++ /dev/null
@@ -1,348 +0,0 @@
----
-id: 60b69a66b6ddb80858c515bd
-title: الخطوة 79
-challengeType: 0
-dashedName: step-79
----
-
-# --description--
-
-الآن استخدم منتقي فئة (class selector) لاستهداف `guitar`. سيؤدي هذا إلى تصميم "نصفي" جيتارك. قم بتعيين `width` إلى `150px`، و `height` إلى `120px` و `background-color` إلى `Goldenrod` و `border-radius` إلى `50%`.
-
-# --hints--
-
-يجب عليك إنشاء منتقي `.guitar`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.guitar'));
-```
-
-يجب أن يكون لمنتقي `.guitar` الخاص بك الخاصية `width` بقيمة `150px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.width === '150px');
-```
-
-يجب أن يكون لمنتقي `.guitar` الخاص بك الخاصية `height` بقيمة `120px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.height === '120px');
-```
-
-يجب أن يكون لمنتقي `.guitar` الخاص بك خاصية `background-color` محددة إلى `Goldenrod`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.backgroundColor === 'goldenrod');
-```
-
-يجب أن يكون لمنتقي `.guitar` الخاص بك الخاصية `border-radius` بقيمة `50%`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50%');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- position: absolute;
- top: -100px;
- left: 5px;
- z-index: -1;
-}
-
-#eyes-div {
- width: 180px;
- height: 50px;
- position: absolute;
- top: -40px;
- left: 20px;
- z-index: 3;
-}
-
-#triangles {
- width: 250px;
- height: 550px;
-}
-
-.triangle {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 42px 45px 45px 0;
- border-top-color: transparent;
- border-right-color: Gold; /* yellow */
- border-bottom-color: transparent;
- border-left-color: transparent;
- display: inline-block;
-}
-
-#guitar {
- width: 100%;
- height: 100px;
- position: absolute;
- top: 120px;
- left: 0px;
- z-index: 3;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md
deleted file mode 100644
index 2cc7e8265b4..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md
+++ /dev/null
@@ -1,337 +0,0 @@
----
-id: 60b69a66b6ddb80858c515be
-title: الخطوة 80
-challengeType: 0
-dashedName: step-80
----
-
-# --description--
-
-قم بتحديد الـ `id` بقيمة `guitar-left`، وتعيين `position` إلى `absolute` و `left` إلى `0px`.
-
-# --hints--
-
-يجب عليك إنشاء منتقي `#guitar-left` جديد.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#guitar-left'));
-```
-
-يجب أن يكون لمنتقي `#guitar-left` الخاص بك خاصية `position` بقيمة `absolute`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'absolute');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- position: absolute;
- top: -100px;
- left: 5px;
- z-index: -1;
-}
-
-#eyes-div {
- width: 180px;
- height: 50px;
- position: absolute;
- top: -40px;
- left: 20px;
- z-index: 3;
-}
-
-#triangles {
- width: 250px;
- height: 550px;
-}
-
-.triangle {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 42px 45px 45px 0;
- border-top-color: transparent;
- border-right-color: Gold; /* yellow */
- border-bottom-color: transparent;
- border-left-color: transparent;
- display: inline-block;
-}
-
-#guitar {
- width: 100%;
- height: 100px;
- position: absolute;
- top: 120px;
- left: 0px;
- z-index: 3;
-}
-
-.guitar {
- width: 150px;
- height: 120px;
- background-color: Goldenrod;
- border-radius: 50%;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md
deleted file mode 100644
index a4a4f7af352..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md
+++ /dev/null
@@ -1,348 +0,0 @@
----
-id: 60b69a66b6ddb80858c515bf
-title: الخطوة 81
-challengeType: 0
-dashedName: step-81
----
-
-# --description--
-
-فم باختيار الـ `id` بقيمة `guitar-right`، و ايضا حدد `position` إلى `absolute`. هذه المرة، عيّن `left` إلى `100px`.
-
-# --hints--
-
-يجب عليك إنشاء منتقي `#guitar-right` جديد.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#guitar-right'));
-```
-
-يجب أن يكون لمنتقي `#guitar-right` الخاص بك خاصية `position` بقيمة `absolute`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.position === 'absolute');
-```
-
-يجب أن يكون لدى منتقي `#guitar-right` خاصية `left` تم تعيينها إلى `100px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- position: absolute;
- top: -100px;
- left: 5px;
- z-index: -1;
-}
-
-#eyes-div {
- width: 180px;
- height: 50px;
- position: absolute;
- top: -40px;
- left: 20px;
- z-index: 3;
-}
-
-#triangles {
- width: 250px;
- height: 550px;
-}
-
-.triangle {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 42px 45px 45px 0;
- border-top-color: transparent;
- border-right-color: Gold; /* yellow */
- border-bottom-color: transparent;
- border-left-color: transparent;
- display: inline-block;
-}
-
-#guitar {
- width: 100%;
- height: 100px;
- position: absolute;
- top: 120px;
- left: 0px;
- z-index: 3;
-}
-
-.guitar {
- width: 150px;
- height: 120px;
- background-color: Goldenrod;
- border-radius: 50%;
-}
-
-#guitar-left {
- position: absolute;
- left: 0px;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md
deleted file mode 100644
index cb2aa035294..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md
+++ /dev/null
@@ -1,359 +0,0 @@
----
-id: 60b69a66b6ddb80858c515c0
-title: الخطوة 82
-challengeType: 0
-dashedName: step-82
----
-
-# --description--
-
-الآن تحتاج إلى نقل أيقونات الشريط (bar icons) إلى مكانها. أنشئ منتقي فئة (class selector) تستهدف فئة (class) تسمى `fa-bars`. قم بتعيين `display` إلى `block`و `margin-top` إلى `30%`، و `margin-left` إلى `40%`.
-
-# --hints--
-
-يجب عليك إنشاء منتقي `.fa-bars`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.fa-bars'));
-```
-
-يجب أن يحتوي منتقي `.fa-bars` على خاصية `display` بقيمة `block`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.display === 'block');
-```
-
-يجب أن يكون لمنتقي `.fa-bars` الخاص بك خاصية `margin-top` بقيمة `30%`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginTop === '30%');
-```
-
-يجب أن يكون لمنتقي `.fa-bars` الخاص بك خاصية `margin-left` بقيمة `40%`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '40%');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- position: absolute;
- top: -100px;
- left: 5px;
- z-index: -1;
-}
-
-#eyes-div {
- width: 180px;
- height: 50px;
- position: absolute;
- top: -40px;
- left: 20px;
- z-index: 3;
-}
-
-#triangles {
- width: 250px;
- height: 550px;
-}
-
-.triangle {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 42px 45px 45px 0;
- border-top-color: transparent;
- border-right-color: Gold; /* yellow */
- border-bottom-color: transparent;
- border-left-color: transparent;
- display: inline-block;
-}
-
-#guitar {
- width: 100%;
- height: 100px;
- position: absolute;
- top: 120px;
- left: 0px;
- z-index: 3;
-}
-
-.guitar {
- width: 150px;
- height: 120px;
- background-color: Goldenrod;
- border-radius: 50%;
-}
-
-#guitar-left {
- position: absolute;
- left: 0px;
-}
-
-#guitar-right {
- position: absolute;
- left: 100px;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md
deleted file mode 100644
index dc3da68119e..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md
+++ /dev/null
@@ -1,365 +0,0 @@
----
-id: 60b69a66b6ddb80858c515c1
-title: الخطوة 83
-challengeType: 0
-dashedName: step-83
----
-
-# --description--
-
-استخدم محدد معرف (id selector) لإنشاء قاعدة تستهدف معرف (id) يسمى `guitar-neck`. قم بتعيين `width` إلى `200px`، و `height` إلى `30px`، و `background-color` إلى `#D2691E`.
-
-# --hints--
-
-يجب عليك إنشاء منتقي `#guitar-neck`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck'));
-```
-
-يجب أن يكون لدى منتقي `#guitar-neck` خاصية `width` تم تعيينها إلى `200px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.width === '200px');
-```
-
-يجب أن يكون لدى منتقي `#guitar-neck` خاصية `height` تم تعيينها إلى `30px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.height === '30px');
-```
-
-يجب أن يكون لمنتقي `#guitar-neck` الخاص بك خاصية `background-color` بقيمة `#D2691E`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor === 'rgb(210, 105, 30)');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- position: absolute;
- top: -100px;
- left: 5px;
- z-index: -1;
-}
-
-#eyes-div {
- width: 180px;
- height: 50px;
- position: absolute;
- top: -40px;
- left: 20px;
- z-index: 3;
-}
-
-#triangles {
- width: 250px;
- height: 550px;
-}
-
-.triangle {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 42px 45px 45px 0;
- border-top-color: transparent;
- border-right-color: Gold; /* yellow */
- border-bottom-color: transparent;
- border-left-color: transparent;
- display: inline-block;
-}
-
-#guitar {
- width: 100%;
- height: 100px;
- position: absolute;
- top: 120px;
- left: 0px;
- z-index: 3;
-}
-
-.guitar {
- width: 150px;
- height: 120px;
- background-color: Goldenrod;
- border-radius: 50%;
-}
-
-#guitar-left {
- position: absolute;
- left: 0px;
-}
-
-#guitar-right {
- position: absolute;
- left: 100px;
-}
-
-.fa-bars {
- display: block;
- margin-top: 30%;
- margin-left: 40%;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md
deleted file mode 100644
index a3e8f761230..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md
+++ /dev/null
@@ -1,363 +0,0 @@
----
-id: 60b69a66b6ddb80858c515c2
-title: الخطوة 84
-challengeType: 0
-dashedName: step-84
----
-
-# --description--
-
-الآن انقل عنصر `#guitar-neck` باستخدام `position` بقيمة `absolute` و `top` بقيمة `45px`، و `left` بقيمة `200px`.
-
-# --hints--
-
-يجب أن يكون لمنتقي `#guitar-neck` الخاص بك خاصية `position` بقيمة `absolute`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.position === 'absolute');
-```
-
-يجب أن يكون لدى منتقي `#guitar-neck` خاصية `top` تم تعيينها إلى `45px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.top === '45px');
-```
-
-يجب أن يكون لدى منتقي `#guitar-neck` خاصية `left` تم تعيينها إلى `200px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- position: absolute;
- top: -100px;
- left: 5px;
- z-index: -1;
-}
-
-#eyes-div {
- width: 180px;
- height: 50px;
- position: absolute;
- top: -40px;
- left: 20px;
- z-index: 3;
-}
-
-#triangles {
- width: 250px;
- height: 550px;
-}
-
-.triangle {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 42px 45px 45px 0;
- border-top-color: transparent;
- border-right-color: Gold; /* yellow */
- border-bottom-color: transparent;
- border-left-color: transparent;
- display: inline-block;
-}
-
-#guitar {
- width: 100%;
- height: 100px;
- position: absolute;
- top: 120px;
- left: 0px;
- z-index: 3;
-}
-
-.guitar {
- width: 150px;
- height: 120px;
- background-color: Goldenrod;
- border-radius: 50%;
-}
-
-#guitar-left {
- position: absolute;
- left: 0px;
-}
-
-#guitar-right {
- position: absolute;
- left: 100px;
-}
-
-.fa-bars {
- display: block;
- margin-top: 30%;
- margin-left: 40%;
-}
-
-#guitar-neck {
- width: 200px;
- height: 30px;
- background-color: #D2691E;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md
deleted file mode 100644
index a04126d809f..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md
+++ /dev/null
@@ -1,354 +0,0 @@
----
-id: 60b69a66b6ddb80858c515c3
-title: الخطوة 85
-challengeType: 0
-dashedName: step-85
----
-
-# --description--
-
-اعطي عنصر `#guitar-neck` خاصية `z-index` بقيمة `3`.
-
-# --hints--
-
-يجب أن يكون لدى منتقي `#guitar-neck` خاصية `z-index` تم تعيينها إلى `3`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- position: absolute;
- top: -100px;
- left: 5px;
- z-index: -1;
-}
-
-#eyes-div {
- width: 180px;
- height: 50px;
- position: absolute;
- top: -40px;
- left: 20px;
- z-index: 3;
-}
-
-#triangles {
- width: 250px;
- height: 550px;
-}
-
-.triangle {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 42px 45px 45px 0;
- border-top-color: transparent;
- border-right-color: Gold; /* yellow */
- border-bottom-color: transparent;
- border-left-color: transparent;
- display: inline-block;
-}
-
-#guitar {
- width: 100%;
- height: 100px;
- position: absolute;
- top: 120px;
- left: 0px;
- z-index: 3;
-}
-
-.guitar {
- width: 150px;
- height: 120px;
- background-color: Goldenrod;
- border-radius: 50%;
-}
-
-#guitar-left {
- position: absolute;
- left: 0px;
-}
-
-#guitar-right {
- position: absolute;
- left: 100px;
-}
-
-.fa-bars {
- display: block;
- margin-top: 30%;
- margin-left: 40%;
-}
-
-#guitar-neck {
- width: 200px;
- height: 30px;
- background-color: #D2691E;
- position: absolute;
- top: 45px;
- left: 200px;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md
deleted file mode 100644
index c42ef03dd15..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md
+++ /dev/null
@@ -1,381 +0,0 @@
----
-id: 60b69a66b6ddb80858c515c4
-title: الخطوة 86
-challengeType: 0
-dashedName: step-86
----
-
-# --description--
-
-حان الوقت لتصميم العناصر مع فئة (class) تسمى `eyes`. استخدم منتقي فئة (class selector) لتعيين `width` بقيمة `35px`، و `height` بقيمة `20px` و `background-color` بقيمة `#8B4513`، و `border-radius` بقيمة `20px 50%`.
-
-# --hints--
-
-يجب عليك إنشاء منتقي `.eyes`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.eyes'));
-```
-
-يجب أن يكون لمنتقي `.eyes` الخاص بك الخاصية `width` بقيمة `35px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.width === '35px');
-```
-
-يجب أن يكون لمنتقي `.eyes` الخاص بك الخاصية `height` بقيمة `20px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.height === '20px');
-```
-
-يجب أن يحتوي منتقي `.eyes` على خاصية `background-color` بقيمة `#8B4513`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.backgroundColor === 'rgb(139, 69, 19)');
-```
-
-يجب أن يكون لمنتقي `.eyes` الخاص بك الخاصية `border-radius` بقيمة `20px 50%`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px 50%');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- position: absolute;
- top: -100px;
- left: 5px;
- z-index: -1;
-}
-
-#eyes-div {
- width: 180px;
- height: 50px;
- position: absolute;
- top: -40px;
- left: 20px;
- z-index: 3;
-}
-
-#triangles {
- width: 250px;
- height: 550px;
-}
-
-.triangle {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 42px 45px 45px 0;
- border-top-color: transparent;
- border-right-color: Gold; /* yellow */
- border-bottom-color: transparent;
- border-left-color: transparent;
- display: inline-block;
-}
-
-#guitar {
- width: 100%;
- height: 100px;
- position: absolute;
- top: 120px;
- left: 0px;
- z-index: 3;
-}
-
-.guitar {
- width: 150px;
- height: 120px;
- background-color: Goldenrod;
- border-radius: 50%;
-}
-
-#guitar-left {
- position: absolute;
- left: 0px;
-}
-
-#guitar-right {
- position: absolute;
- left: 100px;
-}
-
-.fa-bars {
- display: block;
- margin-top: 30%;
- margin-left: 40%;
-}
-
-#guitar-neck {
- width: 200px;
- height: 30px;
- background-color: #D2691E;
- position: absolute;
- top: 45px;
- left: 200px;
- z-index: 3;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md
deleted file mode 100644
index a7a0f10b9d0..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md
+++ /dev/null
@@ -1,382 +0,0 @@
----
-id: 60b69a66b6ddb80858c515c5
-title: الخطوة 87
-challengeType: 0
-dashedName: step-87
----
-
-# --description--
-
-استهدف الـ `class` بقيمة `right` وعين `position` إلى `absolute` و `top` إلى `15px`و `right` إلى `30px`.
-
-# --hints--
-
-يجب عليك إنشاء منتقي `.right` جديد.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.right'));
-```
-
-يجب أن يكون لمنتقي `.right` الخاص بك الخاصية `position` بقيمة `absolute`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.right')?.position === 'absolute');
-```
-
-يجب أن يكون لمنتقي `.right` الخاص بك الخاصية `top` بقيمة `15px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.right')?.top === '15px');
-```
-
-يجب أن يكون لمنتقي `.right` الخاص بك الخاصية `right` بقيمة `30px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- position: absolute;
- top: -100px;
- left: 5px;
- z-index: -1;
-}
-
-#eyes-div {
- width: 180px;
- height: 50px;
- position: absolute;
- top: -40px;
- left: 20px;
- z-index: 3;
-}
-
-#triangles {
- width: 250px;
- height: 550px;
-}
-
-.triangle {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 42px 45px 45px 0;
- border-top-color: transparent;
- border-right-color: Gold; /* yellow */
- border-bottom-color: transparent;
- border-left-color: transparent;
- display: inline-block;
-}
-
-#guitar {
- width: 100%;
- height: 100px;
- position: absolute;
- top: 120px;
- left: 0px;
- z-index: 3;
-}
-
-.guitar {
- width: 150px;
- height: 120px;
- background-color: Goldenrod;
- border-radius: 50%;
-}
-
-#guitar-left {
- position: absolute;
- left: 0px;
-}
-
-#guitar-right {
- position: absolute;
- left: 100px;
-}
-
-.fa-bars {
- display: block;
- margin-top: 30%;
- margin-left: 40%;
-}
-
-#guitar-neck {
- width: 200px;
- height: 30px;
- background-color: #D2691E;
- position: absolute;
- top: 45px;
- left: 200px;
- z-index: 3;
-}
-
-.eyes {
- width: 35px;
- height: 20px;
- background-color: #8B4513;
- border-radius: 20px 50%;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md
deleted file mode 100644
index 61a6983af2c..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md
+++ /dev/null
@@ -1,388 +0,0 @@
----
-id: 60b69a66b6ddb80858c515c6
-title: الخطوة 88
-challengeType: 0
-dashedName: step-88
----
-
-# --description--
-
-للـ `class` بقيمة `left` قم بإنشاء المنتقي وتعيين `position` إلى `absolute` و `top` إلى `15px` و `left` إلى `30px`.
-
-# --hints--
-
-يجب عليك إنشاء منتقي `.left` جديد.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.left'));
-```
-
-يجب أن يكون لمنتقي `.left` الخاص بك الخاصية `position` بقيمة `absolute`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.left')?.position === 'absolute');
-```
-
-يجب أن يكون لمنتقي `.left` الخاص بك الخاصية `top` بقيمة `15px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.left')?.top === '15px');
-```
-
-يجب أن يكون لمنتقي `.left` الخاص بك الخاصية `left` بقيمة `30px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.left')?.left === '30px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- position: absolute;
- top: -100px;
- left: 5px;
- z-index: -1;
-}
-
-#eyes-div {
- width: 180px;
- height: 50px;
- position: absolute;
- top: -40px;
- left: 20px;
- z-index: 3;
-}
-
-#triangles {
- width: 250px;
- height: 550px;
-}
-
-.triangle {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 42px 45px 45px 0;
- border-top-color: transparent;
- border-right-color: Gold; /* yellow */
- border-bottom-color: transparent;
- border-left-color: transparent;
- display: inline-block;
-}
-
-#guitar {
- width: 100%;
- height: 100px;
- position: absolute;
- top: 120px;
- left: 0px;
- z-index: 3;
-}
-
-.guitar {
-width: 150px;
-height: 120px;
-background-color: Goldenrod;
-border-radius: 50%;
-}
-
-#guitar-left {
- position: absolute;
- left: 0px;
-}
-
-#guitar-right {
- position: absolute;
- left: 100px;
-}
-
-.fa-bars {
- display: block;
- margin-top: 30%;
- margin-left: 40%;
-}
-
-#guitar-neck {
- width: 200px;
- height: 30px;
- background-color: #D2691E;
- position: absolute;
- top: 45px;
- left: 200px;
- z-index: 3;
-}
-
-.eyes {
- width: 35px;
- height: 20px;
- background-color: #8B4513;
- border-radius: 20px 50%;
-}
-
-.right {
- position: absolute;
- top: 15px;
- right: 30px;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md
deleted file mode 100644
index 99f2a90efa8..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md
+++ /dev/null
@@ -1,739 +0,0 @@
----
-id: 60b69a66b6ddb80858c515c7
-title: الخطوة 89
-challengeType: 0
-dashedName: step-89
----
-
-# --description--
-
-خطوة واحدة أخيرة. أيقونات FontAwesome صغيرة جدا. استخدام منتقي الفئة (class selector) لاستهداف جميع `fas`، وعيّن `font-size` بقيمة `30px`.
-
-بهذا اكتمل رسم بيكاسو الخاص بك!
-
-# --hints--
-
-يجب عليك إنشاء منتقي `.fas`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.fas'));
-```
-
-يجب أن يكون لمنتقي `.fas` الخاص بك خاصية `font-size` بقيمة `30px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- position: absolute;
- top: -100px;
- left: 5px;
- z-index: -1;
-}
-
-#eyes-div {
- width: 180px;
- height: 50px;
- position: absolute;
- top: -40px;
- left: 20px;
- z-index: 3;
-}
-
-#triangles {
- width: 250px;
- height: 550px;
-}
-
-.triangle {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 42px 45px 45px 0;
- border-top-color: transparent;
- border-right-color: Gold; /* yellow */
- border-bottom-color: transparent;
- border-left-color: transparent;
- display: inline-block;
-}
-
-#guitar {
- width: 100%;
- height: 100px;
- position: absolute;
- top: 120px;
- left: 0px;
- z-index: 3;
-}
-
-.guitar {
- width: 150px;
- height: 120px;
- background-color: Goldenrod;
- border-radius: 50%;
-}
-
-#guitar-left {
- position: absolute;
- left: 0px;
-}
-
-#guitar-right {
- position: absolute;
- left: 100px;
-}
-
-.fa-bars {
- display: block;
- margin-top: 30%;
- margin-left: 40%;
-}
-
-#guitar-neck {
- width: 200px;
- height: 30px;
- background-color: #D2691E;
- position: absolute;
- top: 45px;
- left: 200px;
- z-index: 3;
-}
-
-.eyes {
- width: 35px;
- height: 20px;
- background-color: #8B4513;
- border-radius: 20px 50%;
-}
-
-.right {
- position: absolute;
- top: 15px;
- right: 30px;
-}
-
-.left {
- position: absolute;
- top: 15px;
- left: 30px;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
-
-# --solutions--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- position: absolute;
- top: -100px;
- left: 5px;
- z-index: -1;
-}
-
-#eyes-div {
- width: 180px;
- height: 50px;
- position: absolute;
- top: -40px;
- left: 20px;
- z-index: 3;
-}
-
-#triangles {
- width: 250px;
- height: 550px;
-}
-
-.triangle {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 42px 45px 45px 0;
- border-top-color: transparent;
- border-right-color: Gold; /* yellow */
- border-bottom-color: transparent;
- border-left-color: transparent;
- display: inline-block;
-}
-
-#guitar {
- width: 100%;
- height: 100px;
- position: absolute;
- top: 120px;
- left: 0px;
- z-index: 3;
-}
-
-.guitar {
- width: 150px;
- height: 120px;
- background-color: Goldenrod;
- border-radius: 50%;
-}
-
-#guitar-left {
- position: absolute;
- left: 0px;
-}
-
-#guitar-right {
- position: absolute;
- left: 100px;
-}
-
-.fa-bars {
- display: block;
- margin-top: 30%;
- margin-left: 40%;
-}
-
-#guitar-neck {
- width: 200px;
- height: 30px;
- background-color: #D2691E;
- position: absolute;
- top: 45px;
- left: 200px;
- z-index: 3;
-}
-
-.eyes {
- width: 35px;
- height: 20px;
- background-color: #8B4513;
- border-radius: 20px 50%;
-}
-
-.right {
- position: absolute;
- top: 15px;
- right: 30px;
-}
-
-.left {
- position: absolute;
- top: 15px;
- left: 30px;
-}
-
-.fas {
- font-size: 30px;
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md
deleted file mode 100644
index 9aa508e8afc..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md
+++ /dev/null
@@ -1,71 +0,0 @@
----
-id: 60b80da8676fb3227967a731
-title: الخطوة 3
-challengeType: 0
-dashedName: step-3
----
-
-# --description--
-
-امضي قدما واربط مِلَفّ CSS الخاص بك الآن، حتى وإن لم تكتب أي CSS حتى الآن.
-
-قم بإضافة عنصر `link` مع `rel` من `stylesheet` و `href` من `styles.css`.
-
-# --hints--
-
-
-الكود الخاص بك يجب أن يحتوي على عنصر `link`.
-
-```js
-assert.match(code, / link'));
-```
-
-عنصر `link` الخاص بك يجب أن يحتوي على سمة `rel` بقيمة `stylesheet`.
-
-```js
-const link_element = document.querySelector('link');
-const rel = link_element.getAttribute("rel");
-assert.equal(rel, "stylesheet");
-```
-
-عنصر `link` الخاص بك يجب أن يحتوي على سمة `href` بقيمة `styles.css`.
-
-```js
-const link = document.querySelector('link');
-assert.equal(link.dataset.href, "styles.css");
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- position: absolute;
- top: -100px;
- left: 5px;
- z-index: -1;
-}
-
-#eyes-div {
- width: 180px;
- height: 50px;
- position: absolute;
- top: -40px;
- left: 20px;
- z-index: 3;
-}
-
-#triangles {
- width: 250px;
- height: 550px;
-}
-
-.triangle {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 42px 45px 45px 0;
- border-top-color: transparent;
- border-right-color: Gold;
- border-bottom-color: transparent;
- border-left-color: transparent;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md
deleted file mode 100644
index 1453c0ecf8c..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md
+++ /dev/null
@@ -1,326 +0,0 @@
----
-id: 60ba89123a445e0f5c9e4022
-title: الخطوة 74
-challengeType: 0
-dashedName: step-74
----
-
-# --description--
-
-أعط العناصر `.triangle` اللون الصحيح. عيّن `border-top-color`، و`border-bottom-color`, و`border-left-color` إلى `transparent`. عيّن `border-right-color` إلى `Gold`.
-
-# --hints--
-
-يجب ان يحمل منتقي `.triangle` الخاص بك خاصية `border-top-color` بقيمة `transparent`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderTopColor === 'transparent');
-```
-
-يجب ان يحمل منتقي `.triangle` الخاص بك خاصية `border-bottom-color` بقيمة `transparent`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderBottomColor === 'transparent');
-```
-
-يجب ان يحمل منتقي `.triangle` الخاص بك خاصية `border-left-color` بقيمة `transparent`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderLeftColor === 'transparent');
-```
-
-يجب ان يحمل منتقي `.triangle` الخاص بك خاصية `border-right-color` بقيمة `Gold`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor === 'gold');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- position: absolute;
- top: -100px;
- left: 5px;
- z-index: -1;
-}
-
-#eyes-div {
- width: 180px;
- height: 50px;
- position: absolute;
- top: -40px;
- left: 20px;
- z-index: 3;
-}
-
-#triangles {
- width: 250px;
- height: 550px;
-}
-
-.triangle {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 42px 45px 45px 0;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md
deleted file mode 100644
index 451e0642ee5..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md
+++ /dev/null
@@ -1,312 +0,0 @@
----
-id: 60ba8913f1704c0f7a8906b8
-title: الخطوة 73
-challengeType: 0
-dashedName: step-73
----
-
-# --description--
-
-صمم حدود (style border) عناصرك `.triangle`. عيّن `border-style` بقيمة `solid` و`border-width` بقيمة `42px 45px 45px 0`.
-
-# --hints--
-
-يجب أن يحتوي منتقيك `.triangle` على خاصية `border-style` بقيمة `solid`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderStyle === 'solid');
-```
-
-يجب أن يحتوي منتقيك `.triangle` على خاصية `border-width` بقيمة `42px 45px 45px 0`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '42px 45px 45px 0px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- position: absolute;
- top: -100px;
- left: 5px;
- z-index: -1;
-}
-
-#eyes-div {
- width: 180px;
- height: 50px;
- position: absolute;
- top: -40px;
- left: 20px;
- z-index: 3;
-}
-
-#triangles {
- width: 250px;
- height: 550px;
-}
-
-.triangle {
- width: 0;
- height: 0;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md
deleted file mode 100644
index c4f4eb5617a..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md
+++ /dev/null
@@ -1,315 +0,0 @@
----
-id: 60ba89146b25080f99ab54ad
-title: الخطوة 72
-challengeType: 0
-dashedName: step-72
----
-
-# --description--
-
-إنشاء منتقي الفئة (class selector) تستهدف عناصر مع فئة (class) تسمى `triangle`. عيّن `width` إلى `0` و `height` إلى `0`.
-
-# --hints--
-
-يجب عليك إنشاء منتقي `.triangle` جديد.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.triangle'));
-```
-
-يجب أن يكون لمنتقي `.triangle` الخاص بك الخاصية `width` بقيمة `0`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.width === '0px');
-```
-
-يجب أن يكون لمنتقي `.triangle` الخاص بك الخاصية `height` بقيمة `0`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- position: absolute;
- top: -100px;
- left: 5px;
- z-index: -1;
-}
-
-#eyes-div {
- width: 180px;
- height: 50px;
- position: absolute;
- top: -40px;
- left: 20px;
- z-index: 3;
-}
-
-#triangles {
- width: 250px;
- height: 550px;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md
deleted file mode 100644
index 5cd46c094ae..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md
+++ /dev/null
@@ -1,310 +0,0 @@
----
-id: 60ba8914bab51f0fb8228e9c
-title: الخطوة 71
-challengeType: 0
-dashedName: step-71
----
-
-# --description--
-
-أستهدف عنصر مع معرف (id) يسمى `triangles` باستخدام محدد المعرف (id selector). عيّن `width` إلى `250px` و `height` إلى `550px`.
-
-# --hints--
-
-يجب عليك إضافة منتقي `#triangles`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#triangles'));
-```
-
-يجب أن يكون لمنتقيك `#triangles` على خاصية `width` بقيمة `250px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.width === '250px');
-```
-
-يجب أن يكون لمنتقيك `#triangles` على خاصية `height` بقيمة `550px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- position: absolute;
- top: -100px;
- left: 5px;
- z-index: -1;
-}
-
-#eyes-div {
- width: 180px;
- height: 50px;
- position: absolute;
- top: -40px;
- left: 20px;
- z-index: 3;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md
deleted file mode 100644
index d79c52bef77..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md
+++ /dev/null
@@ -1,327 +0,0 @@
----
-id: 60ba929345ab0714a3743655
-title: الخطوة 76
-challengeType: 0
-dashedName: step-76
----
-
-# --description--
-
-الآن استخدم منتقي المعرف (id selector) بقيمة `guitar`. عيّن `width` بقيمة `100%`, و `height` بقيمة `100px`.
-
-# --hints--
-
-يجب عليك إنشاء منتقي `#guitar`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#guitar'));
-```
-
-يجب أن يحتوي منتقيك `#guitar` على خاصية `width` بقيمة `100%`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.width === '100%');
-```
-
-يجب أن يحتوي منتقيك `#guitar` على خاصية `height` بقيمة `100px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- position: absolute;
- top: -100px;
- left: 5px;
- z-index: -1;
-}
-
-#eyes-div {
- width: 180px;
- height: 50px;
- position: absolute;
- top: -40px;
- left: 20px;
- z-index: 3;
-}
-
-#triangles {
- width: 250px;
- height: 550px;
-}
-
-.triangle {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 42px 45px 45px 0;
- border-top-color: transparent;
- border-right-color: Gold;
- border-bottom-color: transparent;
- border-left-color: transparent;
- display: inline-block;
-}
-
---fcc-editable-region--
-
---fcc-editable-region--
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md
deleted file mode 100644
index 0c1ebe3006e..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md
+++ /dev/null
@@ -1,330 +0,0 @@
----
-id: 60ba9296d4d6b414c1b10995
-title: الخطوة 77
-challengeType: 0
-dashedName: step-77
----
-
-# --description--
-
-في نفس منتقي `#guitar`، عيّن `position` بقيمة `absolute`, و`top` بقيمة `120px`, و`left` بقيمة `0px`.
-
-# --hints--
-
-يجب أن يكون لمنتقي `#guitar` الخاص بك خاصية `position` بقيمة `absolute`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.position === 'absolute');
-```
-
-يجب أن يكون لدى منتقي `#guitar` خاصية `top` تم تعيينها إلى `120px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.top === '120px');
-```
-
-يجب أن يكون لدى منتقي `#guitar` خاصية `left` تم تعيينها إلى `0px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- position: absolute;
- top: -100px;
- left: 5px;
- z-index: -1;
-}
-
-#eyes-div {
- width: 180px;
- height: 50px;
- position: absolute;
- top: -40px;
- left: 20px;
- z-index: 3;
-}
-
-#triangles {
- width: 250px;
- height: 550px;
-}
-
-.triangle {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 42px 45px 45px 0;
- border-top-color: transparent;
- border-right-color: Gold;
- border-bottom-color: transparent;
- border-left-color: transparent;
- display: inline-block;
-}
-
-#guitar {
- width: 100%;
- height: 100px;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md
deleted file mode 100644
index 20d2fb9b5a9..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md
+++ /dev/null
@@ -1,321 +0,0 @@
----
-id: 60ba92987c1e4914dfa7a0b9
-title: الخطوة 78
-challengeType: 0
-dashedName: step-78
----
-
-# --description--
-
-اعطي معرف `#guitar` خاصية `z-index` بقيمة `3`.
-
-# --hints--
-
-يجب أن يكون لدى منتقي `#guitar` خاصية `z-index` تم تعيينها إلى `3`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 150px 0 0 300px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: transparent;
- border-left-color: rgb(45, 31, 19);
- position: absolute;
- top: -150px;
- left: 0;
-}
-
-#gray-mask {
- width: 150px;
- height: 150px;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: -10px;
- left: 70px;
-}
-
-#white-paper {
- width: 400px;
- height: 100px;
- background-color: GhostWhite;
- position: absolute;
- top: 250px;
- left: -150px;
- z-index: 1;
-}
-
-.fa-music {
- display: inline-block;
- margin-top: 8%;
- margin-left: 13%;
-}
-
-.blue {
- background-color: #1E90FF;
-}
-
-#blue-left {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 20%;
- left: 20%;
-}
-
-#blue-right {
- width: 400px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 40%;
-}
-
-#orange-character {
- width: 250px;
- height: 550px;
- background-color: rgb(240, 78, 42);
- position: absolute;
- top: 25%;
- left: 40%;
-}
-
-#black-round-hat {
- width: 180px;
- height: 150px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- position: absolute;
- top: -100px;
- left: 5px;
- z-index: -1;
-}
-
-#eyes-div {
- width: 180px;
- height: 50px;
- position: absolute;
- top: -40px;
- left: 20px;
- z-index: 3;
-}
-
-#triangles {
- width: 250px;
- height: 550px;
-}
-
-.triangle {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 42px 45px 45px 0;
- border-top-color: transparent;
- border-right-color: Gold;
- border-bottom-color: transparent;
- border-left-color: transparent;
- display: inline-block;
-}
-
-#guitar {
- width: 100%;
- height: 100px;
- position: absolute;
- top: 120px;
- left: 0px;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md
deleted file mode 100644
index 71b5b171f55..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md
+++ /dev/null
@@ -1,164 +0,0 @@
----
-id: 60bad32219ebcb4a8810ac6a
-title: الخطوة 41
-challengeType: 0
-dashedName: step-41
----
-
-# --description--
-
-عيّن `border-width` في `#black-hat` بقيمة `150px 0 0 300px`.
-
-# --hints--
-
-يجب أن يحتوي منتقيك `#black-hat` على خاصية `border-width` بقيمة `150px 0 0 300px`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderWidth === '150px 0px 0px 300px');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: rgb(184, 132, 46);
-}
-
-#back-wall {
- background-color: #8B4513;
- width: 100%;
- height: 60%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-}
-
-#offwhite-character {
- width: 300px;
- height: 550px;
- background-color: GhostWhite;
- position: absolute;
- top: 20%;
- left: 17.5%;
-}
-
-#white-hat {
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 120px 140px 180px;
- border-top-color: transparent;
- border-right-color: transparent;
- border-bottom-color: GhostWhite;
- border-left-color: transparent;
- position: absolute;
- top: -140px;
- left: 0;
-}
-
-#black-mask {
- width: 100%;
- height: 50px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
-}
-
-#gray-instrument {
- width: 15%;
- height: 40%;
- background-color: rgb(167, 162, 117);
- position: absolute;
- top: 50px;
- left: 125px;
- z-index: 1;
-}
-
-.black-dot {
- width: 10px;
- height: 10px;
- background-color: rgb(45, 31, 19);
- border-radius: 50%;
- display: block;
- margin: auto;
- margin-top: 65%;
-}
-
-#tan-table {
- width: 450px;
- height: 140px;
- background-color: #D2691E;
- position: absolute;
- top: 275px;
- left: 15px;
- z-index: 1;
-}
-
-#black-character {
- width: 300px;
- height: 500px;
- background-color: rgb(45, 31, 19);
- position: absolute;
- top: 30%;
- left: 59%;
-}
-
-#black-hat {
- width: 0;
- height: 0;
- border-style: solid;
- --fcc-editable-region--
-
- --fcc-editable-region--
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md
deleted file mode 100644
index 332ca10b1ad..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md
+++ /dev/null
@@ -1,116 +0,0 @@
----
-id: 615f5c1cb7575c7551ed8a40
-title: الخطوة 35
-challengeType: 0
-dashedName: step-35
----
-
-# --description--
-
-حجم الخط الكبير للرقم `230` يتسبب في overflow. اعطي `.calories-info h1` خاصية `overflow` بقيمة `hidden` لتجنب هذا.
-
-# --hints--
-
-يجب أن يكون لمنتقي `.calories-info h1` الخاص بك الخاصية `overflow` بقيمة `hidden`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.overflow === 'hidden');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```css
-* {
- box-sizing: border-box;
-}
-
-html {
- font-size: 16px;
-}
-
-body {
- font-family: 'Open Sans', sans-serif;
-}
-
-.label {
- border: 2px solid black;
- width: 270px;
- margin: 20px auto;
- padding: 0 7px;
-}
-
-header h1 {
- text-align: center;
- margin: -4px 0;
- letter-spacing: 0.15px
-}
-
-p {
- margin: 0;
-}
-
-.divider {
- border-bottom: 1px solid #888989;
- margin: 2px 0;
-}
-
-.bold {
- font-weight: 800;
-}
-
-.right {
- float: right;
-}
-
-.lg {
- height: 10px;
-}
-
-.lg, .md {
- background-color: black;
- border: 0;
-}
-
-.sm-text {
- font-size: 0.85rem;
-}
-
---fcc-editable-region--
-.calories-info h1 {
- margin: -5px -2px;
-}
---fcc-editable-region--
-
-.calories-info span {
- font-size: 1.2em;
-}
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md
deleted file mode 100644
index 002a852eae0..00000000000
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md
+++ /dev/null
@@ -1,127 +0,0 @@
----
-id: 615f6a7d4ba8037bc086c2c7
-title: الخطوة 41
-challengeType: 0
-dashedName: step-41
----
-
-# --description--
-
-قم بإعطاء منتقي `.divider` خاصية `clear` بقيمة `right`. سيؤدي هذا إلى مسح خاصية `float` ، مما سيدفع الـ divider وأي محتوى تالي أسفل نص `float`.
-
-# --hints--
-
-يجب أن يكون لمنتقي `.divider` الخاص بك خاصية `clear` بقيمة `right`.
-
-```js
-assert(new __helpers.CSSHelp(document).getStyle('.divider')?.clear === 'right');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
- Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-
-
- Amount per serving
-Calories 230
-
-
-
-
-
-
-
-```
-
-```css
-* {
- box-sizing: border-box;
-}
-
-html {
- font-size: 16px;
-}
-
-body {
- font-family: 'Open Sans', sans-serif;
-}
-
-.label {
- border: 2px solid black;
- width: 270px;
- margin: 20px auto;
- padding: 0 7px;
-}
-
-header h1 {
- text-align: center;
- margin: -4px 0;
- letter-spacing: 0.15px
-}
-
-p {
- margin: 0;
-}
-
---fcc-editable-region--
-.divider {
- border-bottom: 1px solid #888989;
- margin: 2px 0;
-}
---fcc-editable-region--
-
-.bold {
- font-weight: 800;
-}
-
-.right {
- float: right;
-}
-
-.lg {
- height: 10px;
-}
-
-.lg, .md {
- background-color: black;
- border: 0;
-}
-
-.md {
- height: 5px;
-}
-
-.sm-text {
- font-size: 0.85rem;
-}
-
-.calories-info h1 {
- margin: -5px -2px;
- overflow: hidden;
-}
-
-.calories-info span {
- font-size: 1.2em;
- margin-top: -7px;
-}
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md
deleted file mode 100644
index 9994a599779..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md
+++ /dev/null
@@ -1,88 +0,0 @@
----
-id: 56533eb9ac21ba0edf2244e2
-title: بناء شفرة قيصر
-challengeType: 5
-forumTopicId: 16003
-dashedName: build-a-caesars-cipher
----
-
-# --description--
-
-One of the simplest and most widely known ciphers is a Caesar cipher, also known as a shift cipher. In a shift cipher the meanings of the letters are shifted by some set amount.
-
-A common modern use is the ROT13 cipher, where the values of the letters are shifted by 13 places. Thus `A ↔ N`, `B ↔ O` and so on.
-
-Write a function which takes a ROT13 encoded string as input and returns a decoded string.
-
-All letters will be uppercase. Do not transform any non-alphabetic character (i.e. spaces, punctuation), but do pass them on.
-
-# --hints--
-
-`rot13("SERR PBQR PNZC")` should decode to the string `FREE CODE CAMP`
-
-```js
-assert(rot13('SERR PBQR PNZC') === 'FREE CODE CAMP');
-```
-
-`rot13("SERR CVMMN!")` should decode to the string `FREE PIZZA!`
-
-```js
-assert(rot13('SERR CVMMN!') === 'FREE PIZZA!');
-```
-
-`rot13("SERR YBIR?")` should decode to the string `FREE LOVE?`
-
-```js
-assert(rot13('SERR YBIR?') === 'FREE LOVE?');
-```
-
-`rot13("GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.")` should decode to the string `THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.`
-
-```js
-assert(
- rot13('GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.') ===
- 'THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.'
-);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```js
-function rot13(str) {
- return str;
-}
-
-rot13("SERR PBQR PNZC");
-```
-
-# --solutions--
-
-```js
-var lookup = {
- 'A': 'N','B': 'O','C': 'P','D': 'Q',
- 'E': 'R','F': 'S','G': 'T','H': 'U',
- 'I': 'V','J': 'W','K': 'X','L': 'Y',
- 'M': 'Z','N': 'A','O': 'B','P': 'C',
- 'Q': 'D','R': 'E','S': 'F','T': 'G',
- 'U': 'H','V': 'I','W': 'J','X': 'K',
- 'Y': 'L','Z': 'M'
-};
-
-function rot13(encodedStr) {
- var codeArr = encodedStr.split(""); // String to Array
- var decodedArr = []; // Your Result goes here
- // Only change code below this line
-
- decodedArr = codeArr.map(function(letter) {
- if(lookup.hasOwnProperty(letter)) {
- letter = lookup[letter];
- }
- return letter;
- });
-
- // Only change code above this line
- return decodedArr.join(""); // Array to String
-}
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md
deleted file mode 100644
index 5b35906c8c7..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md
+++ /dev/null
@@ -1,252 +0,0 @@
----
-id: aa2e6f85cab2ab736c9a9b24
-title: أنشئ مكنة لتسجيل النقود
-challengeType: 5
-forumTopicId: 16012
-dashedName: build-a-cash-register
----
-
-# --description--
-
-صمم وظيفة درج لتسجيل النقود `checkCashRegister()` التي تقبل سعر الشراء كمعطى أولى (`price`)، و الدفع كمعطى ثاني (`cash`)، و cash-in-drawer أي النقود في الدرج (`cid`) كمعطى ثالث.
-
-`cid` is a 2D array listing available currency.
-
-يجب أن تقوم وظيفة `checkCashRegister()` دائما بإنتاج كائن يحتوي على الهوية (key) المسمى `status` و الهوية `change`.
-
-Return `{status: "INSUFFICIENT_FUNDS", change: []}` if cash-in-drawer is less than the change due, or if you cannot return the exact change.
-
-Return `{status: "CLOSED", change: [...]}` with cash-in-drawer as the value for the key `change` if it is equal to the change due.
-
-Otherwise, return `{status: "OPEN", change: [...]}`, with the change due in coins and bills, sorted in highest to lowest order, as the value of the `change` key.
-
-Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
-
-
-
- Amount per serving
-Calories 230
-
-
- % Daily Value *
- -| Currency Unit | Amount |
|---|---|
| Penny | $0.01 (PENNY) |
| Nickel | $0.05 (NICKEL) |
| Dime | $0.1 (DIME) |
| Quarter | $0.25 (QUARTER) |
| Dollar | $1 (ONE) |
| Five Dollars | $5 (FIVE) |
| Ten Dollars | $10 (TEN) |
| Twenty Dollars | $20 (TWENTY) |
| One-hundred Dollars | $100 (ONE HUNDRED) |
555-555-5555- -For this challenge you will be presented with a string such as `800-692-7753` or `8oo-six427676;laskdjf`. Your job is to validate or reject the US phone number based on any combination of the formats provided above. The area code is required. If the country code is provided, you must confirm that the country code is `1`. Return `true` if the string is a valid US phone number; otherwise return `false`. - -# --hints-- - -`telephoneCheck("555-555-5555")` should return a boolean. - -```js -assert(typeof telephoneCheck('555-555-5555') === 'boolean'); -``` - -`telephoneCheck("1 555-555-5555")` should return `true`. - -```js -assert(telephoneCheck('1 555-555-5555') === true); -``` - -`telephoneCheck("1 (555) 555-5555")` should return `true`. - -```js -assert(telephoneCheck('1 (555) 555-5555') === true); -``` - -`telephoneCheck("5555555555")` should return `true`. - -```js -assert(telephoneCheck('5555555555') === true); -``` - -`telephoneCheck("555-555-5555")` should return `true`. - -```js -assert(telephoneCheck('555-555-5555') === true); -``` - -`telephoneCheck("(555)555-5555")` should return `true`. - -```js -assert(telephoneCheck('(555)555-5555') === true); -``` - -`telephoneCheck("1(555)555-5555")` should return `true`. - -```js -assert(telephoneCheck('1(555)555-5555') === true); -``` - -`telephoneCheck("555-5555")` should return `false`. - -```js -assert(telephoneCheck('555-5555') === false); -``` - -`telephoneCheck("5555555")` should return `false`. - -```js -assert(telephoneCheck('5555555') === false); -``` - -`telephoneCheck("1 555)555-5555")` should return `false`. - -```js -assert(telephoneCheck('1 555)555-5555') === false); -``` - -`telephoneCheck("1 555 555 5555")` should return `true`. - -```js -assert(telephoneCheck('1 555 555 5555') === true); -``` - -`telephoneCheck("1 456 789 4444")` should return `true`. - -```js -assert(telephoneCheck('1 456 789 4444') === true); -``` - -`telephoneCheck("123**&!!asdf#")` should return `false`. - -```js -assert(telephoneCheck('123**&!!asdf#') === false); -``` - -`telephoneCheck("55555555")` should return `false`. - -```js -assert(telephoneCheck('55555555') === false); -``` - -`telephoneCheck("(6054756961)")` should return `false`. - -```js -assert(telephoneCheck('(6054756961)') === false); -``` - -`telephoneCheck("2 (757) 622-7382")` should return `false`. - -```js -assert(telephoneCheck('2 (757) 622-7382') === false); -``` - -`telephoneCheck("0 (757) 622-7382")` should return `false`. - -```js -assert(telephoneCheck('0 (757) 622-7382') === false); -``` - -`telephoneCheck("-1 (757) 622-7382")` should return `false`. - -```js -assert(telephoneCheck('-1 (757) 622-7382') === false); -``` - -`telephoneCheck("2 757 622-7382")` should return `false`. - -```js -assert(telephoneCheck('2 757 622-7382') === false); -``` - -`telephoneCheck("10 (757) 622-7382")` should return `false`. - -```js -assert(telephoneCheck('10 (757) 622-7382') === false); -``` - -`telephoneCheck("27576227382")` should return `false`. - -```js -assert(telephoneCheck('27576227382') === false); -``` - -`telephoneCheck("(275)76227382")` should return `false`. - -```js -assert(telephoneCheck('(275)76227382') === false); -``` - -`telephoneCheck("2(757)6227382")` should return `false`. - -```js -assert(telephoneCheck('2(757)6227382') === false); -``` - -`telephoneCheck("2(757)622-7382")` should return `false`. - -```js -assert(telephoneCheck('2(757)622-7382') === false); -``` - -`telephoneCheck("555)-555-5555")` should return `false`. - -```js -assert(telephoneCheck('555)-555-5555') === false); -``` - -`telephoneCheck("(555-555-5555")` should return `false`. - -```js -assert(telephoneCheck('(555-555-5555') === false); -``` - -`telephoneCheck("(555)5(55?)-5555")` should return `false`. - -```js -assert(telephoneCheck('(555)5(55?)-5555') === false); -``` - -`telephoneCheck("55 55-55-555-5")` should return `false`. - -```js -assert(telephoneCheck('55 55-55-555-5') === false); -``` - -`telephoneCheck("11 555-555-5555")` should return `false`. - -```js -assert(telephoneCheck('11 555-555-5555') === false); -``` - -# --seed-- - -## --seed-contents-- - -```js -function telephoneCheck(str) { - return true; -} - -telephoneCheck("555-555-5555"); -``` - -# --solutions-- - -```js -var re = /^([+]?1[\s]?)?((?:[(](?:[2-9]1[02-9]|[2-9][02-8][0-9])[)][\s]?)|(?:(?:[2-9]1[02-9]|[2-9][02-8][0-9])[\s.-]?)){1}([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2}[\s.-]?){1}([0-9]{4}){1}$/; - -function telephoneCheck(str) { - return re.test(str); -} - -telephoneCheck("555-555-5555"); -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md deleted file mode 100644 index 63ecefac153..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 62a3b365f1cdeb33efc2502e -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -You have been declaring your variables with the `var` keyword. However, in modern JavaScript it is best practice to use the `let` keyword instead. This fixes several unusual behaviors with `var` that can make your code difficult to debug. - -Change all of your `var` keywords to `let`. - -# --hints-- - -You should not have any `var` keywords in your code. - -```js -assert.notMatch(code, /var/); -``` - -You should use the `let` keyword to declare your `xp` variable. - -```js -assert.match(code, /let xp/); -``` - -You should use the `let` keyword to declare your `health` variable. - -```js -assert.match(code, /let health/); -``` - -You should use the `let` keyword to declare your `gold` variable. - -```js -assert.match(code, /let gold/); -``` - -You should use the `let` keyword to declare your `currentWeapon` variable. - -```js -assert.match(code, /let currentWeapon/); -``` - -You should not change the values of your variables. - -```js -assert.equal(xp, 0); -assert.equal(health, 100); -assert.equal(gold, 50); -assert.equal(currentWeapon, 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - -
(555)555-5555
(555) 555-5555
555 555 5555
5555555555
1 555 555 5555
-
-
-
-```
-
-```css
-body {
- background-color: darkblue;
-}
-
-#text {
- background-color: black;
- color: white;
- padding: 10px;
-}
-
-#game {
- max-width: 500px;
- max-height: 400px;
- background-color: lightgray;
- color: white;
- margin: 0 auto;
- padding: 10px;
-}
-
-#controls, #stats {
- border: 1px solid black;
- padding: 5px;
- color: black;
-}
-
-#monsterStats {
- display: none;
- border: 1px solid black;
- padding: 5px;
- color: white;
- background-color: red;
-}
-
-.stat {
- padding-right: 10px;
-}
-```
-
-```js
---fcc-editable-region--
-var xp = 0;
-var health = 100;
-var gold = 50;
-var currentWeapon = 0;
---fcc-editable-region--
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md
deleted file mode 100644
index cd564871491..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md
+++ /dev/null
@@ -1,355 +0,0 @@
----
-id: 62a8f2bc37675e77d5835235
-title: Step 139
-challengeType: 0
-dashedName: step-139
----
-
-# --description--
-
-JavaScript has a conditional operator called the ternary operator. This can be used as a one-line `if-else` expression. The syntax is: `condition ? true : false`.
-
-Here is an example of an `if-else` expression changed to a ternary:
-
-```js
-if (num > 5) {
- bigger()
-} else {
- smaller()
-}
-
-num > 5 ? bigger() : smaller();
-```
-
-Change your new `if-else` expression to a ternary.
-
-# --hints--
-
-You should remove the `if` and `else` from your `else if` block.
-
-```js
-const block = attack.toString().split("else if");
-assert.notMatch(block[1], /if/);
-assert.notMatch(block[1], /else/);
-```
-
-You should check if `fighting` is equal to `2`.
-
-```js
-const block = attack.toString().split("else if");
-assert.match(block[1], /fighting\s*===\s*2/);
-```
-
-Using the ternary syntax, you should call `winGame` if `fighting` is equal to `2`.
-
-```js
-const block = attack.toString().split("else if");
-assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)/);
-```
-
-Using the ternary syntax, you should call `defeatMonster` if `fighting` is not equal to `2`.
-
-```js
-const block = attack.toString().split("else if");
-assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)\s*\:\s*defeatMonster\(\)/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- XP: 0
- Health: 100
- Gold: 50
-
-
-
-
-
-
-
- Monster Name:
- Health:
-
-
- Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-
-
-
-
-
-```
-
-```css
-body {
- background-color: darkblue;
-}
-
-#text {
- background-color: black;
- color: white;
- padding: 10px;
-}
-
-#game {
- max-width: 500px;
- max-height: 400px;
- background-color: lightgray;
- color: white;
- margin: 0 auto;
- padding: 10px;
-}
-
-#controls, #stats {
- border: 1px solid black;
- padding: 5px;
- color: black;
-}
-
-#monsterStats {
- display: none;
- border: 1px solid black;
- padding: 5px;
- color: white;
- background-color: red;
-}
-
-.stat {
- padding-right: 10px;
-}
-```
-
-```js
-let xp = 0;
-let health = 100;
-let gold = 50;
-let currentWeapon = 0;
-let fighting;
-let monsterHealth;
-let inventory = ["stick"];
-
-const button1 = document.querySelector('#button1');
-const button2 = document.querySelector("#button2");
-const button3 = document.querySelector("#button3");
-const text = document.querySelector("#text");
-const xpText = document.querySelector("#xpText");
-const healthText = document.querySelector("#healthText");
-const goldText = document.querySelector("#goldText");
-const monsterStats = document.querySelector("#monsterStats");
-const monsterName = document.querySelector("#monsterName");
-const monsterHealthText =document.querySelector("#monsterHealth");
-const weapons = [
- { name: 'stick', power: 5 },
- { name: 'dagger', power: 30 },
- { name: 'claw hammer', power: 50 },
- { name: 'sword', power: 100 }
-];
-const monsters = [
- {
- name: "slime",
- level: 2,
- health: 15
- },
- {
- name: "fanged beast",
- level: 8,
- health: 60
- },
- {
- name: "dragon",
- level: 20,
- health: 300
- }
-]
-const locations = [
- {
- name: "town square",
- "button text": ["Go to store", "Go to cave", "Fight dragon"],
- "button functions": [goStore, goCave, fightDragon],
- text: "You are in the town square. You see a sign that says \"Store\"."
- },
- {
- name: "store",
- "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
- "button functions": [buyHealth, buyWeapon, goTown],
- text: "You enter the store."
- },
- {
- name: "cave",
- "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
- "button functions": [fightSlime, fightBeast, goTown],
- text: "You enter the cave. You see some monsters."
- },
- {
- name: "fight",
- "button text": ["Attack", "Dodge", "Run"],
- "button functions": [attack, dodge, goTown],
- text: "You are fighting a monster."
- },
- {
- name: "kill monster",
- "button text": ["Go to town square", "Go to town square", "Go to town square"],
- "button functions": [goTown, goTown, goTown],
- text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
- },
- {
- name: "lose",
- "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
- "button functions": [restart, restart, restart],
- text: "You die. ☠️"
- }
-];
-
-// initialize buttons
-button1.onclick = goStore;
-button2.onclick = goCave;
-button3.onclick = fightDragon;
-
-function update(location) {
- monsterStats.style.display = "none";
- button1.innerText = location["button text"][0];
- button2.innerText = location["button text"][1];
- button3.innerText = location["button text"][2];
- button1.onclick = location["button functions"][0];
- button2.onclick = location["button functions"][1];
- button3.onclick = location["button functions"][2];
- text.innerText = location.text;
-}
-
-function goTown() {
- update(locations[0]);
-}
-
-function goStore() {
- update(locations[1]);
-}
-
-function goCave() {
- update(locations[2]);
-}
-
-function buyHealth() {
- if (gold >= 10) {
- gold -= 10;
- health += 10;
- goldText.innerText = gold;
- healthText.innerText = health;
- } else {
- text.innerText = "You do not have enough gold to buy health.";
- }
-}
-
-function buyWeapon() {
- if (currentWeapon < weapons.length - 1) {
- if (gold >= 30) {
- gold -= 30;
- currentWeapon++;
- goldText.innerText = gold;
- let newWeapon = weapons[currentWeapon].name;
- text.innerText = "You now have a " + newWeapon + ".";
- inventory.push(newWeapon);
- text.innerText += " In your inventory you have: " + inventory;
- } else {
- text.innerText = "You do not have enough gold to buy a weapon.";
- }
- } else {
- text.innerText = "You already have the most powerful weapon!";
- button2.innerText = "Sell weapon for 15 gold";
- button2.onclick = sellWeapon;
- }
-}
-
-function sellWeapon() {
- if (inventory.length > 1) {
- gold += 15;
- goldText.innerText = gold;
- let currentWeapon = inventory.shift();
- text.innerText = "You sold a " + currentWeapon + ".";
- text.innerText += " In your inventory you have: " + inventory;
- } else {
- text.innerText = "Don't sell your only weapon!";
- }
-}
-
-function fightSlime() {
- fighting = 0;
- goFight();
-}
-
-function fightBeast() {
- fighting = 1;
- goFight();
-}
-
-function fightDragon() {
- fighting = 2;
- goFight();
-}
-
-function goFight() {
- update(locations[3]);
- monsterHealth = monsters[fighting].health;
- monsterStats.style.display = "block";
- monsterName.innerText = monsters[fighting].name;
- monsterHealthText.innerText = monsterHealth;
-}
-
---fcc-editable-region--
-function attack() {
- text.innerText = "The " + monsters[fighting].name + " attacks.";
- text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
- health -= monsters[fighting].level;
- monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
- healthText.innerText = health;
- monsterHealthText.innerText = monsterHealth;
- if (health <= 0) {
- lose();
- } else if (monsterHealth <= 0) {
- if (fighting === 2) {
- winGame();
- } else {
- defeatMonster();
- }
- }
-}
---fcc-editable-region--
-
-function dodge() {
- text.innerText = "You dodge the attack from the " + monsters[fighting].name;
-}
-
-function defeatMonster() {
- gold += Math.floor(monsters[fighting].level * 6.7);
- xp += monsters[fighting].level;
- goldText.innerText = gold;
- xpText.innerText = xp;
- update(locations[4]);
-}
-
-function lose() {
- update(locations[5]);
-}
-
-function restart() {
- xp = 0;
- health = 100;
- gold = 50;
- currentWeapon = 0;
- inventory = ["stick"];
- goldText.innerText = gold;
- healthText.innerText = health;
- xpText.innerText = xp;
- goTown();
-}
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md
new file mode 100644
index 00000000000..d178d5a5a2b
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md
@@ -0,0 +1,682 @@
+---
+id: 659b0093d7db5a1a1122b7bd
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+To get the index for the current song, you can use the indexOf() method. The `indexOf()` array method returns the first index at which a given element can be found in the array, or `-1` if the element is not present.
+
+```js
+const animals = ["dog", "cat", "horse"];
+animals.indexOf("cat") // 1
+```
+
+Inside your `getCurrentSongIndex` function, return `userData?.songs.indexOf()`. For the `indexOf()` argument, set it to `userData.currentSong`.
+
+# --hints--
+
+You should return `userData?.songs.indexOf()` inside your `getCurrentSongIndex` function.
+
+```js
+assert.match(code, /const\s+getCurrentSongIndex\s*=\s*\(\)\s*=>(\s*userData\?\.songs\.indexOf\()|(\s*{\s*return?\s+userData\?\.songs\.indexOf\()/)
+```
+
+You should pass in `userData.currentSong` into the `indexOf()` method.
+
+```js
+assert.match(code, /const\s+getCurrentSongIndex\s*=\s*\(\)\s*=>(\s*userData\?\.songs\.indexOf\(userData\.currentSong\);?)|(\s*{\s*return\s+userData\?\.songs\.indexOf\(userData\.currentSong\);?)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
- XP: 0
- Health: 100
- Gold: 50
-
-
-
-
-
-
-
- Monster Name:
- Health:
-
-
- Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-
+
+
+
+
+```
+
+```css
+:root {
+ /* colors */
+ --primary-color: #dfdfe2;
+ --secondary-color: #ffffff;
+ --app-background-color: #4d4d62;
+ --background-color: #1b1b32;
+ --foreground-color: #3b3b4f;
+ --highlight-color: #f1be32;
+
+ /* font sizes */
+ --root-font-size: 16px;
+ font-size: var(--root-font-size);
+
+ /* font-families */
+ --font-headline: "Roboto Mono", monospace;
+ --font-family: "Lato", sans-serif;
+}
+
+*,
+*::after,
+*::before {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: var(--app-background-color);
+ color: var(--primary-color);
+ font-family: var(--font-family);
+}
+
+h1 {
+ font-size: 1.125rem;
+ line-height: 1.6;
+}
+
+h2 {
+ font-size: var(--root-font-size);
+}
+
+ul {
+ margin: 0;
+}
+
+.container {
+ margin-top: 10px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ row-gap: 5px;
+}
+
+.player,
+.playlist {
+ width: 450px;
+ background-color: var(--background-color);
+ border: 3px solid var(--foreground-color);
+}
+
+.player {
+ height: 260px;
+ padding: 10px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ row-gap: 10px;
+}
+
+.player-bar,
+.playlist-bar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 5px;
+ width: 100%;
+ height: 30px;
+ background-color: var(--foreground-color);
+}
+
+.parallel-lines {
+ display: flex;
+ flex-wrap: wrap;
+ row-gap: 6px;
+ padding: 0 5px;
+}
+
+.parallel-lines > div {
+ height: 2px;
+ width: 100%;
+ min-width: 75px;
+ background-color: var(--highlight-color);
+}
+
+.fcc-title,
+.playlist-title {
+ color: var(--secondary-color);
+ margin: 0 10px;
+ font-family: var(--font-headline);
+}
+
+.player-content {
+ display: flex;
+ background-color: var(--foreground-color);
+ width: 430px;
+ height: 200px;
+ column-gap: 13px;
+ align-items: center;
+ justify-content: center;
+}
+
+#player-album-art {
+ background-color: var(--secondary-color);
+ border: 6px solid var(--background-color);
+}
+
+#player-album-art img {
+ width: 150px;
+ display: block;
+}
+
+.player-display {
+ display: flex;
+ flex-direction: column;
+ row-gap: 20px;
+ padding: 14px;
+ background-color: var(--background-color);
+ height: 153px;
+ width: 226px;
+}
+
+.player-display-song-artist {
+ height: 80px;
+}
+
+.player-buttons svg {
+ fill: var(--primary-color);
+}
+
+.playing > svg {
+ fill: var(--highlight-color);
+}
+
+.player-buttons {
+ display: flex;
+ justify-content: space-around;
+}
+
+button {
+ background: transparent;
+ border: none;
+ color: var(--primary-color);
+ cursor: pointer;
+ font-size: var(--root-font-size);
+ outline-color: var(--highlight-color);
+ text-align: center;
+}
+
+.playlist-song {
+ outline-color: var(--highlight-color);
+}
+
+.playlist li:not(:last-child) {
+ border-bottom: 1px solid var(--background-color);
+}
+
+button:focus,
+.playlist-song:focus {
+ outline-style: dashed;
+ outline-width: 2px;
+}
+
+/* Playlist */
+.playlist {
+ height: auto;
+ padding: 10px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ row-gap: 10px;
+}
+
+#playlist-songs {
+ width: 430px;
+ height: 100%;
+ background-color: var(--foreground-color);
+ display: flex;
+ flex-direction: column;
+ row-gap: 8px;
+ padding: 8px 9px;
+ visibility: visible;
+ justify-content: start;
+ list-style: none;
+}
+
+.playlist-song {
+ display: flex;
+ height: 55px;
+ justify-content: space-between;
+ align-items: center;
+ padding: 5px;
+}
+
+[aria-current="true"] {
+ background-color: var(--background-color);
+}
+
+[aria-current="true"] p {
+ color: var(--highlight-color);
+}
+
+.playlist-song-info {
+ height: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-around;
+ column-gap: 7px;
+ padding: 5px 0;
+ font-family: var(--font-family);
+}
+
+#player-song-title,
+#player-song-artist {
+ margin: 0;
+}
+
+#player-song-artist {
+ color: var(--highlight-color);
+ font-size: 0.75rem;
+}
+
+#player-song-title {
+ font-size: 1.125rem;
+}
+
+.playlist-song-title {
+ font-size: 0.85rem;
+ width: 241px;
+ text-align: left;
+}
+
+.playlist-song-artist {
+ font-size: 0.725rem;
+ width: 80px;
+}
+
+.playlist-song-duration {
+ font-size: 0.725rem;
+ margin: auto;
+ font-family: var(--font-headline);
+ width: 30px;
+}
+
+.playlist-song-delete {
+ padding: 0;
+ width: 20px;
+ height: 20px;
+}
+
+.playlist-song-delete,
+.playlist-song-delete {
+ fill: var(--foreground-color);
+}
+
+.playlist-song-delete:hover circle,
+.playlist-song-delete:focus circle {
+ fill: #ff0000;
+}
+
+@media (max-width: 700px) {
+ .player,
+ .playlist {
+ width: 300px;
+ }
+
+ .player {
+ height: 340px;
+ }
+
+ #playlist-songs {
+ height: 280px;
+ padding: 5px 6px;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ scrollbar-color: var(--background-color) var(--secondary-color);
+ scrollbar-width: thin;
+ }
+
+ #playlist-songs::-webkit-scrollbar {
+ width: 5px;
+ }
+
+ #playlist-songs::-webkit-scrollbar-track {
+ background: var(--background-color);
+ }
+
+ #playlist-songs::-webkit-scrollbar-thumb {
+ background: var(--secondary-color);
+ }
+
+ h1 {
+ font-size: 0.813rem;
+ }
+
+ h2 {
+ font-size: 0.75rem;
+ }
+
+ .player-bar,
+ .playlist-bar,
+ .player-content,
+ #playlist-songs {
+ width: 280px;
+ }
+
+ .playlist-song {
+ justify-content: space-between;
+ }
+
+ .playlist-song-title {
+ width: 140px;
+ }
+
+ .playlist-song-artist {
+ width: 40px;
+ }
+
+ .playlist-song-duration > button {
+ padding: 0;
+ }
+
+ .player-content {
+ display: inline;
+ position: relative;
+ justify-items: center;
+ height: 100%;
+ }
+
+ #player-album-art {
+ z-index: -100;
+ height: 280px;
+ box-shadow: none;
+ background: #000;
+ }
+
+ #player-album-art img {
+ width: 100%;
+ opacity: 0.6;
+ }
+
+ .player-display-song-artist {
+ padding: 0 10px;
+ }
+
+ .player-display-song-artist > p {
+ white-space: pre-wrap;
+ }
+
+ .player-display {
+ position: absolute;
+ width: 100%;
+ z-index: 1000;
+ background-color: transparent;
+ top: 0;
+ height: 280px;
+ justify-content: space-between;
+ text-align: center;
+ }
+}
+```
+
+```js
+const playlistSongs = document.getElementById("playlist-songs");
+const playButton = document.getElementById("play");
+const pauseButton = document.getElementById("pause");
+const nextButton = document.getElementById("next");
+const previousButton = document.getElementById("previous");
+const shuffleButton = document.getElementById("shuffle");
+
+const allSongs = [
+ {
+ id: 0,
+ title: "Scratching The Surface",
+ artist: "Quincy Larson",
+ duration: "4:25",
+ src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3",
+ },
+ {
+ id: 1,
+ title: "Can't Stay Down",
+ artist: "Quincy Larson",
+ duration: "4:15",
+ src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3",
+ },
+ {
+ id: 2,
+ title: "Still Learning",
+ artist: "Quincy Larson",
+ duration: "3:51",
+ src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/still-learning.mp3",
+ },
+ {
+ id: 3,
+ title: "Cruising for a Musing",
+ artist: "Quincy Larson",
+ duration: "3:34",
+ src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cruising-for-a-musing.mp3",
+ },
+ {
+ id: 4,
+ title: "Never Not Favored",
+ artist: "Quincy Larson",
+ duration: "3:35",
+ src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/never-not-favored.mp3",
+ },
+ {
+ id: 5,
+ title: "From the Ground Up",
+ artist: "Quincy Larson",
+ duration: "3:12",
+ src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/from-the-ground-up.mp3",
+ },
+ {
+ id: 6,
+ title: "Walking on Air",
+ artist: "Quincy Larson",
+ duration: "3:25",
+ src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/walking-on-air.mp3",
+ },
+ {
+ id: 7,
+ title: "Can't Stop Me. Can't Even Slow Me Down.",
+ artist: "Quincy Larson",
+ duration: "3:52",
+ src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stop-me-cant-even-slow-me-down.mp3",
+ },
+ {
+ id: 8,
+ title: "The Surest Way Out is Through",
+ artist: "Quincy Larson",
+ duration: "3:10",
+ src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/the-surest-way-out-is-through.mp3",
+ },
+ {
+ id: 9,
+ title: "Chasing That Feeling",
+ artist: "Quincy Larson",
+ duration: "2:43",
+ src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/chasing-that-feeling.mp3",
+ },
+];
+
+const audio = new Audio();
+let userData = {
+ songs: [...allSongs],
+ currentSong: null,
+ songCurrentTime: 0,
+};
+
+const playSong = (id) => {
+ const song = userData?.songs.find((song) => song.id === id);
+ audio.src = song.src;
+ audio.title = song.title;
+
+ if (userData?.currentSong === null || userData?.currentSong.id !== song.id) {
+ audio.currentTime = 0;
+ } else {
+ audio.currentTime = userData.songCurrentTime;
+ }
+ userData.currentSong = song;
+ playButton.classList.add("playing");
+
+ audio.play();
+};
+
+const pauseSong = () => {
+ userData.songCurrentTime = audio.currentTime;
+
+ playButton.classList.remove("playing");
+ audio.pause();
+};
+
+const renderSongs = (array) => {
+ const songsHTML = array
+ .map((song)=> {
+ return `
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+ Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
---fcc-editable-region--
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md
deleted file mode 100644
index 6092f597046..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md
+++ /dev/null
@@ -1,304 +0,0 @@
----
-id: 63ee5e0f08e82208364c4128
-title: Step 13
-challengeType: 0
-dashedName: step-13
----
-
-# --description--
-
-Finally, after your `p` elements, create a `button` element. Give it an `id` set to the value of the `id` variable, a `class` of `btn add-to-cart-btn`, and use `Add to cart` for the text.
-
-# --hints--
-
-You should create a `button` element.
-
-```js
-assert.equal(document.querySelectorAll('.dessert-card button')?.length, 12);
-```
-
-Your `button` element should come after your `p` elements.
-
-```js
-assert.equal(document.querySelector('.dessert-card button')?.previousElementSibling?.tagName, 'P');
-assert.isNull(document.querySelector('.dessert-card button')?.nextElementSibling);
-```
-
-Your `button` element should have an `id` set to the value of the `id` variable.
-
-```js
-assert.equal(document.querySelector('.dessert-card button')?.id, '1');
-```
-
-Your `button` element should have a `class` of `btn add-to-cart-btn`.
-
-```js
-assert.include(document.querySelector('.dessert-card button')?.className, 'btn');
-assert.include(document.querySelector('.dessert-card button')?.className, 'add-to-cart-btn');
-```
-
-Your `button` element should have the text `Add to cart`.
-
-```js
-assert.equal(document.querySelector('.dessert-card button')?.textContent?.trim(), 'Add to cart');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- ${name}
- -Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
---fcc-editable-region--
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md
deleted file mode 100644
index 44ba9af32dc..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md
+++ /dev/null
@@ -1,303 +0,0 @@
----
-id: 63ee5ea8be892e0955ab346c
-title: Step 14
-challengeType: 0
-dashedName: step-14
----
-
-# --description--
-
-You are already familiar with an HTML `class`, but JavaScript also has a class. In JavaScript, a class is like a blueprint for creating objects. It allows you to define a set of properties and methods, and instantiate (or create) new objects with those properties and methods.
-
-The `class` keyword is used to declare a class. Here is an example of declaring a `Computer` class:
-
-```js
-class Computer {};
-```
-
-Declare a `ShoppingCart` class.
-
-# --hints--
-
-You should declare a `ShoppingCart` variable.
-
-```js
-assert.match(code, /ShoppingCart/);
-```
-
-You should use the `class` keyword to declare a `ShoppingCart` class.
-
-```js
-assert.match(code, /class\s+ShoppingCart\s*/);
-```
-
-Your `ShoppingCart` class should be empty.
-
-```js
-assert.match(code, /class\s+ShoppingCart\s*\{\s*\}/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- ${name}
-$${price}
-Category: ${category}
- -Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
---fcc-editable-region--
-
---fcc-editable-region--
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md
deleted file mode 100644
index 87839e53275..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md
+++ /dev/null
@@ -1,300 +0,0 @@
----
-id: 63ee5fc113bcb20a5db9214b
-title: Step 15
-challengeType: 0
-dashedName: step-15
----
-
-# --description--
-
-Classes have a special `constructor` method, which is called when a new instance of the class is created. The `constructor` method is a great place to initialize properties of the class. Here is an example of a class with a `constructor` method:
-
-```js
-class Computer {
- constructor() {
- }
-}
-```
-
-Add an empty `constructor` method to the `ShoppingCart` class.
-
-# --hints--
-
-You should add a `constructor` method to the `ShoppingCart` class.
-
-```js
-assert.match(code, /class\s+ShoppingCart\s*\{\s*constructor\(\s*\)\s*/)
-```
-
-Your `constructor` method should be empty.
-
-```js
-assert.match(code, /class\s+ShoppingCart\s*\{\s*constructor\(\s*\)\s*\{\s*\}\s*\}/)
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- ${name}
-$${price}
-Category: ${category}
- -Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
---fcc-editable-region--
-class ShoppingCart {
-
-};
---fcc-editable-region--
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md
deleted file mode 100644
index 4f7a2390687..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md
+++ /dev/null
@@ -1,316 +0,0 @@
----
-id: 63ee611d478dca0b77f6a393
-title: Step 16
-challengeType: 0
-dashedName: step-16
----
-
-# --description--
-
-The `this` keyword in JavaScript is used to refer to the current object. Depending on where `this` is used, what it references changes. In the case of a class, it refers to the instance of the object being constructed. You can use the `this` keyword to set the properties of the object being instantiated. Here is an example:
-
-```js
-class Computer {
- constructor() {
- this.ram = 16;
- }
-}
-```
-
-In your constructor, use the `this` keyword to set the `items` property to an empty array. Also, set the `total` property to `0`, and the `taxRate` property to `8.25`.
-
-# --hints--
-
-You should use the `this` keyword to set the `items` property of your class to an empty array.
-
-```js
-assert.match(code, /this\.items/);
-const cart = new ShoppingCart();
-assert.isArray(cart.items);
-assert.isEmpty(cart.items);
-```
-
-You should use the `this` keyword to set the `total` property of your class to `0`.
-
-```js
-assert.match(code, /this\.total/);
-const cart = new ShoppingCart();
-assert.equal(cart.total, 0);
-```
-
-You should use the `this` keyword to set the `taxRate` property of your class to `8.25`.
-
-```js
-assert.match(code, /this\.taxRate/);
-const cart = new ShoppingCart();
-assert.equal(cart.taxRate, 8.25);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- ${name}
-$${price}
-Category: ${category}
- -Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
---fcc-editable-region--
-class ShoppingCart {
- constructor() {
-
- }
-};
---fcc-editable-region--
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md
deleted file mode 100644
index 86c81b0332a..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md
+++ /dev/null
@@ -1,321 +0,0 @@
----
-id: 63ee7c664f9b65137d925c8a
-title: Step 17
-challengeType: 0
-dashedName: step-17
----
-
-# --description--
-
-Your `ShoppingCart` class needs the ability to add items. Create an empty `addItem` method, which takes two parameters: `id` and `products`. Creating a method might look like this:
-
-```js
-class Computer {
- constructor() {
- this.ram = 16;
- }
-
- addRam(amount) {
- this.ram += amount;
- }
-}
-```
-
-The first parameter, `id`, is the `id` of the product the user has added to their cart. The second parameter, `products`, is an array of product objects. By using a parameter instead of directly referencing your existing `products` array, this method will be more flexible if you wanted to add additional product lists in the future.
-
-# --hints--
-
-Your `ShoppingCart` class should have an `addItem` method.
-
-```js
-const cart = new ShoppingCart();
-assert.isFunction(cart.addItem);
-```
-
-Your `addItem` method should take two parameters: `id` and `products`.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /\(\s*id\s*,\s*products\s*\)/);
-```
-
-Your `addItem` method should be empty.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /\(\s*id\s*,\s*products\s*\)\s*\{\s*\}/);
-```
-
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- ${name}
-$${price}
-Category: ${category}
- -Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
---fcc-editable-region--
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
-
-};
---fcc-editable-region--
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md
deleted file mode 100644
index 88900979e4b..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md
+++ /dev/null
@@ -1,331 +0,0 @@
----
-id: 63eea5cea403a81a68ae493c
-title: Step 18
-challengeType: 0
-dashedName: step-18
----
-
-# --description--
-
-You need to find the product that the user is adding to the cart. Remember that arrays have a `.find()` method. In your `addItem` function, declare a `product` variable, and assign it the value of calling the `.find()` method on the `products` array.
-
-For the callback to `.find()`, pass a function that takes a single parameter `item`, and returns whether the `id` property of `item` is strictly equal to the `id` parameter passed to `addItem`.
-
-# --hints--
-
-You should declare a `product` variable in your `addItem` function.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /product\s*=/);
-```
-
-You should call the `.find()` method on your `products` array.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /products\.find\(/);
-```
-
-You should pass a callback function to the `.find()` method.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(/);
-```
-
-The callback function should take a single parameter.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(\s*item\s*\)/);
-```
-
-The callback function should return whether the `id` property of `item` is strictly equal to the `id` parameter passed to `addItem`.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(\s*item\s*\)\s*\{\s*return\s+item\.id\s*===\s*id\s*;?\s*\}/);
-```
-
-You should assign the value of the `.find()` method to the `product` variable.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /product\s*=\s*products\.find\(/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- ${name}
-$${price}
-Category: ${category}
- -Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
---fcc-editable-region--
- addItem(id, products) {
-
- }
---fcc-editable-region--
-};
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md
deleted file mode 100644
index fa4bbc91e2f..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md
+++ /dev/null
@@ -1,309 +0,0 @@
----
-id: 63eea817673c8e1c22927fa6
-title: Step 19
-challengeType: 0
-dashedName: step-19
----
-
-# --description--
-
-Use `const` and destructuring to extract `name` and `price` variables from `product`.
-
-# --hints--
-
-You should use destructuring to get the `name` and `price` variables.
-
-```js
-const afterAdd = code.split("addItem")[1];
-assert.match(afterAdd, /\{\s*name\s*,\s*price\s*\}/);
-```
-
-You should use `const` to declare the `name` and `price` variables.
-
-```js
-const afterAdd = code.split("addItem")[1];
-assert.match(afterAdd, /const\s*\{\s*name\s*,\s*price\s*\}/);
-```
-
-You should use destructuring to get the `name` and `price` variables from `product`.
-
-```js
-const afterAdd = code.split("addItem")[1];
-assert.match(afterAdd, /const\s*\{\s*name\s*,\s*price\s*\}\s*=\s*product;?\b/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- ${name}
-$${price}
-Category: ${category}
- -Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
---fcc-editable-region--
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
-
- }
---fcc-editable-region--
-};
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md
deleted file mode 100644
index 21089f88380..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md
+++ /dev/null
@@ -1,311 +0,0 @@
----
-id: 63eea8e1e143ae1d098c8c9d
-title: Step 20
-challengeType: 0
-dashedName: step-20
----
-
-# --description--
-
-Now you need to push the `product` into the cart's `items` array. Remember to use the `this` keyword.
-
-# --hints--
-
-You should call the `push` method on the `items` array.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /items\.push\(/);
-```
-
-Remember you need to use the `this` keyword to access the `items` array.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /this\.items\.push\(/);
-```
-
-You should `push` the `product` variable to the `items` array.
-
-```js
-const cart = new ShoppingCart();
-cart.addItem(1, products);
-assert.deepEqual(cart.items, [products[0]]);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- ${name}
-$${price}
-Category: ${category}
- -Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
---fcc-editable-region--
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
-
- }
---fcc-editable-region--
-};
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md
deleted file mode 100644
index f1583334ed8..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md
+++ /dev/null
@@ -1,312 +0,0 @@
----
-id: 63eeb8e86becbf1e75c2cb0d
-title: Step 21
-challengeType: 0
-dashedName: step-21
----
-
-# --description--
-
-You now need a total count of each product that the user has in the cart. Declare a `totalCountPerProduct` variable, and assign it an empty object.
-
-# --hints--
-
-You should declare a `totalCountPerProduct` variable in your `addItem` function.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /totalCountPerProduct\s*=/);
-```
-
-You should use `const` to declare `totalCountPerProduct`.
-
-```js
-const afterAdd = code.split("addItem")[1];
-assert.match(afterAdd, /const\s+totalCountPerProduct\s*=/);
-```
-
-You should assign an empty object to `totalCountPerProduct`.
-
-```js
-const afterAdd = code.split("addItem")[1];
-assert.match(afterAdd, /const\s+totalCountPerProduct\s*=\s*\{\s*\}/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- ${name}
-$${price}
-Category: ${category}
- -Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
---fcc-editable-region--
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
-
- }
---fcc-editable-region--
-};
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md
deleted file mode 100644
index af217952d82..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md
+++ /dev/null
@@ -1,327 +0,0 @@
----
-id: 63eedebb0ec0231ff1cede1a
-title: Step 22
-challengeType: 0
-dashedName: step-22
----
-
-# --description--
-
-Use the `.forEach()` method to loop through the `items` array. Pass an empty callback function that takes a single parameter `dessert`.
-
-# --hints--
-
-You should use the `.forEach()` method on your `items` array.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /items\.forEach\(/);
-```
-
-Remember to use the `this` keyword to access the `items` array.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /this\.items\.forEach\(/);
-```
-
-You should pass a callback function to the `.forEach()` method.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(/);
-```
-
-Your callback function should take a single parameter.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(\s*dessert\s*\)/);
-```
-
-Your callback function should be empty.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(\s*dessert\s*\)\s*\{\s*\}/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- ${name}
-$${price}
-Category: ${category}
- -Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
---fcc-editable-region--
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
-
- }
---fcc-editable-region--
-};
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md
deleted file mode 100644
index 24c1ac26daf..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md
+++ /dev/null
@@ -1,323 +0,0 @@
----
-id: 63efdbc22a0c56070beabed7
-title: Step 23
-challengeType: 0
-dashedName: step-23
----
-
-# --description--
-
-In your `forEach` callback, you need to update the `totalCountPerProduct` object. Using the `id` of the current `dessert` as your property, update the value of the property to be the current value plus one. Do not use the addition assignment operator for this.
-
-# --hints--
-
-You should use dot notation to access the `id` property of `dessert`.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /dessert\.id/);
-```
-
-You should use bracket notation to access the property of `totalCountPerProduct` that corresponds to `dessert.id`.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]/);
-```
-
-You should use the assignment operator to update the value of the property of `totalCountPerProduct` that corresponds to `dessert.id`.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=/);
-```
-
-You should update the value of `totalCountPerProduct` to be the current value plus one.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\+\s*1/);
-```
-
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- ${name}
-$${price}
-Category: ${category}
- -Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
---fcc-editable-region--
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
-
- })
- }
---fcc-editable-region--
-};
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md
deleted file mode 100644
index cba3963dbee..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md
+++ /dev/null
@@ -1,324 +0,0 @@
----
-id: 63efe370bbfc4a08d500118e
-title: Step 24
-challengeType: 0
-dashedName: step-24
----
-
-# --description--
-
-You now have a small bug. When you try to access a property of an object and the property doesn't exist, you get `undefined`. This means if the dessert isn't already present in the `totalCountPerProduct` object, you end up trying to add `1` to `undefined`, which results in `NaN`.
-
-To fix this, you can use the `||` operator to set the value to `0` if it doesn't exist. Wrap your right-hand `totalCountPerProduct[data.id]` in parentheses, and add `|| 0` to the end of the expression.
-
-# --hints--
-
-You should wrap your right-hand `totalCountPerProduct[data.id]` in parentheses.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]/);
-```
-
-You should use the `||` operator.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*/);
-```
-
-You should use `0` as your fallback value.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*0\s*\)/);
-```
-
-You should still add `1` to the value.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*0\s*\)\s*\+\s*1/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- ${name}
-$${price}
-Category: ${category}
- -Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
---fcc-editable-region--
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = totalCountPerProduct[dessert.id] + 1;
- })
- }
---fcc-editable-region--
-};
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md
deleted file mode 100644
index 5e3da866f36..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md
+++ /dev/null
@@ -1,317 +0,0 @@
----
-id: 63eff02f00e69a0b2ac10b43
-title: Step 25
-challengeType: 0
-dashedName: step-25
----
-
-# --description--
-
-Now you need to get prepared to update the display with the new product the user added. Declare a `currentProductCount` variable, and assign it the value of the `totalCountPerProduct` object's property matching the `id` of `product`.
-
-# --hints--
-
-You should declare a `currentProductCount` variable in your `addItem` function.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /currentProductCount\s*=/);
-```
-
-You should use `const` to declare `currentProductCount`.
-
-```js
-const afterAdd = code.split("addItem")[1];
-assert.match(afterAdd, /const\s+currentProductCount\s*=/);
-```
-
-You should assign the value of `totalCountPerProduct[product.id]` to `currentProductCount`.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /currentProductCount\s*=\s*totalCountPerProduct\[product\.id\]/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- ${name}
-$${price}
-Category: ${category}
- -Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
---fcc-editable-region--
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
-
- }
---fcc-editable-region--
-};
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md
deleted file mode 100644
index a1b63e599ad..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md
+++ /dev/null
@@ -1,336 +0,0 @@
----
-id: 63eff98ffb1d5a0d24ec79cb
-title: Step 26
-challengeType: 0
-dashedName: step-26
----
-
-# --description--
-
-You haven't written the code to generate the HTML yet, but if a product has already been added to the user's cart then there will be a matching element which you'll need.
-
-Use `.getElementById()` to get the matching element - you'll be setting the `id` value to `product-count-for-id${product.id}`, so use a template literal to query that value.
-
-Assign your query to a `currentProductCountSpan` variable.
-
-# --hints--
-
-You should declare a `currentProductCountSpan` variable.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /currentProductCountSpan\s*=/);
-```
-
-You should use `const` to declare `currentProductCountSpan`.
-
-```js
-const afterAdd = code.split("addItem")[1];
-assert.match(afterAdd, /const\s+currentProductCountSpan\s*=/);
-```
-
-You should use `document.getElementById()` to get the matching element.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /document\.getElementById\(/);
-```
-
-You should use a template literal to query the `id` value.
-
-```js
-const afterAdd = code.split("addItem")[1];
-assert.match(afterAdd, /document\.getElementById\(\s*`product-count-for-id\$\{(product\.)?id\}`\s*\)/);
-```
-
-You should assign the value of `document.getElementById()` to `currentProductCountSpan`.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /currentProductCountSpan\s*=\s*document\.getElementById\(/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- ${name}
-$${price}
-Category: ${category}
- -Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
---fcc-editable-region--
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
-
- }
---fcc-editable-region--
-};
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md
deleted file mode 100644
index 4573e021ac0..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md
+++ /dev/null
@@ -1,327 +0,0 @@
----
-id: 63effe558c87a70e7072e447
-title: Step 27
-challengeType: 0
-dashedName: step-27
----
-
-# --description--
-
-The behaviour of the `addItem` method needs to change if the product is already in the cart or not. Create a ternary that checks if the current product is already in the cart. Use `undefined` for both the truthy and falsy expressions to avoid a syntax error.
-
-# --hints--
-
-You should check if `currentProductCount` is greater than `1`.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1/);
-```
-
-You should use a ternary operator with your `currentProductCount > 1` condition.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?/);
-```
-
-You should use `undefined` as the truthy expression.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined/);
-```
-
-You should use `undefined` as the falsy expression.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined\s*:\s*undefined/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- ${name}
-$${price}
-Category: ${category}
- -Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
---fcc-editable-region--
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
-
- }
---fcc-editable-region--
-};
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md
deleted file mode 100644
index aebdaf9a24f..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md
+++ /dev/null
@@ -1,320 +0,0 @@
----
-id: 63f0165121a9181342d5bc66
-title: Step 28
-challengeType: 0
-dashedName: step-28
----
-
-# --description--
-
-For your truthy expression, removing the `undefined`, you need to update the `textContent` of the `currentProductCountSpan` to be the `currentProductCount` followed by an `x`. Use a template literal to do so.
-
-# --hints--
-
-You should remove the `undefined` from your truthy expression.
-
-```js
-const cart = new ShoppingCart();
-assert.notMatch(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined/);
-```
-
-You should access the `textContent` property of `currentProductCountSpan`.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*currentProductCountSpan\.textContent/);
-```
-
-You should use template literal syntax to update the `textContent` to be `${currentProductCount}x`.
-
-```js
-const afterAdd = code.split("addItem")[1];
-assert.match(afterAdd, /currentProductCount\s*>\s*1\s*\?\s*currentProductCountSpan\.textContent\s*=\s*`\$\{currentProductCount\}x`\s*:/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- ${name}
-$${price}
-Category: ${category}
- -Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
---fcc-editable-region--
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1 ? undefined : undefined;
- }
---fcc-editable-region--
-};
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md
deleted file mode 100644
index b6f14c6ae69..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md
+++ /dev/null
@@ -1,345 +0,0 @@
----
-id: 63f017b4ad028a148eb713c0
-title: Step 29
-challengeType: 0
-dashedName: step-29
----
-
-# --description--
-
-For your falsy expression, you'll need to add new HTML to your `productsContainer`. Start by removing the `undefined`, then use the addition assignment operator and template literal syntax to add a `div` with the `class` set to `product` and the `id` set to `dessert${id}` to the `innerHTML` property of the `productsContainer`.
-
-# --hints--
-
-You should remove the `undefined` from your falsy expression.
-
-```js
-const cart = new ShoppingCart();
-assert.notMatch(cart.addItem.toString(), /undefined/);
-```
-
-You should use the addition assignment operator to add HTML to the `productsContainer`. Remember that HTML goes in the `innerHTML` property.
-
-```js
-const cart = new ShoppingCart();
-assert.match(cart.addItem.toString(), /productsContainer\.innerHTML\s*\+=\s*/);
-```
-
-You should use template literal syntax to add HTML to the `productsContainer`.
-
-```js
-assert.match(code, /productsContainer\.innerHTML\s*\+=\s*`/);
-```
-
-You should add a `div` to the `productsContainer`.
-
-```js
-const cart = new ShoppingCart();
-cart.addItem(1, products);
-assert.equal(productsContainer.children?.[0]?.tagName, "DIV");
-```
-
-Your `div` should have the `class` set to `product`.
-
-```js
-const cart = new ShoppingCart();
-cart.addItem(1, products);
-assert.equal(productsContainer.children?.[0]?.className, "product");
-```
-
-Your `div` should have the `id` set to `dessert${id}`.
-
-```js
-const cart = new ShoppingCart();
-cart.addItem(1, products);
-assert.equal(productsContainer.children?.[0]?.id, "dessert1");
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- ${name}
-$${price}
-Category: ${category}
- -Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
---fcc-editable-region--
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : undefined;
- }
---fcc-editable-region--
-};
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md
deleted file mode 100644
index dd3815162fa..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md
+++ /dev/null
@@ -1,325 +0,0 @@
----
-id: 63f01861f813e01564c95315
-title: Step 30
-challengeType: 0
-dashedName: step-30
----
-
-# --description--
-
-Inside your `div`, add two `p` elements. Set the text of the second `p` element to be the value of the `price` variable.
-
-# --hints--
-
-You should add two `p` elements inside your `div` element.
-
-```js
-const cart = new ShoppingCart();
-cart.addItem(1, products);
-const div = document.querySelector('.product');
-assert.equal(div?.children.length, 2);
-assert.equal(div?.children[0].tagName, 'P');
-assert.equal(div?.children[1].tagName, 'P');
-```
-
-Your second `p` element should have the text of the `price` variable.
-
-```js
-const cart = new ShoppingCart();
-cart.addItem(1, products);
-const div = document.querySelector('.product');
-assert.equal(div?.children[1].textContent, '12.99');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- ${name}
-$${price}
-Category: ${category}
- -Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
---fcc-editable-region--
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
-
- `;
- }
---fcc-editable-region--
-};
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md
deleted file mode 100644
index da747a73c32..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md
+++ /dev/null
@@ -1,349 +0,0 @@
----
-id: 63f018f04e487e164dc27bd9
-title: Step 31
-challengeType: 0
-dashedName: step-31
----
-
-# --description--
-
-In your first `p` element, add a `span` element. Give the `span` a class of `product-count` and an `id` of `product-count-for-id${id}`. Then, after the span, give your `p` element the text of the `name` variable.
-
-# --hints--
-
-Your first `p` element should have a `span` element.
-
-```js
-const cart = new ShoppingCart();
-cart.addItem(1, products);
-const div = document.querySelector('.product');
-const p = div.querySelector('p');
-assert.equal(p.children.length, 1);
-assert.equal(p.children[0].tagName, 'SPAN');
-```
-
-Your `span` element should have a `class` of `product-count`.
-
-```js
-const cart = new ShoppingCart();
-cart.addItem(1, products);
-const div = document.querySelector('.product');
-const p = div.querySelector('p');
-assert.equal(p.children[0].className, 'product-count');
-```
-
-Your `span` element should have an `id` of `product-count-for-id${id}`.
-
-```js
-const cart = new ShoppingCart();
-cart.addItem(1, products);
-const div = document.querySelector('.product');
-const p = div.querySelector('p');
-assert.equal(p.children[0].id, 'product-count-for-id1');
-```
-
-Your first `p` element should have the text of the `name` variable. This should be outside the span.
-
-```js
-const cart = new ShoppingCart();
-cart.addItem(1, products);
-const div = document.querySelector('.product');
-const p = div.querySelector('p');
-assert.equal(p.innerText.trim(), 'Vanilla Cupcakes (6 Pack)');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
---fcc-editable-region--
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
---fcc-editable-region--
-};
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md
deleted file mode 100644
index 852ac25d2b7..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md
+++ /dev/null
@@ -1,334 +0,0 @@
----
-id: 63f01c9791a0aa1751c73760
-title: Step 32
-challengeType: 0
-dashedName: step-32
----
-
-# --description--
-
-There is still more functionality that your `ShoppingCart` class needs, but first you need to be able to test the code you have currently written. You'll need to instantiate a new `ShoppingCart` object and assign it to a variable. Here is an example of instantiating the `Computer` class from earlier examples:
-
-```js
-const myComputer = new Computer();
-```
-
-Declare a `cart` variable, and assign it a new `ShoppingCart` object. Note the use of the `new` keyword when instantiating the object.
-
-# --hints--
-
-You should use `const` to declare a `cart` variable.
-
-```js
-assert.match(code, /const\s+cart\s*=/);
-```
-
-You should use the `new` keyword to instantiate a new `ShoppingCart` object.
-
-```js
-assert.match(code, /new\s+ShoppingCart\s*\(\s*\)/);
-```
-
-You should assign your new `ShoppingCart` object to the `cart` variable.
-
-```js
-assert.isTrue(cart instanceof ShoppingCart);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-};
-
---fcc-editable-region--
-
---fcc-editable-region--
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md
deleted file mode 100644
index c2590b8a8ea..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md
+++ /dev/null
@@ -1,335 +0,0 @@
----
-id: 63f0224ceb16dc196d2c860a
-title: Step 33
-challengeType: 0
-dashedName: step-33
----
-
-# --description--
-
-You need to get all of the `Add to cart` buttons that you added to the DOM earlier. Declare an `addToCartBtns` variable, and assign it the value of calling the `getElementsByClassName()` method on the `document` object, passing in the string `add-to-cart-btn`.
-
-# --hints--
-
-You should use `const` to declare your `addToCartBtns` variable.
-
-```js
-assert.match(code, /const\s+addToCartBtns\s*=/);
-```
-
-You should call the `getElementsByClassName()` method on the `document` object.
-
-```js
-assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(/);
-```
-
-You should pass the string `add-to-cart-btn` to the `getElementsByClassName()` method.
-
-```js
-assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(\s*('|"|`)add-to-cart-btn\1\s*\)/);
-```
-
-You should assign the value returned by the `getElementsByClassName()` method to the `addToCartBtns` variable.
-
-```js
-assert.deepEqual(addToCartBtns, document.getElementsByClassName('add-to-cart-btn'));
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-};
-
-const cart = new ShoppingCart();
---fcc-editable-region--
-
---fcc-editable-region--
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md
deleted file mode 100644
index fd0129e37ca..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md
+++ /dev/null
@@ -1,339 +0,0 @@
----
-id: 63f026d041bc6c1a3d5cba0f
-title: Step 34
-challengeType: 0
-dashedName: step-34
----
-
-# --description--
-
-You need to iterate through the buttons in your `addToCartBtns` variable. However, `.getElementsByClassName()` returns a Collection, which does not have a `forEach` method.
-
-Use the spread operator on the `addToCartBtns` variable to convert it into an array. Then, use the `forEach` method to iterate through the array. Do not pass a callback function yet.
-
-# --hints--
-
-You should use the spread operator on the `addToCartBtns` variable.
-
-```js
-assert.match(code, /\.\.\.addToCartBtns/);
-```
-
-You should spread the `addToCartBtns` variable into an array.
-
-```js
-assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]/);
-```
-
-You should use the `forEach` method on the array you created.
-
-```js
-assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(/);
-```
-
-You should not pass a callback function to the `forEach` method.
-
-```js
-assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\)/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
---fcc-editable-region--
-
---fcc-editable-region--
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md
deleted file mode 100644
index cae3ba72dbe..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md
+++ /dev/null
@@ -1,339 +0,0 @@
----
-id: 63f0284532742c1b26c7a052
-title: Step 35
-challengeType: 0
-dashedName: step-35
----
-
-# --description--
-
-Add your callback function to the `forEach` method. It should take a `btn` parameter. Then, in the callback, add an event listener to the `btn`. The event listener should listen for a `click` event, and should take another callback with an `event` parameter. The second callback should be empty.
-
-# --hints--
-
-You should use arrow syntax to add a callback function to the `forEach` method which takes a `btn` parameter.
-
-```js
-assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{/);
-```
-
-You should add an event listener to the `btn` variable.
-
-```js
-assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(/);
-```
-
-You should listen for a `click` event on the `btn` variable.
-
-```js
-assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*/);
-```
-
-You should add an empty callback function to the event listener. Remember to give it an `event` parameter.
-
-```js
-assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*\(\s*event\s*\)\s*=>\s*\{\s*\}\s*\)\s*\s*\}\s*\)/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
---fcc-editable-region--
-[...addToCartBtns].forEach(
-
-);
---fcc-editable-region--
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md
deleted file mode 100644
index c27e13717f0..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md
+++ /dev/null
@@ -1,339 +0,0 @@
----
-id: 63f0289df84a581bbdbd29b7
-title: Step 36
-challengeType: 0
-dashedName: step-36
----
-
-# --description--
-
-In your event listener callback, call the `.addItem()` method of your `cart` object, and pass in the `event.target.id`. Remember that the `id` here will be a string, so you need to convert it to a number.
-
-Pass your `products` array as the second argument.
-
-# --hints--
-
-Your event listener callback should call the `.addItem()` method of your `cart` object.
-
-```js
-assert.match(code, /cart\.addItem\(/);
-```
-
-Your `.addItem()` method should be called with the `event.target.id` as the first argument. Remember to convert the `id` to a number using `Number()`.
-
-```js
-assert.match(code, /cart\.addItem\(\s*Number\(\s*event\.target\.id\s*\)\s*/);
-```
-
-Your `.addItem()` method should be called with the `products` array as the second argument.
-
-```js
-assert.match(code, /cart\.addItem\(\s*Number\(\s*event\.target\.id\s*\)\s*,\s*products\s*\)/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
---fcc-editable-region--
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
-
- })
- }
-);
---fcc-editable-region--
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md
deleted file mode 100644
index 4b53ebc3ff1..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md
+++ /dev/null
@@ -1,350 +0,0 @@
----
-id: 63f0295e673b661ccb299e8a
-title: Step 41
-challengeType: 0
-dashedName: step-41
----
-
-# --description--
-
-You need a way to access the total number of items in the cart. The best way to do this is to add another method to your `ShoppingCart` class, rather than accessing the `items` array directly.
-
-Add a `getCounts` method to the `ShoppingCart` class. It should return the number of items in the `items` array.
-
-# --hints--
-
-Your `ShoppingCart` class should have a `getCounts` method.
-
-```js
-assert.isFunction(cart.getCounts);
-```
-
-Remember to use the `this` keyword to access the `items` array.
-
-```js
-const afterCounts = code.split('getCounts')[1];
-assert.match(afterCounts, /this\s*\.\s*items\s*\.\s*length/);
-```
-
-Your `getCounts` method should return the number of items in the `items` array.
-
-```js
-assert.equal(cart.getCounts(), 0);
-cart.addItem(1, products);
-assert.equal(cart.getCounts(), 1);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-
---fcc-editable-region--
-
---fcc-editable-region--
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
- cart.addItem(Number(event.target.id), products);
- })
- }
-);
-
-cartBtn.addEventListener("click", () => {
- isCartShowing = !isCartShowing;
- showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show";
- cartContainer.style.display = isCartShowing ? "block" : "none";
-});
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md
deleted file mode 100644
index b75a16738ae..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md
+++ /dev/null
@@ -1,342 +0,0 @@
----
-id: 63f029b96b9e9e1df93be951
-title: Step 42
-challengeType: 0
-dashedName: step-42
----
-
-# --description--
-
-Now you can update the total number of items on the webpage. Assign the value of your `cart` object's `.getCounts()` method to the `textContent` of the `totalNumberOfItems` variable.
-
-# --hints--
-
-You should access the `textContent` property of the `totalNumberOfItems` variable.
-
-```js
-assert.match(code, /totalNumberOfItems\s*\.\s*textContent/)
-```
-
-You should assign the value of your `cart` object's `.getCounts()` method to the `textContent` property of the `totalNumberOfItems` variable.
-
-```js
-assert.match(code, /totalNumberOfItems\s*\.\s*textContent\s*=\s*cart\s*\.\s*getCounts\(\s*\)/)
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-
- getCounts() {
- return this.items.length;
- }
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
---fcc-editable-region--
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
- cart.addItem(Number(event.target.id), products);
-
- })
- }
-);
---fcc-editable-region--
-
-cartBtn.addEventListener("click", () => {
- isCartShowing = !isCartShowing;
- showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show";
- cartContainer.style.display = isCartShowing ? "block" : "none";
-});
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md
deleted file mode 100644
index ff8d5d86a2e..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md
+++ /dev/null
@@ -1,377 +0,0 @@
----
-id: 63f02a4ef92d711ec1ff618c
-title: Step 43
-challengeType: 0
-dashedName: step-43
----
-
-# --description--
-
-You also need to update the total price of the cart when the user adds an item. Create a `calculateTotal` method in the `ShoppingCart` class.
-
-In that method, declare a `subTotal` variable and use the `reduce` method on the `items` array to calculate the sum of the `price` property of each item in the array. Use `total` and `item` as the parameters for your callback.
-
-Remember to set your initial value in the `reduce` method.
-
-# --hints--
-
-You should create a `calculateTotal` method in the `ShoppingCart` class.
-
-```js
-assert.isFunction(cart.calculateTotal);
-```
-
-Your `calculateTotal` method should have a `subTotal` variable declared with `const`.
-
-```js
-const afterCalculateTotal = code.split('calculateTotal')[1];
-assert.match(afterCalculateTotal, /const\s+subTotal\s*=/);
-```
-
-Your `calculateTotal` method should use the `reduce` method on the `items` array.
-
-```js
-const afterCalculateTotal = code.split('calculateTotal')[1];
-assert.match(afterCalculateTotal, /this\s*\.\s*items\s*\.\s*reduce/);
-```
-
-Your `reduce` callback should use `total` and `item` as the first and second parameter. Remember to use arrow function syntax.
-
-```js
-const afterCalculateTotal = code.split('calculateTotal')[1];
-assert.match(afterCalculateTotal, /\(\s*total\s*,\s*item\s*\)\s*=>/);
-```
-
-Your `reduce` callback should return the sum of `total` and `item.price`. Use an implicit return.
-
-```js
-const afterCalculateTotal = code.split('calculateTotal')[1];
-assert.match(afterCalculateTotal, /\(\s*total\s*,\s*item\s*\)\s*=>\s*total\s*\+\s*item\.price/);
-```
-
-Your `reduce` call should have an initial value of `0`.
-
-```js
-const afterCalculateTotal = code.split('calculateTotal')[1];
-assert.match(afterCalculateTotal, /this\s*\.\s*items\s*\.\s*reduce\s*\(\s*\(total,\s*item\)\s*=>\s*total\s*\+\s*item\.price\s*,\s*0\s*\)/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-
- getCounts() {
- return this.items.length;
- }
-
---fcc-editable-region--
-
---fcc-editable-region--
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
- cart.addItem(Number(event.target.id), products);
- totalNumberOfItems.textContent = cart.getCounts();
- })
- }
-);
-
-cartBtn.addEventListener("click", () => {
- isCartShowing = !isCartShowing;
- showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show";
- cartContainer.style.display = isCartShowing ? "block" : "none";
-});
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md
deleted file mode 100644
index 8d4036f7ea6..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md
+++ /dev/null
@@ -1,348 +0,0 @@
----
-id: 63f02b22cce1c11fe9604381
-title: Step 44
-challengeType: 0
-dashedName: step-44
----
-
-# --description--
-
-Part of the total cost will include the tax, so you need to calculate that as well. Create a `calculateTaxes` method in the `ShoppingCart` class. This method should take an `amount` parameter.
-
-# --hints--
-
-You should create a `calculateTaxes` method in the `ShoppingCart` class.
-
-```js
-assert.isFunction(cart.calculateTaxes);
-```
-
-Your `calculateTaxes` method should take an `amount` parameter.
-
-```js
-assert.match(cart.calculateTaxes.toString(), /\(\s*amount\s*\)/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-
- getCounts() {
- return this.items.length;
- }
-
---fcc-editable-region--
-
---fcc-editable-region--
-
- calculateTotal() {
- const subTotal = this.items.reduce((total, item) => total + item.price, 0);
- }
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
- cart.addItem(Number(event.target.id), products);
- totalNumberOfItems.textContent = cart.getCounts();
- })
- }
-);
-
-cartBtn.addEventListener("click", () => {
- isCartShowing = !isCartShowing;
- showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show";
- cartContainer.style.display = isCartShowing ? "block" : "none";
-});
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md
deleted file mode 100644
index 82d277b0ab0..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md
+++ /dev/null
@@ -1,368 +0,0 @@
----
-id: 63f02bdeb9b428208b97eb6b
-title: Step 45
-challengeType: 0
-dashedName: step-45
----
-
-# --description--
-
-Your `calculateTaxes` method should return the value of the `taxRate` (divided by 100, to convert it to a percent) multiplied by the `amount` parameter.
-
-For clarity, wrap the `taxRate / 100` calculation in parentheses.
-
-# --hints--
-
-You should divide the `taxRate` by 100 in your `calculateTaxes` method. Remember to use the `this` keyword.
-
-```js
-const afterCalculateTaxes = code.split('calculateTaxes')[1];
-assert.match(afterCalculateTaxes, /this\s*\.\s*taxRate\s*\/\s*100/);
-```
-
-You should wrap the `this.taxRate / 100` calculation in parentheses.
-
-```js
-const afterCalculateTaxes = code.split('calculateTaxes')[1];
-assert.match(afterCalculateTaxes, /\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)/);
-```
-
-You should multiply the `amount` parameter by the `taxRate` divided by 100 in your `calculateTaxes` method.
-
-```js
-const afterCalculateTaxes = code.split('calculateTaxes')[1];
-assert.match(afterCalculateTaxes, /amount\s*\*\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)|\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount/);
-```
-
-Your `calculateTaxes` method should return the value of the `taxRate` (divided by 100, to convert it to a percent) multiplied by the `amount` parameter.
-
-```js
-console.log(cart.calculateTaxes(10), (cart.taxRate / 100) * 10);
-assert.equal(cart.calculateTaxes(10), (cart.taxRate / 100) * 10);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-
- getCounts() {
- return this.items.length;
- }
-
---fcc-editable-region--
- calculateTaxes(amount) {
-
- }
---fcc-editable-region--
-
- calculateTotal() {
- const subTotal = this.items.reduce((total, item) => total + item.price, 0);
- }
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
- cart.addItem(Number(event.target.id), products);
- totalNumberOfItems.textContent = cart.getCounts();
- })
- }
-);
-
-cartBtn.addEventListener("click", () => {
- isCartShowing = !isCartShowing;
- showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show";
- cartContainer.style.display = isCartShowing ? "block" : "none";
-});
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md
deleted file mode 100644
index 0954c9b4ac6..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md
+++ /dev/null
@@ -1,361 +0,0 @@
----
-id: 63f02c6e18773921ba50aa53
-title: Step 46
-challengeType: 0
-dashedName: step-46
----
-
-# --description--
-
-Because of the way computers store and work with numbers, calculations involving decimal numbers can result in some strange behavior. For example, `0.1 + 0.2` is not equal to `0.3`. This is because computers store decimal numbers as binary fractions, and some binary fractions cannot be represented exactly as decimal fractions.
-
-We want to clean up the number result from your calculation. Wrap your calculation in parentheses (don't include the `return` statement!) and call the `.toFixed()` method on it. Pass the `.toFixed()` method the number `2` as an argument. This will round the number to two decimal places and return a string.
-
-# --hints--
-
-You should wrap your calculation in parentheses.
-
-```js
-const afterCalculateTaxes = code.split('calculateTaxes')[1];
-assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)/)
-```
-
-You should call the `.toFixed()` method on your calculation.
-
-```js
-const afterCalculateTaxes = code.split('calculateTaxes')[1];
-assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\(/)
-```
-
-You should pass the `.toFixed()` method the number `2` as an argument.
-
-```js
-const afterCalculateTaxes = code.split('calculateTaxes')[1];
-assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\s*\(\s*2\s*\)/)
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-
- getCounts() {
- return this.items.length;
- }
-
---fcc-editable-region--
- calculateTaxes(amount) {
- return (this.taxRate / 100) * amount;
- }
---fcc-editable-region--
-
- calculateTotal() {
- const subTotal = this.items.reduce((total, item) => total + item.price, 0);
- }
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
- cart.addItem(Number(event.target.id), products);
- totalNumberOfItems.textContent = cart.getCounts();
- })
- }
-);
-
-cartBtn.addEventListener("click", () => {
- isCartShowing = !isCartShowing;
- showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show";
- cartContainer.style.display = isCartShowing ? "block" : "none";
-});
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md
deleted file mode 100644
index d925dca7812..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md
+++ /dev/null
@@ -1,347 +0,0 @@
----
-id: 63f0311f5ea9382388d6124f
-title: Step 47
-challengeType: 0
-dashedName: step-47
----
-
-# --description--
-
-The issue with `.toFixed()` returning a string is that you want to be able to perform calculations with the tax rate. To fix this, you can pass the `.toFixed()` call (including the calculation) to the `parseFloat()` function. This will convert the fixed string back into a number, preserving the existing decimal places.
-
-Pass your `.toFixed()` call to `parseFloat()`.
-
-# --hints--
-
-You should pass your entire calculation (excluding the `return` statement) to `parseFloat()`.
-
-```js
-const afterCalculateTaxes = code.split('calculateTaxes')[1];
-assert.match(afterCalculateTaxes, /return\s*parseFloat\(\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\s*\(\s*2\s*\)\s*\)/)
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-
- getCounts() {
- return this.items.length;
- }
-
---fcc-editable-region--
- calculateTaxes(amount) {
- return ((this.taxRate / 100) * amount).toFixed(2);
- }
---fcc-editable-region--
-
- calculateTotal() {
- const subTotal = this.items.reduce((total, item) => total + item.price, 0);
- }
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
- cart.addItem(Number(event.target.id), products);
- totalNumberOfItems.textContent = cart.getCounts();
- })
- }
-);
-
-cartBtn.addEventListener("click", () => {
- isCartShowing = !isCartShowing;
- showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show";
- cartContainer.style.display = isCartShowing ? "block" : "none";
-});
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md
deleted file mode 100644
index b0527ca7c31..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md
+++ /dev/null
@@ -1,339 +0,0 @@
----
-id: 63f033fdb1fbcc254999fcc3
-title: Step 37
-challengeType: 0
-dashedName: step-37
----
-
-# --description--
-
-Your cart currently isn't visible on the webpage. To make it visible, start by adding an event listener to the `cartBtn` variable, listening for the click event. The callback does not need any parameters.
-
-# --hints--
-
-You should add an event listener to the `cartBtn` variable.
-
-```js
-assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(/);
-```
-
-You should listen for a `click` event on the `cartBtn` variable.
-
-```js
-assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*/);
-```
-
-You should add an empty callback function (using arrow syntax) to the event listener. Remember that it does not need any parameters.
-
-```js
-assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
- cart.addItem(Number(event.target.id), products);
- })
- }
-);
-
---fcc-editable-region--
-
---fcc-editable-region--
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md
deleted file mode 100644
index 48e1daa6e0e..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md
+++ /dev/null
@@ -1,335 +0,0 @@
----
-id: 63f03446c2ed3e264be6c7fc
-title: Step 38
-challengeType: 0
-dashedName: step-38
----
-
-# --description--
-
-Start by inverting the value of `isCartShowing`. Remember that you can use the logical not operator `!` to invert the value of a boolean. Assign the inverted value to `isCartShowing`.
-
-# --hints--
-
-You should invert the value of `isCartShowing`.
-
-```js
-assert.match(code, /!isCartShowing/);
-```
-
-You should assign the inverted value of `isCartShowing` to `isCartShowing`.
-
-```js
-assert.match(code, /isCartShowing\s*=\s*!isCartShowing/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
- cart.addItem(Number(event.target.id), products);
- })
- }
-);
-
---fcc-editable-region--
-cartBtn.addEventListener("click", () => {
-
-});
---fcc-editable-region--
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md
deleted file mode 100644
index 1e9f9959098..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md
+++ /dev/null
@@ -1,348 +0,0 @@
----
-id: 63f0348a54a177272071a595
-title: Step 39
-challengeType: 0
-dashedName: step-39
----
-
-# --description--
-
-Now assign the `textContent` of the `showHideCartSpan` variable the result of a ternary expression which checks if `isCartShowing` is true. If it is, set the `textContent` to `Hide`, otherwise set it to `Show`.
-
-# --hints--
-
-You should use the assignment operator on the `textContent` property of the `showHideCartSpan` variable.
-
-```js
-assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*/)
-```
-
-You should use ternary syntax to check if `isCartShowing` is true.
-
-```js
-assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*/)
-```
-
-You should set the `textContent` of the `showHideCartSpan` variable to `Hide` if `isCartShowing` is true.
-
-```js
-assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*/)
-```
-
-You should set the `textContent` of the `showHideCartSpan` variable to `Show` if `isCartShowing` is false.
-
-```js
-assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*('|"|`)Show\2/)
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
- cart.addItem(Number(event.target.id), products);
- })
- }
-);
-
---fcc-editable-region--
-cartBtn.addEventListener("click", () => {
- isCartShowing = !isCartShowing;
-
-});
---fcc-editable-region--
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md
deleted file mode 100644
index 3fcf304cca6..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md
+++ /dev/null
@@ -1,357 +0,0 @@
----
-id: 63f034d012f74627ce538d3a
-title: Step 40
-challengeType: 0
-dashedName: step-40
----
-
-# --description--
-
-Finally, update the `display` property of the `style` object of the `cartContainer` variable to another ternary which checks if `isCartShowing` is true. If it is, set the `display` property to `block`, otherwise set it to `none`.
-
-Now you should be able to see your cart and add items to it.
-
-# --hints--
-
-You should access the `display` property of the `style` property of the `cartContainer` variable.
-
-```js
-assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display/)
-```
-
-You should use the assignment operator on the `display` property of the `style` property of the `cartContainer` variable.
-
-```js
-assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*/)
-```
-
-You should use ternary syntax to check if `isCartShowing` is true.
-
-```js
-assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*/)
-```
-
-You should set the `display` property of the `style` property of the `cartContainer` variable to `block` if `isCartShowing` is true.
-
-```js
-assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*/)
-```
-
-You should set the `display` property of the `style` property of the `cartContainer` variable to `none` if `isCartShowing` is false.
-
-```js
-assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*('|"|`)none\2/)
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
- cart.addItem(Number(event.target.id), products);
- })
- }
-);
-
---fcc-editable-region--
-cartBtn.addEventListener("click", () => {
- isCartShowing = !isCartShowing;
- showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show";
-
-});
---fcc-editable-region--
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md
deleted file mode 100644
index a4c481b5796..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md
+++ /dev/null
@@ -1,353 +0,0 @@
----
-id: 63f03686c5ea863533ec71f4
-title: Step 48
-challengeType: 0
-dashedName: step-48
----
-
-# --description--
-
-Declare a variable `tax` and assign it the value of calling your new `.calculateTaxes()` method, passing `subTotal` as the argument.
-
-# --hints--
-
-Use `const` to declare a variable named `tax`.
-
-```js
-const afterCalculateTotal = code.split('calculateTotal')[1];
-assert.match(afterCalculateTotal, /const\s+tax\s*=/);
-```
-
-Assign the value of calling your new `.calculateTaxes()` method, passing `subTotal` as the argument, to the `tax` variable.
-
-```js
-const afterCalculateTotal = code.split('calculateTotal')[1];
-assert.match(afterCalculateTotal, /const\s*tax\s*=\s*this\s*\.\s*calculateTaxes\s*\(\s*subTotal\s*\)/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-
- getCounts() {
- return this.items.length;
- }
-
- calculateTaxes(amount) {
- return parseFloat(((this.taxRate / 100) * amount).toFixed(2));
- }
-
---fcc-editable-region--
- calculateTotal() {
- const subTotal = this.items.reduce((total, item) => total + item.price, 0);
-
- }
---fcc-editable-region--
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
- cart.addItem(Number(event.target.id), products);
- totalNumberOfItems.textContent = cart.getCounts();
- })
- }
-);
-
-cartBtn.addEventListener("click", () => {
- isCartShowing = !isCartShowing;
- showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show";
- cartContainer.style.display = isCartShowing ? "block" : "none";
-});
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md
deleted file mode 100644
index 936b8a7add9..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md
+++ /dev/null
@@ -1,352 +0,0 @@
----
-id: 63f036ec91fdf238c90665f5
-title: Step 49
-challengeType: 0
-dashedName: step-49
----
-
-# --description--
-
-Update the `total` value to be the sum of the `subTotal` and `tax` values.
-
-# --hints--
-
-You should update the `total` value. Remember to use the `this` keyword.
-
-```js
-assert.match(cart.calculateTotal.toString(), /this\.total/);
-```
-
-You should set the `total` value to be the sum of the `subTotal` and `tax` values.
-
-```js
-assert.match(cart.calculateTotal.toString(), /this\.total\s*=\s*(subTotal\s*\+\s*tax|tax\s*\+\s*subTotal)/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-
- getCounts() {
- return this.items.length;
- }
-
- calculateTaxes(amount) {
- return parseFloat(((this.taxRate / 100) * amount).toFixed(2));
- }
-
---fcc-editable-region--
- calculateTotal() {
- const subTotal = this.items.reduce((total, item) => total + item.price, 0);
- const tax = this.calculateTaxes(subTotal);
-
- }
---fcc-editable-region--
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
- cart.addItem(Number(event.target.id), products);
- totalNumberOfItems.textContent = cart.getCounts();
- })
- }
-);
-
-cartBtn.addEventListener("click", () => {
- isCartShowing = !isCartShowing;
- showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show";
- cartContainer.style.display = isCartShowing ? "block" : "none";
-});
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md
deleted file mode 100644
index cba09f5a3e6..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md
+++ /dev/null
@@ -1,367 +0,0 @@
----
-id: 63f0370b340915399d31e5eb
-title: Step 50
-challengeType: 0
-dashedName: step-50
----
-
-# --description--
-
-You're going to update the HTML in this method as well. Set the `textContent` of the `cartSubTotal` to be the value of `subTotal` to a fixed 2 decimal places. Use template literal syntax to add the dollar sign to the beginning of the value.
-
-# --hints--
-
-You should access the `textContent` property of the `cartSubTotal` element.
-
-```js
-assert.match(cart.calculateTotal.toString(), /cartSubTotal\.textContent/);
-```
-
-You should call the `.toFixed()` method on the `subTotal` variable, passing `2` as the argument.
-
-```js
-assert.match(cart.calculateTotal.toString(), /subTotal\.toFixed\(\s*2\s*\)/);
-```
-
-You should use template literal syntax to add the dollar sign before your `.toFixed()` call.
-
-```js
-const afterCalculateTotal = code.split('calculateTotal')[1];
-assert.match(afterCalculateTotal, /`\$\$\{subTotal\.toFixed\(\s*2\s*\)\}\`/);
-```
-
-You should set the `textContent` of the `cartSubTotal` element to your template string.
-
-```js
-const afterCalculateTotal = code.split('calculateTotal')[1];
-assert.match(afterCalculateTotal, /cartSubTotal\.textContent\s*=\s*`\$\$\{subTotal\.toFixed\(\s*2\s*\)\}\`/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-
- getCounts() {
- return this.items.length;
- }
-
- calculateTaxes(amount) {
- return parseFloat(((this.taxRate / 100) * amount).toFixed(2));
- }
-
---fcc-editable-region--
- calculateTotal() {
- const subTotal = this.items.reduce((total, item) => total + item.price, 0);
- const tax = this.calculateTaxes(subTotal);
- this.total = subTotal + tax;
-
- }
---fcc-editable-region--
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
- cart.addItem(Number(event.target.id), products);
- totalNumberOfItems.textContent = cart.getCounts();
- })
- }
-);
-
-cartBtn.addEventListener("click", () => {
- isCartShowing = !isCartShowing;
- showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show";
- cartContainer.style.display = isCartShowing ? "block" : "none";
-});
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md
deleted file mode 100644
index 37c08222320..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md
+++ /dev/null
@@ -1,394 +0,0 @@
----
-id: 63f0374d5351223a747c301d
-title: Step 51
-challengeType: 0
-dashedName: step-51
----
-
-# --description--
-
-Following the same pattern as your `cartSubTotal`, update the `cartTaxes` to display the `tax` value, and your `cartTotal` to display the `total` property.
-
-# --hints--
-
-You should access the `textContent` property of the `cartTaxes` element.
-
-```js
-assert.match(cart.calculateTotal.toString(), /cartTaxes\.textContent/);
-```
-
-You should call the `.toFixed()` method on the `tax` variable, passing `2` as the argument.
-
-```js
-assert.match(cart.calculateTotal.toString(), /tax\.toFixed\(\s*2\s*\)/);
-```
-
-You should use template literal syntax to add the dollar sign before your `.toFixed()` call.
-
-```js
-const afterCalculateTotal = code.split('calculateTotal')[1];
-assert.match(afterCalculateTotal, /`\$\$\{tax\.toFixed\(\s*2\s*\)\}\`/);
-```
-
-You should set the `textContent` of the `cartTaxes` element to `tax.toFixed` template string.
-
-```js
-const afterCalculateTotal = code.split('calculateTotal')[1];
-assert.match(afterCalculateTotal, /cartTaxes\.textContent\s*=\s*`\$\$\{tax\.toFixed\(\s*2\s*\)\}\`/);
-```
-
-You should access the `textContent` property of the `cartTotal` element.
-
-```js
-assert.match(cart.calculateTotal.toString(), /cartTotal\.textContent/);
-```
-
-You should call the `.toFixed()` method on the `total` variable, passing `2` as the argument. Remember to use the `this` keyword.
-
-```js
-assert.match(cart.calculateTotal.toString(), /this\.total\.toFixed\(\s*2\s*\)/);
-```
-
-You should use template literal syntax to add the dollar sign before your `.toFixed()` call.
-
-```js
-const afterCalculateTotal = code.split('calculateTotal')[1];
-assert.match(afterCalculateTotal, /`\$\$\{this\.total\.toFixed\(\s*2\s*\)\}\`/);
-```
-
-You should set the `textContent` of the `cartTotal` element to your `total.toFixed` template string.
-
-```js
-const afterCalculateTotal = code.split('calculateTotal')[1];
-assert.match(afterCalculateTotal, /cartTotal\.textContent\s*=\s*`\$\$\{this\.total\.toFixed\(\s*2\s*\)\}\`/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-
- getCounts() {
- return this.items.length;
- }
-
- calculateTaxes(amount) {
- return parseFloat(((this.taxRate / 100) * amount).toFixed(2));
- }
-
---fcc-editable-region--
- calculateTotal() {
- const subTotal = this.items.reduce((total, item) => total + item.price, 0);
- const tax = this.calculateTaxes(subTotal);
- this.total = subTotal + tax;
- cartSubTotal.textContent = `$${subTotal.toFixed(2)}`;
-
- }
---fcc-editable-region--
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
- cart.addItem(Number(event.target.id), products);
- totalNumberOfItems.textContent = cart.getCounts();
- })
- }
-);
-
-cartBtn.addEventListener("click", () => {
- isCartShowing = !isCartShowing;
- showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show";
- cartContainer.style.display = isCartShowing ? "block" : "none";
-});
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md
deleted file mode 100644
index 56336e0263e..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md
+++ /dev/null
@@ -1,352 +0,0 @@
----
-id: 63f0378e173e3c3b7638b528
-title: Step 52
-challengeType: 0
-dashedName: step-52
----
-
-# --description--
-
-Finally, return the value of the `total` property. Remember your `this` keyword.
-
-# --hints--
-
-Your `calculateTotal` method should return the value of the `total` property.
-
-```js
-assert.equal(cart.calculateTotal(), 0);
-cart.addItem(1, products);
-assert.approximately(cart.calculateTotal(), 14.06, 0.1);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-
- getCounts() {
- return this.items.length;
- }
-
- calculateTaxes(amount) {
- return parseFloat(((this.taxRate / 100) * amount).toFixed(2));
- }
-
---fcc-editable-region--
- calculateTotal() {
- const subTotal = this.items.reduce((total, item) => total + item.price, 0);
- const tax = this.calculateTaxes(subTotal);
- this.total = subTotal + tax;
- cartSubTotal.textContent = `$${subTotal.toFixed(2)}`;
- cartTaxes.textContent = `$${tax.toFixed(2)}`;
- cartTotal.textContent = `$${this.total.toFixed(2)}`;
-
- }
---fcc-editable-region--
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
- cart.addItem(Number(event.target.id), products);
- totalNumberOfItems.textContent = cart.getCounts();
- })
- }
-);
-
-cartBtn.addEventListener("click", () => {
- isCartShowing = !isCartShowing;
- showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show";
- cartContainer.style.display = isCartShowing ? "block" : "none";
-});
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md
deleted file mode 100644
index db0f9862452..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md
+++ /dev/null
@@ -1,353 +0,0 @@
----
-id: 63f038a0ae041d3c5b0cdf23
-title: Step 54
-challengeType: 0
-dashedName: step-54
----
-
-# --description--
-
-Your last feature is to allow users to clear their cart. Add a `clearCart()` method to your `ShoppingCart` class.
-
-# --hints--
-
-Your `ShoppingCart` class should have a `clearCart` method.
-
-```js
-assert.isFunction(cart.clearCart);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-
- getCounts() {
- return this.items.length;
- }
-
---fcc-editable-region--
-
---fcc-editable-region--
-
- calculateTaxes(amount) {
- return parseFloat(((this.taxRate / 100) * amount).toFixed(2));
- }
-
- calculateTotal() {
- const subTotal = this.items.reduce((total, item) => total + item.price, 0);
- const tax = this.calculateTaxes(subTotal);
- this.total = subTotal + tax;
- cartSubTotal.textContent = `$${subTotal.toFixed(2)}`;
- cartTaxes.textContent = `$${tax.toFixed(2)}`;
- cartTotal.textContent = `$${this.total.toFixed(2)}`;
- return this.total;
- }
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
- cart.addItem(Number(event.target.id), products);
- totalNumberOfItems.textContent = cart.getCounts();
- cart.calculateTotal();
- })
- }
-);
-
-cartBtn.addEventListener("click", () => {
- isCartShowing = !isCartShowing;
- showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show";
- cartContainer.style.display = isCartShowing ? "block" : "none";
-});
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md
deleted file mode 100644
index 50339959f43..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md
+++ /dev/null
@@ -1,371 +0,0 @@
----
-id: 63f038e671d3f73d5a041973
-title: Step 55
-challengeType: 0
-dashedName: step-55
----
-
-# --description--
-
-The first thing you should do is check if the `items` array is empty. If it is, display an `alert` to the user with the text `Your shopping cart is already empty`, then return from the function.
-
-Remember that `0` is a falsy value, so you can use the `!` operator to check if the array is empty.
-
-After displaying the alert, return from the function to stop execution.
-
-# --hints--
-
-You should create an `if` statement that checks if the `items` array is empty, using the negation operator.
-
-```js
-assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)/);
-```
-
-Your `if` statement should display an `alert` to the user with the text `Your shopping cart is already empty`.
-
-```js
-assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*/);
-```
-
-Your `if` statement should return from the function.
-
-```js
-assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*;?\s*return\s*;?\s*\}/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-
- getCounts() {
- return this.items.length;
- }
-
---fcc-editable-region--
- clearCart() {
-
- }
---fcc-editable-region--
-
- calculateTaxes(amount) {
- return parseFloat(((this.taxRate / 100) * amount).toFixed(2));
- }
-
- calculateTotal() {
- const subTotal = this.items.reduce((total, item) => total + item.price, 0);
- const tax = this.calculateTaxes(subTotal);
- this.total = subTotal + tax;
- cartSubTotal.textContent = `$${subTotal.toFixed(2)}`;
- cartTaxes.textContent = `$${tax.toFixed(2)}`;
- cartTotal.textContent = `$${this.total.toFixed(2)}`;
- return this.total;
- }
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
- cart.addItem(Number(event.target.id), products);
- totalNumberOfItems.textContent = cart.getCounts();
- cart.calculateTotal();
- })
- }
-);
-
-cartBtn.addEventListener("click", () => {
- isCartShowing = !isCartShowing;
- showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show";
- cartContainer.style.display = isCartShowing ? "block" : "none";
-});
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md
deleted file mode 100644
index 23f034e9067..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md
+++ /dev/null
@@ -1,381 +0,0 @@
----
-id: 63f039dbcef7673e4e758fa3
-title: Step 56
-challengeType: 0
-dashedName: step-56
----
-
-# --description--
-
-Browsers have a built-in `confirm()` function which displays a confirmation prompt to the user. `confirm()` accepts a string, which is the message displayed to the user. It returns `true` if the user confirms, and `false` if the user cancels.
-
-Declare a variable `isCartCleared` and assign it the value of calling `confirm()` with the string `"Are you sure you want to clear all items from your shopping cart?"`.
-
-# --hints--
-
-You should use `const` to declare the `isCartCleared` variable.
-
-```js
-const afterClearCart = code.split('clearCart()')[1];
-assert.match(afterClearCart, /const\s+isCartCleared\s*=/);
-```
-
-You should call the `confirm()` function.
-
-```js
-assert.match(cart.clearCart.toString(), /confirm\s*\(/);
-```
-
-You should pass the string `Are you sure you want to clear all items from your shopping cart?` to the `confirm()` function.
-
-```js
-assert.match(cart.clearCart.toString(), /confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/);
-```
-
-You should assign the value of the `confirm()` function to the `isCartCleared` variable.
-
-```js
-assert.match(cart.clearCart.toString(), /isCartCleared\s*=\s*confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-
- getCounts() {
- return this.items.length;
- }
-
---fcc-editable-region--
- clearCart() {
- if (!this.items.length) {
- alert("Your shopping cart is already empty");
- return;
- }
-
-
- }
---fcc-editable-region--
-
- calculateTaxes(amount) {
- return parseFloat(((this.taxRate / 100) * amount).toFixed(2));
- }
-
- calculateTotal() {
- const subTotal = this.items.reduce((total, item) => total + item.price, 0);
- const tax = this.calculateTaxes(subTotal);
- this.total = subTotal + tax;
- cartSubTotal.textContent = `$${subTotal.toFixed(2)}`;
- cartTaxes.textContent = `$${tax.toFixed(2)}`;
- cartTotal.textContent = `$${this.total.toFixed(2)}`;
- return this.total;
- }
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
- cart.addItem(Number(event.target.id), products);
- totalNumberOfItems.textContent = cart.getCounts();
- cart.calculateTotal();
- })
- }
-);
-
-cartBtn.addEventListener("click", () => {
- isCartShowing = !isCartShowing;
- showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show";
- cartContainer.style.display = isCartShowing ? "block" : "none";
-});
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md
deleted file mode 100644
index be4fde050a5..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md
+++ /dev/null
@@ -1,378 +0,0 @@
----
-id: 63f03a7143a6ef3f7f3344f0
-title: Step 57
-challengeType: 0
-dashedName: step-57
----
-
-# --description--
-
-You only want to clear the cart if the user confirms the prompt. Create an `if` statement that checks if the user confirmed the prompt.
-
-In the `if` statement, set the `items` property back to an empty array, then set the `total` property to `0`.
-
-# --hints--
-
-You should create an `if` statement that checks if the user confirmed the prompt. Remember that you can check the truthiness of `isCartCleared` directly.
-
-```js
-assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)/);
-```
-
-Your `if` statement should set the `items` property back to an empty array.
-
-```js
-assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]/);
-```
-
-Your `if` statement should set the `total` property to `0`.
-
-```js
-assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*}/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-
- getCounts() {
- return this.items.length;
- }
-
---fcc-editable-region--
- clearCart() {
- if (!this.items.length) {
- alert("Your shopping cart is already empty");
- return;
- }
-
- const isCartCleared = confirm(
- "Are you sure you want to clear all items from your shopping cart?"
- );
-
-
- }
---fcc-editable-region--
-
- calculateTaxes(amount) {
- return parseFloat(((this.taxRate / 100) * amount).toFixed(2));
- }
-
- calculateTotal() {
- const subTotal = this.items.reduce((total, item) => total + item.price, 0);
- const tax = this.calculateTaxes(subTotal);
- this.total = subTotal + tax;
- cartSubTotal.textContent = `$${subTotal.toFixed(2)}`;
- cartTaxes.textContent = `$${tax.toFixed(2)}`;
- cartTotal.textContent = `$${this.total.toFixed(2)}`;
- return this.total;
- }
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
- cart.addItem(Number(event.target.id), products);
- totalNumberOfItems.textContent = cart.getCounts();
- cart.calculateTotal();
- })
- }
-);
-
-cartBtn.addEventListener("click", () => {
- isCartShowing = !isCartShowing;
- showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show";
- cartContainer.style.display = isCartShowing ? "block" : "none";
-});
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md
deleted file mode 100644
index 3b6705168d8..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md
+++ /dev/null
@@ -1,368 +0,0 @@
----
-id: 63f03ac2b428b2404a5a7518
-title: Step 58
-challengeType: 0
-dashedName: step-58
----
-
-# --description--
-
-You also need to start clearing the HTML. Set the `innerHTML` property of the `productsContainer` back to an empty string.
-
-# --hints--
-
-In your `if` statement, you should set the `innerHTML` property of the `productsContainer` back to an empty string.
-
-```js
-assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*productsContainer\.innerHTML\s*=\s*('|"|`)\1\s*;?\s*}/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-
- getCounts() {
- return this.items.length;
- }
-
---fcc-editable-region--
- clearCart() {
- if (!this.items.length) {
- alert("Your shopping cart is already empty");
- return;
- }
-
- const isCartCleared = confirm(
- "Are you sure you want to clear all items from your shopping cart?"
- );
-
- if (isCartCleared) {
- this.items = [];
- this.total = 0;
-
- }
- }
---fcc-editable-region--
-
- calculateTaxes(amount) {
- return parseFloat(((this.taxRate / 100) * amount).toFixed(2));
- }
-
- calculateTotal() {
- const subTotal = this.items.reduce((total, item) => total + item.price, 0);
- const tax = this.calculateTaxes(subTotal);
- this.total = subTotal + tax;
- cartSubTotal.textContent = `$${subTotal.toFixed(2)}`;
- cartTaxes.textContent = `$${tax.toFixed(2)}`;
- cartTotal.textContent = `$${this.total.toFixed(2)}`;
- return this.total;
- }
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
- cart.addItem(Number(event.target.id), products);
- totalNumberOfItems.textContent = cart.getCounts();
- cart.calculateTotal();
- })
- }
-);
-
-cartBtn.addEventListener("click", () => {
- isCartShowing = !isCartShowing;
- showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show";
- cartContainer.style.display = isCartShowing ? "block" : "none";
-});
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md
deleted file mode 100644
index 5a1e7f099f3..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md
+++ /dev/null
@@ -1,395 +0,0 @@
----
-id: 63f03af535682e4138fdb915
-title: Step 59
-challengeType: 0
-dashedName: step-59
----
-
-# --description--
-
-Set the `textContent` of the `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal` elements all to the number `0`.
-
-# --hints--
-
-You should set the `textContent` of the `totalNumberOfItems` element to `0`.
-
-```js
-const secondIf = cart.clearCart.toString().split('if')[2];
-const inIf = secondIf.split('}')[0];
-assert.match(inIf, /totalNumberOfItems\.textContent\s*=\s*0/);
-```
-
-You should set the `textContent` of the `cartSubTotal` element to `0`.
-
-```js
-const secondIf = cart.clearCart.toString().split('if')[2];
-const inIf = secondIf.split('}')[0];
-assert.match(inIf, /cartSubTotal\.textContent\s*=\s*0/);
-```
-
-You should set the `textContent` of the `cartTaxes` element to `0`.
-
-```js
-const secondIf = cart.clearCart.toString().split('if')[2];
-const inIf = secondIf.split('}')[0];
-assert.match(inIf, /cartTaxes\.textContent\s*=\s*0/);
-```
-
-You should set the `textContent` of the `cartTotal` element to `0`.
-
-```js
-const secondIf = cart.clearCart.toString().split('if')[2];
-const inIf = secondIf.split('}')[0];
-assert.match(inIf, /cartTotal\.textContent\s*=\s*0/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-
- getCounts() {
- return this.items.length;
- }
-
---fcc-editable-region--
- clearCart() {
- if (!this.items.length) {
- alert("Your shopping cart is already empty");
- return;
- }
-
- const isCartCleared = confirm(
- "Are you sure you want to clear all items from your shopping cart?"
- );
-
- if (isCartCleared) {
- this.items = [];
- this.total = 0;
- productsContainer.innerHTML = "";
-
- }
- }
---fcc-editable-region--
-
- calculateTaxes(amount) {
- return parseFloat(((this.taxRate / 100) * amount).toFixed(2));
- }
-
- calculateTotal() {
- const subTotal = this.items.reduce((total, item) => total + item.price, 0);
- const tax = this.calculateTaxes(subTotal);
- this.total = subTotal + tax;
- cartSubTotal.textContent = `$${subTotal.toFixed(2)}`;
- cartTaxes.textContent = `$${tax.toFixed(2)}`;
- cartTotal.textContent = `$${this.total.toFixed(2)}`;
- return this.total;
- }
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
- cart.addItem(Number(event.target.id), products);
- totalNumberOfItems.textContent = cart.getCounts();
- cart.calculateTotal();
- })
- }
-);
-
-cartBtn.addEventListener("click", () => {
- isCartShowing = !isCartShowing;
- showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show";
- cartContainer.style.display = isCartShowing ? "block" : "none";
-});
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md
deleted file mode 100644
index 913c5c53bdb..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md
+++ /dev/null
@@ -1,744 +0,0 @@
----
-id: 63f03b1ed5ab15420c057463
-title: Step 60
-challengeType: 0
-dashedName: step-60
----
-
-# --description--
-
-Your final step is to make your clear button functional. Add a `click` event listener to the `clearCartBtn`. For the callback, you can pass in `cart.clearCart` directly.
-
-However, doing so will not work, because the context of `this` will be the `clearCartBtn` element. You need to bind the `clearCart` method to the `cart` object.
-
-You can do this by passing `cart.clearCart.bind(cart)` as the callback.
-
-And with that, your shopping cart project is complete!
-
-# --hints--
-
-You should add an event listener to your `clearCartBtn` element.
-
-```js
-assert.match(code, /clearCartBtn\.addEventListener\(/);
-```
-
-Your event listener should listen for the `click` event.
-
-```js
-assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,/);
-```
-
-Your event listener should take `cart.clearCart.bind(cart)` as the callback.
-
-```js
-assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,\s*cart\.clearCart\s*.bind\(\s*cart\s*\)\s*\)/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-
- getCounts() {
- return this.items.length;
- }
-
- clearCart() {
- if (!this.items.length) {
- alert("Your shopping cart is already empty");
- return;
- }
-
- const isCartCleared = confirm(
- "Are you sure you want to clear all items from your shopping cart?"
- );
-
- if (isCartCleared) {
- this.items = [];
- this.total = 0;
- productsContainer.innerHTML = "";
- totalNumberOfItems.textContent = 0;
- cartSubTotal.textContent = 0;
- cartTaxes.textContent = 0;
- cartTotal.textContent = 0;
- }
- }
-
- calculateTaxes(amount) {
- return parseFloat(((this.taxRate / 100) * amount).toFixed(2));
- }
-
- calculateTotal() {
- const subTotal = this.items.reduce((total, item) => total + item.price, 0);
- const tax = this.calculateTaxes(subTotal);
- this.total = subTotal + tax;
- cartSubTotal.textContent = `$${subTotal.toFixed(2)}`;
- cartTaxes.textContent = `$${tax.toFixed(2)}`;
- cartTotal.textContent = `$${this.total.toFixed(2)}`;
- return this.total;
- }
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
- cart.addItem(Number(event.target.id), products);
- totalNumberOfItems.textContent = cart.getCounts();
- cart.calculateTotal();
- })
- }
-);
-
-cartBtn.addEventListener("click", () => {
- isCartShowing = !isCartShowing;
- showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show";
- cartContainer.style.display = isCartShowing ? "block" : "none";
-});
-
---fcc-editable-region--
-
---fcc-editable-region--
-```
-
-# --solutions--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-
- getCounts() {
- return this.items.length;
- }
-
- clearCart() {
- if (!this.items.length) {
- alert("Your shopping cart is already empty");
- return;
- }
-
- const isCartCleared = confirm(
- "Are you sure you want to clear all items from your shopping cart?"
- );
-
- if (isCartCleared) {
- this.items = [];
- this.total = 0;
- productsContainer.innerHTML = "";
- totalNumberOfItems.textContent = 0;
- cartSubTotal.textContent = 0;
- cartTaxes.textContent = 0;
- cartTotal.textContent = 0;
- }
- }
-
- calculateTaxes(amount) {
- return parseFloat(((this.taxRate / 100) * amount).toFixed(2));
- }
-
- calculateTotal() {
- const subTotal = this.items.reduce((total, item) => total + item.price, 0);
- const tax = this.calculateTaxes(subTotal);
- this.total = subTotal + tax;
- cartSubTotal.textContent = `$${subTotal.toFixed(2)}`;
- cartTaxes.textContent = `$${tax.toFixed(2)}`;
- cartTotal.textContent = `$${this.total.toFixed(2)}`;
- return this.total;
- }
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
- cart.addItem(Number(event.target.id), products);
- totalNumberOfItems.textContent = cart.getCounts();
- cart.calculateTotal();
- })
- }
-);
-
-cartBtn.addEventListener("click", () => {
- isCartShowing = !isCartShowing;
- showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show";
- cartContainer.style.display = isCartShowing ? "block" : "none";
-});
-
-clearCartBtn.addEventListener("click", cart.clearCart.bind(cart));
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md
deleted file mode 100644
index c33ce088a1c..00000000000
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md
+++ /dev/null
@@ -1,352 +0,0 @@
----
-id: 63f6721d5110af243ef8f3d9
-title: Step 53
-challengeType: 0
-dashedName: step-53
----
-
-# --description--
-
-Now call your `.calculateTotal()` method inside your `forEach` loop.
-
-# --hints--
-
-You should call `cart.calculateTotal()` inside your `forEach` loop.
-
-```js
-const afterForEach = code.split('[...addToCartBtns].forEach(')[1];
-assert.match(afterForEach, /cart\.calculateTotal\(\s*\)/);
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- - ${name} -
-${price}
-Desserts Page
-
-
-
-
-
- Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-
-
- `;
- }
-);
-
-class ShoppingCart {
- constructor() {
- this.items = [];
- this.total = 0;
- this.taxRate = 8.25;
- }
-
- addItem(id, products) {
- const product = products.find((item) => item.id === id);
- const { name, price } = product;
- this.items.push(product);
-
- const totalCountPerProduct = {};
- this.items.forEach((dessert) => {
- totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
- })
-
- const currentProductCount = totalCountPerProduct[product.id];
- const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
-
- currentProductCount > 1
- ? currentProductCountSpan.textContent = `${currentProductCount}x`
- : productsContainer.innerHTML += `
- ${name}
-$${price}
-Category: ${category}
- -
-
- `;
- }
-
- getCounts() {
- return this.items.length;
- }
-
- calculateTaxes(amount) {
- return parseFloat(((this.taxRate / 100) * amount).toFixed(2));
- }
-
- calculateTotal() {
- const subTotal = this.items.reduce((total, item) => total + item.price, 0);
- const tax = this.calculateTaxes(subTotal);
- this.total = subTotal + tax;
- cartSubTotal.textContent = `$${subTotal.toFixed(2)}`;
- cartTaxes.textContent = `$${tax.toFixed(2)}`;
- cartTotal.textContent = `$${this.total.toFixed(2)}`;
- return this.total;
- }
-};
-
-const cart = new ShoppingCart();
-const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");
-
---fcc-editable-region--
-[...addToCartBtns].forEach(
- (btn) => {
- btn.addEventListener("click", (event) => {
- cart.addItem(Number(event.target.id), products);
- totalNumberOfItems.textContent = cart.getCounts();
-
- })
- }
-);
---fcc-editable-region--
-
-cartBtn.addEventListener("click", () => {
- isCartShowing = !isCartShowing;
- showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show";
- cartContainer.style.display = isCartShowing ? "block" : "none";
-});
-```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md
new file mode 100644
index 00000000000..d522cf2c5ab
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md
@@ -0,0 +1,388 @@
+---
+id: 659ebe52d74b132a1d75c891
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+If you try to add a new task, edit that task, and then click on the `Add New Task` button, you will notice a bug.
+
+The form button will display the incorrect text of `Update Task` instead of `Add Task`. To fix this, you will need to assign the string `Add Task` to `addOrUpdateTaskBtn.innerText` inside your `addOrUpdateTask` function.
+# --hints--
+
+You should assign the string `Add Task` to `addOrUpdateTaskBtn.innerText`.
+
+```js
+assert.match(code, /addOrUpdateTaskBtn\.innerText\s*=\s*('|")Add Task\1\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+ - ${name} -
-${price}
-Todo App
+
+
+
+
+
+
+
+
+ `)
+ }
+ );
+};
+
+
+const deleteTask = (buttonEl) => {
+ const dataArrIndex = taskData.findIndex(
+ (item) => item.id === buttonEl.parentElement.id
+ );
+
+ buttonEl.parentElement.remove();
+ taskData.splice(dataArrIndex, 1);
+}
+
+const editTask = (buttonEl) => {
+ const dataArrIndex = taskData.findIndex(
+ (item) => item.id === buttonEl.parentElement.id
+ );
+
+ currentTask = taskData[dataArrIndex];
+
+ titleInput.value = currentTask.title;
+ dateInput.value = currentTask.date;
+ descriptionInput.value = currentTask.description;
+
+ addOrUpdateTaskBtn.innerText = "Update Task";
+
+ taskForm.classList.toggle("hidden");
+}
+
+const reset = () => {
+ titleInput.value = "";
+ dateInput.value = "";
+ descriptionInput.value = "";
+ taskForm.classList.toggle("hidden");
+ currentTask = {};
+}
+
+openTaskFormBtn.addEventListener("click", () =>
+ taskForm.classList.toggle("hidden")
+);
+
+closeTaskFormBtn.addEventListener("click", () => {
+ const formInputsContainValues = titleInput.value || dateInput.value || descriptionInput.value;
+ if (formInputsContainValues) {
+ confirmCloseDialog.showModal();
+ } else {
+ reset();
+ }
+});
+
+cancelBtn.addEventListener("click", () => confirmCloseDialog.close());
+
+discardBtn.addEventListener("click", () => {
+ confirmCloseDialog.close();
+ reset()
+});
+
+taskForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ addOrUpdateTask();
+});
+```
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md
deleted file mode 100644
index f4b05b12871..00000000000
--- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-id: 637f4e0e72c65bc8e73dfe1e
-videoId: LGQuIIv2RVA
-title: Elements and Tags Question A
-challengeType: 15
-dashedName: elements-and-tags-question-a
----
-
-# --description--
-
-Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags.
-
-Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `Title: ${title}
+Date: ${date}
+Description: ${description}
+ + +`. - -Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`. - -A full paragraph element looks like this: - -
-
-You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
-
-There are some HTML elements that do not have a closing tag. These elements often look like this: `` or `
` or `
`. - -Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`. - -A full paragraph element looks like this: - -
-
-You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
-
-There are some HTML elements that do not have a closing tag. These elements often look like this: `` or `
` or `
Homepage
` - -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: - -```html -click me -``` - -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. - -An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. - -Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. - -```html -click me -``` - -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. - -It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML Links video above. - -## --text-- - -What HTML tag is used to create a link? - -## --answers-- - -`` - ---- - -`` - ---- - -`
- `
-
-## --video-solution--
-
-1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md
deleted file mode 100644
index a138268c406..00000000000
--- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-id: 637f703572c65bc8e73dfe35
-title: Links and Images Question B
-challengeType: 15
-dashedName: links-and-images-question-b
----
-
-# --description--
-
-To get some practice using links and images throughout this lesson you need an HTML project to work with.
-
-- Create a new directory named `odin-links-and-images`.
-
-- Within that directory, create a new file named `index.html`.
-
-- Fill in the usual HTML boilerplate.
-
-- finally, add the following `h1` to the `body`: `
- `.
-
-Each list item in an unordered list begins with a bullet point:
-
-
-
-If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
-
-Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead: - - - -# --question-- - -## --assignment-- - -Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above. - ---- - -Make an unordered shopping list of your favorite foods. - ---- - -Make an ordered list of todo’s you need to get done today. - ---- - -Make an unordered list of places you’d like to visit someday. - ---- - -Make an ordered list of your all time top 5 favorite video games or movies. - -## --text-- - -What HTML tag is used to create an unordered list? - -## --answers-- - -`
- `
-
----
-
-`
- `
-
----
-
-`
- `.
-
-Each list item in an unordered list begins with a bullet point:
-
-
-
-If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
-
-Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead:
-
-
-
-# --question--
-
-## --text--
-
-What HTML tag is used to create an ordered list?
-
-## --answers--
-
-`
- `
-
----
-
-`
- `
-
----
-
-`
- `
-
-## --video-solution--
-
-1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md
deleted file mode 100644
index 1edd6feffbf..00000000000
--- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-id: 637f4e5172c65bc8e73dfe26
-title: Understand Ordered and Unordered List Question C
-challengeType: 15
-dashedName: understand-ordered-and-unordered-list-question-c
----
-
-# --description--
-
-If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
-
-Unordered lists are created using the `
- `.
-
-Each list item in an unordered list begins with a bullet point:
-
-
-
-If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
-
-Ordered lists are created using the `
- ` element. Each individual item in them is again created using the list item element `
- `. However, each list item in an ordered list begins with a number instead:
-
-
-
-# --question--
-
-## --text--
-
-What HTML tag is used to create list items within both unordered and ordered lists?
-
-## --answers--
-
-`
- `
-
----
-
-`
- `
-
----
-
-`
- `
-
-## --video-solution--
-
-2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md
deleted file mode 100644
index 8698b62aca8..00000000000
--- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-id: 637f4e5872c65bc8e73dfe27
-videoId: yqcd-XkxZNM
-title: Working With Text Question A
-challengeType: 15
-dashedName: working-with-text-question-a
----
-
-# --description--
-
-What would you expect the following text to output on an HTML page?
-
-```html
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
- incididunt ut labore et dolore magna aliqua.
-
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
- nisi ut aliquip ex ea commodo consequat.
-
-```
-
-It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below:
-
-
-
-When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line.
-
-If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `
- One Pokemon -
- Food and berries provided -
- Up to Three Pokemon -
- Food and berries provided -
- Grooming and accessories included -
- Up to six Pokemon! -
- Food and berries provided -
- Grooming and accessories included -
- Personal training for each Pokemon -
- Breeding and egg hatching -
- - Variable: A variable is an unknown value, usually represented - by a letter. - -
- - Expression: Essentially a mathematical object. For the - purpose of this tutorial, an expression is one part of an equation. - -
- - Equation: An equation is a mathematical argument in which two - expressions result in the same value. - -
- Variable: The variable in the example is "x". -
- - Expression: There are two expressions in this example. They - are "x+5" and "12". - -
- - Equation: The entire example, "x+5=12", is an equation. - -
- - Wolfram Alpha - is a great source for multiple mathematic fields. - -
- - Wikipedia's Algebra page - for more general information. - -
- Type: Fairy -
- Evolutions: Togepi -> Togetic -> Togekiss -
- Moves: Growl, Pound, Sweet Kiss, Charm -
- Weaknesses: Poison, Steel -
- Resistances: Dragon -
- + + + + `; + }) + .join(""); + + playlistSongs.innerHTML = songsHTML; +}; + +--fcc-editable-region-- +const getCurrentSongIndex = () => { + +} +--fcc-editable-region-- + +playButton.addEventListener("click", () => { + if (userData?.currentSong === null) { + playSong(userData?.songs[0].id); + } else { + playSong(userData?.currentSong.id); + } +}); + +pauseButton.addEventListener("click", pauseSong); + +renderSongs(userData?.songs); +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md deleted file mode 100644 index d65212aca6b..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -id: 63ec14d1c216aa063f0be4af -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -You will be building a shopping cart application. The HTML and CSS are already provided, but you will need to build the JavaScript to make the page interactive. - -To start, you will need to get some of your elements from the DOM. Start by using `document.getElementById()` to get the`#cart-container`, `#products-container`, and `#dessert-card-container` elements. Store them in variables named `cartContainer`, `productsContainer`, and `dessertCards`, respectively. - -Since these will not change, remember to use `const` to declare them. - -# --hints-- - -You should use `document.getElementById()` to get the `#cart-container` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/); -``` - -You should assign the `#cart-container` element to a variable named `cartContainer`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartContainer\s*=\s*document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#products-container` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)products-container\1\s*\)/); -``` - -You should assign the `#products-container` element to a variable named `productsContainer`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+productsContainer\s*=\s*document\.getElementById\(\s*('|"|`)products-container\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#dessert-card-container` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/); -``` - -You should assign the `#dessert-card-container` element to a variable named `dessertCards`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+dessertCards\s*=\s*document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -
` tag. - -Changing our example from before to use paragraph elements fixes the issue: - - - -# --question-- - -## --assignment-- - -Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above. - -## --text-- - -How do you create a paragraph in HTML? - -## --answers-- - -`
This is a paragraph
` - ---- - -`This is a paragraph
` - ---- - -`This is a paragraph` - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md deleted file mode 100644 index 17d3c900359..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -id: 637f4e5f72c65bc8e73dfe28 -title: Working With Text Question B -challengeType: 15 -dashedName: working-with-text-question-b ---- - -# --description-- - -Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings. - -There are 6 different levels of headings starting from `` to `
`. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level. - -Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `
` tag. - - - -Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page. - -# --question-- -## --text-- - -How many different levels of headings are there and what is the difference between them? - -## --answers-- - -There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading. - ---- - -There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading. - ---- - -There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md deleted file mode 100644 index 6ccf0e06658..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 637f4e6672c65bc8e73dfe29 -videoId: gW6cBZLUk6M -title: Working With Text Question C -challengeType: 15 -dashedName: working-with-text-question-c ---- - -# --description-- - -The `` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `` tag. - -You can use `strong` on its own: - - - -But you will probably find yourself using the `strong` element much more in combination with other text elements, like this: - - - -Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum. - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML Bold and Italic Text Video above. - -## --text-- - -What element should you use to make text bold and important? - -## --answers-- - -`This is an important message` - ---- - -`
This is an important message
` - ---- - -`This is an important message` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md deleted file mode 100644 index e686b2698e0..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 637f4e6e72c65bc8e73dfe2a -title: Working With Text Question D -challengeType: 15 -dashedName: working-with-text-question-d ---- - -# --description-- - -The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in a `` tag. - -To use `em` on its own: - - -Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements: - - - -# --question-- -## --text-- - -What element should you use to make text italicized to add emphasis? - -## --answers-- - -`This is an italic message` - ---- - -`This is an italic message` - ---- - -`This is an italic message ` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md deleted file mode 100644 index a0a7ba2fda9..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e7972c65bc8e73dfe2b -title: Working With Text Question E -challengeType: 15 -dashedName: working-with-text-question-e ---- - -# --description-- - -You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. - -When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. - -In the following example, the `body` element is the parent and the `p` is the child: - -```html - - - - -Lorem ipsum dolor sit amet.
- - -``` - -Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. - -For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other: - -```html - - - - -Lorem ipsum dolor sit amet.
-Ut enim ad minim veniam.
- - -``` - -You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. - -The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. - -# --question-- - -## --text-- - -What relationship do two elements have if they are at the same level of nesting? - -## --answers-- - -The elements are each other's parents. - ---- - -The elements are each other's children. - ---- - -The elements are siblings. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md deleted file mode 100644 index 7d440cfab25..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 637f4e8072c65bc8e73dfe2c -title: Working With Text Question F -challengeType: 15 -dashedName: working-with-text-question-f ---- - -# --description-- - -You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. - -When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. - -In the following example, the body element is the parent and the paragraph is the child: - -```html - - - - -Lorem ipsum dolor sit amet.
- - -``` - -Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. - -For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other: - -```html - - - - -Lorem ipsum dolor sit amet.
-Ut enim ad minim veniam.
- - -``` - -You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. - -The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. - -# --question-- - -## --text-- - -What relationship does an element have with any nested element within it? - -## --answers-- - -The element within the other element is called the parent element. - ---- - -The element within the other element is called the child element. - ---- - -The element within the other element is called the sibling element. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md deleted file mode 100644 index 5f5d141fa46..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: 637f4e8772c65bc8e73dfe2d -title: Working With Text Question G -challengeType: 15 -dashedName: working-with-text-question-g ---- - -# --description-- - -HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code. - -Writing an HTML comment is simple: You just enclose the comment with ``tags. For example: - -```html -View the html to see the hidden comments
- - - -Some paragraph text
- - -``` - -# --question-- - -## --assignment-- - -To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites. - -## --text-- - -How do you create HTML comments? - -## --answers-- - -`/* This is an HTML comment */` - ---- - -`` - ---- - -`<-- This is an HTML comment --!>` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/arabic/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md b/curriculum/challenges/arabic/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md deleted file mode 100644 index 5b3f6a44858..00000000000 --- a/curriculum/challenges/arabic/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 5900f36e1000cf542c50fe80 -title: 'Problem 1: Multiples of 3 and 5' -challengeType: 1 -forumTopicId: 301722 -dashedName: problem-1-multiples-of-3-and-5 ---- - -# --description-- - -If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23. - -Find the sum of all the multiples of 3 or 5 below the provided parameter value `number`. - -# --hints-- - -`multiplesOf3and5(10)` should return a number. - -```js -assert(typeof multiplesOf3and5(10) === 'number'); -``` - -`multiplesOf3and5(49)` should return 543. - -```js -assert.strictEqual(multiplesOf3and5(49), 543); -``` - -`multiplesOf3and5(1000)` should return 233168. - -```js -assert.strictEqual(multiplesOf3and5(1000), 233168); -``` - -`multiplesOf3and5(8456)` should return 16687353. - -```js -assert.strictEqual(multiplesOf3and5(8456), 16687353); -``` - -`multiplesOf3and5(19564)` should return 89301183. - -```js -assert.strictEqual(multiplesOf3and5(19564), 89301183); -``` - -# --seed-- - -## --seed-contents-- - -```js -function multiplesOf3and5(number) { - - return true; -} - -multiplesOf3and5(1000); -``` - -# --solutions-- - -```js -const multiplesOf3and5 = (number) => { - var total = 0; - - for(var i = 0; i < number; i++) { - if(i % 3 == 0 || i % 5 == 0) { - total += i; - } - } - return total; -}; -``` diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md deleted file mode 100644 index a8abd3ff027..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 651dd5ae6ffb500e3f2ce47c -title: Challenge 1 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-1 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria doing when she says, `"You must be the new graphic designer"`? - -## --answers-- - -Asking about someone's job role. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -```js -console.log('with code'); -``` - -*** - -Making a statement based on her assumption. - -### --feedback-- - -No, that's not correct - -*** - -Expressing a possibility. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -## --video-solution-- - -3 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md deleted file mode 100644 index 27f5dcb5e42..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5d86ffb500e3f2ce47d -title: Challenge 2 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-2 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md deleted file mode 100644 index a79f83d6f5a..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 651dd5f41d697d0aab7833b5 -title: Challenge 3 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-3 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions -Fill in the blank. - -Hello! You \_\_\_\_ \_\_ the new graphic designer. I'm Maria, the team lead. - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md deleted file mode 100644 index 13028d7c28a..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 651dd3e06ffb500e3f2ce478 -title: "Dialogue: Introducing" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-introducing ---- - -# --description-- - -What the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md deleted file mode 100644 index 3d67f522c07..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 6543abeff5f028dba112f278 -title: "I am: I'm" -challengeType: 19 -dashedName: i-am-im -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, the verb `to be` is used to talk about identities, characteristics, and more. The contraction `I'm` is a combination of `I` and `am`. Here, Tom uses it to introduce himself. - -# --question-- - -## --text-- - -Which operation correctly expands the contraction `I'm`? - -## --answers-- - -`I is` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -*** - -`I am` - -*** - -`I was` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -*** - -`I have` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md deleted file mode 100644 index a2aa6a8f717..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -id: 6543abf5f5f028dba112f279 -title: I'm -challengeType: 22 -dashedName: im -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -The word `I'm` is a contraction of `I am`. Contractions are a way to shorten common combinations of words, especially with verbs. - -# --fillInTheBlank-- - -## --sentence-- - -`Hi, that's right! _ Tom McKenzie.` - -## --blanks-- - -`I'm` diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md deleted file mode 100644 index 3b8b7cff0bd..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 6537e6ece93e5724eeb27c54 -title: Name and Job Title -challengeType: 19 -dashedName: name-and-job-title -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, we often mention our job or role in a company by saying, `I'm [Name], the [Job title].` This lets others know our position or role. - -# --question-- - -## --text-- - -What is Maria's job role at the company? - -## --answers-- - -`Graphic Designer` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`Team Member` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`Team Lead` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`CEO` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md deleted file mode 100644 index 2a3c405b6ad..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 651dd5386ffb500e3f2ce47a -title: Right -challengeType: 22 -dashedName: right -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, to check or confirm something people sometimes use tag questions. For example, `You are a programmer, right?` Here, `right?` is used as a tag to check or confirm the previous statement. - -# --fillInTheBlank-- - -## --sentence-- - -`Hello, You _ the new graphic designer, _?` - -## --blanks-- - -`are` - -### --feedback-- - -Pay attention to the verb in the sentence. - -*** - -`right` - -### --feedback-- - -Pay attention to the verb in the sentence. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md deleted file mode 100644 index 2ae09721cbf..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 6543aa3df5f028dba112f275 -title: Team Lead -challengeType: 22 -dashedName: team-lead -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -A `team lead` is a person who leads or manages a team. In the dialogue, Maria introduces herself as the team lead, meaning she has a leadership role. - -# --fillInTheBlank-- - -## --sentence-- - -`I'm Maria, the _ _.` - -## --blanks-- - -team - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -lead - -### --feedback-- - -Focus on the term Maria used to describe herself. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md deleted file mode 100644 index 3349bcfead9..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -id: 6543aae6f5f028dba112f277 -title: "That's Right: 2" -challengeType: 22 -dashedName: thats-right-2 -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -Placeholder Description \_\_\_ \_\_ - -# --fillInTheBlank-- - -## --sentence-- - -`Hi, _ _! I'm Tom McKenzie. It's a pleasure to meet you.` - -## --blanks-- - -`that's` - -*** - -`right` diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md deleted file mode 100644 index e85982fd561..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 6543aaa9f5f028dba112f276 -title: That's Right -challengeType: 19 -dashedName: thats-right -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -When someone makes a correct assumption or guess about you, you can confirm it using phrases like `that's right`. It's a way of agreeing or saying yes to what is said. - -# --question-- - -## --text-- - -Which phrase does Tom use to confirm Maria's statement about him? - -## --answers-- - -`that's wrong` - -### --feedback-- - -`That's wrong` is used to disagree. - -*** - -`that's okay` - -### --feedback-- - -`that's okay` usually shows acceptance, not confirmation. - -*** - -`that's right` - -*** - -`that's left` - -### --feedback-- - -`that's left` refers to a direction, not confirmation. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md deleted file mode 100644 index dd254987129..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -id: 651dd5296ffb500e3f2ce479 -title: You Are -challengeType: 22 -dashedName: you-are -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, when making introductions or identifying someone, you use the verb `to be`. In this case, `You are` is used to address the person Maria is talking to and affirmatively identify their occupation. - -Maria is introducing herself and confirming Tom's job role. `Are` is used in the present affirmative to make a statement. - -# --fillInTheBlank-- - -## --sentence-- - -`Hello, You _ the new graphic designer, right?` - -## --blanks-- - -are - -### --feedback-- - -The verb `to be` is an irregular verb. When conjugated with the pronoun `you`, `be` becomes `are`. For example: `You are an English learner.` diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md new file mode 100644 index 00000000000..a041fbddef7 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md @@ -0,0 +1,15 @@ +--- +id: 655c0feadb1dd77f6cda623f +title: "Dialogue 1: A Job Interview" +challengeType: 21 +videoId: nLDychdBwUg +dashedName: dialogue-1-a-job-interview +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md new file mode 100644 index 00000000000..97f3f3245d8 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md @@ -0,0 +1,54 @@ +--- +id: 657b0f0be03b2137ed88b36c +title: Task 1 +challengeType: 19 +dashedName: task-1 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +An `interview` is a formal meeting where someone asks questions to learn about another person's experience, skills, or opinions. In job interviews, like in the dialogue, the interviewer asks about the candidate's previous job experiences. + +# --question-- + +## --text-- + +What is the purpose of Anna's meeting with the candidate? + +## --answers-- + +To discuss a new project at Acme Tech + +### --feedback-- + +The dialogue is about an interview, not a project discussion. + +--- + +To give a presentation on web development + +### --feedback-- + +The dialogue focuses on an interview, not a presentation. + +--- + +To have a casual conversation about programming + +### --feedback-- + +This is a formal interview, not a casual conversation. + +--- + +To conduct an interview about the candidate's job experience + +## --video-solution-- + +4 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md new file mode 100644 index 00000000000..301a777a900 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md @@ -0,0 +1,50 @@ +--- +id: 657b106ced8c653be6b3218f +title: Task 2 +challengeType: 22 +dashedName: task-2 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`Good afternoon! Thanks for coming in for this interview. _ you _ me about your _ job experiences?` + +## --blanks-- + +`Can` + +### --feedback-- + +This word is used to ask if someone is able to do something. + +--- + +`tell` + +### --feedback-- + +This word is used when asking someone to give information. + +--- + +`previous` + +### --feedback-- + +This word is used to describe something that happened before now. + + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md new file mode 100644 index 00000000000..ad5202d23d2 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md @@ -0,0 +1,58 @@ +--- +id: 657b108cf870283d22b21e8e +title: Task 3 +challengeType: 19 +dashedName: task-3 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In English, the simple present tense is used to describe habitual or usual actions. However, when you are talking about past roles or experiences, like in an interview, you should use the simple past tense. + +The simple past tense often involves changing verbs. For example, `is` becomes `was` for singular subjects and `are` becomes `were` for plural subjects. + +For example, `I am a teacher` in the present becomes `I was a teacher` for past experiences. Similarly, `They are engineers` changes to `They were engineers` when speaking about the past. + +# --question-- + +## --text-- + +What was the candidate's position at Acme Tech? + +## --answers-- + +`A project manager` + +### --feedback-- + +The candidate stated they were a programmer, not a project manager. + +--- + +`A database analyst` + +### --feedback-- + +The candidate mentioned being a programmer, which is different from a database analyst. + +--- + +`A programmer` + +--- + +`A software tester` + +### --feedback-- + +The candidate specifically mentioned their role as a programmer, not a software tester. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md new file mode 100644 index 00000000000..f757d7077f1 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md @@ -0,0 +1,38 @@ +--- +id: 657b110ad8afcc3f8e586362 +title: Task 4 +challengeType: 22 +dashedName: task-4 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense in English is used for actions or situations that have been completed in the past. It involves changing verbs to show that the action happened before now. In this challenge, you'll practice using the simple past form of verb `to be`. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ there for three years. I _ responsible for developing web applications and maintaining the company's database.` + +## --blanks-- + +`was` + +### --feedback-- + +The first `was` indicates the completion of the time period the candidate spent at their previous job. + +--- + +`was` + +### --feedback-- + +The second `was` is used to describe past responsibility, indicating what the candidate used to do in their previous job. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md new file mode 100644 index 00000000000..a2258172744 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md @@ -0,0 +1,49 @@ +--- +id: 657b115008a62d41c0d7482f +title: Task 5 +challengeType: 19 +dashedName: task-5 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In the context of programming and technology, the term `web applications` refers to software programs that run on a web server and are accessed through a web browser. They are an essential part of modern technology, allowing users to perform functions or access services over the internet. + +# --question-- + +## --text-- + +What does `web applications` refer to in the context of programming? + +## --answers-- + +Mobile apps that are downloaded from app stores + +### --feedback-- + +While mobile apps are a type of application, `web applications` specifically refer to those accessed through a web browser. + +--- + +Programs that run on a web server and are accessed via a web browser + +--- + +Physical hardware used in networking + +### --feedback-- + +Web applications are software, not physical hardware. + +--- + +Websites that only provide information without user interaction + +### --feedback-- + +Web applications are interactive and functional, not just informational. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md new file mode 100644 index 00000000000..6c2c5ba78bf --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md @@ -0,0 +1,49 @@ +--- +id: 657b119f0ce64343420bb850 +title: Task 6 +challengeType: 19 +dashedName: task-6 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +A `database` is a structured collection of data, typically stored electronically in a computer system. It is used to organize, store, and retrieve large amounts of information efficiently. In programming, `database` is essential for managing data that applications need to function. + +# --question-- + +## --text-- + +What is a `database` in the context of programming? + +## --answers-- + +A structured collection of data stored electronically + +--- + +A tool for designing websites + +### --feedback-- + +While important in web development, a database is not a tool for designing websites, but for storing data. + +--- + +A programming language used to create applications + +### --feedback-- + +A database is not a programming language; it's a system for storing and managing data. + +--- + +A type of computer virus + +### --feedback-- + +A database is a safe and structured way to store data, not a computer virus. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md new file mode 100644 index 00000000000..03e329649a9 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md @@ -0,0 +1,40 @@ +--- +id: 657b11e082e48a44eb4bfc09 +title: Task 7 +challengeType: 22 +dashedName: task-7 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the candidate's response and fill in the missing words. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ also part of the _ update team.` + +## --blanks-- + +`was` + +### --feedback-- + +This word is a past tense verb. You use it to talk about something that happened in the past. + +--- + +`software` + +### --feedback-- + +This word refers to computer programs. It's an important term in technology and programming. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md new file mode 100644 index 00000000000..67343b31705 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md @@ -0,0 +1,57 @@ +--- +id: 657b11f87368cf463ea4fe46 +title: Task 8 +challengeType: 19 +dashedName: task-8 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Questions in the past tense with the verb `to be` are very similar to how you do it in the present tense. The only difference is that you need to remember to conjugate the verb to `were` or `was`, followed by the subject and then the main verb. For example: + + `Were you at the meeting yesterday?` Notice how `were` comes before `you` to for a question. + `What was my assignment?` For a specific question, notice how `was` comes after `what` and before `my`. + +# --question-- + +## --text-- + +How does Anna ask about specific projects in the past tense? + +## --answers-- + +`Where there any specific projects you'd like to mention?` + +### --feedback-- + +`Where` is used for locations. The correct form for asking about past events is `Were`. + +--- + +`Were there any specific projects you'd like to mention?` + +--- + +`Was there any specific projects you'd like to mention?` + +### --feedback-- + +`Was` is used with singular nouns. Since `projects` is plural, `Were` is the correct choice. + +--- + +`Are there any specific projects you'd like to mention?` + +### --feedback-- + +`Are` is present tense. The question is about past projects, so `Were` is needed. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md new file mode 100644 index 00000000000..e6bc643d065 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md @@ -0,0 +1,55 @@ +--- +id: 657b1240ef768447b80817ad +title: Task 9 +challengeType: 19 +dashedName: task-9 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense, as reviewed earlier, is used for actions completed in the past. In this context, `we were involved in` combines the simple past tense (`were`) with the expression `involved in`, which means being a part of something, especially in an active or important role. For example, `They were involved in organizing the event` means they played an important role in organizing it. + +# --question-- + +## --text-- + +How does the candidate describe their role in the project? + +## --answers-- + +`We had involvement in the development of the e-commerce platform.` + +### --feedback-- + +Although this phrase communicates involvement, the more common expression in English is `were involved in`. + +--- + +`We were engaged in the development of the e-commerce platform.` + +### --feedback-- + +`engaged in` is similar but not the exact phrase used by the candidate. `Involved in` specifically indicates an active participation. + +--- + +`We were involved in the development of the e-commerce platform.` + +--- + +`We participated in the development of the e-commerce platform.` + +### --feedback-- + +While `participated in` suggests involvement, the specific phrase used here is `involved in`. + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md new file mode 100644 index 00000000000..f51e04c012a --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md @@ -0,0 +1,49 @@ +--- +id: 657b12ae08dd7049b300c901 +title: Task 10 +challengeType: 19 +dashedName: task-10 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +An `e-commerce platform` refers to a software application that allows businesses to manage their online sales operations. It typically includes features for displaying products, processing orders, and handling customer transactions. This term is essential in the world of online business, as it enables companies to sell goods and services over the internet. + +# --question-- + +## --text-- + +What is an `e-commerce platform` in the context of online business? + +## --answers-- + +A platform for social media marketing + +### --feedback-- + +While e-commerce platforms may use social media for marketing, they are primarily used for online sales operations. + +--- + +A software application for managing online sales + +--- + +A tool for website design and development + +### --feedback-- + +An e-commerce platform is specifically for managing online sales, not just website design. + +--- + +A system for email communication with customers + +### --feedback-- + +Though communication might be a feature, an e-commerce platform's main function is to manage online sales. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md new file mode 100644 index 00000000000..092c2b7ff32 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md @@ -0,0 +1,41 @@ +--- +id: 657b12e7c306334b7c320221 +title: Task 11 +challengeType: 22 +dashedName: task-11 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the candidate's statement and fill in the missing words. + +# --fillInTheBlank-- + +## --sentence-- + +`We _ responsible for the checkout process, and it _ a successful implementation.` + +## --blanks-- + +`were` + +### --feedback-- + +This is the past tense of `are` used for plural subjects. + +--- + +`was` + +### --feedback-- + +This is the past tense of `is` used for singular subjects or situations. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md new file mode 100644 index 00000000000..5a555480e1c --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md @@ -0,0 +1,49 @@ +--- +id: 657b13088693ef4ce21ce0e4 +title: Task 12 +challengeType: 19 +dashedName: task-12 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The term `checkout process` refers to the steps involved in completing a purchase, whether in a physical store or online. In a physical store, this usually involves taking items to a cashier, paying, and receiving a receipt. In online shopping, it includes adding items to a cart, entering shipping and payment details, and finalizing the order. + +# --question-- + +## --text-- + +What does the `checkout process` typically involve? + +## --answers-- + +Signing up for a store's loyalty program + +### --feedback-- + +While loyalty programs are part of customer engagement, the checkout process is specifically about completing a transaction. + +--- + +Arranging items on shelves in a store + +### --feedback-- + +Arranging items is a part of store management, not related to the checkout process of completing a purchase. + +--- + +Conducting market research + +### --feedback-- + +Market research is important for business strategy, but it's separate from the checkout process, which is directly involved in sales transactions. + +--- + +Completing a purchase through payment and receipt of goods + +## --video-solution-- + +4 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md new file mode 100644 index 00000000000..db7a9bbed14 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md @@ -0,0 +1,49 @@ +--- +id: 657b133afcef714e542b557a +title: Task 13 +challengeType: 19 +dashedName: task-13 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Implementation` in a technical or business context refers to the process of putting a plan or design into effect. In software development, for instance, implementation involves the actual coding and setup of a software application based on designed specifications. It is a critical phase where ideas or plans are turned into a functioning reality. + +# --question-- + +## --text-- + +What does `implementation` mean in a project context? + +## --answers-- + +The planning stage of a project + +### --feedback-- + +Planning is the phase where strategies are formed, not the actual execution or implementation of those plans. + +--- + +The analysis of project results + +### --feedback-- + +Analysis is about evaluating outcomes, whereas implementation is about executing or carrying out the project plans. + +--- + +The process of team formation + +### --feedback-- + +Team formation is part of project setup, but implementation specifically refers to executing the planned tasks of the project. + +--- + +The execution of a plan or design + +## --video-solution-- + +4 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md new file mode 100644 index 00000000000..1fa977ff3c0 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md @@ -0,0 +1,49 @@ +--- +id: 657b135e9029fb4f8141e40c +title: Task 14 +challengeType: 22 +dashedName: task-14 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words. This is a great way to practice and remember these words. + +# --fillInTheBlank-- + +## --sentence-- + +`Anna: That's excellent. _ there any specific projects you'd like to mention?` + +`Candidate: Yes, in one of my team's projects, we were _ in the development of an e-commerce platform. We were responsible for the _ process, and it was a successful implementation.` + +## --blanks-- + +`Were` + +### --feedback-- + +This is the past tense form of `are`. The first letter should be capitalized. + +--- + +`involved` + +### --feedback-- + +This word means participating actively in something. + +--- + +`checkout` + +### --feedback-- + +This term refers to the process of completing a purchase. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md new file mode 100644 index 00000000000..94904516eba --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md @@ -0,0 +1,54 @@ +--- +id: 657b138d33db9e50f116b5f0 +title: Task 15 +challengeType: 19 +dashedName: task-15 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and answer the question. + +# --question-- + +## --text-- + +How does Anna ask about the candidate's educational background in computer science? + +## --answers-- + +`Are you educated in computer science?` + +### --feedback-- + +`Are you` is present tense, but Anna's question is about the candidate's past education. + +--- + +`Do you study computer science?` + +### --feedback-- + +`Do you study` is present tense. The question is about past education. + +--- + +`Were you educated in computer science?` + +--- + +`Have you studied computer science?` + +### --feedback-- + +`Have you studied` is a different form, asking if they have ever studied it at any time. `Were you educated` specifically asks about formal education in the past. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md new file mode 100644 index 00000000000..6044644f850 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md @@ -0,0 +1,49 @@ +--- +id: 657b1431076b365555784189 +title: Task 16 +challengeType: 19 +dashedName: task-16 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +A `bachelor's degree` is an undergraduate academic degree awarded by colleges and universities upon completion of a course of study. In the term `bachelor's degree`, the use of the noun (`bachelor`) followed by the `'s` indicates possession or association. This form is commonly used to show that something belongs to or is related to the noun, as in `today's news` or `teacher's guide`. + +# --question-- + +## --text-- + +What does `bachelor's degree` refer to? + +## --answers-- + +An undergraduate academic degree + +--- + +A type of professional certification + +### --feedback-- + +A bachelor's degree is an academic qualification, not a professional certification. + +--- + +A high school diploma + +### --feedback-- + +A bachelor's degree is a higher education qualification, more advanced than a high school diploma. + +--- + +A master's program entry requirement + +### --feedback-- + +While a bachelor's degree may be required for a master's program, it itself refers to an undergraduate degree. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md new file mode 100644 index 00000000000..299109790e0 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md @@ -0,0 +1,56 @@ +--- +id: 657b145976723b56a97b8dda +title: Task 17 +challengeType: 19 +dashedName: task-17 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `I was introduced to` uses the simple past tense form `was` of the verb `be`, combined with the past participle `introduced`. This structure, `be` followed by a verb suffixed with `-ed`, is often used to describe actions that happened to the subject in the past. For example: + +`At college, I was introduced to many programing languages` + +# --question-- + +## --text-- + +What does the candidate mean by saying `I was introduced to various programming languages and software development principles`? + +## --answers-- + +I taught myself various programming languages and principles + +### --feedback-- + +`I was introduced to` implies being formally taught or shown by someone else, not self-teaching. + +--- + +I learned about various programming languages and principles in my studies + +--- + +I have extensive experience with various programming languages and principles + +### --feedback-- + +The phrase indicates initial exposure to these topics, not necessarily extensive experience. + +--- + +I developed various programming languages and principles + +### --feedback-- + +Being introduced to something means learning about it for the first time, not creating or developing it. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md new file mode 100644 index 00000000000..2e11e13fa69 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md @@ -0,0 +1,49 @@ +--- +id: 657b149630b3ea5873269a38 +title: Task 18 +challengeType: 19 +dashedName: task-18 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `various` is an adjective used to describe a number of different types or kinds of something, emphasizing diversity or variety. It is often used to indicate that there are several distinct items or examples being referred to. For example, saying `various books` means books of different kinds or genres. + +# --question-- + +## --text-- + +What does `various` imply when talking about programming languages and software development principles? + +## --answers-- + +Different types or kinds + +--- + +A specific type or kind + +### --feedback-- + +The term `various` implies diversity, not specificity. + +--- + +Only one type + +### --feedback-- + +`Various` indicates a number of different types, not just one. + +--- + +Irrelevant or unrelated types + +### --feedback-- + +`Various` does mean different types, but these are usually relevant and related to the context. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md new file mode 100644 index 00000000000..b217384d87c --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md @@ -0,0 +1,38 @@ +--- +id: 657b14d8353d665a187fe771 +title: Task 19 +challengeType: 22 +dashedName: task-19 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this challenge, you'll practice filling in key terms from the dialogue. These terms are commonly used in job interviews and are essential for understanding the context of the discussion. + +# --fillInTheBlank-- + +## --sentence-- + +`Good afternoon! Sure, I was a programmer at Acme Tech. I was there for three years. I was responsible for developing web _ and maintaining the company's _. I was also part of the software update team.` + +## --blanks-- + +`applications` + +### --feedback-- + +These are programs designed to perform specific tasks or functions. + +--- + +`database` + +### --feedback-- + +This is a collection of information organized for easy access, management, and updating. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md new file mode 100644 index 00000000000..5d81b22a9e7 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md @@ -0,0 +1,62 @@ +--- +id: 657b153ac677705c7059530d +title: Task 20 +challengeType: 19 +dashedName: task-20 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `could you tell me` is a polite way to ask someone for information. It's commonly used in formal or professional situations, like job interviews or meetings. +In English, some verbs have irregular past forms, meaning they do not follow the regular pattern of adding `-ed` to make the past tense. `Can` is one such verb, and its irregular simple past form is `could`. + +The existence of irregular forms, like `could`, often comes from the way language has evolved over time. These forms do not follow the regular patterns and need to be memorized. + +For example: + +- Present: `I can speak English.` +- Past: `I could speak English when I was six.` + +# --question-- + +## --text-- + +What does the phrase `could you tell me` in Anna's sentence express? + +## --answers-- + +A polite request for information + +--- + +A command to do something immediately + +### --feedback-- + +The phrase `could you tell me` is used for polite requests, not direct commands. + +--- + +A suggestion for future action + +### --feedback-- + +This phrase is asking for information now, not suggesting something for the future. + +--- + +An offer to help someone + +### --feedback-- + +This phrase is more about asking for information than offering help. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md new file mode 100644 index 00000000000..ecf0d666af0 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md @@ -0,0 +1,54 @@ +--- +id: 657b15dbcafe4d5f39a5de82 +title: Task 21 +challengeType: 19 +dashedName: task-21 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `previous` is used to describe something that happened before the current time or situation. It's often used to refer to past experiences, jobs, or events. + +# --question-- + +## --text-- + +In the context of Anna's question, what does `previous` refer to? + +## --answers-- + +Past roles and responsibilities + +--- + +Future roles and responsibilities + +### --feedback-- + +`Previous` refers to something that has already happened, not something in the future. + +--- + +Current roles and responsibilities + +### --feedback-- + +`Previous` means something that happened before now, not what is happening currently. + +--- + +Unrelated roles and responsibilities + +### --feedback-- + +`Previous` specifically relates to roles and responsibilities that were held before, not those unrelated. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md new file mode 100644 index 00000000000..8497f67b9bb --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md @@ -0,0 +1,53 @@ +--- +id: 657b160d6a8662610fe6a523 +title: Task 22 +challengeType: 22 +dashedName: task-22 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense in English is used for actions or situations that were completed in the past. Regular verbs in the past tense usually end with `-ed`, while irregular verbs have unique past forms. For example, as you learned in previous tasks, `was` and `were` are the past forms of `is` and `are`. + +Examples of simple past tense: + +- `I worked at a company.` (`work` becomes `worked`) +- `I was happy.` (`is` becomes `was`) +- `We were busy.` (`are` becomes `were`) + +# --fillInTheBlank-- + +## --sentence-- + +`Hello! Certainly. I _ at Mock Corporation for five years. I _ part of a team of software engineers, and we _ responsible for developing and maintaining various applications.` + +## --blanks-- + +`worked` + +### --feedback-- + +Think of the past tense of `work`, a regular verb that follows the usual `-ed` ending pattern. + +--- + +`was` + +### --feedback-- + +Recall the past tense form of `is`, which changes to a completely different word in its irregular past form. + +--- + +`were` + +### --feedback-- + +Consider the past tense of `are`, an irregular verb that also changes to a different word in the past. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md new file mode 100644 index 00000000000..8e1b26a3bce --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md @@ -0,0 +1,46 @@ +--- +id: 657b163c9da40e62b904be1f +title: Task 23 +challengeType: 22 +dashedName: task-23 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review of the past simple interrogative. In questions, the simple past tense often begins with a past tense verb, followed by the subject and the rest of the sentence. This structure is used to ask about past events or states. + +# --fillInTheBlank-- + +## --sentence-- + +`That's great to hear. _ the members of the team _ _ any specific achievements or projects?` + +## --blanks-- + +`Were` + +### --feedback-- + +This is the past form of `are` used to ask about a past state or condition. + +--- + +`involved` + +### --feedback-- + +Think of a word that means `participated in` or `engaged with`. + +--- + +`in` + +### --feedback-- + +A preposition that often follows `involved` to indicate participation or inclusion. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md new file mode 100644 index 00000000000..bc7924edcf6 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md @@ -0,0 +1,54 @@ +--- +id: 657b18e71067d6680b9ac5d3 +title: Task 24 +challengeType: 19 +dashedName: task-24 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `redesign` means to design something again or differently. It's often used in the context of improving or updating the design of an existing product, service, or structure. In software and web development, redesigning is a common practice to enhance functionality, user experience, or aesthetics. + +# --question-- + +## --text-- + +What does `redesign` imply in Candidate2's statement about the website project? + +## --answers-- + +To design for the first time + +### --feedback-- + +`Redesign` implies working on something that already exists, not creating it for the first time. + +--- + +To remove the design + +### --feedback-- + +`Redesign` means to change or improve the existing design, not to remove it. + +--- + +To change or improve an existing design + +--- + +To copy a design + +### --feedback-- + +`Redesign` involves making changes or improvements, not copying a design as it is. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md new file mode 100644 index 00000000000..ed588a90563 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md @@ -0,0 +1,54 @@ +--- +id: 657b1985ae17886b05b382b1 +title: Task 25 +challengeType: 19 +dashedName: task-25 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `performance` in a technical context often refers to how well a system or component operates, especially in terms of speed, efficiency, and reliability. For websites and software, performance can relate to how quickly pages load, the responsiveness of the application, or the stability of the system under various conditions. + +# --question-- + +## --text-- + +What does `performance` refer to in Candidate2's statement about the website? + +## --answers-- + +A live presentation + +### --feedback-- + +While `performance` can mean a presentation, in this context, it relates to the functioning of the website. + +--- + +Artistic display + +### --feedback-- + +In a technical context, `performance` refers to operational effectiveness, not an artistic aspect. + +--- + +Financial success + +### --feedback-- + +`Performance` in this context is about the website's operational aspects, not its financial success. + +--- + +How well the website operates + +## --video-solution-- + +4 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md new file mode 100644 index 00000000000..98e6bda774a --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md @@ -0,0 +1,54 @@ +--- +id: 657b19bf7b32af6caf763ef7 +title: Task 26 +challengeType: 19 +dashedName: task-26 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `collaborative effort` refers to a situation where people work together as a team to achieve a common goal. This kind of teamwork is essential in many work environments, especially on projects where different skills and perspectives are needed. + +# --question-- + +## --text-- + +What does `collaborative effort` imply in the context of Candidate2's statement? + +## --answers-- + +Working independently + +### --feedback-- + +`Collaborative effort` means working together as a team, not independently. + +--- + +Teamwork to achieve a goal + +--- + +Avoiding responsibility + +### --feedback-- + +`Collaborative effort` involves taking shared responsibility, not avoiding it. + +--- + +Focusing on individual skills + +### --feedback-- + +`Collaborative effort` emphasizes teamwork over individual skills. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md new file mode 100644 index 00000000000..56a621b07c6 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md @@ -0,0 +1,38 @@ +--- +id: 657b1a03df3ec46eca276046 +title: Task 27 +challengeType: 22 +dashedName: task-27 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words. + +# --fillInTheBlank-- + +## --sentence-- + +`Yes, our team _ involved in a project to _ the company's website.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of `is`, used for singular subjects. + +--- + +`redesign` + +### --feedback-- + +This word means to design something again in a different way. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md new file mode 100644 index 00000000000..66d49e9e89f --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md @@ -0,0 +1,55 @@ +--- +id: 657b1a27dc6daf6ffd52ff1f +title: Task 28 +challengeType: 19 +dashedName: task-28 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In English, the noun suffixed with `'s` followed by a second noun structure is used to show possession or belonging. If the first noun is singular, as in `Sarah's laptop`, it indicates that the laptop belongs to Sarah. However, if the first noun is plural, the structure changes to noun suffixed with `'`, as in `teachers' office`, indicating an office for teachers. + +# --question-- + +## --text-- + +What does `master's degree` in the context of the dialogue refer to? + +## --answers-- + +A degree for school teachers + +### --feedback-- + +`Master's degree` refers to an advanced academic degree, not specifically for teachers. + +--- + +A primary level educational degree + +### --feedback-- + +`Master's degree` is a higher education qualification, beyond the primary level. + +--- + +A degree in mastering skills + +### --feedback-- + +While it implies expertise, `master's degree` specifically refers to an academic qualification. + +--- + +An advanced academic degree + +## --video-solution-- + +4 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md new file mode 100644 index 00000000000..bf63c3e8d24 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md @@ -0,0 +1,49 @@ +--- +id: 657b1a637e4dc571f8f4d3d7 +title: Task 29 +challengeType: 19 +dashedName: task-29 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `appreciate` is often used to express gratitude or to acknowledge the value or importance of something or someone's actions. It's a way of showing that you recognize and are thankful for someone's help, effort, or achievement. + +# --question-- + +## --text-- + +In a work meeting, your colleague says, `I really appreciate your help on this project.` What is your colleague expressing? + +## --answers-- + +Dissatisfaction with your work + +### --feedback-- + +`Appreciate` means to be grateful or thankful, not to show dissatisfaction. + +--- + +Indifference to your contribution + +### --feedback-- + +`Appreciate` is used to express positive recognition, not indifference. + +--- + +Gratitude for your contribution + +--- + +A need for more assistance + +### --feedback-- + +`Appreciate` here indicates satisfaction with the help received, not a request for more assistance. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md new file mode 100644 index 00000000000..4fa33c1c2d0 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md @@ -0,0 +1,47 @@ +--- +id: 657b1a9581015573806e1e20 +title: Task 30 +challengeType: 22 +dashedName: task-30 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words you learned. + +# --fillInTheBlank-- + +## --sentence-- + +`We _ responsible for implementing new features and ensuring the website's performance. It _ a _ effort, and we were able to deliver the project on time.` + +## --blanks-- + +`were` + +### --feedback-- + +This is the past tense form of `are`, used for plural subjects. + +--- + +`was` + +### --feedback-- + +This is the past tense form of `is`, used for singular subjects. + +--- + +`collaborative` + +### --feedback-- + +This word means working together as a team. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md new file mode 100644 index 00000000000..6013cb50f86 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md @@ -0,0 +1,39 @@ +--- +id: 657b1cc072206e7ac3db88b8 +title: Task 31 +challengeType: 22 +dashedName: task-31 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the missing words correctly. This is a great way to practice what you've learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I have a _ degree in computer science. My studies _ quite intensive, and I was introduced to many different methodologies.` + +## --blanks-- + +`master's` + +### --feedback-- + +This term, using the `noun's noun` structure, refers to an advanced academic degree. + +--- + +`were` + +### --feedback-- + +This is the past tense form of `are` used for plural subjects or things. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md new file mode 100644 index 00000000000..1c7c7b4603c --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md @@ -0,0 +1,30 @@ +--- +id: 657b1d080265ba7c4f96bf79 +title: Task 32 +challengeType: 22 +dashedName: task-32 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task helps you review the word you learned. Listen to the dialogue and complete the sentence correctly. + +# --fillInTheBlank-- + +## --sentence-- + +`Impressive! We _ candidates with strong educational backgrounds and practical experience.` + +## --blanks-- + +`appreciate` + +### --feedback-- + +This word means to recognize the value or importance of something or someone's actions. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md new file mode 100644 index 00000000000..28e4211c290 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md @@ -0,0 +1,15 @@ +--- +id: 657b1d4ec0e2587e8bcc95f7 +title: "Dialogue 3: Two Workmates Talk About Their Backgrounds" +challengeType: 21 +dashedName: dialogue-3-two-workmates-talk-about-their-backgrounds +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md new file mode 100644 index 00000000000..df8ebc66d25 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md @@ -0,0 +1,54 @@ +--- +id: 657b1da0b27fef8117827ce5 +title: Task 33 +challengeType: 19 +dashedName: task-33 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You've already learned about the simple past tense. Now, you can explore it further. The simple past tense is often formed by adding `-ed` to a verb. But, when a verb ends with an `e`, you just add a `d`. For example, `notice` becomes `noticed`. + +# --question-- + +## --text-- + +What does `noticed` in Sarah's sentence indicate? + +## --answers-- + +Sarah observed something in the past + +--- + +Sarah is planning to observe something + +### --feedback-- + +The simple past tense `noticed` indicates a completed action in the past, not a future plan. + +--- + +Sarah continuously observes something + +### --feedback-- + +The simple past tense `noticed` is used for actions that were completed, not ongoing actions. + +--- + +Sarah never observes anything + +### --feedback-- + +`Noticed` implies that Sarah did observe something, not never observing. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md new file mode 100644 index 00000000000..5a1ba6afbfc --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md @@ -0,0 +1,30 @@ +--- +id: 657b1dfec76149836ea5c7d0 +title: Task 34 +challengeType: 22 +dashedName: task-34 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this task, you will focus on the past simple negative. It's created by adding `not` after the auxiliary verb `was` or `were`. For example, `was` becomes `wasn't` (`was not`) and `were` becomes `weren't` (`were not`). This form is used to describe something that did not happen in the past. + +# --fillInTheBlank-- + +## --sentence-- + +`It _ exactly tech-related, but I learned a lot about problem-solving and critical thinking.` + +## --blanks-- + +`wasn't` + +### --feedback-- + +This word is used to make a negative statement in the past tense. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md new file mode 100644 index 00000000000..da30e71e20a --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md @@ -0,0 +1,49 @@ +--- +id: 657b1e2fad2ffe84ab420a56 +title: Task 35 +challengeType: 19 +dashedName: task-35 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You're already familiar with `wasn't` and `weren't` for past simple negative. Now, let's explore `didn't`, a contraction of `did not`. It's used with the base form of verbs (the infinitive without `to`) to express that an action did not happen in the past. For example, `didn't go` means the action of going did not occur. + +# --question-- + +## --text-- + +Imagine you are reading a story about a character who planned to attend a concert but couldn't. How would you describe this situation? + +## --answers-- + +The character enjoyed the concert + +### --feedback-- + +Using `didn't` suggests the character did not go to the concert, contradicting the idea of enjoying it. + +--- + +The character didn't attend the concert + +--- + +The character always goes to concerts + +### --feedback-- + +This expression refers to a regular habit, not a specific event in the past. + +--- + +The character is looking forward to the next concert + +### --feedback-- + +This option is about future anticipation. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md new file mode 100644 index 00000000000..938a8118ce2 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md @@ -0,0 +1,54 @@ +--- +id: 657b1e66159fec86336a737b +title: Task 36 +challengeType: 19 +dashedName: task-36 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You've already learned the basics of the simple past tense. Now you can dive deeper into it. Typically, the simple past tense is formed by adding `-ed` to regular verbs. For instance, the verb `play` becomes `played` in the simple past. This tense is used to describe actions that were completed at a specific time in the past. + +# --question-- + +## --text-- + +What does `I played` in Sophie's sentence suggest about her experience with coding? + +## --answers-- + +She casually experimented with coding in the past + +--- + +She is currently playing a coding game + +### --feedback-- + +`Played` is in the past tense, indicating a past action, not something happening currently. + +--- + +She plans to start coding soon + +### --feedback-- + +`Played` implies she already has some experience with coding, not that she is planning to start. + +--- + +She never tried coding + +### --feedback-- + +Using `played` confirms she did engage in coding, contradicting the idea of never trying it. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md new file mode 100644 index 00000000000..2bd70b3d732 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md @@ -0,0 +1,49 @@ +--- +id: 657b1e9a62603587747f7f45 +title: Task 37 +challengeType: 19 +dashedName: task-37 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In English, when forming questions in the simple past tense, you often use `did`. This is followed by the subject and the base form of the verb (without `ed`). For example, `Did you enjoy` is a past simple interrogative phrase where `did` is the auxiliary verb, `you` is the subject, and `enjoy` is the base form of the verb. + +# --question-- + +## --text-- + +What does a question like `Did you enjoy the concert last night?` ask about? + +## --answers-- + +Are you going to enjoy the concert? + +### --feedback-- + +This implies a future event. The question with `did` is asking about a past experience. + +--- + +Do you enjoy concerts in general? + +### --feedback-- + +This is asking about general preferences, not a specific past event. + +--- + +Did you have a good experience at the concert last night? + +--- + +Will you enjoy future concerts? + +### --feedback-- + +The question is about a past event, not future experiences. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md new file mode 100644 index 00000000000..430fa995037 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md @@ -0,0 +1,42 @@ +--- +id: 657b1ee1de7216896b5b4361 +title: Task 38 +challengeType: 22 +dashedName: task-38 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blank correctly. This task is a review. Remember, the simple past tense is used to talk about actions or situations in the past, and the negative form is used to describe things that did not happen. + +# --fillInTheBlank-- + +## --sentence-- + +`Sarah: That's interesting! So, you _ work on many programming projects during your studies?` + +`Sophie: No, not really. I _ around with coding, but most of my projects involved circuit designs and electrical systems. It was a bit different.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This word is used here to talk about something that was not done in the past. + +--- + +`played` + +### --feedback-- + +This word suggests that Sophie casually engaged in coding for pleasure or interest. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md new file mode 100644 index 00000000000..dfcc68a881a --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md @@ -0,0 +1,40 @@ +--- +id: 657b1f0585d48f8ac0b19654 +title: Task 39 +challengeType: 22 +dashedName: task-39 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this task, you'll focus on answering questions in the simple past tense. When responding to a past simple interrogative (a question), you can answer affirmatively with `did` or negatively with `didn't`. For example, `Did you go to the party?` can be answered with `I did` (affirmative) or `I didn't` (negative). Listen to the dialogue and fill in the blanks correctly to practice this structure. + +# --fillInTheBlank-- + +## --sentence-- + +`Sarah: I see. _ you enjoy your time there, even if it wasn't entirely tech-focused? Sophie: I _.` + +## --blanks-- + +`Did` + +### --feedback-- + +This word is used to form a past simple interrogative question. The first letter should be capitalized. + +--- + +`did` + +### --feedback-- + +This response is an affirmative answer to the past simple interrogative question. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md new file mode 100644 index 00000000000..92e4b28c489 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md @@ -0,0 +1,49 @@ +--- +id: 657b1f598f63008c8bdb20b8 +title: Task 40 +challengeType: 19 +dashedName: task-40 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In the simple past tense, some verbs are irregular and don't follow the regular `-ed` ending pattern. One example of this is the verb `meet`, which becomes `met` in the past tense. This is important to remember when talking about past events. + +# --question-- + +## --text-- + +During a class reunion, an old friend tells you, `We met for the first time in art class.` What is your friend referring to with `met`? + +## --answers-- + +We are meeting right now in art class + +### --feedback-- + +The use of `met` indicates a past event, not something happening currently. + +--- + +Our first encounter was in the past, specifically in art class + +--- + +We will meet for the first time soon + +### --feedback-- + +`Met` indicates a past action, not a future arrangement. + +--- + +We have never been in art class together + +### --feedback-- + +`Met` suggests a past meeting. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md new file mode 100644 index 00000000000..e3cdc339c1f --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md @@ -0,0 +1,49 @@ +--- +id: 657b1f981cd42e8dc3b282d9 +title: Task 41 +challengeType: 19 +dashedName: task-41 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You'll learn another special case in this task. It's the past tense form of `have`. Unlike regular verbs that add `-ed` for the past tense, `have` becomes `had`. This irregular form is used for both singular and plural subjects in the past tense, making it a unique and important verb to remember. + +# --question-- + +## --text-- + +What does `had` imply in a sentence like `They had a meeting yesterday?` + +## --answers-- + +They possessed or experienced something in the past + +--- + +They are having a meeting right now + +### --feedback-- + +`Had` is used for past actions, indicating the meeting occurred in the past, not at the present moment. + +--- + +They will have a meeting tomorrow + +### --feedback-- + +`Had` indicates a past action, not a future plan. + +--- + +They never have meetings + +### --feedback-- + +Using `had` confirms that the meeting took place in the past. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md new file mode 100644 index 00000000000..9f86ab82bcb --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md @@ -0,0 +1,47 @@ +--- +id: 657b1fe950c0df90346e5d12 +title: Task 42 +challengeType: 22 +dashedName: task-42 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review of the words `met`, `had`, and `wasn't`. You have already learned these words. Listen to the dialogue and fill in the blanks with the correct words. This exercise is a good way to practice and reinforce your understanding of these words in context. + +# --fillInTheBlank-- + +## --sentence-- + +`I did. It was challenging, but I _ some fantastic people. We _ a bunch of fun coding marathons, although I _ always a very strong programmer.` + +## --blanks-- + +`met` + +### --feedback-- + +This word is used here to describe encountering people in the past. + +--- + +`had` + +### --feedback-- + +This word is used to express possession or experiences in the past. + +--- + +`wasn't` + +### --feedback-- + +This word is the negative form in the past tense, indicating something that was not the case. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md new file mode 100644 index 00000000000..2ee4e256d2a --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md @@ -0,0 +1,39 @@ +--- +id: 657b201372864e91d4f5bb53 +title: Task 43 +challengeType: 22 +dashedName: task-43 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +When a verb ends in a consonant followed by `y`, you should change the `y` to `i` and add `ed` for the past tense. For example, `carry` becomes `carried`. Note that this rule applies when the `y` follows a consonant, not a vowel, so the simple past form of `convey` is `conveyed`. For regular verbs, you simply add `ed` to form the past tense. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ at a small college as well and _ in information technology.` + +## --blanks-- + +`studied` + +### --feedback-- + +The past simple tense of `study` is formed by changing `y` to `i` and adding `ed`. + +--- + +`majored` + +### --feedback-- + +This word follows the regular past simple tense formation by just adding `ed`. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md new file mode 100644 index 00000000000..67255d1bac6 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md @@ -0,0 +1,26 @@ +--- +id: 657b20338e0802931673c1e1 +title: Task 44 +challengeType: 22 +dashedName: task-44 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + +# --description-- + +You've learned that for verbs ending in `e`, you simply add `d` to form the simple past tense. Choose the correct form of `love` to complete the sentence: + +# --fillInTheBlank-- + +## --sentence-- + +`Last summer, she really _ the beach vacation.` + +## --blanks-- + +`loved` + +### --feedback-- + +To form the simple past, add `d` to the base form of the verb, `love`. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md new file mode 100644 index 00000000000..4d89a2935c0 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md @@ -0,0 +1,54 @@ +--- +id: 657b20985d315095e5c3851d +title: Task 45 +challengeType: 19 +dashedName: task-45 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this context, `got` is a special case in the simple past tense. It's the past tense of `get`. Unlike regular verbs that typically add `-ed` for the past tense, `get` changes to `got`. + +# --question-- + +## --text-- + +In the context of Sarah's statement, what does `got` imply about her experience? + +## --answers-- + +She is getting the opportunity now + +### --feedback-- + +`Got` indicates a past opportunity, not something happening currently. + +--- + +She had the opportunity in the past + +--- + +She will get the opportunity in the future + +### --feedback-- + +`Got` refers to a past experience, not a future possibility. + +--- + +She never gets such opportunities + +### --feedback-- + +`Got` in this context suggests she did have this opportunity. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md new file mode 100644 index 00000000000..ac32d364daa --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md @@ -0,0 +1,50 @@ +--- +id: 657b21e28a01039cb27b4f13 +title: Task 46 +challengeType: 19 +dashedName: task-46 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `exactly` is used to emphasize the truth or accuracy of a statement or description. It can mean `precisely` or `just`. For example, if someone says, `It's exactly what I needed`, they mean that it is precisely or perfectly what was required. `Exactly` often highlights that something is correct in every detail. + +# --question-- + +## --text-- + +What does `exactly` imply in a sentence like `This is exactly the kind of work I enjoy`? + +## --answers-- + +This is somewhat similar to the work I enjoy + +### --feedback-- + +`Exactly` indicates a perfect match, not just a similarity. + +--- + +This is the opposite of the work I enjoy + +### --feedback-- + +`Exactly` implies a perfect match, not an opposite. + +--- + +I am not sure if this is the work I enjoy + +### --feedback-- + +Using `exactly` shows certainty, not uncertainty. + +--- + +This is precisely the type of work that I find enjoyable + +## --video-solution-- + +4 + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md new file mode 100644 index 00000000000..36c267c651b --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md @@ -0,0 +1,35 @@ +--- +id: 657b221b2ab0ac9e18a173ef +title: Task 47 +challengeType: 22 +dashedName: task-47 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +Let's look at `exactly` and `exact`. You use `exactly` to show something is just right or very true. It is an adverb. For example, `You did it exactly right!`. + +`Exact` is an adjective, and it describes something very correct or precise, like in `the exact time`. + +# --fillInTheBlank-- + +## --sentence-- + +`She knew the _ time of the meeting. She arrived _ at 3 pm.` + +## --blanks-- + +`exact` + +### --feedback-- + +This word is an adjective, describing the noun `time`. + +--- + +`exactly` + +### --feedback-- + +This word is an adverb, showing that her arrival time was very precise. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md new file mode 100644 index 00000000000..82dcdea8fbb --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md @@ -0,0 +1,39 @@ +--- +id: 657b223e41ce6b9f9a01d214 +title: Task 48 +challengeType: 22 +dashedName: task-48 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You'll review the past simple negative in this task. It's formed using `was` or `were` with `not`, like `weren't` (`were not`) or `wasn't` (`was not`). It's used to talk about things that did not happen or were not true in the past. + +# --fillInTheBlank-- + +## --sentence-- + +`They _ _ big projects.` + +## --blanks-- + +`weren't` + +### --feedback-- + +It's the negative form of `were` in the past tense, used to say something was not true or did not happen. + +--- + +`exactly` + +### --feedback-- + +This word is used to emphasize the statement, suggesting the projects were not precisely big. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md new file mode 100644 index 00000000000..06ce8ba3d76 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md @@ -0,0 +1,15 @@ +--- +id: 657b227f7ad32ea17e2cdf28 +title: "Dialogue 4: A Developer with a Different Background" +challengeType: 21 +dashedName: dialogue-4-a-developer-with-a-different-background +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md new file mode 100644 index 00000000000..abee49452c1 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md @@ -0,0 +1,56 @@ +--- +id: 657b2310b8cd52a4f15c1818 +title: Task 49 +challengeType: 19 +dashedName: task-49 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `unconventional` is used to describe something that's not based on or conforming to what is generally done or believed. It often implies a method or approach that is different from the norm. + +# --question-- + +## --text-- + +What does `unconventional` imply about Alice's background in tech? + +## --answers-- + +Her background is different from the usual way people get into tech + +--- + +Her background is exactly the same as most people in tech + +### --feedback-- + +`Unconventional` means not following the usual conventions, which contradicts being the same as most people. + +--- + +She doesn't have any background in tech + +### --feedback-- + +`Unconventional` suggests a different approach, not the absence of a background. + +--- + +She followed a very traditional path into tech + +### --feedback-- + +`Unconventional` indicates a non-traditional path, not a very traditional one. + +## --video-solution-- + +1 + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md new file mode 100644 index 00000000000..47917952aff --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md @@ -0,0 +1,39 @@ +--- +id: 657b2340be1593a6517fe77b +title: Task 50 +challengeType: 22 +dashedName: task-50 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task reviews the past simple negative form. In the past simple negative, `did not` (contracted to `didn't`) is followed by the base form of a verb. This structure is used to express that an action did not happen in the past. In this dialogue, Alice is describing her educational background related to technology. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ _ tech at a traditional university.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This contraction is used in the past simple negative to indicate that an action was not done. + +--- + +`study` + +### --feedback-- + +The base form of the verb is used after the contraction in negative past simple sentences. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md new file mode 100644 index 00000000000..e19667245f9 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md @@ -0,0 +1,54 @@ +--- +id: 657b236aa1eb9fa7b209aa03 +title: Task 51 +challengeType: 19 +dashedName: task-51 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `mostly` is used to indicate that something is true to a large extent but not completely. It suggests that while other factors or methods may be involved, the primary aspect is what is mentioned. + +# --question-- + +## --text-- + +In Alice's statement, what does `mostly` suggest about her way of learning? + +## --answers-- + +She only learned through formal education + +### --feedback-- + +`Mostly` implies a greater emphasis on self-teaching rather than exclusive formal education. + +--- + +She didn't learn anything on her own + +### --feedback-- + +The use of `mostly` indicates a significant amount of self-learning, not an absence of it. + +--- + +She learned equally through self-teaching and formal courses + +### --feedback-- + +`Mostly` suggests a greater emphasis on one method over an equal balance. + +--- + +Her learning was primarily through her own efforts, with some formal courses + +## --video-solution-- + +4 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md new file mode 100644 index 00000000000..10f6121949b --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md @@ -0,0 +1,36 @@ +--- +id: 657b23a413d28da927e087ca +title: Task 52 +challengeType: 22 +dashedName: task-52 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +This task reviews how an adverb is often formed by adding `-ly` to an adjective. + + +# --fillInTheBlank-- + +## --sentence-- + +`She completed _ of her work before lunch. The office is _ quiet in the mornings.` + +## --blanks-- + +`most` + +### --feedback-- + +This word is used as an adjective to describe the quantity of work completed. + +--- + +`mostly` + +### --feedback-- + +This word is used as an adverb to describe the general state of the office. + + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md new file mode 100644 index 00000000000..8f0a554d33f --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md @@ -0,0 +1,50 @@ +--- +id: 657b23bc0e32f9aa9c62eb82 +title: Task 53 +challengeType: 19 +dashedName: task-53 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The term `self-taught` refers to acquiring knowledge or skills without direct teaching from a traditional teacher or educational institution. It involves learning independently. The word `taught` is the past participle of `teach`. When someone is `self-taught`, it means they have taught themselves. + +# --question-- + +## --text-- + +What does `self-taught` imply when someone says, `I am self-taught in programming`? + +## --answers-- + +They were taught programming by a professional teacher + +### --feedback-- + +`Self-taught` indicates learning independently, not being taught by a professional teacher. + +--- + +They have no knowledge of programming + +### --feedback-- + +`Self-taught` means they have acquired knowledge or skills, not that they lack them. + +--- + +They learned programming on their own, without formal education + +--- + +They are planning to learn programming in the future + +### --feedback-- + +`Self-taught` refers to learning that has already taken place, not future plans. + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md new file mode 100644 index 00000000000..daa0ed7fa3b --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md @@ -0,0 +1,27 @@ +--- +id: 657b23f03b449aac2c517089 +title: Task 54 +challengeType: 22 +dashedName: task-54 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `took` is a special case in the simple past tense. It's the past tense of `take`. Unlike regular verbs that follow the standard `-ed` ending for the past tense, `take` changes to `took`. This irregular form is important to know because it's commonly used to talk about actions that happened in the past. Choose the correct past tense form of `take` to complete the sentence: + +# --fillInTheBlank-- + +## --sentence-- + +`Last summer, she _ a photography class.` + +## --blanks-- + +`took` + +### --feedback-- + +This word is the past tense form of `take`. It's used to talk about actions that happened in the past. + + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md new file mode 100644 index 00000000000..aa093ae629c --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md @@ -0,0 +1,49 @@ +--- +id: 657b242d06512dadaea55056 +title: Task 55 +challengeType: 19 +dashedName: task-55 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The verb `attend` means to be present at an event or place. It's often used regarding schools, colleges, meetings, or events. It implies regular participation or presence at a specific place or event. + +# --question-- + +## --text-- + +If a friend tells you, `I'm going to attend the new art workshop downtown`, what are they planning to do? + +## --answers-- + +They are planning to teach at the art workshop + +### --feedback-- + +`Attend` suggests participating as a learner or member, not as a teacher. + +--- + +They might visit the workshop once + +### --feedback-- + +`Attend` implies regular or scheduled participation, not a one-time visit. + +--- + +They are not interested in art workshops + +### --feedback-- + +Saying they will `attend` indicates interest and intent to participate, not a lack of interest. + +--- + +They plan to regularly participate in the art workshop + +## --video-solution-- + +4 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md new file mode 100644 index 00000000000..4dd651ea958 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md @@ -0,0 +1,39 @@ +--- +id: 657b24542024c8af092cd6c4 +title: Task 56 +challengeType: 22 +dashedName: task-56 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task reviews the past simple negative form. In the past simple, negative sentences are formed using `did not`, contracted to `didn't`, followed by the base form of the main verb. Listen to the dialogue and fill in the blanks with these words. + +# --fillInTheBlank-- + +## --sentence-- + +`So, you _ _ a regular college or anything like that?` + +## --blanks-- + +`didn't` + +### --feedback-- + +This contraction is used to form a negative statement in the past tense. + +--- + +`attend` + +### --feedback-- + +The word means being present at an event or place. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md new file mode 100644 index 00000000000..15b9abab580 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md @@ -0,0 +1,48 @@ +--- +id: 657b24774d8cdab052ffe2a6 +title: Task 57 +challengeType: 22 +dashedName: task-57 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and fill in the blanks correctly. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ study tech at a traditional university. I'm _, and I _ a lot of online courses.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This word is used to form a negative statement in the past tense. + +--- + +`self-taught` + +### --feedback-- + +This word describes acquiring knowledge or skills independently. + +--- + +`took` + +### --feedback-- + +This word is the past tense form of a verb meaning to have completed an action. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md new file mode 100644 index 00000000000..b7c7a773588 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md @@ -0,0 +1,40 @@ +--- +id: 657b24a500800cb1c6945da9 +title: Task 58 +challengeType: 22 +dashedName: task-58 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`No, not at all. I _ at a different job, but I got really interested in programming and tech, so I _ learning in my free time.` + +## --blanks-- + +`was` + +### --feedback-- + +Use `to be` in the past tense. + +--- + +`started` + +### --feedback-- + +Use the verb `start`in the past tense. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md new file mode 100644 index 00000000000..14bccd55f81 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md @@ -0,0 +1,41 @@ +--- +id: 657b2be1b19500c63fc1a467 +title: Task 59 +challengeType: 22 +dashedName: task-59 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`That's impressive! _ you _ learning on your own?` + +## --blanks-- + +`Did` + +### --feedback-- + +Auxiliary verb for questions. This word should be capitalized. + +--- + +`enjoy` + +### --feedback-- + +A verb used to describe you are having fun. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md new file mode 100644 index 00000000000..f55f7908a4f --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md @@ -0,0 +1,38 @@ +--- +id: 657b2c040bb5f6c77fa5df80 +title: Task 60 +challengeType: 22 +dashedName: task-60 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You'll be filling in blanks with words you're already familiar with. + +# --fillInTheBlank-- + +## --sentence-- + +`Absolutely. It _ challenging, but I _ it.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of the verb `to be`, used for singular subjects. + +--- + +`loved` + +### --feedback-- + +This is the past tense form of a verb expressing a strong liking or enjoyment. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md new file mode 100644 index 00000000000..dc14016d020 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md @@ -0,0 +1,38 @@ +--- +id: 657b2d618b8851cc5baf9490 +title: Task 61 +challengeType: 22 +dashedName: task-61 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +Listen to the audio and complete the sentence. + + +# --fillInTheBlank-- + +Fill in the blank with correct words. + + +## --sentence-- + +`Yes, I did. I built a few small web applications, just to practice. It _ a great way to apply what I _.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of `to be`, used here for a singular subject. + +--- + +`learned` + +### --feedback-- + +This is the past tense form of `learn`, indicating the acquisition of knowledge or skills in the past. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md new file mode 100644 index 00000000000..b2433b84777 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md @@ -0,0 +1,54 @@ +--- +id: 657b2d9cb974dace59024964 +title: Task 62 +challengeType: 19 +dashedName: task-62 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `got` in this context is a versatile term and can have several meanings. In its simplest form, it's the past tense of `get`, which can mean to receive, arrive, become, or reach, depending on the context. In Tom's statement, `got` refers to the progress or level Alice reached through self-study. + +# --question-- + +## --text-- + +What does `got` imply in Tom's statement about Alice's progress? + +## --answers-- + +She received something while studying + +### --feedback-- + +While `got` can mean receiving, in this context it refers to the extent or level of progress. + +--- + +She achieved or reached a significant level in her studies + +--- + +She needs to get more resources for studying + +### --feedback-- + +`Got` here refers to past progress, not a current need for more resources. + +--- + +She didn't make any progress in her studies + +### --feedback-- + +`Got` in this sentence clearly indicates significant progress, not a lack of it. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md new file mode 100644 index 00000000000..3ea0498bbbe --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md @@ -0,0 +1,15 @@ +--- +id: 657b2dd7745fdcd03e5160f4 +title: "Dialogue 5: Anna Talks About her Experience" +challengeType: 21 +dashedName: dialogue-5-anna-talks-about-her-experience +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md new file mode 100644 index 00000000000..8a3ff270f80 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md @@ -0,0 +1,54 @@ +--- +id: 657b2e0666d4a9d1b851f90e +title: Task 63 +challengeType: 19 +dashedName: task-63 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `tech recruiter` refers to a professional role focused on recruiting candidates for technology-related positions. This role involves understanding the tech industry, identifying qualified candidates, and matching them with suitable tech job openings. + +# --question-- + +## --text-- + +What is Tom asking about when he mentions `Tech recruiter` in his question? + +## --answers-- + +The technical skills needed to be a recruiter + +### --feedback-- + +`Tech recruiter` here refers to the job role, not the specific skills required for the job. + +--- + +The technology used by recruiters + +### --feedback-- + +While technology is involved, `Tech recruiter` refers to the profession itself, not the tools used. + +--- + +The person's career path in becoming a technology recruitment specialist + +--- + +Recruiting people to learn technology + +### --feedback-- + +`Tech recruiter` is about hiring for tech roles, not recruiting people to learn technology. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md new file mode 100644 index 00000000000..340203d5990 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md @@ -0,0 +1,49 @@ +--- +id: 657b2ec6c054efd71e503a27 +title: Task 64 +challengeType: 19 +dashedName: task-64 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `actually` is often used to express a fact or reality, sometimes contrasting with what was thought, believed, or said before. It adds emphasis to a statement to clarify a truth or correct a previous assumption or statement. + +# --question-- + +## --text-- + +What does `actually` imply in a sentence like `I actually prefer working remotely`? + +## --answers-- + +The truth is contrary to what might have been assumed or stated before + +--- + +I never work remotely + +### --feedback-- + +`Actually` in this context is used to express a real preference. + +--- + +I always work in an office setting + +### --feedback-- + +Using `actually` here is meant to reveal a preference for remote work, not office work. + +--- + +I don't have any work preferences + +### --feedback-- + +`Actually` suggests a specific preference, contradicting the idea of having none. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md new file mode 100644 index 00000000000..51c4c579915 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md @@ -0,0 +1,33 @@ +--- +id: 657b2eeb31e435d89ecce6f3 +title: Task 65 +challengeType: 22 +dashedName: task-65 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You'll learn about `actual` in this task. It's a describing word (adjective). It means what something is really like. For example, `the actual color` means the real color. You often add `-ly` to an adjective to form an adverb. This rule helps change many describing words into words that tell people how something is said or done. Here, you add `-ly` to `actual` and it's the adverb `actually`. + +# --fillInTheBlank-- + +## --sentence-- + +`The _ size of the room was quite small. She _ likes small cozy spaces.` + +## --blanks-- + +`actual` + +### --feedback-- + +This word describes the real size of the room. + +--- + +`actually` + +### --feedback-- + +This word is used to say she really likes small spaces. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md new file mode 100644 index 00000000000..101e280ee29 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md @@ -0,0 +1,54 @@ +--- +id: 657b2f0b3bcfe7d9f4151854 +title: Task 66 +challengeType: 19 +dashedName: task-66 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The terms `therapist` and `counselor` refer to professionals who provide guidance and support to people dealing with emotional, psychological, or mental health issues. Both play a vital role in helping individuals work through personal challenges. In Anna's statement, these terms describe the career paths she was considering. + +# --question-- + +## --text-- + +In Anna's statement, what does `therapist or counselor` refer to? + +## --answers-- + +Jobs in the technology industry + +### --feedback-- + +`Therapist or counselor` refers to mental health and emotional support roles, not technology-related jobs. + +--- + +Career paths in mental health and emotional support + +--- + +Educational courses she wanted to take + +### --feedback-- + +While these roles require education, the terms directly refer to the job roles, not the courses. + +--- + +Hobbies that she was interested in + +### --feedback-- + +`Therapist or counselor` are professional career paths, not hobbies. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md new file mode 100644 index 00000000000..40c9c66ce5e --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md @@ -0,0 +1,49 @@ +--- +id: 657b2f3bf7a2cbdb58d959d5 +title: Task 67 +challengeType: 19 +dashedName: task-67 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `last` is used to refer to the most recent past occurrence of a period or event. For example, `last year` means the year before this one, `last month` refers to the month before the current one, and `last week` points to the week before this week. Understanding time expressions like `last year`, `last month`, `last week`, or `last day` helps in talking about events that happened in the recent past. + +# --question-- + +## --text-- + +When someone mentions in a discussion about changes, `I switched careers last year.` What does `last year` indicate about the timing of their career change? + +## --answers-- + +They are planning to switch careers in the near future + +### --feedback-- + +This suggests a future action, but `last year` indicates the change already occurred in the past. + +--- + +They have been considering a career change for a long time + +### --feedback-- + +Though they might have considered it for a long time, `last year` specifically identifies when the change took place. + +--- + +The career change is happening currently + +### --feedback-- + +`Last year` refers to a completed action in the past, not something happening in the present. + +--- + +The career switch happened in the previous year + +## --video-solution-- + +4 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md new file mode 100644 index 00000000000..796bb1e6c39 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md @@ -0,0 +1,49 @@ +--- +id: 657b2f6cb66826dcbac08094 +title: Task 68 +challengeType: 19 +dashedName: task-68 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Organizational psychology` is a field of psychology that studies how people interact within groups, particularly in workplace settings. It focuses on understanding workplace dynamics, employee behavior, and organizational structure to improve the work environment and increase productivity. + +# --question-- + +## --text-- + +What does `organizational psychology` typically involve? + +## --answers-- + +It deals with organizing office spaces + +### --feedback-- + +While organization is a part of the field, `organizational psychology` primarily focuses on people and behavior, not physical space. + +--- + +It's about the psychology of organizing events + +### --feedback-- + +`Organizational psychology` is not specifically about event planning but rather about behavior in workplace groups. + +--- + +It's the study of how people behave and interact in workplace groups + +--- + +It focuses on individual psychological treatment + +### --feedback-- + +`Organizational psychology` looks at group dynamics in workplaces, not individual therapy. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md new file mode 100644 index 00000000000..e185bc5a457 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md @@ -0,0 +1,38 @@ +--- +id: 657b2fa89ddc20de629ca21f +title: Task 69 +challengeType: 22 +dashedName: task-69 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You will fill in the blanks with words you have already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ studied psychology in college. My plan was to become a _ or counselor.` + +## --blanks-- + +`actually` + +### --feedback-- + +This word is used to emphasize the accuracy or truth of a statement. + +--- + +`therapist` + +### --feedback-- + +This word refers to a professional role focused on mental health and emotional support. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md new file mode 100644 index 00000000000..ecc1ceb6792 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md @@ -0,0 +1,46 @@ +--- +id: 657b2fc9c0f96bdfddfce4d9 +title: Task 70 +challengeType: 22 +dashedName: task-70 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this exercise, you will explore the phrase `pique one's interest`. This phrase means to stimulate or arouse someone's curiosity or interest in something. It's often used when something catches your attention and makes you want to learn more about it. Alongside this phrase, you will fill in the blanks with familiar words that you've already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ a course in organizational _, and it _ my interest in the workplace and employee dynamics.` + +## --blanks-- + +`took` + +### --feedback-- + +This word refers to the action of participating in or completing a course. + +--- + +`psychology` + +### --feedback-- + +This word describes the study of the mind and behavior, particularly in a workplace setting in this context. + +--- + +`piqued` + +### --feedback-- + +This word means to arouse or stimulate interest or curiosity. You should correctly use its simple past tense. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md new file mode 100644 index 00000000000..acc29551124 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md @@ -0,0 +1,49 @@ +--- +id: 657b2fea728c2be14a8a98c4 +title: Task 71 +challengeType: 19 +dashedName: task-71 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Employee dynamics` refers to the way employees interact and work together in a workplace. It's an example of using one noun (`employee`) to describe another noun (`dynamics`). This type of descriptive noun helps give more specific information about the subject. Other examples include `race car`, where `race` describes the type of car, and `garden hose`, where `garden` describes the type of hose. + +# --question-- + +## --text-- + +What does `employee dynamics` refer to in a workplace context? + +## --answers-- + +The dynamics of machines used by employees + +### --feedback-- + +`Employee dynamics` specifically refers to interactions and relationships among employees, not machinery. + +--- + +The interactions and relationships among employees + +--- + +The employment status of workers + +### --feedback-- + +`Employee dynamics` is about how employees work together, not their employment status. + +--- + +The dynamics of hiring new employees + +### --feedback-- + +`Employee dynamics` refers to existing employee interactions, not the hiring process. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md new file mode 100644 index 00000000000..bcbb031c907 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md @@ -0,0 +1,54 @@ +--- +id: 657b3026ff79fbe2dda6cb39 +title: Task 72 +challengeType: 19 +dashedName: task-72 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `That's a cool twist` is often used to express that something is interestingly unexpected or surprisingly different. The word `twist` here refers to a change or development in a situation or story that is unusual or unexpected. `Cool` in this context means it's positively received. + +# --question-- + +## --text-- + +What is Tom expressing when he says `That's a cool twist`? + +## --answers-- + +He finds the unexpected change or development interesting + +--- + +He thinks the situation is confusing + +### --feedback-- + +While a `twist` can be surprising, Tom's use of `cool` suggests he finds it interesting rather than confusing. + +--- + +He is unhappy with the new development + +### --feedback-- + +`Cool twist` usually indicates a positive reaction, not dissatisfaction. + +--- + +He expected the development all along + +### --feedback-- + +The term `twist` implies that the development was unexpected. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md new file mode 100644 index 00000000000..6a30241c1a2 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md @@ -0,0 +1,55 @@ +--- +id: 657b306fe94f29e4b4aa9105 +title: Task 73 +challengeType: 19 +dashedName: task-73 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `not right away` is used to indicate that something didn't happen immediately or at the earliest opportunity. It suggests that there was a delay or a period before the action or change took place. This phrase helps to set the timeline of events or actions. + +# --question-- + +## --text-- + +What does Anna mean when she says `not right away`? + +## --answers-- + +She immediately started working in HR at a tech company + +### --feedback-- + +`Not right away` indicates a delay or period before taking action, not immediate action. + +--- + +She started working in a different role before moving to HR at a tech company + +--- + +She has never worked in HR + +### --feedback-- + +The statement implies she did work in HR, just not immediately. + +--- + +She was always focused on training and development + +### --feedback-- + +`Not right away` suggests a progression or change over time, not a constant focus. + +## --video-solution-- + +2 + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md new file mode 100644 index 00000000000..b21bdf5b3e6 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md @@ -0,0 +1,49 @@ +--- +id: 657b30ac03b523e6640deaf1 +title: Task 74 +challengeType: 22 +dashedName: task-74 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You will practice filling in the blanks with words that you have already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`Tom: That's a cool _. _ you immediately start working as a tech recruiter after college? Anna: Not right away. I _ in a general HR role at a non-tech company first, focusing on training and development.` + + +## --blanks-- + +`twist` + +### --feedback-- + +It refers to an interesting or unexpected change in a situation. + +--- + +`Did` + +### --feedback-- + +The auxiliary verb used to form a question in the past simple tense. The first letter should be capitalized. + +--- + +`worked` + +### --feedback-- + +Past tense form of `work`, indicating an action completed in the past. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md new file mode 100644 index 00000000000..f843ccf34aa --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md @@ -0,0 +1,54 @@ +--- +id: 657b30e1b9f035e7e656fd01 +title: Task 75 +challengeType: 19 +dashedName: task-75 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +An `employee` is someone who works for a company or a person. When you talk about `employees' well-being`, you are talking about the health and happiness of all the people who work there. The `'s` after `employees` means that the well-being belongs to the employees. It's like `the cat's toy` (one cat) and `the cats' toy` (more than one cat). + +# --question-- + +## --text-- + +What does Anna mean by saying `employees' well-being.` + +## --answers-- + +It's about the health of the company + +### --feedback-- + +`Employees'` means the people who work, not the company. + +--- + +One worker's health and happiness + +### --feedback-- + +`Employees'` with an `'s` shows it's about all workers, not just one. + +--- + +Where the employees work + +### --feedback-- + +`Well-being` is about health and happiness, not a place. + +--- + +The health and happiness of all the workers + +## --video-solution-- + +4 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md new file mode 100644 index 00000000000..8e17e595d98 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md @@ -0,0 +1,54 @@ +--- +id: 657b315533e4edeba65111b8 +title: Task 76 +challengeType: 19 +dashedName: task-76 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +A `psychologist` is a professional who studies the human mind and behavior. They often help people understand and manage their emotions, behaviors, and mental processes. In Anna's statement, she refers to becoming a psychologist, indicating her professional choice related to studying and working with psychology. + +# --question-- + +## --text-- + +What does `psychologist` mean in Anna's statement? + +## --answers-- + +It means someone who studies physics + +### --feedback-- + +`Psychologist` refers to a person who studies the mind and behavior, not physics. + +--- + +It's a type of medical doctor + +### --feedback-- + +While related to health, a psychologist is different from a medical doctor and focuses on mental processes. + +--- + +A professional who studies and works with the human mind and behavior + +--- + +A teacher at a school + +### --feedback-- + +A psychologist may teach, but their primary role is studying and working with the mind and behavior, not general teaching. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md new file mode 100644 index 00000000000..40eee7185d9 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md @@ -0,0 +1,15 @@ +--- +id: 657b46c9be150f577f5a1086 +title: "Dialogue 2: Another Job Interview" +challengeType: 21 +dashedName: dialogue-2-another-job-interview +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md deleted file mode 100644 index 0a0f3472141..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 655c0feadb1dd77f6cda623f -title: "Dialogue: Placeholder" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-placeholder ---- - -# --description-- - -Watch the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md deleted file mode 100644 index e1563f9b06b..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 655c0f39ee87517d584d81f9 -title: "Dialogue: Placeholder" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-placeholder ---- - -# --description-- - -Watch the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md deleted file mode 100644 index 7aa1e30008d..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5a46ffb500e3f2ce47b -title: Challenge 1 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-1 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria doing when she says, `"You must be the new graphic designer"`? - -## --answers-- - -Asking about someone's job role. - -*** - -Giving a job description. - -*** - -Making a statement based on her assumption. - -*** - -Expressing a possibility. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md deleted file mode 100644 index 2ee50fe5647..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5e46ffb500e3f2ce47e -title: Challenge 2 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-2 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md deleted file mode 100644 index adc4b41f091..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 651dd6071d697d0aab7833b6 -title: Challenge 3 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-3 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions -Fill in the blank. - -Hello! You \_\_\_\_ \_\_ the new graphic designer. I'm Maria, the team lead. - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md deleted file mode 100644 index 7c6e3cca299..00000000000 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: bd7158d8c242eddfaeb5bd13 -title: 製作一個個人作品集展示頁 -challengeType: 14 -forumTopicId: 301143 -dashedName: build-a-personal-portfolio-webpage ---- - -# --description-- - -**目標：** 構建一個功能類似於 https://personal-portfolio.freecodecamp.rocks 的應用程序 - -**需求：** - -1. 你的作品集應該有一個 `id` 爲 `welcome-section` 的歡迎部分 -1. 歡迎部分應該有一個包含文本的 `h1` 元素 -1. 你的作品集應該有一個 `id` 爲 `projects` 的項目部分 -1. 項目部分應該包含至少一個 `class` 爲 `project-tile` 的元素來保存項目 -1. 項目部分應該包含至少一個項目的鏈接 -1. 你的作品集應該有一個 id 爲 `navbar` 的導航欄 -1. 導航欄應該至少包含一個鏈接，你可以點擊它來導航到頁面的不同部分 -1. 你的作品集應該有一個 id 爲 `profile-link` 的鏈接，在新標籤中打開你的 GitHub 或 freeCodeCodeCamp 個人主頁 -1. 你的作品集應該至少有一個媒體查詢 -1. 歡迎部分的高度應該等於視口的高度 -1. 導航欄應該始終位於視口的頂部 - -完成需求並通過下面的所有測試來完成這個項目。 賦予它你自己的個人風格。 編程愉快！ - -**注意：** 請在你的 HTML 中添加 `` 以鏈接你的樣式表並應用你的 CSS - -# --hints-- - -你的作品集應該有一個 `id` 爲 `welcome-section` 的歡迎部分。 - -```js -const el = document.getElementById('welcome-section') -assert(!!el); -``` - -你的 `#welcome-section` 元素應該包含一個 `h1` 元素。 - -```js -assert.isAbove( - document.querySelectorAll('#welcome-section h1').length, - 0, - 'Welcome section should contain an h1 element ' -); -``` - -在 `#welcome-section` 元素中，你不應該有任何空的 `h1` 元素。 - -```js -assert.isAbove( - document.querySelectorAll('#welcome-section h1')?.[0]?.innerText?.length, - 0, - 'h1 element in welcome section should contain your name or camper ' + - 'name ' -); -``` - -你應該有一個 `id` 爲 `projects` 的項目部分。 - -```js -const el = document.getElementById('projects') -assert(!!el); -``` - -你的作品集應該包含至少一個 class 爲 `project-tile` 的元素。 - -```js -assert.isAbove( - document.querySelectorAll('#projects .project-tile').length, - 0 -); -``` - -你的 `#projects` 元素應該包含至少一個 `a` 元素。 - -```js -assert.isAbove(document.querySelectorAll('#projects a').length, 0); -``` - -你的作品集應該有一個 `id` 爲 `navbar` 的導航欄。 - -```js -const el = document.getElementById('navbar'); -assert(!!el); -``` - -你的 `#navbar` 元素應該包含至少一個 `a` 元素，它的 `href` 屬性以 `#` 開頭。 - -```js -const links = [...document.querySelectorAll('#navbar a')].filter( - (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#' -); - -assert.isAbove( - links.length, - 0, - 'Navbar should contain an anchor link ' -); -``` - -你的作品集應該有一個 `id` 爲 `profile-link` 的 `a` 元素。 - -```js -const el = document.getElementById('profile-link'); -assert(!!el && el.tagName === 'A') -``` - -你的 `#profile-link` 元素應該有一個值爲 `_blank` 的 `target` 屬性。 - -```js -const el = document.getElementById('profile-link'); -assert(!!el && el.target === '_blank') -``` - -你的作品集應該至少有一個媒體查詢。 - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -你的 `#navbar` 元素應該始終位於視口的頂部。 - -```js -(async () => { - const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)); - - const navbar = document.getElementById('navbar'); - assert.approximately( - navbar?.getBoundingClientRect().top, - 0, - 15, - "Navbar's parent should be body and it should be at the top of " + - 'the viewport ' - ); - - window.scroll(0, 500); - - await timeout(1); - - assert.approximately( - navbar?.getBoundingClientRect().top, - 0, - 15, - 'Navbar should be at the top of the viewport even after ' + - 'scrolling ' - ); - window.scroll(0, 0); -})(); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - -Personal Portfolio - - - - - -- -
-It's me!
-
- Naomi Carrigan
-Welcome to my portfolio page!
-
-- Projects
-Here's what I've worked on!
-- - - - -
-- - - - -``` - -```css -nav{ - position: fixed; - width: 100%; - text-align: right; - font-size: 24pt; - top: 0%; - right: 5px; - background-color: #000000; - color: #ffffff; -} -@media (max-width: 500px){ - nav{ - display: none; - } -} -a{ - color: #ffffff; -} -main{ - text-align: center; - background-color: black; - font-family:Pacifico -} -h1{ - font-size: 48pt; -} -h2{ - font-size: 24pt; -} -p{ - font-size: 12pt; -} -#welcome-section{ - background-color:#251a4a; - color: #FFFFFF; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -#projects{ - background-color: #060a9c; - color: #ffffff; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -#contact{ - background-color: #03300b; - color: #ffffff; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -``` diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md deleted file mode 100644 index 76ac5f5af60..00000000000 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md +++ /dev/null @@ -1,470 +0,0 @@ ---- -id: 587d78af367417b2b2512b04 -title: 製作一個產品登錄頁 -challengeType: 14 -forumTopicId: 301144 -dashedName: build-a-product-landing-page ---- - -# --description-- - -**目標：** 構建一個功能類似於 https://product-landing-page.freecodecamp.rocks 的應用程序 - -**需求：** - -1. 你的產品登錄頁應該有一個 `id="header"` 的 `header` 元素 -1. 你可以在 `header` 元素中看到一個 `id="header-img"` 的圖像（比如一個 logo） -1. 在 `#header` 元素中，你可以看到一個 `id="nav-bar"` 的 `nav` 元素 -1. 在 `nav` 元素中，你可以看到至少三個可點擊的元素，每個元素的 class 爲 `nav-link` -1. 當你點擊 `nav` 內的 `.nav-link` 按鈕時，應滾動到登錄頁相應的部分 -1. 你可以觀看一個 `id="video"` 的嵌入的產品視頻 -1. 你的登錄頁有一個 `id="form"` 的 `form` 元素 -1. 在表單中，應存在一個 `id="email"` 的 `input` 輸入框供用戶填寫郵箱地址 -1. 在 `#email` 輸入框內應有描述該區域用途的佔位符文本 -1. `#email` 輸入框應該用 HTML5 驗證來確認輸入的內容是否爲郵箱地址 -1. 在表單中，有一個 `id="submit"` 的 `input` 提交按鈕 -1. 當你點擊 `#submit` 元素時，郵箱會被提交到一個靜態頁面 (使用這個模擬 URL：`https://www.freecodecamp.com/email-submit`) -1. 導航欄應該始終位於視口的頂部 -1. 你的產品登陸頁面至少要有一個媒體查詢 -1. 你的產品登陸頁面應該至少使用一次 CSS flexbox - -完成需求並通過下面的所有測試來完成這個項目。 賦予它你自己的個人風格。 編程愉快！ - -**注意：** 請在你的 HTML 中添加 `` 以鏈接你的樣式表並應用你的 CSS - -# --hints-- - -你應該有一個 `id` 爲 `header` 的 `header` 元素。 - -```js -const el = document.getElementById('header') -assert(!!el && el.tagName === 'HEADER') -``` - -你應該有一個 `id` 爲 `header-img` 的 `img` 元素。 - -```js -const el = document.getElementById('header-img') -assert(!!el && el.tagName === 'IMG') -``` - -你的 `#header-img` 元素應該是 `#header` 元素的子元素。 - -```js -const els = document.querySelectorAll('#header #header-img') -assert(els.length > 0) -``` - -你的 `#header-img` 應該有一個 `src` 屬性。 - -```js -const el = document.getElementById('header-img') -assert(!!el && !!el.src) -``` - -你的 `#header-img` 的 `src` 值應該是一個有效的 URL（以 `http` 開頭）。 - -```js -const el = document.getElementById('header-img') -assert(!!el && /^http/.test(el.src)) -``` - -你應該有一個 `nav` 元素，其 `id` 爲 `nav-bar`。 - -```js -const el = document.getElementById('nav-bar') -assert(!!el && el.tagName === 'NAV') -``` - -你的 `#nav-bar` 應該是 `#header` 的後代。 - -```js -const els = document.querySelectorAll('#header #nav-bar') -assert(els.length > 0) -``` - -`#nav-bar` 中應該至少有 3 個 `.nav-link` 元素。 - -```js -const els = document.querySelectorAll('#nav-bar .nav-link') -assert(els.length >= 3) -``` - -每個 `.nav-link` 元素都應該有一個 `href` 屬性。 - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - if (!el.href) assert(false) -}) -assert(els.length > 0) -``` - -每個 `.nav-link` 元素都應該鏈接到登錄頁上的相應元素（有一個 `href` 值是另一個元素的 id。例如 `#footer`）。 - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - const linkDestination = el.getAttribute('href').slice(1) - if (!document.getElementById(linkDestination)) assert(false) -}) -assert(els.length > 0) -``` - -你應該有一個 `video` 或 `iframe` 元素，其中 `id` 爲 `video`。 - -```js -const el = document.getElementById('video') -assert(!!el && (el.tagName === 'VIDEO' || el.tagName === 'IFRAME')) -``` - -你的 `#video` 應該有一個 `src` 屬性。 - -```js -let el = document.getElementById('video') -const sourceNode = el.children; -let sourceElement = null; -if (sourceNode.length) { - sourceElement = [...video.children].filter(el => el.localName === 'source')[0]; -} -if (sourceElement) { - el = sourceElement; -} -assert(el.hasAttribute('src')); -``` - -你應該有一個 `form` 元素，其 `id` 爲 `form`。 - -```js -const el = document.getElementById('form') -assert(!!el && el.tagName === 'FORM') -``` - -你應該有一個 `input` 元素，其中 `id` 爲 `email`。 - -```js -const el = document.getElementById('email') -assert(!!el && el.tagName === 'INPUT') -``` - -你的 `#email` 應該是 `#form` 的後代。 - -```js -const els = document.querySelectorAll('#form #email') -assert(els.length > 0) -``` - -你的 `#email` 應該具有帶有佔位符文本的 `placeholder` 屬性。 - -```js -const el = document.getElementById('email') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -你的 `#email` 應該通過將其 `type` 設置爲 `email` 來使用 HTML5 驗證。 - -```js -const el = document.getElementById('email') -assert(!!el && el.type === 'email') -``` - -你應該有一個 `input` 元素，其中 `id` 爲`submit`。 - -```js -const el = document.getElementById('submit') -assert(!!el && el.tagName === 'INPUT') -``` - -你的 `#submit` 應該是 `#form` 的後代。 - -```js -const els = document.querySelectorAll('#form #submit') -assert(els.length > 0) -``` - -你的 `#submit` 應該具有 `submit` 的 `type`。 - -```js -const el = document.getElementById('submit') -assert(!!el && el.type === 'submit') -``` - -你的 `#form` 應該具有 `action` 屬性爲 `https://www.freecodecamp.com/email-submit`。 - -```js -const el = document.getElementById('form') -assert(!!el && el.action === 'https://www.freecodecamp.com/email-submit') -``` - -你的 `#email` 元素應該具有值爲 `email` 的 `name` 屬性。 - -```js -const el = document.getElementById('email') -assert(!!el && el.name === 'email') -``` - -你的 `#nav-bar` 應該始終位於視口的頂部。 - -```js -(async () => { - const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)); - - const header = document.getElementById('header'); - const headerChildren = header.children; - const navbarCandidates = [header, ...headerChildren]; - - // Return smallest top position of all navbar candidates - const getNavbarPosition = (candidates = []) => { - return candidates.reduce( - (min, candidate) => - Math.min(min, Math.abs(candidate?.getBoundingClientRect().top)), - Infinity - ); - }; - assert.approximately( - getNavbarPosition(navbarCandidates), - 0, - 15, - '#header or one of its children should be at the top of the viewport ' - ); - - window.scroll(0, 500); - await timeout(1); - - assert.approximately( - getNavbarPosition(navbarCandidates), - 0, - 15, - '#header or one of its children should be at the top of the ' + - 'viewport even after scrolling ' - ); - - window.scroll(0, 0); -})(); -``` - -你的產品登陸頁面至少要有一個媒體查詢。 - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -你的產品登陸頁面應該至少使用一次 CSS Flexbox。 - -```js -const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display) -const stylesheet = new __helpers.CSSHelp(document).getStyleSheet() -const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet) -const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media') -const usesFlex = cssRules.find(rule => hasFlex(rule)) -const usesFlexMedia = mediaRules.find(mediaRule => { - return [...mediaRule.cssRules].find(rule => hasFlex(rule)) -}) -assert(usesFlex || usesFlexMedia) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - -Contact me!
-Use the links below to get in touch.
-FreeCodeCamp.org | GitHub | Facebook | LinkedIn -
Product Landing Page - - -- - -- - - -``` - -```css -body { - background-color: #3a3240; - color: white; -} -main { - max-width: 750px; - margin: 50px auto; -} -input { - background-color: #92869c; -} -a:not(.nav-link) { - color: white; -} -#header-img { - max-height: 25px; -} -#nav-bar { - position: fixed; - width: 100%; - text-align: center; - top: 0%; - background-color: #92869c; -} -h1 { - text-align: center; -} -body { - text-align: center; -} -footer { - text-align: center; -} -#bullet { - max-height: 25px; -} -.flex-here { - display: flex; - justify-content: center; -} -.flex-left { - height: 25px; -} -.flex-mem { - display: flex; - justify-content: center; -} -.flex-mem-box { - background-color: #92869c; - border-color: black; - border-width: 5px; - border-style: solid; - margin: 10px; - padding: 10px; - color: black; -} -@media (max-width: 350px) { - #video { - width: 300; - height: 200; - } -} -``` diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md deleted file mode 100644 index c0be38804a3..00000000000 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md +++ /dev/null @@ -1,518 +0,0 @@ ---- -id: 587d78af367417b2b2512b03 -title: 製作一個調查表格 -challengeType: 14 -forumTopicId: 301145 -dashedName: build-a-survey-form ---- - -# --description-- - -**目標：** 構建一個功能類似於 https://survey-form.freecodecamp.rocks 的應用程序 - -**需求：** - -1. 你應該有一個 `id` 爲 `title` 的 `h1` 元素 -1. 你應該有一個 `id` 爲 `description` 的 `p` 元素 -1. 你應該有一個 `id` 爲 `survey-form` 的 `form` 元素 -1. 在表單元素內，你**需要**在 `input` 字段中輸入你的名字，該字段的 `id` 爲 `name`，`type` 爲 `text` -1. 在表單元素內，你**需要**在 `input` 字段中輸入你的郵箱，該字段的 `id` 爲 `email` -1. 如果你輸入了格式不正確的郵箱，你將會看見 HTML5 驗證錯誤信息 -1. 在表單中，你可以在 `input` 字段中輸入一個數字，該字段的 `id` 爲 `number` -1. 數字輸入不應接受非數字，或是阻止你輸入它們，或是顯示一個 HTML5 驗證錯誤（取決於你的瀏覽器）。 -1. 如果你輸入的數字超出了範圍（使用 `min` 和 `max` 屬性定義），你將會看見 HTML5 驗證錯誤信息 -1. 表單中的名字、郵箱和數字輸入框需有對應的包含描述輸入框用途的 `label` 元素，id 應分別爲 `id="name-label"`、`id="email-label"` 和 `id="number-label"` -1. 在表單中的名字、郵箱和數字輸入框中，你能看到各自的描述文字作爲佔位符 -1. 在表單元素內， 你應該有一個 `select` 下拉元素， `id` 爲 `dropdown`，它至少有兩個選項 -1. 在表單元素內， 你可以從至少兩個單選按鈕的組中選擇一個選項，該選項使用 `name` 屬性 -1. 在表單元素內，你可以從一系列複選框中選擇幾個字段，每個複選框都必須具有 `value` 屬性 -1. 在表單元素內，你會有一個 `textarea` 以獲取額外的評論 -1. 在表單元素內，你將收到一個按鈕，其 `id` 爲 `submit`，提交所有輸入 - -完成需求並通過下面的所有測試來完成這個項目。 賦予它你自己的個人風格。 編程愉快！ - -**注意：** 請在你的 HTML 中添加 `` 以鏈接你的樣式表並應用你的 CSS - -# --hints-- - -你應該有一個 `id` 爲 `title` 的 `h1` 元素。 - -```js -const el = document.getElementById('title') -assert(!!el && el.tagName === 'H1') -``` - -你的 `#title` 元素不應爲空。 - -```js -const el = document.getElementById('title') -assert(!!el && el.innerText.length > 0) -``` - -你應該有一個 `id` 爲 `description` 的 `p` 元素。 - -```js -const el = document.getElementById('description') -assert(!!el && el.tagName === 'P') -``` - -你的 `#description` 不應爲空。 - -```js -const el = document.getElementById('description') -assert(!!el && el.innerText.length > 0) -``` - -你應該有一個 `id` 爲 `survey-form` 的 `form` 元素。 - -```js -const el = document.getElementById('survey-form') -assert(!!el && el.tagName === 'FORM') -``` - -你應該有一個 `id` 爲 `name` 的 `input` 元素。 - -```js -const el = document.getElementById('name') -assert(!!el && el.tagName === 'INPUT') -``` - -你的 `#name` 元素應該具有 `type` 爲 `text`。 - -```js -const el = document.getElementById('name') -assert(!!el && el.type === 'text') -``` - -你的 `#name` 元素應該在表單中是必填項。 - -```js -const el = document.getElementById('name') -assert(!!el && el.required) -``` - -你的 `#name` 元素應該是 `#survey-form` 元素的子元素。 - -```js -const el = document.querySelector('#survey-form #name') -assert(!!el) -``` - -你應該有一個 `id` 爲 `email` 的 `input` 元素。 - -```js -const el = document.getElementById('email') -assert(!!el && el.tagName === 'INPUT') -``` - -你的 `#email` 元素應該具有 `type` 爲 `email`。 - -```js -const el = document.getElementById('email') -assert(!!el && el.type === 'email') -``` - -你的 `#email` 元素應該需要輸入。 - -```js -const el = document.getElementById('email') -assert(!!el && el.required) -``` - -你的 `#email` 元素應該是 `#survey-form` 元素的子元素。 - -```js -const el = document.querySelector('#survey-form #email') -assert(!!el) -``` - -你應該有一個 `id` 爲 `number` 的 `input` 元素。 - -```js -const el = document.getElementById('number') -assert(!!el && el.tagName === 'INPUT') -``` - -你的 `#number` 元素應該是 `#survey-form` 元素的子元素。 - -```js -const el = document.querySelector('#survey-form #number') -assert(!!el) -``` - -你的 `#number` 元素應該具有 `type` 爲 `number`。 - -```js -const el = document.getElementById('number') -assert(!!el && el.type === 'number') -``` - -你的 `#number` 應該有一個值爲數字的 `min` 屬性。 - -```js -const el = document.getElementById('number') -assert(!!el && el.min && isFinite(el.min)) -``` - -你的 `#number` 應該有一個值爲數字的 `max` 屬性。 - -```js -const el = document.getElementById('number') -assert(!!el && el.max && isFinite(el.max)) -``` - -你應該有一個 `id` 爲 `name-label` 的 `label` 元素。 - -```js -const el = document.getElementById('name-label') -assert(!!el && el.tagName === 'LABEL') -``` - -你應該有一個 `id` 爲 `email-label` 的 `label` 元素。 - -```js -const el = document.getElementById('email-label') -assert(!!el && el.tagName === 'LABEL') -``` - -你應該有一個 `id` 爲 `number-label` 的 `label` 元素。 - -```js -const el = document.getElementById('number-label') -assert(!!el && el.tagName === 'LABEL') -``` - -你的 `#name-label` 應包含描述輸入的文本。 - -```js -const el = document.getElementById('name-label') -assert(!!el && el.innerText.length > 0) -``` - -你的 `#email-label` 應包含描述輸入的文本。 - -```js -const el = document.getElementById('email-label') -assert(!!el && el.innerText.length > 0) -``` - -你的 `#number-label` 應該包含描述輸入的文本。 - -```js -const el = document.getElementById('number-label') -assert(!!el && el.innerText.length > 0) -``` - -你的 `#name-label` 元素應該是 `#survey-form` 元素的子元素。 - -```js -const el = document.querySelector('#survey-form #name-label') -assert(!!el) -``` - -你的 `#email-label` 元素應該是 `#survey-form` 元素的子元素。 - -```js -const el = document.querySelector('#survey-form #email-label') -assert(!!el) -``` - -你的 `#number-label` 元素應該是 `#survey-form` 元素的子元素。 - -```js -const el = document.querySelector('#survey-form #number-label') -assert(!!el) -``` - -你的 `#name` 元素應該有 `placeholder` 屬性與佔位符文本。 - -```js -const el = document.getElementById('name') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -你的 `#email` 元素應該有 `placeholder` 屬性與佔位符文本。 - -```js -const el = document.getElementById('email') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -你的 `#number` 元素應該有 `placeholder` 屬性與佔位符文本。 - -```js -const el = document.getElementById('number') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -你應該有一個 `id` 爲 `dropdown` 的 `select` 元素。 - -```js -const el = document.getElementById('dropdown') -assert(!!el && el.tagName === 'SELECT') -``` - -你的 `#dropdown` 應該至少有兩個可選擇（未禁用）`option` 元素。 - -```js -const els = document.querySelectorAll('#dropdown option:not([disabled])') -assert(els.length >= 2) -``` - -你的 `#dropdown` 元素應該是 `#survey-form` 元素的子元素。 - -```js -const el = document.querySelector('#survey-form #dropdown') -assert(!!el) -``` - -你應該有至少兩個 `input` 元素，`type` 爲 `radio`（單選按鈕）。 - -```js -const els = document.querySelectorAll('input[type="radio"]') -assert(els.length >= 2) -``` - -你至少應該有兩個單選按鈕，是 `#survey-form` 的子元素。 - -```js -const els = document.querySelectorAll('#survey-form input[type="radio"]') -assert(els.length >= 2) -``` - -你所有的單選按鈕都應該有一個 `value` 屬性和值。 - -```js -const els1 = document.querySelectorAll('input[type="radio"]') -const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])') -assert(els1.length > 0 && els2.length === 0) -``` - -你所有的單選按鈕都應該有一個 `name` 屬性和值。 - -```js -const els1 = document.querySelectorAll('input[type="radio"]') -const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])') -assert(els1.length > 0 && els2.length === 0) -``` - -每個單選按鈕組應至少有 2 個單選按鈕。 - -```js -const radioButtons = document.querySelectorAll('input[type="radio"]'); -const groups = {} - -if (radioButtons) { - radioButtons.forEach(el => { - if (!groups[el.name]) groups[el.name] = [] - groups[el.name].push(el) - }) -} - -const groupKeys = Object.keys(groups) - -groupKeys.forEach(key => { - if (groups[key].length < 2) assert(false) -}) - -assert(groupKeys.length > 0) -``` - -你應該至少有兩個 `input` 元素，`type` 爲 `checkbox`（複選框），它們是 `#survey-form` 的子元素。 - -```js -const els = document.querySelectorAll('#survey-form input[type="checkbox"]'); -assert(els.length >= 2) -``` - -你在 `#survey-form` 中的所有複選框都應該有 `value` 屬性和值。 - -```js -const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]') -const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])') -assert(els1.length > 0 && els2.length === 0) -``` - -你至少應該有一個 `textarea` 元素，它是 `#survey-form` 的子元素。 - -```js -const el = document.querySelector('#survey-form textarea') -assert(!!el) -``` - -你應該有一個 `id` 爲 `submit` 的 `input` 或 `button` 元素。 - -```js -const el = document.getElementById('submit') -assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON')) -``` - -你的 `#submit` 元素應該具有 `type` 爲 `submit`。 - -```js -const el = document.getElementById('submit') -assert(!!el && el.type === 'submit') -``` - -你的 `#submit` 元素應該是 `#survey-form` 元素的子元素。 - -```js -const el = document.querySelector('#survey-form #submit') -assert(!!el) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - -- Pokemon Daycare Service -
-- -What we offer
-----
- Guaranteed friendly and loving staff!-----
- - Comfortable environment for Pokemon to explore and play! ------
- - Multiple membership plans to fit your lifestyle! --- -Check us out!
- A sneak peek into our facility: -
- -- - - -Membership Plans
---- Basic Membership-
--
-
- Silver Membership-
--
-
- Gold Membership-
--
-
Survey Form - - -Survey Form
-The card below was built as a sample survey form for freeCodeCamp.
-- - - - -``` - -```css -main { - text-align: center; - background-color: #92869c; - background-blend-mode: lighten; - max-width: 500px; - margin: 20px auto; - border-radius: 50px; - box-shadow: 10px 10px rgba(0, 0, 0, 0.5); - color: black; -} -body { - text-align: center; - background: #3a3240; - color: white; -} -input, textarea, select, button { - background: #3a3240; - color: white; -} -a { - color: white; -} -``` diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md deleted file mode 100644 index 90e2e434f88..00000000000 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md +++ /dev/null @@ -1,529 +0,0 @@ ---- -id: 587d78b0367417b2b2512b05 -title: 製作一個技術文檔頁面 -challengeType: 14 -forumTopicId: 301146 -dashedName: build-a-technical-documentation-page ---- - -# --description-- - -**目標：** 構建一個功能類似於 https://technical-documentation-page.freecodecamp.rocks 的應用程序 - -**需求：** - -1. 你能看見一個 `id="main-doc"` 的 `main`元素，它包含頁面的主要內容（技術文檔）。 -1. 在 `#main-doc` 元素內，我能看見至少 5 個 `section` 元素，每個元素都有一個 class 爲 `main-section`。 應存在至少 5 個這樣的元素。 -1. 每個 `.main-section` 中的第一個元素應該是 `header` 元素，其中包含描述該部分主題的文本。 -1. class 爲 `main-section` 的每個 `section` 元素應該有一個與包含在其中的每個 `header` 的文本相對應的 `id`。 所有空格都應該被替換爲下劃線（例如，包含標題 “JavaScript and Java” 的 section 應有一個相應的 `id="JavaScript_and_Java"`）。 -1. 所有 `.main-section` 元素總計（不是每個）包含至少 10 個 `p` 元素。 -1. 所有 `.main-section` 元素總計（不是每個）包含至少 5 個 `code` 元素。 -1. 所有 `.main-section` 元素總計（不是每個）包含至少 5 個 `li` 元素。 -1. 你能看見一個 `id="navbar"` 的 `nav` 元素。 -1. navbar 元素應包含一個 `header` 元素，其中包含描述技術文檔主題的文本。 -1. 此外，導航欄應包含 class 爲 `nav-link` 的鏈接元素（`a`）。 每個 class 爲 `main-section` 的元素都需要有一個。 -1. `#navbar` 中的 `header` 元素必須在任何鏈接 (`a`) 之前。 -1. class 爲 `nav-link` 的每個元素都應該包含每個 `section` 的 `header` 文本對應的文本（例如，如果你有一個 “Hello world” 部分/標題，你的導航欄應該有一個包含文本 “Hello world” 的元素）。 -1. 當你點擊一個 navbar 元素時，頁面應該導航到 `#main-doc` 元素的相應部分（例如，如果你點擊包含文本 “Hello world” 的 `.nav-link` 元素，頁面將導航到一個帶有對應 header 和 id 的 `section` 元素）。 -1. 在常規尺寸的設備上（筆記本電腦、臺式機），帶有 `id="navbar"` 的元素應該顯示在屏幕左側，並且始終對用戶可見。 -1. 你的技術文檔應該使用至少一個媒體查詢。 - -完成需求並通過下面的所有測試來完成這個項目。 賦予它你自己的個人風格。 編程愉快！ - -**注意：** 請在你的 HTML 中添加 `` 以鏈接你的樣式表並應用你的 CSS - -# --hints-- - -你應該有一個 `id` 爲 `main-doc` 的 `main` 元素。 - -```js -const el = document.getElementById('main-doc') -assert(!!el) -``` - -你至少應該有 5 個 class 爲 `main-section` 的 `section` 元素。 - -```js -const els = document.querySelectorAll('#main-doc section') -assert(els.length >= 5) -``` - -你所有的 `.main-section` 元素都應該是 `section` 元素。 - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if (el.tagName !== 'SECTION') assert(false) -}) -assert(els.length > 0) -``` - -你至少應該有 5 個 `.main-section` 元素，它們是 `#main-doc` 的子元素。 - -```js -const els = document.querySelectorAll('#main-doc .main-section') -assert(els.length >= 5) -``` - -每個 `.main-section` 的第一個子元素都應該是一個 `header` 元素。 - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if(el.firstElementChild?.tagName !== 'HEADER') assert(false) -}) -assert(els.length > 0) -``` - -你的 `header` 元素不應爲空。 - -```js -const els = document.querySelectorAll('header') -els.forEach(el => { - if (el.innerText?.length <= 0) assert(false) -}) -assert(els.length > 0) -``` - -你所有的 `.main-section` 元素都應該有 `id`。 - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if (!el.id || el.id === '') assert(false) -}) -assert(els.length > 0) -``` - -每個 `.main-section` 都應該有一個與其第一個子元素的文本匹配的 `id`，把子元素的文本中的空格都替換爲下劃線（`_`）用於 id。 - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - const text = el.firstElementChild?.innerText?.replaceAll(' ', '_') - if (el.id?.toUpperCase() !== text?.toUpperCase()) assert(false) -}) -assert(els.length > 0) -``` - -在你的 `.main-section` 元素中總計應有至少 10 個 `p` 元素 - -```js -const els = document.querySelectorAll('.main-section p') -assert(els.length >= 10) -``` - -所有 `.main-section` 元素內總計應有至少 5 個 `code` 元素。 - -```js -const els = document.querySelectorAll('.main-section code') -assert(els.length >= 5) -``` - -所有 `.main-section` 元素內總計應有至少 5 個 `li` 元素。 - -```js -const els = document.querySelectorAll('.main-section li') -assert(els.length >= 5) -``` - -你應該有一個 `id` 爲 `navbar` 的 `nav` 元素。 - -```js -const el = document.getElementById('navbar') -assert(!!el && el.tagName === 'NAV') -``` - -你的 `#navbar` 應該只有一個 `header` 元素。 - -```js -const els = document.querySelectorAll('#navbar header') -assert(els.length === 1) -``` - -你應該至少有一個 class 爲 `nav-link` 的 `a` 元素。 - -```js -const els = document.querySelectorAll('a.nav-link') -assert(els.length >= 1) -``` - -你所有的 `.nav-link` 元素都應該是錨點（`a`）元素。 - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - if (el.tagName !== 'A') assert(false) -}) -assert(els.length > 0) -``` - -你所有的 `.nav-link` 元素都應該在 `#navbar` 中。 - -```js -const els1 = document.querySelectorAll('.nav-link') -const els2 = document.querySelectorAll('#navbar .nav-link') -assert(els2.length > 0 && els1.length === els2.length) -``` - -你應該有相同數量的 `.nav-link` 和 `.main-section` 元素。 - -```js -const els1 = document.querySelectorAll('.main-section') -const els2 = document.querySelectorAll('.nav-link') -assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length) -``` - -`#navbar` 中的 `header` 元素必須在 `#navbar` 中的任何鏈接（`a`）之前。 - -```js -const navLinks = document.querySelectorAll('#navbar a.nav-link'); -const header = document.querySelector('#navbar header'); -navLinks.forEach((navLink) => { - if ( - ( - header.compareDocumentPosition(navLink) & - Node.DOCUMENT_POSITION_PRECEDING - ) - ) assert(false) -}); -assert(!!header) -``` - -每個 `.nav-link` 應該有與其相關 `section` 的 `header` 文本相對應的文本（例如，如果你有一個 “Hello world” 部分/標題，你的 `#navbar` 應該有一個 `.nav-link` 包含文本 “Hello world”）。 - -```js -const headerText = Array.from(document.querySelectorAll('.main-section')).map(el => - el.firstElementChild?.innerText?.trim().toUpperCase() -) -const linkText = Array.from(document.querySelectorAll('.nav-link')).map(el => - el.innerText?.trim().toUpperCase() -) -const remainder = headerText.filter(str => linkText.indexOf(str) === -1) -assert(headerText.length > 0 && headerText.length > 0 && remainder.length === 0) -``` - -每個 `.nav-link` 都應該有一個 `href` 屬性，該屬性鏈接到其對應的 `.main-section`（例如，如果你單擊包含文本 “Hello world” 的 `.nav-link` 元素，頁面導航到具有該 id 的 `section` 元素）。 - -```js -const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href')) -const mainSectionIDs = Array.from(document.querySelectorAll('.main-section')).map(el => el.id) -const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' + str) === -1) -assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0) -``` - -你的 `#navbar` 元素應該始終位於視口的頂部。 - -```js -const el = document.getElementById('navbar') -const left1 = el?.offsetLeft -const left2 = el?.offsetLeft -assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15) -``` - -你的技術文檔項目應該使用至少一個媒體查詢。 - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - -Join the Togepi Fan Club!
-- Enter your information here to receive updates about club activities, - our monthly newsletter, and other email communications. -
- -Technical Documentation Page - - - -- - - - -``` - -```css -* { - background-color: #3a3240; -} -a { - color: #92869c; -} -a:hover { - background-color: #92869c; - color: #3a3240; -} -#navbar { - border-style: solid; - border-width: 5px; - border-color: #92869c; - height: 100%; - top: -5px; - left: -5px; - padding: 5px; - text-align: center; - color: #92869c -} -@media (min-width: 480px) { - #navbar { - position: fixed; - } -} -main { - margin-left: 220px; - color: #92869c -} -header { - font-size: 20pt; -} -code { - background-color: #92869c; - border-style: dashed; - border-width: 2px; - border-color: #92869c; - padding: 5px; - color: black; -} -footer { - text-align: center; -} -``` diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md deleted file mode 100644 index 32b990e7626..00000000000 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: bd7158d8c442eddfaeb5bd18 -title: 製作一個致敬頁 -challengeType: 14 -forumTopicId: 301147 -dashedName: build-a-tribute-page ---- - -# --description-- - -**目標：** 構建一個功能類似於 https://tribute-page.freecodecamp.rocks 的應用程序 - -**需求：** - -1. 你的致敬頁應該包含一個 `id` 爲 `main` 的 `main` 元素，它應該包含所有其他元素 -1. 你應該會看到一個 `id` 爲 `title` 的元素，其中包含一個字符串（即文本），描述了致敬頁面的主題（例如 “Dr. Norman Borlaug”) -1. 你應該有一個 `id` 爲 `img-div` 的 `figure` 或 `div` 元素 -1. 在 `#img-div` 元素中，你應該看到一個 `id="image"` 的 `img` 元素 -1. 在 `#img-div` 元素內，你應該看到一個 `id="img-caption"` 的元素，其中包含對 `#img-div` 中圖像的文本描述 -1. 你應該看到一個 `id="tribute-info"` 的元素，其中包含描述致敬頁主題的文本內容 -1. 你應該看到一個帶有相應 `id="tribute-link"` 的 `a` 元素，該元素鏈接到外部站點，其中包含有關致敬頁面主題的附加信息。 提示：你必須爲元素提供 `target` 屬性，並設置其爲 `_blank`，以便可以在新選項卡中打開鏈接。 -1. 你的 `#image` 應該使用 `max-width` 和 `height` 屬性來響應式調整大小，相對於其父元素的寬度，但不超過其原始大小 -1. 你的 `img` 元素應該在其父元素內居中 - -完成需求並通過下面的所有測試來完成這個項目。 賦予它你自己的個人風格。 編程愉快！ - -**注意：** 請在你的 HTML 中添加 `` 以鏈接你的樣式表並應用你的 CSS - -# --hints-- - -你應該有一個 `main` 元素且該元素的 `id` 爲 `main`. - -```js -const el = document.getElementById('main') -assert(!!el && el.tagName === 'MAIN') -``` - -你的 `#img-div`、`#image`、`#img-caption`、`#tribute-info` 和 `#tribute-link` 應該是 `#main` 的子元素。 - -```js -const el1 = document.querySelector('#main #img-div') -const el2 = document.querySelector('#main #image') -const el3 = document.querySelector('#main #img-caption') -const el4 = document.querySelector('#main #tribute-info') -const el5 = document.querySelector('#main #tribute-link') -assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5) -``` - -你應該有一個 `id` 爲 `title` 的元素。 - -```js -const el = document.getElementById('title') -assert(!!el) -``` - -你的 `#title` 元素不應爲空。 - -```js -const el = document.getElementById('title') -assert(!!el && el.innerText.length > 0) - -``` - -你應該有一個 `id` 爲 `img-div` 的 `figure` 或 `div` 元素。 - -```js -const el = document.getElementById('img-div') -assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE')) -``` - -你應該有一個 `id` 爲 `image` 的 `img` 元素。 - -```js -const el = document.getElementById('image') -assert(!!el && el.tagName === 'IMG') -``` - -你的 `#image` 元素應該是 `#img-div` 元素的子元素。 - -```js -const el = document.querySelector('#img-div #image') -assert(!!el) -``` - -你應該有一個 `id` 爲 `img-caption` 的 `figcaption` 元素或 `div` 元素。 - -```js -const el = document.getElementById('img-caption') -assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGCAPTION')) -``` - -你的 `#img-caption` 元素應該是 `#img-div` 元素的子元素。 - -```js -const el = document.querySelector('#img-div #img-caption') -assert(!!el) -``` - -你的 `#img-caption` 不應爲空。 - -```js -const el = document.getElementById('img-caption') -assert(!!el && el.innerText.length > 0) -``` - -你應該有一個 `id` 爲 `tribute-info` 的元素。 - -```js -const el = document.getElementById('tribute-info') -assert(!!el) -``` - -你的 `#tribute-info` 不應爲空。 - -```js -const el = document.getElementById('tribute-info') -assert(!!el && el.innerText.length > 0) -``` - -你應該有一個 `id` 爲 `tribute-link` 的 `a` 元素。 - -```js -const el = document.getElementById('tribute-link') -assert(!!el && el.tagName === 'A') -``` - -你的 `#tribute-link` 應該有一個 `href` 屬性和值。 - -```js -const el = document.getElementById('tribute-link') -assert(!!el && !!el.href && el.href.length > 0) -``` - -你的 `#tribute-link` 元素應該有一個值爲 `_blank` 的 `target` 屬性。 - -```js -const el = document.getElementById('tribute-link') -assert(!!el && el.target === '_blank') -``` - -你的 `img` 元素應該具有 `display` 值爲 `block`。 - -```js -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const style = imgStyle?.getPropertyValue('display') -assert(style === 'block') -``` - -你的 `#image` 應該具有 `max-width` 值爲 `100%`。 - -```js -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const style = imgStyle?.getPropertyValue('max-width') -assert(style === '100%') -``` - -你的 `#image` 應該具有 `height` 值爲 `auto`。 - -```js -// taken from the testable-projects repo -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const oldDisplayValue = imgStyle.getPropertyValue('display'); -const oldDisplayPriority = imgStyle.getPropertyPriority('display'); -img?.style.setProperty('display', 'none', 'important'); -const heightValue = imgStyle?.getPropertyValue('height') -img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority); -assert(heightValue === 'auto') -``` - -你的 `#image` 應該在其父元素內居中. - -```js -// taken from the testable-projects repo -const img = document.getElementById('image'), - imgParent = img?.parentElement, - imgLeft = img?.getBoundingClientRect().left, - imgRight = img?.getBoundingClientRect().right, - parentLeft = imgParent?.getBoundingClientRect().left, - parentRight = imgParent?.getBoundingClientRect().right, - leftMargin = imgLeft - parentLeft, - rightMargin = parentRight - imgRight; -assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - - -- -Introduction -- Welcome to a basic introduction of algebra. In this tutorial, we will - review some of the more common algebraic concepts. -
-- -Definitions -- To start with, let's define some of the more common terms used in - algebra: -
--
-
- -Examples -- Sometimes it is easier to understand the definitions when you have a - physical example to look at. Here is an example of the above terms.
-
-x + 5 = 12
- In this above example, we have: --
-
- -Solving Equations -- The primary use for algebra is to determine an unknown value, the - "variable", with the information provided. Continuing to use our - example from above, we can find the value of the variable "x".
-
-x + 5 = 12
- In an equation, both sides result in the same value. So you can - manipulate the two expressions however you need, as long as you - perform the same operation (or change) to each side. You do this - because the goal when solving an equation is to - get the variable into its own expression, or by itself on one side - of the = sign.
For this example, we want to remove the "+5" so the "x" is - alone. To do this, we can subtract 5, because subtraction is - the opposite operation to addition. But remember, we have to perform - the same operation to both sides of the equation. Now our equation - looks like this.
-x + 5 - 5 = 12 - 5
- The equation looks like a mess right now, because we haven't completed - the operations. We can simplify this equation to make it easier - to read by performing the operations "5-5" and "12-5". The result - is:
-x = 7
- We now have our solution to this equation! -- -Solving Equations II -- Let us look at a slightly more challenging equation.
-
-3x + 4 = 13
- Again we can start with subtraction. In this case, we want to subtract - 4 from each side of the equation. We will also go ahead and simplify - with each step. So now we have:
-3x = 9
- "3x" translates to "3*x", where the "*" symbol indicates - multiplication. We use the "*" to avoid confusion, as the "x" is now a - variable instead of a multiplication symbol. The opposite operation - for multiplication is division, so we need to - divide each expression by 3.
-x = 3
- And now we have our solution! -- -Solving Equations III -- Now we are getting in to more complex operations. Here is another - equation for us to look at:
-
-x^2 - 8 = 8
- Our very first step will be to add 8 to each side. This is - different from our previous examples, where we had to subtract. But - remember, our goal is to get the variable alone by performing opposite - operations.
-x^2 = 16
- But what does the "^2" mean? The "^" symbol is used to denote - exponents in situations where superscript is not available. When - superscript is available, you would see it as x2. - For the sake of this project, however, we will use the "^" symbol.
- An exponent tells you how many times the base (in our case, "x") is - multiplied by itself. So, "x^2" would be the same as "x*x". Now the - opposite function of multiplication is division, but we would have to - divide both sides by "x". We do not want to do this, as that - would put an "x" on the other side of the equation. So instead, we - need to use the root operation! For an exponent of "2", we call this - the "square root" and denote it with "√". Our equation is now: -
-x = √9
- Performing a root operation by hand can be a tedious process, so we - recommend using a calculator when necessary. However, we are lucky in - that "9" is a - perfect square, so we do not need to calculate anything. Instead, we find our - answer to be:
-x = 3-- -System of Equations -- As you explore your algebra studies further, you may start to run - across equations with more than one variable. The first such equations - will likely look like:
-
-y = 3x
- An equation like this does not have one single solution. - Rather, there are a series of values for which the equation is true. - For example, if "x=3" and "y=9", the equation is true. These equations - are usually used to plot a graph.
- Getting more complicated, though, you may be given a pair of - equations. This is called a "system of equations", and CAN be solved. - Let's look at how we do this! Consider the following system of - equations:
-y = 3x | y - 6 = x- A system of equations IS solvable, but it is a multi-step process. To - get started, we need to chose a variable we are solving for. Let's - solve for "x" first. From the second equation, we know that "x" equals - "y - 6", but we cannot simplify that further because we do not have a - value for "y". Except, thanks to the system of equations, we DO have a - value for "y". We know that "y" equals "3x". So, looking at our second - equation, we can replace "y" with "3x" because they have the same - value. We then get:
-3x - 6 = x
- Now we can solve for "x"! We start by adding 6 to each side.
-3x = x + 6
- We still need to get "x" by itself, so we subtract "x" from both sides - and get:
-2x = 6
- If this confuses you, remember that "3x" is the same as "x+x+x". - Subtract an "x" from that and you get "x+x", or "2x". Now we divide - both sides by 2 and have our value for x!
-x = 3
- However, our work is not done yet. We still need to find the value for - "y". Let's go back to our first equation:
-y = 3x
- We have a value for "x" now, so let's see what happens if we put that - value in.
-y = 3*3
- We perform the multiplication and discover that "y=9"! Our solution to - this system of equations then is:
-x = 3 and y = 9
-- -Try it Yourself! -Coming Soon!
-Keep an eye out for new additions!
-- -More Information -Check out the following links for more information!
--
-
Tribute Page - - -Tribute Page
-The below card was designed as a tribute page for freeCodeCamp.
-- - - - -``` - -```css -body { - background-color: #3a3240; - color: white; -} -main { - background-color: #92869c; - font-family: Lobster; - max-width: 500px; - margin: 20px auto; - color: black; - border-radius: 50px; - box-shadow: 10px 10px rgba(0, 0, 0, 0.5); -} -h2 { - text-align: center; - font-size: 20pt; - font-family: Pacifico; -} -body { - text-align: center; - font-size: 12pt; -} -footer { - text-align: center; - font-size: 10pt; -} -.border { - border-color: black; - border-width: 5px; - border-style: solid; -} -#image { - height: auto; - display: block; - margin: auto; - max-width: 100%; - border-radius: 50%; -} -#img-caption { - font-size: 10pt; -} -a:not(#tribute-link) { - color: white; -} -hr { - border-color: black; -} -``` diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md deleted file mode 100644 index 0c08112f6d7..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05b -title: 編寫你自己的函數 -challengeType: 11 -videoId: nLDychdBwUg -bilibiliIds: - aid: 249487483 - bvid: BV1Fv411J7bS - cid: 376340281 -dashedName: build-your-own-functions ---- - -# --description-- - -更多資源 - -\- 練習 - -# --question-- - -## --text-- - -下面這個 Python 程序會打印什麼？： - -```python -def fred(): - print("Zap") -def jane(): - print("ABC") - -jane() -fred() -jane() -``` - -## --answers-- - ---
- Togepi, happy as always. -Togepi
-
---- Togepi was first discovered in the Johto region, when Ash Ketchum - discovered a mysterious egg. However, when the egg hatched, Togepi saw - Ash's friend Misty first and imprinted on her. Like many other - creatures, this imprinting process created a bond and Togepi views - Misty as his mother. -
-- Togepi is a very childlike Pokemon, and is very emotionally - expressive. He demonstrates extreme levels of joy and sadness. -
-
-Battle Information
--
-
- Check out this - Bulbapedia article on Togepi - for more information on this great Pokemon. -
-Zap -ABC -jane -fred -jane
- ---- - -Zap -ABC -Zap
- ---- - -ABC -Zap -jane
- ---- - -ABC -Zap -ABC
- ---- - -Zap -Zap -Zap
- -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md deleted file mode 100644 index 6b089118bf9..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06d -title: Tuples 的比較和排序 -challengeType: 11 -videoId: dZXzBXUxxCs -bilibiliIds: - aid: 931886163 - bvid: BV1HM4y1T7TK - cid: 376533673 -dashedName: comparing-and-sorting-tuples ---- - -# --description-- - -更多資源： - -\- 練習 - -# --question-- - -## --text-- - -哪個代碼與示例代碼完成相同的功能？ - -```python -lst = [] -for key, val in counts.items(): - newtup = (val, key) - lst.append(newtup) -lst = sorted(lst, reverse=True) -print(lst) -``` - -## --answers-- - -```python -print( sorted( [ (v,k) for k,v in counts.items() ], reverse=True ) ) -``` - ---- - -```python -print( [ (k,v) for k,v in counts.items().sorted() ] ) -``` - ---- - -```python -print( sorted( [ (v,k) for k,v in counts.keys() ] ) ) -``` - ---- - -```python -print( [ (k,v) for k,v in counts.values().sort() ] ) -``` - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md deleted file mode 100644 index 534565453b2..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f058 -title: 根據條件執行 -challengeType: 11 -videoId: gz_IfIsZQtc -bilibiliIds: - aid: 206949935 - bvid: BV1Jh411z7bY - cid: 376337035 -dashedName: conditional-execution ---- - -# --question-- - -## --text-- - -以下哪個代碼縮進，能夠滿足當“x=0”和“y=10”的時，打印 "Yes"？ - -## --answers-- - -```python -if 0 == x: -if y == 10: -print("Yes") -``` - ---- - -```python -if 0 == x: - if y == 10: - print("Yes") -``` - ---- - -```python -if 0 == x: -if y == 10: - print("Yes") -``` - ---- - -```python -if 0 == x: - if y == 10: - print("Yes") -``` - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md deleted file mode 100644 index 3ea3e730f49..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 5e7b9f6a0b6c005b0e76f097 -title: '數據可視化：郵件列表' -challengeType: 11 -videoId: RYdW660KkaQ -bilibiliIds: - aid: 334465586 - bvid: BV18w411R7dD - cid: 377545473 -dashedName: data-visualization-mailing-lists ---- - -# --description-- - -更多資源： - -\- 練習：Geodata - -\- 練習：Gmane 模型 - -\- 練習：Gmane Spider - -\- 練習：Gmane Viz - -\- 練習：Page Rank - -\- 練習：Page Spider - -\- 練習：Page Viz - -# --question-- - -## --text-- - -哪個是常見的 JavaScript 可視化庫？ - -## --answers-- - -DataViz.js - ---- - -D3 - ---- - -Lowcharts - ---- - -DATA6 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md deleted file mode 100644 index 0173ae65db1..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f6a0b6c005b0e76f096 -title: '數據可視化：頁面排名' -challengeType: 11 -videoId: 6-w_qIUwaxU -bilibiliIds: - aid: 376950472 - bvid: BV1ho4y1Q72u - cid: 377544599 -dashedName: data-visualization-page-rank ---- - -# --question-- - -## --text-- - -頁面排名算法是如何工作的？ - -## --answers-- - -它決定哪些頁面之間的連接程度最高。 - ---- - -它用瀏覽量來決定排名 - ---- - -它能判斷出哪些頁面包含最重要的內容。 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md deleted file mode 100644 index 719d6d3a5a2..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 5e7b9f0a0b6c005b0e76f069 -title: 字典和循環 -challengeType: 11 -videoId: EEmekKiKG70 -bilibiliIds: - aid: 589401038 - bvid: BV1eq4y1X7xU - cid: 376387132 -dashedName: dictionaries-and-loops ---- - -# --description-- - -更多資源： - -\- 練習 - -# --question-- - -## --text-- - -以下代碼將打印什麼? - -```python -counts = { 'chuck' : 1 , 'annie' : 42, 'jan': 100} -for key in counts: - if counts[key] > 10: - print(key, counts[key]) -``` - -## --answers-- - -annie 42 -jan 100
- ---- - -chuck 1 -annie 42 -jan 100
- ---- - -chuck 1
- ---- - -[Error]（錯誤）
- -## --video-solution-- - -1 diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md deleted file mode 100644 index 8dbc1fa8eae..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f068 -title: '字典：常見應用' -challengeType: 11 -videoId: f17xPfIXct0 -bilibiliIds: - aid: 805747023 - bvid: BV1v34y1D7ug - cid: 414168867 -dashedName: dictionaries-common-applications ---- - -# --question-- - -## --text-- - -這段代碼將打印什麼? - -```python -counts = { 'quincy' : 1 , 'mrugesh' : 42, 'beau': 100, '0': 10} -print(counts.get('kris', 0)) -``` - -## --answers-- - -2 - ---- - -quincy - ---- - -0 - ---- - -10 - ---- - -[將返回錯誤] - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md deleted file mode 100644 index ea88070f2c5..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f063 -title: 文件作爲序列 -challengeType: 11 -videoId: cIA0EokbaHE -bilibiliIds: - aid: 974380307 - bvid: BV1p44y1m7br - cid: 376388846 -dashedName: files-as-a-sequence ---- - -# --description-- - -更多資源： - -\- 練習 - -# --question-- - -## --text-- - -“continue”這個詞在循環中間起到什麼作用？ - -## --answers-- - -循環後直接跳轉到代碼。 - ---- - -跳到代碼的下一行。 - ---- - -跳到循環的下一個迭代。 - ---- - -跳過下一個代碼塊。 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md deleted file mode 100644 index 25f3a82de49..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f057 -title: 中間表達式 -challengeType: 11 -videoId: dKgUaIa5ATg -bilibiliIds: - aid: 334428894 - bvid: BV1uw411R7gH - cid: 376318468 -dashedName: intermediate-expressions ---- - -# --description-- - -更多資源： - -\- 練習 1 - -\- 練習 2 - -# --question-- - -## --text-- - -這些代碼運作之後會打印出什麼： - -```python -width = 15 -height = 12.0 -print(height/3) -``` - -## --answers-- - -39 - ---- - -4 - ---- - -4.0 - ---- - -5.0 - ---- - -5 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md deleted file mode 100644 index a5b88cb0fff..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f061 -title: 中間字符串 -challengeType: 11 -videoId: KgT_fYLXnyk -bilibiliIds: - aid: 291983121 - bvid: BV1Zf4y157yG - cid: 376394116 -dashedName: intermediate-strings ---- - -# --description-- - -更多資料： - -\- 練習 - -# --question-- - -## --text-- - -下面的代碼中 i 的值是什麼？ - -```python -word = "bananana" -i = word.find("na") -``` - -## --answers-- - -nanana - ---- - -2 - ---- - -3 - ---- - -True（真） - ---- - -na - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md deleted file mode 100644 index d3f0f03928c..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -id: 5e6a54c358d3af90110a60a3 -title: '導言：Python 的元素' -challengeType: 11 -videoId: aRY_xjL35v0 -bilibiliIds: - aid: 674420725 - bvid: BV1MU4y1H7Lj - cid: 376315889 -dashedName: introduction-elements-of-python ---- - -# --question-- - -## --text-- - -以下代碼將打印出什麼？ - -```python -x = 43 -x = x + 1 -print(x) -``` - -## --answers-- - -x - ---- - -x + 1 - ---- - -44 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md deleted file mode 100644 index de7430c7d55..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e6a54af58d3af90110a60a1 -title: '導言：硬件架構' -challengeType: 11 -videoId: H6qtjRTfSog -bilibiliIds: - aid: 206977572 - bvid: BV1zh411z7Ak - cid: 376199262 -dashedName: introduction-hardware-architecture ---- - -# --question-- - -## --text-- - -當你的程序運作時，它被存儲在哪裏？ - -## --answers-- - -硬盤。 - ---- - -內存。 - ---- - -中央處理器。 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md deleted file mode 100644 index 84b3339ccb2..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e6a54ba58d3af90110a60a2 -title: '導言：Python 這門編程語言' -challengeType: 11 -videoId: 0QeGbZNS_bY -bilibiliIds: - aid: 674404602 - bvid: BV1GU4y1H7vB - cid: 376315625 -dashedName: introduction-python-as-a-language ---- - -# --question-- - -## --text-- - -運行這兩行代碼後打印出什麼樣的內容： - -```python -x = 6 -print(x) -``` - -## --answers-- - -x - ---- - -6 - ---- - -x = 6 - ---- - -(x) - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md deleted file mode 100644 index 73382ff8434..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e6a54a558d3af90110a60a0 -title: '導言：爲何編程？' -challengeType: 11 -videoId: 3muQV-Im3Z0 -bilibiliIds: - aid: 206882253 - bvid: BV1Fh411z7tr - cid: 376314257 -videoLocaleIds: - espanol: 3muQV-Im3Z0 - italian: 3muQV-Im3Z0 - portuguese: 3muQV-Im3Z0 -dashedName: introduction-why-program ---- - -# --description-- - -更多資源： - -\- 在 Windows 上安裝 Python - -\- 在 MacOS 上安裝 Python - -# --question-- - -## --text-- - -誰應該學習編程？ - -## --answers-- - -大學生。 - -### --feedback-- - -College students should learn to program, but there's a better answer. - ---- - -People who want to become software developers. - -### --feedback-- - -People who want to become software developers should learn to program, but there's a better answer. - ---- - -Everyone. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md deleted file mode 100644 index 00588e5b5fc..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05d -title: '迭代：定義循環' -challengeType: 11 -videoId: hiRTRAqNlpE -bilibiliIds: - aid: 291987032 - bvid: BV1ff4y157Q3 - cid: 376385255 -dashedName: iterations-definite-loops ---- - -# --question-- - -## --text-- - -以下代碼將打印多少行？ - -```python -for i in [2,1,5]: - print(i) -``` - -## --answers-- - -1 - ---- - -2 - ---- - -3 - ---- - -5 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md deleted file mode 100644 index 4d884d3bfbe..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05e -title: '迭代：循環成語' -challengeType: 11 -videoId: AelGAcoMXbI -bilibiliIds: - aid: 334491369 - bvid: BV1tw411R7Mm - cid: 376530765 -dashedName: iterations-loop-idioms ---- - -# --question-- - -## --text-- - -以下是一個如何在一串數值中找到最小的數值的代碼。 一行代碼有錯誤，導致整個代碼無法和預期一樣的運行。 那麼是哪一行？ - -```python -smallest = None -print("Before:", smallest) -for itervar in [3, 41, 12, 9, 74, 15]: - if smallest is None or itervar < smallest: - smallest = itervar - break - print("Loop:", itervar, smallest) -print("Smallest:", smallest) -``` - -## --answers-- - -3 - ---- - -4 - ---- - -6 - ---- - -7 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md deleted file mode 100644 index 8a123ae92a0..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05f -title: '迭代：更多模式' -challengeType: 11 -videoId: 9Wtqo6vha1M -bilibiliIds: - aid: 674492981 - bvid: BV1hU4y1H7tF - cid: 376531204 -dashedName: iterations-more-patterns ---- - -# --description-- - -更多資源： - -\- 練習 - -# --question-- - -## --text-- - -其中哪一個評估爲 False（假）？ - -## --answers-- - -```python -0 == 0.0 -``` - ---- - -```python -0 is 0.0 -``` - ---- - -```python -0 is not 0.0 -``` - ---- - -```python -0 = 0.0 -``` - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md deleted file mode 100644 index 8a88edaf3cf..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05c -title: 循環和迭代 -challengeType: 11 -videoId: dLA-szNRnUY -bilibiliIds: - aid: 674492981 - bvid: BV1hU4y1H7tF - cid: 376531204 -dashedName: loops-and-iterations ---- - -# --question-- - -## --text-- - -這些代碼會打印出什麼？ - -```python -n = 0 -while True: - if n == 3: - break - print(n) - n = n + 1 -``` - -## --answers-- - -0 -1 -2
- ---- - -0 -1 -2 -3
- ---- - -1 -2
- ---- - -1 -2 -3
- -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md deleted file mode 100644 index 26a506ad38b..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f08b -title: 建立關係數據庫 -challengeType: 11 -videoId: MQ5z4bdF92U -bilibiliIds: - aid: 249380678 - bvid: BV1vv411E76L - cid: 377531786 -dashedName: make-a-relational-database ---- - -# --question-- - -## --text-- - -您將使用什麼 SQL 命令來檢索具有電子郵件地址 `quincy@freecodecamp.org` 的所有用戶？ - -## --answers-- - -```sql -SELECT Users WHERE email="quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT Users WHERE email IS "quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT ALL Users WHERE email="quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT * FROM Users WHERE email IS "quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT * FROM Users WHERE email="quincy@freecodecamp.org" -``` - -## --video-solution-- - -5 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md deleted file mode 100644 index 22897a73072..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f059 -title: 更多條件結構 -challengeType: 11 -videoId: HdL82tAZR20 -bilibiliIds: - aid: 631930118 - bvid: BV1Nb4y1r7z2 - cid: 376337449 -dashedName: more-conditional-structures ---- - -# --description-- - -更多資源： - -\- 練習 1 - -\- 練習 2 - -# --question-- - -## --text-- - -給出以下代碼： - -```python -temp = "5 degrees" -cel = 0 -fahr = float(temp) -cel = (fahr - 32.0) * 5.0 / 9.0 -print(cel) -``` - -哪一行/幾行應該被 `try` 塊包圍？ - -## --answers-- - -1 - ---- - -3 - ---- - -3、4 - ---- - -4 - ---- - -無 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md deleted file mode 100644 index 40bae7aca42..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f072 -title: 網絡協議 -challengeType: 11 -videoId: c6vZGescaSc -bilibiliIds: - aid: 931950996 - bvid: BV1cM4y1N7K6 - cid: 376388317 -dashedName: networking-protocol ---- - -# --question-- - -## --text-- - -通常使用哪種類型的 HTTP 請求來訪問一個網站？ - -## --answers-- - -POST - ---- - -GET - ---- - -WEB - ---- - -ACCESS - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md deleted file mode 100644 index 6054557c8bf..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f074 -title: '聯網：文本處理' -challengeType: 11 -videoId: Pv_pJgVu8WI -bilibiliIds: - aid: 804442498 - bvid: BV16y4y1j7WW - cid: 377329124 -dashedName: networking-text-processing ---- - -# --question-- - -## --text-- - -大多數網站使用哪種編碼類型？ - -## --answers-- - -UTF-8 - ---- - -UTF-16 - ---- - -UTF-32 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md deleted file mode 100644 index ad3c1fa68ef..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 5e7b9f0d0b6c005b0e76f075 -title: '網絡：在 Python 中使用 urllib' -challengeType: 11 -videoId: 7lFM1T_CxBs -bilibiliIds: - aid: 546908270 - bvid: BV1Xq4y1H7e6 - cid: 377331524 -dashedName: networking-using-urllib-in-python ---- - -# --question-- - -## --text-- - -以下代碼的輸出將是什麼樣的？ - -```python -import urllib.request -fhand = urllib.request.urlopen('http://data.pr4e.org/romeo.txt') -for line in fhand: - print(line.decode().strip()) -``` - -## --answers-- - -只有 “romeo.txt” 的內容。 - ---- - -“romeo.txt” 的 header 和內容。 - ---- - -“romeo.txt” 的 header、footer 和內容。 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md deleted file mode 100644 index f80f9431397..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f0d0b6c005b0e76f076 -title: '網絡：使用 Python 進行 Web 爬取' -challengeType: 11 -videoId: Uyioq2q4cEg -bilibiliIds: - aid: 674382625 - bvid: BV1oU4y1n7zQ - cid: 377331774 -dashedName: networking-web-scraping-with-python ---- - -# --description-- - -更多資料： - -\- 練習：socket1 - -\- 練習：urllib - -\- 練習：urllinks - -# --question-- - -## --text-- - -哪個 Python 庫是用於解析 HTML 文檔並從中提取數據？ - -## --answers-- - -socket - ---- - -http - ---- - -BeautifulSoup - ---- - -PrettyBiscuit - ---- - -WonderfulSalad - ---- - -HttpParser - ---- - -GrunkleStan - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md deleted file mode 100644 index be1652018de..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f071 -title: 用 Python 聯網 -challengeType: 11 -videoId: _kJvneKVdNM -bilibiliIds: - aid: 419494612 - bvid: BV1r341167jT - cid: 376385858 -dashedName: networking-with-python ---- - -# --question-- - -## --text-- - -哪個 Python 庫提供對 TCP 套接字的訪問？ - -## --answers-- - -tcp - ---- - -socket - ---- - -http - ---- - -port - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md deleted file mode 100644 index be6b702b765..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f073 -title: '聯網：編寫一個 Web 瀏覽器' -challengeType: 11 -videoId: zjyT9DaAjx4 -bilibiliIds: - aid: 761908574 - bvid: BV1j64y1x7wx - cid: 377319579 -dashedName: networking-write-a-web-browser ---- - -# --question-- - -## --text-- - -以下代碼創建了什麼？ - -```py -import socket - -mysock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) -mysock.connect(('data.pr4e.org', 80)) -cmd = 'GET http://data.pr4e.org/romeo.txt HTTP/1.0\r\n\r\n'.encode() -mysock.send(cmd) - -while True: - data = mysock.recv(512) - if len(data) < 1: - break - print(data.decode(),end='') -mysock.close() -``` - -## --answers-- - -一個簡單的 web 服務器 - ---- - -一個簡單的 email 客戶端 - ---- - -一個簡單的待辦事項列表 - ---- - -一個簡單的 web 瀏覽器 - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md deleted file mode 100644 index 3a3f1a0ddca..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f087 -title: 對象的生命週期 -challengeType: 11 -videoId: p1r3h_AMMIM -bilibiliIds: - aid: 461998717 - bvid: BV1JL411n7Hr - cid: 377529681 -dashedName: object-lifecycle ---- - -# --question-- - -## --text-- - -以下程序將打印什麼？ - -```python -class PartyAnimal: - x = 0 - name = '' - def __init__(self, nam): - self.name = nam - print(self.name,'constructed') - def party(self): - self.x = self.x + 1 - print(self.name,'party count',self.x) - -q = PartyAnimal('Quincy') -m = PartyAnimal('Miya') - -q.party() -m.party() -q.party() -``` - -## --answers-- - --Quincy constructed -Miya constructed -Quincy party count 1 -Miya party count 2 -Quincy party count 3 -
- ---- - --Quincy constructed -Miya constructed -Quincy party count 1 -Miya party count 1 -Quincy party count 2 -
- ---- - --Quincy constructed -Quincy party count 1 -Quincy party count 2 -Miya constructed -Miya party count 1 -
- -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md deleted file mode 100644 index 0d949f7ee4e..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -id: 5e7b9f160b6c005b0e76f086 -title: '對象：一個示例類' -challengeType: 11 -videoId: FiABKEuaSJ8 -bilibiliIds: - aid: 589451777 - bvid: BV1rq4y1X7TG - cid: 377523194 -dashedName: objects-a-sample-class ---- - -# --question-- - -## --text-- - -以下程序將打印什麼？ - -```python -class PartyAnimal: - x = 0 - def party(self): - self.x = self.x + 2 - print(self.x) - -an = PartyAnimal() -an.party() -an.party() -``` - -## --answers-- - --So far 1 -So far 2 -
- ---- - --0 -0 -
- ---- - --2 -2 -
- ---- - --2 -4 -
- -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md deleted file mode 100644 index 1e426f4a465..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f088 -title: '對象：繼承' -challengeType: 11 -videoId: FBL3alYrxRM -bilibiliIds: - aid: 631990691 - bvid: BV1sb4y1r7GF - cid: 377529901 -dashedName: objects-inheritance ---- - -# --question-- - -## --text-- - -面向對象編程中的繼承是指什麼？ - -## --answers-- - -擴展父類時創建的新類。 - ---- - -類的構造實例。 - ---- - -通過擴展現有類來創建新類的能力。 - ---- - -在使用類構造對象時調用的方法。 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md deleted file mode 100644 index db5073b264b..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f067 -title: Python 字典 -challengeType: 11 -videoId: dnzvfimrRMg -bilibiliIds: - aid: 631893305 - bvid: BV19b4y167kj - cid: 376386176 -dashedName: python-dictionaries ---- - -# --question-- - -## --text-- - -當這些代碼運行之後，dict 等於什麼？ - -```python -dict = {"Fri": 20, "Thu": 6, "Sat": 1} -dict["Thu"] = 13 -dict["Sat"] = 2 -dict["Sun"] = 9 -``` - -## --answers-- - -```python -{'Fri': 20, 'Thu': 6, 'Sat': 1} -``` - ---- - -```python -{'Fri': 20, 'Thu': 6, 'Sat': 1, 'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - ---- - -```python -{'Sun': 9} -``` - ---- - -```python -{'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - ---- - -```python -{'Fri': 20, 'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - -## --video-solution-- - -5 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-functions.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-functions.md deleted file mode 100644 index 3d96e3f9d99..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-functions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05a -title: Python 函數 -challengeType: 11 -videoId: 3JGF-n3tDPU -bilibiliIds: - aid: 631881917 - bvid: BV1Xb4y167P4 - cid: 376337920 -dashedName: python-functions ---- - -# --question-- - -## --text-- - -在 Python 中，關鍵詞 “def” 有什麼作用？ - -## --answers-- - -這是一個俚語，代表“這些代碼真的酷斃了”。 - ---- - -它表示一個函數的開始。 - ---- - -它表示以下的縮進代碼段將被儲存起來以後再用。 - ---- - -它代表一個函數的開始，然後接下來的代碼會被儲存到以後使用。 - ---- - -以上全都不對。 - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-lists.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-lists.md deleted file mode 100644 index 95515a4af1b..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-lists.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f064 -title: Python 列表 -challengeType: 11 -videoId: Y0cvfDpYC_c -bilibiliIds: - aid: 249460305 - bvid: BV1Dv411E7Uj - cid: 376532993 -dashedName: python-lists ---- - -# --question-- - -## --text-- - -在這些代碼運行後，x 的值是什麼？ - -```python -fruit = "banana" -x = fruit[1] -``` - -## --answers-- - -banana - ---- - -a - ---- - -b - ---- - -True - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-objects.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-objects.md deleted file mode 100644 index 2af6724ba6b..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-objects.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f160b6c005b0e76f085 -title: Python 對象 -challengeType: 11 -videoId: uJxGeTYy0us -bilibiliIds: - aid: 889496260 - bvid: BV1ZP4y1s7G6 - cid: 377522762 -dashedName: python-objects ---- - -# --question-- - -## --text-- - -關於 Python 對象的說法，哪一個是不正確的？ - -## --answers-- - -對象被創建和使用 - ---- - -對象是代碼和數據的一部分 - ---- - -對象隱藏細節 - ---- - -對象是五個標準數據類型之一 - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/reading-files.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/reading-files.md deleted file mode 100644 index 3ec4fff47b9..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/reading-files.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f062 -title: 閱讀文件中 -challengeType: 11 -videoId: Fo1tW09KIwo -bilibiliIds: - aid: 334439927 - bvid: BV1pw411R7UK - cid: 376532076 -dashedName: reading-files ---- - -# --question-- - -## --text-- - -在字符串中，用什麼來代表新的一行？ - -## --answers-- - -\\n - ---- - -{new_line} - ---- - -{n} - ---- - -/n - ---- - -/new - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md deleted file mode 100644 index 6e7aeb131ce..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06f -title: '正則表達式：匹配和提取數據' -challengeType: 11 -videoId: LaCZnTbQGkE -bilibiliIds: - aid: 975629041 - bvid: BV1i44y1b7hE - cid: 414167130 -dashedName: regular-expressions-matching-and-extracting-data ---- - -# --question-- - -## --text-- - -該程序會打印出什麼？ - -```python -import re -s = 'A message from csev@umich.edu to cwen@iupui.edu about meeting @2PM' -lst = re.findall('\\S+@\\S+', s) -print(lst) -``` - -## --answers-- - -['csev@umich.edu', 'cwen@iupui.edu'] - ---- - -['csev@umich.edu'] - ---- - -['umich.edu', 'iupui.edu'] - ---- - -['csev@', 'cwen@'] - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md deleted file mode 100644 index 17719ddfdd4..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f070 -title: '正則表達式： 實用應用' -challengeType: 11 -videoId: xCjFU9G6x48 -bilibiliIds: - aid: 546924659 - bvid: BV1mq4y1H7rZ - cid: 376386493 -dashedName: regular-expressions-practical-applications ---- - -# --question-- - -## --text-- - -在正則表達式中，怎麼搜索一個 “$” 符號? - -## --answers-- - -$ - ---- - -\\dollar\\ - ---- - -\\$ - ---- - -!$ - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md deleted file mode 100644 index 5a69f4743d8..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06e -title: 正則表達式 -challengeType: 11 -videoId: Yud_COr6pZo -bilibiliIds: - aid: 759422542 - bvid: BV1W64y167YD - cid: 376387549 -dashedName: regular-expressions ---- - -# --question-- - -## --text-- - -哪一個正則表達式匹配只有一個空白字符？ - -## --answers-- - -\\S - ---- - -\\s - ---- - -. - ---- - -\_ - ---- - -\\. - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md deleted file mode 100644 index fb4f6f20f8c..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08c -title: 關係數據庫設計 -challengeType: 11 -videoId: AqdfbrpkbHk -bilibiliIds: - aid: 504388066 - bvid: BV1Qg411j742 - cid: 377532216 -dashedName: relational-database-design ---- - -# --question-- - -## --text-- - -對於一個字符串數據應該被保存在一個數據庫裏多少次，最佳實踐是什麼？ - -## --answers-- - -0 - ---- - -1 - ---- - -2 - ---- - -3 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md deleted file mode 100644 index feaa6c97803..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f08a -title: 關係數據庫和 SQLite -challengeType: 11 -videoId: QlNod5-kFpA -bilibiliIds: - aid: 249449958 - bvid: BV12v411E74H - cid: 377530805 -dashedName: relational-databases-and-sqlite ---- - -# --description-- - -下載 SQLite -下載 DB Browser for SQLite -使用 SQLite - -# --question-- - -## --text-- - -哪一個不是數據庫中的主要數據結構？ - -## --answers-- - -索引 - ---- - -表格 - ---- - -行 - ---- - -列 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md deleted file mode 100644 index dfb268f3d94..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08f -title: '關係數據庫：聯接操作' -challengeType: 11 -videoId: jvDw3D9GKac -bilibiliIds: - aid: 804461215 - bvid: BV1Ry4y1j7tv - cid: 377542880 -dashedName: relational-databases-join-operation ---- - -# --question-- - -## --text-- - -在 SQL 語句中使用 JOIN 子句時，ON 的作用是什麼？ - -## --answers-- - -它指示在哪些表上執行 JOIN。 - ---- - -它指定用於 JOIN 的字段。 - ---- - -它指示如何將兩個表連接在一起。 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md deleted file mode 100644 index 4de8b607355..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f190b6c005b0e76f090 -title: '關係型數據庫：多對多關係' -challengeType: 11 -videoId: z-SBYcvEQOc -bilibiliIds: - aid: 291965127 - bvid: BV1Af4y1L7BK - cid: 377543409 -dashedName: relational-databases-many-to-many-relationships ---- - -# --description-- - -更多資料： - -\- 練習：Email - -\- 練習：Roster - -\- 練習：Tracks - -\- 練習：Twfriends - -\- 練習：Twspider - -# --question-- - -## --text-- - -哪個是多對多關係的示例？ - -## --answers-- - -老師與學生 - ---- - -客戶與訂單 - ---- - -書與內頁 - ---- - -城市與國家 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md deleted file mode 100644 index 67ad950fb37..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08e -title: '關係型數據庫：關係的建立' -challengeType: 11 -videoId: CSbqczsHVnc -bilibiliIds: - aid: 376996473 - bvid: BV1jo4y1S7VY - cid: 377532966 -dashedName: relational-databases-relationship-building ---- - -# --question-- - -## --text-- - -INSERT 命令在 SQL 中的作用是什麼？ - -## --answers-- - -它定義新行，通過列出我們要包括的字段，然後列出要放入新行中的值。 - ---- - -它定義新列，通過列出要包含的行以及要放入新列中的值。 - ---- - -它定義一個新表，通過列出要包括的行和字段以及要放入表中的值。 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md deleted file mode 100644 index 8917f717819..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08d -title: 在關係型數據庫中表示關係 -challengeType: 11 -videoId: '-orenCNdC2Q' -bilibiliIds: - aid: 931953070 - bvid: BV1FM4y1N7hc - cid: 377532529 -dashedName: representing-relationships-in-a-relational-database ---- - -# --question-- - -## --text-- - -什麼是外鍵？ - -## --answers-- - -一個不應存在於這裏的鍵 - ---- - -一個使用非拉丁字符的鍵 - ---- - -一個指向不同表中關聯行的主鍵的數字 - ---- - -一個在“現實世界”中可能用於查找行的鍵 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md deleted file mode 100644 index 01fb3e462ea..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f066 -title: 字符串和列表 -challengeType: 11 -videoId: lxcFa7ldCi0 -bilibiliIds: - aid: 804401443 - bvid: BV1By4y1j7F9 - cid: 376385517 -dashedName: strings-and-lists ---- - -# --description-- - -更多資源： - -\- 練習 - -# --question-- - -## --text-- - -在這個代碼中，n 等於什麼？ - -```python -words = 'His e-mail is q-lar@freecodecamp.org' -pieces = words.split() -parts = pieces[3].split('-') -n = parts[1] -``` - -## --answers-- - -郵件 - ---- - -q - ---- - -lar - ---- - -`lar@freecodecamp.org` - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md deleted file mode 100644 index 5efedb9fb06..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f060 -title: Python 字符串 -challengeType: 11 -videoId: LYZj207fKpQ -bilibiliIds: - aid: 504434218 - bvid: BV1Lg41177s8 - cid: 376531802 -dashedName: strings-in-python ---- - -# --question-- - -## --text-- - -這些代碼會打印出什麼？ - -```python -for n in "banana": - print(n) -``` - -## --answers-- - --n -n -
- ---- - --0 -1 -
- ---- - --0 -1 -2 -3 -4 -5 -
- ---- - --b -a -n -a -n -a -
- -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md deleted file mode 100644 index 79d4a3db4e7..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5e7b9f0a0b6c005b0e76f06c -title: 元組集合 -challengeType: 11 -videoId: 3Lxpladfh2k -bilibiliIds: - aid: 334468209 - bvid: BV1aw411R77G - cid: 376533308 -dashedName: the-tuples-collection ---- - -# --question-- - -## --text-- - -這些代碼會打印出什麼？ - -```python -d = dict() -d['quincy'] = 1 -d['beau'] = 5 -d['kris'] = 9 -for (k,i) in d.items(): - print(k, i) -``` - -## --answers-- - --k i -k i -k i -
- ---- - --quincy 0 -beau 1 -kris 2 -
- ---- - --quincy 1 -beau 5 -kris 9 -
- ---- - --1 quincy -5 beau -9 kris -
- -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/using-web-services.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/using-web-services.md deleted file mode 100644 index 2cfb03665eb..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/using-web-services.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07a -title: 使用網絡服務 -challengeType: 11 -videoId: oNl1OVDPGKE -bilibiliIds: - aid: 759406136 - bvid: BV1b64y16746 - cid: 377332189 -dashedName: using-web-services ---- - -# --question-- - -## --text-- - -通過互聯網發送數據的兩種最常見的方法是什麼？ - -## --answers-- - -JSON 和 TXT - ---- - -JSON 和 XML - ---- - -XML 和 TXT - ---- - -XML 和 PHP - ---- - -PHP 和 TXT - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md deleted file mode 100644 index d2bfb4d0f7e..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f056 -title: '變量、表達式和語句' -challengeType: 11 -videoId: nELR-uyyrok -bilibiliIds: - aid: 419396811 - bvid: BV1iV411p7Mn - cid: 376318116 -dashedName: variables-expressions-and-statements ---- - -# --question-- - -## --text-- - -賦值語句中使用的符號是什麼？ - -## --answers-- - -~ - ---- - -& - ---- - -= - ---- - -\| - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md deleted file mode 100644 index e70f11c7186..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f690b6c005b0e76f095 -title: 使用 Python 可視化數據 -challengeType: 11 -videoId: e3lydkH0prw -bilibiliIds: - aid: 291996462 - bvid: BV15f4y1L7jH - cid: 377544192 -dashedName: visualizing-data-with-python ---- - -# --question-- - -## --text-- - -大多數數據在使用之前需要 \_\_\_\_\_\_ 。 - -## --answers-- - -轉換爲 JSON 格式 - ---- - -圖形化 - ---- - -清理 - ---- - -記憶 - ---- - -轉化成歌曲 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md deleted file mode 100644 index 96ced63d988..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 5e7b9f150b6c005b0e76f080 -title: 'Web 服務：API 速率限制和安全性' -challengeType: 11 -videoId: pI-g0lI8ngs -bilibiliIds: - aid: 249456172 - bvid: BV1Sv411E7qa - cid: 377336269 -dashedName: web-services-api-rate-limiting-and-security ---- - -# --description-- - -更多資料： - -\- 練習：GeoJSON - -\- 練習：JSON - -\- 練習：Twitter - -\- 練習：XML - -# --question-- - -## --text-- - -當 Twitter API 發出請求時，必須始終隨請求一起發送什麼信息？ - -## --answers-- - -Twitter 用戶名 - ---- - -日期範圍 - ---- - -搜索詞 - ---- - -密鑰 - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md deleted file mode 100644 index 7f3096da632..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f150b6c005b0e76f07f -title: 'Web 服務：API' -challengeType: 11 -videoId: oUNn1psfBJg -bilibiliIds: - aid: 589451017 - bvid: BV1zq4y1X7A9 - cid: 377336011 -dashedName: web-services-apis ---- - -# --question-- - -## --text-- - -API 的全稱是什麼？ - -## --answers-- - -應用便攜式智能（Application Portable Intelligence） - ---- - -國際助理編程（Associate Programming International） - ---- - -應用程序接口（Application Program Interface） - ---- - -動作便攜式接口（Action Portable Interface） - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-json.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-json.md deleted file mode 100644 index 0054962c8e4..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-json.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f140b6c005b0e76f07d -title: 'Web 服務：JSON' -challengeType: 11 -videoId: ZJE-U56BppM -bilibiliIds: - aid: 419491911 - bvid: BV1r3411672w - cid: 377332928 -dashedName: web-services-json ---- - -# --question-- - -## --text-- - -這些代碼會打印出什麼？ - -```python -import json -data = ''' - [ - { "id" : "001", - "x" : "2", - "name" : "Quincy" - } , - { "id" : "009", - "x" : "7", - "name" : "Mrugesh" - } - ] -''' -info = json.loads(data) -print(info[1]['name']) -``` - -## --answers-- - -Quincy - ---- - -Mrugesh - ---- - -001 - ---- - -009 - ---- - -[Error]（錯誤） - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md deleted file mode 100644 index 6717dba64a9..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f140b6c005b0e76f07e -title: 'Web 服務：面向服務的方法' -challengeType: 11 -videoId: muerlsCHExI -bilibiliIds: - aid: 846899335 - bvid: BV1E54y1J7oz - cid: 377333277 -dashedName: web-services-service-oriented-approach ---- - -# --question-- - -## --text-- - -用面向服務的方法來開發網絡應用，數據位於何處？ - -## --answers-- - -分佈在許多通過互聯網或內部網絡連接的計算機系統上。 - ---- - -在主 Web 服務器上的不同服務中。 - ---- - -在單獨的數據庫服務器上。 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md deleted file mode 100644 index 24369bb1984..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07c -title: 'Web 服務：XML 模式' -challengeType: 11 -videoId: yWU9kTxW-nc -bilibiliIds: - aid: 631951466 - bvid: BV1Vb4y1r7m7 - cid: 377332603 -dashedName: web-services-xml-schema ---- - -# --question-- - -## --text-- - -什麼是 XSD？ - -## --answers-- - -XML 的 W3C 模式規範。 - ---- - -來自 MOZ 的標準 JSON 模式。 - ---- - -可擴展情境驅動程序 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md deleted file mode 100644 index 1a4eaa6504a..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07b -title: 'Web 服務：XML' -challengeType: 11 -videoId: _pZ0srbg7So -bilibiliIds: - aid: 761920032 - bvid: BV1n64y1x7KW - cid: 377332379 -dashedName: web-services-xml ---- - -# --question-- - -## --text-- - -以下 XML 有什麼問題？ - -```xml -- -``` - -## --answers-- - -Email 標籤缺少結束標籤。 - ---- - -間距將導致 XML 無效。 - ---- - -Phone 標籤缺少結束標籤。 - ---- - -純文本應使用 UTF-8 編碼。 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md deleted file mode 100644 index 8dc15110f7b..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f065 -title: 使用列表 -challengeType: 11 -videoId: lCnHfTHkhbE -bilibiliIds: - aid: 376965958 - bvid: BV1No4y1S7oi - cid: 376387989 -dashedName: working-with-lists ---- - -# --question-- - -## --text-- - -使用下列哪種方法可以在列表末尾添加元素？ - -## --answers-- - -insert - ---- - -push - ---- - -append - ---- - -new - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md deleted file mode 100644 index 4da06305c70..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5f33310c1851c6c4da013250 -title: 步驟 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -是時候添加一些菜單內容。 在現有的 `header` 元素下面添加一個 `main`元素。 它最終將包含有關咖啡館提供的咖啡和甜點的價格信息。 - -# --hints-- - -你應該有一個 `Chuck -- +1 734 303 4456 - - ` 開始標籤。 - -```js -assert(code.match(/ /i)); -``` - -你應該有一個 ` ` 結束標籤。 - -```js -assert(code.match(/<\/main>/i)); -``` - -你不應該改變你的 `header` 元素。 確認你沒有刪除結束標籤。 - -```js -assert($('header').length === 1); -``` - -你的 `main` 元素應該在你的 `header` 元素之後。 - -```js -const main = document.querySelectorAll('main')[0]; -assert(main.previousElementSibling.tagName === 'HEADER'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -Cafe Menu - - ---fcc-editable-region-- -- ---fcc-editable-region-- - - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md deleted file mode 100644 index 8d6d04de4fe..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 615389bd81347947ea7ba896 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Flexbox 是一種一維 CSS 佈局方法，側重於內容的流動。 它提供了控制容器在容器中的間隔和對齊方式的能力。 - -若要將元素設置爲使用 Flexbox 佈局，請將 `display` 屬性設置爲 `flex`。 這將使元素變成一個 flex 容器。 flex 容器內的直接子元素叫做 flex 項目。 - -創建 `.gallery` 選擇器並將其設置爲 flex 容器。 - -# --hints-- - -應該有一個 `.gallery` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')); -``` - -`.gallery` 選擇器應該有一個值爲 `flex` 的 `display` 屬性。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.display === 'flex'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - -CAMPER CAFE
-Est. 2020
-Photo Gallery - - - -- -css flexbox photo gallery
--- - -``` - -```css -* { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: sans-serif; - background: #f5f6f7; -} - -.header { - text-align: center; - text-transform: uppercase; - padding: 32px; - background-color: #0a0a23; - color: #fff; - border-bottom: 4px solid #fdb347; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.gallery img { - width: 100%; - max-width: 350px; - height: 300px; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md deleted file mode 100644 index 0000ee5bd5c..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51578 -title: 步驟 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -首先設置你的 HTML 結構。 添加一個 `` 聲明和一個 `html` 元素，其中 `lang` 屬性設置爲 `en`。 在 `html` 元素中，添加一個 `head` 元素和一個 `body` 元素。 - -# --hints-- - -代碼應包含 `DOCTYPE` 引用。 - -```js -assert(code.match(/` 關閉 `DOCTYPE` 聲明。 - -```js -assert(code.match(/html\s*>/gi)); -``` - -`DOCTYPE` 聲明應位於 HTML 的開頭。 - -```js -assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); -``` - -`html` 元素應該有一個 `lang` 屬性爲 `en` 的開始標籤。 - -```js -assert(code.match(/
-
-
-
-
-
-
-
-
- Picasso Painting - - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md deleted file mode 100644 index 51a5534c3aa..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157b -title: 步驟 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -要開始繪畫，請爲你的 `body` 元素提供顏色爲 `rgb(184, 132, 46)` 的 `background-color`。 - -# --hints-- - -應該使用 `body` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')); -``` - -`body` 元素應將 `background-color` 屬性設置爲 `rgb (184, 132, 46)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(184, 132, 46)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -Picasso Painting - - - - - - -``` - -```css - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md deleted file mode 100644 index d5346cd98cf..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157c -title: 步驟 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -在你的 body 標籤中，添加一個 `div` 元素。 給它一個 `back-wall` 的 `id`。 - -# --hints-- - -應該準確添加 1 個 `div` 元素。 - -```js -assert(document.querySelectorAll('div').length === 1); -``` - -`div` 元素應該具有 `back-wall` 的 `id` 值。 - -```js -assert(document.querySelector('div')?.getAttribute('id') === 'back-wall'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -Picasso Painting - - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md deleted file mode 100644 index 03f37afc802..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157d -title: 步驟 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -使用 id 選擇器爲 id `back-wall` 設置 `background-color` 爲 `#8B4513`。 - -# --hints-- - -應該使用 `#back-wall` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')); -``` - -`#back-wall` 選擇器應該有一個 `#8B4513` 的 `background-color`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -Picasso Painting - - - - - - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md deleted file mode 100644 index 8d6f9623f65..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157e -title: 步驟 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -給 `#back-wall` 元素一個 `100%` 的 `width` 和一個 `60%` 的 `height` 。 - -# --hints-- - -應該將 `#back-wall` 選擇器的 `width` 設置爲 `100%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.width === '100%'); -``` - -應該將 `#back-wall` 選擇器的 `height` 設置爲 `60%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.height === '60%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -Picasso Painting - - - - - - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md deleted file mode 100644 index 5b7304777c8..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157f -title: 步驟 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -通常，HTML 以自上而下的方式呈現。 代碼頂部的元素位於頁面頂部。 但是，很多時候你可能希望將元素移動到不同的位置。 你可以使用 `position` 屬性來執行此操作。 - -將 `#back-wall` 元素的 `position` 屬性設置爲 `absolute`。 `absolute` 位置將元素從自上而下的文檔流中取出，並允許你相對於其容器調整它。 - -手動定位元素時，你可以使用 `top`、`left`、`right` 和 `bottom` 移動其佈局。 設置 `#back-wall` 的 `top` 值爲 `0`，`left` 值爲 `0`。 - - -# --hints-- - -`#back-wall` 選擇器應該將 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.position === 'absolute'); -``` - -`#back-wall` 選擇器應該將 `top` 屬性設置爲 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.top === '0px'); -``` - -`#back-wall` 選擇器應該將 `left` 屬性設置爲 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -Picasso Painting - - - - - - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md deleted file mode 100644 index f3561221562..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51580 -title: 步驟 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -`z-index` 屬性用於爲你的 HTML 元素創建“層”。 如果你熟悉圖像編輯工具，你可能以前使用過圖層。 這是一個類似的概念。 - -`z-index` 值較高的元素會顯示在 `z-index` 值較低的元素之上。 這可以與上一課中的定位相結合，創造出獨特的效果。 - -由於 `back-wall` 元素需要出現在你將要創建的其他元素的“後面”，因此爲 `back-wall` 元素提供一個 `z-index` 爲 `-1` 的屬性。 - -# --hints-- - -`#back-wall` 選擇器應該將 `z-index` 屬性設置爲 `-1`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -Picasso Painting - - - - - - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md deleted file mode 100644 index 46a0b3e5070..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51581 -title: 步驟 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -在你的 `#back-wall` 元素的下方，創建一個 `div`，其包含 `class` 爲 `characters`。 這是你將創建繪畫角色的地方。 - -# --hints-- - -應該只添加一個新的 `div` 元素。 - -```js -assert(document.querySelectorAll('div').length === 2); -``` - -新的 `div` 元素應該在 `#back-wall` 元素之後。 - -```js -assert(document.querySelector('#back-wall')?.nextElementSibling?.localName === 'div'); -``` - -新的 `div` 元素應該將 `class` 設置爲 `characters`。 - -```js -assert(document.querySelectorAll('div')?.[1]?.classList?.contains('characters')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -Picasso Painting - - - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md deleted file mode 100644 index 4afdc8f91cc..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51582 -title: 步驟 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -在該 `.characters` 元素中，創建另一個 `div`，其 `id` 爲 `offwhite-character`。 - -# --hints-- - -應該只創建一個額外的 `div` 元素。 - -```js -assert(document.querySelectorAll('div').length === 3); -``` - -新的 `div` 元素應該嵌套在 `.characters` 元素中。 - -```js -assert(document.querySelector('.characters div')); -``` - -新的 `div` 元素應具有 `offwhite-character` 的 `id`。 - -```js -assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhite-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -Picasso Painting - - - - - -- --fcc-editable-region-- - - --fcc-editable-region-- -- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md deleted file mode 100644 index aded8e67234..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51583 -title: 步驟 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -在 `offwhite-character` 元素內創建四個 `div` 元素。 按順序爲這些 `div` 元素提供以下 `id` 值：`white-hat`、`black-mask`、`gray-instrument`、`tan-table`。 - -# --hints-- - -應該在 `.offwhite-character` 元素中添加四個 `div` 元素。 - -```js -assert(document.querySelectorAll('#offwhite-character div').length === 4); -``` - -第一個新 `div` 元素應該具有 `white-hat` 的 `id`。 - -```js -assert(document.querySelectorAll('#offwhite-character div')[0]?.getAttribute('id') === 'white-hat'); -``` - -第二個新 `div` 元素應具有 `black-mask` 的 `id`。 - -```js -assert(document.querySelectorAll('#offwhite-character div')[1]?.getAttribute('id') === 'black-mask'); -``` - -第三個新 `div` 元素應該具有 `gray-instrument` 的 `id`。 - -```js -assert(document.querySelectorAll('#offwhite-character div')[2]?.getAttribute('id') === 'gray-instrument'); -``` - -第四個新 `div` 元素應該具有 `tan-table` 的 `id`。 - -```js -assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id') === 'tan-table'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md deleted file mode 100644 index c9cea83da21..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51584 -title: 步驟 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -這個角色需要眼睛。 在 `#black-mask` 元素中創建兩個 `div` 元素。 按順序爲它們提供 `eyes left` 和 `eyes right` 類。 - -# --hints-- - -應該在 `#black-mask` 元素中創建 2 個 `div` 元素。 - -```js -assert(document.querySelectorAll('#black-mask div').length === 2); -``` - -第一個新 `div` 應該有 `eyes` 和 `left` 類。 - -```js -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('left')); -``` - -第二個新 `div` 應該有 `eyes` 和 `right` 類。 - -```js -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --fcc-editable-region-- - - --fcc-editable-region-- --Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md deleted file mode 100644 index 9a208e5fde3..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51585 -title: 步驟 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -爲樂器創建一些“點”。 在你的 `#gray-instrument` 元素中添加五個 `div` 元素。 將每個的 `class` 設置爲 `black-dot`。 - -# --hints-- - -`#gray-instrument` 元素中應該有五個新的 `div` 元素。 - -```js -assert(document.querySelectorAll('#gray-instrument div').length === 5); -``` - -五個 `div` 元素都應該具有類 `black-dot`。 - -```js -assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- --fcc-editable-region-- - - --fcc-editable-region-- -- - -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md deleted file mode 100644 index 53c38788182..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51586 -title: 步驟 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -使用 id 選擇器爲 id 爲 `offwhite-character` 的元素創建規則。 給它一個 `width` 爲 `300px`、一個 `height` 爲 `550px` 和一個 `background-color` 爲 `GhostWhite`。 - -# --hints-- - -應該使用 `#offwhite-character` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')); -``` - -`#offwhite-character` 應該有一個 `width` 屬性設置爲 `300px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.width === '300px'); -``` - -`#offwhite-character` 應該有一個 `height` 屬性設置爲 `550px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.height === '550px'); -``` - -`#offwhite-character` 應該有一個 `background-color` 屬性設置爲 `GhostWhite`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- --fcc-editable-region-- - - --fcc-editable-region-- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md deleted file mode 100644 index 05ec3a94553..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51587 -title: 步驟 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -將 `#offwhite-character` 移至適當位置，爲此，給它一個 `absolute` 的 `position`，一個 `top` 值爲 `20%`，一個 `left` 值爲 `17.5%`。 - -# --hints-- - -`#offwhite-character` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.position === 'absolute'); -``` - -`#offwhite-character` 選擇器應該有一個 `top` 屬性設置爲 `20%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.top === '20%'); -``` - -`#offwhite-character` 選擇器應該有一個 `left` 屬性設置爲 `17.5%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left === '17.5%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md deleted file mode 100644 index 79bd03ce662..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51588 -title: 步驟 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -使用 id 選擇器，爲 id 爲 `white-hat` 的元素設置樣式。 給它一個 `width` 和 `height` 均爲 `0`，以及一個 `solid` 的 `border-style`。 - -# --hints-- - -應該使用 `#white-hat` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')); -``` - -`#white-hat` 選擇器應該將 `width` 屬性設置爲 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.width === '0px'); -``` - -`#white-hat` 選擇器應該將 `height` 屬性設置爲 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.height === '0px'); -``` - -`#white-hat` 選擇器應該有一個 `border-style` 屬性設置爲 `solid`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md deleted file mode 100644 index b355c9b2c38..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51589 -title: 步驟 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -這看起來不太對勁。 將 `border-width` 設置爲 `0 120px 140px 180px`，以便正確調整帽子的大小。 - -# --hints-- - -`#white-hat` 選擇器應該有一個 `border-width` 屬性設置爲 `0 120px 140px 180px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '0px 120px 140px 180px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md deleted file mode 100644 index 156637bfb82..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158a -title: 步驟 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -現在你有一個大盒子。 把它的 `border-top-color`、`border-right-color` 和 `border-left-color` 都設置爲 `transparent`。 將 `border-bottom-color` 設置爲 `GhostWhite`。 這會讓它看起來更像一頂帽子。 - -# --hints-- - -`#white-hat` 選擇器應該有一個 `border-top-color` 屬性設置爲 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderTopColor === 'transparent'); -``` - -`#white-hat` 選擇器應該有一個 `border-right-color` 屬性設置爲 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderRightColor === 'transparent'); -``` - -`#white-hat` 選擇器應該有一個 `border-left-color` 屬性設置爲 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderLeftColor === 'transparent'); -``` - -`#white-hat` 選擇器應該有一個 `border-bottom-color` 屬性設置爲 `GhostWhite`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md deleted file mode 100644 index e9ad59faddd..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158b -title: 步驟 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -給帽子一個 `position` 值爲 `absolute`、一個 `top` 值爲 `-140px` 和一個 `left` 值爲 `0`。 - -# --hints-- - -`#white-hat` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.position === 'absolute'); -``` - -`#white-hat` 選擇器應該有一個 `top` 屬性設置爲 `-140px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.top === '-140px'); -``` - -`#white-hat` 選擇器應該有一個 `left` 屬性設置爲 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md deleted file mode 100644 index 19eb84f6f7d..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158c -title: 步驟 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -使用 id 選擇器爲 id 爲 `black-mask` 的元素創建規則。 給它一個 `100%` 的 `width`、一個 `50px` 的 `height`，和一個 `rgb(45, 31, 19)` 的 `background-color`。 - -# --hints-- - -應該有一個 `#black-mask` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')); -``` - -`#black-mask` 選擇器應該將 `width` 屬性設置爲 `100%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.width === '100%'); -``` - -`#black-mask` 選擇器應該將 `height` 屬性設置爲 `50px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.height === '50px'); -``` - -`#black-mask` 選擇器應該有一個 `background-color` 屬性設置爲 `rgb(45, 31, 19)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md deleted file mode 100644 index f3c40bd9613..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158d -title: 步驟 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -爲面罩提供 `position` 值爲 `absolute`，以及 `top` 和 `left` 的值均爲 `0`。 - -# --hints-- - -`#black-mask` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.position === 'absolute'); -``` - -`#black-mask` 選擇器應該有一個 `top` 屬性設置爲 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.top === '0px'); -``` - -`#black-mask` 選擇器應該有一個 `left` 屬性設置爲 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md deleted file mode 100644 index cb3bcce83f1..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158e -title: 步驟 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -爲確保你可以看到面罩，請將 `z-index` 設置爲 `1`。 - -# --hints-- - -`#black-mask` 選擇器應該有一個 `z-index` 屬性設置爲 `1`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md deleted file mode 100644 index f3f5e3af7e6..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158f -title: 步驟 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -使用 id 選擇器，給 id 爲 `gray-instrument` 的元素一個 `width` 爲 `15%`，`height` 設置爲 `40%` 和 `background-color` 爲 `rgb(167, 162, 117)`。 - -# --hints-- - -應該有一個 `#gray-instrument` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')); -``` - -`#gray-instrument` 選擇器應該有一個 `width` 屬性設置爲 `15%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.width === '15%'); -``` - -`#gray-instrument` 選擇器應該將 `height` 屬性設置爲 `40%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.height === '40%'); -``` - -`#gray-instrument` 選擇器應將 `background-color` 屬性設置爲 `rgb(167, 162, 117)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md deleted file mode 100644 index fa364a4ed54..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51590 -title: 步驟 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -現在移動它。將 `position` 設置爲 `absolute`、`top` 設置爲 `50px`，以及 `left` 設置爲 `125px`。 - -# --hints-- - -`#gray-instrument` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.position === 'absolute'); -``` - -`#gray-instrument` 選擇器應該將 `top` 值設置爲 `50px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.top === '50px'); -``` - -`#gray-instrument` 選擇器應將 `left` 值設置爲 `125px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '125px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md deleted file mode 100644 index 0c6e8ab5ea6..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51591 -title: 步驟 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -將 `z-index` 設置爲 `1`。 - -# --hints-- - -`#gray-instrument` 選擇器應將 `z-index` 屬性設置爲 `1`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md deleted file mode 100644 index 20442150702..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51592 -title: 步驟 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -使用類選擇器爲具有 `black-dot` 類的元素創建規則。 將 `width` 設置爲 `10px`，`height` 設置爲 `10px`，`background-color` 設置爲 `rgb(45, 31, 19)`。 - -# --hints-- - -應該有一個 `.black-dot` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')); -``` - -`.black-dot` 選擇器應該有一個 `width` 屬性設置爲 `10px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.width === '10px'); -``` - -`.black-dot` 選擇器應該將 `height` 屬性設置爲 `10px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.height === '10px'); -``` - -`.black-dot` 選擇器應該有一個 `background-color` 屬性設置爲 `rgb(45, 31, 19)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md deleted file mode 100644 index a4998791a92..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51593 -title: 步驟 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -這些點有點太方了。 給 `black-dot` 類一個 `border-radius` 爲 `50%` 來修復它。 - -# --hints-- - -`.black-dot` 選擇器應該將 `border-radius` 屬性設置爲 `50%`。 - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopLeftRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopRightRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomRightRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomLeftRadius, '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md deleted file mode 100644 index 63b15ed063a..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51594 -title: 步驟 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -將圓點移至適當位置，爲此，將 `display` 設置爲 `block`、將 `margin` 設置爲 `auto`，並將 `margin-top` 設置爲 `65%`。 - -# --hints-- - -`.black-dot` 選擇器應該有一個 `display` 屬性設置爲 `block`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.display === 'block'); -``` - -`.black-dot` 選擇器應該有一個 `margin` 屬性設置爲 `auto`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.margin?.includes('auto')); -``` - -`.black-dot` 選擇器應該有一個 `margin-top` 屬性設置爲 `65%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md deleted file mode 100644 index 54c8edd78ab..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51595 -title: 步驟 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -使用 id 選擇器，爲 id 爲 `tan-table` 的元素設置樣式。 給它一個 `width` 值爲 `450px`、一個 `height` 值爲 `140px`，和一個 `background-color` 值爲 `#D2691E`。 - -# --hints-- - -應該有一個 `#tan-table` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')); -``` - -`#tan-table` 選擇器應該有一個 `width` 屬性設置爲 `450px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.width === '450px'); -``` - -`#tan-table` 選擇器應該將 `height` 屬性設置爲 `140px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.height === '140px'); -``` - -`#tan-table` 選擇器應該將 `background-color` 屬性設置爲 `#D2691E`。 - -```js -assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - - --fcc-editable-region-- - - --fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md deleted file mode 100644 index fa55136e0d4..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51596 -title: 步驟 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -將表格移至適當位置，爲此，給它一個 `position` 值爲 `absolute`、一個 `top` 值爲 `275px`，和一個 `left` 值爲 `15px`。 - -# --hints-- - -`#tan-table` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.position === 'absolute'); -``` - -`#tan-table` 選擇器應該有一個 `top` 屬性設置爲 `275px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.top === '275px'); -``` - -`#tan-table` 選擇器應該有一個 `left` 屬性設置爲 `15px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md deleted file mode 100644 index f674ea718cb..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51597 -title: 步驟 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -給表格一個 `z-index` 爲 `1`。 - -# --hints-- - -`#tan-table` 選擇器應該有一個 `z-index` 屬性設置爲 `1`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md deleted file mode 100644 index a20432284cc..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51598 -title: 步驟 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -在你的 `div#offwhite-character` 元素之後，添加一個 `div`，其 `id` 爲 `black-character`。 - -# --hints-- - -應該在 `.characters` 元素中添加一個新的 `div` 元素。 - -```js -assert(document.querySelectorAll('.characters > div')?.length === 2); -``` - -新的 `div` 元素應該將 `id` 設置爲 `black-character`。 - -```js -assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') === 'black-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md deleted file mode 100644 index 6c2a0938af5..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51599 -title: 步驟 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -在你的新的 `#black-character` 元素中，添加三個 `div` 元素，並按以下順序設置 `id` 值：`black-hat`、`gray-mask`、`white-paper`。 - -# --hints-- - -`#black-character` 元素中應該有三個 `div` 元素。 - -```js -assert(document.querySelectorAll('#black-character > div')?.length === 3); -``` - -第一個新 `div` 元素應該將 `id` 設置爲 `black-hat`。 - -```js -assert(document.querySelectorAll('#black-character > div')?.[0]?.getAttribute('id') === 'black-hat'); -``` - -第二個新 `div` 元素應該將 `id` 設置爲 `gray-mask`。 - -```js -assert(document.querySelectorAll('#black-character > div')?.[1]?.getAttribute('id') === 'gray-mask'); -``` - -第三個新 `div` 元素應該將 `id` 設置爲 `white-paper`。 - -```js -assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('id') === 'white-paper'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- -- --fcc-editable-region-- - - --fcc-editable-region-- -- - --- - - - - -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md deleted file mode 100644 index 78f53d72c91..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159a -title: 步驟 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -面具需要眼睛。 在你的 `#gray-mask` 元素中，添加兩個 `div` 元素。 第一個應該將 `class` 設置爲 `eyes left`，第二個應該將 `class` 設置爲 `eyes right`。 - -# --hints-- - -`#gray-mask` 元素中應該有兩個 `div` 元素。 - -```js -assert(document.querySelectorAll('#gray-mask > div')?.length === 2); -``` - -第一個新 `div` 元素應該將 `class` 設置爲 `eyes left`。 - -```js -const first = document.querySelectorAll('#gray-mask > div')?.[0]; -assert(first?.classList?.contains('eyes')); -assert(first?.classList?.contains('left')); -``` - -第二個新 `div` 元素應該將 `class` 設置爲 `eyes right`。 - -```js -const second = document.querySelectorAll('#gray-mask > div')?.[1]; -assert(second?.classList?.contains('eyes')); -assert(second?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- --fcc-editable-region-- - - --fcc-editable-region-- --Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md deleted file mode 100644 index ac0eca4cef6..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159b -title: 步驟 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -是時候使用一些 FontAwesome 圖標了。 - -`i` 元素用於習語文本，或與“正常”文本內容分開的文本。 這可能適用於_斜體_文本，例如科學術語，也可能適用於 FontAwesome 提供的圖標。 - -在你的 `#white-paper` 元素中，添加四個 `i` 元素。 給它們一個 `fas fa-music` 的 `class`。 - -這個特殊的類是 FontAwesome 如何確定要加載哪個圖標。 `fas` 表示圖標的類別（此處爲 FontAwesome Solid 字體），而 `fa-music` 選擇特定圖標。 - -# --hints-- - -你的 `#white-paper` 元素中應該有四個新的 `i` 元素。 - -```js -assert(document.querySelectorAll('#white-paper > i')?.length === 4); -``` - -你的所有 `i` 元素都應將 `class` 設置爲 `fas fa-music`。 - -```js -const icons = document.querySelectorAll('#white-paper > i'); -for (const icon of icons) { - assert(icon.classList?.contains('fas')); - assert(icon.classList?.contains('fa-music')); -}; -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- --- --fcc-editable-region-- - - --fcc-editable-region-- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md deleted file mode 100644 index 270d879dd43..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159c -title: 步驟 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -使用 id 選擇器爲 id 爲 `black-character` 的元素創建規則。 將 `width` 設置爲 `300px`，`height` 設置爲 `500px`，`background-color` 設置爲 `rgb(45, 31, 19)`。 - -# --hints-- - -你應該使用 `#black-character` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')); -``` - -你的 `#black-character` 選擇器應該有一個 `width` 屬性設置爲 `300px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.width === '300px'); -``` - -你的 `#black-character` 選擇器應該有一個 `height` 屬性設置爲 `500px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.height === '500px'); -``` - -你的 `#black-character` 選擇器應該有一個 `background-color` 屬性設置爲 `rgb(45, 31, 19)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- --- - --- --fcc-editable-region-- - - --fcc-editable-region-- --Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md deleted file mode 100644 index affcbcd30ee..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159d -title: 步驟 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -通過將 `position` 設置爲 `absolute`，`top` 設置爲 `30%`，`left` 設置爲 `59%`，將 `#black-character` 元素移動到位。 - -# --hints-- - -你的 `#black-character` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.position === 'absolute'); -``` - -你的 `#black-character` 選擇器應該有一個 `top` 屬性設置爲 `30%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.top === '30%'); -``` - -你的 `#black-character` 選擇器應該有一個 `left` 屬性設置爲 `59%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '59%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- --- - --- - - - --Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md deleted file mode 100644 index ccf6e6c578c..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159e -title: 步驟 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -使用 id 選擇器爲 id 爲 `black-hat` 的元素創建規則。 給它一個 `width` 值爲 `0`、一個 `height` 值爲 `0`，和一個 `border-style` 值爲 `solid`。 - -# --hints-- - -你應該有一個 `#black-hat` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')); -``` - -你的 `#black-hat` 選擇器應該有一個 `width` 屬性設置爲 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.width === '0px'); -``` - -你的 `#black-hat` 選擇器應該有一個 `height` 屬性設置爲 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.height === '0px'); -``` - -你的 `#black-hat` 選擇器應該有一個 `border-style` 屬性設置爲 `solid`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- --- - --- - - - --Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md deleted file mode 100644 index 441d5716993..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159f -title: 步驟 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -就像你的 `#white-hat` 一樣，你應該爲 `#black-hat` 元素設置邊框樣式。 給它添加值爲 `transparent` 的 `border-top-color`、`border-right-color` 和 `border-bottom-color`。 將 `border-left-color` 設置爲 `rgb(45, 31, 19)`。 - -# --hints-- - -你的 `#black-hat` 選擇器應該有一個 `border-top-color` 屬性設置爲 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderTopColor === 'transparent'); -``` - -你的 `#black-hat` 選擇器應該有一個 `border-right-color` 屬性設置爲 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderRightColor === 'transparent'); -``` - -你的 `#black-hat` 選擇器應該有一個 `border-bottom-color` 屬性設置爲 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderBottomColor === 'transparent'); -``` - -你的 `#black-hat` 選擇器應該有一個 `border-left-color` 屬性設置爲 `rgb(45, 31, 19)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- --- - --- - - - --Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md deleted file mode 100644 index 07c5e27af8d..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md +++ /dev/null @@ -1,181 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a0 -title: 步驟 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -現在定位 `#black-hat` 元素。 給它一個 `position` 爲 `absolute`，一個 `top` 爲 `-150px` 和一個 `left` 爲 `0`。 - -# --hints-- - -你的 `#black-hat` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.position === 'absolute'); -``` - -你的 `#black-hat` 選擇器應該有一個 `top` 屬性設置爲 `-150px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.top === '-150px'); -``` - -你的 `#black-hat` 選擇器應該有一個 `left` 屬性設置爲 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- --- - --- - - - --Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md deleted file mode 100644 index f9c03e172b9..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a1 -title: 步驟 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -使用 id 選擇器，爲 id 爲 `gray-mask` 的元素設置樣式。 給它一個 `width` 爲 `150px`、一個 `height` 爲 `150px` 和一個 `background-color` 爲 `rgb(167, 162, 117)`。 - -# --hints-- - -你應該有一個 `#gray-mask` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')); -``` - -你的 `#gray-mask` 選擇器應該將 `width` 屬性設置爲 `150px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px'); -``` - -你的 `#gray-mask` 選擇器應該將 `height` 屬性設置爲 `150px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px') -``` - -你的 `#gray-mask` 選擇器應將 `background-color` 屬性設置爲 `rgb(167, 162, 117)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- --- - --- - - - --Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md deleted file mode 100644 index 4fe9d20306b..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a2 -title: 步驟 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -通過將 `position` 設置爲 `absolute`、將 `top` 設置爲 `-10px`，以及將 `left` 設置爲 `70px`，來定位 `#gray-mask`。 - -# --hints-- - -你的 `#gray-mask` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.position === 'absolute'); -``` - -你的 `#gray-mask` 選擇器應該有一個 `top` 屬性設置爲 `-10px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.top === '-10px'); -``` - -你的 `#gray-mask` 選擇器應該有一個 `left` 屬性設置爲 `70px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- --- - --- - - - --Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md deleted file mode 100644 index 1e4a12eaf82..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a3 -title: 步驟 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -使用 id 選擇器，爲 id 爲 `white-paper` 的元素創建規則。 將 `width` 設置爲 `400px`、`height` 設置爲 `100px`、`background-color` 設置爲 `GhostWhite`。 - -# --hints-- - -你應該有一個 `#white-paper` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')); -``` - -你的 `#white-paper` 選擇器應該將 `width` 屬性設置爲 `400px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.width === '400px'); -``` - -你的 `#white-paper` 選擇器應該將 `height` 屬性設置爲 `100px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.height === '100px'); -``` - -你的 `#white-paper` 選擇器應該將 `background-color` 屬性設置爲 `GhostWhite`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- --- - --- - - - --Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md deleted file mode 100644 index d2e32f82a8f..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a4 -title: 步驟 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -給 `#white-paper` 一個 `position` 爲 `absolute`、一個 `top` 爲 `250px` 和一個 `left` 爲 `-150px`，將其移動到位。 - -# --hints-- - -你的 `#white-paper` 選擇器應該將 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.position === 'absolute'); -``` - -你的 `#white-paper` 選擇器應該有一個 `top` 屬性設置爲 `250px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.top === '250px'); -``` - -你的 `#white-paper` 選擇器應該有一個 `left` 屬性設置爲 `-150px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- --- - --- - - - --Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md deleted file mode 100644 index 732eeab5f50..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a5 -title: 步驟 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -將 `#white-paper` 的 `z-index` 設置爲 `1`。 - -# --hints-- - -你的 `#white-paper` 選擇器應該將 `z-index` 屬性設置爲 `1`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- --- - --- - - - --Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md deleted file mode 100644 index 238cd3ce22d..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a6 -title: 步驟 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -FontAwesome 圖標帶有自己的樣式來定義圖標。 但是，你仍然可以自己設置樣式，以更改顏色和大小等內容。 現在，使用類選擇器來選中具有 `fa-music` 類的圖標。 將 `display` 設置爲 `inline-block`，將 `margin-top` 設置爲 `8%`，並將 `margin-left` 設置爲 `13%`。 - -# --hints-- - -你應該有一個 `.fa-music` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')); -``` - -你的 `.fa-music` 選擇器應該有一個 `display` 屬性設置爲 `inline-block`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.display === 'inline-block'); -``` - -你的 `.fa-music` 選擇器應該有一個 `margin-top` 屬性設置爲 `8%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginTop === '8%'); -``` - -你的 `.fa-music` 選擇器應該有一個 `margin-left` 屬性設置爲 `13%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- --- - --- - - - --Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md deleted file mode 100644 index 0f50fa60d7b..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a7 -title: 步驟 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -在你的 `#black-character` 元素下方，添加兩個新的 `div` 元素。 這些將是披肩。 給它們添加 `class` 爲 `blue`。 然後給第一個設置 `id` 爲 `blue-left`，給第二個設置 `id` 爲 `blue-right`。 - -# --hints-- - -你的 `.characters` 元素中應該有兩個新的 `div` 元素。 - -```js -assert(document.querySelectorAll('.characters > div')?.length === 4); -``` - -你的兩個新 `div` 元素應該將 `class` 設置爲 `blue`。 - -```js -const divs = document.querySelectorAll('.characters > div'); -assert(divs?.[2]?.classList?.contains('blue')) -assert(divs?.[3]?.classList?.contains('blue')) -``` - -你的第一個新 `div` 應該具有 `blue-left` 的 `id`。 - -```js -assert(document.querySelectorAll('.characters > div')?.[2]?.getAttribute('id') === 'blue-left'); -``` - -你的第二個新 `div` 應該具有 `blue-right` 的 `id`。 - -```js -assert(document.querySelectorAll('.characters > div')?.[3]?.getAttribute('id') === 'blue-right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- --- - --- - - - --Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md deleted file mode 100644 index d790541f148..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a8 -title: 步驟 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -使用類選擇器來定位具有 `blue` 類的新元素。 將 `background-color` 設置爲 `#1E90FF`。 - -# --hints-- - -你應該有一個 `.blue` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')); -``` - -你的 `.blue` 選擇器應該有一個 `background-color` 屬性設置爲 `#1E90FF`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(30, 144, 255)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- --fcc-editable-region-- - - --fcc-editable-region-- -- - --- - - - --Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md deleted file mode 100644 index 379d44c0fb2..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a9 -title: 步驟 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -使用 id 選擇器選中 id 爲 `blue-left` 的元素。 給它一個 `width` 爲 `500px` 和一個 `height` 爲 `300px`。 - -# --hints-- - -你應該有一個 `#blue-left` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')); -``` - -你的 `#blue-left` 選擇器應該有一個 `width` 屬性設置爲 `500px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.width === '500px'); -``` - -你的 `#blue-left` 選擇器應該有一個 `height` 屬性設置爲 `300px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md deleted file mode 100644 index 62733f01504..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515aa -title: 步驟 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -現在將 `position` 設置爲 `absolute`，將 `top` 設置爲 `20%`，將 `left` 設置爲 `20%`。 - -# --hints-- - -你的 `#blue-left` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.position === 'absolute'); -``` - -你的 `#blue-left` 選擇器應該有一個 `top` 屬性設置爲 `20%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.top === '20%'); -``` - -你的 `#blue-left` 選擇器應該有一個 `left` 屬性設置爲 `20%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md deleted file mode 100644 index 9673d3bd87a..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ab -title: 步驟 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -接着，使用 id 選擇器選中 id 爲 `blue-right` 的元素。 將 `width` 設置爲 `400px`，將 `height` 設置爲 `300px`。 - -# --hints-- - -你應該有一個 `#blue-right` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')); -``` - -你的 `#blue-right` 選擇器應該有一個 `width` 屬性設置爲 `400px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.width === '400px'); -``` - -你的 `#blue-right` 選擇器應該有一個 `height` 屬性設置爲 `300px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md deleted file mode 100644 index 9a2abdf5474..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md +++ /dev/null @@ -1,228 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ac -title: 步驟 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -爲 `#blue-right` 提供正確的定位，將 `position` 設置爲 `absolute`，`top` 設置爲 `50%`，`left` 設置爲 `40%`。 - -# --hints-- - -你的 `#blue-right` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.position === 'absolute'); -``` - -你的 `#blue-right` 選擇器應該有一個 `top` 屬性設置爲 `50%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.top === '50%'); -``` - -你的 `#blue-right` 選擇器應該有一個 `left` 屬性設置爲 `40%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md deleted file mode 100644 index 2d7ce80f60c..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ad -title: 步驟 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -在你的 `.blue` 元素下方，添加另一個 `div`。 將它的 `id` 值設置爲 `orange-character`。 - -# --hints-- - -你的 `.characters` 元素中應該有一個新的 `div` 元素。 - -```js -assert(document.querySelectorAll('.characters > div')?.length === 5); -``` - -你的新 `div` 元素應將 `id` 設置爲 `orange-character`。 - -```js -assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') === 'orange-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md deleted file mode 100644 index ad92fbfca59..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md +++ /dev/null @@ -1,245 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ae -title: 步驟 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -在該 `#orange-character` 元素中，添加四個 `div` 元素。 按順序給它們 `id` 值爲 `black-round-hat`、`eyes-div`、`triangles` 和 `guitar`。 - -# --hints-- - -你的 `#orange-character` 元素中應該有四個新的 `div` 元素。 - -```js -assert(document.querySelectorAll('#orange-character > div')?.length === 4); -``` - -你的第一個新 `div` 元素應該將 `id` 設置爲 `black-round-hat`。 - -```js -assert(document.querySelectorAll('#orange-character > div')?.[0]?.getAttribute('id') === 'black-round-hat'); -``` - -你的第二個新 `div` 元素應該將 `id` 設置爲 `eyes-div`。 - -```js -assert(document.querySelectorAll('#orange-character > div')?.[1]?.getAttribute('id') === 'eyes-div'); -``` - -你的第三個新 `div` 元素應該將 `id` 設置爲 `triangles`。 - -```js -assert(document.querySelectorAll('#orange-character > div')?.[2]?.getAttribute('id') === 'triangles'); -``` - -你的第四個新 `div` 元素應該將 `id` 設置爲 `guitar`。 - -```js -assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('id') === 'guitar'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - - --fcc-editable-region-- - - --fcc-editable-region-- -- - --- - - - --Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md deleted file mode 100644 index 93ba42220d6..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md +++ /dev/null @@ -1,240 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515af -title: 步驟 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -`#eyes-div` 元素應該有一些眼睛。 在裏面添加兩個 `div` 元素。 給第一個添加 `eyes left` 的 `class`，給第二個添加 `eyes right` 的 `class`。 - -# --hints-- - -你應該有兩個 `div` 元素嵌套在 `#eyes-div` 中。 - -```js -assert(document.querySelectorAll('#eyes-div > div')?.length === 2); -``` - -第一個新的 `div` 應該有 `class` 設置爲 `eyes left`。 - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('left')); -``` - -第二個新的 `div` 應該有 `class` 設置爲 `eyes right`。 - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --fcc-editable-region-- - - --fcc-editable-region-- --Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md deleted file mode 100644 index b712063f48d..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b0 -title: 步驟 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -在 `#triangles` div 中，你需要添加將成爲三角形的元素。 創建三十個 `div` 元素，併爲每個元素賦予 `triangle` 類。 - -# --hints-- - -你的 `#triangles` 元素中應該有 30 個 `div` 元素。 - -```js -assert(document.querySelectorAll('#triangles > div')?.length === 30); -``` - -所有 30 個新的 `div` 元素都應有 `class` 爲 `triangle`。 - -```js -const divDivDiv = document.querySelectorAll('#triangles > div'); -for (const div of divDivDiv) { - assert(div?.classList?.contains('triangle')); -} -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- --fcc-editable-region-- - - --fcc-editable-region-- -- - -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md deleted file mode 100644 index a897d7e96bf..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b1 -title: 步驟 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -在 `#guitar` 元素中，創建三個 `div` 元素。 給前兩個添加 `guitar` 的 `class`。 然後給第一個添加 `id` 值爲 `guitar-left`，給第二個添加 `id` 值爲 `guitar-right`。 給第三個 `div` 添加 `id` 值爲 `guitar-neck`。 - -第三個 `div` 不應該有 `guitar` 類。 - -# --hints-- - -你的 `#guitar` 元素中應該有三個新的 `div` 元素。 - -```js -assert(document.querySelectorAll('#guitar > div')?.length === 3); -``` - -你的第一個新 `div` 應該有一個 `class` 設置爲 `guitar`。 - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.classList?.contains('guitar')); -``` - -你的第一個新 `div` 應該將 `id` 設置爲 `guitar-left`。 - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.getAttribute('id') === 'guitar-left'); -``` - -你的第二個新 `div` 應該有一個 `class` 設置爲 `guitar`。 - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.classList?.contains('guitar')); -``` - -你的第二個新 `div` 應該將 `id` 設置爲 `guitar-right`。 - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.getAttribute('id') === 'guitar-right'); -``` - -你的第三個新 `div` 應該將 `id` 設置爲 `guitar-neck`。 - -```js -assert(document.querySelectorAll('#guitar > div')?.[2]?.getAttribute('id') === 'guitar-neck'); -``` - -你不應該給第三個新 `div` 一個 `guitar` 的 `class`。 - -```js -assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- --fcc-editable-region-- - - --fcc-editable-region-- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md deleted file mode 100644 index f949d4be5d7..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b2 -title: 步驟 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -爲你的 `.guitar` 使用另一個 FontAwesome 圖標。 在 `#guitar-left` 和 `#guitar-right` 元素中，添加一個 `i` 元素，並給它一個 `class` 爲 `fas fa-bars`。 - -# --hints-- - -在你的 `#guitar-left` 元素中，你應該添加一個 `i` 元素。 - -```js -assert(document.querySelectorAll('#guitar-left > i')?.length === 1); -``` - -在你的 `#guitar-right` 元素中，你應該添加一個 `i` 元素。 - -```js -assert(document.querySelectorAll('#guitar-right > i')?.length === 1); -``` - -你的兩個新 `i` 元素應該有 `class` 爲 `fas fa-bars`。 - -```js -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fa-bars')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fa-bars')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --- --fcc-editable-region-- - - --fcc-editable-region-- --Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md deleted file mode 100644 index 29e9be59cfe..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b3 -title: 步驟 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -使用 id 選擇器選擇你的 `orange-character` 元素。 給它一個 `width` 爲 `250px`、一個 `height` 爲 `550px` 和一個 `background-color` 爲 `rgb(240, 78, 42)`。 - -# --hints-- - -你應該有一個 `#orange-character` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')); -``` - -你的 `#orange-character` 選擇器應該有一個 `width` 屬性設置爲 `250px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.width === '250px'); -``` - -你的 `#orange-character` 選擇器應該將 `height` 屬性設置爲 `550px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.height === '550px'); -``` - -你的 `#orange-character` 選擇器應該有一個 `background-color` 屬性設置爲 `rgb(240, 78, 42)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.backgroundColor === 'rgb(240, 78, 42)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --- --fcc-editable-region-- --- --- -- --fcc-editable-region-- - -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md deleted file mode 100644 index 8a0566e192b..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b4 -title: 步驟 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -給 `#orange-character` 設置 `position` 爲 `absolute`，`top` 爲 `25%`，以及 `left` 爲 `40%`。 - -# --hints-- - -你的 `#orange-character` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.position === 'absolute'); -``` - -你的 `#orange-character` 選擇器應該有一個 `top` 屬性設置爲 `25%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.top === '25%'); -``` - -你的 `#orange-character` 選擇器應該有一個 `left` 屬性設置爲 `40%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md deleted file mode 100644 index e85031fd377..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md +++ /dev/null @@ -1,296 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b5 -title: 步驟 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -使用 id 選擇器爲 id 爲 `black-round-hat` 的元素設置樣式。 將`width`設置爲`180px`，`height`設置爲`150px`，`background-color` 設置爲 `rgb(45, 31, 19)`。 - -# --hints-- - -你應該有一個 `#black-round-hat` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')); -``` - -你的 `#black-round-hat` 選擇器應該有一個 `width` 屬性設置爲 `180px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.width === '180px'); -``` - -你的 `#black-round-hat` 選擇器應該有一個 `height` 屬性設置爲 `150px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.height === '150px'); -``` - -你的 `#black-round-hat` 選擇器應該有一個 `background-color` 屬性設置爲 `rgb(45, 31, 19)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md deleted file mode 100644 index cd661f6dc06..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md +++ /dev/null @@ -1,282 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b6 -title: 步驟 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -`#black-round-hat` 元素應該是圓形的。 給它一個 `50%` 的 `border-radius` 來解決這個問題。 - -# --hints-- - -你的 `#black-round-hat` 選擇器應該有一個 `border-radius` 屬性設置爲 `50%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md deleted file mode 100644 index be2424a3021..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b7 -title: 步驟 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -移動 `#black-round-hat` 元素，使它的 `position` 爲 `absolute`，`top` 爲 `-100px`，以及 `left` 爲 `5px`。 - -# --hints-- - -你的 `#black-round-hat` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.position === 'absolute'); -``` - -你的 `#black-round-hat` 選擇器應該有一個 `top` 屬性設置爲 `-100px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.top === '-100px'); -``` - -你的 `#black-round-hat` 選擇器應該有一個 `left` 屬性設置爲 `5px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md deleted file mode 100644 index 1bc8fe19a11..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md +++ /dev/null @@ -1,286 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b8 -title: 步驟 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -將 `#black-round-hat` 元素放在正確的一層上，`z-index` 爲 `-1`。 - -# --hints-- - -你的 `#black-round-hat` 選擇器應該有一個 `z-index` 屬性設置爲 `-1`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md deleted file mode 100644 index ade9fe4838f..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md +++ /dev/null @@ -1,301 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b9 -title: 步驟 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -使用 id 選擇器爲 id 爲 `eyes-div` 的元素創建規則。 將 `width` 設置爲 `180px`，並將 `height` 設置爲 `50px`。 - -# --hints-- - -你應該創建一個 `#eyes-div` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')); -``` - -你的 `#eyes-div` 選擇器應該有一個 `width` 屬性設置爲 `180px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.width === '180px'); -``` - -你的 `#eyes-div` 選擇器應該將 `height` 屬性設置爲 `50px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md deleted file mode 100644 index db9b950cd8f..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ba -title: 步驟 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -現在將 `#eyes-div` 元素移動到位，將 `position` 設置爲 `absolute`，`top` 設置爲 `-40px`，並且 `left` 設置爲 `20px`。 - -# --hints-- - -你的 `#eyes-div` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.position === 'absolute'); -``` - -你的 `#eyes-div` 選擇器應該有一個 `top` 屬性設置爲 `-40px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.top === '-40px'); -``` - -你的 `#eyes-div` 選擇器應該有一個 `left` 屬性設置爲 `20px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md deleted file mode 100644 index c969146d401..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bc -title: 步驟 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -將 `#eyes-div` 的 `z-index` 值設置爲 `3`。 - -# --hints-- - -你的 `#eyes-div` 選擇器應該有一個 `z-index` 屬性設置爲 `3`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md deleted file mode 100644 index 81bc7daee60..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bd -title: 步驟 79 -challengeType: 0 -dashedName: step-79 ---- - -# --description-- - -現在使用 class 選擇器來定位 `guitar`。 這將爲吉他的兩個“半部分”設置樣式。 將 `width` 設置爲 `150px`，`height` 設置爲 `120px`，`background-color` 設置爲 `Goldenrod`，`border-radius` 設置爲 `50%`。 - -# --hints-- - -你應該創建一個 `.guitar` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')); -``` - -你的 `.guitar` 選擇器應該有一個 `width` 屬性設置爲 `150px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.width === '150px'); -``` - -你的 `.guitar` 選擇器應該有一個 `height` 屬性設置爲 `120px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.height === '120px'); -``` - -你的 `.guitar` 選擇器應該有一個 `background-color` 屬性設置爲 `Goldenrod`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.backgroundColor === 'goldenrod'); -``` - -你的 `.guitar` 選擇器應該有一個 `border-radius` 屬性設置爲 `50%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md deleted file mode 100644 index 665734674f5..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md +++ /dev/null @@ -1,337 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515be -title: 步驟 80 -challengeType: 0 -dashedName: step-80 ---- - -# --description-- - -選擇值爲 `guitar-left` 的 `id`，將 `position` 設置爲 `absolute`，`left` 設置爲 `0px`。 - -# --hints-- - -你應該創建一個新的 `#guitar-left` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')); -``` - -你的 `#guitar-left` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'absolute'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md deleted file mode 100644 index 97d7d75952a..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bf -title: 步驟 81 -challengeType: 0 -dashedName: step-81 ---- - -# --description-- - -選擇值爲 `guitar-right` 的 `id`，將 `position` 設置爲 `absolute`。 這一次，將 `left` 設置爲 `100px`。 - -# --hints-- - -你應該創建一個新的 `#guitar-right` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')); -``` - -你的 `#guitar-right` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.position === 'absolute'); -``` - -你的 `#guitar-right` 選擇器應該有一個 `left` 屬性設置爲 `100px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md deleted file mode 100644 index d2883da6184..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md +++ /dev/null @@ -1,359 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c0 -title: 步驟 82 -challengeType: 0 -dashedName: step-82 ---- - -# --description-- - -現在你需要將條形圖標移動到位。 爲 `fa-bars` 類創建一個類選擇器。 將 `display` 設置爲 `block`，`margin-top` 設置爲 `30%`，`margin-left` 設置爲 `40%`。 - -# --hints-- - -您應該創建一個 `.fa-bars` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')); -``` - -你的 `.fa-bars` 選擇器應該有一個 `display` 屬性設置爲 `block`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.display === 'block'); -``` - -你的 `.fa-bars` 選擇器應該有一個 `margin-top` 屬性設置爲 `30%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginTop === '30%'); -``` - -你的 `.fa-bars` 選擇器應該有一個 `margin-left` 屬性設置爲 `40%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md deleted file mode 100644 index 7d637ae5967..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md +++ /dev/null @@ -1,365 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c1 -title: 步驟 83 -challengeType: 0 -dashedName: step-83 ---- - -# --description-- - -使用 id 選擇器爲 id `guitar-neck` 創建規則。 將 `width` 設置爲 `200px`，`height` 設置爲 `30px`，`background-color` 設置爲 `#D2691E`。 - -# --hints-- - -你應該創建一個 `#guitar-neck` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')); -``` - -你的 `#guitar-neck` 選擇器應該有一個 `width` 屬性設置爲 `200px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.width === '200px'); -``` - -你的 `#guitar-neck` 選擇器應該有一個 `height` 屬性設置爲 `30px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.height === '30px'); -``` - -你的 `#guitar-neck` 選擇器應該有一個 `background-color` 屬性設置爲 `#D2691E`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md deleted file mode 100644 index d8d1a7d850a..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md +++ /dev/null @@ -1,363 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c2 -title: 步驟 84 -challengeType: 0 -dashedName: step-84 ---- - -# --description-- - -現在移動 `#guitar-neck` 元素，`position` 爲 `absolute`，`top` 值爲 `45px`，以及 `left` 值爲 `200px`。 - -# --hints-- - -你的 `#guitar-neck` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.position === 'absolute'); -``` - -你的 `#guitar-neck` 選擇器應該有一個 `top` 屬性設置爲 `45px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.top === '45px'); -``` - -你的 `#guitar-neck` 選擇器應該有一個 `left` 屬性設置爲 `200px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md deleted file mode 100644 index 4c0d4fa4bb1..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md +++ /dev/null @@ -1,354 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c3 -title: 步驟 85 -challengeType: 0 -dashedName: step-85 ---- - -# --description-- - -給 `#guitar-neck` 元素一個 `z-index` 值爲 `3`。 - -# --hints-- - -你的 `#guitar-neck` 選擇器應該有一個 `z-index` 屬性設置爲 `3`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md deleted file mode 100644 index 6ca75938135..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c4 -title: 步驟 86 -challengeType: 0 -dashedName: step-86 ---- - -# --description-- - -是時候用 `eyes` 類設置元素的樣式了。 使用類選擇器將 `width` 設置爲 `35px`，`height` 設置爲 `20px`，`background-color` 設置爲 `#8B4513`，`border-radius` 設置爲 `20px 50%`。 - -# --hints-- - -你應該創建一個 `.eyes` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')); -``` - -你的 `.eyes` 選擇器應該有一個 `width` 屬性設置爲 `35px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.width === '35px'); -``` - -你的 `.eyes` 選擇器應該有一個 `height` 屬性設置爲 `20px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.height === '20px'); -``` - -你的 `.eyes` 選擇器應該有一個 `background-color` 屬性設置爲 `#8B4513`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -你的 `.eyes` 選擇器應該有一個 `border-radius` 屬性設置爲 `20px 50%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px 50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md deleted file mode 100644 index 837580da5cf..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md +++ /dev/null @@ -1,382 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c5 -title: 步驟 87 -challengeType: 0 -dashedName: step-87 ---- - -# --description-- - -以 `right` 值定位 `class`，並將 `position` 設置爲 `absolute`，`top` 設置爲`15px`，`right` 設置爲 `30px`。 - -# --hints-- - -你應該創建一個 `.right` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')); -``` - -你的 `.right` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.position === 'absolute'); -``` - -你的 `.right` 選擇器應該有一個 `top` 屬性設置爲 `15px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.top === '15px'); -``` - -你的 `.right` 選擇器應該有一個 `right` 屬性設置爲 `30px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md deleted file mode 100644 index e633052c867..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md +++ /dev/null @@ -1,388 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c6 -title: 步驟 88 -challengeType: 0 -dashedName: step-88 ---- - -# --description-- - -對於值爲 `left` 的 `class`，創建選擇器並將 `position` 設置爲 `absolute`，`top` 設置爲 `15px`，`left` 設置爲 `30px`。 - -# --hints-- - -你應該創建一個新的 `.left` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')); -``` - -你的 `.left` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.position === 'absolute'); -``` - -你的 `.left` 選擇器應該有一個 `top` 屬性設置爲 `15px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.top === '15px'); -``` - -你的 `.left` 選擇器應該有一個 `left` 屬性設置爲 `30px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.left === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { -width: 150px; -height: 120px; -background-color: Goldenrod; -border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md deleted file mode 100644 index c9dde71e4fe..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md +++ /dev/null @@ -1,739 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c7 -title: 步驟 89 -challengeType: 0 -dashedName: step-89 ---- - -# --description-- - -最後一個步驟。 FontAwesome 圖標有點太小了。 使用 `fas` 類選擇器定位它們，並將 `font-size` 設置爲 `30px`。 - -這樣，你的畢加索畫就完成了！ - -# --hints-- - -你應該創建一個 `.fas` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')); -``` - -你的 `.fas` 選擇器應該有一個 `font-size` 屬性設置爲 `30px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - -.left { - position: absolute; - top: 15px; - left: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -# --solutions-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - -.left { - position: absolute; - top: 15px; - left: 30px; -} - -.fas { - font-size: 30px; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md deleted file mode 100644 index 90e7e03a78f..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 60b80da8676fb3227967a731 -title: 步驟 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -鏈接你的 CSS 文件，即使你還沒有編寫任何 CSS。 - -添加一個 `link` 元素，其中 `rel` 值爲 `stylesheet`，`href` 值爲 `styles.css`。 - -# --hints-- - - -你的代碼應該有一個 `link` 元素。 - -```js -assert.match(code, / link')); -``` - -你的 `link` 元素應該有一個 `rel` 屬性，其值爲 `stylesheet`。 - -```js -const link_element = document.querySelector('link'); -const rel = link_element.getAttribute("rel"); -assert.equal(rel, "stylesheet"); -``` - -你的 `link` 元素應該有一個 `href` 屬性，其值爲 `styles.css`。 - -```js -const link = document.querySelector('link'); -assert.equal(link.dataset.href, "styles.css"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md deleted file mode 100644 index 6b4d6f86f4b..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 60ba890832b4940f24d1936b -title: 步驟 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -調整 `.triangle` 元素的佈局，設置 `display` 爲 `inline-block`。 - -# --hints-- - -你的 `.triangle` 選擇器應該有一個 `display` 屬性設置爲 `inline-block`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.display === 'inline-block'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md deleted file mode 100644 index d492bbd24e7..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md +++ /dev/null @@ -1,326 +0,0 @@ ---- -id: 60ba89123a445e0f5c9e4022 -title: 步驟 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -給你的 `.triangle` 元素正確的顏色。 將 `border-top-color`、`border-bottom-color` 和 `border-left-color` 設置爲 `transparent`。 將 `border-right-color` 設置爲 `Gold`。 - -# --hints-- - -你的 `.triangle` 選擇器應該有一個 `border-top-color` 屬性設置爲 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderTopColor === 'transparent'); -``` - -你的 `.triangle` 選擇器應該有一個 `border-bottom-color` 屬性設置爲 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderBottomColor === 'transparent'); -``` - -你的 `.triangle` 選擇器應該有一個 `border-left-color` 屬性設置爲 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderLeftColor === 'transparent'); -``` - -你的 `.triangle` 選擇器應該有一個 `border-right-color` 屬性設置爲 `Gold`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor === 'gold'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md deleted file mode 100644 index e0129d1fdeb..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 60ba8913f1704c0f7a8906b8 -title: 步驟 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -爲你的 `.triangle` 元素的邊框設置樣式。 將 `border-style` 設置爲 `solid`，`border-width` 設置爲 `42px 45px 45px 0`。 - -# --hints-- - -你的 `.triangle` 選擇器應該有一個 `border-style` 屬性設置爲 `solid`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderStyle === 'solid'); -``` - -你的 `.triangle` 選擇器應該有一個 `border-width` 屬性設置爲 `42px 45px 45px 0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '42px 45px 45px 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md deleted file mode 100644 index 7c70f066962..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md +++ /dev/null @@ -1,315 +0,0 @@ ---- -id: 60ba89146b25080f99ab54ad -title: 步驟 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -爲具有 `triangle` 類的元素創建一個類選擇器。 將 `width` 設置爲 `0`，`height` 設置爲 `0`。 - -# --hints-- - -你應該創建一個 `.triangle` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')); -``` - -你的 `.triangle` 選擇器應該有一個 `width` 屬性設置爲 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.width === '0px'); -``` - -你的 `.triangle` 選擇器應該有一個 `height` 屬性設置爲 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md deleted file mode 100644 index 3072a879505..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md +++ /dev/null @@ -1,310 +0,0 @@ ---- -id: 60ba8914bab51f0fb8228e9c -title: 步驟 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -使用 id 選擇器選中 id 爲 `triangles` 的元素。 將 `width` 設置爲 `250px`，`height` 設置爲 `550px`。 - -# --hints-- - -你應該添加一個 `#triangles` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')); -``` - -你的 `#triangles` 選擇器應該有一個 `width` 屬性設置爲 `250px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.width === '250px'); -``` - -你的 `#triangles` 選擇器應該將 `height` 屬性設置爲 `550px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md deleted file mode 100644 index d6111da82ac..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 60ba929345ab0714a3743655 -title: 步驟 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -現在爲 `guitar` 使用 id 選擇器。 將 `width` 設置爲 `100%`，`height` 設置爲 `100px`。 - -# --hints-- - -你應該創建一個 `#guitar` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')); -``` - -你的 `#guitar` 選擇器應該有一個 `width` 屬性設置爲 `100%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.width === '100%'); -``` - -你的 `#guitar` 選擇器應該有一個 `height` 屬性設置爲 `100px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md deleted file mode 100644 index fb463092edd..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md +++ /dev/null @@ -1,330 +0,0 @@ ---- -id: 60ba9296d4d6b414c1b10995 -title: 步驟 77 -challengeType: 0 -dashedName: step-77 ---- - -# --description-- - -在同一個 `#guitar` 選擇器中，將 `position` 設置爲 `absolute`，`top` 設置爲 `120px`，`left` 設置爲 `0px`。 - -# --hints-- - -你的 `#guitar` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.position === 'absolute'); -``` - -你的 `#guitar` 選擇器應該有一個 `top` 屬性設置爲 `120px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.top === '120px'); -``` - -你的 `#guitar` 選擇器應該有一個 `left` 屬性設置爲 `0px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md deleted file mode 100644 index 3f70c1409ef..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -id: 60ba92987c1e4914dfa7a0b9 -title: 步驟 78 -challengeType: 0 -dashedName: step-78 ---- - -# --description-- - -爲 `#guitar` 規則添加 `z-index` 爲 `3`。 - -# --hints-- - -你的 `#guitar` 選擇器應該有一個 `z-index` 屬性設置爲 `3`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md deleted file mode 100644 index b58fe99b637..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md +++ /dev/null @@ -1,164 +0,0 @@ ---- -id: 60bad32219ebcb4a8810ac6a -title: 步驟 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -將 `#black-hat` 的 `border-width` 設置爲 `150px 0 0 300px`。 - -# --hints-- - -你的 `#black-hat` 選擇器應該有一個 `border-width` 屬性設置爲 `150px 0 0 300px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderWidth === '150px 0px 0px 300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- -- - -- - --- - - - --- --- - --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ----- --- -- -Picasso Painting - - - - - --- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md deleted file mode 100644 index 5e08c7fa65e..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 615f5c1cb7575c7551ed8a40 -title: 步驟 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -數字 `230` 的較大字體導致其溢出。 將 `.calories-info h1` 的 `overflow` 屬性設置爲 `hidden` 以避免這種情況。 - -# --hints-- - -`.calories-info h1` 選擇器應該有一個 `overflow` 屬性設置爲 `hidden`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.overflow === 'hidden'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- --- - --- - - - - -- -- --- - --- - - - --Nutrition Label - - - - --- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.sm-text { - font-size: 0.85rem; -} - ---fcc-editable-region-- -.calories-info h1 { - margin: -5px -2px; -} ---fcc-editable-region-- - -.calories-info span { - font-size: 1.2em; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md deleted file mode 100644 index 0954cf89590..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -id: 615f6a7d4ba8037bc086c2c7 -title: 步驟 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -給 `.divider` 選擇器一個 `clear` 屬性設置爲 `right`。 這將清除 `float` 屬性，將分隔線和任何後續內容推到 `float` 文本下方。 - -# --hints-- - -`.divider` 選擇器應該有一個 `clear` 屬性設置爲 `right`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.divider')?.clear === 'right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - -- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
---Amount per serving
-Calories 230
-Nutrition Label - - - - --- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - ---fcc-editable-region-- -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} ---fcc-editable-region-- - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md deleted file mode 100644 index 6fbd60146d1..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 56533eb9ac21ba0edf2244e2 -title: 構建一個凱撒密碼 -challengeType: 5 -forumTopicId: 16003 -dashedName: build-a-caesars-cipher ---- - -# --description-- - -凱撒密碼（ Caesar cipher）是最簡單且最廣爲人知的密碼（ciphers），也被稱爲移位密碼（shift cipher）。 在移位密碼中，明文中的字母通過按照一個固定數目進行偏移後被替換成新的字母。 - -現代最常被應用到的一個變種就是 ROT13 加密，也就是明文中的字母向後移 13 位。 也就是， `A ↔ N`，`B ↔ O` 等等。 - -編寫一個函數，它將把使用 ROT13 加密編碼的字符串作爲輸入並返回解碼字符串。 - -所有解碼後的字母都必須爲字母大寫。 請不要解碼非字母的字符（例如，空格、標點符號），但你需要在結果中保留它們。 - -# --hints-- - -`rot13("SERR PBQR PNZC")` 應解碼爲 `FREE CODE CAMP` - -```js -assert(rot13('SERR PBQR PNZC') === 'FREE CODE CAMP'); -``` - -`rot13("SERR CVMMN!")` 應解碼爲 `FREE PIZZA!` - -```js -assert(rot13('SERR CVMMN!') === 'FREE PIZZA!'); -``` - -`rot13("SERR YBIR?")` 應解碼爲 `FREE LOVE?` - -```js -assert(rot13('SERR YBIR?') === 'FREE LOVE?'); -``` - -`rot13("GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.")` 應解碼爲 `THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.` - -```js -assert( - rot13('GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.') === - 'THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.' -); -``` - -# --seed-- - -## --seed-contents-- - -```js -function rot13(str) { - return str; -} - -rot13("SERR PBQR PNZC"); -``` - -# --solutions-- - -```js -var lookup = { - 'A': 'N','B': 'O','C': 'P','D': 'Q', - 'E': 'R','F': 'S','G': 'T','H': 'U', - 'I': 'V','J': 'W','K': 'X','L': 'Y', - 'M': 'Z','N': 'A','O': 'B','P': 'C', - 'Q': 'D','R': 'E','S': 'F','T': 'G', - 'U': 'H','V': 'I','W': 'J','X': 'K', - 'Y': 'L','Z': 'M' -}; - -function rot13(encodedStr) { - var codeArr = encodedStr.split(""); // String to Array - var decodedArr = []; // Your Result goes here - // Only change code below this line - - decodedArr = codeArr.map(function(letter) { - if(lookup.hasOwnProperty(letter)) { - letter = lookup[letter]; - } - return letter; - }); - - // Only change code above this line - return decodedArr.join(""); // Array to String -} -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md deleted file mode 100644 index 46cc235a37c..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: aa2e6f85cab2ab736c9a9b24 -title: 構建一個收銀機 -challengeType: 5 -forumTopicId: 16012 -dashedName: build-a-cash-register ---- - -# --description-- - -設計一個收銀機抽屜函數 `checkCashRegister()`，它接受購買價格作爲第一個參數（`price`），付款作爲第二個參數（`cash`），和抽屜的現金（`cid`）作爲第三個參數。 - -`cid` 是包含貨幣面值的二維數組。 - -函數 `checkCashRegister()` 應返回含有 `status` 屬性和 `change` 屬性的對象。 - -如果收銀機內的金額少於應找回的零錢數，或者你無法返回確切的數目時，返回 `{status: "INSUFFICIENT_FUNDS", change: []}`。 - -如果收銀機內的金額恰好等於應找回的零錢數，返回 `{status: "CLOSED", change: [...]}`，其中 `change` 的屬性值就是收銀機內的金額。 - -否則，返回 `{status: "OPEN", change: [...]}`，其中 `change` 鍵值是應找回的零錢數，並將找零的面值由高到低排序。 - -- - -Nutrition Facts
- -8 servings per container
-Serving size 2/3 cup (55g)
--- -Amount per serving
-Calories 230
---% Daily Value *
- -
- -下面的抽屜裏現金數組示例： - -```js -[ - ["PENNY", 1.01], - ["NICKEL", 2.05], - ["DIME", 3.1], - ["QUARTER", 4.25], - ["ONE", 90], - ["FIVE", 55], - ["TEN", 20], - ["TWENTY", 60], - ["ONE HUNDRED", 100] -] -``` - -# --hints-- - -`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` 應返回一個對象。 - -```js -assert.deepEqual( - Object.prototype.toString.call( - checkCashRegister(19.5, 20, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]) - ), - '[object Object]' -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` 應返回 `{status: "OPEN", change: [["QUARTER", 0.5]]}`。 - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]), - { status: 'OPEN', change: [['QUARTER', 0.5]] } -); -``` - -`checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` 應返回 `{status: "OPEN", change: [["TWENTY", 60], ["TEN", 20], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.5], ["DIME", 0.2], ["PENNY", 0.04]]}`。 - -```js -assert.deepEqual( - checkCashRegister(3.26, 100, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]), - { - status: 'OPEN', - change: [ - ['TWENTY', 60], - ['TEN', 20], - ['FIVE', 15], - ['ONE', 1], - ['QUARTER', 0.5], - ['DIME', 0.2], - ['PENNY', 0.04] - ] - } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` 應返回 `{status: "INSUFFICIENT_FUNDS", change: []}`。 - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.01], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { status: 'INSUFFICIENT_FUNDS', change: [] } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` 應返回 `{status: "INSUFFICIENT_FUNDS", change: []}`。 - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.01], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 1], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { status: 'INSUFFICIENT_FUNDS', change: [] } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` 應返回 `{status: "CLOSED", change: [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]}`。 - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.5], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { - status: 'CLOSED', - change: [ - ['PENNY', 0.5], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ] - } -); -``` - -# --seed-- - -## --seed-contents-- - -```js -function checkCashRegister(price, cash, cid) { - let change; - return change; -} - -checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]); -``` - -# --solutions-- - -```js -const denom = [ - { name: "ONE HUNDRED", val: 100 }, - { name: "TWENTY", val: 20 }, - { name: "TEN", val: 10 }, - { name: "FIVE", val: 5 }, - { name: "ONE", val: 1 }, - { name: "QUARTER", val: 0.25 }, - { name: "DIME", val: 0.1 }, - { name: "NICKEL", val: 0.05 }, - { name: "PENNY", val: 0.01 }, -]; - -function checkCashRegister(price, cash, cid) { - const output = { status: null, change: [] }; - let change = cash - price; - const register = cid.reduce( - function (acc, curr) { - acc.total += curr[1]; - acc[curr[0]] = curr[1]; - return acc; - }, - { total: 0 } - ); - if (register.total === change) { - output.status = "CLOSED"; - output.change = cid; - return output; - } - if (register.total < change) { - output.status = "INSUFFICIENT_FUNDS"; - return output; - } - const change_arr = denom.reduce(function (acc, curr) { - let value = 0; - while (register[curr.name] > 0 && change >= curr.val) { - change -= curr.val; - register[curr.name] -= curr.val; - value += curr.val; - change = Math.round(change * 100) / 100; - } - if (value > 0) { - acc.push([curr.name, value]); - } - return acc; - }, []); - if (change_arr.length < 1 || change > 0) { - output.status = "INSUFFICIENT_FUNDS"; - return output; - } - output.status = "OPEN"; - output.change = change_arr; - return output; -} -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md deleted file mode 100644 index 8e183f9478e..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: aaa48de84e1ecc7c742e1124 -title: 構建一個迴文檢測器 -challengeType: 5 -forumTopicId: 16004 -dashedName: build-a-palindrome-checker ---- - -# --description-- - -如果傳入的字符串是迴文字符串，則返回 `true`。 否則，返回 `false` 。 - -迴文（palindrome），指在忽略標點符號、大小寫和空格的前提下，正着讀和反着讀一模一樣。 - -**注意：** 檢查迴文時，你需要先去除 **所有非字母數字的字符**（標點、空格和符號），並將所有字母都轉換成大寫或都轉換成小寫。 - -我們會傳入具有不同格式的字符串，如 `racecar`、`RaceCar` 和 `race CAR` 等等。 - -我們也會傳入一些包含特殊符號的字符串，例如 `2A3*3a2`、`2A3 3a2`、`2_A3*3#A2`。 - -# --hints-- - -`palindrome("eye")` 應返回一個布爾值。 - -```js -assert(typeof palindrome('eye') === 'boolean'); -``` - -`palindrome("eye")` 應返回 `true`。 - -```js -assert(palindrome('eye') === true); -``` - -`palindrome("_eye")` 應返回 `true`。 - -```js -assert(palindrome('_eye') === true); -``` - -`palindrome("race car")` 應返回 `true`。 - -```js -assert(palindrome('race car') === true); -``` - -`palindrome("not a palindrome")` 應返回 `false`。 - -```js -assert(palindrome('not a palindrome') === false); -``` - -`palindrome("A man, a plan, a canal. Panama")` 應返回 `true`。 - -```js -assert(palindrome('A man, a plan, a canal. Panama') === true); -``` - -`palindrome("never odd or even")` 應返回 `true`。 - -```js -assert(palindrome('never odd or even') === true); -``` - -`palindrome("nope")` 應返回 `false`。 - -```js -assert(palindrome('nope') === false); -``` - -`palindrome("almostomla")` 應返回 `false`。 - -```js -assert(palindrome('almostomla') === false); -``` - -`palindrome("My age is 0, 0 si ega ym.")` 應返回 `true`。 - -```js -assert(palindrome('My age is 0, 0 si ega ym.') === true); -``` - -`palindrome("1 eye for of 1 eye.")` 應返回 `false`。 - -```js -assert(palindrome('1 eye for of 1 eye.') === false); -``` - -`palindrome("0_0 (: /-\ :) 0-0")` 應返回 `true`。 - -```js -assert(palindrome('0_0 (: /- :) 0-0') === true); -``` - -`palindrome("five|\_/|four")` 應返回 `false`。 - -```js -assert(palindrome('five|_/|four') === false); -``` - -# --seed-- - -## --seed-contents-- - -```js -function palindrome(str) { - return true; -} - -palindrome("eye"); -``` - -# --solutions-- - -```js -function palindrome(str) { - var string = str.toLowerCase().split(/[^A-Za-z0-9]/gi).join(''); - var aux = string.split(''); - if (aux.join('') === aux.reverse().join('')){ - return true; - } - - return false; -} -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md deleted file mode 100644 index 801e90b5260..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md +++ /dev/null @@ -1,215 +0,0 @@ ---- -id: a7f4d8f2483413a6ce226cac -title: 構建羅馬數字轉換器 -challengeType: 5 -forumTopicId: 16044 -dashedName: build-a-roman-numeral-converter ---- - -# --description-- - -把傳入的數字轉爲羅馬數字。 - -| 羅馬數字 | 阿拉伯數字 | -| ---- | ----- | -| M | 1000 | -| CM | 900 | -| D | 500 | -| CD | 400 | -| C | 100 | -| XC | 90 | -| L | 50 | -| XL | 40 | -| X | 10 | -| IX | 9 | -| V | 5 | -| IV | 4 | -| I | 1 | - -所有羅馬數字答案都應該大寫。 - -# --hints-- - -`convertToRoman(2)` 應該返回字符串 `II`。 - -```js -assert.deepEqual(convertToRoman(2), 'II'); -``` - -`convertToRoman(3)` 應該返回字符串 `III`。 - -```js -assert.deepEqual(convertToRoman(3), 'III'); -``` - -`convertToRoman(4)` 應該返回字符串 `IV`。 - -```js -assert.deepEqual(convertToRoman(4), 'IV'); -``` - -`convertToRoman(5)` 應該返回字符串 `V`。 - -```js -assert.deepEqual(convertToRoman(5), 'V'); -``` - -`convertToRoman(9)` 應該返回字符串 `IX`。 - -```js -assert.deepEqual(convertToRoman(9), 'IX'); -``` - -`convertToRoman(12)` 應該返回字符串 `XII`。 - -```js -assert.deepEqual(convertToRoman(12), 'XII'); -``` - -`convertToRoman(16)` 應該返回字符串 `XVI`。 - -```js -assert.deepEqual(convertToRoman(16), 'XVI'); -``` - -`convertToRoman(29)` 應該返回字符串 `XXIX`。 - -```js -assert.deepEqual(convertToRoman(29), 'XXIX'); -``` - -`convertToRoman(44)` 應該返回字符串 `XLIV`. - -```js -assert.deepEqual(convertToRoman(44), 'XLIV'); -``` - -`convertToRoman(45)` 應該返回字符串 `XLV`。 - -```js -assert.deepEqual(convertToRoman(45), 'XLV'); -``` - -`convertToRoman(68)` 應該返回字符串 `LXVIII` - -```js -assert.deepEqual(convertToRoman(68), 'LXVIII'); -``` - -`convertToRoman(83)` 應該返回字符串 `LXXXIII` - -```js -assert.deepEqual(convertToRoman(83), 'LXXXIII'); -``` - -`convertToRoman(97)` 應該返回字符串 `XCVII` - -```js -assert.deepEqual(convertToRoman(97), 'XCVII'); -``` - -`convertToRoman(99)` 應該返回字符串 `XCIX` - -```js -assert.deepEqual(convertToRoman(99), 'XCIX'); -``` - -`convertToRoman(400)` 應該返回字符串 `CD` - -```js -assert.deepEqual(convertToRoman(400), 'CD'); -``` - -`convertToRoman(500)` 應該返回字符串 `D` - -```js -assert.deepEqual(convertToRoman(500), 'D'); -``` - -`convertToRoman(501)` 應該返回字符串 `DI` - -```js -assert.deepEqual(convertToRoman(501), 'DI'); -``` - -`convertToRoman(649)` 應該返回字符串 `DCXLIX` - -```js -assert.deepEqual(convertToRoman(649), 'DCXLIX'); -``` - -`convertToRoman(798)` 應該返回字符串 `DCCXCVIII` - -```js -assert.deepEqual(convertToRoman(798), 'DCCXCVIII'); -``` - -`convertToRoman(891)` 應該返回字符串 `DCCCXCI` - -```js -assert.deepEqual(convertToRoman(891), 'DCCCXCI'); -``` - -`convertToRoman(1000)` 應該返回字符串 `M` - -```js -assert.deepEqual(convertToRoman(1000), 'M'); -``` - -`convertToRoman(1004)` 應該返回字符串 `MIV` - -```js -assert.deepEqual(convertToRoman(1004), 'MIV'); -``` - -`convertToRoman(1006)` 應該返回字符串 `MVI` - -```js -assert.deepEqual(convertToRoman(1006), 'MVI'); -``` - -`convertToRoman(1023)` 應該返回字符串 `MXXIII` - -```js -assert.deepEqual(convertToRoman(1023), 'MXXIII'); -``` - -`convertToRoman(2014)` 應該返回字符串 `MMXIV` - -```js -assert.deepEqual(convertToRoman(2014), 'MMXIV'); -``` - -`convertToRoman(3999)` 應該返回字符串 `MMMCMXCIX` - -```js -assert.deepEqual(convertToRoman(3999), 'MMMCMXCIX'); -``` - -# --seed-- - -## --seed-contents-- - -```js -function convertToRoman(num) { - return num; -} - -convertToRoman(36); -``` - -# --solutions-- - -```js -function convertToRoman(num) { - var ref = [['M', 1000], ['CM', 900], ['D', 500], ['CD', 400], ['C', 100], ['XC', 90], ['L', 50], ['XL', 40], ['X', 10], ['IX', 9], ['V', 5], ['IV', 4], ['I', 1]]; - var res = []; - ref.forEach(function(p) { - while (num >= p[1]) { - res.push(p[0]); - num -= p[1]; - } - }); - return res.join(''); -} -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md deleted file mode 100644 index ce3a692fbd7..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: aff0395860f5d3034dc0bfc9 -title: 構建電話號碼驗證器 -challengeType: 5 -forumTopicId: 16090 -dashedName: build-a-telephone-number-validator ---- - -# --description-- - -如果傳入的字符串是一個有效的美國電話號碼，則返回 `true`。 - -用戶可以按照他們選擇的方式填寫表單字段，只要它是有效美國號碼的格式即可。 以下是美國電話號碼的有效格式示例（其他格式變化，請參考下面的測試）： - -貨幣單位 面值 Penny 0.01 美元（PENNY） Nickel 0.05 美元（NICKEL） Dime 0.1 美元（DIME） Quarter 0.25 美元（QUARTER） Dollar 1 美元（ONE） Five Dollars 5 美元（FIVE） Ten Dollars 10 美元（TEN） Twenty Dollars 20 美元（TWENTY） One-hundred Dollars 100 美元（ONE HUNDRED） 555-555-5555
- -在這個挑戰中，傳入的字符串可能是例如 `800-692-7753` 或者 `8oo-six427676;laskdjf` 的號碼。 你的任務是根據上面不同的格式組合，判斷它是否爲有效的電話號碼。 地區代碼是必需的。 如果提供了國家/地區代碼，則必須確認國家/地區代碼爲`1` 。 如果傳入的字符串是有效的美國電話號碼，則返回 `true`，否則返回 `false` 。 - -# --hints-- - -`telephoneCheck("555-555-5555")` 應返回一個布爾值。 - -```js -assert(typeof telephoneCheck('555-555-5555') === 'boolean'); -``` - -`telephoneCheck("1 555-555-5555")` 應返回 `true`。 - -```js -assert(telephoneCheck('1 555-555-5555') === true); -``` - -`telephoneCheck("1 (555) 555-5555")` 應返回 `true`。 - -```js -assert(telephoneCheck('1 (555) 555-5555') === true); -``` - -`telephoneCheck("5555555555")` 應返回 `true`。 - -```js -assert(telephoneCheck('5555555555') === true); -``` - -`telephoneCheck("555-555-5555")` 應返回 `true`。 - -```js -assert(telephoneCheck('555-555-5555') === true); -``` - -`telephoneCheck("(555)555-5555")` 應返回 `true`。 - -```js -assert(telephoneCheck('(555)555-5555') === true); -``` - -`telephoneCheck("1(555)555-5555")` 應返回 `true`。 - -```js -assert(telephoneCheck('1(555)555-5555') === true); -``` - -`telephoneCheck("555-5555")` 應返回 `false`。 - -```js -assert(telephoneCheck('555-5555') === false); -``` - -`telephoneCheck("5555555")` 應返回 `false`。 - -```js -assert(telephoneCheck('5555555') === false); -``` - -`telephoneCheck("1 555)555-5555")` 應返回 `false`。 - -```js -assert(telephoneCheck('1 555)555-5555') === false); -``` - -`telephoneCheck("1 555 555 5555")` 應返回 `true`。 - -```js -assert(telephoneCheck('1 555 555 5555') === true); -``` - -`telephoneCheck("1 456 789 4444")` 應返回 `true`。 - -```js -assert(telephoneCheck('1 456 789 4444') === true); -``` - -`telephoneCheck("123**&!!asdf#")` 應返回 `false`。 - -```js -assert(telephoneCheck('123**&!!asdf#') === false); -``` - -`telephoneCheck("55555555")` 應返回 `false`。 - -```js -assert(telephoneCheck('55555555') === false); -``` - -`telephoneCheck("(6054756961)")` 應返回 `false`。 - -```js -assert(telephoneCheck('(6054756961)') === false); -``` - -`telephoneCheck("2 (757) 622-7382")` 應返回 `false`。 - -```js -assert(telephoneCheck('2 (757) 622-7382') === false); -``` - -`telephoneCheck("0 (757) 622-7382")` 應返回 `false`。 - -```js -assert(telephoneCheck('0 (757) 622-7382') === false); -``` - -`telephoneCheck("-1 (757) 622-7382")` 應返回 `false`。 - -```js -assert(telephoneCheck('-1 (757) 622-7382') === false); -``` - -`telephoneCheck("2 757 622-7382")` 應返回 `false`。 - -```js -assert(telephoneCheck('2 757 622-7382') === false); -``` - -`telephoneCheck("10 (757) 622-7382")` 應返回 `false`。 - -```js -assert(telephoneCheck('10 (757) 622-7382') === false); -``` - -`telephoneCheck("27576227382")` 應返回 `false`。 - -```js -assert(telephoneCheck('27576227382') === false); -``` - -`telephoneCheck("(275)76227382")` 應返回 `false`。 - -```js -assert(telephoneCheck('(275)76227382') === false); -``` - -`telephoneCheck("2(757)6227382")` 應返回 `false`。 - -```js -assert(telephoneCheck('2(757)6227382') === false); -``` - -`telephoneCheck("2(757)622-7382")` 應返回 `false`。 - -```js -assert(telephoneCheck('2(757)622-7382') === false); -``` - -`telephoneCheck("555)-555-5555")` 應返回 `false`。 - -```js -assert(telephoneCheck('555)-555-5555') === false); -``` - -`telephoneCheck("(555-555-5555")` 應返回 `false`。 - -```js -assert(telephoneCheck('(555-555-5555') === false); -``` - -`telephoneCheck("(555)5(55?)-5555")` 應返回 `false`。 - -```js -assert(telephoneCheck('(555)5(55?)-5555') === false); -``` - -`telephoneCheck("55 55-55-555-5")` 應返回 `false`。 - -```js -assert(telephoneCheck('55 55-55-555-5') === false); -``` - -`telephoneCheck("11 555-555-5555")` 應返回 `false`。 - -```js -assert(telephoneCheck('11 555-555-5555') === false); -``` - -# --seed-- - -## --seed-contents-- - -```js -function telephoneCheck(str) { - return true; -} - -telephoneCheck("555-555-5555"); -``` - -# --solutions-- - -```js -var re = /^([+]?1[\s]?)?((?:[(](?:[2-9]1[02-9]|[2-9][02-8][0-9])[)][\s]?)|(?:(?:[2-9]1[02-9]|[2-9][02-8][0-9])[\s.-]?)){1}([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2}[\s.-]?){1}([0-9]{4}){1}$/; - -function telephoneCheck(str) { - return re.test(str); -} - -telephoneCheck("555-555-5555"); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md deleted file mode 100644 index cb39eb7bf96..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 62a3b365f1cdeb33efc2502e -title: 步驟 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -你一直使用 `var` 關鍵字聲明變量。 然而，在現代 JavaScript 中，最佳實踐是使用 `let` 關鍵詞。 這會修正幾種使用 `var` 後導致代碼難以調試的異常行爲。 - -將你所有的 `var` 關鍵字更改爲 `let`。 - -# --hints-- - -你的代碼中不應該有任何 `var` 關鍵字。 - -```js -assert.notMatch(code, /var/); -``` - -你應該使用 `let` 關鍵字聲明變量 `xp` 。 - -```js -assert.match(code, /let xp/); -``` - -你應該使用 `let` 關鍵字聲明變量 `health` 。 - -```js -assert.match(code, /let health/); -``` - -你應該使用 `let` 關鍵字聲明變量 `gold` 。 - -```js -assert.match(code, /let gold/); -``` - -你應該使用 `let` 關鍵字聲明變量 `currentWeapon` 。 - -```js -assert.match(code, /let currentWeapon/); -``` - -你不應該更改你的變量的值。 - -```js -assert.equal(xp, 0); -assert.equal(health, 100); -assert.equal(gold, 50); -assert.equal(currentWeapon, 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - -
(555)555-5555
(555) 555-5555
555 555 5555
5555555555
1 555 555 5555RPG - Dragon Repeller - - - --- - -``` - -```css -body { - background-color: darkblue; -} - -#text { - background-color: black; - color: white; - padding: 10px; -} - -#game { - max-width: 500px; - max-height: 400px; - background-color: lightgray; - color: white; - margin: 0 auto; - padding: 10px; -} - -#controls, #stats { - border: 1px solid black; - padding: 5px; - color: black; -} - -#monsterStats { - display: none; - border: 1px solid black; - padding: 5px; - color: white; - background-color: red; -} - -.stat { - padding-right: 10px; -} -``` - -```js ---fcc-editable-region-- -var xp = 0; -var health = 100; -var gold = 50; -var currentWeapon = 0; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md deleted file mode 100644 index cd564871491..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md +++ /dev/null @@ -1,355 +0,0 @@ ---- -id: 62a8f2bc37675e77d5835235 -title: Step 139 -challengeType: 0 -dashedName: step-139 ---- - -# --description-- - -JavaScript has a conditional operator called the ternary operator. This can be used as a one-line `if-else` expression. The syntax is: `condition ? true : false`. - -Here is an example of an `if-else` expression changed to a ternary: - -```js -if (num > 5) { - bigger() -} else { - smaller() -} - -num > 5 ? bigger() : smaller(); -``` - -Change your new `if-else` expression to a ternary. - -# --hints-- - -You should remove the `if` and `else` from your `else if` block. - -```js -const block = attack.toString().split("else if"); -assert.notMatch(block[1], /if/); -assert.notMatch(block[1], /else/); -``` - -You should check if `fighting` is equal to `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2/); -``` - -Using the ternary syntax, you should call `winGame` if `fighting` is equal to `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)/); -``` - -Using the ternary syntax, you should call `defeatMonster` if `fighting` is not equal to `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)\s*\:\s*defeatMonster\(\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - -- XP: 0 - Health: 100 - Gold: 50 --- - - --- Monster Name: - Health: --- Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. --RPG - Dragon Repeller - - --- - - -``` - -```css -body { - background-color: darkblue; -} - -#text { - background-color: black; - color: white; - padding: 10px; -} - -#game { - max-width: 500px; - max-height: 400px; - background-color: lightgray; - color: white; - margin: 0 auto; - padding: 10px; -} - -#controls, #stats { - border: 1px solid black; - padding: 5px; - color: black; -} - -#monsterStats { - display: none; - border: 1px solid black; - padding: 5px; - color: white; - background-color: red; -} - -.stat { - padding-right: 10px; -} -``` - -```js -let xp = 0; -let health = 100; -let gold = 50; -let currentWeapon = 0; -let fighting; -let monsterHealth; -let inventory = ["stick"]; - -const button1 = document.querySelector('#button1'); -const button2 = document.querySelector("#button2"); -const button3 = document.querySelector("#button3"); -const text = document.querySelector("#text"); -const xpText = document.querySelector("#xpText"); -const healthText = document.querySelector("#healthText"); -const goldText = document.querySelector("#goldText"); -const monsterStats = document.querySelector("#monsterStats"); -const monsterName = document.querySelector("#monsterName"); -const monsterHealthText =document.querySelector("#monsterHealth"); -const weapons = [ - { name: 'stick', power: 5 }, - { name: 'dagger', power: 30 }, - { name: 'claw hammer', power: 50 }, - { name: 'sword', power: 100 } -]; -const monsters = [ - { - name: "slime", - level: 2, - health: 15 - }, - { - name: "fanged beast", - level: 8, - health: 60 - }, - { - name: "dragon", - level: 20, - health: 300 - } -] -const locations = [ - { - name: "town square", - "button text": ["Go to store", "Go to cave", "Fight dragon"], - "button functions": [goStore, goCave, fightDragon], - text: "You are in the town square. You see a sign that says \"Store\"." - }, - { - name: "store", - "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], - "button functions": [buyHealth, buyWeapon, goTown], - text: "You enter the store." - }, - { - name: "cave", - "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], - "button functions": [fightSlime, fightBeast, goTown], - text: "You enter the cave. You see some monsters." - }, - { - name: "fight", - "button text": ["Attack", "Dodge", "Run"], - "button functions": [attack, dodge, goTown], - text: "You are fighting a monster." - }, - { - name: "kill monster", - "button text": ["Go to town square", "Go to town square", "Go to town square"], - "button functions": [goTown, goTown, goTown], - text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' - }, - { - name: "lose", - "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], - "button functions": [restart, restart, restart], - text: "You die. ☠️" - } -]; - -// initialize buttons -button1.onclick = goStore; -button2.onclick = goCave; -button3.onclick = fightDragon; - -function update(location) { - monsterStats.style.display = "none"; - button1.innerText = location["button text"][0]; - button2.innerText = location["button text"][1]; - button3.innerText = location["button text"][2]; - button1.onclick = location["button functions"][0]; - button2.onclick = location["button functions"][1]; - button3.onclick = location["button functions"][2]; - text.innerText = location.text; -} - -function goTown() { - update(locations[0]); -} - -function goStore() { - update(locations[1]); -} - -function goCave() { - update(locations[2]); -} - -function buyHealth() { - if (gold >= 10) { - gold -= 10; - health += 10; - goldText.innerText = gold; - healthText.innerText = health; - } else { - text.innerText = "You do not have enough gold to buy health."; - } -} - -function buyWeapon() { - if (currentWeapon < weapons.length - 1) { - if (gold >= 30) { - gold -= 30; - currentWeapon++; - goldText.innerText = gold; - let newWeapon = weapons[currentWeapon].name; - text.innerText = "You now have a " + newWeapon + "."; - inventory.push(newWeapon); - text.innerText += " In your inventory you have: " + inventory; - } else { - text.innerText = "You do not have enough gold to buy a weapon."; - } - } else { - text.innerText = "You already have the most powerful weapon!"; - button2.innerText = "Sell weapon for 15 gold"; - button2.onclick = sellWeapon; - } -} - -function sellWeapon() { - if (inventory.length > 1) { - gold += 15; - goldText.innerText = gold; - let currentWeapon = inventory.shift(); - text.innerText = "You sold a " + currentWeapon + "."; - text.innerText += " In your inventory you have: " + inventory; - } else { - text.innerText = "Don't sell your only weapon!"; - } -} - -function fightSlime() { - fighting = 0; - goFight(); -} - -function fightBeast() { - fighting = 1; - goFight(); -} - -function fightDragon() { - fighting = 2; - goFight(); -} - -function goFight() { - update(locations[3]); - monsterHealth = monsters[fighting].health; - monsterStats.style.display = "block"; - monsterName.innerText = monsters[fighting].name; - monsterHealthText.innerText = monsterHealth; -} - ---fcc-editable-region-- -function attack() { - text.innerText = "The " + monsters[fighting].name + " attacks."; - text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; - health -= monsters[fighting].level; - monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; - healthText.innerText = health; - monsterHealthText.innerText = monsterHealth; - if (health <= 0) { - lose(); - } else if (monsterHealth <= 0) { - if (fighting === 2) { - winGame(); - } else { - defeatMonster(); - } - } -} ---fcc-editable-region-- - -function dodge() { - text.innerText = "You dodge the attack from the " + monsters[fighting].name; -} - -function defeatMonster() { - gold += Math.floor(monsters[fighting].level * 6.7); - xp += monsters[fighting].level; - goldText.innerText = gold; - xpText.innerText = xp; - update(locations[4]); -} - -function lose() { - update(locations[5]); -} - -function restart() { - xp = 0; - health = 100; - gold = 50; - currentWeapon = 0; - inventory = ["stick"]; - goldText.innerText = gold; - healthText.innerText = health; - xpText.innerText = xp; - goTown(); -} -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md new file mode 100644 index 00000000000..d178d5a5a2b --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md @@ -0,0 +1,682 @@ +--- +id: 659b0093d7db5a1a1122b7bd +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +To get the index for the current song, you can use the indexOf() method. The `indexOf()` array method returns the first index at which a given element can be found in the array, or `-1` if the element is not present. + +```js +const animals = ["dog", "cat", "horse"]; +animals.indexOf("cat") // 1 +``` + +Inside your `getCurrentSongIndex` function, return `userData?.songs.indexOf()`. For the `indexOf()` argument, set it to `userData.currentSong`. + +# --hints-- + +You should return `userData?.songs.indexOf()` inside your `getCurrentSongIndex` function. + +```js +assert.match(code, /const\s+getCurrentSongIndex\s*=\s*\(\)\s*=>(\s*userData\?\.songs\.indexOf\()|(\s*{\s*return?\s+userData\?\.songs\.indexOf\()/) +``` + +You should pass in `userData.currentSong` into the `indexOf()` method. + +```js +assert.match(code, /const\s+getCurrentSongIndex\s*=\s*\(\)\s*=>(\s*userData\?\.songs\.indexOf\(userData\.currentSong\);?)|(\s*{\s*return\s+userData\?\.songs\.indexOf\(userData\.currentSong\);?)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + +- XP: 0 - Health: 100 - Gold: 50 --- - - --- Monster Name: - Health: --- Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. --+ Learn Basic String and Array Methods by Building a Music Player App + + + + +++ + + +``` + +```css +:root { + /* colors */ + --primary-color: #dfdfe2; + --secondary-color: #ffffff; + --app-background-color: #4d4d62; + --background-color: #1b1b32; + --foreground-color: #3b3b4f; + --highlight-color: #f1be32; + + /* font sizes */ + --root-font-size: 16px; + font-size: var(--root-font-size); + + /* font-families */ + --font-headline: "Roboto Mono", monospace; + --font-family: "Lato", sans-serif; +} + +*, +*::after, +*::before { + box-sizing: border-box; +} + +body { + background-color: var(--app-background-color); + color: var(--primary-color); + font-family: var(--font-family); +} + +h1 { + font-size: 1.125rem; + line-height: 1.6; +} + +h2 { + font-size: var(--root-font-size); +} + +ul { + margin: 0; +} + +.container { + margin-top: 10px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + row-gap: 5px; +} + +.player, +.playlist { + width: 450px; + background-color: var(--background-color); + border: 3px solid var(--foreground-color); +} + +.player { + height: 260px; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 10px; +} + +.player-bar, +.playlist-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 5px; + width: 100%; + height: 30px; + background-color: var(--foreground-color); +} + +.parallel-lines { + display: flex; + flex-wrap: wrap; + row-gap: 6px; + padding: 0 5px; +} + +.parallel-lines > div { + height: 2px; + width: 100%; + min-width: 75px; + background-color: var(--highlight-color); +} + +.fcc-title, +.playlist-title { + color: var(--secondary-color); + margin: 0 10px; + font-family: var(--font-headline); +} + +.player-content { + display: flex; + background-color: var(--foreground-color); + width: 430px; + height: 200px; + column-gap: 13px; + align-items: center; + justify-content: center; +} + +#player-album-art { + background-color: var(--secondary-color); + border: 6px solid var(--background-color); +} + +#player-album-art img { + width: 150px; + display: block; +} + +.player-display { + display: flex; + flex-direction: column; + row-gap: 20px; + padding: 14px; + background-color: var(--background-color); + height: 153px; + width: 226px; +} + +.player-display-song-artist { + height: 80px; +} + +.player-buttons svg { + fill: var(--primary-color); +} + +.playing > svg { + fill: var(--highlight-color); +} + +.player-buttons { + display: flex; + justify-content: space-around; +} + +button { + background: transparent; + border: none; + color: var(--primary-color); + cursor: pointer; + font-size: var(--root-font-size); + outline-color: var(--highlight-color); + text-align: center; +} + +.playlist-song { + outline-color: var(--highlight-color); +} + +.playlist li:not(:last-child) { + border-bottom: 1px solid var(--background-color); +} + +button:focus, +.playlist-song:focus { + outline-style: dashed; + outline-width: 2px; +} + +/* Playlist */ +.playlist { + height: auto; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 10px; +} + +#playlist-songs { + width: 430px; + height: 100%; + background-color: var(--foreground-color); + display: flex; + flex-direction: column; + row-gap: 8px; + padding: 8px 9px; + visibility: visible; + justify-content: start; + list-style: none; +} + +.playlist-song { + display: flex; + height: 55px; + justify-content: space-between; + align-items: center; + padding: 5px; +} + +[aria-current="true"] { + background-color: var(--background-color); +} + +[aria-current="true"] p { + color: var(--highlight-color); +} + +.playlist-song-info { + height: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + column-gap: 7px; + padding: 5px 0; + font-family: var(--font-family); +} + +#player-song-title, +#player-song-artist { + margin: 0; +} + +#player-song-artist { + color: var(--highlight-color); + font-size: 0.75rem; +} + +#player-song-title { + font-size: 1.125rem; +} + +.playlist-song-title { + font-size: 0.85rem; + width: 241px; + text-align: left; +} + +.playlist-song-artist { + font-size: 0.725rem; + width: 80px; +} + +.playlist-song-duration { + font-size: 0.725rem; + margin: auto; + font-family: var(--font-headline); + width: 30px; +} + +.playlist-song-delete { + padding: 0; + width: 20px; + height: 20px; +} + +.playlist-song-delete, +.playlist-song-delete { + fill: var(--foreground-color); +} + +.playlist-song-delete:hover circle, +.playlist-song-delete:focus circle { + fill: #ff0000; +} + +@media (max-width: 700px) { + .player, + .playlist { + width: 300px; + } + + .player { + height: 340px; + } + + #playlist-songs { + height: 280px; + padding: 5px 6px; + overflow-y: scroll; + overflow-x: hidden; + scrollbar-color: var(--background-color) var(--secondary-color); + scrollbar-width: thin; + } + + #playlist-songs::-webkit-scrollbar { + width: 5px; + } + + #playlist-songs::-webkit-scrollbar-track { + background: var(--background-color); + } + + #playlist-songs::-webkit-scrollbar-thumb { + background: var(--secondary-color); + } + + h1 { + font-size: 0.813rem; + } + + h2 { + font-size: 0.75rem; + } + + .player-bar, + .playlist-bar, + .player-content, + #playlist-songs { + width: 280px; + } + + .playlist-song { + justify-content: space-between; + } + + .playlist-song-title { + width: 140px; + } + + .playlist-song-artist { + width: 40px; + } + + .playlist-song-duration > button { + padding: 0; + } + + .player-content { + display: inline; + position: relative; + justify-items: center; + height: 100%; + } + + #player-album-art { + z-index: -100; + height: 280px; + box-shadow: none; + background: #000; + } + + #player-album-art img { + width: 100%; + opacity: 0.6; + } + + .player-display-song-artist { + padding: 0 10px; + } + + .player-display-song-artist > p { + white-space: pre-wrap; + } + + .player-display { + position: absolute; + width: 100%; + z-index: 1000; + background-color: transparent; + top: 0; + height: 280px; + justify-content: space-between; + text-align: center; + } +} +``` + +```js +const playlistSongs = document.getElementById("playlist-songs"); +const playButton = document.getElementById("play"); +const pauseButton = document.getElementById("pause"); +const nextButton = document.getElementById("next"); +const previousButton = document.getElementById("previous"); +const shuffleButton = document.getElementById("shuffle"); + +const allSongs = [ + { + id: 0, + title: "Scratching The Surface", + artist: "Quincy Larson", + duration: "4:25", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3", + }, + { + id: 1, + title: "Can't Stay Down", + artist: "Quincy Larson", + duration: "4:15", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3", + }, + { + id: 2, + title: "Still Learning", + artist: "Quincy Larson", + duration: "3:51", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/still-learning.mp3", + }, + { + id: 3, + title: "Cruising for a Musing", + artist: "Quincy Larson", + duration: "3:34", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cruising-for-a-musing.mp3", + }, + { + id: 4, + title: "Never Not Favored", + artist: "Quincy Larson", + duration: "3:35", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/never-not-favored.mp3", + }, + { + id: 5, + title: "From the Ground Up", + artist: "Quincy Larson", + duration: "3:12", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/from-the-ground-up.mp3", + }, + { + id: 6, + title: "Walking on Air", + artist: "Quincy Larson", + duration: "3:25", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/walking-on-air.mp3", + }, + { + id: 7, + title: "Can't Stop Me. Can't Even Slow Me Down.", + artist: "Quincy Larson", + duration: "3:52", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stop-me-cant-even-slow-me-down.mp3", + }, + { + id: 8, + title: "The Surest Way Out is Through", + artist: "Quincy Larson", + duration: "3:10", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/the-surest-way-out-is-through.mp3", + }, + { + id: 9, + title: "Chasing That Feeling", + artist: "Quincy Larson", + duration: "2:43", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/chasing-that-feeling.mp3", + }, +]; + +const audio = new Audio(); +let userData = { + songs: [...allSongs], + currentSong: null, + songCurrentTime: 0, +}; + +const playSong = (id) => { + const song = userData?.songs.find((song) => song.id === id); + audio.src = song.src; + audio.title = song.title; + + if (userData?.currentSong === null || userData?.currentSong.id !== song.id) { + audio.currentTime = 0; + } else { + audio.currentTime = userData.songCurrentTime; + } + userData.currentSong = song; + playButton.classList.add("playing"); + + audio.play(); +}; + +const pauseSong = () => { + userData.songCurrentTime = audio.currentTime; + + playButton.classList.remove("playing"); + audio.pause(); +}; + +const renderSongs = (array) => { + const songsHTML = array + .map((song)=> { + return ` ++ ++++++
+ +++ + ++ ++ ++freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md deleted file mode 100644 index 98110e0bc8a..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: 63ec19978a066607e23439f8 -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Now you need to get your two buttons. Continuing the pattern, get the `#cart-btn` and `#clear-cart-btn` elements. Store them in variables named `cartBtn` and `clearCartBtn`, respectively. - -# --hints-- - -You should use `document.getElementById()` to get the `#cart-btn` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/); -``` - -You should assign the `#cart-btn` element to a variable named `cartBtn`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartBtn\s*=\s*document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#clear-cart-btn` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/); -``` - -You should assign the `#clear-cart-btn` element to a variable named `clearCartBtn`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+clearCartBtn\s*=\s*document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md deleted file mode 100644 index b3616baccb4..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md +++ /dev/null @@ -1,227 +0,0 @@ ---- -id: 63ec1a16f930b108b8a76806 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Next is to get your totals. Get the `#total-items`, `#subtotal`, `#taxes`, and `#total` elements. Store them in variables named `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal`, respectively. - -# --hints-- - -You should use `document.getElementById()` to get the `#total-items` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)total-items\1\s*\)/); -``` - -You should assign the `#total-items` element to a variable named `totalNumberOfItems`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+totalNumberOfItems\s*=\s*document\.getElementById\(\s*('|"|`)total-items\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#subtotal` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/); -``` - -You should assign the `#subtotal` element to a variable named `cartSubTotal`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartSubTotal\s*=\s*document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#taxes` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)taxes\1\s*\)/); -``` - -You should assign the `#taxes` element to a variable named `cartTaxes`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartTaxes\s*=\s*document\.getElementById\(\s*('|"|`)taxes\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#total` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)total\1\s*\)/); -``` - -You should assign the `#total` element to a variable named `cartTotal`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartTotal\s*=\s*document\.getElementById\(\s*('|"|`)total\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md deleted file mode 100644 index a973654d0d6..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md +++ /dev/null @@ -1,209 +0,0 @@ ---- -id: 63ec1bbf5584390a7d08d41f -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -The last element to get is the `#show-hide-cart` element. Store it in a variable named `showHideCartSpan`. - -Then, use `let` to declare a variable named `isCartShowing` and set it to `false`. - -# --hints-- - -You should use `document.getElementById()` to get the `#show-hide-cart` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/); -``` - -You should assign the `#show-hide-cart` element to a variable named `showHideCartSpan`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+showHideCartSpan\s*=\s*document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/); -``` - -You should use `let` to declare a variable named `isCartShowing`. - -```js -assert.match(code, /let\s+isCartShowing/); -``` - -You should set the `isCartShowing` variable to `false`. - -```js -assert.match(code, /let\s+isCartShowing\s*=\s*false/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md deleted file mode 100644 index 172acaf6e3f..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md +++ /dev/null @@ -1,198 +0,0 @@ ---- -id: 63ec1cb59f2a4c0be5b6dfa0 -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -A shopping cart does not serve much purpose without products. Declare a `products` variable and set it to an empty array. Using an array will allow you to store multiple products. - -# --hints-- - -You should declare a `products` variable with `const`. - -```js -assert.match(code, /const\s+products/); -``` - -You should set the `products` variable to an empty array. - -```js -assert.match(code, /const\s+products\s*=\s*\[\s*\]/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md deleted file mode 100644 index 0815e4ecb06..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 63ec20a06fff670d37befbd9 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -You now need to start adding products. Before you do that, you need to consider the structure of your product data. A product will need a unique identifier to distinguish it from other products, a price so people know how much it costs, and a name so people know what they are buying. You should also add a category to each product. - -Add an object to your `products` array. Give this object an `id` property set to the number `1`, a `name` property set to `Vanilla Cupcakes (6 Pack)`, a `price` property set to the number `12.99`, and a `category` property set to `Cupcake`. - -# --hints-- - -Your products array should have one value. - -```js -assert.equal(products.length, 1); -``` - -Your products array should have an object as its first value. - -```js -assert.isObject(products[0]); -``` - -Your products array should have an object with an `id` property set to the number `1`. - -```js -assert.equal(products[0].id, 1); -``` - -Your products array should have an object with a `name` property set to `Vanilla Cupcakes (6 Pack)`. - -```js -assert.equal(products[0].name, 'Vanilla Cupcakes (6 Pack)'); -``` - -Your products array should have an object with a `price` property set to the number `12.99`. - -```js -assert.equal(products[0].price, 12.99); -``` - -Your products array should have an object with a `category` property set to `Cupcake`. - -```js -assert.equal(products[0].category, 'Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- -const products = [ - -]; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md deleted file mode 100644 index 30754019c8c..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md +++ /dev/null @@ -1,472 +0,0 @@ ---- -id: 63ec3287b182ec0efe8a3135 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Following that same data structure, add the products from this table (in order) to your `products` array. Increment the `id` for each product, counting up. - -| `name` | `price` | `category` | -| ------------------------------ | ------- | ----------- | -| `French Macaroon` | `3.99` | `Macaroon` | -| `Pumpkin Cupcake` | `3.99` | `Cupcake` | -| `Chocolate Cupcake` | `5.99` | `Cupcake` | -| `Chocolate Pretzels (4 Pack)` | `10.99` | `Pretzel` | -| `Strawberry Ice Cream` | `2.99` | `Ice Cream` | -| `Chocolate Macaroons (4 Pack)` | `9.99` | `Macaroon` | -| `Strawberry Pretzel` | `4.99` | `Pretzel` | -| `Butter Pecan Ice Cream` | `2.99` | `Ice Cream` | -| `Rocky Road Ice Cream` | `2.99` | `Ice Cream` | -| `Vanilla Macaroons (5 Pack)` | `11.99` | `Macaroon` | -| `Lemon Cupcakes (4 Pack)` | `12.99` | `Cupcake` | - -# --hints-- - -Your second object in the `products` array should have an `id` property set to the number `2`. - -```js -assert.equal(products[1].id, 2); -``` - -Your second object in the `products` array should have a `name` property set to `French Macaroon`. - -```js -assert.equal(products[1].name, 'French Macaroon'); -``` - -Your second object in the `products` array should have a `price` property set to the number `3.99`. - -```js -assert.equal(products[1].price, 3.99); -``` - -Your second object in the `products` array should have a `category` property set to `Macaroon`. - -```js -assert.equal(products[1].category, 'Macaroon'); -``` - -Your third object in the `products` array should have an `id` property set to the number `3`. - -```js -assert.equal(products[2].id, 3); -``` - -Your third object in the `products` array should have a `name` property set to `Pumpkin Cupcake`. - -```js -assert.equal(products[2].name, 'Pumpkin Cupcake'); -``` - -Your third object in the `products` array should have a `price` property set to the number `3.99`. - -```js -assert.equal(products[2].price, 3.99); -``` - -Your third object in the `products` array should have a `category` property set to `Cupcake`. - -```js -assert.equal(products[2].category, 'Cupcake'); -``` - -Your fourth object in the `products` array should have an `id` property set to the number `4`. - -```js -assert.equal(products[3].id, 4); -``` - -Your fourth object in the `products` array should have a `name` property set to `Chocolate Cupcake`. - -```js -assert.equal(products[3].name, 'Chocolate Cupcake'); -``` - -Your fourth object in the `products` array should have a `price` property set to the number `5.99`. - -```js -assert.equal(products[3].price, 5.99); -``` - -Your fourth object in the `products` array should have a `category` property set to `Cupcake`. - -```js -assert.equal(products[3].category, 'Cupcake'); -``` - -Your fifth object in the `products` array should have an `id` property set to the number `5`. - -```js -assert.equal(products[4].id, 5); -``` - -Your fifth object in the `products` array should have a `name` property set to `Chocolate Pretzels (4 Pack)`. - -```js -assert.equal(products[4].name, 'Chocolate Pretzels (4 Pack)'); -``` - -Your fifth object in the `products` array should have a `price` property set to the number `10.99`. - -```js -assert.equal(products[4].price, 10.99); -``` - -Your fifth object in the `products` array should have a `category` property set to `Pretzel`. - -```js -assert.equal(products[4].category, 'Pretzel'); -``` - -Your sixth object in the `products` array should have an `id` property set to the number `6`. - -```js -assert.equal(products[5].id, 6); -``` - -Your sixth object in the `products` array should have a `name` property set to `Strawberry Ice Cream`. - -```js -assert.equal(products[5].name, 'Strawberry Ice Cream'); -``` - -Your sixth object in the `products` array should have a `price` property set to the number `2.99`. - -```js -assert.equal(products[5].price, 2.99); -``` - -Your sixth object in the `products` array should have a `category` property set to `Ice Cream`. - -```js -assert.equal(products[5].category, 'Ice Cream'); -``` - -Your seventh object in the `products` array should have an `id` property set to the number `7`. - -```js -assert.equal(products[6].id, 7); -``` - -Your seventh object in the `products` array should have a `name` property set to `Chocolate Macaroons (4 Pack)`. - -```js -assert.equal(products[6].name, 'Chocolate Macaroons (4 Pack)'); -``` - -Your seventh object in the `products` array should have a `price` property set to the number `9.99`. - -```js -assert.equal(products[6].price, 9.99); -``` - -Your seventh object in the `products` array should have a `category` property set to `Macaroon`. - -```js -assert.equal(products[6].category, 'Macaroon'); -``` - -Your eighth object in the `products` array should have an `id` property set to the number `8`. - -```js -assert.equal(products[7].id, 8); -``` - -Your eighth object in the `products` array should have a `name` property set to `Strawberry Pretzel`. - -```js -assert.equal(products[7].name, 'Strawberry Pretzel'); -``` - -Your eighth object in the `products` array should have a `price` property set to the number `4.99`. - -```js -assert.equal(products[7].price, 4.99); -``` - -Your eighth object in the `products` array should have a `category` property set to `Pretzel`. - -```js -assert.equal(products[7].category, 'Pretzel'); -``` - -Your ninth object in the `products` array should have an `id` property set to the number `9`. - -```js -assert.equal(products[8].id, 9); -``` - -Your ninth object in the `products` array should have a `name` property set to `Butter Pecan Ice Cream`. - -```js -assert.equal(products[8].name, 'Butter Pecan Ice Cream'); -``` - -Your ninth object in the `products` array should have a `price` property set to the number `2.99`. - -```js -assert.equal(products[8].price, 2.99); -``` - -Your ninth object in the `products` array should have a `category` property set to `Ice Cream`. - -```js -assert.equal(products[8].category, 'Ice Cream'); -``` - -Your tenth object in the `products` array should have an `id` property set to the number `10`. - -```js -assert.equal(products[9].id, 10); -``` - -Your tenth object in the `products` array should have a `name` property set to `Rocky Road Ice Cream`. - -```js -assert.equal(products[9].name, 'Rocky Road Ice Cream'); -``` - -Your tenth object in the `products` array should have a `price` property set to the number `2.99`. - -```js -assert.equal(products[9].price, 2.99); -``` - -Your tenth object in the `products` array should have a `category` property set to `Ice Cream`. - -```js -assert.equal(products[9].category, 'Ice Cream'); -``` - -Your eleventh object in the `products` array should have an `id` property set to the number `11`. - -```js -assert.equal(products[10].id, 11); -``` - -Your eleventh object in the `products` array should have a `name` property set to `Vanilla Macaroons (5 Pack)`. - -```js -assert.equal(products[10].name, 'Vanilla Macaroons (5 Pack)'); -``` - -Your eleventh object in the `products` array should have a `price` property set to the number `11.99`. - -```js -assert.equal(products[10].price, 11.99); -``` - -Your eleventh object in the `products` array should have a `category` property set to `Macaroon`. - -```js -assert.equal(products[10].category, 'Macaroon'); -``` - -Your twelfth object in the `products` array should have an `id` property set to the number `12`. - -```js -assert.equal(products[11].id, 12); -``` - -Your twelfth object in the `products` array should have a `name` property set to `Lemon Cupcakes (4 Pack)`. - -```js -assert.equal(products[11].name, 'Lemon Cupcakes (4 Pack)'); -``` - -Your twelfth object in the `products` array should have a `price` property set to the number `12.99`. - -```js -assert.equal(products[11].price, 12.99); -``` - -Your twelfth object in the `products` array should have a `category` property set to `Cupcake`. - -```js -assert.equal(products[11].category, 'Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - -]; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md deleted file mode 100644 index 2a000e8614e..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 63ec3427fc3e9214c9ed2a14 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Now that you have your list of products, you can use JavaScript to insert them into the HTML. With this approach, if you decide to add more products, the HTML will automatically reflect that. - -Start by calling the `.forEach` method of your `products` array. Use arrow syntax to create an empty callback function. - -# --hints-- - -You should call the `.forEach` method of your `products` array. - -```js -assert.match(code, /products\.forEach\(/); -``` - -You should use arrow syntax to create an empty callback function. - -```js -assert.match(code, /\(\s*\)\s*=>\s*\{\s*\}/) -``` - -You should pass your empty callback function to the `.forEach` method. - -```js -assert.match(code, /products\.forEach\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md deleted file mode 100644 index e9a2c069456..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md +++ /dev/null @@ -1,277 +0,0 @@ ---- -id: 63ec36f6133df7160be3ec66 -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Remember that you can use destructuring to extract multiple values from an array or object in a single statement. - -For the first parameter of your callback function, destructure the `name`, `id`, `price`, and `category` properties from the object passed in. - -# --hints-- - -You should use destructuring to declare `name`, `id`, `price`, and `category` parameters. For this test, order matters. - -```js -assert.match(code, /\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}/); -``` - -Your destructuring should be the first parameter of the callback function. - -```js -assert.match(code, /products.forEach\(\s*\(\s*\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}\s*\)\s*=>/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - () => {} -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md deleted file mode 100644 index 4add604d105..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md +++ /dev/null @@ -1,283 +0,0 @@ ---- -id: 63ec47b454495519739486a7 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -You need to display the available products in your HTML. Start by using the addition assignment operator to add an empty template literal string to the `innerHTML` property of the `dessertCards` variable. - -# --hints-- - -You should use access the `innerHTML` property of the `dessertCards` variable. - -```js -assert.match(code, /dessertCards\.innerHTML/); -``` - -You should use the addition assignment operator on the `innerHTML` property. - -```js -assert.match(code, /dessertCards\.innerHTML\s*\+=\s*/); -``` - -You should add an empty template literal string to the `innerHTML` property. - -```js -assert.match(code, /dessertCards\.innerHTML\s*\+=\s*`\s*`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md deleted file mode 100644 index 02a59b523b4..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md +++ /dev/null @@ -1,297 +0,0 @@ ---- -id: 63ee5d38a5d29d0696f8d820 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -In your template literal, create a `div` element with a class of `dessert-card`. In that `div`, create an `h2` element and give it the text of the `name` variable. - -# --hints-- - -You should create a `div` element. - -```js -assert.isAtLeast(document.querySelectorAll('div')?.length, 12); -``` - -Your `div` element should have a class of `dessert-card`. - -```js -assert.equal(document.querySelectorAll('.dessert-card')?.length, 12); -``` - -You should create an `h2` element. - -```js -assert.isAtLeast(document.querySelectorAll('h2')?.length, 12); -``` - -Your `h2` element should have the text of the `name` variable. - -```js -assert.equal(document.querySelectorAll('h2')[0]?.textContent, 'Vanilla Cupcakes (6 Pack)'); -``` - -Your `h2` element should be inside the `div` element. - -```js -assert.equal(document.querySelectorAll('div h2')?.length, 12); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` - - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md deleted file mode 100644 index 96485328760..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 63ee5d8f9e7168076e932fe2 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -After your `h2` element, create two `p` elements. Give the first a `class` of `dessert-price`, and the text of the `price` variable with a dollar sign in front of it. Give the second a `class` of `product-category`, and the text `Category:` followed by the value of the `category` variable. - -# --hints-- - -You should create two `p` elements. - -```js -assert.equal(document.querySelector('.dessert-card')?.children.length, 3); -assert.equal(document.querySelector('.dessert-card')?.querySelectorAll('p')?.length, 2) -``` - -Your `p` elements should come after your `h2` element. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[0].tagName, 'H2'); -assert.equal(document.querySelector('.dessert-card')?.children[1].tagName, 'P'); -assert.equal(document.querySelector('.dessert-card')?.children[2].tagName, 'P'); -``` - -Your first `p` element should have a `class` of `dessert-price`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[1].className, 'dessert-price'); -``` - -Your first `p` element should have the text of the `price` variable with a dollar sign in front of it. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[1].textContent, '$12.99'); -``` - -Your second `p` element should have a `class` of `product-category`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[2].className, 'product-category'); -``` - -Your second `p` element should have the text `Category:` followed by the value of the `category` variable. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[2].textContent, 'Category: Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md deleted file mode 100644 index 6092f597046..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 63ee5e0f08e82208364c4128 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Finally, after your `p` elements, create a `button` element. Give it an `id` set to the value of the `id` variable, a `class` of `btn add-to-cart-btn`, and use `Add to cart` for the text. - -# --hints-- - -You should create a `button` element. - -```js -assert.equal(document.querySelectorAll('.dessert-card button')?.length, 12); -``` - -Your `button` element should come after your `p` elements. - -```js -assert.equal(document.querySelector('.dessert-card button')?.previousElementSibling?.tagName, 'P'); -assert.isNull(document.querySelector('.dessert-card button')?.nextElementSibling); -``` - -Your `button` element should have an `id` set to the value of the `id` variable. - -```js -assert.equal(document.querySelector('.dessert-card button')?.id, '1'); -``` - -Your `button` element should have a `class` of `btn add-to-cart-btn`. - -```js -assert.include(document.querySelector('.dessert-card button')?.className, 'btn'); -assert.include(document.querySelector('.dessert-card button')?.className, 'add-to-cart-btn'); -``` - -Your `button` element should have the text `Add to cart`. - -```js -assert.equal(document.querySelector('.dessert-card button')?.textContent?.trim(), 'Add to cart'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -${name}
- -freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md deleted file mode 100644 index 44ba9af32dc..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md +++ /dev/null @@ -1,303 +0,0 @@ ---- -id: 63ee5ea8be892e0955ab346c -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -You are already familiar with an HTML `class`, but JavaScript also has a class. In JavaScript, a class is like a blueprint for creating objects. It allows you to define a set of properties and methods, and instantiate (or create) new objects with those properties and methods. - -The `class` keyword is used to declare a class. Here is an example of declaring a `Computer` class: - -```js -class Computer {}; -``` - -Declare a `ShoppingCart` class. - -# --hints-- - -You should declare a `ShoppingCart` variable. - -```js -assert.match(code, /ShoppingCart/); -``` - -You should use the `class` keyword to declare a `ShoppingCart` class. - -```js -assert.match(code, /class\s+ShoppingCart\s*/); -``` - -Your `ShoppingCart` class should be empty. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -${name}
-$${price}
-Category: ${category}
- -freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md deleted file mode 100644 index 87839e53275..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md +++ /dev/null @@ -1,300 +0,0 @@ ---- -id: 63ee5fc113bcb20a5db9214b -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Classes have a special `constructor` method, which is called when a new instance of the class is created. The `constructor` method is a great place to initialize properties of the class. Here is an example of a class with a `constructor` method: - -```js -class Computer { - constructor() { - } -} -``` - -Add an empty `constructor` method to the `ShoppingCart` class. - -# --hints-- - -You should add a `constructor` method to the `ShoppingCart` class. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*constructor\(\s*\)\s*/) -``` - -Your `constructor` method should be empty. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*constructor\(\s*\)\s*\{\s*\}\s*\}/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -${name}
-$${price}
-Category: ${category}
- -freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md deleted file mode 100644 index 4f7a2390687..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 63ee611d478dca0b77f6a393 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -The `this` keyword in JavaScript is used to refer to the current object. Depending on where `this` is used, what it references changes. In the case of a class, it refers to the instance of the object being constructed. You can use the `this` keyword to set the properties of the object being instantiated. Here is an example: - -```js -class Computer { - constructor() { - this.ram = 16; - } -} -``` - -In your constructor, use the `this` keyword to set the `items` property to an empty array. Also, set the `total` property to `0`, and the `taxRate` property to `8.25`. - -# --hints-- - -You should use the `this` keyword to set the `items` property of your class to an empty array. - -```js -assert.match(code, /this\.items/); -const cart = new ShoppingCart(); -assert.isArray(cart.items); -assert.isEmpty(cart.items); -``` - -You should use the `this` keyword to set the `total` property of your class to `0`. - -```js -assert.match(code, /this\.total/); -const cart = new ShoppingCart(); -assert.equal(cart.total, 0); -``` - -You should use the `this` keyword to set the `taxRate` property of your class to `8.25`. - -```js -assert.match(code, /this\.taxRate/); -const cart = new ShoppingCart(); -assert.equal(cart.taxRate, 8.25); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -${name}
-$${price}
-Category: ${category}
- -freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - constructor() { - - } -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md deleted file mode 100644 index 86c81b0332a..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -id: 63ee7c664f9b65137d925c8a -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Your `ShoppingCart` class needs the ability to add items. Create an empty `addItem` method, which takes two parameters: `id` and `products`. Creating a method might look like this: - -```js -class Computer { - constructor() { - this.ram = 16; - } - - addRam(amount) { - this.ram += amount; - } -} -``` - -The first parameter, `id`, is the `id` of the product the user has added to their cart. The second parameter, `products`, is an array of product objects. By using a parameter instead of directly referencing your existing `products` array, this method will be more flexible if you wanted to add additional product lists in the future. - -# --hints-- - -Your `ShoppingCart` class should have an `addItem` method. - -```js -const cart = new ShoppingCart(); -assert.isFunction(cart.addItem); -``` - -Your `addItem` method should take two parameters: `id` and `products`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /\(\s*id\s*,\s*products\s*\)/); -``` - -Your `addItem` method should be empty. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /\(\s*id\s*,\s*products\s*\)\s*\{\s*\}/); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -${name}
-$${price}
-Category: ${category}
- -freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md deleted file mode 100644 index 88900979e4b..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md +++ /dev/null @@ -1,331 +0,0 @@ ---- -id: 63eea5cea403a81a68ae493c -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -You need to find the product that the user is adding to the cart. Remember that arrays have a `.find()` method. In your `addItem` function, declare a `product` variable, and assign it the value of calling the `.find()` method on the `products` array. - -For the callback to `.find()`, pass a function that takes a single parameter `item`, and returns whether the `id` property of `item` is strictly equal to the `id` parameter passed to `addItem`. - -# --hints-- - -You should declare a `product` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /product\s*=/); -``` - -You should call the `.find()` method on your `products` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(/); -``` - -You should pass a callback function to the `.find()` method. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(/); -``` - -The callback function should take a single parameter. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(\s*item\s*\)/); -``` - -The callback function should return whether the `id` property of `item` is strictly equal to the `id` parameter passed to `addItem`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(\s*item\s*\)\s*\{\s*return\s+item\.id\s*===\s*id\s*;?\s*\}/); -``` - -You should assign the value of the `.find()` method to the `product` variable. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /product\s*=\s*products\.find\(/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -${name}
-$${price}
-Category: ${category}
- -freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md deleted file mode 100644 index fa4bbc91e2f..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 63eea817673c8e1c22927fa6 -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Use `const` and destructuring to extract `name` and `price` variables from `product`. - -# --hints-- - -You should use destructuring to get the `name` and `price` variables. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /\{\s*name\s*,\s*price\s*\}/); -``` - -You should use `const` to declare the `name` and `price` variables. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s*\{\s*name\s*,\s*price\s*\}/); -``` - -You should use destructuring to get the `name` and `price` variables from `product`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s*\{\s*name\s*,\s*price\s*\}\s*=\s*product;?\b/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -${name}
-$${price}
-Category: ${category}
- -freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md deleted file mode 100644 index 21089f88380..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md +++ /dev/null @@ -1,311 +0,0 @@ ---- -id: 63eea8e1e143ae1d098c8c9d -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Now you need to push the `product` into the cart's `items` array. Remember to use the `this` keyword. - -# --hints-- - -You should call the `push` method on the `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /items\.push\(/); -``` - -Remember you need to use the `this` keyword to access the `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.push\(/); -``` - -You should `push` the `product` variable to the `items` array. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.deepEqual(cart.items, [products[0]]); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -${name}
-$${price}
-Category: ${category}
- -freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md deleted file mode 100644 index f1583334ed8..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 63eeb8e86becbf1e75c2cb0d -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -You now need a total count of each product that the user has in the cart. Declare a `totalCountPerProduct` variable, and assign it an empty object. - -# --hints-- - -You should declare a `totalCountPerProduct` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\s*=/); -``` - -You should use `const` to declare `totalCountPerProduct`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+totalCountPerProduct\s*=/); -``` - -You should assign an empty object to `totalCountPerProduct`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+totalCountPerProduct\s*=\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -${name}
-$${price}
-Category: ${category}
- -freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md deleted file mode 100644 index af217952d82..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 63eedebb0ec0231ff1cede1a -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Use the `.forEach()` method to loop through the `items` array. Pass an empty callback function that takes a single parameter `dessert`. - -# --hints-- - -You should use the `.forEach()` method on your `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /items\.forEach\(/); -``` - -Remember to use the `this` keyword to access the `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(/); -``` - -You should pass a callback function to the `.forEach()` method. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(/); -``` - -Your callback function should take a single parameter. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(\s*dessert\s*\)/); -``` - -Your callback function should be empty. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(\s*dessert\s*\)\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -${name}
-$${price}
-Category: ${category}
- -freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md deleted file mode 100644 index 24c1ac26daf..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md +++ /dev/null @@ -1,323 +0,0 @@ ---- -id: 63efdbc22a0c56070beabed7 -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -In your `forEach` callback, you need to update the `totalCountPerProduct` object. Using the `id` of the current `dessert` as your property, update the value of the property to be the current value plus one. Do not use the addition assignment operator for this. - -# --hints-- - -You should use dot notation to access the `id` property of `dessert`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /dessert\.id/); -``` - -You should use bracket notation to access the property of `totalCountPerProduct` that corresponds to `dessert.id`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]/); -``` - -You should use the assignment operator to update the value of the property of `totalCountPerProduct` that corresponds to `dessert.id`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=/); -``` - -You should update the value of `totalCountPerProduct` to be the current value plus one. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\+\s*1/); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -${name}
-$${price}
-Category: ${category}
- -freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - - }) - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md deleted file mode 100644 index cba3963dbee..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md +++ /dev/null @@ -1,324 +0,0 @@ ---- -id: 63efe370bbfc4a08d500118e -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -You now have a small bug. When you try to access a property of an object and the property doesn't exist, you get `undefined`. This means if the dessert isn't already present in the `totalCountPerProduct` object, you end up trying to add `1` to `undefined`, which results in `NaN`. - -To fix this, you can use the `||` operator to set the value to `0` if it doesn't exist. Wrap your right-hand `totalCountPerProduct[data.id]` in parentheses, and add `|| 0` to the end of the expression. - -# --hints-- - -You should wrap your right-hand `totalCountPerProduct[data.id]` in parentheses. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]/); -``` - -You should use the `||` operator. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*/); -``` - -You should use `0` as your fallback value. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*0\s*\)/); -``` - -You should still add `1` to the value. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*0\s*\)\s*\+\s*1/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -${name}
-$${price}
-Category: ${category}
- -freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = totalCountPerProduct[dessert.id] + 1; - }) - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md deleted file mode 100644 index 5e3da866f36..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md +++ /dev/null @@ -1,317 +0,0 @@ ---- -id: 63eff02f00e69a0b2ac10b43 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Now you need to get prepared to update the display with the new product the user added. Declare a `currentProductCount` variable, and assign it the value of the `totalCountPerProduct` object's property matching the `id` of `product`. - -# --hints-- - -You should declare a `currentProductCount` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*=/); -``` - -You should use `const` to declare `currentProductCount`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+currentProductCount\s*=/); -``` - -You should assign the value of `totalCountPerProduct[product.id]` to `currentProductCount`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*=\s*totalCountPerProduct\[product\.id\]/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -${name}
-$${price}
-Category: ${category}
- -freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md deleted file mode 100644 index a1b63e599ad..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md +++ /dev/null @@ -1,336 +0,0 @@ ---- -id: 63eff98ffb1d5a0d24ec79cb -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -You haven't written the code to generate the HTML yet, but if a product has already been added to the user's cart then there will be a matching element which you'll need. - -Use `.getElementById()` to get the matching element - you'll be setting the `id` value to `product-count-for-id${product.id}`, so use a template literal to query that value. - -Assign your query to a `currentProductCountSpan` variable. - -# --hints-- - -You should declare a `currentProductCountSpan` variable. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCountSpan\s*=/); -``` - -You should use `const` to declare `currentProductCountSpan`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+currentProductCountSpan\s*=/); -``` - -You should use `document.getElementById()` to get the matching element. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /document\.getElementById\(/); -``` - -You should use a template literal to query the `id` value. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /document\.getElementById\(\s*`product-count-for-id\$\{(product\.)?id\}`\s*\)/); -``` - -You should assign the value of `document.getElementById()` to `currentProductCountSpan`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCountSpan\s*=\s*document\.getElementById\(/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -${name}
-$${price}
-Category: ${category}
- -freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md deleted file mode 100644 index 4573e021ac0..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 63effe558c87a70e7072e447 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -The behaviour of the `addItem` method needs to change if the product is already in the cart or not. Create a ternary that checks if the current product is already in the cart. Use `undefined` for both the truthy and falsy expressions to avoid a syntax error. - -# --hints-- - -You should check if `currentProductCount` is greater than `1`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1/); -``` - -You should use a ternary operator with your `currentProductCount > 1` condition. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?/); -``` - -You should use `undefined` as the truthy expression. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined/); -``` - -You should use `undefined` as the falsy expression. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined\s*:\s*undefined/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -${name}
-$${price}
-Category: ${category}
- -freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md deleted file mode 100644 index aebdaf9a24f..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md +++ /dev/null @@ -1,320 +0,0 @@ ---- -id: 63f0165121a9181342d5bc66 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -For your truthy expression, removing the `undefined`, you need to update the `textContent` of the `currentProductCountSpan` to be the `currentProductCount` followed by an `x`. Use a template literal to do so. - -# --hints-- - -You should remove the `undefined` from your truthy expression. - -```js -const cart = new ShoppingCart(); -assert.notMatch(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined/); -``` - -You should access the `textContent` property of `currentProductCountSpan`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*currentProductCountSpan\.textContent/); -``` - -You should use template literal syntax to update the `textContent` to be `${currentProductCount}x`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /currentProductCount\s*>\s*1\s*\?\s*currentProductCountSpan\.textContent\s*=\s*`\$\{currentProductCount\}x`\s*:/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -${name}
-$${price}
-Category: ${category}
- -freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 ? undefined : undefined; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md deleted file mode 100644 index b6f14c6ae69..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md +++ /dev/null @@ -1,345 +0,0 @@ ---- -id: 63f017b4ad028a148eb713c0 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -For your falsy expression, you'll need to add new HTML to your `productsContainer`. Start by removing the `undefined`, then use the addition assignment operator and template literal syntax to add a `div` with the `class` set to `product` and the `id` set to `dessert${id}` to the `innerHTML` property of the `productsContainer`. - -# --hints-- - -You should remove the `undefined` from your falsy expression. - -```js -const cart = new ShoppingCart(); -assert.notMatch(cart.addItem.toString(), /undefined/); -``` - -You should use the addition assignment operator to add HTML to the `productsContainer`. Remember that HTML goes in the `innerHTML` property. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /productsContainer\.innerHTML\s*\+=\s*/); -``` - -You should use template literal syntax to add HTML to the `productsContainer`. - -```js -assert.match(code, /productsContainer\.innerHTML\s*\+=\s*`/); -``` - -You should add a `div` to the `productsContainer`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.tagName, "DIV"); -``` - -Your `div` should have the `class` set to `product`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.className, "product"); -``` - -Your `div` should have the `id` set to `dessert${id}`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.id, "dessert1"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -${name}
-$${price}
-Category: ${category}
- -freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : undefined; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md deleted file mode 100644 index dd3815162fa..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 63f01861f813e01564c95315 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Inside your `div`, add two `p` elements. Set the text of the second `p` element to be the value of the `price` variable. - -# --hints-- - -You should add two `p` elements inside your `div` element. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -assert.equal(div?.children.length, 2); -assert.equal(div?.children[0].tagName, 'P'); -assert.equal(div?.children[1].tagName, 'P'); -``` - -Your second `p` element should have the text of the `price` variable. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -assert.equal(div?.children[1].textContent, '12.99'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -${name}
-$${price}
-Category: ${category}
- -freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- -- -- `; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md deleted file mode 100644 index da747a73c32..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md +++ /dev/null @@ -1,349 +0,0 @@ ---- -id: 63f018f04e487e164dc27bd9 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -In your first `p` element, add a `span` element. Give the `span` a class of `product-count` and an `id` of `product-count-for-id${id}`. Then, after the span, give your `p` element the text of the `name` variable. - -# --hints-- - -Your first `p` element should have a `span` element. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children.length, 1); -assert.equal(p.children[0].tagName, 'SPAN'); -``` - -Your `span` element should have a `class` of `product-count`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children[0].className, 'product-count'); -``` - -Your `span` element should have an `id` of `product-count-for-id${id}`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children[0].id, 'product-count-for-id1'); -``` - -Your first `p` element should have the text of the `name` variable. This should be outside the span. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.innerText.trim(), 'Vanilla Cupcakes (6 Pack)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md deleted file mode 100644 index 852ac25d2b7..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md +++ /dev/null @@ -1,334 +0,0 @@ ---- -id: 63f01c9791a0aa1751c73760 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -There is still more functionality that your `ShoppingCart` class needs, but first you need to be able to test the code you have currently written. You'll need to instantiate a new `ShoppingCart` object and assign it to a variable. Here is an example of instantiating the `Computer` class from earlier examples: - -```js -const myComputer = new Computer(); -``` - -Declare a `cart` variable, and assign it a new `ShoppingCart` object. Note the use of the `new` keyword when instantiating the object. - -# --hints-- - -You should use `const` to declare a `cart` variable. - -```js -assert.match(code, /const\s+cart\s*=/); -``` - -You should use the `new` keyword to instantiate a new `ShoppingCart` object. - -```js -assert.match(code, /new\s+ShoppingCart\s*\(\s*\)/); -``` - -You should assign your new `ShoppingCart` object to the `cart` variable. - -```js -assert.isTrue(cart instanceof ShoppingCart); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } -}; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md deleted file mode 100644 index c2590b8a8ea..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 63f0224ceb16dc196d2c860a -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -You need to get all of the `Add to cart` buttons that you added to the DOM earlier. Declare an `addToCartBtns` variable, and assign it the value of calling the `getElementsByClassName()` method on the `document` object, passing in the string `add-to-cart-btn`. - -# --hints-- - -You should use `const` to declare your `addToCartBtns` variable. - -```js -assert.match(code, /const\s+addToCartBtns\s*=/); -``` - -You should call the `getElementsByClassName()` method on the `document` object. - -```js -assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(/); -``` - -You should pass the string `add-to-cart-btn` to the `getElementsByClassName()` method. - -```js -assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(\s*('|"|`)add-to-cart-btn\1\s*\)/); -``` - -You should assign the value returned by the `getElementsByClassName()` method to the `addToCartBtns` variable. - -```js -assert.deepEqual(addToCartBtns, document.getElementsByClassName('add-to-cart-btn')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } -}; - -const cart = new ShoppingCart(); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md deleted file mode 100644 index fd0129e37ca..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f026d041bc6c1a3d5cba0f -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -You need to iterate through the buttons in your `addToCartBtns` variable. However, `.getElementsByClassName()` returns a Collection, which does not have a `forEach` method. - -Use the spread operator on the `addToCartBtns` variable to convert it into an array. Then, use the `forEach` method to iterate through the array. Do not pass a callback function yet. - -# --hints-- - -You should use the spread operator on the `addToCartBtns` variable. - -```js -assert.match(code, /\.\.\.addToCartBtns/); -``` - -You should spread the `addToCartBtns` variable into an array. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]/); -``` - -You should use the `forEach` method on the array you created. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(/); -``` - -You should not pass a callback function to the `forEach` method. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md deleted file mode 100644 index cae3ba72dbe..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f0284532742c1b26c7a052 -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Add your callback function to the `forEach` method. It should take a `btn` parameter. Then, in the callback, add an event listener to the `btn`. The event listener should listen for a `click` event, and should take another callback with an `event` parameter. The second callback should be empty. - -# --hints-- - -You should use arrow syntax to add a callback function to the `forEach` method which takes a `btn` parameter. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{/); -``` - -You should add an event listener to the `btn` variable. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(/); -``` - -You should listen for a `click` event on the `btn` variable. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*/); -``` - -You should add an empty callback function to the event listener. Remember to give it an `event` parameter. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*\(\s*event\s*\)\s*=>\s*\{\s*\}\s*\)\s*\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md deleted file mode 100644 index c27e13717f0..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f0289df84a581bbdbd29b7 -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -In your event listener callback, call the `.addItem()` method of your `cart` object, and pass in the `event.target.id`. Remember that the `id` here will be a string, so you need to convert it to a number. - -Pass your `products` array as the second argument. - -# --hints-- - -Your event listener callback should call the `.addItem()` method of your `cart` object. - -```js -assert.match(code, /cart\.addItem\(/); -``` - -Your `.addItem()` method should be called with the `event.target.id` as the first argument. Remember to convert the `id` to a number using `Number()`. - -```js -assert.match(code, /cart\.addItem\(\s*Number\(\s*event\.target\.id\s*\)\s*/); -``` - -Your `.addItem()` method should be called with the `products` array as the second argument. - -```js -assert.match(code, /cart\.addItem\(\s*Number\(\s*event\.target\.id\s*\)\s*,\s*products\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - - }) - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md deleted file mode 100644 index 4b53ebc3ff1..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md +++ /dev/null @@ -1,350 +0,0 @@ ---- -id: 63f0295e673b661ccb299e8a -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -You need a way to access the total number of items in the cart. The best way to do this is to add another method to your `ShoppingCart` class, rather than accessing the `items` array directly. - -Add a `getCounts` method to the `ShoppingCart` class. It should return the number of items in the `items` array. - -# --hints-- - -Your `ShoppingCart` class should have a `getCounts` method. - -```js -assert.isFunction(cart.getCounts); -``` - -Remember to use the `this` keyword to access the `items` array. - -```js -const afterCounts = code.split('getCounts')[1]; -assert.match(afterCounts, /this\s*\.\s*items\s*\.\s*length/); -``` - -Your `getCounts` method should return the number of items in the `items` array. - -```js -assert.equal(cart.getCounts(), 0); -cart.addItem(1, products); -assert.equal(cart.getCounts(), 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } - ---fcc-editable-region-- - ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md deleted file mode 100644 index b75a16738ae..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md +++ /dev/null @@ -1,342 +0,0 @@ ---- -id: 63f029b96b9e9e1df93be951 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -Now you can update the total number of items on the webpage. Assign the value of your `cart` object's `.getCounts()` method to the `textContent` of the `totalNumberOfItems` variable. - -# --hints-- - -You should access the `textContent` property of the `totalNumberOfItems` variable. - -```js -assert.match(code, /totalNumberOfItems\s*\.\s*textContent/) -``` - -You should assign the value of your `cart` object's `.getCounts()` method to the `textContent` property of the `totalNumberOfItems` variable. - -```js -assert.match(code, /totalNumberOfItems\s*\.\s*textContent\s*=\s*cart\s*\.\s*getCounts\(\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } - - getCounts() { - return this.items.length; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - - }) - } -); ---fcc-editable-region-- - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md deleted file mode 100644 index ff8d5d86a2e..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md +++ /dev/null @@ -1,377 +0,0 @@ ---- -id: 63f02a4ef92d711ec1ff618c -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -You also need to update the total price of the cart when the user adds an item. Create a `calculateTotal` method in the `ShoppingCart` class. - -In that method, declare a `subTotal` variable and use the `reduce` method on the `items` array to calculate the sum of the `price` property of each item in the array. Use `total` and `item` as the parameters for your callback. - -Remember to set your initial value in the `reduce` method. - -# --hints-- - -You should create a `calculateTotal` method in the `ShoppingCart` class. - -```js -assert.isFunction(cart.calculateTotal); -``` - -Your `calculateTotal` method should have a `subTotal` variable declared with `const`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s+subTotal\s*=/); -``` - -Your `calculateTotal` method should use the `reduce` method on the `items` array. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /this\s*\.\s*items\s*\.\s*reduce/); -``` - -Your `reduce` callback should use `total` and `item` as the first and second parameter. Remember to use arrow function syntax. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /\(\s*total\s*,\s*item\s*\)\s*=>/); -``` - -Your `reduce` callback should return the sum of `total` and `item.price`. Use an implicit return. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /\(\s*total\s*,\s*item\s*\)\s*=>\s*total\s*\+\s*item\.price/); -``` - -Your `reduce` call should have an initial value of `0`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /this\s*\.\s*items\s*\.\s*reduce\s*\(\s*\(total,\s*item\)\s*=>\s*total\s*\+\s*item\.price\s*,\s*0\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md deleted file mode 100644 index 8d4036f7ea6..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 63f02b22cce1c11fe9604381 -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Part of the total cost will include the tax, so you need to calculate that as well. Create a `calculateTaxes` method in the `ShoppingCart` class. This method should take an `amount` parameter. - -# --hints-- - -You should create a `calculateTaxes` method in the `ShoppingCart` class. - -```js -assert.isFunction(cart.calculateTaxes); -``` - -Your `calculateTaxes` method should take an `amount` parameter. - -```js -assert.match(cart.calculateTaxes.toString(), /\(\s*amount\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md deleted file mode 100644 index 82d277b0ab0..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md +++ /dev/null @@ -1,368 +0,0 @@ ---- -id: 63f02bdeb9b428208b97eb6b -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Your `calculateTaxes` method should return the value of the `taxRate` (divided by 100, to convert it to a percent) multiplied by the `amount` parameter. - -For clarity, wrap the `taxRate / 100` calculation in parentheses. - -# --hints-- - -You should divide the `taxRate` by 100 in your `calculateTaxes` method. Remember to use the `this` keyword. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /this\s*\.\s*taxRate\s*\/\s*100/); -``` - -You should wrap the `this.taxRate / 100` calculation in parentheses. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)/); -``` - -You should multiply the `amount` parameter by the `taxRate` divided by 100 in your `calculateTaxes` method. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /amount\s*\*\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)|\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount/); -``` - -Your `calculateTaxes` method should return the value of the `taxRate` (divided by 100, to convert it to a percent) multiplied by the `amount` parameter. - -```js -console.log(cart.calculateTaxes(10), (cart.taxRate / 100) * 10); -assert.equal(cart.calculateTaxes(10), (cart.taxRate / 100) * 10); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md deleted file mode 100644 index 0954c9b4ac6..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md +++ /dev/null @@ -1,361 +0,0 @@ ---- -id: 63f02c6e18773921ba50aa53 -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Because of the way computers store and work with numbers, calculations involving decimal numbers can result in some strange behavior. For example, `0.1 + 0.2` is not equal to `0.3`. This is because computers store decimal numbers as binary fractions, and some binary fractions cannot be represented exactly as decimal fractions. - -We want to clean up the number result from your calculation. Wrap your calculation in parentheses (don't include the `return` statement!) and call the `.toFixed()` method on it. Pass the `.toFixed()` method the number `2` as an argument. This will round the number to two decimal places and return a string. - -# --hints-- - -You should wrap your calculation in parentheses. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)/) -``` - -You should call the `.toFixed()` method on your calculation. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\(/) -``` - -You should pass the `.toFixed()` method the number `2` as an argument. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\s*\(\s*2\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - return (this.taxRate / 100) * amount; - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md deleted file mode 100644 index d925dca7812..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md +++ /dev/null @@ -1,347 +0,0 @@ ---- -id: 63f0311f5ea9382388d6124f -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -The issue with `.toFixed()` returning a string is that you want to be able to perform calculations with the tax rate. To fix this, you can pass the `.toFixed()` call (including the calculation) to the `parseFloat()` function. This will convert the fixed string back into a number, preserving the existing decimal places. - -Pass your `.toFixed()` call to `parseFloat()`. - -# --hints-- - -You should pass your entire calculation (excluding the `return` statement) to `parseFloat()`. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*parseFloat\(\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\s*\(\s*2\s*\)\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - return ((this.taxRate / 100) * amount).toFixed(2); - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md deleted file mode 100644 index b0527ca7c31..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f033fdb1fbcc254999fcc3 -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Your cart currently isn't visible on the webpage. To make it visible, start by adding an event listener to the `cartBtn` variable, listening for the click event. The callback does not need any parameters. - -# --hints-- - -You should add an event listener to the `cartBtn` variable. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(/); -``` - -You should listen for a `click` event on the `cartBtn` variable. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*/); -``` - -You should add an empty callback function (using arrow syntax) to the event listener. Remember that it does not need any parameters. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md deleted file mode 100644 index 48e1daa6e0e..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 63f03446c2ed3e264be6c7fc -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Start by inverting the value of `isCartShowing`. Remember that you can use the logical not operator `!` to invert the value of a boolean. Assign the inverted value to `isCartShowing`. - -# --hints-- - -You should invert the value of `isCartShowing`. - -```js -assert.match(code, /!isCartShowing/); -``` - -You should assign the inverted value of `isCartShowing` to `isCartShowing`. - -```js -assert.match(code, /isCartShowing\s*=\s*!isCartShowing/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md deleted file mode 100644 index 1e9f9959098..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 63f0348a54a177272071a595 -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Now assign the `textContent` of the `showHideCartSpan` variable the result of a ternary expression which checks if `isCartShowing` is true. If it is, set the `textContent` to `Hide`, otherwise set it to `Show`. - -# --hints-- - -You should use the assignment operator on the `textContent` property of the `showHideCartSpan` variable. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*/) -``` - -You should use ternary syntax to check if `isCartShowing` is true. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*/) -``` - -You should set the `textContent` of the `showHideCartSpan` variable to `Hide` if `isCartShowing` is true. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*/) -``` - -You should set the `textContent` of the `showHideCartSpan` variable to `Show` if `isCartShowing` is false. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*('|"|`)Show\2/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md deleted file mode 100644 index 3fcf304cca6..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md +++ /dev/null @@ -1,357 +0,0 @@ ---- -id: 63f034d012f74627ce538d3a -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Finally, update the `display` property of the `style` object of the `cartContainer` variable to another ternary which checks if `isCartShowing` is true. If it is, set the `display` property to `block`, otherwise set it to `none`. - -Now you should be able to see your cart and add items to it. - -# --hints-- - -You should access the `display` property of the `style` property of the `cartContainer` variable. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display/) -``` - -You should use the assignment operator on the `display` property of the `style` property of the `cartContainer` variable. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*/) -``` - -You should use ternary syntax to check if `isCartShowing` is true. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*/) -``` - -You should set the `display` property of the `style` property of the `cartContainer` variable to `block` if `isCartShowing` is true. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*/) -``` - -You should set the `display` property of the `style` property of the `cartContainer` variable to `none` if `isCartShowing` is false. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*('|"|`)none\2/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md deleted file mode 100644 index a4c481b5796..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md +++ /dev/null @@ -1,353 +0,0 @@ ---- -id: 63f03686c5ea863533ec71f4 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Declare a variable `tax` and assign it the value of calling your new `.calculateTaxes()` method, passing `subTotal` as the argument. - -# --hints-- - -Use `const` to declare a variable named `tax`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s+tax\s*=/); -``` - -Assign the value of calling your new `.calculateTaxes()` method, passing `subTotal` as the argument, to the `tax` variable. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s*tax\s*=\s*this\s*\.\s*calculateTaxes\s*\(\s*subTotal\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md deleted file mode 100644 index 936b8a7add9..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f036ec91fdf238c90665f5 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Update the `total` value to be the sum of the `subTotal` and `tax` values. - -# --hints-- - -You should update the `total` value. Remember to use the `this` keyword. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total/); -``` - -You should set the `total` value to be the sum of the `subTotal` and `tax` values. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total\s*=\s*(subTotal\s*\+\s*tax|tax\s*\+\s*subTotal)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md deleted file mode 100644 index cba09f5a3e6..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md +++ /dev/null @@ -1,367 +0,0 @@ ---- -id: 63f0370b340915399d31e5eb -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -You're going to update the HTML in this method as well. Set the `textContent` of the `cartSubTotal` to be the value of `subTotal` to a fixed 2 decimal places. Use template literal syntax to add the dollar sign to the beginning of the value. - -# --hints-- - -You should access the `textContent` property of the `cartSubTotal` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartSubTotal\.textContent/); -``` - -You should call the `.toFixed()` method on the `subTotal` variable, passing `2` as the argument. - -```js -assert.match(cart.calculateTotal.toString(), /subTotal\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{subTotal\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartSubTotal` element to your template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartSubTotal\.textContent\s*=\s*`\$\$\{subTotal\.toFixed\(\s*2\s*\)\}\`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md deleted file mode 100644 index 37c08222320..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md +++ /dev/null @@ -1,394 +0,0 @@ ---- -id: 63f0374d5351223a747c301d -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Following the same pattern as your `cartSubTotal`, update the `cartTaxes` to display the `tax` value, and your `cartTotal` to display the `total` property. - -# --hints-- - -You should access the `textContent` property of the `cartTaxes` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartTaxes\.textContent/); -``` - -You should call the `.toFixed()` method on the `tax` variable, passing `2` as the argument. - -```js -assert.match(cart.calculateTotal.toString(), /tax\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{tax\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartTaxes` element to `tax.toFixed` template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartTaxes\.textContent\s*=\s*`\$\$\{tax\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should access the `textContent` property of the `cartTotal` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartTotal\.textContent/); -``` - -You should call the `.toFixed()` method on the `total` variable, passing `2` as the argument. Remember to use the `this` keyword. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{this\.total\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartTotal` element to your `total.toFixed` template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartTotal\.textContent\s*=\s*`\$\$\{this\.total\.toFixed\(\s*2\s*\)\}\`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md deleted file mode 100644 index 56336e0263e..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f0378e173e3c3b7638b528 -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Finally, return the value of the `total` property. Remember your `this` keyword. - -# --hints-- - -Your `calculateTotal` method should return the value of the `total` property. - -```js -assert.equal(cart.calculateTotal(), 0); -cart.addItem(1, products); -assert.approximately(cart.calculateTotal(), 14.06, 0.1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md deleted file mode 100644 index db0f9862452..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md +++ /dev/null @@ -1,353 +0,0 @@ ---- -id: 63f038a0ae041d3c5b0cdf23 -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Your last feature is to allow users to clear their cart. Add a `clearCart()` method to your `ShoppingCart` class. - -# --hints-- - -Your `ShoppingCart` class should have a `clearCart` method. - -```js -assert.isFunction(cart.clearCart); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md deleted file mode 100644 index 50339959f43..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md +++ /dev/null @@ -1,371 +0,0 @@ ---- -id: 63f038e671d3f73d5a041973 -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -The first thing you should do is check if the `items` array is empty. If it is, display an `alert` to the user with the text `Your shopping cart is already empty`, then return from the function. - -Remember that `0` is a falsy value, so you can use the `!` operator to check if the array is empty. - -After displaying the alert, return from the function to stop execution. - -# --hints-- - -You should create an `if` statement that checks if the `items` array is empty, using the negation operator. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)/); -``` - -Your `if` statement should display an `alert` to the user with the text `Your shopping cart is already empty`. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*/); -``` - -Your `if` statement should return from the function. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*;?\s*return\s*;?\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md deleted file mode 100644 index 23f034e9067..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 63f039dbcef7673e4e758fa3 -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Browsers have a built-in `confirm()` function which displays a confirmation prompt to the user. `confirm()` accepts a string, which is the message displayed to the user. It returns `true` if the user confirms, and `false` if the user cancels. - -Declare a variable `isCartCleared` and assign it the value of calling `confirm()` with the string `"Are you sure you want to clear all items from your shopping cart?"`. - -# --hints-- - -You should use `const` to declare the `isCartCleared` variable. - -```js -const afterClearCart = code.split('clearCart()')[1]; -assert.match(afterClearCart, /const\s+isCartCleared\s*=/); -``` - -You should call the `confirm()` function. - -```js -assert.match(cart.clearCart.toString(), /confirm\s*\(/); -``` - -You should pass the string `Are you sure you want to clear all items from your shopping cart?` to the `confirm()` function. - -```js -assert.match(cart.clearCart.toString(), /confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/); -``` - -You should assign the value of the `confirm()` function to the `isCartCleared` variable. - -```js -assert.match(cart.clearCart.toString(), /isCartCleared\s*=\s*confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md deleted file mode 100644 index be4fde050a5..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md +++ /dev/null @@ -1,378 +0,0 @@ ---- -id: 63f03a7143a6ef3f7f3344f0 -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -You only want to clear the cart if the user confirms the prompt. Create an `if` statement that checks if the user confirmed the prompt. - -In the `if` statement, set the `items` property back to an empty array, then set the `total` property to `0`. - -# --hints-- - -You should create an `if` statement that checks if the user confirmed the prompt. Remember that you can check the truthiness of `isCartCleared` directly. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)/); -``` - -Your `if` statement should set the `items` property back to an empty array. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]/); -``` - -Your `if` statement should set the `total` property to `0`. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md deleted file mode 100644 index 3b6705168d8..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md +++ /dev/null @@ -1,368 +0,0 @@ ---- -id: 63f03ac2b428b2404a5a7518 -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -You also need to start clearing the HTML. Set the `innerHTML` property of the `productsContainer` back to an empty string. - -# --hints-- - -In your `if` statement, you should set the `innerHTML` property of the `productsContainer` back to an empty string. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*productsContainer\.innerHTML\s*=\s*('|"|`)\1\s*;?\s*}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - - } - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md deleted file mode 100644 index 5a1e7f099f3..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md +++ /dev/null @@ -1,395 +0,0 @@ ---- -id: 63f03af535682e4138fdb915 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Set the `textContent` of the `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal` elements all to the number `0`. - -# --hints-- - -You should set the `textContent` of the `totalNumberOfItems` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /totalNumberOfItems\.textContent\s*=\s*0/); -``` - -You should set the `textContent` of the `cartSubTotal` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartSubTotal\.textContent\s*=\s*0/); -``` - -You should set the `textContent` of the `cartTaxes` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartTaxes\.textContent\s*=\s*0/); -``` - -You should set the `textContent` of the `cartTotal` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartTotal\.textContent\s*=\s*0/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - - } - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md deleted file mode 100644 index 913c5c53bdb..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md +++ /dev/null @@ -1,744 +0,0 @@ ---- -id: 63f03b1ed5ab15420c057463 -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Your final step is to make your clear button functional. Add a `click` event listener to the `clearCartBtn`. For the callback, you can pass in `cart.clearCart` directly. - -However, doing so will not work, because the context of `this` will be the `clearCartBtn` element. You need to bind the `clearCart` method to the `cart` object. - -You can do this by passing `cart.clearCart.bind(cart)` as the callback. - -And with that, your shopping cart project is complete! - -# --hints-- - -You should add an event listener to your `clearCartBtn` element. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(/); -``` - -Your event listener should listen for the `click` event. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,/); -``` - -Your event listener should take `cart.clearCart.bind(cart)` as the callback. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,\s*cart\.clearCart\s*.bind\(\s*cart\s*\)\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } - - getCounts() { - return this.items.length; - } - - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - totalNumberOfItems.textContent = 0; - cartSubTotal.textContent = 0; - cartTaxes.textContent = 0; - cartTotal.textContent = 0; - } - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` - -# --solutions-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } - - getCounts() { - return this.items.length; - } - - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - totalNumberOfItems.textContent = 0; - cartSubTotal.textContent = 0; - cartTaxes.textContent = 0; - cartTotal.textContent = 0; - } - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); - -clearCartBtn.addEventListener("click", cart.clearCart.bind(cart)); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md deleted file mode 100644 index c33ce088a1c..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f6721d5110af243ef8f3d9 -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Now call your `.calculateTotal()` method inside your `forEach` loop. - -# --hints-- - -You should call `cart.calculateTotal()` inside your `forEach` loop. - -```js -const afterForEach = code.split('[...addToCartBtns].forEach(')[1]; -assert.match(afterForEach, /cart\.calculateTotal\(\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - -- ${name} -
-${price}
-freeCodeCamp Shopping Cart - - - -- -Desserts Page
-- - - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -- - -- -Total number of items: 0
-Subtotal: $0
-Taxes: $0
-Total: $0
--- `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -${name}
-$${price}
-Category: ${category}
- --- `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - - }) - } -); ---fcc-editable-region-- - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md deleted file mode 100644 index a2ce162457c..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9a -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -When a browser loads a page, it creates a Document Object Model (DOM) representation of the page which includes all of the HTML elements in a tree structure. - -In JavaScript, you can access the DOM by referencing the global `document` object. - -To view the DOM, log it to the console with `console.log(document)`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/console\.log\(document\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - -- ${name} -
-${price}
-- - - - - - - - --``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md deleted file mode 100644 index aab244748d6..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9b -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -In our HTML document, we have a form element with an `id` attribute: `
- `
-
----
-
-`
- `. However, each list item in an ordered list begins with a number instead:
-
-
-
-# --question--
-
-## --text--
-
-What HTML tag is used to create list items within both unordered and ordered lists?
-
-## --answers--
-
-`
- ` element, and each item within the list is created using the list item element `
- `.
-
-Each list item in an unordered list begins with a bullet point:
-
-
-
-If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
-
-Ordered lists are created using the `
- `
-
----
-
-`
- `. However, each list item in an ordered list begins with a number instead:
-
-
-
-# --question--
-
-## --text--
-
-What HTML tag is used to create an ordered list?
-
-## --answers--
-
-`
- `
-
-## --video-solution--
-
-2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md
deleted file mode 100644
index 67e79f0ccb9..00000000000
--- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-id: 637f4e4672c65bc8e73dfe25
-title: Understand Ordered and Unordered List Question B
-challengeType: 15
-dashedName: understand-ordered-and-unordered-list-question-b
----
-
-# --description--
-
-If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
-
-Unordered lists are created using the `
- ` element, and each item within the list is created using the list item element `
- `.
-
-Each list item in an unordered list begins with a bullet point:
-
-
-
-If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.
-
-Ordered lists are created using the `
Homepage
` - -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: - -```html -click me -``` - -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. - -```html -click me -``` - -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. - -# --question-- -## --text-- - -What is an attribute? -## --answers-- - -An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag. - ---- - -An HTML attribute is used to tell the browser what the element contains. - ---- - -An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md deleted file mode 100644 index 8863b087456..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 637f703072c65bc8e73dfe34 -title: Links and Images Question C -challengeType: 15 -dashedName: links-and-images-question-c ---- - -# --description-- - -To get some practice using links and images throughout this lesson you need an HTML project to work with. - -- Create a new directory named `odin-links-and-images`. - -- Within that directory, create a new file named `index.html`. - -- Fill in the usual HTML boilerplate. - -- finally, add the following `h1` to the `body`: `Homepage
` - -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: - -```html -click me -``` - -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. - -```html -click me -``` - -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. - -# --question-- - -## --text-- - -What attribute tells links where to go to? - -## --answers-- - -`src` - ---- - -`href` - ---- - -`link` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md deleted file mode 100644 index 37eebffbabf..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 637f702872c65bc8e73dfe33 -videoId: ta3Oxx7Yqbo -title: Links and Images Question D -challengeType: 15 -dashedName: links-and-images-question-d ---- - -# --description-- - - -Generally, there are two kinds of links you will create: - -- Links to pages on other websites on the internet - -- Links to pages located on your own websites - - -## Absolute Links -Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination. - -You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain. - -`https://www.theodinproject.com/about` - -## Relative Links -Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on. - -Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example. - -Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it: - -```html - - - - -About Page
- - -``` - -Back in the `index` page, add the following anchor element to create a link to the `about` page: - -```html - -Homepage
- click me - - About - -``` - -Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created. - -This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value. - -But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory. - -Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory. - -Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed. - -To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file. - -```html - -Homepage
- About - -``` - -Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order. - -In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory. - -```html - -Homepage
- About - -``` - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML File Structure video above. - -## --text-- - -What is the difference between an absolute and a relative link? - -## --answers-- - -An absolute link is a link to another page on the current website. A relative link is a link to another website. - ---- - -An absolute link is a link to another website. A relative link is a link another page on the current website. - ---- - -There is no difference between absolute and relative links. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md deleted file mode 100644 index ae008078088..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 637f702372c65bc8e73dfe32 -videoId: 0xoztJCHpbQ -title: Links and Images Question E -challengeType: 15 -dashedName: links-and-images-question-e ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `Homepage
- click me - - About - -
-
-```
-
-Save the `index.html` file and open it in a browser to view Charles in all his glory.
-
-
-## Parent Directories
-
-What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
-
-To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
-
-```html
-
-```
-
-To break this down:
-
-- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
-
-- Then, from the parent directory, you can go into the `images` directory.
-
-- Finally, you can access the `dog.jpg` file.
-
-Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
-
-## `Alt` attribute
-
-Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
-
-The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
-
-This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included:
-
-
-# --question--
-
-## --assignment--
-
-Watch Kevin Powell’s HTML Images Video above.
-
-## --text--
-
-Which tag is used to display an image?
-
-## --answers--
-
-``
-
----
-
-``
-
----
-
-`Homepage
- click me - - About - -
-
-```
-
-Save the `index.html` file and open it in a browser to view Charles in all his glory.
-
-
-## Parent Directories
-
-What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
-
-To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
-
-```html
-
-```
-
-To break this down:
-
-- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
-
-- Then, from the parent directory, you can go into the `images` directory.
-
-- Finally, you can access the `dog.jpg` file.
-
-Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
-
-## Alt attribute
-
-Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
-
-The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
-
-This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
-
-
-# --question--
-
-## --text--
-
-What two attributes do images always need to have?
-
-## --answers--
-
-`href` and `alt`
-
----
-
-`name` and `href`
-
----
-
-`alt` and `src`
-
-## --video-solution--
-
-3
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md
deleted file mode 100644
index 5bc84fa6c96..00000000000
--- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md
+++ /dev/null
@@ -1,93 +0,0 @@
----
-id: 637f701572c65bc8e73dfe30
-title: Links and Images Question G
-challengeType: 15
-dashedName: links-and-images-question-g
----
-
-# --description--
-
-Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
-
-To display an image in HTML you use the `Homepage
- click me - - About - -
-
-```
-
-Save the `index.html` file and open it in a browser to view Charles in all his glory.
-
-
-## Parent Directories
-
-What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
-
-To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
-
-```html
-
-```
-
-To break this down:
-
-- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
-
-- Then, from the parent directory, you can go into the `images` directory.
-
-- Finally, you can access the `dog.jpg` file.
-
-Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
-
-## Alt attribute
-
-Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
-
-The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
-
-This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
-
-
-# --question--
-
-## --text--
-
-How do you access a parent directory in a filepath?
-
-## --answers--
-
-`../`
-
----
-
-`./`
-
----
-
-`.../`
-
-## --video-solution--
-
-1
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md
deleted file mode 100644
index 71157081ae7..00000000000
--- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md
+++ /dev/null
@@ -1,97 +0,0 @@
----
-id: 637f700b72c65bc8e73dfe2f
-title: Links and Images Question H
-challengeType: 15
-dashedName: links-and-images-question-h
----
-
-# --description--
-
-Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
-
-To display an image in HTML you use the `Homepage
- click me - - About - -
-
-```
-
-Save the `index.html` file and open it in a browser to view Charles in all his glory.
-
-
-## Parent Directories
-
-What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
-
-To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier:
-
-```html
-
-```
-
-To break this down:
-
-- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
-
-- Then, from the parent directory, you can go into the `images` directory.
-
-- Finally, you can access the `dog.jpg` file.
-
-Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
-
-## Alt attribute
-
-Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
-
-The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
-
-This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
-
-
-# --question--
-
-## --assignment--
-
-Read about the four main image formats that can be used on the web.
-
-## --text--
-
-What are the four main image formats that you can use for images on the web?
-
-## --answers--
-
-TIFF, GIF, PNG, and SVG.
-
----
-
-JPG, PNG, GIF, and SVG.
-
----
-
-JPG, PDF, SVG, and GIF.
-
-## --video-solution--
-
-2
diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md
deleted file mode 100644
index f4625eb7e31..00000000000
--- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-id: 637f4e3e72c65bc8e73dfe24
-videoId: kcHKFZBVtf4
-title: Understand Ordered and Unordered List Question A
-challengeType: 15
-dashedName: understand-ordered-and-unordered-list-question-a
----
-
-# --description--
-
-If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.
-
-Unordered lists are created using the `- ` element, and each item within the list is created using the list item element `