Remembering code

<!DOCTYPE html>
<html>

<head>

<title>Javascript</title>

<style>
#p100 {
padding-left:1000px;
}
</style>

<style>
#div100 {
width:70px;
height:70px;
color:white;
text-align:center;
background-color:#1947D1;
border:10px ridge #5E7EDF;
}
</style>

<style>
hr {
height:10px;
background-color:green;
}
</style>

<script>
function myFunction() {
document.getElementById("paragraph").innerHTML = "You changed the paragraph Felix!";
}
</script>


<script>
function myFunction2() {
document.getElementById("paragraph2").innerHTML = "You changed the paragraph Felix!";
}
</script>

<style>
#h1css {
color: #FF0000;
}
</style>

<script>
function myFunction3() {
document.getElementById("paragraph3").innerHTML = "The text has appeared!"
}
</script>

<script>
function myFunction4() {
document.getElementById("paragraph4").style.color = "red";
}
</script>


</head>


<body>

<h1 id="h1css">Javascript</h1>
<hr>
<h1>Example 1</h1>
<p id="paragraph">Change this paragraph Felix!</p>

<button type="button" onclick="myFunction()">Click me!</button>
<hr>
<h1>Example 2</h1>
<p id="paragraph2">Change this paragraph Felix!</p>

<button type="button"
onclick="myFunction2()">Click me!</button>
<hr>
<h1>Example 3</h1>
<p id="paragraph6">Change this paragraph Felix!</p>

<button onclick="myFunction5()">Click me!</button>


<hr>
<h1>Other things</h1>
<p>After you've clicked the button it should appear another paragraph right underneath it.</p>

<button type="button" onclick="myFunction3()">Click me!</button>

<p id="paragraph3"></p>
<hr>
<h1>Other things 2</h1>
<p id="paragraph4">After clicking the button this text should be red.</p>

<button type="button" onclick="myFunction4()">Click me!</button>
<hr>

<script src="javascript.js"></script>

<h1>Very usefull</h1>
<p>Cool thing after you've clicked.</p>

<button type="button" onclick="document.write(11)">Click me!</button>
<hr>

<p id="weed123"></p>

<script>
var weed = 100;
var smoke = 100;
var together = weed + " hola como estas?";
document.getElementById("weed123").innerHTML = together;
</script>

<p id="demo100"></p>

<script>
document.getElementById("demo100").innerHTML = 10.50;
</script>

<p id="demo200"></p>

<script>
document.getElementById("demo200").innerHTML = 'John Doe';
</script>

<p id="demo300"></p>

<script>
var x;
x = 6;
document.getElementById("demo300").innerHTML = x;
</script>

<hr>

<center>
<pre>

<div id="div100"><h1>3D</h1></div>
</pre>
</center>

<p id="p100">LOL</p>

</body>

</html>