We Keep Coding

Transition from right to left

I need to change some background color with a smooth transition from right to left instead of just changing the color in a uniform way. I will now provide you my code, so that maybe it will be more clear.
NO jQuery/libraries allowed
HTML
<div id=astuccio>
<div class="cBox" id="cBox1">
<div class="color" id="color1"></div>
</div>
<div class="cBox" id="cBox2">
<div class="color" id="color2"></div>
</div>
<div class="cBox" id="cBox3">
<div class="color" id="color3"></div>
</div>
</div>
<button class="js" id="roll">⋁</button>
CSS
#astuccio {
grid-row: 1/2;
margin: auto;
}
.cBox {
width: 50px;
height: 50px;
display:inline-block;
margin: auto;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.3);
box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.3);
border: 0.5px solid rgb(175,175,175);
box-sizing: content-box;
transition: 0.5s;
}
#cBox1 {
margin: auto 0px auto auto;
}
#cBox2 {
width: 100px;
height: 100px;
}
#cBox3 {
margin: auto auto auto 0;
}
.color{
width: 40px;
height: 40px;
vertical-align: middle;
margin-left: 5px;
margin-top: 5px;
text-align: center;
position: relative;
background: tomato;
display: inline-block;
border: 1px solid black;
z-index: 10;
transition: 0.5s linear;
transform-origin: left;
}
#color1 {
background: pink;
}
#color2 {
width: 90px;
height: 90px;
background: pink;
transition-delay: 0.2s;
}
#color3 {
background: pink;
transition-delay: 0.4s;
}
#roll {
grid-row: 2/3;
width: 45px;
height: 45px;
margin: auto;
cursor: pointer;
border-radius: 500px 500px 500px 500px;
-moz-border-radius: 500px 500px 500px 500px;
-webkit-border-radius: 500px 500px 500px 500px;
border: 1px solid rgba(0,0,0,0.5);
box-sizing: border-box;
line-height: 45px;
text-align: center;
font-weight: lighter;
font-size: 1.2em;
color: rgba(0,0,0,0.9);
background: transparent;
}
Javascript
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
function gestoreGiro () {
bott.disabled= true;
bott.setAttribute("style", "background:gray")
t = setInterval(scorri, 500);
setTimeout(riattiva, 5000);
}
function riattiva() {
document.getElementById('roll').disabled = false;
bott.setAttribute("style", "background:none");
}
function scorri() {
var n = i - 1;
var lunghezza = listaColori["colori"].length;
const valore = getRandomInt(listaColori["colori"].length);
if (i>listaColori["colori"].length-1) {
i = 0;
}
if (n < 0) {
n = lunghezza-1;
}
if (m>listaColori["colori"].length-1) {
m = 0;
}
S1.setAttribute("style","background:"+listaColori["coloriHEX"][n]);
S2.setAttribute("style","background:"+listaColori["coloriHEX"][i]);
S3.setAttribute("style","background:"+listaColori["coloriHEX"][m]);
i++;
m++;
flag++;
if (flag==13) {
clearInterval(t);
n = valore-1;
m = valore +1;
if (n < 0) {
n = lunghezza-1;
}
if (m>lunghezza-1) {
m = 0;
}
S1.setAttribute("style","background:"+listaColori["coloriHEX"][n]);
S2.setAttribute("style","background:"+listaColori["coloriHEX"][valore]);
S3.setAttribute("style","background:"+listaColori["coloriHEX"][m]);
flag = 0;
}
}
var S1 ;
var S2 ;
var S3 ;
var bott;
var i = 0;
var m = i+1;
var t;
var flag = 0;
function gestoreLoad () {
S1 = document.getElementById("color1") ;
S2 = document.getElementById("color2") ;
S3 = document.getElementById("color3") ;
bott = document.getElementById("roll");
bott.onclick = gestoreGiro;
}
window.onload = gestoreLoad;
var listaColori = {
colori: ["verde", "giallo", "rosso", "blu", "nero", "bianco"],
coloriHEX: ["#2e8b57", "#ffd700", "#ff6347", "#4169e1", "#000000", "#ffffff"]
}
I am sorry if my explanation appears poor: I'll be happy to answer your doubts.

