Discover our JavaScript projects designed to help you master web development
In this project, our aim is to build a modern tip calculator. The project's primary interface comprises a container labeled "Tip Calculator" with two input fields: one for the bill amount and the other for the tip percentage. The tip calculator has a modern design that is styled using CSS. We utilized JavaScript to obtain the values of the two input fields and calculate the total amount based on these values.
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.
In this project, you will learn how to build a testimonial slider using HTML, CSS and JavaScript. We use a timer to change the sliders automatically and also we have added a bountiful animation showing the slides.
In this project, we are going to create an age calculator. As you can see from the final version of the project, we have a container here with the title age calculator with an input of a date. If we click on the date input, we can choose the date of our birthday. For example, if we choose a date in in 2022 and if we click now on Calculate Age, you can see the age is calculated based on this date and saying your age is 21 years old.
In this project, we're developing a recipe book application that features a variety of recipes obtained through a free recipe API. We need an API key to access this API. Each time the page is refreshed, a new set of recipes with distinct ingredients will be displayed. Additionally, a link is provided to access the recipe website.
Welcome to the Dice Roll Simulator project. The final version of the project features a dice at the center of the screen and a "Roll dice" button. The button triggers an animation and generates a random number, which is displayed in the center of the dice when clicked, t. Additionally, the number is added to a history list. To achieve this, we used modern CSS to style the dice and added a JavaScript event listener to the button. The listener generates a random number, saves it to an array, and updates the history list.
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.
In this project, we create a rock, paper, and scissors game. The computer will also choose a random option, and the results will be displayed. You can win, lose, or tie. Scores are tracked at the bottom. We'll use HTML for structure, CSS for a modern look, and JavaScript to generate the computer's choice and compare the results. This game is an interactive way to test your luck and strategy against a computer opponent.
Welcome to the Stopwatch Project! We will create a timer displayed at the top, along with three buttons - start, stop, and reset. Clicking the START button will begin the timer. The STOP button will pause the timer using a JavaScript method called SetInterval, which can be cleared using clearInterval. The RESET button will reset the timer to zero. If you click STOP and then START again, the timer will continue from the previously elapsed time. We'll start by installing CSS for the buttons' design and hover effects, then use JavaScript to get the browser time, manipulate the content, replace it with the calculated time, and provide the start, stop, and reset functionality.
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.
Our project involves creating a movie trailer pop-up with an image, movie title, and Loren Ipsum text displayed on the page. Clicking on the Watch Now button will open a video pop-up where. Closing the video will reset it to the 15-second mark, but reopening it using the button will reset it to the beginning, at the zero-second mark. We will use JavaScript to create these functionalities and add or remove the pop-up window. The video tag of HTML will create the video player, and CSS will style it.
Our project involves creating a tab section that includes numerous tabs, each with a title and corresponding text. When you click on a tab, the title will be changed accordingly. We will also add an elegant hovering effect to each tab, and when a user selects a tab, its background color will change. To implement this, we will use JavaScript to dynamically update the content. We will style the tabs and create the hovering effect using CSS and the :hover pseudo-class to apply different styles when the user hovers over each tab.
In the project, our aim is to design a sticky navbar that alters its color as we scroll down the webpage. The final version of the project will feature an image in the background of the main section, with a navbar at the top displaying a logo and menu. As we scroll down, we will come across some Lorem ipsum-style text. As we continue to scroll, the navbar's color will change to black. To accomplish this, we will utilize JavaScript to calculate a specific point that has not been reached and add or remove classes to achieve different styles for the navbar.
Welcome to the Step Progress Bar Project! The final version includes five steps. We also have previous and next buttons. Initially, the previous button is disabled as we cannot go back to any previous step yet. Clicking on the next button displays the first step and enables the previous button. As we continue clicking on the next button, we move forward to each step until we reach the final step, after which the next button becomes disabled. We can move back to any previous step by clicking on the previous button. Inactive steps are greyed out with a cross icon, but when activated, they turn green with a check icon. The JavaScript dynamically displays the number of each step.
We'll create a social media selector menu that displays social media text and icons. As we click on the menu, we'll see a list of social media, and each will have a hovering effect. When we click on an icon, such as Facebook or YouTube, the social media text will change accordingly. The icons will also rotate as we open or close the menu. Finally, clicking on any icon will make the menu disappear. We'll learn how to toggle classes and change the appearance of the website using these methods. This project is ideal for those who want to enhance their CSS and JavaScript skills while creating an attractive social media menu.
In this project, our goal is to create a sidebar menu in this project. At the top right of the website, you can find a hamburger icon. Upon clicking on it, the menu appears smoothly, featuring multiple options with a beautiful hovering effect. We'll also create a logo as an SVG image and obtain a cross icon from Font Awesome. Clicking the cross icon will close the menu.
Our project aims to create a real-time character counter using JavaScript. It features a text area container that displays both the total character count and remaining character count of 50. As users type, the total character count dynamically increases, and the remaining character count decreases. The text area locks once the limit of 50 characters is reached, and the remaining character count becomes zero. With this functionality, users can keep track of their remaining characters and be alerted when they hit the character limit.
In this project, we'll create a sleek and modern random quote generator using JavaScript. With a glass morphism design, the website will display a title and a quote with the author's name. We'll be using an API to generate these random quotes, and we'll also learn how to create loading effects using try and catch methods and asynchronous functions. Additionally, we'll discover how to use CSS to create the glassy morphism design. The end result will be a visually appealing and functional quote generator that is easy to use and update.
Our project involves creating a random image feed that displays six images from "Lorem Pixel" website. The images are randomly selected and refresh with each page refresh. We also have a button at the bottom of the page to add new random images. To achieve this, we'll use JavaScript to fetch images from the "Lorem Pixel" API and manipulate the DOM to display them on the website. Additionally, we'll apply some CSS to style the images and the button. This project is an excellent opportunity to learn about fetching data from APIs, manipulating the DOM, and styling images in web development.
We'll build a random password generator that generates a password using different characters. The final project will consist of a container titled "Random Password Generator" with an input field containing an icon for copying the password and a button to generate it. When we click the button, a password is generated randomly. We can copy it by clicking the icon. A notification will appear confirming that the password has been copied, and we can paste it anywhere we want. This project will teach us how to create random passwords and copy text using a button in the project. We'll also learn how to add a notification to the project. It's an intermediate to advanced project for learning new skills.
The goal of this project is to create a random emoji generator with a "click" button that generates a random emoji and displays its name tag. For example, the "cook" emoji is represented by a person holding a pen. We will use JavaScript to retrieve data from an API and CSS to style the website. To get the necessary API keys, we will apply to the Emoji API website.
Let's create a tool that generates multiple random colors and codes with JavaScript. Upon refreshing the page, the colors and codes change randomly for up to 30 color containers. The website is also designed to be responsive, adapting to different screen sizes. It displays the colors in four columns on larger screens, then decreases to three, two, and ultimately one column for smaller screens. This provides a seamless user experience on any device.
This project involves creating a question and answer section that can be useful for many websites to improve their SEO. The final version of the project features three questions, each with a plus sign tab. Clicking on the plus sign shows the answer of the question. We'll use Font Awesome's library to get the plus and minus signs. We'll learn to add and remove classes using JavaScript. When we click on the plus sign, we'll add an "active" class to the question, revealing the answer. Clicking on the minus sign removes the "active" class to hide the answer.
This project involves creating an interactive profile statistics display showcasing work experience, websites made, and apps made. The design centers around three icons from the Font Awesome library: a briefcase for work experience, a cloud for websites made, and an apple for apps made. Each icon is accompanied by a number that increments from zero to the final value, achieved using the JavaScript set time method to create a function that proportionally increments the number. This effect triggers every time the page loads. The design is styled with CSS to create a modern and sleek look. The end result is an engaging and visually appealing way to showcase professional accomplishments on a profile.
In this project, we're creating a photo gallery. We have an input field to choose the number of photos to display, limited between zero and eleven. Clicking the "Get Photos" button fetches that number of photos randomly from Unsplash using the Unsplash API. The gallery design is fully responsive, with 3 images on larger screens, 2 on tablets, and 1 on mobile. We use Flexbox to make the images responsive. We'll learn about error handling, using APIs, and creating a responsive design for a photo gallery.
This project involves creating a note-taking app with a sleek and modern button design. Upon clicking the button, a new note can be created and edited as needed. Double-clicking a note prompts the user to confirm deletion, and notes are saved via browser local storage to persist even after page refresh. This project covers saving and retrieving notes using JavaScript and designing a stylish and modern glassy interface with CSS.
In this project, we create a responsive navigation bar with a logo and three menu items. We will obtain the logo from the internet and ensure that the navigation bar changes based on the browser window's size. Clicking on the icon will reveal the home and about menu items. Each menu item will feature a hovering effect when the mouse is moved over it. We will utilize JavaScript to modify the classes of the HTML text, apply different CSS styles to each class, and use JavaScript to add or remove them accordingly.
Our project aims to develop a multiplication app that helps children practice their math skills. It features a question section, an input section, a submit button, and a score section. The question section displays a random multiplication question every time the page refreshes, and the user can answer in the input section. If the answer is correct, their score increases by one, and the next question appears. However, if the answer is incorrect, the score decreases by one. We'll use JavaScript to generate questions and check answers, local storage to store scores, and HTML and CSS for a visually appealing interface.
In this project, we create a mouse event project that tracks the mouse's position on the screen. Moving the mouse around will display X and Y positions that change as you move. These measurements are useful for designing websites and writing CSS. We'll use the "add event listener" method to track mouse position in the browser. This mouse event project can also teach you how to use JavaScript to build web apps that respond to user input.
This project entails building a full-month calendar using HTML, CSS, and JavaScript. The calendar includes a header displaying the current month and date, all dates of the month from 1 to 30, and accurately reflects today's date. Everything is dynamically generated and automatically updates based on the current date and month. The calendar is visually appealing with effects like shadow and other design elements styled with CSS.
This project involves creating a mini calendar that displays the current date of the computer on which it is viewed. This information is dynamically retrieved using JavaScript, ensuring that the page always displays the current date. For example, if viewed in December 2021, the page will display December 2nd, which is a Thursday. By creating this mini calendar, you will learn how to retrieve and display current date information using JavaScript.
Our objective is to develop a loan calculator that determines monthly payments for a given loan amount, interest rate, and payment term. The calculator features three input fields: loan amount, interest rate, and payment term. By entering these values, we can determine the monthly payment required to pay off the loan in the specified time. Changes to any of the input values automatically update the monthly payment amount. We will use HTML to create the input fields, CSS to style the project, and JavaScript to calculate the monthly payment based on the provided input.
In this project, we'll create a loading bar. Upon opening, you'll see a header, loading percentage, and bar. Refresh the page to watch the percentage increase from 0 to 100, filling the bar. Use it as a free loader or in your own projects. Learn to change the numbers and bar width with JavaScript.
For this project, our aim is to construct an image slider with a diverse range of functionalities. The final product is an image slider that will automatically shift every five seconds. In addition to this, there will be two buttons, a previous and a next button, enabling users to navigate through the images manually. The slider is visually appealing, featuring a stunning box shadow and icons sourced from Font Awesome. Our approach to creating this project will involve initially building the HTML structure, followed by styling the slider with CSS, and finally, adding functionality to the project using JavaScript. In essence, this project will teach us how to create an image slider from scratch using HTML, CSS, and JavaScript, including navigation buttons, automatic image transitioning, and the incorporation of attractive design elements.
We will create an image search app that lets you search for any desired image. You can enter your search query and receive results accompanied by a description. The app is responsive and displays images in a single column on smaller ones. Using the Unsplash API, the app fetches up to 1000 unique and non-repetitive images. The modern CSS design ensures a fast and responsive user experience, making it enjoyable to search for cats, dogs, or any image.
Our project involves creating a heart rate animation that responds to mouse movement in the browser. As the mouse moves, hearts of varying colors and sizes will appear on the screen. Keyframe queries will modify the opacity, size, and hue of the hearts. To track the mouse's position in the browser, we'll use JavaScript. With this information, we'll position the heart in the exact location of the cursor. This interactive feature will personalize the user experience and respond to their movements in real-time. By combining these elements, we'll develop an engaging and dynamic animation that captures the user's attention and provides a fun and interactive experience on the webpage.
In this project, we're creating a UI that allows users to give feedback by selecting from three ratings: unhappy, neutral, and satisfied, each with a hovering effect. Upon selecting a rating, it becomes active and changes background color. If the user refreshes the page, they can choose another rating, and the feedback section updates accordingly. To create this UI, we'll install the project with its design, add a background color, and create a container with a box shadow. Using JavaScript, we'll add and remove a class to activate a rating and add an event listener to the "send review" button, triggering a function that displays the inner text of each rating in the feedback section.
In this project , you will learn how to create an English dictionary web app that retrieves definitions from an API. Type a word into the input field and hit enter to see its definition, pronunciation, and hear the word pronounced correctly. The app also includes a loading effect and error handling for no internet connectivity. Use CSS to style the app and JavaScript to retrieve data, add the loading effect, and handle errors with try-catch blocks. You'll also learn how to use the Web Speech API to include an audio file for word pronunciation.
Our project involves creating a feedback section with emoji ratings using JavaScript and Font Awesome. The final version of this project will display an emoji and five stars on the screen. When we click on different stars, the color of the previous stars will change accordingly. We will achieve this functionality by using JavaScript to update the star ratings and change the emojis in real-time.
Welcome to the Drum Kit Project! You will create a drum kit with four buttons, each representing a unique sound. Clicking a button produces the corresponding sound and an animated background. Pressing the first letter of each button's name triggers the sound as well. JavaScript handles button clicks and key presses, while CSS takes care of animations and styling. Let's get started!
In this project, we're designing a double landing page showcasing two products: Apple and Samsung. When hovering over a product, that side becomes larger than the other. The button also has a beautiful transition and animation effect, and a background image is added to enhance visual appeal. To achieve the hover effect, we'll use JavaScript to add and remove classes that change each side's styling. This creates a visual size change when hovering over each product.
In this project, we'll create a toggle button that switches the website between dark and light modes, with a sliding animation for a more visually appealing transition. We'll use keyframe CSS queries to create the animation and JavaScript to change the background color dynamically. The user's preference will be stored using the browser's local storage, ensuring that their selection persists even if they refresh the page. This project will teach you advanced CSS techniques, JavaScript programming, and how to improve the user experience by storing data in the browser.
I this project, we're creating a dad joke generator that features a new morphism design made with CSS. Clicking on the button generates a random dad joke, and another click generates a new one. While loading, a loading effect is displayed in the text and button. JavaScript will handle the loading effect and potential errors, and CSS will create a visually appealing design for the generator.
In this project , we create a currency converter that offers various currency options. Once a currency is selected, the application immediately requests the current exchange rate from an API. Users can then input an amount in one currency and see the equivalent in the other currency, all in real-time. In order to that, we will be using JavaScript to fetch data from the currency API. This project offers a great opportunity to learn about currency conversion, API requests, and utilizing JavaScript to create dynamic web applications.
In this project, we'll create a counter featuring three buttons, a title, and a control number. We'll use Bootstrap to design the buttons. Clicking the plus button increases the number and changes its color to green. Clicking the minus button decreases it. If the number is less than zero, its color changes to red. Lastly, the reset button sets the number back to zero. JavaScript will handle all these functionalities. We'll add event listeners to the buttons to trigger functions that change the number value and color. Additionally, we'll create a function to reset the number to zero. This project will teach you how to create buttons with Bootstrap and use JavaScript to manipulate a webpage's content and appearance.
This project entails creating a visually stunning button ripple effect that animates when hovering over a button. The final result showcases a button on the screen that produces a ripple effect starting from the point where the mouse enters. Regardless of the entry direction, the effect adapts accordingly, creating a seamless and captivating user experience. Achieving this effect involves utilizing JavaScript to capture the mouse position and CSS to create a visually appealing ripple animation. Executing this project requires a robust grasp of JavaScript and CSS and the ability to apply these skills creatively to produce the desired effect. With our expertise, we can create a beautiful and interactive ripple effect that is sure to impress and engage users.
This project aims to create a body mass index calculator. There are two input fields where the user can enter their height in centimeters and weight in kilograms. By clicking the "compute BMI" button, the BMI will be calculated and displayed along with the weight condition, which is determined by if statements based on the BMI. We will also install the project with a neumorphism design and use JavaScript to calculate the BMI. All results will be displayed inside the input field and at the end of the container.
This project aims to create a pop-up window with a blurred background. The main website features a background image, a title, and a call to action button. Clicking on this button pops up a window. In the background, we can see a blurred version of the main website. The pop-up window has an email input field, a join button, and a close icon at the top right corner. Clicking on the close icon removes the pop-up window, and the main website returns to its normal state without any filters or blurriness. We will learn how to create this blurred background pop-up using HTML, CSS, and JavaScript, including how to apply blur filters, create pop-up windows, and add transition effects.
In this project, we'll explore incorporating a background video for websites, featuring a title and a button to pause and play the video. We'll use Font Awesome to obtain power and play icons and obtain free background videos from the internet. Upon page refresh, a pre-loader displays before the website fully loads. We'll acquire free pre-loaders and use JavaScript to display them before the website fully loads. Once both the video and website are loaded, the pre-loader disappears.
In this project, we will be creating an auto text effect animation. The final version of our project showcases a typing effect that displays various career titles. We will be using JavaScript to create these typing effects, which appear one after the other. The career titles change after a certain time interval, and in the final version of the project, the first title displayed is "YouTuber". This is followed by "Web Developer Freelancer", and finally, "Instructor". It's worth noting that in the last career title, "RN" appears instead of "and". To achieve this conditional statement, we will be using the ternary operator. Overall, this project will teach us how to create an auto text effect animation using JavaScript and the ternary operator.
Let's create an animated search bar project with a neumorphism-designed magnifier icon. Clicking the magnifier reveals a search bar and microphone. A second click returns it to its original size. We'll use JavaScript to add and remove classes for different search bar sizes. There's an animation for the microphone and search bar when we close and open it. This project will teach you how to make a visually appealing and interactive search bar for your website.
Our project involves building an anime picture generator that enables users to fetch a random anime picture and its name. The final version of the project features a button that retrieves data from an API, presenting a random anime picture and its name when clicked. Whenever the 'Get anime' button is clicked, we observe a loading effect first, followed by a new picture with a random name. Throughout the project, we will master the use of APIs to fetch data using the try and catch method. We will learn how to apply a loading effect to the page while waiting for data to load. Furthermore, we will develop our CSS skills by designing a beautiful UI, including the background color of the page.
This project involves creating a captivating image gallery with rotating images and two navigation buttons. Through JavaScript, we will dynamically change the images using timers and add event listeners for smooth navigation. The CSS transform method will be utilized to rotate the images and enhance the overall aesthetic appeal. This approach will provide a dynamic and visually stunning user experience that is sure to captivate and engage visitors. With a rotation interval of three seconds and intuitive navigation buttons, users can easily explore the gallery and appreciate its visual richness.
In this project, we create a pop-up window with a blurred background effect. When you click on the join button, a pop-up window smoothly appears with an email input field. Clicking the close icon makes the pop-up window disappear, restoring the main website to its original state without any blurriness. We'll utilize CSS to apply transitions and blur effects to the background image, and JavaScript to add event listeners to the button and close icon.
Let's create a sleek and modern calculator with all necessary buttons including numbers, operators, equal sign, and clear button. Type any arithmetic expression and the calculator will solve it instantly. We'll use JavaScript's 'eval' function to evaluate the expressions. Also, we'll learn to add event listeners to buttons with a for loop. Expect hovering and shadow effects inside and outside some elements to enhance the design.
Our analog clock project will create a clock with the Rolex logo that displays the current time based on the user's browser. Using JavaScript, we will convert the current time into degrees to reflect the current time on the clock face. The Rolex logo will be in the center of the circular clock face, with hour, minute, and second hands reflecting the current time. We will update the clock hands' positions dynamically using JavaScript, creating a real-time effect. CSS will style the clock face, hands, and logo for a sleek and professional appearance. This project will enhance our JavaScript skills by manipulating the DOM and working with the Date object and CSS skills for styling elements.
Our project involves creating a New Year's countdown for 2024 using JavaScript. Our countdown timer will dynamically generate these numbers and retrieve the current date and time from the user's computer. It will continuously update, providing users with an accurate display of the time remaining until the start of 2024.
We will create a user-friendly digital clock that displays the current time on a website with a beautiful design, title, and background image. We'll get the current time from the computer and display it in a digital format using JavaScript, . The clock will always show the accurate time, synchronized with the computer's time. This project will help us learn crucial skills such as working with JavaScript to retrieve the current time and creating an attractive website design.
In this project, we create a modern to do list. We can add a new task to the list using the input field. Plus, our to-do list is unique in that even after refreshing the page, the tasks remain saved. By utilizing JavaScript, we'll show you how to set and get items from local storage. With each task, there are two icons: a check mark and a trash bin. The check mark allows you to mark the task as completed, while the trash bin lets you delete the task. Each task will also be saved in the local storage.
We are embarking on a weather app creation project that will empower users to access weather information for any city. The process will involve the user inputting the city name into an input field and clicking a button or pressing enter to retrieve the weather data. By leveraging JavaScript, we will connect to an open weather API to access relevant weather data for the specified city. To represent weather conditions, we will use icons or images like a sun or a cloud. In handling errors while fetching data from the weather API, we will employ the 'try and catch' technique. Our project will enhance our skills in working with APIs, handling errors effectively, and creating user-friendly interfaces.
We're creating an image search app that lets you search for any image. Enter a search query and receive instant results, with each image including a description and clickable to view on Unsplash.com. The 'show more' button allows fetching up to 1000 non-repetitive images. Responsive and featuring a modern design with CSS, it uses the Unsplash API and offers fast and responsive user experience. Enjoyable and efficient, it's perfect for finding pictures of anything, from cats and dogs to anything else.
%202.webp?alt=media&token=7ffdb0b5-c934-43e2-a7a1-029e283cce6f)
