diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md index 81eb5c83f27..323b4523f50 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md @@ -28,13 +28,17 @@ assert.match(code, /background:\s*linear-gradient\(/) Your `linear-gradient` function should set the first color to be `#5e5e5e` at `85%`. ```js -assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%/) +const gradientBackgroundImage = new __helpers.CSSHelp(document).getStyle('.cat-head')?.getPropVal('background-image', true); +const firstGradient = gradientBackgroundImage.split(/\s*rgb\s*/)[1]; +assert.equal(firstGradient,'(94,94,94)85%,'); ``` Your `linear-gradient` function should set the second color to be `#45454f` at `100%`. ```js -assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%,\s+#45454f\s+100%\);?/) +const gradientBackgroundImage = new __helpers.CSSHelp(document).getStyle('.cat-head')?.getPropVal('background-image', true); +const secondGradient = gradientBackgroundImage.split(/\s*rgb\s*/)[2]; +assert.equal(secondGradient,'(69,69,79)100%)'); ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/5ddb965c65d27e1512d44d9a.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/5ddb965c65d27e1512d44d9a.md index c3def32154d..e2c68969ebf 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/5ddb965c65d27e1512d44d9a.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/5ddb965c65d27e1512d44d9a.md @@ -52,8 +52,22 @@ assert.equal(document.querySelector('form')?.id, 'calorie-counter'); ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -81,8 +95,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -94,7 +125,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -109,11 +140,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md index e938bc8c2e3..940aee41825 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md @@ -76,8 +76,22 @@ assert.equal(document.querySelector('form input')?.id, "budget"); ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -105,8 +119,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -118,7 +149,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -133,11 +164,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md index fcabad47a30..3ff6e29f595 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md @@ -61,8 +61,22 @@ assert.equal(document.querySelector('form input').placeholder, 'Daily calorie bu ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -90,8 +104,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -103,7 +134,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -118,11 +149,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b607af6fcdb119aae9b16a.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b607af6fcdb119aae9b16a.md index 5079bde79a8..1d215e8c3c0 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b607af6fcdb119aae9b16a.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b607af6fcdb119aae9b16a.md @@ -98,8 +98,22 @@ assert.equal(document.querySelector('form fieldset div')?.className, "input-cont ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -127,8 +141,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -140,7 +171,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -155,11 +186,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60821c855d01b1eda3c0b.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60821c855d01b1eda3c0b.md index 7de68f5215c..00720267cc4 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60821c855d01b1eda3c0b.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60821c855d01b1eda3c0b.md @@ -94,8 +94,22 @@ assert.equal(document.querySelectorAll('form fieldset')[1]?.querySelector('div') ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -123,8 +137,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -136,7 +167,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -151,11 +182,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6088bb56e2d1cac364043.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6088bb56e2d1cac364043.md index f7c617f998e..38b69ea32c3 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6088bb56e2d1cac364043.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6088bb56e2d1cac364043.md @@ -98,8 +98,22 @@ assert.equal(document.querySelectorAll('form fieldset')[2]?.querySelector('div') ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -127,8 +141,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -140,7 +171,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -155,11 +186,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b608ebf40c871d960fc004.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b608ebf40c871d960fc004.md index 911126b33e4..394642ed852 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b608ebf40c871d960fc004.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b608ebf40c871d960fc004.md @@ -144,8 +144,22 @@ assert.equal(document.querySelectorAll('form fieldset')[4]?.querySelector('div') ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -173,8 +187,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -186,7 +217,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -201,11 +232,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60a140bf5a321d50a7315.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60a140bf5a321d50a7315.md index 068bea72dfc..8c64de987b0 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60a140bf5a321d50a7315.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60a140bf5a321d50a7315.md @@ -93,8 +93,22 @@ assert.exists(document.querySelector('form > div > span')); ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -122,8 +136,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -135,7 +166,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -150,11 +181,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60aaaa65f8922bfce6b7e.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60aaaa65f8922bfce6b7e.md index c9723d26fcb..903b7e293a6 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60aaaa65f8922bfce6b7e.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60aaaa65f8922bfce6b7e.md @@ -140,8 +140,22 @@ assert.equal(document.querySelector('.controls > span > button')?.innerText, 'Ad ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -169,8 +183,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -182,7 +213,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -197,11 +228,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60af1a0b9f7238a9dd294.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60af1a0b9f7238a9dd294.md index 27f69a473d9..f48b8eed6d0 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60af1a0b9f7238a9dd294.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60af1a0b9f7238a9dd294.md @@ -150,8 +150,22 @@ assert.isTrue(document.querySelectorAll('.controls select option')?.[0]?.getAttr ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -179,8 +193,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -192,7 +223,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -207,11 +238,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60c09c5039f25a3b2dda9.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60c09c5039f25a3b2dda9.md index 4e28d650816..0674646fd7f 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60c09c5039f25a3b2dda9.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60c09c5039f25a3b2dda9.md @@ -137,8 +137,22 @@ assert.equal(document.querySelectorAll('form > div')?.[1]?.querySelectorAll('but ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -166,8 +180,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -179,7 +210,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -194,11 +225,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60ca38c897f2721b27959.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60ca38c897f2721b27959.md index aaf24c8d8cb..6bbbc761059 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60ca38c897f2721b27959.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60ca38c897f2721b27959.md @@ -112,8 +112,22 @@ assert.equal(document.querySelector('.container > div')?.innerHTML, ''); ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -141,8 +155,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -154,7 +185,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -169,11 +200,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md index 17934b0039d..b889dd00562 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md @@ -100,8 +100,22 @@ assert.match(code, /script\s*?src\s*?=\s*?('|")(\.\/)?script\.js\1/); ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -129,8 +143,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -142,7 +173,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -157,11 +188,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md index de3870b44ad..fe1ecb5a74d 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md @@ -104,8 +104,22 @@ assert.equal(calorieCounter, document.getElementById('calorie-counter')); ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -133,8 +147,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -146,7 +177,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -161,11 +192,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md index 44e1c274573..c04e2222697 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md @@ -122,8 +122,22 @@ assert.equal(entryDropdown, document.getElementById('entry-dropdown')); ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -151,8 +165,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -164,7 +195,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -179,11 +210,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md index 6cbbeb5ab4a..b3946f8a477 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md @@ -140,8 +140,22 @@ assert.equal(output, document.getElementById("output")); ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -169,8 +183,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -182,7 +213,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -197,11 +228,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md index 99c1985862c..c1f3948b518 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md @@ -104,8 +104,22 @@ assert.match(code, /let\s+isError\s*=\s*false/g); ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -133,8 +147,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -146,7 +177,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -161,11 +192,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md index 436b65b80d6..e4e4b829774 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md @@ -112,8 +112,22 @@ assert.match(cleanInputString?.toString(), /\{\s*\}/); ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -141,8 +155,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -154,7 +185,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -169,11 +200,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md index b7de4018e24..2ab67d6b1ad 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md @@ -100,8 +100,22 @@ assert.match(cleanInputString.toString(), /strArray\s*=\s*str\.split\(\s*('|")\1 ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -129,8 +143,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -142,7 +173,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -157,11 +188,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md index a0eaf81fd4e..2c524ff48b5 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md @@ -98,8 +98,22 @@ assert.match(cleanInputString.toString(), /cleanStrArray\s*=\s*\[\s*\]/g); ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -127,8 +141,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -140,7 +171,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -155,11 +186,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md index db275c224c1..a3ab50beb80 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md @@ -110,8 +110,22 @@ assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\ ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -139,8 +153,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -152,7 +183,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -167,11 +198,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md index a432c6687d5..00700de2e33 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md @@ -113,8 +113,22 @@ assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.len ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -142,8 +156,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -155,7 +186,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -170,11 +201,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md index f74ff636c5b..39717a5ae3a 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md @@ -124,8 +124,22 @@ assert.match(cleanInputString.toString(), /regex\s*=\s*\/hello\//); ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -153,8 +167,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -166,7 +197,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -181,11 +212,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md index 0f781eb61cf..93d20b1f6bc 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md @@ -94,8 +94,22 @@ assert.match(cleanInputString.toString(), /regex\s*=\s*\/\\\+-\//); ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -123,8 +137,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -136,7 +167,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -151,11 +182,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md index 25d6d2447fb..346dbd899ef 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md @@ -92,8 +92,22 @@ assert.match(cleanInputString.toString(), /regex\s*=\s*\/\\\+-\\s\//) ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-text); } h1 { @@ -121,8 +135,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -134,7 +165,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -149,11 +180,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md index 3b18f0aac60..beeaf925ef2 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md @@ -106,8 +106,22 @@ assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\+-\\s\]\//); ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -135,8 +149,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -148,7 +179,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -163,11 +194,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md index 30baf30ed58..ef4dbec3fd3 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md @@ -98,8 +98,22 @@ assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\+-\\s\]\/g/); ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -127,8 +141,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -140,7 +171,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -155,11 +186,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md index 4b35b49f7b9..abca7ea7e33 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md @@ -116,8 +116,22 @@ assert.match(cleanInputString.toString(), /return\s*str\.replace\(\s*regex\s*,\s ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -145,8 +159,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -158,7 +189,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -173,11 +204,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md index b6eef00a30b..5b6e8496b66 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md @@ -106,8 +106,22 @@ assert.match(isInvalidInput?.toString(), /\(\s*str\s*\)/) ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -135,8 +149,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -148,7 +179,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -163,11 +194,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md index 778a809571e..7f9bf5f25a5 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md @@ -98,8 +98,22 @@ assert.match(isInvalidInput.toString(), /regex\s*=\s*\/e\//); ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -127,8 +141,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -140,7 +171,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -155,11 +186,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md index 2bf1aa0f9a3..c8f2f5fbe79 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md @@ -92,8 +92,22 @@ assert.match(isInvalidInput.toString(), /regex\s*=\s*\/e\/i/); ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -121,8 +135,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -134,7 +165,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -149,11 +180,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md index 19873a84492..8a91440e53f 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md @@ -100,8 +100,22 @@ assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]e\[0-9\]\//); ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -129,8 +143,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -142,7 +173,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -157,11 +188,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md index 75477ddd763..45e79191db2 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md @@ -98,8 +98,22 @@ assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]\+e\[0-9\]\+\//); ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -127,8 +141,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -140,7 +171,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -155,11 +186,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md index 95686b3c3a0..bc14e3b6c01 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md @@ -98,8 +98,22 @@ assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\\d\+e\\d\+\//); ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -127,8 +141,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -140,7 +171,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -155,11 +186,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md index f6f61282ce9..b7ac5bac26c 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md @@ -106,8 +106,22 @@ assert.match(isInvalidInput.toString(), /return\s+str\.match\(\s*regex\s*\)/); ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -135,8 +149,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -148,7 +179,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -163,11 +194,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md index 228f3503303..dbc5f1fbe08 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md @@ -104,8 +104,22 @@ assert.match(addEntry?.toString(), /\(\s*\)/); ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -133,8 +147,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -146,7 +177,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -161,11 +192,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md index 1bc417c8bbb..be2dd0b6ec4 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md @@ -106,8 +106,22 @@ assert.match(addEntry.toString(), /targetId\s*=\s*('|")#\1\s*\+\s*entryDropdown\ ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -135,8 +149,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -148,7 +179,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -163,11 +194,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md index 413b5f76d84..bde1952b5a2 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md @@ -110,8 +110,22 @@ assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySel ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -139,8 +153,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -152,7 +183,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -167,11 +198,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md index 06e5ac50cec..01d3b5117a4 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md @@ -110,8 +110,22 @@ assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\( ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -139,8 +153,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -152,7 +183,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -167,11 +198,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md index 6aeab26c100..934ab5d2cc1 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md @@ -104,8 +104,22 @@ assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\( ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -133,8 +147,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -146,7 +177,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -161,11 +192,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e704ee12703347625900.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e704ee12703347625900.md index b658496aeee..ae943338245 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e704ee12703347625900.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e704ee12703347625900.md @@ -104,8 +104,22 @@ assert.match(addEntry.toString(), /entryNumber\s*=\s*targetInputContainer\.query ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -133,8 +147,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -146,7 +177,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -161,11 +192,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2164c0df38a382062c4af.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2164c0df38a382062c4af.md index 15622f17e14..49d628f93f2 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2164c0df38a382062c4af.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2164c0df38a382062c4af.md @@ -108,8 +108,22 @@ assert.match(addEntry.toString(), /entryNumber\s*=\s*targetInputContainer\.query ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -137,8 +151,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -150,7 +181,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -165,11 +196,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md index a7c1e1d3e7b..ff9842d5d64 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md @@ -98,8 +98,22 @@ assert.match(code, /HTMLString\s*=\s*``/); ``` ```css +:root { + --light-grey: #f5f6f7; + --dark-blue: #0a0a23; + --fcc-blue: #1b1b32; + --light-yellow: #fecc4c; + --dark-yellow: #feac32; + --light-pink: #ffadad; + --dark-red: #850000; + --light-green: #acd157; +} + body { - font-family: "Lato", Arial; + font-family: "Lato", Helvetica, Arial, sans-serif; + font-size: 18px; + background-color: var(--fcc-blue); + color: var(--light-grey); } h1 { @@ -127,8 +141,25 @@ legend { flex-direction: column; } -button:hover { +button { + outline: none; cursor: pointer; + text-decoration: none; + background-color: var(--light-yellow); + border: 2px solid var(--dark-yellow); +} + +.clear { + background-color: var(--light-pink); + color: var(--dark-red); + border-color: var(--dark-red); +} + +button, +input, +select { + min-height: 24px; + color: var(--dark-blue); } fieldset, @@ -140,7 +171,7 @@ select { } .output { - border: 2px solid black; + border: 2px solid var(--light-grey); padding: 10px; text-align: center; } @@ -155,11 +186,11 @@ select { } .surplus { - color: #006627; + color: var(--light-green); } .deficit { - color: #B30000; + color: var(--light-pink); } ``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md index e8ced7f3436..8cb7570a1f5 100644 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md @@ -104,8 +104,22 @@ assert.match(code, /HTMLString\s*=\s*`\n\s*