web-330/index.html at main · JojerDojer/web-330 · 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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!--
============================================
; Title: index.html
; Author: John Davidson
; Data: 05/28/2023
; Description: The landing page for WEB 330 - Enterprise JavaScript II.
============================================
-->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">

    <!-- The title of the document. -->
    <title>WEB 330 - Enterprise JavaScript II</title>

    <!-- The links to the CSS files. -->
    <link rel="stylesheet" type="text/css" href="theme.css"/>
    <link rel="stylesheet" type="text/css" href="site.css"/>

    <!-- The links containing the font family styling. -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;700&display=swap">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Link to the JavaScript code for this page. -->
    <script src="theme.js"></script>
  </head>
  <body class="light-theme">

    <!-- Creates an icon that changes the landing page from light to dark mode. -->
    <i onclick="toggleMode(this)" id="icon-mode" class="fa fa-toggle-off pull-right
    " style="font-size: 28px;"><span id="icon-text"></span></i><br>

    <div id="container">
      <h1 class="app-header">John Davidson's Landing Page</h1>
      <h2>WEB 330 Enterprise JavaScript II</h2>

      <hr>

      <!-- The listing of weekly assignments created during the WEB 330 course. -->
      <h3>Weekly Assignments</h3>
      <ul>
        <li><a href="week-2/davidson-palindrome.html">Assignment 2.2</a></li>
        <li><a href="week-3/davidson-restaurant.html">Assignment 3.2</a></li>
        <li><a href="week-4/davidson-calorie.html">Assignment 4.2</a></li>
        <li><a href="week-5/davidson-bobs-auto-repair.html">Assignment 5.2</a></li>
        <li><a href="week-6/davidson-future-value.html">Assignment 6.2</a></li>
        <li><a href="week-7/davidson-whatabook1.html">Assignment 7.2</a></li>
        <li><a href="week-8/davidson-whatabook2.html">Assignment 8.2</a></li>
        <li><a href="">Assignment 9.2</a></li>
      </ul>

      <!-- The section listing links to projects. -->
      <h3>Projects</h3>
      <ul>
        <li><a href="">Personal Portfolio</a></li>
        <li><a href="https://jojerdojer.github.io/web-231/">Web 231's Landing page</a></li>
      </ul>

      <!-- The section containing a list of links to important pages. -->
      <h4>Important Links</h4>
      <ul>
        <li><a href="https://github.com/buwebdev/web-330">WEB 330's GitHub Repository</a></li>
        <li><a href="https://bruinconnect.bellevue.edu/">BRUIN Connect</a></li>
        <li><a href="https://validator.w3.org/">W3C HTML Validator</a></li>
        <li><a href="http://jigsaw.w3.org/css-validator/">W3C CSS Validator</a></li>
        <li><a href="https://www.w3schools.com/html/">HTML Tutorial</a></li>
        <li><a href="https://www.w3schools.com/js/js_best_practices.asp">JavaScript Best Practices</a></li>
      </ul>


    </div>
    <script>
        /**
         * Set the default theme to light if one has not been set in the browsers localStorage
         */
        setDefaultTheme();

        /**
         * Function to switch the users selected website theme
         * @param x (this instance)
         */
        function toggleMode(x)
        {
            let colorTheme = document.body.classList; // Captures the body's CSS class.
            let iconMode = x.classList; // get the current classes assigned to the triggered button

            /**
             * If the current body class is set to the light-theme, update the user's preference to the dark-theme in the browsers
             * local storage.
             */
            if (colorTheme.value === "light-theme")
            {
                localStorage.clear();
                localStorage.setItem("mode", "dark-theme");
                localStorage.setItem("iconMode", "fa-toggle-on");
                localStorage.setItem("iconText", "Dark Mode");
            }
            /**
             * If the current body class is set to the dark-theme, update the user's preference to the light-theme in the browsers
             * local storage.
             */
            else
            {
                localStorage.clear();
                localStorage.setItem("mode", "light-theme");
                localStorage.setItem("iconMode", "fa-toggle-off");
                localStorage.setItem("iconText", "Light Mode");
            }

            /**
             * Apply the updated selection to the HTML page elements
             */
            colorTheme.value = localStorage.getItem("mode");
            iconMode.value = `fa ${localStorage.getItem("iconMode")} pull-right`;
            document.getElementById("icon-text").innerHTML = localStorage.getItem("iconText");
        }

        /**
         * Function to clear the browsers localStorage and set the default theme to light-theme.
         * This function is for demonstration purposes only and does not need to be included in any of your solutions.
         */
        function clearLocalStorage() {
            localStorage.clear();
            document.body.classList.value = "light-theme";
            document.getElementById("icon-text").innerHTML = "Light Mode";
            document.getElementById("icon-mode").classList.value = "fa fa-toggle-off pull-right";
        }
    </script>
  </body>
</html>