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'm working on the Interactive website: Push menu training exercise on codecademy. However, I am a bit confused about jquery selectors. Specifically, in the example provided below, why does the 'menu' html element require a ' ...
views.py : def get_meals(request): template = loader.get_template('café/meals.html') meal_data = MealInfo.objects.all() category_data = MealsCategory.objects.all() context = { 'meals': meal_data, ' ...
Can anyone guide me on how to link a button in an HTML page to a chtml page within an ASP MVC project? image description here ...
I have a form with multiple buttons that, when submitted, will redirect to a different page and pass along some variables. echo " <form method=\"POST\" action=\"sightWordsTest.php\"> ...
Using both JavaScript and JQuery. Let's imagine there is an array called ListArray with various sentences inside. Sounds easy enough. Is there a way to achieve this? var List = for (var i = 0; i < 10; i++) { //iterate over an array here to c ...
Exploring a Div: <div id="up" onmousedown="handleMouseDown('url(/scanToUserBox/img/cpt_subfunc_005_prev_p.png)', this)" onclick="changePage('up')"> </div> Upon clicking the div, the onmousedown event is trig ...
#keyboard { position: fixed; background: #eee; display: none; border: 1px solid #ccc; border-radius:7px; width: 950px; height: 300px; padding: 5px; cursor: move; background-image:url('BackgroundImage.jpg'); box-shadow: -5px -5px 5px 5px #888; -m ...
My video code allows for switching the video into fullscreen mode using custom controls. Here's how it looks: fullScreenButton.addEventListener("click", function() { if (video.requestFullscreen) { video.videoContainer.r ...
Looking to create an HTML table where the columns and rows can be sized independently of the cell content? If a row or column isn't large enough to display all the content, it should simply overflow behind the cell. A solution was found that worked in ...
My database dynamically populates an unordered list with content, utilizing the following code in the back end: StringBuilder output = new StringBuilder(); int lastDepth = -1; int numUL = 0; foreach (DataRow row in dt.Rows) { ...
I'm having an issue with the Bootstrap Popover Tooltip. Can anyone explain why the arrow is not formatting correctly? <div style="display:inline-block;"> <a id="pop" href="#" data-toggle="popover" data-content="<%= user.experience.de ...
I am working with a three.js scene that includes numerous animated objects. I am looking to export this animation as an mpg4 video. Here are my questions: What is the best method for exporting a scene to create an mpg4 video? Is it recommended to perfo ...
My current form layout is not very user-friendly, as it appears to be too long for one row. I have fields for amount, note, date, and an option list. I would like to arrange the form so that amount and note are displayed in one row, followed by date and o ...
Currently, I've implemented a hover opacity effect on my images using the following CSS: img { opacity: 1.0; filter: alpha(opacity=1.0); } img:hover { opacity: 0.6; filter: alpha(opacity=0.6); } However, I now have a specific image for whi ...
I have been working on a script to parse an HTML page using jQuery. The script runs smoothly in Chrome, IE, and Safari, but I'm facing some unexpected behavior while testing it in Firefox (version 36.0.1). Here's the code snippet: $.ajax({ u ...
I am working on creating a grid overlay using an absolutely positioned non-interactive div. My approach involves using the repeating-linear-gradient property as suggested by others for this purpose. The functionality works smoothly in Chrome, but I seem to ...
I am trying to steer clear of using the animation property because it tends to be slower compared to CSS3 animations. My query is whether utilizing the css method is faster than the animation property, but still slower than a direct CSS3 animation with tr ...
Has anyone else encountered an issue with Chrome related to using the input type number when the number of digits exceeds 16? I've noticed that in my case, any numbers beyond the 16th digit are automatically replaced with a zero when the field loses f ...
I am facing some challenges while creating my first custom JavaScript function. My goal is to display three random thumbnails on my webpage by selecting images from a pool of options. However, I am encountering issues with duplicated images and handling s ...
Trying to create an if block following the Svelte Guide for if blocks. The process appears straightforward, yet Svelte is flagging it as a syntax error: [!] (svelte plugin) ParseError: Unexpected character '#' public\js\templates\ ...