You could do it very simply with css transition. This method work on :hover. Working CodePen.
HTML
<div>
<p>This is some text</p>
</div>
CSS
div {
padding: 20px;
width: 100px;
background: linear-gradient( to left, red 50%, blue 50% );
background-size: 200% 100%;
background-position: right bottom;
transition: all ease 1s;
color: white;
}
div:hover {
background-position: left bottom;
}

Add On/Off text inside toggle switch

As the question suggests, I want to add 'On' or 'Off' text inside the toggle switch depending on the switch state using js only. There are few examples in this topic, but unable to grip. The MWE is presented below:
window.addEventListener('DOMContentLoaded', function() {
var swPos = [Math.random() >= 0.5];
var swConnection = ["a0"];
switchPosition(swPos, swConnection);
var togglebtns = document.getElementsByClassName('togglebtn');
for (var i = 0; i < togglebtns.length; i++) {
togglebtns[i].addEventListener('click', function() {
changingPin = Number(this.id.substr(2));
swPos[changingPin] = !swPos[changingPin];
drawSwitch(this.id.substr(2), swPos[changingPin]);
});
}
}, false);
function switchPosition(swPos, swConnection) {
for (i = 0; i < swConnection.length; i++) {
drawSwitch(pad(i, 2), swPos[i]);
}
}
function drawSwitch(pinNoStr, state) {
var btnWrapper = document.getElementById('tb' + pinNoStr);
var btn = document.getElementById('mt' + pinNoStr);
if (state == true) {
btn.style.left = (btnWrapper.offsetWidth - btn.offsetWidth - 2) + 'px';
btnWrapper.style.background = '#7bc77b';
btnWrapper.style.border = '1px solid #7bc77b';
document.getElementById('l' + pinNoStr).style.cssText = 'background: #b9f3fe;\
background: gradient-gradient(#ffffff, #77a1b9);\
box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);'
} else {
btn.style.left = '0px';
btnWrapper.style.background = 'lightgrey';
btnWrapper.style.border = '1px solid lightgrey';
document.getElementById('l' + pinNoStr).style.cssText = 'background: #283446;\
background: gradient-gradient(#36455b, #283446);\
box-shadow: inset 0 1px 0 rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(185,231,253,0), inset 0 0 8px rgba(0,0,0,0.9), inset 0 -2px 5px rgba(0,0,0,0.3), inset 0 -5px 5px rgba(0,0,0,0.5);'
}
}
function pad(n, width, z) {
z = z || '0';
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
* {
margin: 0;
padding: 0;
}
.dc {
margin: 10px 50px 10px 50px;
padding: 10px 10px 10px 10px;
background: rgb(183, 154, 216);
}
.tbanimate {
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.togglebtn {
width: 75px;
height: 33px;
float: left;
background: lightgray;
border-radius: 9999px;
border: 2px solid lightgray;
}
.mainToggle {
width: 33px;
height: 33px;
background: whitesmoke;
border-radius: 9999px;
position: relative;
left: 0;
}
.light {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin: 10px;
border-radius: 9999px;
-webkit-transition: all .5s ease;
transition: all .5s ease;
z-index: 2;
}
<section class="dc" id="00">
<div>
<div class="togglebtn tbanimate" id="tb00">
<div class="mainToggle tbanimate" id="mt00"></div>
</div>
<div class="light" id="l00"></div>
</div>
</section>
Extra: Is this possible to make a draggable switch. Currently, only click can change state. It would be nice if I can drag the circle from one side to another. Pure JS, CSS.

You change the textContent of the #mt00 div based on the value of the boolean inside swPos.
* {
margin: 0;
padding: 0;
}
.dc {
margin: 10px 50px 10px 50px;
padding: 10px 10px 10px 10px;
background: rgb(183, 154, 216);
}
.tbanimate {
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.togglebtn {
width: 75px;
height: 33px;
float: left;
background: lightgray;
border-radius: 9999px;
border: 2px solid lightgray;
}
.mainToggle {
width: 33px;
height: 33px;
background: whitesmoke;
border-radius: 9999px;
position: relative;
left: 0;
}
.light {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin: 10px;
border-radius: 9999px;
-webkit-transition: all .5s ease;
transition: all .5s ease;
z-index: 2;
}
#mt00{
vertical-align: middle;
display: table-cell;
}
<section class="dc" id="00">
<div>
<div class="togglebtn tbanimate" id="tb00">
<div class="mainToggle tbanimate" id="mt00"></div>
</div>
<div class="light" id="l00"></div>
</div>
<span id="result"></span>
</section>
<script>
window.addEventListener('DOMContentLoaded', function() {
var swPos = [Math.random() >= 0.5];
var swConnection = ["a0"];
var mtoo = document.getElementById('mt00');
if(swPos[0]){
mtoo.innerHTML = "On";
} else {
mtoo.innerHTML= "Off";
}
switchPosition(swPos, swConnection);
var togglebtns = document.getElementsByClassName('togglebtn');
for (var i = 0; i < togglebtns.length; i++) {
togglebtns[i].addEventListener('click', function() {
changingPin = Number(this.id.substr(2));
swPos[changingPin] = !swPos[changingPin];
if(swPos[changingPin]){
mtoo.innerHTML = "On";
} else {
mtoo.innerHTML = "Off";
}
drawSwitch(this.id.substr(2), swPos[changingPin]);
});
}
}, false);
function switchPosition(swPos, swConnection) {
for (i = 0; i < swConnection.length; i++) {
drawSwitch(pad(i, 2), swPos[i]);
}
}
function drawSwitch(pinNoStr, state) {
var btnWrapper = document.getElementById('tb' + pinNoStr);
var btn = document.getElementById('mt' + pinNoStr);
if (state == true) {
btn.style.left = (btnWrapper.offsetWidth - btn.offsetWidth - 2) + 'px';
btnWrapper.style.background = '#7bc77b';
btnWrapper.style.border = '1px solid #7bc77b';
document.getElementById('l' + pinNoStr).style.cssText = 'background: #b9f3fe;\
background: gradient-gradient(#ffffff, #77a1b9);\
box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);'
} else {
btn.style.left = '0px';
btnWrapper.style.background = 'lightgrey';
btnWrapper.style.border = '1px solid lightgrey';
document.getElementById('l' + pinNoStr).style.cssText = 'background: #283446;\
background: gradient-gradient(#36455b, #283446);\
box-shadow: inset 0 1px 0 rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(185,231,253,0), inset 0 0 8px rgba(0,0,0,0.9), inset 0 -2px 5px rgba(0,0,0,0.3), inset 0 -5px 5px rgba(0,0,0,0.5);'
}
}
function pad(n, width, z) {
z = z || '0';
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
</script>

I have managed to do with pseudo elemets :after and :before
You need to give relative position to the parent, and absolute position to the :after and :before.
(()=>{
var swPos = [Math.random() >= 0.5];
var swConnection = ["a0"];
if(swPos[0]){
document.getElementById("tb00").classList.add("on-text");
document.getElementById("tb00").classList.remove("off-text");
} else {
document.getElementById("tb00").classList.add("off-text");
document.getElementById("tb00").classList.remove("on-text");
}
switchPosition(swPos, swConnection);
var togglebtns = document.getElementsByClassName('togglebtn');
for (var i = 0; i < togglebtns.length; i++) {
togglebtns[i].addEventListener('click', function() {
changingPin = Number(this.id.substr(2));
swPos[changingPin] = !swPos[changingPin];
if(swPos[changingPin]){
document.getElementById("tb00").classList.add("on-text");
document.getElementById("tb00").classList.remove("off-text");
} else {
document.getElementById("tb00").classList.add("off-text");
document.getElementById("tb00").classList.remove("on-text");
}
drawSwitch(this.id.substr(2), swPos[changingPin]);
});
}
})();
function switchPosition(swPos, swConnection) {
for (i = 0; i < swConnection.length; i++) {
drawSwitch(pad(i, 2), swPos[i]);
}
}
function drawSwitch(pinNoStr, state) {
var btnWrapper = document.getElementById('tb' + pinNoStr);
var btn = document.getElementById('mt' + pinNoStr);
if (state == true) {
btn.style.left = (btnWrapper.offsetWidth - btn.offsetWidth - 2) + 'px';
btnWrapper.style.background = '#7bc77b';
btnWrapper.style.border = '1px solid #7bc77b';
document.getElementById('l' + pinNoStr).style.cssText = 'background: #b9f3fe;\
background: gradient-gradient(#ffffff, #77a1b9);\
box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);'
} else {
btn.style.left = '0px';
btnWrapper.style.background = 'lightgrey';
btnWrapper.style.border = '1px solid lightgrey';
document.getElementById('l' + pinNoStr).style.cssText = 'background: #283446;\
background: gradient-gradient(#36455b, #283446);\
box-shadow: inset 0 1px 0 rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(185,231,253,0), inset 0 0 8px rgba(0,0,0,0.9), inset 0 -2px 5px rgba(0,0,0,0.3), inset 0 -5px 5px rgba(0,0,0,0.5);'
}
}
function pad(n, width, z) {
z = z || '0';
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
* {
margin: 0;
padding: 0;
}
.dc {
margin: 10px 50px 10px 50px;
padding: 10px 10px 10px 10px;
background: rgb(183, 154, 216);
}
.tbanimate {
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.togglebtn {
width: 75px;
height: 33px;
float: left;
background: lightgray;
border-radius: 9999px;
border: 2px solid lightgray;
position: relative;
}
.on-text:before {
content: 'On';
position: absolute;
top: 8px;
left: 8px;
}
.off-text:after {
content: 'Off';
position: absolute;
top: 8px;
right: 8px;
}
.mainToggle {
width: 33px;
height: 33px;
background: whitesmoke;
border-radius: 9999px;
position: relative;
left: 0;
}
.light {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin: 10px;
border-radius: 9999px;
-webkit-transition: all .5s ease;
transition: all .5s ease;
z-index: 2;
}
<section class="dc" id="00">
<div>
<div class="togglebtn tbanimate off-text" id="tb00">
<div class="mainToggle tbanimate" id="mt00"></div>
</div>
<div class="light" id="l00"></div>
</div>
</section>

outdented calculator buttons

I want to make my buttons on my calculator out-dented like this:
and indent when clicked (and then outdent again when released)
here's my code so far: (the sizing of everything is weird because of the small box you run the code in, not really sure what to do about that but I guess you can still help me?)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<style>
html,
body {
height: 100%;
margin: 0;
}
#divcontainer {
border: 1px solid lightgray;
width: 100% height: 100%
}
#makeitmove {
background: lightgray;
resize: both;
overflow: auto;
text-align: center;
width: 450px;
height: 76px;
min-height: 70%;
min-width: 25%;
border: 1px solid grey;
box-sizing: content-box;
}
#drag {
font-size: 30px;
height: 45px;
width: 100%;
background: blue;
border: 1px solid grey;
box-sizing: content-box;
}
</style>
<script>
$(document).ready(function() {
$("#makeitmove").draggable({
containment: "#divcontainer",
handle: '#drag',
scroll: false
});
});
</script>
</head>
<body>
<div id="divcontainer" style="height: 100vh;">
<div id="makeitmove">
<div id="drag">Calculator</div>
<h1>JavaScript Calculator</h1>
<p class="warning">Don't divide by zero</p>
<div id="calculator" class="calculator">
<button id="clear" class="clear">C</button>
<div id="viewer" class="viewer">0</div>
<button class="num" data-num="7">7</button>
<button class="num" data-num="8">8</button>
<button class="num" data-num="9">9</button>
<button data-ops="plus" class="ops">+</button>
<button class="num" data-num="4">4</button>
<button class="num" data-num="5">5</button>
<button class="num" data-num="6">6</button>
<button data-ops="minus" class="ops">-</button>
<button class="num" data-num="1">1</button>
<button class="num" data-num="2">2</button>
<button class="num" data-num="3">3</button>
<button data-ops="times" class="ops">*</button>
<button class="num" data-num="0">0</button>
<button class="num" data-num=".">.</button>
<button id="equals" class="equals" data-result="">=</button>
<button data-ops="divided by" class="ops">/</button>
</div>
<button id="reset" class="reset">Reset Universe?</button>
<style>
html {}
body {
color: #6cacc5;
font: 300 18px/1.6 "Source Sans Pro", sans-serif;
margin: 0;
background: linear-gradient(purple, blue);
text-align: center;
}
h1 {
font-weight: 300;
margin: 0;
}
/* Gradient text only on Webkit */
.warning {
background: -webkit-linear-gradient(45deg, #c97874 10%, #463042 90%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #8c5059;
font-weight: 30px;
margin: 0;
}
.calculator {
font-size: 28px;
margin: 0 auto;
width: 10em;
&::before,
&::after {
content: " ";
display: table;
}
&::after {
clear: both;
}
}
/* Calculator after dividing by zero */
.broken {
animation: broken 2s;
transform: translate3d(0, -2000px, 0);
opacity: 0;
}
.viewer {
color: #c97874;
float: left;
line-height: 3em;
text-align: right;
text-overflow: ellipsis;
overflow: hidden;
width: 7.5em;
height: 3em;
}
button {
border: 0;
background: rgba(42, 50, 113, .28);
color: black;
cursor: pointer;
margin: 0;
width: 27.5%;
height: 2.5vh;
transition: all 0.5s;
&:hover {
background: #201e40;
}
&:focus {
outline: 0; // Better check accessibility
/* The value fade-ins that appear */
&::after {
animation: zoom 1s;
animation-iteration-count: 1;
animation-fill-mode: both; // Fix Firefox from firing animations only once
content: attr(data-num);
cursor: default;
font-size: 100px;
position: absolute;
top: 1.5em;
left: 50%;
text-align: center;
margin-left: -24px;
opacity: 0;
width: 48px;
}
}
}
/* Same as above, modified for operators */
.ops:focus::after {
content: attr(data-ops);
margin-left: -210px;
width: 420px;
}
/* Same as above, modified for result */
.equals:focus::after {
content: attr(data-result);
margin-left: -300px;
width: 600px;
}
/* Reset button */
.reset {
background: rgba(201, 120, 116, .28);
color: #c97874;
font-weight: 400;
margin-left: -77px;
padding: 0.5em 1em;
position: absolute;
top: -20em;
left: 50%;
width: auto;
height: auto;
&:hover {
background: #c97874;
color: #100a1c;
}
/* When button is revealed */
&.show {
top: 20em;
animation: fadein 4s;
}
}
/* Animations */
/* Values that appear onclick */
#keyframes zoom {
0% {
transform: scale(.2);
opacity: 1;
}
70% {
transform: scale(1);
}
100% {
opacity: 0;
}
}
/* Division by zero animation */
#keyframes broken {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
5% {
transform: rotate(5deg);
}
15% {
transform: rotate(-5deg);
}
20% {
transform: rotate(5deg);
}
25% {
transform: rotate(-5deg);
}
50% {
transform: rotate(45deg);
}
70% {
transform: translate3d(0, 2000px, 0);
opacity: 1;
}
75% {
opacity: 0;
}
100% {
transform: translate3d(0, -2000px, 0);
}
}
/* Reset button fadein */
#keyframes fadein {
0% {
top: 20em;
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#media (min-width: 420px) {
.calculator {
width: 12em;
}
.viewer {
width: 8.5em;
}
button {
margin: 0.5em;
}
}
</style>
<script>
/*
TODO:
Limit number input
Disallow . from being entered multiple times
Clean up structure
*/
(function() {
"use strict";
// Shortcut to get elements
var el = function(element) {
if (element.charAt(0) === "#") { // If passed an ID...
return document.querySelector(element); // ... returns single element
}
return document.querySelectorAll(element); // Otherwise, returns a nodelist
};
// Variables
var viewer = el("#viewer"), // Calculator screen where result is displayed
equals = el("#equals"), // Equal button
nums = el(".num"), // List of numbers
ops = el(".ops"), // List of operators
theNum = "", // Current number
oldNum = "", // First number
resultNum, // Result
operator; // Batman
// When: Number is clicked. Get the current number selected
var setNum = function() {
if (resultNum) { // If a result was displayed, reset number
theNum = this.getAttribute("data-num");
resultNum = "";
} else { // Otherwise, add digit to previous number (this is a string!)
theNum += this.getAttribute("data-num");
}
viewer.innerHTML = theNum; // Display current number
};
// When: Operator is clicked. Pass number to oldNum and save operator
var moveNum = function() {
oldNum = theNum;
theNum = "";
operator = this.getAttribute("data-ops");
equals.setAttribute("data-result", ""); // Reset result in attr
};
// When: Equals is clicked. Calculate result
var displayNum = function() {
// Convert string input to numbers
oldNum = parseFloat(oldNum);
theNum = parseFloat(theNum);
// Perform operation
switch (operator) {
case "plus":
resultNum = oldNum + theNum;
break;
case "minus":
resultNum = oldNum - theNum;
break;
case "times":
resultNum = oldNum * theNum;
break;
case "divided by":
resultNum = oldNum / theNum;
break;
// If equal is pressed without an operator, keep number and continue
default:
resultNum = theNum;
}
// If NaN or Infinity returned
if (!isFinite(resultNum)) {
if (isNaN(resultNum)) { // If result is not a number; set off by, eg, double-clicking operators
resultNum = "You broke it!";
} else { // If result is infinity, set off by dividing by zero
resultNum = "Look at what you've done";
el('#calculator').classList.add("broken"); // Break calculator
el('#reset').classList.add("show"); // And show reset button
}
}
// Display result, finally!
viewer.innerHTML = resultNum;
equals.setAttribute("data-result", resultNum);
// Now reset oldNum & keep result
oldNum = 0;
theNum = resultNum;
};
// When: Clear button is pressed. Clear everything
var clearAll = function() {
oldNum = "";
theNum = "";
viewer.innerHTML = "0";
equals.setAttribute("data-result", resultNum);
};
/* The click events */
// Add click event to numbers
for (var i = 0, l = nums.length; i < l; i++) {
nums[i].onclick = setNum;
}
// Add click event to operators
for (var i = 0, l = ops.length; i < l; i++) {
ops[i].onclick = moveNum;
}
// Add click event to equal sign
equals.onclick = displayNum;
// Add click event to clear button
el("#clear").onclick = clearAll;
// Add click event to reset button
el("#reset").onclick = function() {
window.location = window.location;
};
}());
</script>
</div>
</div>
</body>
</html>
Thanks in advance for any help! :)

