evangadi · HarunSuleiman · Jul 11, 2025 · Aug 16, 2025
diff --git a/contact.html b/contact.html
@@ -8,5 +8,6 @@
   </head>
   <body>
     <h1>contact us</h1>
+    <p>which your address?</p>
   </body>
 </html>
diff --git a/index.html b/index.html
@@ -8,5 +8,6 @@
   </head>
   <body>
     <h1>Hi Abebe</h1>
+    <p>nice to met you! is everyting fine?</p>
   </body>
 </html>
diff --git a/index2.html b/index2.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My-Counter++</title>
+    <link rel="stylesheet" href="./style2.css" />
+  </head>
+  <body>
+    <div class="counter">
+      <h1 id="h11">Counter</h1>
+      <label for="" id="countlable">0</label>
+    </div>
+    <div id="btnContainer">
+      <button id="dbutton" class="button">decreas</button>
+      <button id="rbutton" class="button">reset</button>
+      <button id="ibutton" class="button">increase</button>
+    </div>
+    <form>
+      <h1>Temprature converter</h1>
+      <input type="number" id="textbox" value="0" /><br />
+      <input type="radio" id="tofahrenhite" name="unit" />
+
+      <label for="tofahrenhite">celcius=> fehraneit</label><br />
+      <input type="radio" id="tocelcius" name="unit" />
+
+      <label for="tocelcius"> fehraneit => celcius</label><br />
+      <button type="button" onclick="convert()">submit</button>
+      <p id="result">result</p>
+    </form>
+    <!-- <h1><center>Eventlistner</center></h1>
+    <div id="mybox">
+      <p id="p0">cli1ck me!</p>
+      <p id="p1">&#128513;</p>
+    </div> -->
+
+    </div>
+
+    <script src="./script2.js"></script>
+  </body>
+</html>
diff --git a/script2.js b/script2.js
@@ -0,0 +1,89 @@
+const decrease = document.getElementById("dbutton");
+const reset = document.getElementById("rbutton");
+const increase = document.getElementById("ibutton");
+const countleble = document.getElementById("countlable");
+
+let count = 0;
+ibutton.onclick = function () {
+  count++;
+  countleble.textContent = count;
+};
+
+dbutton.onclick = function () {
+  count--;
+  countleble.textContent = count;
+};
+rbutton.onclick = function () {
+  count = 0;
+  countleble.textContent = count;
+};
+// ternary operator inetead of if()&else()
+let purchase = 100;
+let discount = purchase >= 100 ? 10 : 0;
+console.log(`your price is  $${purchase - purchase * (discount / 100)}`);
+//Temprature converter
+const textbox = document.getElementById("textbox");
+const tofahrenhite = document.getElementById("tofahrenhite");
+const tocelcius = document.getElementById("tocelcius");
+const result = document.getElementById("result");
+// let temp;
+function convert() {
+  if (tofahrenhite.checked) {
+    temp = Number(textbox.value);
+    temp = temp * (9 / 5) + 32;
+    result.textContent = temp + "°F";
+  } else if (tocelcius.checked) {
+    temp = Number(textbox.value);
+    temp = (temp - 32) * (5 / 9);
+    result.textContent = temp + "°c";
+  } else {
+    result.textContent = "select a unit";
+  }
+}
+// sorting//
+let Numbers = [10, 7, 9, 8, 1, 2, 6, 4, 3, 5];
+Numbers.sort((a, b) => a - b);
+console.log(Numbers);
+// under neasted array//
+const people = [
+  { name: "abebe", age: 20, gpa: 3 },
+  { name: "alemu", age: 30, gpa: 3.5 },
+  { name: "aster", age: 35, gpa: 3.4 },
+  { name: "almaze", age: 27, gpa: 3.8 },
+];
+people.sort((a, b) => b.gpa - a.gpa);
+console.log(people);
+const date = new Date();
+
+console.log(date);
+
+function startTimer() {
+  setTimeout(() => window.alert("Hello"), 1000);
+}
+// ADDING EVENT LISTNERS
+const mybox = document.getElementById("mybox");
+mybox.addEventListener("click", (event) => {
+  event.target.style.backgroundColor = "red";
+  event.target.textContent = "Leave it! ";
+});
+mybox.addEventListener("mouseover", (event) => {
+  event.target.style.backgroundColor = "pink";
+  event.target.textContent = "Click! ";
+});
+mybox.addEventListener("mouseout", (event) => {
+  event.target.style.backgroundColor = "green";
+  event.target.textContent = "Hover me! ";
+});
+/* Callback function */
+
+function orderpiza(callback) {
+  console.log("order pizza");
+  setTimeout(() => {
+    console.log("your pizza is ready");
+  }, 2000);
+}
+function pizzaready(pizza) {
+  console.log(`Eat your ${pizza}`);
+}
+orderpiza();
+console.log("Call a friend");
diff --git a/style2.css b/style2.css
@@ -0,0 +1,105 @@
+#countlable {
+  display: block;
+  text-align: center;
+  font-size: 10em;
+}
+#btnContainer {
+  text-align: center;
+}
+
+.button {
+  padding: 10px 20px;
+  font-size: 2em;
+  color: white;
+  background-color: rgb(164, 164, 231);
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.1s;
+}
+
+.button:hover {
+  background-color: rgb(105, 105, 192);
+}
+body {
+  background-color: burlywood;
+}
+form {
+  background-color: rgb(141, 73, 73);
+  text-align: center;
+  margin: auto;
+  max-width: 500px;
+  border-radius: 10px;
+}
+#textbox {
+  text-align: center;
+  width: 50%;
+  font-size: 2em;
+  border: 2px solid;
+  border-color: rgb(5, 119, 57);
+  border-radius: 4px;
+  margin-bottom: 15px;
+}
+
+label {
+  font-size: 1.5em;
+  font-weight: bold;
+}
+button {
+  margin-top: 14px;
+  background-color: rgb(39, 24, 78);
+  color: white;
+  font-size: 1.5em;
+  border: none;
+  padding: 7px 15px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+button:hover {
+  background-color: red;
+}
+#result {
+  font-size: 1.75em;
+  font-weight: bold;
+  padding-bottom: 10px;
+}
+#btnContainer {
+  text-align: center;
+}
+.counter {
+  text-align: center;
+}
+#countlable {
+  font-size: 4em;
+}
+#mybox {
+  width: 100px;
+  height: 100px;
+  background-color: gray;
+  border-radius: 10px;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+}
+#p0 {
+  font-size: 20px;
+  text-align: center;
+  margin-top: 20px;
+}
+#p1 {
+  text-align: center;
+  padding-bottom: 20px;
+  font-size: larger;
+}
+/*for sliding*/
+/* .slides img {
+  width: 100%;
+  height: 100%;
+  display: none;
+}
+.slider {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  margin: auto;
+} */
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,5 +8,6 @@ @@
       </head>
       <body>
         <h1>contact us</h1>
+        <p>which your address?</p>
       </body>
     </html>