I am currently trying to recreate this code on my own page: https://codepen.io/Vlad3356/pen/PoReJVg
Here is the code I have written so far: https://codepen.io/Vlad3356/pen/GRxdMPz
I'm puzzled as to why, when I click on a star in my version of the code, I don't receive the same header message. Any insights? Thanks.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
Within the realm of CSS,
#rate-1:checked ~ form header:before{
content: "I just despise it";
}
The symbol tilde(~) is commonly referred to as the Subsequent-sibling Combinator. This means that their code treats the header element as a sibling to the star labels:
<div class="star-widget">
<input type="radio" name="rate" id="rate-5">
<label for="rate-5" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-4">
<label for="rate-4" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-3">
<label for="rate-3" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-2">
<label for="rate-2" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-1">
<label for="rate-1" class="fas fa-star"></label>
<form action="#">
<header></header>
To ensure proper functionality, you must adjust your HTML structure accordingly or utilize JavaScript for rearrangement.
For those curious about the original code, you can view it here.
This is the key to making it work:
#rate-1:checked ~ form header:before{
content: "I just hate it ";
}
#rate-2:checked ~ form header:before{
content: "I don't like it ";
}
#rate-3:checked ~ form header:before{
content: "It is awesome ";
}
#rate-4:checked ~ form header:before{
content: "I just like it ";
}
#rate-5:checked ~ form header:before{
content: "I just love it ";
}
.container form{
display: none;
}
input:checked ~ form{
display: block;
}
Essentially, this code reveals the form if the checkbox is checked; otherwise, it remains hidden.
Currently, I am in the midst of a project and wondering if it is possible to dynamically modify the content of an HTML file, such as images and text, using JavaScript. My goal is to achieve this without relying on any frameworks, simply by clicking on el ...
My goal is to create a background reveal effect using JavaScript by increasing the percentage. The effect should start from the center and expand outwards in all directions. Issue: The percentage increase currently affects only the bottom and not the top ...
I created a CSS code that adds a fade-in effect to the title of my website, and it works perfectly. However, I now want to customize the fade-in and fade-out effect based on the page I am transitioning from. My desired outcome: If I am leaving the "Biolo ...
Starting out in HTML and I have a question regarding input. Here is the HTML code I am working with: <input type="text" value="abc" onChange={(e) => { console.log(e.target.value); }}/> I am puzzled because even though the default v ...
Below is the HTML code I am working with: <div id="app"> <div class="image"> <div class="overlay"> <p>Some overlay text</p> </div> <img src="https://placeimg.com/640/480/any" class="img-fluid"> ...
I am trying to figure out a way to clear form fields on a modal window after the user executes the save method. I have attempted using $setPristine in AngularJS, but it's not working as expected. Any suggestions on how to achieve this task? Here is t ...
We have a specific requirement where, if the user's access level is set to "READ ONLY", all form input elements should be made readonly. Our coding approach involves using a template HTML that contains widgets which are referenced in the correspondin ...
I have attempted to develop a form section that is disabled when the user selects option A and enabled when they choose option B. document.getElementById('delivery').onclick = function() { var disabled = document.querySelectorAll(".dis ...
Struggling to get a standard opt-in form to work with an image submit button. The script works fine with a regular submit button, but the image button requires two clicks initially and then one click after unless the page is refreshed. I believe there mig ...
I am trying to insert text at the end of the header in a jumbotron template: <div id="navbar" class="navbar-collapse collapse"> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text ...
My inquiry is as follows: I currently possess a code that conceals class element 1 when it possesses a specific value (which varies across different sites). Now, my objective is to also conceal class element 2 ONLY IF class element 1 is already hidden. ...
My custom drop down menu is not functioning properly. When I click on the text, it successfully links to another place, but when I click beside the text, it does not link. Can you please help me identify what's wrong here? Your assistance would be gre ...
Currently, I am tackling a React JS Project. My task involves creating a breadcrumb that contains both text and an icon. To accomplish this, I have incorporated a material UI icon. import UpdateIcon from "@material-ui/icons/Update"; ...
After the image completes its animation by sliding in from the left, I would like it to vibrate for 2 seconds using the HTML 5 vibrate API: navigator.vibrate(2000); An on-click event successfully triggers the vibration when a button is clicked: <butt ...
Having been assigned the task of developing a Vue page for my team, I am facing an issue with a persistent white border surrounding the entire page. <script setup lang="ts"> </script> <template> <body> <div>&l ...
Trying to create a draggable modal using Material UI's 'Modal' component. I want users to be able to move the modal around by dragging it, so I decided to use 'Draggable' from react-draggable library. However, I encountered this er ...
I'm really struggling to understand the purpose behind using $fix-mqs in the mentioned link: Although I can grasp how the rest of the mixin functions, this particular part has me stumped. In a project where I've utilized this pattern, everything ...
I'm currently experiencing an issue where the selected value of a drop down is not being displayed correctly. Instead of selecting the dropdown value, it's adding another value to the list. Below is the code snippet I'm using: JQuery var ...
Is there a way to connect a font from the internet (such as those on Google Fonts: ) to my Sublime Text CSS file? I have tried linking it to an HTML file that is already linked to my CSS code, but it hasn't been successful. ...
I created my own spinner: '''' #spinner-bg-loading{ position: absolute; left: 50%; top: 25%; width: 80px; height: 80px; margin: -75px 0 0 -75px; border: 16px solid #FFFFFF; border-radius: 50%; border-top: 16px solid #1 ...