Did 4 tasks

JavaScript/Tasks/1-angular.mjs

@@ -14,13 +14,9 @@ const electronics = [
 
 const items = signal(electronics);
 
-const total = (items) => {
-  let result = 0;
-  for (const item of items) {
-    result += item.price;
-  }
-  return result;
-};
+const total = computed(() => 
+  items().reduce((sum, item) => sum + item.price, 0)
+);
 
-console.log(`Total: ${total(items())}`);
-console.log(computed);
+console.log(`Total: ${total()}`);
+console.log(computed);

JavaScript/Tasks/2-preact.js

@@ -14,13 +14,9 @@ const electronics = [
 
 const items = signal(electronics);
 
-const total = (items) => {
-  let result = 0;
-  for (const item of items) {
-    result += item.price;
-  }
-  return result;
-};
+const total = computed(() =>
+  items.value.reduce((sum, item) => sum + item.price, 0)
+);
 
-console.log(`Total: ${total(items.value)}`);
+console.log(`Total: ${total.value}`);
 console.log(computed);

JavaScript/Tasks/3-effect.js

@@ -15,7 +15,36 @@ const electronics = [
 
 const total = signal(0);
 
+const items = signal([...electronics]);
+
 effect(() => {
-  console.log(electronics);
-  console.log({ total });
+  let sum = 0;
+  for (const item of items.value) {
+    sum += item.price;
+  }
+
+  total.value = sum;
+
+  console.log('Current state');
+  console.log('Items:', items.value);
+  console.log('Total:', total.value);
 });
+
+console.log('\nInitial state:');
+
+setTimeout(() => {
+  console.log('\nAdding a new item');
+  items.value = [...items.value, { name: 'Mouse', price: 50 }];
+}, 1000);
+
+setTimeout(() => {
+  console.log('\nRemoving an item');
+  items.value = items.value.filter(item => item.name !== 'Keyboard');
+}, 2000);
+
+setTimeout(() => {
+  console.log('\nUpdating item price');
+  items.value = items.value.map(item => 
+    item.name === 'Laptop' ? {...item, price: 1600} : item
+  );
+}, 3000);

JavaScript/Tasks/4-dispose.js

@@ -18,9 +18,53 @@ const electronics = [
 ];
 
 const total = signal(0);
+const items = signal([...electronics]);
 
-effect(() => {
-  console.log(electronics);
-  console.log({ total });
-  console.log({ PURCHASE_LIMIT });
+let disposeEffect = null;
+
+function addRandomItem() {
+  const randomItems = [
+    { name: 'Mouse', price: 50 },
+    { name: 'Monitor', price: 200 },
+    { name: 'Headphones', price: 80 },
+    { name: 'USB Cable', price: 15 }
+  ];
+
+  const randomItem = randomItems[Math.floor(Math.random() * randomItems.length)];
+  items.value = [...items.value, randomItem];
+  return randomItem;
+}
+
+disposeEffect = effect(() => {
+  total.value = items.value.reduce((sum, item) => sum + item.price, 0);
+
+  if (total.value <= PURCHASE_LIMIT) {
+    console.log('Current purchase');
+    console.log('Items:', items.value.map(i => `${i.name}: $${i.price}`).join(', '));
+    console.log(`Total: $${total.value} (Limit: $${PURCHASE_LIMIT})`);
+  }
 });
+
+const interval = setInterval(() => {
+  if (total.value > PURCHASE_LIMIT * 2) {
+    clearInterval(interval);
+    if (disposeEffect) disposeEffect();
+    console.log(`Final total: $${total.value} (Process stopped)`);
+    return;
+  }
+
+  const newItem = addRandomItem();
+  console.log(`Added: ${newItem.name} for $${newItem.price}`);
+
+  if (total.value > PURCHASE_LIMIT && disposeEffect) {
+    console.log(`\n Limit exceeded ($${total.value} > $${PURCHASE_LIMIT}), stopping output\n`);
+    disposeEffect();
+    disposeEffect = null;
+  }
+}, 1000);
+
+setTimeout(() => {
+  if (interval) clearInterval(interval);
+  if (disposeEffect) disposeEffect();
+  console.log(`Final total: $${total.value} (Timeout reached)`);
+}, 10000);

package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@angular/core": "^20.0.3",
+    "@preact/signals-core": "^1.10.0"
+  }
+}