Posts

Showing posts from October, 2024

Click Count Data Page: Spin/Vote

-
  Click Count Data Page: Spin/Vote  Code: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Voting Page</title>     <script>         let candidates = {             candidate1: { votes: 0, currentGap: 1, prevGapHistory: [] },             candidate2: { votes: 0, currentGap: 1, prevGapHistory: [] },             candidate3: { votes: 0, currentGap: 1, prevGapHistory: [] },             candidate4: { votes: 0, currentGap: 1, prevGapHistory: [] },             candidate5: { votes: 0, currentGap: 1, prevGapHistory: [] },             candidate6: { votes: 0, currentGap: 1, prevGapHistory: [] } // New cand...
Post a Comment
Read more

Voting Page: Individual Vote Count, Individual Voting Gap Count, Total Vote Count

-
Voting Page: Candidate Name, Individual Vote Count, Total Vote Count 6 Candidate: Total Vote Count Big Box-bottom : Code:  <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Voting Page</title>     <script>         // Initial vote counts         let votes = {             option1: 0,             option2: 0         };         // Function to handle voting         function vote(option) {             votes[option]++;             document.getElementById(option + '-count').innerText = votes[option];             updateTotalVotes();       ...
Post a Comment
Read more

"Undo" "Redo" Button with icon: in Page top left

-
  "Undo" "Redo" Button with icon: in Page top left  Code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Editable Table with Undo/Redo</title> </head> <body style="font-family: Arial, sans-serif;"> <div class="toolbar" style="display: flex; gap: 10px; left: 10px; position: fixed; top: 70px;">   <button disabled id="undo-btn" onclick="undoChange()" style="background: lightskyblue; border-radius: 7px; color: white; font-size: 20px; padding: 5px; border: 1px solid; border-radius: 7px;">↺ Undo</button>   <button disabled id="redo-btn" onclick="redoChange()" style="background: lightskyblue; border-radius: 7px; color: white; font-size: 20px; padding: 5px; border: 1px solid; border-ra...
Post a Comment
Read more

Text Box With hidden Text Box : FAQ Style

-
  Text Box With hidden Text Box : FAQ Style  Code: -  <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>FAQ Section</title> </head> <body>   <div style="width: 100%; max-width: 600px; margin: auto; font-family: Arial, sans-serif;">     <h2>People also ask</h2>     <!-- FAQ Item 1 -->     <div style="border-bottom: 1px solid #ddd; padding: 10px 0;" class="faq-item">       <div onclick="toggleFAQ(this)" style="cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: bold; color: #333;">         What does FAQ mean for?         <span style="font-size: 18px; transition: transform 0.3s;" class="arrow">▼</span>       </div...
Post a Comment
Read more

Hide-M (Table/Text/Content): Multi-Section

-
Hide-M (Table/Text/Content): Multi-Section  ( 1-Section  Link  ) ( 2-Section  Link  ) Without "onclick" Attribute: Code:  <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Toggle Data Tables</title> </head> <body>   <h2>Data Tables</h2>   <!-- Stock Table Section -->   <div style="background: lightgrey; padding: 0px;">     <button id="Stock-toggle-Button" style="width: 100%; text-align: left;">Stock (Show Table)</button>     <table border="1" id="Stock-data-Table" style="display: none;">       <thead>         <tr>           <th>Item</th>           <th>Name</th>           ...
Post a Comment
Read more

Hide-2 (Table/Text/Content): 2-Section

-
 Hide (Table/Text/Content): 2-Section  ( 1-Section Link ) ( Multi-Section Link ) Code : <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Toggle Data Tables</title> </head> <body>   <h2>Data Table</h2>   <!-- Stock Table Section -->   <div style="background: lightgrey; padding: 0px;">     <button id="Stock-toggle-Button" onclick="StocktoggleTable()" style="width: 100%; text-align: left;">Stock (Hide Table)</button>     <table border="1" id="Stock-data-Table" style="display: none;">       <thead>         <tr>           <th>Item</th>           <th>Name</th>           <th>Age</th> ...
Post a Comment
Read more

Hide-1 (Table/Text/Content): 1-Section

-
 Hide (Table/Text/Content): 1-Section  ( 2-Section Link ) ( Multi-Section  Link  ) Code : <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Toggle Data Table</title> </head> <body>   <h2>Data Table</h2>   <div style="background: lightgrey; padding: 0px;">     <button id="Stock-toggle-Button" onclick="StocktoggleTable()" style="width: 100%; text-align: left;">Stock (Show Table)</button>         <table border="1" id="Stock-data-Table" style="display: none;">       <thead>         <tr>           <th>Item</th>           <th>Name</th>           <th>Age</th>       ...
Post a Comment
Read more

Data Transfer: Using Separate Page, Single Data

-
 Data Transfer: Single Data  ( Multi Data Link ) Using Separate Page on click Button in 3rd page With on click form open function- Write the html code with script to input data  In: - <form>   <input> To: -  <From >    <Table>       <Body>          <td> Code For: In: - <Button>   <script>     function openFormPage() {       window.location.href = "form-page.html"; // Redirect to the form page     }   </script>   <button onclick="openFormPage()">Go to Form Page</button> ( <script>     function openFormPage() {       window.location.href = "form-page.html"; // Redirect to the form page     }     window.onload = function() {       document.getElementById("openFormButton").onclick = openFormPage;     };   </script> ...
Post a Comment
Read more

Data Transfer: Using Separate Page, Multi Data

-
 Data Transfer: Multi Data  ( Single Data Link ) Using Separate Page on click Button in 3rd page With on click form open function- Write the html code with with script to input in data Table    For: From - <Button> In: - <form>   <input> To: -  <From >    <Table>       <Body>          <td> Code For: From - <Button> Fghh Code For: In - <Button> Fghh In: - <form>   <input> Dghhh Fghh Code For: To - <table> Fghh
Post a Comment
Read more

Screen Reader:

-
  🔊 Listen Welcome to Our Website This is an example page with a page reader feature. When you click on the speaker icon, the text on the page will be read aloud to you.
Post a Comment
Read more

HTML "Attributes"

-
  HTML "Attributes": HTML attributes provide additional information about HTML elements.   HTML Attributes Charectoristic: * All HTML elements can have attributes * Attributes provide additional information about elements * Attributes are always specified in the start tag * Attributes usually come in pairs name/value. like: name="value" Attributes: 1. The href Attribute The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to: Example - < a href ="https://www.w3schools.com" > < /a > 2. The src  Attribute The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed: Example - < img src ="img_girl.jpg" >
Post a Comment
Read more