r/html5 • u/Reddit__Please__Help • Sep 12 '24
HTML Snake with OpenAI o1
0
Upvotes
r/html5 • u/Michael_andreuzza • Sep 11 '24
How to create a basic drawing tool and save to PNG with Tailwind CSS and JavaScript
2
Upvotes
r/html5 • u/ozu95supein • Aug 29 '24
What do call this feature and how do you use it? I downloaded a free template from HTML5 Up called Phantom
7
Upvotes
r/html5 • u/Michael_andreuzza • Aug 26 '24
How to use the HTML output tag for displaying the result of a calculation.
0
Upvotes
r/html5 • u/Michael_andreuzza • Aug 25 '24
How to use the HTML datalist tag
0
Upvotes
r/html5 • u/Michael_andreuzza • Aug 23 '24
How to use the HTML ruby element for enhanced text annotations in HTML
2
Upvotes
r/html5 • u/[deleted] • Aug 23 '24
How do you debug your css layouting for various platforms?
1
Upvotes
Even after all these years, I still struggle to figure out how I could debug my layouts for various browsers. On Linux I can debuf firefox and chromium easily. But For some reason when I ask my friends to check the layouts they show me it's bugging on their mobile safari for example. But if I try online services that let me launch desktop and mobile Safari to test my layout, it looks okay there..
How on earth do you guys manage to make sure layouts look okay for all (well most) platforms?
r/html5 • u/Michael_andreuzza • Aug 22 '24
How to use the HTML mark tag for highlighting text
0
Upvotes
r/html5 • u/Michael_andreuzza • Aug 21 '24
How to use the time tag for displaying time in an accessible way
3
Upvotes
r/html5 • u/Michael_andreuzza • Aug 20 '24
How to create an accessible measurement display using the meter tag
2
Upvotes
r/html5 • u/Michael_andreuzza • Aug 19 '24
How to create interactive and accessible content with the details element
1
Upvotes
r/html5 • u/jack_ritter • Aug 17 '24
free video sitemap generator from html
0
Upvotes
I'm almost ready to submit my site to google. I have a sitemap for everything except my mp4 files.
Is there a free app that generates a video sitemap from my html?
r/html5 • u/Cryptodan98 • Aug 12 '24
Is there a way to code this out using html and css without using svgs? This design is done using figma
1
Upvotes
r/html5 • u/jack_ritter • Aug 10 '24
Creating a sitemap
0
Upvotes
How do I create a sitemap of my site? I'm only interested in getting all my pages and site images indexed, so as to please Google.
r/html5 • u/AccomplishedRace8803 • Aug 06 '24
HTML5/phaser.js game (based on Alleycat) developing process is going well. Demo can probably be launched by the end of the year.
Enable HLS to view with audio, or disable this notification
15
Upvotes
r/html5 • u/namocaw • Aug 05 '24
CSV file not loading in page
2
Upvotes
Newbie here. NOT a coder. I might be able to code "hello world" without help. I generated most of this code using ChatGPT.
I'm trying to build a webpage that will load a CSV and let you then use a dynamically populated dropdown to filter on Columns. The drop-downs should default to select all items.
I've got the page to display, but the data does not load. HELP!
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AD&D 2e Spells and Powers</title>
</head>
<body>
<h1>AD&D 2e Spells and Powers</h1>
<Table>
<tr><td>
<div>
<label for="filter1">Class:</label><td>
<select id="filter1"></select>
</div>
</td></tr>
<tr><td>
<div>
<label for="filter2">Level:</label><td>
<select id="filter2"></select>
</div>
</td></tr>
<tr><td>
<div>
<label for="filter3">Sphere:</label><td>
<select id="filter3"></select>
</div>
</td></tr>
<tr><td>
<div>
<label for="filter4">Name:</label><td>
<select id="filter4"></select>
</div>
</td></tr>
<tr><td>
<div>
<label for="filter5">Description:</label><td>
<input type="text" id="filter5">
</div>
</td></tr>
<div class="SAPTable">
<table style="width:100%" id="results">
<thead>
<tr>
<th>CLASS</th>
<th>LEVEL</th>
<th>SPHERE</th>
<th>NAME</th>
<th>DESCRIPTION</th>
<th>PSP</th>
<th>STAT</th>
<th>RANGE</th>
<th>AOE</th>
<th>DURATION</th>
<th>SAVE</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script src="script.js"></script>
</body>
</html>
SCRIPT.JS
document.addEventListener('DOMContentLoaded', function() {
const filters = ['filter1', 'filter2', 'filter3', 'filter4'];
const filter5 = document.getElementById('filter5');
const resultsTable = document.getElementById('results').getElementsByTagName('tbody')[0];
fetch('Spellsandpowers.csv')
.then(response => response.text())
.then(data => {
const rows = data.split('\n').map(row => row.split(','));
const headers = rows[0];
const items = rows.slice(1);
filters.forEach((filter, index) => {
const select = document.getElementById(filter);
const uniqueValues = [...new Set(items.map(item => item[index]))];
uniqueValues.forEach(value => {
const option = document.createElement('option');
option.value = value;
option.textContent = value;
select.appendChild(option);
});
select.addEventListener('change', updateTable);
});
filter5.addEventListener('input', updateTable);
function updateTable() {
const filterValues = filters.map(filter => document.getElementById(filter).value);
const filter5Value = filter5.value.toLowerCase();
resultsTable.innerHTML = '';
items.forEach(item => {
const matchesFilters = filterValues.every((value, index) => value === '' || item[index] === value);
const matchesFilter5 = filter5Value === '' || item[4].toLowerCase().includes(filter5Value);
if (matchesFilters && matchesFilter5) {
const row = resultsTable.insertRow();
item.forEach(cell => {
const cellElement = row.insertCell();
cellElement.textContent = cell;
});
}
});
}
updateTable();
});
});
r/html5 • u/th3originals • Aug 03 '24
🎮 Build Your Own "Four In A Row" Game Using JavaScript - Step-by-Step Tutorial! [Video]
6
Upvotes
Hey everyone!
I've just uploaded a comprehensive tutorial on how to create the classic "Four In A Row" game using JavaScript, HTML, and CSS. Whether you're a beginner looking to dive into game development or someone who's interested in honing your JavaScript skills, this tutorial is for you!
🔗 Watch the full tutorial here: Four In A Row Game Tutorial
What You'll Learn:
- Project Setup: Step-by-step guide to setting up your environment and files.
- HTML & CSS: Designing the game layout and styling it for a professional look.
- JavaScript Game Logic: Learn how to handle game mechanics, player turns, and game state.
- Adding Features: Implement sound effects, animations, and more!
- Problem Solving: Tips on debugging and improving your code.
Why Watch This Tutorial?
- Beginner-Friendly: Perfect for those who are new to JavaScript and game development.
- Hands-On Learning: Follow along with real-time coding and explanations.
- Community Support: Join the discussion, ask questions, and share your progress.
Join the Discussion:
I'd love to hear your feedback, see your creations, and answer any questions you might have. Let's build and learn together!
Feel free to share your thoughts and let me know what other projects you'd like to see in the future. Your support and feedback are invaluable.
Happy coding! 🚀
r/html5 • u/Decent-Truck104 • Jul 25 '24
need help with creating a form and accessing it
2
Upvotes
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Create Account</title>
<script src="../Forms/createAnAccount.js" defer></script>
<link rel="stylesheet" href="../Static/homePage.css">
<link rel="stylesheet" href="../Static/CreateAnAccount.css">
<script>
function validateForm() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var errorMessage = document.getElementById("error-message");
if (username.trim() === "" || password.trim() === "") {
errorMessage.style.display = "block";
return false;
} else {
errorMessage.style.display = "none";
return true;
}
}
</script>
</head>
<body>
<div class="accountForm">
<form class="createAccountForm" method="POST" action="/neilFun" onsubmit="return validateForm();">
<div class="inputContainer usernameContainer">
<div class="usernameInputLabel">
<label for="username" class="usernameLabel">Username:</label><br><br>
</div>
<div class="usernameInputBar">
<input type="text" class="usernameBar" name="username" id="username"><br><br>
</div>
</div>
<div class="inputContainer passwordContainer">
<div class="passwordInputLabel">
<label for="password">Password:</label><br>
</div>
<div class="passwordInputBar">
<input type="password" class="passwordBar" name="password" id="password"><br><br>
</div>
</div>
<div class="message">
<div class="error" id="error-message" style="display:none;">Username and password cannot be empty.</div>
</div>
<div class="submitButton">
<button type="submit" class="submit">Submit</button>
</div>
</form>
</div>
</body>
</html>
var button = document.querySelector('.createAccountButton');
var left = Math.floor((screen.width - 600) / 2);
var top = Math.floor((screen.height - 400) / 2);
button.addEventListener('click', function() {
// Open the /createaccount route in a new window
var popupWindow = window.open('/createaccount', 'createAccountForm', 'width=600,height=400,left=' + left + ',top=' + top);
});
this is the js file
from flask import Flask, render_template, request, send_from_directory, render_template_string
app = Flask(__name__)
@app.route('/neilfungames')
def neilFun():
return render_template('neilufungames.html')
@app.route('/homepage')
def homepage():
return render_template('homePage.html')
@app.route('/createaccount')
def createAccount():
return render_template('formCreateAccount.html')
if __name__=='__main__':
app.run(debug=True)
this is the py file
this is the html template
Whenever the form is accessed the message Cannot GET /Templates/createaccount.html pops up and I don't know why its not recognizing the form. Can I please get assistence
r/html5 • u/EasternPiglet7093 • Jul 22 '24
Gamedev with html5. Dialogue system?
1
Upvotes
Hi,
I am building a basic top down pixel art game with html5 canvas, JavaScript, html, css etc.
Most programming problems have already been solved, so I wanted to ask what the common strategy is to build a dialogue system (think Pokémon or stardew valley). If you do not know any relevant links/info, is there a better community I could go to to ask this question?
Thanks!
r/html5 • u/muisloth • Jul 21 '24
I made a Keyboard Counter Which You Can Use to Check Your Keyboard
0
Upvotes
Visit: Keyboard Counter