From 11e30f5fccbd7900ee868dc9fadf058fa334db78 Mon Sep 17 00:00:00 2001 From: Baba05206 Date: Thu, 6 Nov 2025 18:05:48 +0000 Subject: [PATCH 1/9] Add initial implementation of mean calculation and tests --- prep/mean.js | 37 +++++++++++++++++++++++++++++++++++++ prep/mean.test.js | 12 ++++++++++++ prep/package.json | 16 ++++++++++++++++ 3 files changed, 65 insertions(+) create mode 100644 prep/mean.js create mode 100644 prep/mean.test.js create mode 100644 prep/package.json diff --git a/prep/mean.js b/prep/mean.js new file mode 100644 index 000000000..c378b7b73 --- /dev/null +++ b/prep/mean.js @@ -0,0 +1,37 @@ +/* +Let’s consider a list of prices in a bill: +4.6, 5.03, 7.99, 8.01 +instead of writing the like below +const price0 = 4.6; +const price1 = 5.03; +const price2 = 7.99; +const price3 = 8.01; +We can write it as an array literal +const items = [4.6, 5.03, 7.99, 8.01]; + +The Array object, as with arrays in other programming languages, enables storing a collection +of multiple items under a single variable name, and has members for performing common array operations. +Arrays can store items of any type & multiple pieces of information. + +In JavaScript, we can use [] notation to access specific elements in the array using index numbers. +The index numbers start from 0. + + +const items = [4.6, 5.03, 7.99, 8.01]; +console.log(items[0]); // 4.6 +console.log(items[1]); // 5.03 +console.log(items[2]); // 7.99 +console.log(items[3]); // 8.01 +// Accessing elements using index numbers +*/ +const items = [4.6, 5.03, 7.99, 8.01]; +function calculateMean(list) { + // Calculate the sum of all elements in the array + const sum = list.reduce( + (accumulator, currentValue) => accumulator + currentValue, + 0 + ); + // Calculate the mean by dividing the sum by the number of elements + const mean = sum / list.length; + return mean; +} diff --git a/prep/mean.test.js b/prep/mean.test.js new file mode 100644 index 000000000..22b24b55c --- /dev/null +++ b/prep/mean.test.js @@ -0,0 +1,12 @@ +/* +test("does something as described below", () => { + // test implementation goes here +}); +*/ +test("calculates the mean of a list of numbers", () => { + const list = [3, 50, 7]; + const currentOutput = calculateMean(list); + const targetOutput = 20; + + expect(currentOutput).toEqual(targetOutput); // 20 is (3 + 50 + 7) / 3 +}); diff --git a/prep/package.json b/prep/package.json new file mode 100644 index 000000000..663b964da --- /dev/null +++ b/prep/package.json @@ -0,0 +1,16 @@ +{ + "name": "prep", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "jest" + }, + "keywords": [], + "author": "", + "license": "ISC", + "type": "commonjs", + "devDependencies": { + "jest": "^30.2.0" + } +} From 3cb29a05ca2867b60c8dd968537c74fe3abee781 Mon Sep 17 00:00:00 2001 From: Baba05206 Date: Fri, 7 Nov 2025 17:03:55 +0000 Subject: [PATCH 2/9] Refactor mean calculation and tests for clarity and functionality --- prep/mean.js | 24 +++++++++++++++++++++++- prep/mean.test.js | 14 ++++++++++++++ 2 files changed, 37 insertions(+), 1 deletion(-) diff --git a/prep/mean.js b/prep/mean.js index c378b7b73..2aec83fb7 100644 --- a/prep/mean.js +++ b/prep/mean.js @@ -23,7 +23,7 @@ console.log(items[1]); // 5.03 console.log(items[2]); // 7.99 console.log(items[3]); // 8.01 // Accessing elements using index numbers -*/ + const items = [4.6, 5.03, 7.99, 8.01]; function calculateMean(list) { // Calculate the sum of all elements in the array @@ -35,3 +35,25 @@ function calculateMean(list) { const mean = sum / list.length; return mean; } + */ +//const list = [4.6, 5.03, 7.99, 8.01]; +function calculateMean(list) { + //1. sum the elements of the array + let sum = 0; + for (let i = 0; i < list.length; i++) { + const arrayInValue = Number(list); + if (typeof list[i] === "number" && !isNaN(list[i])) { + sum += list[i]; + } + } + //2. determine the length of the array + let count = list.length; + //3. divide #1 by #2 + const mean = sum / count; + //4. return #3 + return mean; +} +console.log(calculateMean([4.6, 5.03, 7.99, 8.01])); +console.log(calculateMean([3, "50", 7])); + +//module.exports = calculateMean; diff --git a/prep/mean.test.js b/prep/mean.test.js index 22b24b55c..8b893a0b9 100644 --- a/prep/mean.test.js +++ b/prep/mean.test.js @@ -2,7 +2,19 @@ test("does something as described below", () => { // test implementation goes here }); + + */ +//mean.test.js +const mean = require("./mean"); // Import the mean function from mean.js +test("calculates the mean of a list of numbers", () => { + expect(mean([3, 50, 7])).toBe(20); // 20 is (3 + 50 + 7) / 3 + expect(mean([4.6, 5.03, 7.99, 8.01])).toBeCloseTo(6.4075); // 6.4075 is (4.6 + 5.03 + 7.99 + 8.01) / 4 + expect(mean([10, 20, 30, 40, 50])).toBe(30); // 30 is (10 + 20 + 30 + 40 + 50) / 5 + expect(mean([1, 2, 3, 4, 5, 6])).toBe(3.5); // 3.5 is (1 + 2 + 3 + 4 + 5 + 6) / 6 +}); +/* +The expect statement is used to create an assertion that checks if the output of the mean function matches the expected value. test("calculates the mean of a list of numbers", () => { const list = [3, 50, 7]; const currentOutput = calculateMean(list); @@ -10,3 +22,5 @@ test("calculates the mean of a list of numbers", () => { expect(currentOutput).toEqual(targetOutput); // 20 is (3 + 50 + 7) / 3 }); + +*/ From 3d4c4072900c18bbd170d1fa462ad408f75156dc Mon Sep 17 00:00:00 2001 From: Baba05206 Date: Tue, 18 Nov 2025 20:16:10 +0000 Subject: [PATCH 3/9] Update mean.js --- prep/mean.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/prep/mean.js b/prep/mean.js index 2aec83fb7..f30eafb97 100644 --- a/prep/mean.js +++ b/prep/mean.js @@ -36,6 +36,7 @@ function calculateMean(list) { return mean; } */ +/* //const list = [4.6, 5.03, 7.99, 8.01]; function calculateMean(list) { //1. sum the elements of the array @@ -57,3 +58,23 @@ console.log(calculateMean([4.6, 5.03, 7.99, 8.01])); console.log(calculateMean([3, "50", 7])); //module.exports = calculateMean; +*/ +function calculateMean(list) { + //1. sum the elements of the array + let sum = 0; + for (const item of list) { + const value = Number(item); + if (!isNaN(value)) { + sum += value; + } + } + + //2. determine the length of the array + let count = list.length; + //3. divide #1 by #2 + const mean = sum / count; + //4. return #3 + return mean; +} +console.log(calculateMean([4.6, 5.03, 7.99, 8.01])); +console.log(calculateMean([3, "50", 7])); From b235bd1192bbb1e8c6f541ff8c87696b568e2580 Mon Sep 17 00:00:00 2001 From: Baba05206 Date: Fri, 28 Nov 2025 04:42:47 +0000 Subject: [PATCH 4/9] Implement alarm functionality and update title in HTML --- Sprint-3/alarmclock/alarmclock.js | 39 ++++++++++++++++++++++++++++++- Sprint-3/alarmclock/index.html | 2 +- Sprint-3/package.json | 2 +- 3 files changed, 40 insertions(+), 3 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..4ebb06e25 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,41 @@ -function setAlarm() {} +let intervalId; + +function setAlarm() { + const input = document.getElementById("alarmSet"); + let time = Number(input.value); + + const heading = document.getElementById("timeRemaining"); + + clearInterval(intervalId); + + function format(num) { + if (num < 10) return "0" + num; + return num; + } + + heading.innerText = + "Time Remaining: " + + format(Math.floor(time / 60)) + + ":" + + format(time % 60); + + intervalId = setInterval(() => { + time--; + + if (time <= 0) { + heading.innerText = "Time Remaining: 00:00"; + clearInterval(intervalId); + playAlarm(); + return; + } + + heading.innerText = + "Time Remaining: " + + format(Math.floor(time / 60)) + + ":" + + format(time % 60); + }, 1000); +} // DO NOT EDIT BELOW HERE diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..ff2d3b453 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,7 +4,7 @@ - Title here + Alarm clock app
diff --git a/Sprint-3/package.json b/Sprint-3/package.json index 711a5390f..c58a56a6b 100644 --- a/Sprint-3/package.json +++ b/Sprint-3/package.json @@ -26,7 +26,7 @@ "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.6.3", "@testing-library/user-event": "^14.6.1", - "jest": "^30.0.4", + "jest": "^30.2.0", "jest-environment-jsdom": "^30.0.4" } } From a4fcc5411f45ddcb0702408a981cd77f3383942b Mon Sep 17 00:00:00 2001 From: Baba05206 Date: Fri, 28 Nov 2025 05:11:44 +0000 Subject: [PATCH 5/9] Remove unnecessary blank line in setAlarm function --- Sprint-3/alarmclock/alarmclock.js | 1 - 1 file changed, 1 deletion(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 4ebb06e25..f11f60f02 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -36,7 +36,6 @@ function setAlarm() { format(time % 60); }, 1000); } - // DO NOT EDIT BELOW HERE var audio = new Audio("alarmsound.mp3"); From 5aa6e97ca312d5e45ef5e1e41df87051231bdb66 Mon Sep 17 00:00:00 2001 From: Baba05206 Date: Sat, 29 Nov 2025 14:54:39 +0000 Subject: [PATCH 6/9] deleted prep --- prep/mean.js | 80 ----------------------------------------------- prep/mean.test.js | 26 --------------- prep/package.json | 16 ---------- 3 files changed, 122 deletions(-) delete mode 100644 prep/mean.js delete mode 100644 prep/mean.test.js delete mode 100644 prep/package.json diff --git a/prep/mean.js b/prep/mean.js deleted file mode 100644 index f30eafb97..000000000 --- a/prep/mean.js +++ /dev/null @@ -1,80 +0,0 @@ -/* -Let’s consider a list of prices in a bill: -4.6, 5.03, 7.99, 8.01 -instead of writing the like below -const price0 = 4.6; -const price1 = 5.03; -const price2 = 7.99; -const price3 = 8.01; -We can write it as an array literal -const items = [4.6, 5.03, 7.99, 8.01]; - -The Array object, as with arrays in other programming languages, enables storing a collection -of multiple items under a single variable name, and has members for performing common array operations. -Arrays can store items of any type & multiple pieces of information. - -In JavaScript, we can use [] notation to access specific elements in the array using index numbers. -The index numbers start from 0. - - -const items = [4.6, 5.03, 7.99, 8.01]; -console.log(items[0]); // 4.6 -console.log(items[1]); // 5.03 -console.log(items[2]); // 7.99 -console.log(items[3]); // 8.01 -// Accessing elements using index numbers - -const items = [4.6, 5.03, 7.99, 8.01]; -function calculateMean(list) { - // Calculate the sum of all elements in the array - const sum = list.reduce( - (accumulator, currentValue) => accumulator + currentValue, - 0 - ); - // Calculate the mean by dividing the sum by the number of elements - const mean = sum / list.length; - return mean; -} - */ -/* -//const list = [4.6, 5.03, 7.99, 8.01]; -function calculateMean(list) { - //1. sum the elements of the array - let sum = 0; - for (let i = 0; i < list.length; i++) { - const arrayInValue = Number(list); - if (typeof list[i] === "number" && !isNaN(list[i])) { - sum += list[i]; - } - } - //2. determine the length of the array - let count = list.length; - //3. divide #1 by #2 - const mean = sum / count; - //4. return #3 - return mean; -} -console.log(calculateMean([4.6, 5.03, 7.99, 8.01])); -console.log(calculateMean([3, "50", 7])); - -//module.exports = calculateMean; -*/ -function calculateMean(list) { - //1. sum the elements of the array - let sum = 0; - for (const item of list) { - const value = Number(item); - if (!isNaN(value)) { - sum += value; - } - } - - //2. determine the length of the array - let count = list.length; - //3. divide #1 by #2 - const mean = sum / count; - //4. return #3 - return mean; -} -console.log(calculateMean([4.6, 5.03, 7.99, 8.01])); -console.log(calculateMean([3, "50", 7])); diff --git a/prep/mean.test.js b/prep/mean.test.js deleted file mode 100644 index 8b893a0b9..000000000 --- a/prep/mean.test.js +++ /dev/null @@ -1,26 +0,0 @@ -/* -test("does something as described below", () => { - // test implementation goes here -}); - - -*/ -//mean.test.js -const mean = require("./mean"); // Import the mean function from mean.js -test("calculates the mean of a list of numbers", () => { - expect(mean([3, 50, 7])).toBe(20); // 20 is (3 + 50 + 7) / 3 - expect(mean([4.6, 5.03, 7.99, 8.01])).toBeCloseTo(6.4075); // 6.4075 is (4.6 + 5.03 + 7.99 + 8.01) / 4 - expect(mean([10, 20, 30, 40, 50])).toBe(30); // 30 is (10 + 20 + 30 + 40 + 50) / 5 - expect(mean([1, 2, 3, 4, 5, 6])).toBe(3.5); // 3.5 is (1 + 2 + 3 + 4 + 5 + 6) / 6 -}); -/* -The expect statement is used to create an assertion that checks if the output of the mean function matches the expected value. -test("calculates the mean of a list of numbers", () => { - const list = [3, 50, 7]; - const currentOutput = calculateMean(list); - const targetOutput = 20; - - expect(currentOutput).toEqual(targetOutput); // 20 is (3 + 50 + 7) / 3 -}); - -*/ diff --git a/prep/package.json b/prep/package.json deleted file mode 100644 index 663b964da..000000000 --- a/prep/package.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "name": "prep", - "version": "1.0.0", - "description": "", - "main": "index.js", - "scripts": { - "test": "jest" - }, - "keywords": [], - "author": "", - "license": "ISC", - "type": "commonjs", - "devDependencies": { - "jest": "^30.2.0" - } -} From 50a0653d6a584c642bdcf7b911c2c3c12ce3af37 Mon Sep 17 00:00:00 2001 From: Baba05206 Date: Sun, 7 Dec 2025 18:24:09 +0000 Subject: [PATCH 7/9] Updated code to reflected all 6 improvements recommended --- Sprint-3/alarmclock/alarmclock.js | 31 ++++++++++++++++++------------- 1 file changed, 18 insertions(+), 13 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index f11f60f02..a232d4de2 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,28 +1,33 @@ +// Constants for time conversion +const SECONDS_PER_MINUTE = 60; +const MILLISECONDS_PER_SECOND = 1000; + let intervalId; function setAlarm() { const input = document.getElementById("alarmSet"); - let time = Number(input.value); - const heading = document.getElementById("timeRemaining"); - clearInterval(intervalId); + let totalSeconds = Number(input.value); - function format(num) { - if (num < 10) return "0" + num; - return num; + // Input validation: check for invalid or non-positive numbers + if (isNaN(totalSeconds) || totalSeconds <= 0) { + heading.innerText = "Please enter a valid positive number of seconds"; + return; } + clearInterval(intervalId); + heading.innerText = "Time Remaining: " + - format(Math.floor(time / 60)) + + String(Math.floor(totalSeconds / SECONDS_PER_MINUTE)).padStart(2, "0") + ":" + - format(time % 60); + String(totalSeconds % SECONDS_PER_MINUTE).padStart(2, "0"); intervalId = setInterval(() => { - time--; + totalSeconds--; - if (time <= 0) { + if (totalSeconds <= 0) { heading.innerText = "Time Remaining: 00:00"; clearInterval(intervalId); playAlarm(); @@ -31,10 +36,10 @@ function setAlarm() { heading.innerText = "Time Remaining: " + - format(Math.floor(time / 60)) + + String(Math.floor(totalSeconds / SECONDS_PER_MINUTE)).padStart(2, "0") + ":" + - format(time % 60); - }, 1000); + String(totalSeconds % SECONDS_PER_MINUTE).padStart(2, "0"); + }, MILLISECONDS_PER_SECOND); } // DO NOT EDIT BELOW HERE From 9a76928f4aaa7eb906204482dd003580da0b795c Mon Sep 17 00:00:00 2001 From: Baba05206 Date: Thu, 11 Dec 2025 19:22:57 +0000 Subject: [PATCH 8/9] Refactor - Added formatTimeDisplay utility function to reduce code duplication --- Sprint-3/alarmclock/alarmclock.js | 32 ++++++++++++++++++++----------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index a232d4de2..3223958ba 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -4,6 +4,23 @@ const MILLISECONDS_PER_SECOND = 1000; let intervalId; +/** + * Formats time in seconds to MM:SS format + * @param {number} totalSeconds - The time in seconds to format + * @returns {string} Formatted time string in "Time Remaining: MM:SS" format + */ +function formatTimeDisplay(totalSeconds) { + const minutes = Math.floor(totalSeconds / SECONDS_PER_MINUTE); + const seconds = totalSeconds % SECONDS_PER_MINUTE; + + return ( + "Time Remaining: " + + String(minutes).padStart(2, "0") + + ":" + + String(seconds).padStart(2, "0") + ); +} + function setAlarm() { const input = document.getElementById("alarmSet"); const heading = document.getElementById("timeRemaining"); @@ -18,29 +35,22 @@ function setAlarm() { clearInterval(intervalId); - heading.innerText = - "Time Remaining: " + - String(Math.floor(totalSeconds / SECONDS_PER_MINUTE)).padStart(2, "0") + - ":" + - String(totalSeconds % SECONDS_PER_MINUTE).padStart(2, "0"); + heading.innerText = formatTimeDisplay(totalSeconds); intervalId = setInterval(() => { totalSeconds--; if (totalSeconds <= 0) { - heading.innerText = "Time Remaining: 00:00"; + heading.innerText = formatTimeDisplay(0); clearInterval(intervalId); playAlarm(); return; } - heading.innerText = - "Time Remaining: " + - String(Math.floor(totalSeconds / SECONDS_PER_MINUTE)).padStart(2, "0") + - ":" + - String(totalSeconds % SECONDS_PER_MINUTE).padStart(2, "0"); + heading.innerText = formatTimeDisplay(totalSeconds); }, MILLISECONDS_PER_SECOND); } + // DO NOT EDIT BELOW HERE var audio = new Audio("alarmsound.mp3"); From 6948ee06684f7ec68509a3e1d970cdaa2103ecdb Mon Sep 17 00:00:00 2001 From: Baba05206 Date: Sat, 13 Dec 2025 13:57:36 +0000 Subject: [PATCH 9/9] refactored code as per the 3 comments to improve accessibility, prevent invalid inputs and reset clock when new input is accepted --- Sprint-3/alarmclock/alarmclock.js | 37 ++++++++++++++++++++++++----- Sprint-3/alarmclock/index.html | 39 +++++++++++++++++++++++++------ Sprint-3/alarmclock/style.css | 32 ++++++++++++++++++++++++- 3 files changed, 94 insertions(+), 14 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 3223958ba..cf5e43935 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -6,8 +6,6 @@ let intervalId; /** * Formats time in seconds to MM:SS format - * @param {number} totalSeconds - The time in seconds to format - * @returns {string} Formatted time string in "Time Remaining: MM:SS" format */ function formatTimeDisplay(totalSeconds) { const minutes = Math.floor(totalSeconds / SECONDS_PER_MINUTE); @@ -24,15 +22,35 @@ function formatTimeDisplay(totalSeconds) { function setAlarm() { const input = document.getElementById("alarmSet"); const heading = document.getElementById("timeRemaining"); + const errorMsg = document.getElementById("alarmError"); - let totalSeconds = Number(input.value); + // Reset alarm sound + flashing background before new countdown + pauseAlarm(); - // Input validation: check for invalid or non-positive numbers - if (isNaN(totalSeconds) || totalSeconds <= 0) { - heading.innerText = "Please enter a valid positive number of seconds"; + let raw = input.value.trim(); + + // Clear previous error + errorMsg.textContent = ""; + + // STRONG VALIDATION: must be digits only + if (!/^\d+$/.test(raw)) { + heading.innerText = "Time Remaining: 00:00"; + errorMsg.textContent = + "Invalid input. Please enter a whole number of seconds (e.g., 10, 30, 120). Decimals and text are not allowed."; + return; + } + + let totalSeconds = Number(raw); + + // Prevent extremely large or zero values + if (totalSeconds === 0 || totalSeconds > 86400) { + heading.innerText = "Time Remaining: 00:00"; + errorMsg.textContent = + "Please enter a value between 1 and 86,400 seconds. Examples: 10, 45, 300."; return; } + // Reset any existing countdown clearInterval(intervalId); heading.innerText = formatTimeDisplay(totalSeconds); @@ -63,14 +81,21 @@ function setup() { document.getElementById("stop").addEventListener("click", () => { pauseAlarm(); }); + + // Allow Enter key to trigger alarm + document.getElementById("alarmSet").addEventListener("keyup", (e) => { + if (e.key === "Enter") setAlarm(); + }); } function playAlarm() { audio.play(); + document.body.classList.add("alarm-active"); } function pauseAlarm() { audio.pause(); + document.body.classList.remove("alarm-active"); } window.onload = setup; diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index ff2d3b453..6f0c4797a 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -6,15 +6,40 @@ Alarm clock app + -
-

Time Remaining: 00:00

- - +
+

+ Time Remaining: 00:00 +

+ + + + + + +

+ + + + +
- - -
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 0c72de38b..a8388f90c 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -2,8 +2,8 @@ position: fixed; top: 50%; left: 50%; - -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); + text-align: center; } #alarmSet { @@ -13,3 +13,33 @@ h1 { text-align: center; } + +/* Visible, helpful error message */ +.error-message { + color: #b00020; + font-size: 0.9rem; + margin-top: -10px; + margin-bottom: 20px; + min-height: 1.2rem; /* Prevent layout shift */ +} + +/* Accessible focus outline */ +button:focus, +input:focus { + outline: 3px solid #005fcc; + outline-offset: 3px; +} + +/* Flashing background when alarm is active */ +.alarm-active { + animation: flash 1s infinite alternate; +} + +@keyframes flash { + from { + background-color: #fff; + } + to { + background-color: #ffcccc; + } +}