Skip to content

Commit 4c79ffe

Browse files
committed
day 21
1 parent a037360 commit 4c79ffe

File tree

1 file changed

+1
-82
lines changed

1 file changed

+1
-82
lines changed

21_Day/21_day_dom.md

Lines changed: 1 addition & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -618,88 +618,7 @@ We can access all the key numbers of the keyboard using different event listener
618618
</html>
619619
```
620620

621-
```html
622-
<!DOCTYPE html>
623-
<html>
624-
<head>
625-
<title>Document Object Model:30 Days Of JavaScript</title>
626-
<link
627-
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500&display=swap"
628-
rel="stylesheet"
629-
/>
630-
<style>
631-
* {
632-
box-sizing: border-box;
633-
padding: 0;
634-
margin: 0;
635-
}
636-
637-
body {
638-
text-align: center;
639-
margin-top: 50px;
640-
font-family: 'Roboto', sans-serif;
641-
}
642-
643-
h1 {
644-
font-size: 48px;
645-
margin: 50px auto;
646-
background: #fbe324;
647-
width: 650px;
648-
padding: 5px;
649-
color: #444;
650-
font-weight: 300;
651-
}
652-
653-
input {
654-
width: 250px;
655-
height: 45px;
656-
text-indent: 10px;
657-
font-size: 18px;
658-
}
659-
660-
button {
661-
width: 150px;
662-
height: 45px;
663-
border: none;
664-
background: #fbe324;
665-
color: #444;
666-
border-radius: 3px;
667-
font-size: 18px;
668-
}
669-
670-
p {
671-
margin: 15px auto;
672-
background: #fbe324;
673-
width: 650px;
674-
padding: 5px;
675-
font-size: 28px;
676-
font-weight: 300;
677-
}
678-
</style>
679-
</head>
680-
681-
<body>
682-
<h1>Body Mass Index Calculator</h1>
683-
684-
<input type="text" id="mass" placeholder="Mass in Kilogram" />
685-
<input type="text" id="height" placeholder="Height in meters" />
686-
<button>Calculate BMI</button>
687-
688-
<script>
689-
const mass = document.querySelector('#mass')
690-
const height = document.querySelector('#height')
691-
const button = document.querySelector('button')
692-
const bmiResult = document.createElement('p')
693-
let bmi
694-
button.addEventListener('click', () => {
695-
bmi = mass.value / height.value ** 2
696-
bmiResult.textContent = bmi.toFixed(2)
697-
document.body.appendChild(bmiResult)
698-
})
699-
</script>
700-
</body>
701-
</html>
702-
```
621+
Now, we have covered most DOM topics, tomorrow I will add some contents and I will do proof reading.
703622

704623
🌕 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.
705624

0 commit comments

Comments
 (0)