Require little modification on the button inner structure. I zoom in the screen cap found the classic windows theme button has 3 layers of border
This solution use pseudo-element's border, button border itself and nested span border to achieve the effect.
body {
background-color: rgb(192, 192, 192);
}
/* button normal style */
button.classic {
min-width: 80px;
background-color: rgb(192, 192, 192);
border-top: 1px solid rgb(223, 223, 223);
border-left: 1px solid rgb(223, 223, 223);
border-bottom: 1px solid rgb(128, 128, 128);
border-right: 1px solid rgb(128, 128, 128);
position: relative;
padding: 0;
margin: 4px;
font-family: Tahoma, Verdana, Segoe, sans-serif;
}
/* pseudo-element for outer border */
button.classic::before {
content: " ";
position: absolute;
z-index: -1;
top: -2px;
left: -2px;
height: 100%;
width: 100%;
border-top: 2px solid white;
border-left: 2px solid white;
border-bottom: 2px solid black;
border-right: 2px solid black;
}
/* button when focused */
button.classic:focus {
outline: 0;
border-top: 1px solid white;
border-left: 1px solid white;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
/* outer border when focused*/
button.classic:focus::before {
border: 2px solid black;
}
/* span for inner border */
button.classic span {
display: block;
padding: 2px 16px;
border: 1px solid rgb(192, 192, 192);
}
/* inner border when focused */
button.classic:focus span {
border-top: 1px solid rgb(223, 223, 223);
border-left: 1px solid rgb(223, 223, 223);
border-bottom: 1px solid rgb(128, 128, 128);
border-right: 1px solid rgb(128, 128, 128);
}
/* button when focused */
button.classic:active {
border: 1px solid rgb(128, 128, 128);
}
/* button when pressed */
button.classic:active span {
border: 1px solid rgb(192, 192, 192);
}
/* button label when pressed */
button.classic:active span label {
position: relative;
top: 1px;
left: 1px;
}
<button class='classic'>
<span><label>OK</label></span>
</button>
<button class='classic'>
<span><label>Cancel</label></span>
</button>

Give your buttons borders, and make the border-style outset (or inset in their :active pseudo-class):
.out {
border-style: outset;
}
.in {
border-style: inset;
}
<h2 class="out">Borders can give the illusion of depth</h2>
<h2 class="in">In either direction</h2>
Also, the only style sheet language web browsers understand is CSS. You'll need to compile your style sheets before using them in a snippet like that.

You can try this :
body {
background-color: #d3d2d2;
}
button {
cursor: pointer;
margin: 0;
width: 27.5%;
height: 32px;
transition: linear 200ms;
font-size: 20px;
font-weight: 500;
background-color: #c1c1c0;
box-shadow: 0px 0px 3px #a0a0a0;
outline: none;
border: 2px solid;
border-top-color: #ddd;
border-left-color: #ddd;
border-bottom-color: #888;
border-right-color: #888;
color: #4b4a4a;
}
button:focus {
border-top: 1px solid #dfdfdf;
border-left: 1px solid #dfdfdf;
border-bottom: 1px solid #808080;
border-right: 1px solid #808080;
}
<button>+</button>

JavaScript. How to control background image slide show to synchronize with bubbles

I am trying to create backgroundImage slide show with bubbles. i was working very fine untill i added eventListeners for mouseover and mouseout.
mouseover enent clears the setInterval while the mouseout calls back the setInterval().
The execution is triggered with the setInterval in the window load event.
i dont know if my explained my problem very well
var bubble_Array;
var bubble_i = 0;
var intrval;
var ba;
var bi =0;
var intr;
var man = ['url(imags/ParLour.jpg', 'url(imags/767.jpg', 'url(imags/7series.jpg', 'url(imags/02.jpg', 'url(imags/BedRoom.jpg', 'url(imags/30.jpg', 'url(imags/volks.jpg', 'url(imags/sports.jpg', 'url(imags/real.jpg', 'url(imags/portable.jpg', 'url(imags/perspective.jpg', 'url(imags/green.jpg', 'url(imags/fantom.jpg', 'url(imags/fantom2.jpg', 'url(imags/elegance.jpg', 'url(imags/bridge.jpg', 'url(imags/BMW.jpg', 'url(imags/interior.jpg','url(imags/3Dcar007.jpg'];
function _(x){
return document.getElementById(x);
}
function bubbleMain(bi){
bubble_i++;
if(bubble_i == man.length){
bubble_i = 0;
}
_('bubblebox').style.opacity = 0;
for (var i =0; i < ba.length; i ++){
ba[i].style.background = "rgba(0,0,0,.1)";
}
setTimeout(function(){
_('bubblebox').style.backgroundImage = man[bubble_i];
ba[bi].style.background = "red";
_("bubblebox").style.opacity = 1;
}, 500);
}
function bubbleSlide(){
ba = _('bubbles').children;
_('bubblebox').style.backgroundImage = man[bubble_i];
ba[bi].style.backgroundColor = 'red';
bi++;
if (bi == ba.length){
bi =0;
}
bubbleMain(bi);
}
window.addEventListener("load", function(){
ba = _('bubbles').children;
_('bubblebox').style.backgroundImage = man[bubble_i];
ba[bi].style.backgroundColor = 'red';
intrval = setInterval(bubbleSlide, 2000);
})
window.addEventListener("mouseover", function(){
clearInterval(intrval);
})
window.addEventListener("mouseout", function(){
intrval = setInterval(bubbleSlide, 2000);
})
#bubblebox{
height: 550px;
width: 1200px;
border:2px solid black;
margin: 50px auto;
background-repeat: no-repeat;
z-index: -5;
background-size: cover;
transition:background-image 0.2s;
transition: opacity 0.3s linear 0s;
}
#bubbles{
height: 0px;
width: auto;
text-align: center;
z-index: 100;
position: absolute;
}
#bubbles div{
height: 20px;
width: 20px;
background: rgba(0,0,0,.1);
border: 2px solid green;
border-radius: 100%;
display: inline-block;
position: relative;
margin: 0px auto;
top: 10px;
z-index: 1000;
left: 310px;
color:#fff;
cursor: pointer;
}
#heading{
height: 20px;
width: 200px;
background-color: red;
position: relative;
top: 100px;
left: 500px;
color: #fff;
text-align: center;
}
#arrow_right, #arrow_left, #arrow_middle{
width: 20px;
height: 20px;
transition: .5s;
float: left;
box-shadow: -4px 4px 0 rgb(255, 255, 255);
cursor: pointer;
left: 1100px;
position: relative;
margin: 0 -10px 0 0px;
top: 200px;
border-bottom: 3px solid black;
border-left: 3px solid black;
transform: rotate(225deg);
}
#arrow_right2, #arrow_left2, #arrow_middle2{
width: 20px;
height: 20px;
transition: .5s;
float: left;
box-shadow: -4px 4px 0 rgb(255, 255, 255);
cursor: pointer;
left: 10px;
position: relative;
margin: 0 -10px 0 0px;
top: 200px;
border-bottom: 3px solid black;
border-left: 3px solid black;
transform: rotate(45deg);
tex
}
#arrow_right2:hover, #arrow_left2:hover, #arrow_middle2:hover{
box-shadow: -5px 5px 0 rgb(255, 255, 255);
}
#arrow_right:hover, #arrow_left:hover, #arrow_middle:hover{
box-shadow: -5px 5px 0 rgb(255, 255, 255);
}
<div id="bubblebox">
<div id="bubbles">
<div onclick="bubbleMain(0)">1</div>
<div onclick="bubbleMain(1)">2</div>
<div onclick="bubbleMain(2)">3</div>
<div onclick="bubbleMain(3)">4</div>
<div onclick="bubbleMain(4)">5</div>
<div onclick="bubbleMain(5)">6</div>
<div onclick="bubbleMain(6)">7</div>
<div onclick="bubbleMain(7)">8</div>
<div onclick="bubbleMain(8)">9</div>
<div onclick="bubbleMain(9)">10</div>
<div onclick="bubbleMain(10)">11</div>
<div onclick="bubbleMain(11)">12</div>
<div onclick="bubbleMain(12)">13</div>
<div onclick="bubbleMain(13)">14</div>
<div onclick="bubbleMain(14)">15</div>
<div onclick="bubbleMain(15)">16</div>
<div onclick="bubbleMain(16)">17</div>
<div onclick="bubbleMain(17)">18</div>
<div onclick="bubbleMain(18)">19</div>
<div onclick="bubbleMain(19)">20</div>
</div>
<div id="heading">Caption</div>
<div id="arrow_right"></div>
<div id="arrow_middle"></div>
<div id="arrow_left"></div>
<div id="arrow_right2"></div>
<div id="arrow_middle2"></div>
<div id="arrow_left2"></div>
<div id="bubblecontent"></div>
</div>

