-
Notifications
You must be signed in to change notification settings - Fork 0
/
cpt.js
117 lines (91 loc) · 3.47 KB
/
cpt.js
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
// sessionStorage
// form validation
"use strict";
const themeSwitch = document.querySelector(".checkbox");
const favicon = document.getElementById("favicon");
// Check for dark mode OS preference
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
// Favicon change
const changeFavicon = () => {
if (prefersDarkScheme.matches) {
favicon.href = "./assets/dark-fav.ico";
} else {
favicon.href = "./assets/light-fav.ico";
}
};
changeFavicon();
prefersDarkScheme.addEventListener("change", changeFavicon);
// --- LOCAL STORAGE INFO
// User'S theme preference from localStorage, if available
let currentTheme = sessionStorage.getItem("theme");
// If preference in sessionStorage is dark...
if (currentTheme === "dark") {
// toggle .dark-theme class on the :root
document.documentElement.classList.toggle("dark-theme");
// If preference in sessionStorage is light...
} else if (currentTheme === "light") {
// toggle .light-theme class on the :root
document.documentElement.classList.toggle("light-theme");
}
// --- EVENT LISTENER
themeSwitch.addEventListener("change", () => {
let theme;
// If OS setting is dark + matches .dark-theme class...
if (prefersDarkScheme.matches) {
// toggle the light mode class
document.documentElement.classList.toggle("light-theme");
// use .dark-mode if the .light-mode class is already on the :root/html
theme = document.documentElement.classList.contains("light-theme")
? "light"
: "dark";
}
// else do the same thing for .dark-mode
else {
document.documentElement.classList.toggle("dark-theme");
theme = document.body.classList.contains("dark-theme") ? "dark" : "light";
}
// save current preference to sessionStorage to keep using it
sessionStorage.clear();
});
//
// --- FORM VALIDATION
// add customizable error message with Constraint validation API
const form = document.getElementsByTagName("form");
const email = document.getElementById("email");
const emailError = document.querySelector("#email + span.error");
email.addEventListener("input", function (event) {
// Each time the user types, check if the form fields are valid
if (email.validity.valid) {
// If there is an error message visible, if the field is valid, remove the error message
emailError.textContent = ""; // Reset the content of the message
emailError.className = "error"; // Reset the visual state of the message
} else {
// If there is still an error, show the correct error
showError();
}
});
form.addEventListener("submit", function (event) {
// if the email field is valid, we let the form submit
if (!email.validity.valid) {
// If it isn't, we display an appropriate error message
showError();
// Then we prevent the form from being sent by canceling the event
event.preventDefault();
}
});
function showError() {
if (email.validity.valueMissing) {
// If the field is empty, display error msg
emailError.textContent = "Please, enter an e-mail address.";
}
// If the field input doesn't contain an email address, display error msg
else if (email.validity.typeMismatch) {
emailError.textContent = "Entered input needs to be an e-mail address.";
}
// If the data is too short,ndisplay error msg
else if (email.validity.tooShort) {
emailError.textContent = `Email should be at least ${email.minLength} characters; you entered ${email.value.length}.`;
}
// Set the styling appropriately
emailError.className = "error active";
}