javascript moving a div left and right

javascript moving a div left and right - javascript

I made this mini game and I want that my "player" named div to move to left and right inside of the "game" div but I'm stuck. Can someone help me? I think my error is inside of the JavaScript file... Also if my "player" div moves, will my "gun" div move with it too?
let modifier = 50;
let player = document.getElementById('player');
window.addEventListener('keydown', (event) => {
const {
style
} = player;
switch (event.key) {
case 'ArrowRight':
style.left = `${parseInt(style.left) - modifier}px`;
break;
case 'ArrowLeft':
style.left = `${parseInt(style.left) + modifier}px`;
break;
}
});
body {
margin: 0;
padding: 0;
background-color: mediumblue;
height: 800px;
overflow: hidden;
}
p {
font-size: 48pt;
color: black;
font-family: fantasy;
font-weight: bold;
position: relative;
left: 300px;
top: -50px;
}
.game {
width: 800px;
height: 500px;
position: center;
border: 14px solid darkblue;
border-radius: 5px;
margin-left: 300px;
margin-top: -100px;
background-color: black;
}
#player {
height: 20px;
width: 40px;
background-color: firebrick;
border-radius: 2px;
position: relative;
top: 470px;
left: 400px;
}
#gun {
position: relative;
height: 40px;
width: 10px;
background-color: firebrick;
top: -20px;
left: 15px;
border-radius: 2px;
}
#bullet {
position: relative;
background-color: darkorange;
width: 8px;
height: 20px;
top: 0;
left: 1px;
animation: shoot 0.7s linear;
}
#keyframes shoot {
0% {
top: 0px;
}
100% {
top: -470px;
}
}
<p>Galaxy Invaders</p>
<div class="game">
<div id="player">
<div id="gun">
<div id="bullet"></div>
</div>
</div>
<div id="enemy"></div>
</div>
<script src="js.js"></script>

You need to use getComputedStyle: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
let modifier = 50;
let player = document.getElementById('player');
window.addEventListener('keydown', (event) => {
switch (event.key) {
case 'ArrowRight':
player.style.left = (parseInt(getComputedStyle(player).left) + modifier) + "px";
break;
case 'ArrowLeft':
player.style.left = (parseInt(getComputedStyle(player).left) - modifier) + "px";
break;
}
});
body {
margin: 0;
padding: 0;
background-color: mediumblue;
height: 800px;
overflow: hidden;
}
p {
font-size: 48pt;
color: black;
font-family: fantasy;
font-weight: bold;
position: relative;
left: 300px;
top: -50px;
}
.game {
width: 800px;
height: 500px;
position: center;
border: 14px solid darkblue;
border-radius: 5px;
margin-left: 300px;
margin-top: -100px;
background-color: black;
}
#player {
height: 20px;
width: 40px;
background-color: firebrick;
border-radius: 2px;
position: relative;
top: 470px;
left: 400px;
}
#gun {
position: relative;
height: 40px;
width: 10px;
background-color: firebrick;
top: -20px;
left: 15px;
border-radius: 2px;
}
#bullet {
position: relative;
background-color: darkorange;
width: 8px;
height: 20px;
top: 0;
left: 1px;
animation: shoot 0.7s linear;
}
#keyframes shoot {
0% {
top: 0px;
}
100% {
top: -470px;
}
}
<p>Galaxy Invaders</p>
<div class="game">
<div id="player">
<div id="gun">
<div id="bullet"></div>
</div>
</div>
<div id="enemy"></div>
</div>

HTML elements CSS property values acquired by .style aswell as per getComputedStyle() will be returned by Javascript as strings like 10px for div { left: 10px}, containing unit types depending on the CSS property.
You will have to substract the unit types from those strings and then your parseInt should work:
parseInt(style.left.replace('px', ''))

Related

different CSS behavior in Firefox vs Chrome - slider example

