2020WebCrashCourse/index.html at master · GVSU-Computing-Club/2020WebCrashCourse · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>

    <head>
        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
        <!-- Header info goes here-->
        <title> My really really cool blog </title>
        <link rel="stylesheet" href="main.css">
        <script src="main.js">
        </script>
    </head>

    <body>
        <!-- The things that the user sees goes here-->
        <h1 id="logo">Matthew Shan is the man with the plan</h1>
        <button onclick="deletePosts()">I HATE MY BLOG</button>
        <button onclick="potatofy()">Potato</button>
        <hr/>
        <div class="blogPost">
            <h2> A cool blog post </h2>
            <p style="white-space: pre;">
                Matthew shan is really cool. Justin Keller could be cooler.
                Matthew shan is really cool. Justin Keller could be cooler.
                Matthew shan is really cool. Justin Keller could be cooler.
                Matthew shan is really cool. Justin Keller could be cooler.
                Matthew shan is really cool. Justin Keller could be cooler.
                Matthew shan is really cool. Justin Keller could be cooler.
                Matthew shan is really cool. Justin Keller could be cooler.
                Matthew shan is really cool. Justin Keller could be cooler.
            </p>
        </div>

        <div class="blogPost">
            <h2>Another cool blog post</h2>
            <img src="me.jpg" alt="This cool dude"></img>
            <p>
                This post is very very important. <a href="https://github.com/matthewshan/" target="_blank"> CLICKER HERE. NOT CLICKBATE </a>
            </p>
        </div>

        <div class="blogPost">
            <h2>Potato</h2>
            <img
                id="potato"
                src="https://upload.wikimedia.org/wikipedia/commons/9/93/BakedPotatoWithButter.jpg"
                alt="This is a potato"></img>
        </div>

    </body>

    <script>
        console.log("Hello World");

        {
            var headers = document.getElementsByTagName("h2");
            console.log(headers);
        }
        console.log(headers);


        {
            let blogPosts = document.getElementsByClassName("blogPost");
            console.log(blogPosts);
        }
        // console.log(blogPosts);

        const potatoImg = document.getElementById("potato");
        console.log(potato);
    </script>

</html>


<!-- Handy for later: https://devhints.io/css-->
<!-- Check this place out for additional reference: https://www.w3schools.com/default.asp-->