Web Development
Affichage des articles dont le libellé est Web Development. Afficher tous les articles
Affichage des articles dont le libellé est Web Development. Afficher tous les articles

JavaScript - Changing Table Row Background Color Based on Column Value

Add Comment

How To Modify Table Row Background Color  Depending on Value Using Javascript  


Modify Table Row Background Color Depending on Value Using Javascript



In this Javascript tutorial, we will explore how to enhance the visual representation of product stock status on a web page. By applying different CSS classes to each product row based on its stock quantity, we can provide users with a clear indication of the availability level for each item. Let's delve into the code and observe how it works.



Project Source Code:


<!DOCTYPE html>
<html>
<head>
<title>Table-Stock</title>

<style>

*{
box-sizing: border-box;
margin: 0; padding: 0;
}

body{
background-color: #f7f7f7;
font-family: Arial, sans-serif;
font-size: 16px;
}

table{
border-collapse: collapse;
margin: 20px auto;
width: 40%;
}

th{
text-align: left;
background-color: #333;
color: #fff;
padding: 12px;
}

td{ padding: 12px }

.out-of-stock{ background-color: #f44336; color: #fff;}

.high-stock{ background-color: #8bc34a; color: #fff; }

.medium-stock{ background-color: #ffa726; color: #fff; }

.low-stock{ background-color: #ff7043; color: #fff; }
</style>

</head>
<body>
<table>

<thead>
<tr>
<th>Product</th>
<th>Stock</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr class="product-row">
<td>Product 1</td>
<td class="stock">10</td>
<td>$10</td>
</tr>
<tr class="product-row">
<td>Product 2</td>
<td class="stock">5</td>
<td>$20</td>
</tr>
<tr class="product-row">
<td>Product 3</td>
<td class="stock">0</td>
<td>$15</td>
</tr>
<tr class="product-row">
<td>Product 4</td>
<td class="stock">20</td>
<td>$15</td>
</tr>
<tr class="product-row">
<td>Product 5</td>
<td class="stock">1</td>
<td>$25</td>
</tr>
<tr class="product-row">
<td>Product 6</td>
<td class="stock">7</td>
<td>$37</td>
</tr>
<tr class="product-row">
<td>Product 7</td>
<td class="stock">3</td>
<td>$19</td>
</tr>
<tr class="product-row">
<td>Product 8</td>
<td class="stock">30</td>
<td>$12</td>
</tr>
</tbody>
</table>

<script>

// Select all elements with the class "product-row"
const rows = document.querySelectorAll(".product-row");

// Loop through each "product-row" element
for(let i = 0; i < rows.length; i++){

// Get the stock value of the current product
const stock = rows[i].querySelector(".stock").textContent;

// Add a class to the current element based on stock value
// Product is out of stock
if(stock == 0){
rows[i].classList.add("out-of-stock");
}

// Product has low stock
else if(stock > 0 && stock < 5){
rows[i].classList.add("low-stock");
}

// Product has medium stock
else if(stock >= 5 && stock < 10){
rows[i].classList.add("medium-stock");
}
// Product has high stock
else { rows[i].classList.add("high-stock"); }

}

</script>

</body>
</html>



Code Explanation:

The provided JavaScript code performs the following steps:

1 - Selecting Elements: Using the querySelectorAll method, all elements with the class "product-row" are selected and stored in the "rows" variable.

2 - Iterating Through Each Product Row: A for loop is used to iterate through each "product-row" element.

3 - Retrieving Stock Value: The current stock value of the product is extracted from the corresponding element by accessing the text content of the element with the class "stock". This value is stored in the "stock" variable.

4 - Applying Stock Status Classes: Based on the stock value, different CSS classes are added to the current product row element using the classList.add method.
* If the stock value is 0, the "out-of-stock" class is added, indicating that the product is out of stock. 
* If the stock value is greater than 0 and less than 5, the "low-stock" class is added, indicating that the product has low stock. 
*If the stock value is between 5 and 10 (inclusive), the "medium-stock" class is added, indicating that the product has medium stock. 
*If the stock value is greater than or equal to 10, the "high-stock" class is added, indicating that the product has high stock.




OUTPUT:

Change Table Row Background Color Based on Value Using Javascript

JavaScript - How To Draw Chess Board

Add Comment

Learn How to Draw a Chess Board Using JavaScript

How To Draw Chess Board In JavaScript



In this Javascript tutorial, we will see how to use JavaScript to dynamically generate a chess board on a web page. We'll walk through the code and explain each step along the way, allowing you to understand the logic and techniques behind creating a visually appealing chess board.



Project Source Code:


<!DOCTYPE html>
<html>
<head>
<title>Chess Board</title>

<style>

#chess-board{ border-collapse: collapse;
margin: 0 auto; border: none}

td{ width: 50px; height: 50px; border: none;}

td:hover{ background-color: #ffa07a; }

.black{ background-color: #b58863; }

.white{ background-color: #f0d9b5; }


</style>

</head>
<body>

<!-- Create a table with ID "chessBoard" -->
<table id="chess-board">
<!-- Create a table body -->
<tbody>
<script>
// Set initial color to white
var color = 'white';
// Loop through each row
for(var i = 0; i < 8; i++){
// Create a new table row
document.write("<tr>");
// Loop through each cell in the row
for(var j = 0; j < 8; j++){
// Create a new table cell with the current color class
document.write("<td class='"+color+"'></td>")
// Switch the color for the next cell
color = (color=='white') ? 'black':'white';
}

// Switch the color for the next row
color = (color=='white') ? 'black':'white';
// Close the table row
document.write("</tr>");
}

</script>
</tbody>
</table>

</body>
</html>



Code Explanation:

This JavaScript code generate an 8x8 chess board using a combination of HTML, JavaScript, and a simple loop. Let's break down the code and understand its functionality.

Creating the Chess Board Structure: We begin by creating a <table> element with the ID "chess-board". This table will serve as the container for our chess board.

Generating the Table Body: Inside the table, we create a <tbody> element to hold the rows and cells of the chess board.

JavaScript Logic: Within the <script> tag, we initialize a variable called "color" and set it to 'white'. This variable will keep track of the alternating colors of the chess board squares.

Looping through Rows and Cells: We use a nested loop to iterate over each row and cell in the chess board. The outer loop handles the rows, while the inner loop handles the cells within each row.

Creating Table Rows: For each row, we dynamically create a new table row using the document.write() method. This ensures that the HTML is generated dynamically during runtime.

Creating Table Cells: Inside the inner loop, we create a new table cell (<td>) with the current color class. The color class is applied to the cell using the class attribute and is determined by the "color" variable. Initially, the color is set to 'white'.

Alternating Cell Colors: After creating each cell, we switch the color for the next cell using a ternary operator. If the current color is 'white', we change it to 'black', and vice versa. This ensures that the colors alternate correctly across the chess board.

Alternating Row Colors: Once we finish iterating through all the cells in a row, we switch the color again to ensure that the row colors alternate correctly.

Closing the Table Row: After creating all the cells in a row, we close the table row (</tr>).

Looping Continuation: The process repeats for the next row until we generate all 8 rows of the chess board.



OUTPUT:
How To Make Chess Board Using JavaScript

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

React Course

3 Comments

Learn React to Build Rich Interactive User Interfaces


Learn React

What is React.js?

React is a javascript libraries for front-end development, that allow to build faster web applications created by facebook.

Why Learn React.js?

according to indeed.com the average salarie to a React.js developer in the united state can go up to the six figure mark
"The average salary for "reactjs developer" ranges from approximately $61,154 per year for Junior Software Engineer to $127,331 per year for Senior Software Engineer." - indeed.com

and in the survey made by stackoverflow React.Js is the most Loved/Wanted Web Frameworks in 2019.




Course 1 - React: Getting Started

this course is a great start for the beginners you will get the fundamental concepts about React and use them to build practical web applications.
Learn React.Js


What You Will Learn:
- React Design's Concept.
- JSX and events handlers, data, and API's.
- React Hooks.
- Communicating between Components.
- Creating a local development environment.
- build small application with React.


TRY THIS COURSE NOW FOR FREE
↓↓↓↓↓↓

Course 2 - React JS and Redux Bootcamp


in this over 12 hours course you will learn React and Redux by building relevant and engaging projects.
redux and react course


in this course You will Learn:
- Dive into React code right away.
- Understand how React fits in the big picture of web development.
- Create relevant and compelling React apps.
- Learn Redux the right way, breaking it down.
- Build apps.
- Explore backend web development.
- Deploy your React applications.


GET THIS COURSE FOR FREE FOR 2 MONTHS
↓↓↓↓↓↓↓↓↓

PHP Course For Beginners

Add Comment

▶ Download PHP Projects Source Code


Learn PHP And Create CMS Project With MySQL



                           Watch The Course Introduction


take this php course


             
        
           Instructor : Edwin Diaz
           Lectures   : 340
           Hours        : 37.5
           Students   > 81,700

This PHP Course Covers the following and then some...
  • Databases in PHP
  • Object Oriented PHP
  • CMS project-similar to (Wordpress)
  • Form Submissions in PHP
  • Security in PHP
  • Variables in PHP
  • Math in PHP
  • Arrays in PHP
  • Control Structures in PHP
  • Comparison Operators in PHP
  • Mayor Loops in PHP
  • Functions in PHP
  • Constants in PHP
  • Super Globals in PHP
  • Sessions in PHP
  • Cookies in PHP



take this php course





More Courses you may like:


Inscription à : Articles (Atom)