My first question on Stackoverflow :) I have this situation. I build a slider trying to get with js the value and displaying in a box. Additionally I want to hide the slider thumb and replace it with my icon.. in Chrome is all nice and good but the in Firefox the original thumb of the slider is still rendered and displayed.
Any I dean what I'm doing wrong in CSS? Thanks in advance!
let slider = document.getElementById("slider_qt");
let selector = document.getElementById("selector");
let SelectValue = document.getElementById("SelectValue");
SelectValue.innerHTML = slider.value;
slider_qt.oninput = function () {
SelectValue.innerHTML = this.value;
selector.style.left = this.value + "%";
};
.container_quality_tools {
width: 100%;
margin-top: 20%;
}
.slider_text {
font-size: 10px;
margin-bottom: 1%;
margin-left: 20px;
}
#slider_qt {
-webkit-appearance: none;
width: 100%;
margin-left: 3%;
margin-right: 0%;
height: 7px;
outline: none;
border-radius: 3px;
}
#slider_qt::-webkit-slider-thumb {
-webkit-appearance: none;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 3;
position: relative;
}
#selector {
position: absolute;
left: 85%;
margin-top: -10%;
}
.SelectorBtn {
height: 14px;
width: 14px;
background-image: url("../media/slider-icon-14.jpg");
background-size: cover;
background-position: center;
border-radius: 50%;
bottom: 0;
}
#SelectValue {
width: 20px;
height: 20px;
position: absolute;
top: -25px;
left: -2px;
background: #feb360;
border-radius: 4px;
text-align: center;
line-height: 20px;
font-size: 8px;
font-weight: bold;
}
#SelectValue::after {
content: "";
border-top: 12px solid #feb360;
border-left: 10px solid #f1f0f0;
border-right: 10px solid #f1f1f1;
position: absolute;
bottom: -4px;
left: 0;
z-index: -1;
}
<div class="row no-gutters">
<div class="col-6">
<div class="container_quality_tools">
<p class="slider_text">Quality Tools</p>
<input type="range" min="1" max="100" value="90" id="slider_qt">
<div id="selector">
<div class="SelectorBtn"></div>
<div id="SelectValue"></div>
</div>
</div>
</div>
</div>
Chrome:
Firefox:

Make background and border disappear with -moz-range-thumb pseudo selector.
#slider_qt::-moz-range-thumb {
background-color: #fff;
border: 0;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 3;
position: relative;
}
It looks broken in the snippet, but I think it would work in your code.
let slider = document.getElementById("slider_qt");
let selector = document.getElementById("selector");
let SelectValue = document.getElementById("SelectValue");
SelectValue.innerHTML = slider.value;
slider_qt.oninput = function() {
SelectValue.innerHTML = this.value;
selector.style.left = this.value + "%";
};
.container_quality_tools {
width: 100%;
margin-top: 20%;
}
.slider_text {
font-size: 10px;
margin-bottom: 1%;
margin-left: 20px;
}
#slider_qt {
-webkit-appearance: none;
width: 100%;
margin-left: 3%;
margin-right: 0%;
height: 7px;
outline: none;
border-radius: 3px;
}
#slider_qt::-webkit-slider-thumb {
-webkit-appearance: none;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 3;
position: relative;
}
#slider_qt::-moz-range-thumb {
background-color: #fff;
border: 0;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 3;
position: relative;
}
#selector {
position: absolute;
left: 85%;
margin-top: -10%;
}
.SelectorBtn {
height: 14px;
width: 14px;
background-image: url("../media/slider-icon-14.jpg");
background-size: cover;
background-position: center;
border-radius: 50%;
bottom: 0;
}
#SelectValue {
width: 20px;
height: 20px;
position: absolute;
top: -25px;
left: -2px;
background: #feb360;
border-radius: 4px;
text-align: center;
line-height: 20px;
font-size: 8px;
font-weight: bold;
}
#SelectValue::after {
content: "";
border-top: 12px solid #feb360;
border-left: 10px solid #f1f0f0;
border-right: 10px solid #f1f1f1;
position: absolute;
bottom: -4px;
left: 0;
z-index: -1;
}
<div class="row no-gutters">
<div class="col-6">
<div class="container_quality_tools">
<p class="slider_text">Quality Tools</p>
<input type="range" min="1" max="100" value="90" id="slider_qt">
<div id="selector">
<div class="SelectorBtn"></div>
<div id="SelectValue"></div>
</div>
</div>
</div>
</div>

