JavaScript Projects
Affichage des articles dont le libellé est JavaScript Projects. Afficher tous les articles
Affichage des articles dont le libellé est JavaScript Projects. Afficher tous les articles

JavaScript - Create Conversion Tool with HTML, CSS, and JavaScript

Add Comment

How to Create a Simple Unit Conversion App with JavaScript 


How to Create a Simple Unit Conversion App with JavaScript



In this Javascript tutorial, we will see how to create a conversion tool to convert values between different units (e.g., inches to centimeters, pounds to kilograms, Fahrenheit to Celsius) and displays the converted result.



Project Source Code:



<!DOCTYPE html>
<html>
<head>
<title>conversion Tool</title>

<style>

body{ background-color: #f5f5f5; font-family: 'Open Sans', sans-serif; color: #333; }

#conversion-tool{ background-color: #fff; border-radius: 5px; padding: 20px; max-width: 400px;
margin: 20px auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)
}

form{ display: flex; flex-direction: column; }

label{ font-weight: bold; margin-bottom: 5px; }

input[type="number"]:focus, select:focus{ outline: none; }

input[type="number"], select{
border: 1px solid #ddd; border-radius: 3px; padding: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
margin-bottom: 10px; font-size: 16px; background-color: #f2f2f2;
}


/* add a drop icon to the select */
select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6'
xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l6 6 6-6H0z' fill='%23333'
fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 25px;
}

button{ background-color: #333; color: #fff; border:none; border-radius: 5px;
padding: 10px 20px; cursor: pointer; transition: all 0.2s ease-in-out;
}

button:hover{ background-color: #555; }

#output{ font-weight: bold; font-size: 16px; margin-top: 25px; }

#output-value{ color: purple; }

</style>

</head>
<body>


<div id="conversion-tool">
<form>
<label for="input-value">Value to Convert:</label>
<input type="number" id="input-value" min="0">
<br>
<label for="from-unit">Convert From:</label>
<select id="from-unit">
<option value="inches">Inches</option>
<option value="centimeters">Centimeters</option>
<option value="pounds">Pounds</option>
<option value="kilograms">Kilograms</option>
<option value="fahrenheit">Fahrenheit</option>
<option value="celesius">Celesius</option>
</select>
<br>
<label for="to-unit">Convert To:</label>
<select id="to-unit">
<option value="inches">Inches</option>
<option value="centimeters">Centimeters</option>
<option value="pounds">Pounds</option>
<option value="kilograms">Kilograms</option>
<option value="fahrenheit">Fahrenheit</option>
<option value="celesius">Celesius</option>
</select>
<br>
<button type="button" id="convert-btn">Convert</button>
<p id="output">Converted Value:<span id="output-value"></span></p>
</form>
</div>

<script>

// This function gets called when the "Convert" button is clicked
function convert()
{
// Get the user's input value and selected units
const inputValue = document.getElementById("input-value").value;
const fromUnit = document.getElementById("from-unit").value;
const toUnit = document.getElementById("to-unit").value;

// Initialize the output value as the input value
let outputValue = inputValue;

// Check the selected units and perform the appropriate calculations
if(fromUnit === "inches" && toUnit === "centimeters"){
outputValue = inputValue * 2.54;
}
else if(fromUnit === "centimeters" && toUnit === "inches"){
outputValue = inputValue / 2.54;
}

else if(fromUnit === "pounds" && toUnit === "kilograms"){
outputValue = inputValue * 0.453592;
}

else if(fromUnit === "kilograms" && toUnit === "pounds"){
outputValue = inputValue / 0.453592;
}

else if(fromUnit === "fahrenheit" && toUnit === "celesius"){
outputValue = (inputValue-32) * (5/9);
}

else if(fromUnit === "celesius" && toUnit === "fahrenheit"){
outputValue = (inputValue * (9/5)) + 32;
}

// Update the output field with the converted value
document.getElementById("output-value").innerHTML = outputValue;
}

// Attach the "convert" function to the "Convert" button's click event
document.getElementById("convert-btn").addEventListener("click", convert);


</script>


</body>
</html>




Code Explanation:

this JavaScript code, allows users to convert values between different units and displays the converted result..

This JavaScript code performs the following actions:

1 - The code defines a JavaScript function called convert() that performs the unit conversion.

2 - It retrieves user input values (value to convert, source unit, and target unit) from the HTML form.

3 - The function then calculates the converted value based on the selected units.

4 - The result of the conversion is displayed on the webpage..



OUTPUT:

Create Conversion Tool with HTML, CSS, and JavaScript

JavaScript - Create Note Taking App

Add Comment

How to Create a Note-Taking Application with JavaScript and Local Storage


JavaScript - Create Note Taking App


In this Javascript tutorial, we will see how to use JavaScript to create a basic note-taking application that allows users to add and delete notes saving and loading notes from local storage.




Project Source Code:



<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<!-- fontawesome -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+
ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />
<style>
#app{
width: 80%;
margin: 0 auto;
font-family: Arial, sans-serif;
}

