Introduction

I created and hosted my first web application using HTML, CSS and JavaScript.

This is a solution to the session challenge that I was given at the Ablestate creatives limited. It has helped me to improve my coding skills by building a realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The Assignment

I was given a challenge to design a simple currency converter application. It has really helped me through understanding the DOM events and how to use JavaScript to make the website dynamic.

Screenshot

Links

• Github URL
• Live site

The process

Built with

• HTML5 markup
• CSS properties
• Flexbox
• JavaScript

What I learned

I have learned how to work with the Document Object Model (DOM) events to make the webpage dynamic. How the different DOM event help to make the website dynamic. This project gave me a great opportunity to dive deep into understanding some of the DOM events like the 'oninput' event, the 'onchange' event, the 'onblur' event, the 'onfocus' event, and many more events.

My greatest challenge was how to include the thousand operator in the input value. This was challenging to me because it meant that the thousand operator should be put as the user is entering the value in the input element. This pushed me to first of all learn Regular Expressions in JavaScript which topic really helped me in adding a thousand operator to the value of the input.

More importantly, I have learnt that one can learn a skill more as they use it in a real world project. And so I am looking forward to my second project.

Continued development

I want to greatly focus on events handling in order to be able to make my website more dynamic, and I am also looking forward to sharpen my JavaScript skills. For the nice designs, I want to focus greatly on advance CSS properties.

Useful resources

• Javascript.Info- This website helped me a lot in understanding the different between 'onchange' and 'oninput' events as used in input parameters.

Author

• Hashnode - @wasswaneockmale35
• Github - @wasswaenockmale
• Twitter - @wasswaenockmale

Acknowledgments

I want to thank my instructors at The Ablestate Creatives Limited for the great work they are doing in giving out knowledge. And all the Ablestate fraternity.