``` in the end I was able to solve it like this! Thx all for support! ``
#slider_qt::-moz-range-thumb {
-webkit-appearance: none;
background: transparent;
border-color: transparent;
color: transparent;
width: 20px;
height: 20px;
cursor: pointer;
}

how to make clock hands move/rotate (html, css)

i tried making an easy working clock but i have no idea how to get the clock hands to rotate. i tried to use "#keyframes" to try to get it working but i dont know what to put in "before". is there a way to make it rotate using only css or will using javascript be easier. the link below shows my work but you can also look below and see my code.
https://codepen.io/dior44/pen/GRZMZdy
h1 {
margin: -40px 0 0 0;
font-size: 50px;
position: relative;
top: 100px;
}
div {
margin: 0 auto;
}
.clock {
height: 400px;
width: 400px;
border-radius: 400px;
background: #cccc;
}
.dot {
height: 60px;
width: 60px;
border-radius: 60px;
background: #aaa;
position: relative;
top: 120px;
left: -27px;
z-index: -1;
}
.hours {
width: 7px;
height: 90px;
background: blue;
position: relative;
top: 100px;
}
.minutes {
width: 5px;
height: 170px;
background: black;
position: relative;
top: -50px;
}
.seconds {
width: 3px;
height: 220px;
background: red;
position: relative;
top: -10px;
animation-name: second;
animation-duration: 1s;
}
#keyframes second {
from {
}
}
h2 {
position: relative;
top: 45px;
left: 738px;
font-size: 35px;
margin: -20px 0 0 0;
}
h3 {
margin: -140px 0 0 0;
font-size: 35px;
position:relative;
top: 310px;
left: 920px;
}
h4 {
margin: 3px 0 0 0;
position: relative;
top: 268px;
left: 570px;
font-size: 35px;
}
h5 {
margin: 20px 0 0 0;
position: relative;
top: 400px;
left: 738px;
font-size: 35px;
}
<h1>Clock</h1>
<h2>12</h2>
<h3>3</h3>
<h4>9</h4>
<h5>6</h5>
<body>
<div class="clock">
<div class="hours">
<div class="minutes">
<div class="seconds">
<div class="dot">
<div class="12">
<div class="3">
<div class="6">
<div class="9">
</body>

Pure HTML/CSS second hand:
#clock_container {
position: absolute;
top: 20px;
left: 20px;
width: 150px;
height: 150px;
border-radius: 50%;
border: 2px solid black;
}
#seconds {
height: 50%;
width: 0px;
box-sizing: border-box;
border: 1px solid black;
top: 0%;
left: 50%;
position: absolute;
transform-origin: bottom;
/* of-course, would be 60s */
animation: secondsMotion 10s infinite linear;
}
#keyframes secondsMotion {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="clock_container">
<div id="seconds"></div>
</div>
If you wanted to start with the correct time - with a little JS early on:
var sec = new Date().getSeconds();
var sec_start = (sec/60) * 360 + 'deg';
var sec_end = (sec/60) * 360 + 360 + 'deg';
document.documentElement.style.setProperty("--sec-rot-start", sec_start);
document.documentElement.style.setProperty("--sec-rot-end", sec_end);
and then, in the keyframes:
#keyframes secondsMotion {
0% {
transform: rotate(var(--sec-rot-start));
}
100% {
transform: rotate(var(--sec-rot-end));
}
}

I make a side pull-down menu. Does not work

I make a side pull-down menu. Does not work. Please tell me what the problem is
The menu does not open and does not display any errors. I have already tried everything that I could and zero result.
function left_menu(selector){
let menu = $(selector);
let button = menu.find('.left_menu_button');
let links = menu.find('.left_menu_link');
let overlay = menu.find('.left_menu_close_container');
button.on('click', (e) => {
e.preventDefault();
loggleMenu();
});
links.on('click', () => loggleMenu());
overlay.on('click', () => loggleMenu());
function loggleMenu(){
menu.toggleClass('left_menu_main_div_active');
if(menu.hasClass('left_menu_main_div_active')){
$('body').css('overflow', 'hidden');
}else{
$('body').css('overflow', 'visible');
}
}
}
left_menu('.left_menu_main_div');
.left_menu_button{
position: absolute;
left: 10px;
z-index: 30;
width: 50px;
height: 50px;
border-radius: 50%;
}
.left_menu_button:hover .left_menu_span{
background-color: black;
width: 35px;
height: 5px;
transition: 0.4s;
}
.left_menu_button:hover .left_menu_span::after{
background-color: black;
width: 35px;
height: 5px;
transition: 0.4s;
margin-top: 2px;
}
.left_menu_button:hover .left_menu_span::before{
background-color: black;
width: 35px;
height: 5px;
transition: 0.4s;
margin-top: -2px;
}
.left_menu_span,
.left_menu_span::after,
.left_menu_span::before{
position: absolute;
width: 30px;
height: 4px;
background-color: #1f1a1e;
}
.left_menu_span{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.left_menu_span::before{
content: '';
top: -10px;
}
.left_menu_span::after{
content: '';
top: 10px;
}
.left_menu_main_div_active .left_menu_span{
background-color: transparent;
}
.left_menu_main_div_active .left_menu_span::before{
top: 0;
transform: rotate(45deg);
}
.left_menu_main_div_active .left_menu_span::after{
top: 0;
transform: rotate(-45deg);
}
.left_menu_nav{
padding-top: 55px;
position: fixed;
z-index: 20;
display: flex;
flex-flow: column;
height: 100%;
width: 20%;
background-color: #2a2a2a;
overflow-y: auto;
left: -100%;
}
.left_menu_main_div_active .left_menu_nav{
left: 0;
}
.left_menu_link{
text-align: center;
padding: 10px;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 5px;
font-weight: bold;
color: white;
margin-top: 10px;
}
.left_menu_link:hover{
filter: brightness(0.7);
border: 1px solid black;
border-radius: 3px;
transition: 0.7s;
}
.left_menu_close_container{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.left_menu_main_div_active .left_menu_close_container{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left_menu_container">
<div class="left_menu_main_div">
<a href="#" class="left_menu_button">
<span class="left_menu_span"></span>
</a>
<nav class="left_menu_nav">
Инвентарь
Персонаж
Ремесло
Охота
</nav>
<div class="left_menu_close_container"></div>
</div>
</div>

Shouldn't function loggleMenu( be function ToggleMenu(?
Also where are you loading the script in the html?
Pop a few console.Log() calls into the script and see where it gets up to or fails.

How to create an iOS style dragging using HammerJS and CSS?

I'm trying to create an iOS 'style' modal sheet that that will popup and then the users can drag it down and the modal sheet will follow the users touch gesture and then it will disappear OFF the screen using HammerJS.
I've managed to create the modal sheet and I have also implemented the HammerJS to a certain extend.
When the user 'swipes' down the modal sheet, it will disappear but it doesn't follow the swipe/touch gesture before it hides. it just disappears which makes it a bit clunky.
$(document).on('click', '.button', function() {
$('.addreFinder').css('bottom', '0');
$('.sheet-backdrop').addClass('backdrop-in');
});
///custom modal sheet///
$('.c-modal').each(function() {
var mc = new Hammer(this);
mc.get('swipe').set({
direction: Hammer.DIRECTION_ALL
});
mc.on("swipedown", function(ev) {
console.log('dragged');
$('.modal-in').css('bottom', '-1850px');
$('.sheet-backdrop').removeClass('backdrop-in');
});
});
.sheet-modal.modal-in {
position: absolute;
bottom: -1850px;
left: 0;
width: 100%;
padding: 20px;
transition: bottom 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
display: block;
transform: translate3d(0, 0, 0);
z-index: 13200;
}
.sheet-modal.modal-in,
.sheet-modal.modal-out {
transition-duration: .3s;
}
.demo-sheet-swipe-to-close,
.demo-sheet-swipe-to-step {
--f7-sheet-bg-color: #fff;
--f7-sheet-border-color: transparent;
border-radius: 15px 15px 0 0;
overflow: hidden;
}
.sheet-modal {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 60%;
display: none;
box-sizing: border-box;
transition-property: transform;
transform: translate3d(0, 100%, 0);
background: var(--f7-sheet-bg-color);
z-index: 12500;
will-change: transform;
}
.swipe-handler {
height: 16px;
position: absolute;
left: 0;
width: 100%;
top: 0;
background: #fff;
cursor: pointer;
z-index: 10;
}
.page-content {
will-change: scroll-position;
overflow: auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
height: 100%;
position: relative;
z-index: 1;
padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-toolbar-top-offset, 0px) + var(--f7-page-subnavbar-offset, 0px) + var(--f7-page-searchbar-offset, 0px) + var(--f7-page-content-extra-padding-top, 0px));
padding-bottom: calc(var(--f7-page-toolbar-bottom-offset, 0px) + var(--f7-safe-area-bottom) + var(--f7-page-content-extra-padding-bottom, 0px));
}
.swipe-handler:after {
content: '';
width: 36px;
height: 6px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -18px;
margin-top: -3px;
border-radius: 3px;
background: #666;
}
.block-title-large {
font-size: 20px;
color: #000;
line-height: 40px;
padding: 10px;
margin-top: 20px;
}
.block {
box-sizing: border-box;
position: relative;
z-index: 1;
color: #000;
padding: 10px;
}
.sheet-backdrop.backdrop-in {
visibility: visible;
opacity: 1;
}
.sheet-backdrop {
z-index: 11000;
}
.actions-backdrop,
.custom-modal-backdrop,
.dialog-backdrop,
.popover-backdrop,
.popup-backdrop,
.preloader-backdrop,
.sheet-backdrop {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
z-index: 13000;
visibility: hidden;
opacity: 0;
transition-duration: .4s;
}
.bbody {
width: 100%;
box-sizing: border-box;
margin-top: 50px;
}
.wrapper {
text-align: center;
position: relative;
height: 80px;
font-size: 0;
top: 50%;
transform: translateY(-50%);
}
.search {
padding: 0 30px;
font-size: 18px;
width: 80%;
max-width: 400px;
height: 80px;
border: 1px solid #b3b3b3;
border-radius: 20px 0 0 20px;
box-sizing: border-box;
font-size: 13px;
vertical-align: top;
display: inline-block;
}
.submit {
cursor: pointer;
border: none;
background: url('data:image/png;base64,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') no-repeat center center, #1e1e20;
background-size: 35px 35px;
border-radius: 0 20px 20px 0;
padding: 15px 25px;
display: inline-block;
width: 20%;
height: 80px;
box-sizing: border-box;
font-size: 13px;
vertical-align: top;
}
.pac-container {
width: 100%;
}
.pac-item {
cursor: pointer;
padding: 0 4px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: 30px;
vertical-align: middle;
text-align: left;
border-top: 1px solid #e6e6e6;
color: #999;
width: 100%;
}
.pac-icon {
width: 15px;
height: 20px;
margin-right: 7px;
margin-top: 6px;
display: inline-block;
vertical-align: top;
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
background-size: 34px;
}
.pac-icon-marker {
background-position: -1px -161px;
}
.addressFinderTexts>* {
margin-top: 10px;
}
.addressFinderTexts p {
font-size: 12px;
}
.useMyCureentLOcationBtn {
width: 80%;
height: 25px;
line-height: 25px;
display: inline-block;
background: #ffaf06;
color: #fff;
font-size: 12px;
margin-top: 15px;
overflow: hidden;
}
.addressFinderTexts {
width: 100%;
margin-top: 20px;
min-height: 380px;
height: auto;
text-align: center;
padding: 10px;
box-sizing: border-box;
color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<div class="sheet-backdrop"></div>
<div class="c-modal sheet-modal demo-sheet-swipe-to-close modal-in addreFinder" id="addressFinder">
<div class="sheet-modal-inner">
<div class="swipe-handler"></div>
<div class="page-content">
<div class="block">
<div class="bbody">
Drag me down to hide me
</div>
</div>
</div>
</div>
</div>
<button class="button">Click Here To show modal</button>
I hope I have explained the situation properly for someone to be able to help me.

Click on the same element but need different variables/value?

I'm trying to do a calculator and every time I click on different div with the same class, I'd like to be able to get different values too. For example,
$('.numbers').click(function () {
$('#result').append('<span class ="append">' + $(this).text() + '</span>');
a = +$('.append').text();
});
I wanna do the same but getting different value so I can set it as var b.
Right now, I'm getting the same value showing up twice. Any idea?
My working Jsfiddle
Also, right now, whenever I click on number 1, it didn't convert to a number for some reason. Other numbers are fine though.
Updated.
Is there anyone smart enough to help me out with this?! I don't want to do array first off. Second off, I know why it shows double the number. I'd like it to stop at the first click, save that value to var a. Then second click will show new value and save it to var b.
Here's one that doesn't need to do array.
https://github.com/meherchandan/Calculator/blob/master/calculator.js

Forget my previous answer. The problem is that you have two identical functions. Delete the first one.
Here: http://jsfiddle.net/y4jxvxub/9/
Example:
$(document).ready(function () {
$('.numbers').click(function () {
$('#result').append('<span class ="append">' + $(this).text() + '</span>');
a = +$('.append').text();
});
$('.operators').click(function () {
switch ($(this).text()) {
case '+':
result = a + b;
break;
case '-':
result = a - b;
break;
case 'x':
result = a * b;
break;
case '÷':
result = a / b;
break;
case '=':
$('.append').remove();
$('#result').append('<span class="append">' + result + '</span>');
}
});
$('#clear').click(function () {
$('.append').remove();
});
});
.head {
height: 125px;
width: 130px;
background: #9e532a;
border-radius: 100%;
margin: 20px auto;
position: relative;
border: 5px solid #63341a;
}
.eyes {
height: 20px;
width: 13px;
background: black;
border-radius: 100%;
display: inline-block;
position: absolute;
top: 40px;
}
.ears {
height: 40px;
width: 40px;
background: #9e532a;
border-radius: 100%;
border: 10px solid #63341a;
top: -10px;
z-index: -1;
position: absolute;
display: inline-block;
}
.left_ear {
left: -20px;
}
.left_ear:after {
content:"";
height: 20px;
width: 20px;
background: white;
position: absolute;
border-radius: 100%;
left: 10px;
top: 10px;
}
.right_ear:after {
content:"";
height: 20px;
width: 20px;
background: white;
position: absolute;
border-radius: 100%;
left: 10px;
top: 10px;
}
.right_ear {
right: -20px;
}
.right_eye {
right: 30px
}
.left_eye {
left: 30px;
}
.nose {
height: 20px;
width: 30px;
background: #63341a;
position: absolute;
top: 70px;
left: 49px;
border-radius: 60%;
}
.nose_bridge {
height: 15px;
width: 3px;
background: black;
position: absolute;
top: 20px;
left: 13px;
}
.mouth {
width: 60px;
height: 10px;
position: absolute;
top: 90px;
left: 33px;
border-bottom: 5px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
border-radius: 0 0 50px 50px;
}
.body {
height: 450px;
width: 300px;
background: #63341a;
position: absolute;
top: 120px;
left: -85px;
z-index: -1;
}
.head:before {
content:"";
width: 400px;
height: 40px;
background: #63341a;
position: absolute;
top: 100px;
z-index:-1;
border-radius: 100%;
left: -130px;
}
.body:after {
content:"";
height: 50px;
width: 60px;
background: #63341a;
position: absolute;
bottom: -50px;
right: 0;
border-radius: 0 0 30px 30px;
}
.body:before {
content:"";
height: 50px;
width: 60px;
background: #63341a;
position: absolute;
bottom: -50px;
left: 0;
border-radius: 0 0 30px 30px;
}
#result {
height: 50px;
width: 248px;
background: white;
position: absolute;
top: 30px;
left: 25px;
box-shadow: 1px 1px 10px 1px black;
line-height: 50px;
font-size: 30px;
}
#calculator {
width: 248px;
position: absolute;
top: 100px;
left: 24px;
border-left: 1px solid black;
border-top: 1px solid black;
}
.numbers {
width: 61px;
height: 62px;
background: #D8D6D6;
border-right: 1px solid black;
border-bottom: 1px solid black;
float: left;
text-align: center;
font-size: 30px;
line-height: 62px;
}
.numbers:hover {
background: #DDD2BE;
}
.operators {
background: #F27B17;
width: 61px;
height: 62px;
border-right: 1px solid black;
border-bottom: 1px solid black;
float: left;
text-align: center;
font-size: 30px;
line-height: 62px;
}
.operators:hover {
background: orange;
}
/*#split {
width: 61px;
height: 62px;
background: #D8D6D6;
border-right: 1px solid black;
border-bottom: 1px solid black;
float: left;
text-align: center;
font-size: 30px;
line-height: 62px;
}
.append {
float: right;
}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="container">
<div class="head">
<div class="left_ear ears"></div>
<div class="right_ear ears"></div>
<div class="left_eye eyes"></div>
<div class="right_eye eyes"></div>
<div class="nose">
<div class="nose_bridge"></div>
</div>
<div class="mouth"></div>
<div class="body">
<div id="result"></div>
<div id="calculator">
<div class="numbers" id="n1"><span>1</span>
</div>
<div class="numbers" id="n2">2</div>
<div class="numbers" id="n3">3</div>
<div class="operators" id="add">+</div>
<div class="numbers" id="n4">4</div>
<div class="numbers" id="n5">5</div>
<div class="numbers" id="n6">6</div>
<div class="operators" id="minus">-</div>
<div class="numbers" id="n7">7</div>
<div class="numbers" id="n8">8</div>
<div class="numbers" id="n9">9</div>
<div class="operators" id="multiply">x</div>
<div class="numbers" style="width: 123px" id="n0">0</div>
<div class="numbers split">.</div>
<div class="operators" id="divide">÷</div>
<div class="numbers" style="width:185px" id="clear">CLEAR</div>
<div class="operators equal">=</div>
</div>
</div>
</div>
</div>
</body>

Working as a normal calculator:
http://jsfiddle.net/y4jxvxub/45/
$(document).ready(function () {
var number=0, buffer="", result=0, operator="";
$('.numbers').click(function () {
$('#result').text($('#result').text() + $(this).text());
buffer = buffer + $(this).text();
});
$('.operators').click(function () {
number = parseFloat(buffer);
buffer = "";
switch (operator) {
case '+':
number = result + number;
break;
case '-':
number = result - number;
break;
case 'x':
number = result * number;
break;
case '÷':
number = result / number;
break;
}
operator = $(this).text();
result = number;
$('#result').text($('#result').text() + operator);
if ($(this).text()=='=') {
buffer = result;
$('#result').text(result);
}
});
$('#clear').click(function () {
number=0, buffer="", result=0, operator="";
$('#result').text("");
});
});

working code without array, I tweaked your code a bit, since <span class="append"></span> is not necessary.
http://jsfiddle.net/y4jxvxub/15/

My little tweak, this is only good for simple math operations ... you need to spend more time for complex case like: 1 + 3 + 3 ....
Hope this helps!
$(document).ready(function () {
$.screen = $('#result');
var a,c;
$('.numbers').click(function () {
$('#result').append('<span class ="append">' + $(this).text() + '</span>');
b = +$('.append').text();
});
$('.operators').click(function () {
switch ($(this).text()) {
case '+':
operator='+';
a = parseInt(b);
$.screen.text('');
break;
case '-':
operator='-';
a = parseInt(b);
$.screen.text('');
break;
case 'x':
operator='*';
a = parseInt(b);
$.screen.text('');
break;
case '÷':
operator='/';
a = parseInt(b);
$.screen.text('');
break;
case '=':
c= parseInt(b);
$.screen.text('');
if(operator=='+'){
$.screen.text(a+c);
}else if(operator=='-'){
$.screen.text(a-c);
}else if(operator=='*'){
$.screen.text(a*c);
}else if(operator=='/'){
$.screen.text(a/c);
}
}
});
$('#clear').click(function () {
$('#result').empty();
});
});
.head {
height: 125px;
width: 130px;
background: #9e532a;
border-radius: 100%;
margin: 20px auto;
position: relative;
border: 5px solid #63341a;
}
.eyes {
height: 20px;
width: 13px;
background: black;
border-radius: 100%;
display: inline-block;
position: absolute;
top: 40px;
}
.ears {
height: 40px;
width: 40px;
background: #9e532a;
border-radius: 100%;
border: 10px solid #63341a;
top: -10px;
z-index: -1;
position: absolute;
display: inline-block;
}
.left_ear {
left: -20px;
}
.left_ear:after {
content:"";
height: 20px;
width: 20px;
background: white;
position: absolute;
border-radius: 100%;
left: 10px;
top: 10px;
}
.right_ear:after {
content:"";
height: 20px;
width: 20px;
background: white;
position: absolute;
border-radius: 100%;
left: 10px;
top: 10px;
}
.right_ear {
right: -20px;
}
.right_eye {
right: 30px
}
.left_eye {
left: 30px;
}
.nose {
height: 20px;
width: 30px;
background: #63341a;
position: absolute;
top: 70px;
left: 49px;
border-radius: 60%;
}
.nose_bridge {
height: 15px;
width: 3px;
background: black;
position: absolute;
top: 20px;
left: 13px;
}
.mouth {
width: 60px;
height: 10px;
position: absolute;
top: 90px;
left: 33px;
border-bottom: 5px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
border-radius: 0 0 50px 50px;
}
.body {
height: 450px;
width: 300px;
background: #63341a;
position: absolute;
top: 120px;
left: -85px;
z-index: -1;
}
.head:before {
content:"";
width: 400px;
height: 40px;
background: #63341a;
position: absolute;
top: 100px;
z-index:-1;
border-radius: 100%;
left: -130px;
}
.body:after {
content:"";
height: 50px;
width: 60px;
background: #63341a;
position: absolute;
bottom: -50px;
right: 0;
border-radius: 0 0 30px 30px;
}
.body:before {
content:"";
height: 50px;
width: 60px;
background: #63341a;
position: absolute;
bottom: -50px;
left: 0;
border-radius: 0 0 30px 30px;
}
#result {
height: 50px;
width: 248px;
background: white;
position: absolute;
top: 30px;
left: 25px;
box-shadow: 1px 1px 10px 1px black;
line-height: 50px;
font-size: 30px;
}
#calculator {
width: 248px;
position: absolute;
top: 100px;
left: 24px;
border-left: 1px solid black;
border-top: 1px solid black;
}
.numbers {
width: 61px;
height: 62px;
background: #D8D6D6;
border-right: 1px solid black;
border-bottom: 1px solid black;
float: left;
text-align: center;
font-size: 30px;
line-height: 62px;
}
.numbers:hover {
background: #DDD2BE;
}
.operators {
background: #F27B17;
width: 61px;
height: 62px;
border-right: 1px solid black;
border-bottom: 1px solid black;
float: left;
text-align: center;
font-size: 30px;
line-height: 62px;
}
.operators:hover {
background: orange;
}
/*#split {
width: 61px;
height: 62px;
background: #D8D6D6;
border-right: 1px solid black;
border-bottom: 1px solid black;
float: left;
text-align: center;
font-size: 30px;
line-height: 62px;
}
.append {
float: right;
}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<body>
<div id="container">
<div class="head">
<div class="left_ear ears"></div>
<div class="right_ear ears"></div>
<div class="left_eye eyes"></div>
<div class="right_eye eyes"></div>
<div class="nose">
<div class="nose_bridge"></div>
</div>
<div class="mouth"></div>
<div class="body">
<div id="result"></div>
<div id="calculator">
<div class="numbers" id="n1">1</div>
<div class="numbers" id="n2">2</div>
<div class="numbers" id="n3">3</div>
<div class="operators" id="add">+</div>
<div class="numbers" id="n4">4</div>
<div class="numbers" id="n5">5</div>
<div class="numbers" id="n6">6</div>
<div class="operators" id="minus">-</div>
<div class="numbers" id="n7">7</div>
<div class="numbers" id="n8">8</div>
<div class="numbers" id="n9">9</div>
<div class="operators" id="multiply">x</div>
<div class="numbers" style="width: 123px" id="n0">0</div>
<div class="numbers split">.</div>
<div class="operators" id="divide">÷</div>
<div class="numbers" style="width:185px" id="clear">CLEAR</div>
<div class="operators equal">=</div>
</div>
</div>
</div>
</div>
</body>

Try this. http://jsfiddle.net/y4jxvxub/11/
$(document).ready(function () {
var a ;
var b ;
var result;
$('.numbers').click(function () {
$('#result').append('<span class ="append">' + $(this).text() + '</span>');
if(a==undefined){
a = parseInt($(this).text());
} else {
b = parseInt($(this).text());
}
});
$('.operators').click(function () {
switch ($(this).text()) {
case '+':
result = a + b;
break;
case '-':
result = a - b;
break;
case 'x':
result = a * b;
break;
case '÷':
result = a / b;
break;
case '=':
$('.append').remove();
$('#result').append('<span class="append">' + result + '</span>');
}
});
$('#clear').click(function () {
$('.append').remove();
});
});
You can try this a small change in your code. You have to select the 2 single digit numbers first and then the operator and then "=".

Develop Reference

JavaScript is the programming language of the Web.

javascript moving a div left and right - javascript

Related

different CSS behavior in Firefox vs Chrome - slider example

how to make clock hands move/rotate (html, css)

I make a side pull-down menu. Does not work

How to create an iOS style dragging using HammerJS and CSS?

Click on the same element but need different variables/value?

Categories

Resources