I am trying to make a timer and make it so that when the time gets below 10 seconds the text turns red. I am using backgorund-clip to style my text, but for some reason my js doesn't style the backgorund of the element I want.
Here is my JavaScript:
if (miliseconds < 10 && seconds < 10)
document.getElementById("timer").textContent = `0${seconds}:0${miliseconds}`;
else if (miliseconds < 10)
document.getElementById("timer").textContent = `${seconds}:0${miliseconds}`;
else if (seconds < 10)
{
document.getElementById("timer").textContent = `0${seconds}:${miliseconds}`;
document.getElementById("timer-back-2").style.background = "repeating-linear-gradient(to left, red, red 5px, black 5px, black 6px);";
}
else
{
document.getElementById("timer").textContent = `${seconds}:${miliseconds}`;
document.getElementById("timer-back-2").style.background = "repeating-linear-gradient(to left, blue, blue 5px, black 5px, black 6px);"
}
and here is my CSS:
#timer-back-2{
width: 100%;
height: 100%;
margin: 0;
background: repeating-linear-gradient(to left, yellow, yellow 5px, black 5px, black 6px);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
#timer{
width: 100%;
height: 100%;
margin: 0;
background: repeating-linear-gradient(to top, transparent, transparent 5px, black 5px, black 6px);
z-index: 3;
font-size: 50px;
font-family: "8-bit-operator";
display: flex;
justify-content: center;
align-items: center;
-webkit-background-clip: text;
background-clip: text;
}
Don't try to toggle the property value in javascript, use classes instead. Use background-image instead of background for repeating-linear-gradient(), otherwise the background property from the other classes might override the other background properties already set.
const timer = document.getElementById('timer-back-2');
// turn it red
timer.classList.add("red");
// turn it blue
timer.classList.remove("red");
timer.classList.add("blue");
// turn it yellow
timer.classList.remove("red");
timer.classList.remove("blue");
// demo changes color every second
window.setInterval(function() {
timer.classList.remove("blue");
timer.classList.remove("red");
const time = (new Date).getTime();
if (time % 2 == 0) {
timer.classList.add("red");
} else if (time % 3 == 0) {
timer.classList.add("blue");
}
}, 1000);
#timer-back-2 {
width: 100px;
height: 100px;
font-size: 32px;
background-image: repeating-linear-gradient(to left, yellow, yellow 5px, black 5px, black 6px);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
#timer-back-2.red {
background-image: repeating-linear-gradient(to left, red, red 5px, black 5px, black 6px);
}
#timer-back-2.blue {
background-image: repeating-linear-gradient(to left, blue, blue 5px, black 5px, black 6px);
}
<div id="timer-back-2">Back 2</div>
Related
I'm trying to set up a div with an image background as the selector for darkmode/daymode. The only problem seems to be how to rotate the image 180degree on click so that it displays the daysky when darkmode is selected and rotate it 180degrees to the nightsky when lightmode is selected.
My HTML:
<div id="selector" class="selector"></div>
the CSS (bg image is a circle. The sun and sunrays to the left. To the right the moon and stars. :
height: 3rem;
width: 3rem;
border: 1px solid lightgrey;
margin: 5rem auto;
background-image: url('https://cdn1.vectorstock.com/i/1000x1000/32/25/day-and-night-icon-isolated-on-background-vector-21083225.jpg');
background-size: 120%;
background-repeat: no-repeat;
background-position: center, center;
border-radius: 50%;
/* rotate 90deg sets the background image with the night sky on top part of the image*/
transform: rotate(-90deg);
cursor: pointer;
The 90deg rotation puts the image with the darksky on top (ergo: ready for darkmode selection).
JS:
const elem = document.getElementById('selector');
elem.addEventListener('click', spin);
function spin() {
elem.style.transform = "rotate(180deg)";
}
On the first click of the image it rotates the div 180deg, but based on its original position not on the 90deg rotation done with the CSS. I can work around that. The problem is any subsequent clicking of the image will no longer rotate it because the transform property for that element is already rotate(180deg);
For the first rotation, rotate by 90 degrees. Then each subsequent one rotate 180 degrees from the previous click, using a variable in the outer scope.
By using
deg = (deg + 180) % 360
you keep the variable alternating between 90 and 270. The 270 degree rotation is the same as your -90 degree initial rotation.
const elem = document.getElementById('selector');
elem.addEventListener('click', spin);
var deg = 90
function spin() {
elem.style.transform = `rotate(${deg}deg)`;
deg = (deg + 180) % 360
}
.selector {
height: 3rem;
width: 3rem;
border: 1px solid lightgrey;
margin: 5rem auto;
background-image: url('https://cdn1.vectorstock.com/i/1000x1000/32/25/day-and-night-icon-isolated-on-background-vector-21083225.jpg');
background-size: 120%;
background-repeat: no-repeat;
background-position: center, center;
border-radius: 50%;
/* rotate 90deg sets the background image with the night sky on top part of the image*/
transform: rotate(-90deg);
cursor: pointer;
}
<div id="selector" class="selector" style='background-image: url("https://cdn1.vectorstock.com/i/1000x1000/32/25/day-and-night-icon-isolated-on-background-vector-21083225.jpg")'></div>
My teacher assigned me to make a snake game using javascript, html and css but i really don't get how to change the background on the game area. I'm a beginner so i know my code might be bad, sorry in advance.
#gameCanvas {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid black;
background-image:
linear-gradient(90deg, #333 30px, white 30px),
linear-gradient(90deg, white 30px, #333 30px),
linear-gradient(90deg, #333 30px, white 30px);
background-position: 0 0, 0 30px, 0 60px;
background-repeat: repeat-x;
background-size: 60px 30px, 60px 30px, 60px 30px;
margin: 15px auto;
border-radius: 12px;
background-size: repeat;
}
var gameCanvas = document.getElementById("gameCanvas");
var ctx = gameCanvas.getContext("2d");
function Canvas() {
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);
ctx.strokeRect(0, 0, gameCanvas.width, gameCanvas.height);
}
function drawFood() {
ctx.fillStyle = "red";
ctx.strokestyle = "darkred";
ctx.fillRect(foodX, foodY, 10, 10);
ctx.strokeRect(foodX, foodY, 10, 10);
}
function make_snake() {
snake.forEach(draw_snake)
}
function draw_snake(snakePart) {
ctx.fillStyle = "pink";
ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}
I'd like the gameCanvas background to be a grid that actually fits the snake but as you might see from the code, at the very beginning, when you refresh the page, you can see some kind of grid but it gets updated to a blue background and it doesn't even fit the whole canvas.
I have a simple HTML range input component and I would like to divide the track to three different parts. I have a range of 0 to 75 in the component. I would like to style 0 to 25 as green, 26 to 50 as yellow and 51 to 75 as red irrespective of the input value, ie., the colors are constant. Is it possible to it? Here is the working jsfiddle
var p = document.getElementById("price"),
res = document.getElementById("result");
p.addEventListener("input", function() {
res.innerHTML = p.value;
}, false);
<div style="margin-top: 1em">
<h2>Price</h2>
0<input id="price" type="range" min="0" max="75" value="" />75
</div>
<p id="result"></p>
With a linear-gradient background
body {
text-align:center;
}
#range::-webkit-slider-runnable-track {
width: 300px;
height: 10px;
background: linear-gradient(to right, green, green 25%, yellow 25%, yellow 50%, red 51%);
border: none;
border-radius: 3px;
}
#range::-moz-range-track {
width: 300px;
height: 10px;
background: linear-gradient(to right, green, green 25%, yellow 25%, yellow 50%, red 51%);
border: none;
border-radius: 3px;
}
<input id="range" type="range">
Is it possible, with the following Fiddle, to allow a user to create flash cards dynamically by inputting data into an <input> field?
Fiddle
If it's possible, it would be very much appreciated if a new fiddle could be provided, as I am new to coding.
Thank You!
$(function(){
var maxCards = $('.card').length;
// turn card
for (var i = 1; i <= maxCards; ++i) {
$('._' + i).click(function(){
$(this).addClass('flipped');
$(this).find('.front').addClass('showingBack');
$(this).find('.front').css("z-index", 0);
$(this).css("z-index", i);
});
}
// reset stack
$('#reset button').click(function(){
$('.card').removeClass('flipped');
$('.card').find('.front').removeClass('showingBack');
$('.card').find('.front').css("z-index", 2);
for (var j = 0; j < maxCards; ++j) {
$('.card:eq(' + j + ')').css("z-index", maxCards - j);
}
});
});
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input placeholder="Question" type="text" name="mytext[]"/><input placeholder="Answer" type="text" name="mytext[]"/>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
body {
background: #ccc;
font-family: Indie Flower, sans-serif;
}
#reset {
text-align: center;
}
#reset button {
background: rgba(0, 0, 0, 0.4);
border: 0;
color: white;
font-size: 12pt;
margin: auto;
width: 120px;
height: 30px;
}
#reset button:active {
background: rgba(0, 0, 0, 0.8);
}
#stack {
margin: auto;
position: relative;
width: 300px;
}
.card {
border: 1px solid #888;
position: absolute;
width: 300px;
height: 180px;
transform-origin: 0% 0%;
}
.card .front {
background: white;
font-size: 24pt;
position: absolute;
width: 300px;
height: 180px;
z-index: 2;
}
.card .front p {
line-height: 3em;
text-align: center;
}
.card .back {
background: white linear-gradient(transparent, transparent 20%, hotpink 20%, hotpink 21%, transparent 21%, transparent 31%, lightblue 31%, lightblue 32%, transparent 32%, transparent 42%, lightblue 42%, lightblue 43%, transparent 43%, transparent 53%, lightblue 53%, lightblue 54%, transparent 54%, transparent 64%, lightblue 64%, lightblue 65%, transparent 65%, transparent 75%, lightblue 75%, lightblue 76%, transparent 76%, transparent 86%, lightblue 86%, lightblue 87%, transparent 87%, transparent 97%);
font-size: 11pt;
position: absolute;
width: 300px;
height: 180px;
transform: rotateY(180deg);
z-index: 1;
}
.card .back p {
margin: 40px 5px 5px 5px;
}
._1 {
top: 0px;
right: 0px;
z-index: 3;
}
._2 {
top: 3px;
right: 2px;
z-index: 2;
}
._3 {
top: 6px;
right: 4px;
z-index: 1;
}
._4 {
top: 9px;
right: 6px;
z-index: 0;
}
.flipped {
transform: rotateY(180deg) translateX(30px);
animation: flip 1s;
}
.showingBack {
animation: showBack 1s;
}
#keyframes flip {
from {
transform: rotateY(0deg) translateX(0px);
}
to {
transform: rotateY(180deg) translateX(30px);
}
}
#keyframes showBack {
0% {
z-index: 2;
}
25% {
z-index: 2;
}
50% {
z-index: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>
Import FlashCard Text Below:
</h2>
<div class="input_fields_wrap">
<button class="add_field_button">Add More Flash Cards</button>
<button>
Create Flash Cards
</button>
<div><input placeholder="Question" type="text" name="mytext[]"><input placeholder="Answer" type="text" name="mytext[]"/></div>
</div>
<hr>
<p id='reset'>
<button align="center">Reset stack</button>
</p>
<div id='stack'>
<div class='card _1'>
<div class='front'>
<p>What is 1+3?</p>
</div>
<div class='back'>
<p>4</p>
</div>
</div>
<div class='card _2'>
<div class='front'>
<p>What is 2-1?</p>
</div>
<div class='back'>
<p>1</p>
</div>
</div>
<div class='card _3'>
<div class='front'>
<p>What is Pi?</p>
</div>
<div class='back'>
<p>3.14...</p>
</div>
</div>
<div class='card _4'>
<div class='front'>
<p>What is 1/2?</p>
</div>
<div class='back'>
<p>0.5</p>
</div>
</div>
</div>
Here's a totally different way to create flash cards.
Flash card content goes into google drive sheets. Easy to use, easy to update. Then use Google's API to download the data in JSON format.
The code is as simple as putting this code in the body of your html file.
<script src="https://spreadsheets.google.com/feeds/list/XXXXXXXX/od6/public/full?alt=json-in-script&callback=useJSONdata"></script>
In the script portion of your site you would have:
function useJSONdata(root) {
console.log(JSON.stringify(root, null, 4));
// Understanding the object root is a great way to understand what is going on with JSON
var entries = root.feed.entry || []; .. etc.
Analyse the data you need, run a for loop, create a string of content to be pasted back into the Document Object Model / HTML / body.
Finally use jQuery mobile tools to create a mobile ready application. I used both their js and css files. Very nice. I made use of three mobile events “swipeleft” “swiperight” and “taphold”. Swipe left to go to next slide. Swipe right to go to previous slide. Long touch and hold to reveal answer to question.
I realize this wasn't exactly what you were asking for, and although an active input is nice, I'm thinking a spreadsheet format for a series of flash cards with data persistence (and the ability to do edits) is a pretty good way to go.
I have a graphic background, and I need to display a colored triangle in the top left corner (independing the resolution).
Can I create a triangle shaped element using only HTML/CSS/JS with width = 100% and height = 200px with background = red?
I can create it by IMG with width=100%, but I was hoping for a better solution than resizing an image.
The solution needs to be compatible with IE7+ and using browser's versions (more than 2%).
Thanks
Because you can't create a border which has a percentage, try using vw (viewer width) instead. So:
.triangle{
width: 0;
height: 0;
border-bottom: 600px solid blue;
border-left: 100vw solid transparent;
}
Vw units aren't supported by IE8, you will need to use a JS fallback for browsers that don't support these units.
Here is a jQuery script that sets the border-width according to the window size and adjusts it on window resize. Tested in IE8 (IE tester) :
$(document).ready(function() {
function triangle() {
var width = $('#wrap').width(),
border = width / 4;
$("#wrap .tr").css({
"border-left": border + "px solid #fff",
"border-bottom": border + "px solid transparent"
});
}
triangle();
$(window).on('resize', triangle);
});
body {
background: #fff;
}
#wrap {
position: relative;
min-height: 500px;
background: teal;
}
.tr {
position: absolute;
left: 0;
top: 0;
border-left: 200px solid #fff;
border-bottom: 200px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrap">
<div class="tr"></div>
</div>
To expand on web-tiki's answer, I think this is actually what you're going for:
$(document).ready(function() {
function triangle() {
$("#wrap .tr").css({
"border-left": $('#wrap').width() + "px solid #fff",
"border-bottom": "200px solid transparent"
});
}
triangle();
$(window).on('resize', triangle);
});
body {
background: #fff;
}
#wrap {
position: relative;
min-height: 500px;
background: teal;
}
.tr {
position: absolute;
left: 0;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrap">
<div class="tr"></div>
</div>
I think it would be best to use background instead of borders:
.my-triangle {
width: 100%;
height: 200px;
background: linear-gradient(to left top, transparent 50%, red 50%);
}
<div class="my-triangle"></div>
Note that in order for it to be cross-browser compatible you will need to fiddle around with CSS prefixes, IE filters and SVG. (I don't readily have access to IE so I'll leave that one for you, but it would be something along these lines:)
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, transparent), color-stop(0.5, transparent), color-stop(0.5, #FF0000), color-stop(1, #FF0000));
background-image: -webkit-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: -moz-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: -ms-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: -o-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: linear-gradient(to top left, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
Just take a div element, give a class name 'triangle-topleft', and write the below given css
.triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
color of border-top would be the div's background color..Here it's red.
For more triangle structures, follow this link..
[http://css-tricks.com/examples/ShapesOfCSS/][1]