r/HTML • u/BossAmazing9715 • 15h ago
Question Why does this grid item go in between the row 2 when given grid-row: 1/3? Why does it not span the whole thing but instead finds a spot in between?
r/HTML • u/Oct21actul • 19h ago
simple slot game
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Giveaway Slot Game</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #121212;
color: #f5f5f5;
font-family: 'Arial', sans-serif;
}
.slot-machine {
border: 3px solid #444;
border-radius: 20px;
padding: 30px;
background: linear-gradient(145deg, #2c2c2c, #1e1e1e);
box-shadow: 10px 10px 20px #0d0d0d, -10px -10px 20px #323232;
max-width: 800px;
margin: auto;
}
.slot-reel {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
margin: 20px 0;
}
.slot-item {
width: 120px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
background: #222;
border-radius: 15px;
box-shadow: inset 10px 10px 20px #0d0d0d, inset -10px -10px 20px #323232;
overflow: hidden;
position: relative;
font-size: 3rem;
color: #ffd700;
}
.slot-item span {
position: absolute;
top: 100%;
transition: top 0.2s ease-in-out;
}
.btn-custom {
background-color: #555;
border: none;
color: #f5f5f5;
padding: 12px 25px;
font-size: 1.5rem;
border-radius: 10px;
box-shadow: 5px 5px 10px #0d0d0d, -5px -5px 10px #323232;
}
.btn-custom:hover {
background-color: #666;
color: #fff;
}
.coins-info {
font-size: 1.8rem;
margin-bottom: 20px;
text-align: center;
}
#result-message {
font-size: 1.6rem;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container my-5">
<div class="text-center mb-4">
<h1 class="fw-bold">Giveaway Slot Game</h1>
<p class="lead">Spin the reels and win amazing prizes!</p>
</div>
<div class="slot-machine p-4">
<div class="coins-info">
Coins Left: <span id="coins-count">100</span>
</div>
<div class="slot-reel">
<div class="slot-item" id="reel-1">
<span>🍒</span>
<span>🍋</span>
<span>🍊</span>
<span>⭐</span>
<span>💎</span>
<span>🎁</span>
</div>
<div class="slot-item" id="reel-2">
<span>🍒</span>
<span>🍋</span>
<span>🍊</span>
<span>⭐</span>
<span>💎</span>
<span>🎁</span>
</div>
<div class="slot-item" id="reel-3">
<span>🍒</span>
<span>🍋</span>
<span>🍊</span>
<span>⭐</span>
<span>💎</span>
<span>🎁</span>
</div>
</div>
<div class="text-center">
<button class="btn btn-custom" id="spin-btn">Spin</button>
</div>
<div id="result-message" class="text-center"></div>
</div>
<div class="text-center mt-4">
<button class="btn btn-outline-light" id="earn-coins-btn">Watch Ad to Earn Coins</button>
</div>
</div>
<script>
const symbols = ["🍒", "🍋", "🍊", "⭐", "💎", "🎁"];
const coinsElement = document.getElementById("coins-count");
const resultMessage = document.getElementById("result-message");
let coins = 100;
const reels = [
document.getElementById("reel-1"),
document.getElementById("reel-2"),
document.getElementById("reel-3")
];
function spinReel(reel, index, callback) {
let spins = 20 + index * 10; // Spin longer for later reels
const interval = setInterval(() => {
const spans = reel.querySelectorAll("span");
spans.forEach((span, i) => {
span.style.top = `${(i - 1) * 100}%`;
});
reel.appendChild(spans[0]);
spins--;
if (spins <= 0) {
clearInterval(interval);
callback();
}
}, 100);
}
function startSpin() {
if (coins <= 0) {
resultMessage.textContent = "You are out of coins! Earn more by watching an ad.";
return;
}
coins--;
coinsElement.textContent = coins;
resultMessage.textContent = "";
let results = [];
let completed = 0;
reels.forEach((reel, index) => {
spinReel(reel, index, () => {
completed++;
const result = symbols[Math.floor(Math.random() * symbols.length)];
reel.querySelector("span:first-child").textContent = result;
results.push(result);
if (completed === reels.length) {
checkResults(results);
}
});
});
}
function checkResults(results) {
if (results[0] === results[1] && results[1] === results[2]) {
resultMessage.textContent = `Congratulations! You won a prize: ${results[0]}!`;
} else {
resultMessage.textContent = "Better luck next time!";
}
}
document.getElementById("spin-btn").addEventListener("click", startSpin);
document.getElementById("earn-coins-btn").addEventListener("click", () => {
coins += 10;
coinsElement.textContent = coins;
alert("You earned 10 coins! Keep playing!");
});
</script>
</body>
</html>
r/HTML • u/skeletron233 • 11h ago
Question How to make inspect element changes permanent
The only reason I'm doing this is because I am living in an unsafe environment with my dad so I need some temporary help. I'm using a website called workday which shows my grades every time I show my dad my grades that I've changed with inspect element, he immediately closes the page or refreshes it which deletes all the changes I made and I've avoided showing him my actual grades for now because he keeps closing it I'm currently trying to use the tampermonkey extension where I can edit the code, then paste it into tampermonkey and it will save it for every time I refresh or go back to the page, but idk if I'm using it right because I'm getting errors
This is the only option so that I can be safe, the college workload was way too much for me to handle, and I decided college isn't for me, he keeps yelling and threatening I'm gonna get kicked out, I'm a failure, a bad child, etc. I literally just need this in the meantime until I can move out within a week or few weeks
<div class="gwt-Label WNNO WGMO" data-automation-id="promptOption" id="promptOption-gwt-uid-89" data-automation-label="F" title="F" aria-label="F">F</div>
This is the code that changes the "F" to an "A" on the gradebook I have to type the "A" after the aria-label="F"> thing so <div class="gwt-Label WNNO WGMO" data-automation-id="promptOption" id="promptOption-gwt-uid-89" data-automation-label="F" title="F" aria-label="F">A</div>
So I copy this into tampermonkey and it says "eslint: null - Parsing error: Unexpected token < I wonder if it might be because I had to press a lot of the arrows to go deeper into the code?? Because there's code for the whole box, and then I go deeper and deeper into the code on inspect element and it lets me edit specific parts of the box, including the "F" letter grade, so do I need to copy paste all the parts of the code that's above that arrow? I'm not sure so i also looked up eslint null parsing errors and it's saying on reddit that theres a way to disable eslint? I tried that and it's not working either! Here's my full code: // ==UserScript== // u/name New Userscript // u/namespace http://tampermonkey.net/ // u/version 2024-12-29 // u/description try to take over the world! // u/author You // u/match [website here, I wont link it to be safe] // u/icon [website icon here] // u/grant none // ==/UserScript== (function() { 'use strict'; <div class="gwt-Label WNNO WGMO" data-automation-id="promptOption" id="promptOption-gwt-uid-89" data-automation-label="F" title="F" aria-label="F">A</div> })();
r/HTML • u/Sad_Bit_7143 • 19h ago
Beginner/Learning HTML. Having WebSocket issue when redirect page
I'm following the W3School on linking pages, and I’m having a problem. When I click a link to go to another page, the website switches between pages without visible problems. But, I see this error in the console :
WebSocket connection to 'ws://localhost:5500/[path]/ws' failed: WebSocket is closed due to suspension.
My Setup:
- Editor: VSCode
- Server: Live Server extension
- Code: HTML
I don’t need WebSockets for what I’m doing as it is basic HTML, so I’m not sure why this error is happening. Can I ignore it, or is there a way to fix it / Is there something in Live Server’s settings I need to adjust to stop this from happening? Thanks!
r/HTML • u/BossAmazing9715 • 1d ago
Question Beginner trying to learn grid. How would I do this with grid? Specifically how do I make the two on the left and right be halfway between the middle two?
r/HTML • u/Ok_Actuary_7948 • 1d ago
Custom HTML not showing in Wordpress Site as a visitor
Hello,
I am not a noob, but I am no expert either. I am developing a website where I am doing a custom HTML that shows an embedded google map that shows shops in 5 km around. It is showing in the Page editor, but when I save it and try to see it as a visitor it vanishes.
Do I need to add something to the theme to show the google maps?
I am using Wordpress 6.7.1, Kadence Theme 1.2.14
r/HTML • u/Inside_Oil_6072 • 1d ago
Portafolio
I'm starting my portfolio and I want your opinion, I'm a beginner
r/HTML • u/ChangeOfTack • 1d ago
Multiple tables with different formatting
I want to have two tables follow one another, each with different formatting. I've tried the following, which doesn't work, because it applies the same formatting to both tables. This code:
Test card 2 for rows
<hr id=answer>
<style>
table, td
{
font-size: 20px;
text-align: center;
width: 30%;
vertical-align: top;
padding: 10px;
height: 10px;
margin-right: auto;
margin-left: auto;
}
table, th
{
font-size: 15px;
font-weight: normal;
text-align: center;
width: 30%;
vertical-align: bottom;
padding: 10px;
height: 10px;
margin-right: auto;
margin-left: auto;
}
</style>
<table>
<thead>
<tr>
<th>
Header 1A
</th>
<th>
Header 2A
</th>
<th>
Header 3A
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
It 1A
</td>
<td>
It 2A
</td>
<td>
It 3A
</td>
</tr>
</tbody>
</table>
produces this result:
which is what I want for the first table. But this code:
Test card 2 for rows
<hr id=answer>
<style>
table, td
{
font-size: 20px;
text-align: center;
width: 30%;
vertical-align: top;
padding: 10px;
height: 10px;
margin-right: auto;
margin-left: auto;
}
table, th
{
font-size: 15px;
font-weight: normal;
text-align: center;
width: 30%;
vertical-align: bottom;
padding: 10px;
height: 10px;
margin-right: auto;
margin-left: auto;
}
</style>
<table>
<thead>
<tr>
<th>
Header 1A
</th>
<th>
Header 2A
</th>
<th>
Header 3A
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
It 1A
</td>
<td>
It 2A
</td>
<td>
It 3A
</td>
</tr>
</tbody>
</table>
<style>
table, th, td
{
text-align: left;
vertical-align: top;
padding: 10px;
height: 10px;
margin-right: auto;
margin-left: auto;
}
</style>
<table>
<thead>
<tr>
<th>
Header 1B
</th>
<th>
Header 2B
</th>
<th>
Header 3B
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
It 1B
</td>
<td>
It 2B
</td>
<td>
It 3B
</td>
</tr>
</tbody>
</table>
produces this result:
The bottom table is as I want it, left justified. But I wanted to keep the top table centered.
What am I doing wrong?
r/HTML • u/tinawoman • 1d ago
free online visual HTML editor?
I have a Canva email template that was created for the nonprofit I work for...the problem I found is that if I export the embed HTML from Canva, it only creates an image for the whole email. Not the actual html formatting of the email. Not what I need.
Since the program we use to send emails to donors (DonorSnap) only offers a text editor with an HTML tab for formatting emails, I need to recreate the Canva design in HTML to create a template for all future emails.
I know enough basic HTML to figure this out, I think...I just would like some sort of visual editor to help me. Bonus if it has drag/drop features and prebuilt templates to mess around with....though not mandatory.
Mostly I just need something free and easy for me to figure out quickly.
r/HTML • u/imnotanuser_14 • 1d ago
Question image not loading on another pc
hi! can you help me?
i'm a beginner (literally this is my first attemp) and i can't understand why the image isn't loading. on my pc where i made it, it works, but when i share it with another dispositive look's like the second image
r/HTML • u/ChangeOfTack • 1d ago
Multiple tables with different formatting
I want to have two tables follow one another, each with different formatting. I've tried the following, which doesn't work, because it applies the same formatting to both tables. This code:
Test card 2 for rows
<hr id=answer>
<style>
table, td
{
font-size: 20px;
text-align: center;
width: 30%;
vertical-align: top;
padding: 10px;
height: 10px;
margin-right: auto;
margin-left: auto;
}
table, th
{
font-size: 15px;
font-weight: normal;
text-align: center;
width: 30%;
vertical-align: bottom;
padding: 10px;
height: 10px;
margin-right: auto;
margin-left: auto;
}
</style>
<table>
<thead>
<tr>
<th>
Header 1A
</th>
<th>
Header 2A
</th>
<th>
Header 3A
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
It 1A
</td>
<td>
It 2A
</td>
<td>
It 3A
</td>
</tr>
</tbody>
</table>
produces this result:
which is what I want for the first table. But this code:
Test card 2 for rows
<hr id=answer>
<style>
table, td
{
font-size: 20px;
text-align: center;
width: 30%;
vertical-align: top;
padding: 10px;
height: 10px;
margin-right: auto;
margin-left: auto;
}
table, th
{
font-size: 15px;
font-weight: normal;
text-align: center;
width: 30%;
vertical-align: bottom;
padding: 10px;
height: 10px;
margin-right: auto;
margin-left: auto;
}
</style>
<table>
<thead>
<tr>
<th>
Header 1A
</th>
<th>
Header 2A
</th>
<th>
Header 3A
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
It 1A
</td>
<td>
It 2A
</td>
<td>
It 3A
</td>
</tr>
</tbody>
</table>
<style>
table, th, td
{
text-align: left;
vertical-align: top;
padding: 10px;
height: 10px;
margin-right: auto;
margin-left: auto;
}
</style>
<table>
<thead>
<tr>
<th>
Header 1B
</th>
<th>
Header 2B
</th>
<th>
Header 3B
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
It 1B
</td>
<td>
It 2B
</td>
<td>
It 3B
</td>
</tr>
</tbody>
</table>
produces this result:
The bottom table is as I want it, left justified. But I wanted to keep the top table centered.
What am I doing wrong?
r/HTML • u/whateverwhoknowswhat • 2d ago
Question Where can I find out which tags are being depreciated soon?
See title
r/HTML • u/Substantial-Rip-9705 • 3d ago
I'm starting to get a little confused, cause why is this the second time i've done it they way it asks even and it won't give me the satisfaction of being correct
r/HTML • u/the_dawster • 3d ago
(button).click() method not working
I'm currently developing a chrome extension that auto skips youtube ads when the skip button appears. I'm able to detect and grab the skip button through js with no problem, but the .click() method just doesn't seem to do anything. i've played around with the button to see if other methods were also non functional, or maybe even tampered with by Youtube somehow and I've yet to find the isue. Is there some other work around I could use?
const
observer = new
MutationObserver
((
mutationList
,
observer
)
=>
{
const
skipButton = document.querySelector(".ytp-skip-ad-button")
if (skipButton){
console.log("skipping ad: " + skipButton.outerHTML)
// debugging
for (
const
method in skipButton) {
if (typeof skipButton[method] === "function") {
console.log(`skipButton method: ${method}`);
}
}
skipButton.click()
}
})
r/HTML • u/BossAmazing9715 • 3d ago
Question Beginner here trying to learn about heading hierarchy. How would I rank the each heading ln this page? Also would the small text in each box be a heading tag or a paragraph tag?
r/HTML • u/Evening-Mousse-1812 • 3d ago
Question HTML deployment platform that allows for AWS Secret Key interaction.
I just worked on an HTML project that requires interaction with my AWS S3 bucket. I would need to host the site, I usually use Vercel but it doesn't seem to accept a static HTML site and all resources are suggesting I need to convert my project to NodeJS, I am struggling to get it to work using NodeJS as I am not familiar with it.
What deployments platform can I use that account for Authorization Keys for my S3 bucket?
Thanks
r/HTML • u/Flesh-maze-tango • 3d ago
Question Iframe Issue
Okay, I'm working on a site but having a bit of trouble with a specific thing regarding my frame. The width seems to be responsive when I'm in chrome's "inspect element" (as shown) it shows no scrollbar and adjusts to width accordingly, when I reload the frame though it shows a scrollbar and isn't centered (also shown). I've linked my code below so any help would be great
r/HTML • u/Scared_Ad_4231 • 4d ago
Contenteditable Issue
Hi there.
I am creating an HTML that lets me enter the address and shows the corresponding location on the map. Now when I edit the address initially it works, as it shows the location and saves it.
But when I edit the address a second time, the address disappears (as intended) when double-clicking, but reappears when I type the new address.
I also attached a short video clip, that demonstrates the issue. Sorry, I'm new to HTML, but any help is appreciated.
The code:
addressElement.addEventListener("dblclick", function () {
if (this.getAttribute("contenteditable") !== "true") {
this.setAttribute("contenteditable", "true");
this.focus();
document.execCommand("selectAll", false, null);
this.textContent = ''; // Clear the text after selecting all
addressElement.addEventListener("keypress", function (event) {
searchContainer.style.display = 'block';
addressSearch.focus();
if (event.key === "Enter") {
event.preventDefault();
this.setAttribute("contenteditable", "false");
localStorage.setItem("profileAddress", this.textContent.trim());
}
});
const autocomplete = new google.maps.places.Autocomplete(addressSearch);
autocomplete.addListener('place_changed', function () {
const place = autocomplete.getPlace();
if (place.geometry) {
map.setCenter(place.geometry.location);
marker.setPosition(place.geometry.location);
marker.setTitle(place.formatted_address);
addressElement.textContent = place.formatted_address;
addressElement.setAttribute("contenteditable", "false");
addressElement.focus();
localStorage.setItem("profileAddress", place.formatted_address);
searchContainer.style.display = 'none';
}
});
addressSearch.addEventListener('input', function () {
if (addressElement.getAttribute("contenteditable") === "true") {
addressElement.textContent = addressSearch.value;
}
});
}
});
});
r/HTML • u/saqib_khan119 • 5d ago
Discussion Want to learn from scratch
Hey guys hope u are all doing well I m currently 23 year old dropout from college and now currently abroad/out side from my comfort zone. Came here around 3 years ago but didn't make a single digit improvement in my skills set and nothing is work for me. Doing some small jobs to survive in this country. After a lot of struggle and doing other unwanted things I start to think about the future and want to improve myself so someone suggests me to learn html css c++ and other things by own. So I don't know how to start and is it possible to learn from the scratch by own?
r/HTML • u/Comfortable_Lime_732 • 5d ago
Question Code Size Adjustment
Hey guys, extreme beginner here. Not sure if this question had been answered before, but I'm in an extreme time clutch!
I need to paste my code for a christmas spinning wheel into GemPages7 on Shopify, but it throws it out of place, and I don't know where the mistake is.
Any help is welcome, please!
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spin Wheel App</title>
<!-- Google Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
<!-- Stylesheet -->
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Gochi Hand", sans-serif;
}
body {
height: 100vh;
background-image: url('https://images.pexels.com/photos/1303088/pexels-photo-1303088.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.wrapper {
width: 90%;
max-width: 34.37em;
max-height: 90vh;
background-color: transparent;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 3em;
border-radius: 1em;
box-shadow: transparent;
}
.container {
position: relative;
width: 100%;
height: 100%;
}
#wheel {
max-height: inherit;
width: inherit;
top: 0;
padding: 0;
}
u/keyframes rotate {
100% {
transform: rotate(360deg);
}
}
#spin-btn {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
height: 26%;
width: 26%;
border-radius: 50%;
cursor: pointer;
border: 0;
background: radial-gradient(#b62f35 50%, #fffff 85%);
color: #c66e16;
text-transform: uppercase;
font-size: 2.0em;
letter-spacing: 0.1em;
font-weight: 600;
}
img {
position: absolute;
width: 4em;
top: 45%;
right: -8%;
}
.final-value-wrapper {
background-color: rgba(255, 254, 247, 0.9);
padding: 1em;
border-radius: 0.5em;
width: 100%;
max-width: 80%;
margin: 0 auto; /* Centers the wrapper */
text-align: center; /* Center the text */
}
#final-value {
color: #775740;
font-size: 1.8em;
font-weight: 500;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
u/media screen and (max-width: 768px) {
.wrapper {
font-size: 12px;
}
img {
right: -5%;
}
}
/* Snowflake Styling */
.snowflake,.snowflake .inner{animation-iteration-count:infinite;animation-play-state:running}
u/keyframes snowflakes-fall{0%{transform:translateY(0)}100%{transform:translateY(110vh)}}
u/keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}
.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;user-select:none;cursor:default;animation-name:snowflakes-shake;animation-duration:3s;animation-timing-function:ease-in-out}
.snowflake .inner{animation-duration:10s;animation-name:snowflakes-fall;animation-timing-function:linear}
.snowflake:nth-of-type(0){left:1%;animation-delay:0s}
.snowflake:nth-of-type(0) .inner{animation-delay:0s}
.snowflake:first-of-type{left:10%;animation-delay:1s}
.snowflake:first-of-type .inner,.snowflake:nth-of-type(8) .inner{animation-delay:1s}
.snowflake:nth-of-type(2){left:20%;animation-delay:.5s}
.snowflake:nth-of-type(2) .inner,.snowflake:nth-of-type(6) .inner{animation-delay:6s}
.snowflake:nth-of-type(3){left:30%;animation-delay:2s}
.snowflake:nth-of-type(11) .inner,.snowflake:nth-of-type(3) .inner{animation-delay:4s}
.snowflake:nth-of-type(4){left:40%;animation-delay:2s}
.snowflake:nth-of-type(10) .inner,.snowflake:nth-of-type(4) .inner{animation-delay:2s}
.snowflake:nth-of-type(5){left:50%;animation-delay:3s}
.snowflake:nth-of-type(5) .inner{animation-delay:8s}
.snowflake:nth-of-type(6){left:60%;animation-delay:2s}
.snowflake:nth-of-type(7){left:70%;animation-delay:1s}
.snowflake:nth-of-type(7) .inner{animation-delay:2.5s}
.snowflake:nth-of-type(8){left:80%;animation-delay:0s}
.snowflake:nth-of-type(9){left:90%;animation-delay:1.5s}
.snowflake:nth-of-type(9) .inner{animation-delay:3s}
.snowflake:nth-of-type(10){left:25%;animation-delay:0s}
.snowflake:nth-of-type(11){left:65%;animation-delay:2.5s}
.snowflakes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
/* Candy Cane Arrow Animation */
u/keyframes wiggle {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(15deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-15deg);
}
100% {
transform: rotate(0deg);
}
}
.wiggle {
animation: wiggle 1s ease-in-out infinite;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<canvas id="wheel"></canvas>
<button id="spin-btn">Spin</button>
<img id="candy-cane" src="https://images.freeimages.com/vhq/images/previews/1a7/candy-cane-106707.png?fmt=webp&h=350" alt="Candy Cane Arrow">
</div>
<div class="final-value-wrapper">
<div id="final-value">
<p>Spin The Wheen And Win % OFF!</p>
</div>
</div>
<!-- Snowflakes -->
<div class="snowflakes" aria-hidden="true">
<div class="snowflake">
<div class="inner">❅</div>
</div>
<div class="snowflake">
<div class="inner">❅</div>
</div>
<div class="snowflake">
<div class="inner">❅</div>
</div>
<div class="snowflake">
<div class="inner">❅</div>
</div>
<div class="snowflake">
<div class="inner">❅</div>
</div>
<div class="snowflake">
<div class="inner">❅</div>
</div>
<div class="snowflake">
<div class="inner">❅</div>
</div>
<div class="snowflake">
<div class="inner">❅</div>
</div>
<div class="snowflake">
<div class="inner">❅</div>
</div>
<div class="snowflake">
<div class="inner">❅</div>
</div>
<div class="snowflake">
<div class="inner">❅</div>
</div>
</div>
<!-- Chart JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<!-- Chart JS Plugin for displaying text over chart -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.1.0/chartjs-plugin-datalabels.min.js"></script>
<!-- Script -->
<script>
const wheel = document.getElementById("wheel");
const spinBtn = document.getElementById("spin-btn");
const finalValue = document.getElementById("final-value");
const candyCane = document.getElementById("candy-cane");
// Object that stores values of minimum and maximum angle for a value
const rotationValues = [
{ minDegree: 0, maxDegree: 30, value: 2 },
{ minDegree: 31, maxDegree: 90, value: 1 },
{ minDegree: 91, maxDegree: 150, value: 6 },
{ minDegree: 151, maxDegree: 210, value: 5 },
{ minDegree: 211, maxDegree: 270, value: 4 },
{ minDegree: 271, maxDegree: 330, value: 3 },
{ minDegree: 331, maxDegree: 360, value: 2 },
];
// Size of each piece
const data = [16, 16, 16, 16, 16, 16];
// background color for each piece
var pieColors = [
"#f23122",
"#69a039",
"#f0ba62",
"#f23122",
"#69a039",
"#f0ba62",
];
// Create chart
let myChart = new Chart(wheel, {
// Plugin for displaying text on pie chart
plugins: [ChartDataLabels],
// Chart Type Pie
type: "pie",
data: {
// Labels(values which are to be displayed on chart)
labels: [5, 10, 15, 20, 25, 30],
// Settings for dataset/pie
datasets: [
{
backgroundColor: pieColors,
data: data,
},
],
},
options: {
// Responsive chart
responsive: true,
animation: { duration: 0 },
plugins: {
// Hide tooltip and legend
tooltip: false,
legend: {
display: false,
},
// Display labels inside pie chart
datalabels: {
color: "#0a0a0a",
formatter: (_, context) => context.chart.data.labels[context.dataIndex],
font: { size: 24 },
},
},
},
});
// Function to display the custom text when the wheel stops
const valueGenerator = (angleValue) => {
let message = ''; // Variable to hold the final message
let link = ''; // Variable to hold the link URL
// Check the angleValue and set a corresponding message
for (let i of rotationValues) {
if (angleValue >= i.minDegree && angleValue <= i.maxDegree) {
switch (i.value) {
case 1:
message = 'You won a 5% discount! Click here to shop now, with discount code Christmas5!';
link = 'https://nantonnutra.com/collections/shop-all'; // Set the URL for the link
break;
case 2:
message = 'You won a 10% discount! Click here to shop now, with discount code christmas10!';
link = 'https://nantonnutra.com/collections/shop-all';
break;
case 3:
message = 'You won a 15% discount! Click here to shop now, with discount code Christmas15!';
link = 'https://nantonnutra.com/collections/shop-all';
break;
case 4:
message = 'You won a 20% discount! Click here to shop now, with discount code xmas20!';
link = 'https://nantonnutra.com/collections/shop-all';
break;
case 5:
message = 'You won a 25% discount! Click here to shop now, with discount code Xmas25!';
link = 'https://nantonnutra.com/collections/shop-all';
break;
case 6:
message = 'You won a 30% discount! Click here to shop now, with discount code nutraxmas30!';
link = 'https://nantonnutra.com/collections/shop-all';
break;
default:
message = 'Try Again!';
link = 'https://example.com'; // Link for the default case
}
// Update the final text on the screen with a clickable link
finalValue.innerHTML = `<p><a href="${link}" target="_blank" style="color: #ff6347; text-decoration: none; font-weight: bold;">${message}</a></p>`;
spinBtn.disabled = false;
candyCane.classList.remove('wiggle'); // Remove the wiggle class when the wheel stops
break;
}
}
};
// Spinner count
let count = 0;
// 100 rotations for animation and last rotation for result
let resultValue = 101;
// Check if the user has already spun
if (sessionStorage.getItem('hasSpun') === 'true') {
// Disable the spin button if the user has already spun
spinBtn.disabled = true;
finalValue.innerHTML = "<p>You've already spun the wheel this session. Please refresh the page to try again!</p>";
} else {
// Allow the spin button to work if the user hasn't spun yet
spinBtn.disabled = false;
}
// Start spinning
spinBtn.addEventListener("click", () => {
spinBtn.disabled = true;
// Empty final value
finalValue.innerHTML = `<p>Good Luck!</p>`;
// Add the wiggle animation when the spin button is clicked
candyCane.classList.add('wiggle');
// Generate random degrees to stop at
let randomDegree = Math.floor(Math.random() * (355 - 0 + 1) + 0);
// Interval for rotation animation
let rotationInterval = window.setInterval(() => {
// Set rotation for piechart
myChart.options.rotation = myChart.options.rotation + resultValue;
// Update chart with new value;
myChart.update();
if (myChart.options.rotation >= 360) {
count += 1;
resultValue -= 5;
myChart.options.rotation = 0;
} else if (count > 15 && myChart.options.rotation == randomDegree) {
valueGenerator(randomDegree); // Stop the wheel and show the value
window.clearInterval(rotationInterval);
}
}, 10);
});
</script>
</body>
</html>
r/HTML • u/Necessary_Fox_1653 • 5d ago
Coding Newbie
I’ve been trying to develop a game using merely HTML, CSS, and JAVA SCRIPT. Although there’s been trouble with a page not being able to show a div.
I’m posting this and asking the users of Reddit that are developers/programmers to help me figure out what the problem might be. Note that I’ve looked through my code numerous times for little mistakes like white spaces, misspelling in the file name, etc.
I need help
So I am making this button, but when I try to edit the text inside the button it just doesn't work. I can't align it I can't change the font. Can anyone help?
<div class="header">
<div class="left-section">
<img class="hamburger-menu" src="icons/Hamburger Menu Icon.svg">
<img class="youtube-logo" src="icons/YouTube Logo.svg">
</div>
<div class="middle-section">
<input class="search-bar" type="text" placeholder="Search">
<button class="search-button">
<img class="search-icon" src="icons/Search Icon.svg">
</button>
<button class="voice-search-button">
<img class="voice-search-icon" src="icons/Voice Search Icon.svg">
</button>
</div>
<div class="right-section">
<button class="create-button">
<img class="create-icon" src="icons/Material Icons Add 24dp.svg">
<span>Create</span>
</button>
</div>
</div>
.create-button {
width: 100px;
border-radius: 36px;
height: 36px;
background-color: #ededed;
cursor: pointer;
border-style: none;
}
.create-icon {
height: 24px;
margin-top: 4px;
}
span {
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 8px;
margin-left: 6px;
}