Rock Paper Scissors Game Tutorial - Free JavaScript Project | 100 JS Projects

Temperature Converter

This project aims to create a temperature converter for beginners. The final version of the project includes three inputs for Celsius, Fahrenheit, and Kelvin temperature formats. When you change any of these inputs, for example, if you choose 100 degrees Celsius, you will see the equivalent Celsius value in Fahrenheit and Kelvin formats. Additionally, if you change one input, you will see a real-time change inside the other inputs. For instance, changing the Fahrenheit input to 100 degrees will show you that it is equal to 37 degrees Celsius and 311 Kelvin. To create this project, we will learn how to use an "onchange" event listener to track changes inside the inputs. We will also use the switch statement to track changes based on the name of the input we are working on. Additionally, we will use CSS to give the project a modern look, inspired by newMorphISM design. In summary, this project will help us learn how to create a temperature converter using JavaScript and CSS, and we will learn how to track changes using event listeners and switch statements.

HTMLCSSJavaScript

View Project

Featured

Pomodoro Timer

The objective of this project is to design a Pomodoro timer that features a countdown clock and three functional buttons, namely start, stop, and reset. Upon clicking the start button, the timer will commence counting down from 25 minutes. Should one desire to halt the countdown, the stop button can be pressed. The countdown can be resumed by hitting the start button, and by clicking on the reset button, the timer will reset to 25 mins again. An alert will notify the user when the timer reaches zero. This Pomodoro timer is an ideal tool for individuals seeking to focus on a task for a set amount of time, followed by a break. By implementing this technique, productivity and time management skills can be improved. To create this timer, one must initially grasp the principles of CSS for styling purposes. Next, event listeners will be added to the buttons using JavaScript. Finally, a timer will be established using the SetInterval function in JavaScript.

HTMLCSSJavaScript

View Project

Weight Converter

Let's create a weight converter project that converts pounds to kilograms. The webpage features an input field where users can enter a weight in pounds, and the webpage automatically displays the equivalent weight in kilograms. After 10 seconds, the result is removed, and the input field is emptied using the 'set time out' method. We've also incorporated an error handling feature to handle negative input numbers. If the user enters a negative number, the webpage displays an error message, "Please enter a valid number." We'll learn how to handle error situations and remove the error message after two seconds using an event listener for the input field. The event listener will call a function that performs the desired actions.

HTMLCSSJavaScript

View Project

Rock Paper Scissors GameHTML, CSS & JavaScript Project

Project Description

Technologies Used

Live Demo

Source Code

Explore Similar Projects

Temperature Converter

Pomodoro Timer

Weight Converter