To-do-list

To-do-list - Firebase configuration, Dark mode

This To-do-list application is composed of:

• index.html
• app.js javascript
• Firebase - Firestore database
• styles.css styling

To do and Note

Editing To do and Note

Firebase Configuration values can be found in: https://console.firebase.google.com/project/

-> firebase project 
	-> settings
		-> general

Insert values into project's Firebase configuration:

index.html, lines 22-38

<!--Firebase to web app-->
        <script>
            // Initialize Firebase
            var config = {
                apiKey: "",
                authDomain: "",
                databaseURL: "",
                projectId: "",
                storageBucket: "",
                messagingSenderId: "",
                appId: "",
                measurementId: ""
            };
            firebase.initializeApp(config);
            const db = firebase.firestore();           
        </script>
<!--Firebase to web app-->

Dark mode

Adding Dark mode button - app.js, line 3

const darkBtn = document.querySelector('#lit'); // dark mode button

Dark mode button functionality - app.js, lines 97-117

// Toggle dark mode
const darkMode = () => {
    bodyEl.classList.toggle('darkMode');
}

darkBtn.addEventListener('click', () => { // get "darkMode" item value from localStorage on reload
    setDarkMode = localStorage.getItem('darkMode');
    if(setDarkMode !== "on") {
        darkMode();
        setDarkMode = localStorage.setItem('darkMode', 'on'); // set "darkMode" item value to "on" when dark mode is on
    } else {
        darkMode();
        setDarkMode = localStorage.setItem('darkMode', null); // set "darkMode" item value to "null" when dark mode is off
    }
});

let setDarkMode = localStorage.getItem('darkMode'); // get "dark" item value from localStorage

if(setDarkMode === 'on') { // check if dark mode is on or off on reload
    darkMode();
}

To be able to view and use :root and .darkMode

Example:

body {
    color: var(--font-color);
    background-color: var(--background);
} 

:root, styles.css, lines 1-18

:root {
    --background: white;
    --foreg-col: white;
    --form-inp: white;
    --li: #F8F8F8;
    --todo: snow;
    --note: #FAF9F6;
    --li-even: #F0F0F0; 
    --font-color: black;
    --box-glow: 1px 3px 5px lightblue;
    --border-bot: 1px solid lightblue;
    --border-bot2: 2px solid lightskyblue;
    --border-bot-foc: 4px solid lightskyblue;
    --dark-btn: #1b31a1;
    --btns: black;
    --opacity: 70%;
    --opacity2: 75%;
}

.darkMode, styles.css, lines 27-43

.darkMode {
    --background: #202945;
    --foreg-col: #162780;
    --form-inp: #172a8a;
    --li: #192d94;
    --todo: #15257d;
    --note: #1b31a1;
    --li-even: #13216e;
    --font-color: white;
    --box-glow: 1px 3px 5px #99FFCC;
    --border-bot: 1px solid #99FFCC;
    --border-bot-foc: 4px solid #99FFCC;
    --dark-btn: #99FFCC;
    --btns: black;
    --opacity: 90%;
    --opacity2: 95%;
}