I'm creating a canvas drawing apps but stuck

I'm creating a canvas drawing apps but I got stuck in my code. I am new to javascript so it seems difficult for me:
var input = document.getElementById('chColor');
input.onkeyup = function() {
document.getElementById('color_check').style.background = input.value;
}
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.addEventListener('mousedown',painting,false);
function painting() {
canvas.onmousemove = function(e) {
var mouseX = e.pageX - canvas.offsetLeft;
var mouseY = e.pageY - canvas.offsetTop;
ctx.fillStyle = input.value;
ctx.fillRect(mouseX,mouseY,10,10);
}
canvas.onmouseup = function() {
canvas.onmousemove = '';
}
}
var erase = document.getElementById('clear');
erase.onclick = function() {
ctx.clearRect(0,0,canvas.width,canvas.height);
}
body {
background: #dfdfdf;
}
.colorplate {
position: relative;
width: 100%;
height: 50px;
background: #fff;
box-shadow: 0px 0px 2px 2px rgba(0,0,0,.3);
}
#chColor {
width: 250px;
border:none;
background: none;
line-height: 50px;
font-size: 20px;
}
#chColor:focus {
outline: none;
}
::-webkit-input-placeholder {
color:#333;
}
#color_check {
position: absolute;
width: 250px;
height: 100%;
background: #fff;
box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.3);
top:0;
left:50%;
}
canvas {
background: #fff;
box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.3);
}
#clear {
padding: 10px;
border:none;
background-color: #fff;
box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.3);
cursor: pointer;
}
#clear:hover {
background: #333;
color:#fff;
}
<div class="colorplate">
<input type="text" id="chColor" placeholder="type your color name or hex">
<div id="color_check"></div>
</div>bbb
<canvas id="canvas" width="300" height="300"></canvas>
<button id="clear">Erase all</button>
please update some code and make to much beautiful than mine. I hope you will help me for my problem.