Manoj Gowda
Published on

HTML, CSS, and JavaScript

Authors

Javascript :the language of the web

JavaScript is a programming language that adds dynamic functionality and complex features like interactivity and animation to web pages. Together with HTML and CSS, JavaScript forms the foundation of web development.

As a complete beginner in the world of coding, I embarked on a thrilling journey into the realms of HTML, CSS, and JavaScript. The excitement of discovering these technologies and their potential for creating interactive web applications was overwhelming. In this blog, I will take you through my initial steps into the world of web development, detailing my introduction to HTML, CSS, and JavaScript, as well as the creation of my first two vanilla JavaScript games: Guess the Number and Currency Converter.

How Javascipt is used in Web-Devolopment

Front-end web developers use JavaScript to add interactive behavior to web pages. These behaviors include:

  • Showing or hiding information with the click of a button Changing the color of a button when a mouse pointer hovers over it
  • Playing audio or video embedded in a web page
  • Rotating through images in a slide show
  • Animating elements on a page when they are shown or hidden
  • Showing a drop-down menu when an element is clicked
  • Displaying a count-down timer on a web page
  • Back-end web developers also use JavaScript on web servers, where it connects to databases and APIs to retrieve and transform data before sending it to another application.

Discovering the power of JavaScript

With my HTML and CSS foundation in place, I delved into the world of JavaScript. JavaScript is the magic wand of web development, adding interactivity and functionality to web pages.

The language is used heavily in web pages, but now various JavaScript platforms allow you to execute JavaScript on a server without a browser. It is also used to create mobile apps for Android and iOS platforms.

My first project: Secret Number

game

With my newfound JavaScript skills, I was ready to build my first game - "Secret Number." The goal of this simple game is to guess a randomly generated number within a specified range. Here's how I approached it:

  • Generating a Random Number: I used JavaScript's Math.random() function to generate a random number and stored it in a variable.

  • User Input and Validation: I created a form for users to input their guesses and used conditional statements to validate their input.

  • Feedback and Interaction: Based on the user's guess, I provided feedback on whether the guess was too high or too low. This required more conditional statements and the use of functions.

  • Winning Condition: When the user guessed the correct number, I displayed a winning message.

My second project: Currency Converter

To test the calculator Currency Converter

game

With the excitement of creating my first game, I was motivated to take on a new challenge: building a currency converter. This project introduced me to working with user input and performing calculations in JavaScript:

  • User Input and Validation: I designed a user-friendly interface where users could input an amount and select two currencies for conversion. JavaScript validated their inputs and ensured that they were numeric.

  • Currency Conversion: I used real-time currency exchange rates from an API to perform the conversion. Fetching data from an API and updating the DOM with the converted amount was a significant milestone in my journey.

  • Error Handling: I added error handling to handle scenarios where the API request failed or the user input was invalid.

You can build an entire application from scratch with just JavaScript, but most modern development also includes libraries and frameworks. Libraries and frameworks are sets of pre-written code with pre-built components you can use to develop your projects more quickly and easily. Some of JavaScript’s most popular libraries and frameworks include React, Angular, and Vue.

React

React is a popular JavaScript front-end library developed by Facebook. Front-end developers use React to build interactive user interfaces and reusable web components that together create complete web applications.

React is consistently ranked as one of the most popular frameworks for web development. Last year, over 68% of developers surveyed by Stack Overflow chose React as their “Most Loved’ web framework.

Angular

Angular is another popular JavaScript framework developed by Google. It’s a much larger framework with an arguably steeper learning curve as it comes with built-in tools that perform form management, client-server communication, and other functionalities.

Vue.js

Vue.js is a lightweight JavaScript framework that many developers find to be the easiest to learn. It has an HTML-based syntax and gives you the option to pick what you want to use from the framework. The core of Vue.js handles the user interface, like React, but you can also choose to use more features of the framework to add data models, view controllers, and more.

Conclusion

My journey into the world of HTML, CSS, and JavaScript has been a thrilling ride filled with learning, experimentation, and the joy of creating interactive web applications. From building a simple webpage to creating my first games, "Guess the Number" and "Currency Converter," I've discovered the endless possibilities of web development. This is just the beginning of my coding adventure, and I can't wait to explore more and continue developing exciting projects.

If you're new to coding, I encourage you to take the plunge and start your own journey. The joy of seeing your code come to life and creating something from scratch is an experience like no other. Happy coding!