Creating ChowNow.co.za, a food delivery homepage, was an exciting journey that involved a combination of HTML, CSS, JavaScript, and SASS. One of the standout features of Chownow is its seamless switch between light and dark modes, offering users the flexibility to choose their preferred theme.

The foundation of Chownow begins with well-structured HTML. I organized the content into sections, including a header and a footer. Each section was defined with semantic HTML elements for clarity and accessibility.

To make ChowNow.co.za visually appealing, I used CSS for styling and leveraged SASS to maintain a modular and organized stylesheet. SASS's nesting and variable capabilities allowed me to streamline the code, making it more maintainable and efficient.

Implementing the light/dark mode toggle was a significant challenge. I added a toggle switch in the header section of the page. It was implemented using an HTML input element with a unique ID. I used CSS to style the toggle switch and define the visual aspects of both light and dark modes. I created CSS classes for each mode and set initial styles accordingly.JavaScript was employed to handle the toggle functionality. I attached an event listener to the input element and used a function to switch between the CSS classes for light and dark modes based on user interaction.

In conclusion, building ChowNow.co.za was an exciting project that combined HTML, CSS, JavaScript, and SASS to create a visually appealing and user-friendly food delivery homepage. Overcoming the challenges and bugs during development was a valuable learning experience, resulting in a robust and feature-rich website that offers a smooth transition between light and dark modes for an enhanced user experience.

If you would like to view the site, Click here!
You will also be able to see this project on my GitHub repository named: chowNow-project-app

Creating a To-Do web app was huge learning curve, and it provided an excellent opportunity to learn and apply core web development technologies. In this description, I'll explain how I built a To-Do web app using HTML, CSS, and JavaScript, highlighting the challenges faced and the strategies used to overcome code-related issues

The first step in building the To-Do app was to define its HTML structure. I created a container for the app with sections for the header, the list of tasks, an input field for adding new tasks.

CSS was used for styling to make the app visually appealing and user-friendly. I designed a clean and responsive interface, making use of CSS classes to apply styles consistently across different elements.

The heart of the To-Do app lies in its JavaScript functionality, which includes adding tasks, marking them as completed, and removing them from the list.

In conclusion, building a To-Do web app using HTML, CSS, and JavaScript is a great project for honing web development skills. Overcoming challenges related to user input, local storage, responsiveness, and compatibility required careful planning, debugging, and testing. The result is a functional and user-friendly app that helps users manage their tasks effectively.

If you would like to view the web app,Click here!
You will also be able to see this project on my GitHub repository named: todo-project-app

Developing a web development quiz app was a fantastic way for me to showcase my skills and provide an engaging learning experience. In this description, I'll explain how I built a web development quiz app using HTML, CSS, and JavaScript.

The foundation of my quiz app starts with well-structured HTML. I organized the content into sections for the quiz questions, answer choices, a timer, and a result display area. Each question was represented as a separate HTML element with appropriate IDs and classes for easy manipulation via JavaScript.

CSS was employed for styling to create an attractive and user-friendly interface for the quiz. I designed a clean layout with responsive design principles to ensure the quiz app worked on various devices and screen sizes.

The heart of the quiz app is its JavaScript functionality, which includes:
1) I stored the quiz questions, answer choices, and correct answers in JavaScript arrays or objects. JavaScript dynamically populated the HTML with these elements, ensuring that each question had multiple choices.
2) Users could select answers by clicking on the choices. JavaScript event listeners tracks user clicks and compares selected answers with the correct (in green) and incorrect (in red) answers.
3) I added a 15 second countdown timer to create a sense of urgency. JavaScript updated the timer in real-time and triggered actions when time ran out.
4) JavaScript tallied up the correct answers and displayed the user's score at the end of the quiz.

In conclusion, building a web development quiz app with HTML, CSS, and JavaScript is a rewarding project that requires careful planning and thorough testing. Overcoming challenges related to dynamic content loading, answer validation, timer management, responsive design, and accessibility involved debugging, testing, and iterating to create a functional and engaging quiz experience for users interested in web development.

If you would like to view the web app,Click here!
You will also be able to see this project on my GitHub repository named: webdev-quiz-app.

Creating my language translator app using HTML, CSS, and JavaScript is a rewarding project that provides users with a valuable tool for communication. In this description, I'll explain how I built my language translator app

The foundation of the language translator app starts with structured HTML. I created sections for the input text, language selection, translation output, and a user-friendly interface. HTML forms and input elements were used to capture user input.

CSS was used for styling to create an attractive and user-friendly interface for the translator app. I focused on clean and responsive design principles to ensure the app's usability on various devices and screen sizes.

The core functionality of the translator app is implemented in JavaScript, including:
1) I integrated a translation API service, like Google Translate, to handle the actual translation process. JavaScript made API requests and processed the responses. The responses could also be heard through the speech button
2) Users could select answers by clicking on the choices. JavaScript event listeners tracks user clicks and compares selected answers with the correct (in green) and incorrect (in red) answers.
3) JavaScript updated the HTML content with the translated text and voice prompt (when clicked) received from the API, providing a seamless user experience.

In conclusion, building my language translator app with HTML, CSS, and JavaScript is a rewarding but challenging project. Overcoming difficulties related to API integration, user input validation, responsive design, localization, error handling, and accessibility required careful planning, debugging, and thorough testing to create my functional and user-friendly translation tool.

If you would like to view the web app,Click here!
You will also be able to see this project on my GitHub repository named: language_translator_app.