Skip to content

Commit

Permalink
dark mode done
Browse files Browse the repository at this point in the history
  • Loading branch information
@adrianogtl
adrianogtl committed Nov 7, 2023
1 parent 6e28fe0 commit 26dffe5
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 131 deletions.
189 changes: 76 additions & 113 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>
<body>
<body class="light-mode">
<!-- NAVBAR -->
<nav id="navbar">
<button id="darkmode_btn">
<nav id="navbar" class="light-mode">
<button id="darkmode-btn" title="Change to dark mode">
<span class="material-symbols-outlined">
dark_mode
</span>
Expand All @@ -44,10 +44,10 @@
<header>Comments</header>
<p>Comments are useful for documentation in a Go file and are ignored by the compiler. There are two types of comments:</p>
<ul>
<li>A single-lined comment is preceded by a double forward slash, <code>//</code>, and ends at the end of the line.</li>
<li>A multi-lined comment begins with <code>/*</code> followed by one or more lines of comments and ends with <code>*/</code></li>
<li>A single-lined comment is preceded by a double forward slash, <code >//</code>, and ends at the end of the line.</li>
<li>A multi-lined comment begins with <code >/*</code> followed by one or more lines of comments and ends with <code >*/</code></li>
</ul>
<pre>
<pre >
// one line comment
/*
this comment
Expand All @@ -63,23 +63,21 @@
been defined. There are four ways to declare and assign a Go variable:</p>
<p>Use the <code>var</code> keyword followed by a name and its data type. This variable can be assigned later in the program. For
example:</p>
<pre>
<pre >
var fruit string
fruit = "apple"
</pre>
<p>Use the <code>var</code> keyword followed by a name, data type, <code>=</code> and value.</p>
<pre>
<p>Use the <code >var</code> keyword followed by a name, data type, <code >=</code> and value.</p>
<pre >
var fruit string = "apple"
</pre>
<p>Use the <code>var</code> keyword, followed by a name, <code>=</code> and value. Ignore the data type and let the compiler infer its type.</p>
<pre>
<p>Use the <code >var</code> keyword, followed by a name, <code >=</code> and value. Ignore the data type and let the compiler infer its type.</p>
<pre >
var fruit = "apple"
</pre>
<p>Skip the <code>var</code> keyword, define a name followed by <code>:=</code> and value and let the compiler infer its type.</p>
<pre>
<code>
<p>Skip the <code >var</code> keyword, define a name followed by <code >:=</code> and value and let the compiler infer its type.</p>
<pre >
fruit := "apple"
</code>
</pre>
</section>
<!-- DATA TYPES -->
Expand All @@ -96,16 +94,14 @@
<!-- STRINGS -->
<section id="strings" class="main-section">
<header>Strings</header>
<p>A Go <code>string</code> is a data type that stores text or a sequence of characters in any length in double-quoted form. To
concatenate two strings, use the <code>+</code> operator.</p>
<pre>
<code>
var firstName string = "Abe"
var lastName string = "Lincoln"

// prints "Abe Lincoln"
fmt.Println(firstName + " " + lastName)
</code>
<p>A Go <code >string</code> is a data type that stores text or a sequence of characters in any length in double-quoted form. To
concatenate two strings, use the <code >+</code> operator.</p>
<pre >
var firstName string = "Abe"
var lastName string = "Lincoln"

// prints "Abe Lincoln"
fmt.Println(firstName + " " + lastName)
</pre>
</section>
<!-- OPERATORS -->
Expand All @@ -114,21 +110,19 @@
<h2>Comparison Operators</h2>
<p>Go supports the standard comparison operators that compare two values and return a boolean. These include:</p>
<ul>
<li><code>==</code> equivalence operator</li>
<li><code>!=</code> not equal</li>
<li><code>&lt</code> less than</li>
<li><code>&gt</code> greater than</li>
<li><code>&lt=</code> less than or equal</li>
<li><code>&gt=</code> greater than or equal</li>
<li><code >==</code> equivalence operator</li>
<li><code >!=</code> not equal</li>
<li><code >&lt</code> less than</li>
<li><code >&gt</code> greater than</li>
<li><code >&lt=</code> less than or equal</li>
<li><code >&gt=</code> greater than or equal</li>
</ul>
<pre>
<code>
same := 3 == 3
// evaluates to true
notsame := "ABC" != "abc"
// evaluates to true
lessthan := 5 <= -5 // evaluates to false
</code>
<pre >
same := 3 == 3
// evaluates to true
notsame := "ABC" != "abc"
// evaluates to true
lessthan := 5 <= -5 // evaluates to false
</pre>
<h2>Logical Operators</h2>
<p>In addition to comparison operators, Go also supports logical operators which evaluate boolean values and return a
Expand All @@ -138,80 +132,69 @@ <h2>Logical Operators</h2>
<li><code>||</code> is the OR operator that returns <code>true</code> if one of the booleans is <code>true</code></li>
<li><code>!</code> is the NOT operator that returns the opposite of a boolean value</li>
</ul>
<pre>
<code>
answer := true && false
// returns false
answer = true || false
// returns true
answer = !false
// returns true
</code>
<pre >
answer := true && false
// returns false
answer = true || false
// returns true
answer = !false
// returns true
</pre>
</section>
<!-- STATEMENTS -->
<section id="statements" class="main-section">
<header>Statements</header>
<h2>If Statement</h2>
<p>A Go <code>if</code> statement evaluates a condition and executes a statement block enclosed in curly braces <code>{..}</code> if the evaluation
returns <code>true</code>. The condition may be optionally enclosed inside a pair of parentheses <code>(...)</code>.</p>
<pre>
<code>
if (healthy) {
<p>A Go <code >if</code> statement evaluates a condition and executes a statement block enclosed in curly braces <code >{..}</code> if the evaluation
returns <code >true</code>. The condition may be optionally enclosed inside a pair of parentheses <code >(...)</code>.</p>
<pre >
if (healthy) {
fmt.Println("Work.")
}
if sick {
}
if sick {
fmt.Println("Stay home.")
}
</code>
}
</pre>
<h2>Else Statement</h2>
<p>A Go <code>else</code> statement can succeed an <code>if</code> or <code>if else-if</code> statement block and its code executed if the conditions in the
preceding <code>if</code> or <code>if else-if</code> statements evaluate to <code>false</code>.</p>
<pre>
<code>
sick := false
if sick {
sick := false
if sick {
fmt.Println("Call the doctor.")
} else {
} else {
fmt.Println("Enjoy your day.")
}
</code>
}
</pre>
<h2>Else If Statement</h2>
<p>The Go <code>else if</code> statement provides an additional condition to evaluate besides the first <code>if</code> conditional. It can only
appear after the <code>if</code> statement and before an <code>else</code> statement if it exists. For example:</p>
<pre>
<code>
if (temperature &lt 60) {
fmt.Println("Put on a jacket.")
} else if (temperature>= 60 && temperature &lt 75) {
fmt.Println("Put on a light sweater.")
} else {
fmt.Println("Wear summer clothes.")
}
</code>
if (temperature &lt 60) {
fmt.Println("Put on a jacket.")
} else if (temperature>= 60 && temperature &lt 75) {
fmt.Println("Put on a light sweater.")
} else {
fmt.Println("Wear summer clothes.")
}
</pre>
<h2>Switch Statement</h2>
<p>The Go <code>switch</code> statement can be used as an alternative to a set of <code>if</code> followed by <code>else if</code> statements. The <code>switch</code>
<p>The Go <code >switch</code> statement can be used as an alternative to a set of <code>if</code> followed by <code>else if</code> statements. The <code>switch</code>
statement compares the expression inside a condition with a set of values encapsulated in <code>case</code>s. The code inside a
matched <code>case</code> value is executed and the switch block terminates. A <code>default</code> case without a value can be appended to the
last <code>case</code> and its code executed if no prior match is found.</p>
<pre>
<code>
day := "Tuesday"
switch day {
case "Monday":
fmt.Println("Monday is magnificent.")
case "Tuesday":
fmt.Println("Tuesday is terrific.")
case "Wednesday":
fmt.Println("Wednesday is wacky.")
default:
fmt.Println("We survived.")
}

</code>
day := "Tuesday"
switch day {
case "Monday":
fmt.Println("Monday is magnificent.")
case "Tuesday":
fmt.Println("Tuesday is terrific.")
case "Wednesday":
fmt.Println("Wednesday is wacky.")
default:
fmt.Println("We survived.")
}
</pre>
</section>
<!-- FUNCTIONS -->
Expand All @@ -220,18 +203,16 @@ <h2>Switch Statement</h2>
<p>When a Go function parameter is passed by value, it means only a copy of the value is accessed and manipulated inside
the function. The original value of the variable that is passed as an argument to the function remains intact.</p>
<pre>
<code>
func makeMeOlder(age int) {
func makeMeOlder(age int) {
age += 5
}
func main() {
}

func main() {
myAge := 10
makeMeOlder(myAge)
fmt.Println(myAge)
// myAge is still 10
}
</code>
}
</pre>
</section>
<!-- REFERENCE -->
Expand All @@ -240,24 +221,6 @@ <h2>Switch Statement</h2>
<p>All the documentation in this page is from <a href="https://www.codecademy.com/learn/learn-go/modules/learn-go-introduction/cheatsheet" target="_blank">Code Academy</a>.</p>
</section>
</main>
<script>
document.addEventListener("DOMContentLoaded", function () {

const darkmodeBtn = document.getElementsByClassName('material-symbols-outlined')[0]
const whiteEl = ["document.getElementsByName('pre')", "document.getElementsByName('code')", "document.getElementsByTagName('body')[0]"]

darkmodeBtn.addEventListener('click', function () {
changeTheme();
});

function changeTheme() {
darkmodeBtn.innerHTML = 'light_mode'
whiteEl.style.cssText = `
color: #fff;
background-color: #000;
`
}
})
</script>
<script src="script.js"></script>
</body>
</html>
56 changes: 56 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
const symbolBtn = document.querySelector('.material-symbols-outlined')
const darkmodeBtn = document.querySelector('#darkmode-btn')
const body = document.body
const nav = document.getElementById('navbar')
const link = document.getElementsByTagName('a')

darkmodeBtn.addEventListener('click', () => {
if (body.classList.contains('light-mode')) {
changeToDark()
} else {
changeToLight()
}
})

function changeToDark(){
body.classList.remove('light-mode')
body.classList.add('dark-mode')

nav.style.color = 'white'
nav.style.backgroundColor = 'black'
nav.style.borderColor = 'white'

for (let i = 0, len = link.length; i < len; i++) {
link[i].style.color = 'white'
link[i].style.backgroundColor = 'black'
link[i].style.borderColor = 'white'
}

// Dark mode button
symbolBtn.innerHTML = 'light_mode'
symbolBtn.style.color = 'yellow'
darkmodeBtn.style.backgroundColor = 'blue'
darkmodeBtn.title = "Change to light mode"
}

function changeToLight(){
body.classList.remove('dark-mode')
body.classList.add('light-mode')


nav.style.color = 'black'
nav.style.backgroundColor = 'white'
nav.style.borderColor = 'black'

for (let i = 0, len = link.length; i < len; i++) {
link[i].style.color = 'black'
link[i].style.backgroundColor = 'white'
link[i].style.borderColor = 'white'
}

// Dark mode button
symbolBtn.innerHTML = 'dark_mode'
symbolBtn.style.color = 'gray'
darkmodeBtn.style.backgroundColor = 'black'
darkmodeBtn.title = "Change to dark mode"
}
Loading

0 comments on commit 26dffe5

Please sign in to comment.