#new-note{
display: flex;
align-items: center;
}

#new-note i{
font-size: 24px;
margin-right: 10px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}

#new-note i:hover{ color: #0095ff; }

#new-note input{
border: none;
border-bottom: 2px solid #ccc;
font-size: 18px;
padding: 10px;
width: 100%;
transition: all 0.3s ease-in-out;
}

#new-note input:focus{border-bottom: 2px solid #0095ff; outline: none;}

#notes{margin-top: 20px;}

#notes li{
list-style: none;
border-bottom: 1px solid #ccc;
padding: 10px;
display: flex;
align-items: center;
}

#notes li i{
margin-right: 10px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}

#notes li i:hover{ color: #0095ff; }

#notes li p{ margin: 0; font-size: 18px;}
</style>

</head>
<body>

<div id="app">
<h1>Note Taking App</h1>
<div id="new-note">
<i class="fas fa-plus"></i>
<input type="text" placeholder="take a new note...">
</div>
<ul id="notes"></ul>
</div>

<script>

// Select the "new note" div, the input field, and the notes list
const newNote = document.querySelector("#new-note");
const noteInput = newNote.querySelector("input");
const notesList = document.querySelector("#notes");

// Check if there are any saved notes in the local storage
// If there are, render them on the page
const savedNotes = JSON.parse(localStorage.getItem("notes")) || [];

if(savedNotes.length > 0)
{
savedNotes.forEach(note => {
const newNoteItem = document.createElement("li");
newNoteItem.innerHTML = `<i class="fas fa-trash"></i><p>${note}</p>`;
notesList.appendChild(newNoteItem);
});
}

// Add an event listener to the "new note" div
newNote.addEventListener("click", addNewNote);

// When the user click on the div, create a new note and add it to the list
// Also, save all notes in the list to the local storage
function addNewNote(e){

e.preventDefault();
const newNoteText = noteInput.value;
if(newNoteText === ""){
return;
}

const newNoteItem = document.createElement("li");
newNoteItem.innerHTML = `<i class="fas fa-trash"></i><p>${newNoteText}</p>`;
notesList.appendChild(newNoteItem);
noteInput.value = "";

const notes = [...notesList.querySelectorAll("li p")].map(note => note.textContent);
localStorage.setItem("notes", JSON.stringify(notes));
}

// Add an event listener to the notes list
notesList.addEventListener("click", deleteNote);

// When the user clicks the delete button next to a note, remove the note from the list
// Also, save all notes in the list to the local storage
function deleteNote(e){
if(e.target.classList.contains("fa-trash")){
e.target.parentElement.remove();
notes = [...notesList.querySelectorAll("li p")].map(note => note.textContent);
localStorage.setItem("notes", JSON.stringify(notes));
}
}




</script>


</body>
</html>





OUTPUT:

Create Note Taking App In JavaScript





if you want the source code click on the download button below

Javascript - Create a Digital Clock

Add Comment

How To Make a Digital Clock Using Javascript  


Create a Digital Clock in Javascript


In This Javascript Tutorial we will See How To build a digital clock using JavaScript. 
The clock updates automatically every second, providing an interactive and dynamic experience for the users. 
Feel free to customize the styling or integrate the clock into your own web projects. Remember to experiment with the code and explore additional features you can add to enhance the clock's functionality . 



Project Source Code:

    
<!DOCTYPE html>
<html>
<head>
<title>Digital Clock</title>

<style>
#clock{
display: block;
width: 40%;
margin: 10px auto;
padding: 10px;
background-color: #3c3c3c;
color: #fff;
font-size: 36px;
font-family: Arial, sans-serif;
text-align: center;
border-radius: 5px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
}

</style>


</head>
<body>

<div id="clock"></div>

<script>

function updateClock()
{
// get the current time
var currentTime = new Date();
// get the hours, minutes, and seconds from the
// current time
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
// format the hours, minutes,
// and seconds to always display two digits
if(hours < 10) { hours = "0" + hours; }

if(minutes < 10) { minutes = "0" + minutes; }

if(seconds < 10) { seconds = "0" + seconds; }

// get the clock div
var clockDiv = document.getElementById("clock");

// update the clock div with the current time
clockDiv.innerHTML = hours + ":" + minutes + ":" + seconds;

}

// calls the updateClock() function every 1000 milliseconds
// (or 1 second)
setInterval(updateClock, 1000);

</script>

</body>
</html>





Code Explanation:

This JavaScript code consists of a function called updateClock(), which is responsible for fetching the current time, formatting it, and updating the clock display on the webpage. Let's break down the code to understand its functionality.

Fetching Current Time: The updateClock() function starts by creating a new Date object called currentTime, which holds the current date and time. 

