pull/63/head
Asabeneh 5 years ago
parent a037360491
commit 4c79ffe59c

@ -618,88 +618,7 @@ We can access all the key numbers of the keyboard using different event listener
</html>
```
```html
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model:30 Days Of JavaScript</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500&display=swap"
rel="stylesheet"
/>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
text-align: center;
margin-top: 50px;
font-family: 'Roboto', sans-serif;
}
h1 {
font-size: 48px;
margin: 50px auto;
background: #fbe324;
width: 650px;
padding: 5px;
color: #444;
font-weight: 300;
}
input {
width: 250px;
height: 45px;
text-indent: 10px;
font-size: 18px;
}
button {
width: 150px;
height: 45px;
border: none;
background: #fbe324;
color: #444;
border-radius: 3px;
font-size: 18px;
}
p {
margin: 15px auto;
background: #fbe324;
width: 650px;
padding: 5px;
font-size: 28px;
font-weight: 300;
}
</style>
</head>
<body>
<h1>Body Mass Index Calculator</h1>
<input type="text" id="mass" placeholder="Mass in Kilogram" />
<input type="text" id="height" placeholder="Height in meters" />
<button>Calculate BMI</button>
<script>
const mass = document.querySelector('#mass')
const height = document.querySelector('#height')
const button = document.querySelector('button')
const bmiResult = document.createElement('p')
let bmi
button.addEventListener('click', () => {
bmi = mass.value / height.value ** 2
bmiResult.textContent = bmi.toFixed(2)
document.body.appendChild(bmiResult)
})
</script>
</body>
</html>
```
Now, we have covered most DOM topics, tomorrow I will add some contents and I will do proof reading.
🌕 Now, you are with super power, you have completed the most important part. You learned DOM and now you knew how to build a house, keep building houses. Now do some exercises for your brain and for your muscle.

Loading…
Cancel
Save