diff --git a/contact.html b/contact.html index be08787..1d56f1f 100644 --- a/contact.html +++ b/contact.html @@ -8,5 +8,6 @@

contact us

+

which your address?

diff --git a/index.html b/index.html index 4eee81e..b9db793 100644 --- a/index.html +++ b/index.html @@ -8,5 +8,6 @@

Hi Abebe

+

nice to met you! is everyting fine?

diff --git a/index2.html b/index2.html new file mode 100644 index 0000000..6430db8 --- /dev/null +++ b/index2.html @@ -0,0 +1,41 @@ + + + + + + My-Counter++ + + + +
+

Counter

+ +
+
+ + + +
+
+

Temprature converter

+
+ + +
+ + +
+ +

result

+
+ + + + + + + diff --git a/script2.js b/script2.js new file mode 100644 index 0000000..dc56d96 --- /dev/null +++ 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 new file mode 100644 index 0000000..ad1d863 --- /dev/null +++ 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; +} */