Making Websites Interactive: Five Solo Projects

Lydia Amadi Chinyere — Fri, 01 Dec 2023 17:19:09 +0000

I recently completed Module 3 of Scrimba's Fronten Career Path course, "Making Websites Interactive." In this module, I learned how to use JavaScript to add interactivity to my web pages. To apply these concepts, I worked on five solo projects:

Basketball Scorecard

For my first project, I created a simple basketball scorecard that allows users to keep track of the score for a basketball game. I used HTML, CSS, and JavaScript to create the scorecard, and I learned a lot about how to use DOM manipulation to update the scorecard dynamically.

Password Generator

My next project is a simple password generator that generates strong and secure passwords. This project was important in learning to work with arrays with a lot of characters and using Math.random() and math.floor().

Unit Converter

This project is a simple unit converter app that allows users to convert between different units of measurement, such as meters to kilometers, pounds to kilograms, and Fahrenheit to Celsius. I used HTML, CSS, and JavaScript to create the unit converter, and I learned a lot about how to use JavaScript to manipulate numbers.

Add to Cart App

For my fourth project, I created an Add-to-Cart app that allows users to add items to a shopping cart and manage their cart in real time. I used HTML, CSS, JavaScript, and Firebase Realtime Database to create the Add-to-Cart app.

I learned a lot about using Firebase Realtime Database, including how to:

Create a Firebase project

Set up Firebase Realtime Database

Read and write data to Firebase Realtime Database

Handle real-time data updates

I found that Firebase Realtime Database was a powerful and easy-to-use tool for creating real-time apps. I was able to quickly and easily add real-time functionality to my Add-to-Cart app, and I was impressed with how well Firebase Realtime Database handled multiple users accessing the same data simultaneously.

Champions App

This project is a simple app that allows users to leave endorsements for clients. Users can enter the client's name, a their name as sender and a message. The app will then display the endorsement on the page.

I used HTML, CSS, JavaScript, and Firebase Realtime Database to create the endorsement app. Similar to the Add-to-Cart app, Firebase Realtime Database enabled me to store and update endorsement data in real time, allowing users to see new endorsements as they are added.

I had a lot of fun working on these solo projects, and I learned a lot about how to make websites interactive and implement real-time updates using Firebase. I'm grateful for the opportunity to have taken this course, and I'm excited to continue to the next module of my course.

In addition to the technical skills I learned, these projects also helped me to develop my problem-solving and debugging skills.

Overall, I am very happy with the results of these projects. I believe that they have helped me to become a more well-rounded front-end developer and a better designer.

I encourage anyone who is interested in learning front-end development to check out Scrimba's Fronten Career Path course. It is a great resource for learning the skills you need to get started in this field.

I hope this blog post has been helpful. If you have any questions, please feel free to leave a comment below.

DEV Community: Lydia Amadi Chinyere

Making Websites Interactive: Five Solo Projects