Table of contents
HTML CSS and JavaScript
Hey everyone, Happy to share what has been working on following my journey with #EDSA Meta Government of Ekiti State, Nigeria Tech4Dev #frontenddeveloper #frontend boot camp under the tutelage of Akpevwe Essi
I was able to build a to-do application with some functionality using #html #CSS and #JavaScript. The code uses DOM manipulation to create and modify elements on the page.
The application has the following features:
Add a to-do item to the list by clicking the "Add Todo" button or pressing the Enter key. The to-do item is saved in local storage.
Mark a to-do item as completed by clicking the checkmark button.
Delete a to-do item by clicking the trash button.
Filter the to-do items based on their completion status (all, completed, or uncompleted).
Toggle between dark and light modes.
Use voice commands to add to-do items.
I use the querySelector method to get the HTML elements. I also define several event listeners that made the app functional, such as clicking a button or pressing a key.
Some of the Event Listeners include
The addTodoList() function is called when the "Add Todo" button is clicked or the Enter key is pressed. It creates a new to-do item element and adds it to the list. If the input is empty, it shows a warning message. The function also saves the new to-do item in local storage.
The deleteOrCheckTodo() function is called when the user clicks the checkmark or trash button. It marks the to-do item as completed or removes it from the list.
The filterTodos() function is called when the user selects a filter option. It filters the to-do items based on their completion status. It first checks if there are any to-do items to filter and shows a warning if there are none. Then it loops through all the to-do items and hides them by default. Finally, it shows the to-do items that match the selected filter.
The darkOrLight() function is called when the user clicks the toggle button to switch between dark and light modes. It changes the class of several elements to update their appearance and saves the current mode in local storage.
The startSpeechRecognition() function is called when the user clicks the voice command button. It uses the Web Speech API to recognize the user's voice and add a new to-do item to the list. It first checks if the browser supports speech recognition and shows a warning if it doesn't. This feature requires the user's permission to access their microphone.
In the coming days, I will be building a quiz app, typing-speed testing app, weather app, and so on...
Thank you to Tech4Dev Meta Emeka Okafor Jr Government of Ekiti State, Nigeria Biodun Abayomi Oyebanji Joel Ogunsola