Extracting Hours, Minutes, and Seconds: Next, the code extracts the hours, minutes, and seconds from the currentTime object using the getHours(), getMinutes(), and getSeconds() methods, respectively.

Formatting Time: To ensure that the hours, minutes, and seconds are always displayed with two digits, the code checks if any of them are less than 10. If so, a leading zero is added to the value using simple conditional statements. 

Updating the Clock Display: The code retrieves the clock element from the webpage using the getElementById() method and assigns it to the clockDiv variable. Then, it updates the innerHTML property of the clockDiv with the formatted time (hours, minutes, and seconds). 

Automatic Clock Update: To make the clock update every second, the code employs the setInterval() function. It calls the updateClock() function every 1000 milliseconds (1 second), ensuring that the displayed time is always accurate and up to date.




OUTPUT:

Digital Clock Using Javascript

JavaScript Projects Source Code

Add Comment

Download JavaScript Projects and Scripts

JavaScript Projects Source Code

Are you Loking for JavaScript Projects to Download?

JavaScript is one of the must know programming language if you want to become a web developper.

if you want to learn JavaScript so you can start building your own projects then check this premium course >>check this javascript course<< .

now let's see the projects list!

1) JavaScript Slider - 3D & 2D HTML5 Image Slider

JavaScript Project 1 Source Code

"Cute Slider is a unique and easy to use slider with awesome 3D and 2D transition effects, captions, 4 ready to use templates, and more impressive features which written with pure object oriented javascript."



>> get a web-hosting + a free domain for a year <<



2) JavaScript Builder - HTML Email & Page Builder

JavaScript Projects 2 Source Code

"BuilderJS is a JavaScript plugin which provides a web user interface for building / editing HTML emails or web pages."




>> get a web-hosting + a free domain for a year <<



3) JavaScript Game - Creepy Flappy

JavaScript Projects 3 Source Code

"The Creepy Flappy is an HTML5 (pure javascript) game where a strange bird must fly without hitting the blocks. Try to get as far as possible. Enjoy atmospheric sounds and graphics."







>> get a web-hosting + a free domain for a year <<



4) JavaScript Search – Hotels Search Form

JavaScript Projects 4 Source Code

"Ocean Star is a JavaScript library for customizable and intuitive hotel search forms with plenty of different features and options. It has a responsive country autocomplete, powerful date range picker with a modern calendar widget, and guest selector with the possibility to add fields dynamically. It makes it easy to add a great-looking hotel search forms to your website or application."






>> get a web-hosting + a free domain for a year <<



5) JavaScript NAVX - Ultimate Navigation Plugin

JavaScript Projects 5 Source Code

"NAVX does not use jQuery or other library to work. It’s fast!,Ready to use on mobile phones, tablets and desktop devices."





>> get a web-hosting + a free domain for a year <<



6) Fab Buttons, Message Box, Cookie Law Alert and Contact Form

JavaScript Projects 6 Source Code

"A simple pure Javascript plugin. For corner sweet buttons, cookie law alerts, working contact forms, message boxes and much more."






>> get a web-hosting + a free domain for a year <<



7) jQuery Countdown

JavaScript Projects 7 Source Code

"jCountdown is a jQuery plugin, you can easily to use it on your site."



>> get a web-hosting + a free domain for a year <<



8) Image Cropper, Responsive Uploading and Ratio Cropping Plugin

JavaScript Projects 8 Source Code

"Crop images with Slim, a cross platform Image Cropping and Uploading plugin. It’s very easy to setup and features beautiful graphics and animations."




>> get a web-hosting + a free domain for a year <<



9) Smart Forms

JavaScript Projects 9 Source Code

"Smart Forms is a responsive professional Form Framework with a clean consistent Form UI. The framework includes a variety of form Widgets such as Datepickers, Timepickers, Monthpickers, Colorpickers, Numeric Steppers, UI Sliders, Google maps, toggle switches validation, masking among other features."






>> get a web-hosting + a free domain for a year <<



10) Upload Image, Ratio with Drag and Drop

JavaScript Projects 10 Source Code

"an HTML5 Upload image tool, full use of HTML5 with canvas (with fallback options). Together with a ratio and drag & drop."



>> get a web-hosting + a free domain for a year <<



11) Media Boxes Portfolio - jQuery Grid Gallery Plugin

JavaScript Projects 11 Source Code

"Media Boxes Portfolio is a featured jQuery grid plugin that allows you to display all kind of content in a highly powerful grid. Use it for blog posts, display media, clients, portfolios, shopping carts, galleries and all you can imagine."






>> get a web-hosting + a free domain for a year <<



12) jQuery Banner Rotator / Slideshow

JavaScript Projects 12 Source Code

"This is a jQuery banner rotator plugin featuring multiple transitions. The thumbnails and buttons allow for easy navigation of your banners/ads. The banner rotator is also re-sizable and configurable through the plugin’s parameters."







>> get a web-hosting + a free domain for a year <<








Inscription à : Articles (Atom)