I want to display the text in the display section where the input via the buttons are aligned to the right and when the text exceeds the width of the display div it gets overflowed to the left,ie the most most recent inputs should be displayed.
but the problem occurs when i start inputting special characters. In the console input appears correctly, in order but on the display the order starts getting jumble when other characters are inputted.
is it because of the direction property?
const display = document.getElementById('display');
const numbers = document.getElementsByClassName('nums');
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i].value)
numbers[i].addEventListener('click', () => {
console.log(display.innerText + `${numbers[i].value}`)
display.innerText = display.innerText + `${String(numbers[i].value)}`;
})
}
* {
box-sizing: border-box;
}
body {
margin: 0px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
button {
padding: 10px 18px
}
.operations button {
margin-top: 5px;
padding: 10px 15px;
}
.numbers {
width: 80%;
display: block;
/* flex-direction; */
/* justify-content: space-evenly; */
align-items: center;
}
.container {
border: 1px solid black;
padding: 20px;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-around;
/* align-items: center; */
margin: 7px 0;
}
.display {
border: 1px solid black;
width: 200px;
height: 30px;
margin: 10px;
text-align: right;
overflow: hidden;
direction: rtl;
}
.butts {
display: flex;
}
.operations {
display: flex;
margin-top: 2px;
flex-direction: column;
margin-left: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="display" id='display'></div>
<div class="butts">
<div class="numbers">
<div class="row">
<button class="nums" value="1">1</button>
<button class="nums" value="2">2</button>
<button class="nums" value="3">3</button>
</div>
<div class="row">
<button class="nums" value="4">4</button>
<button class="nums" value='5'>5</button>
<button class="nums" value='6'>6</button>
</div>
<div class="row">
<button class="nums" value="7">7</button>
<button class="nums" value="8">8</button>
<button class="nums" value="9">9</button>
</div>
<div class="row">
<button class="nums" value="0" style='width:55%'>0</button>
<button classs="eqs" value="=" style='width:35%'>=</button>
</div>
</div>
<div class="operations">
<button class="nums" value="+">+</button>
<button class="nums" value="a">a</button>
<button class="nums" value="*">*</button>
<button class="nums" value="/">/</button>
</div>
</div>
</div>
</body>
</html>
Hi you need to put a container with direction: rtl; and display with direction: ltr. Working code in sandbox attached
.display-container{
direction: rtl;
border: 1px solid black;
width: 200px;
height: 30px;
margin: 10px;
overflow: hidden;
}
.display{
white-space: nowrap;
direction: ltr;
display: inline-block;
padding: 4px;
}
<div class="display-container">
<span class="display" id="display"><span>
</div>
https://codesandbox.io/s/stack-overflow-calculator-rtl-vs-ltf-cwhzi
The issue should be as simple as removing the direction: rtl; from you CSS.
Codesandbox link
Apart from removing the direction: rtl, how about using a hidden overflow container and a CustomEvent listener that will shift the oldest character from the display into the container out of view upon reaching a certain threshold of characters or width (can be whatever you want)?
This way you will get a fine-grained control over the overflow (note that this is not a non-standard "overflow" event, if you are worried about collisions, just name it differently) and the ability to perform other actions.
The approach has an additional benefit of being easily extendable with a "backspace" feature, as all overflow characters can be pushed back into the display by inverting the operation.
const display = document.getElementById('display');
const numbers = document.getElementsByClassName('nums');
const overflow = document.querySelector("#overflow");
display.addEventListener("overflow", ({
detail: {
oldest
}
}) => {
overflow.innerText += oldest
});
for (let i = 0; i < numbers.length; i++) {
numbers[i].addEventListener('click', () => {
const {
innerText
} = display;
const chars = innerText.split(""); //allowed as you use a strict subset of characters;
chars.push(numbers[i].value);
if (chars.length > 23) { //configure length to your liking
const eventInit = {
detail: {
oldest: chars.shift()
}
};
const overEvent = new CustomEvent("overflow", eventInit);
display.dispatchEvent(overEvent);
}
display.innerText = chars.join("");
});
}
* {
box-sizing: border-box;
}
body {
margin: 0px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
button {
padding: 10px 18px
}
.operations button {
margin-top: 5px;
padding: 10px 15px;
}
.numbers {
width: 80%;
display: block;
align-items: center;
}
.container {
border: 1px solid black;
padding: 20px;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-around;
margin: 7px 0;
}
.overflow {
display: none;
}
.display {
border: 1px solid black;
width: 200px;
height: 30px;
margin: 10px;
padding: 6px;
text-align: right;
overflow: hidden;
}
.butts {
display: flex;
}
.operations {
display: flex;
margin-top: 2px;
flex-direction: column;
margin-left: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="overflow" id="overflow"></div>
<div class="display" id='display'></div>
<div class="butts">
<div class="numbers">
<div class="row">
<button class="nums" value="1">1</button>
<button class="nums" value="2">2</button>
<button class="nums" value="3">3</button>
</div>
<div class="row">
<button class="nums" value="4">4</button>
<button class="nums" value='5'>5</button>
<button class="nums" value='6'>6</button>
</div>
<div class="row">
<button class="nums" value="7">7</button>
<button class="nums" value="8">8</button>
<button class="nums" value="9">9</button>
</div>
<div class="row">
<button class="nums" value="0" style='width:55%'>0</button>
<button classs="eqs" value="=" style='width:35%'>=</button>
</div>
</div>
<div class="operations">
<button class="nums" value="+">+</button>
<button class="nums" value="a">a</button>
<button class="nums" value="*">*</button>
<button class="nums" value="/">/</button>
</div>
</div>
</div>
</body>
</html>
const display = document.getElementById('display');
const numbers = document.getElementsByClassName('nums');
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i].value)
numbers[i].addEventListener('click', () => {
console.log(display.innerText + `${numbers[i].value}`)
display.innerText = display.innerText + `${String(numbers[i].value)}`;
})
}
* {
box-sizing: border-box;
}
body {
margin: 0px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
button {
padding: 10px 18px
}
.operations button {
margin-top: 5px;
padding: 10px 15px;
}
.numbers {
width: 80%;
display: block;
/* flex-direction; */
/* justify-content: space-evenly; */
align-items: center;
}
.container {
border: 1px solid black;
padding: 20px;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-around;
/* align-items: center; */
margin: 7px 0;
}
.display {
border: 1px solid black;
width: 200px;
height: 30px;
margin: 10px;
text-align:right;
overflow: hidden;
direction: ltr;
}
.butts {
display: flex;
}
.operations {
display: flex;
margin-top: 2px;
flex-direction: column;
margin-left: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="display" id='display'>
</div>
<div class="butts">
<div class="numbers">
<div class="row">
<button class="nums" value="1">1</button>
<button class="nums" value="2">2</button>
<button class="nums" value="3">3</button>
</div>
<div class="row">
<button class="nums" value="4">4</button>
<button class="nums" value='5'>5</button>
<button class="nums" value='6'>6</button>
</div>
<div class="row">
<button class="nums" value="7">7</button>
<button class="nums" value="8">8</button>
<button class="nums" value="9">9</button>
</div>
<div class="row">
<button class="nums" value="0" style='width:55%'>0</button>
<button classs="eqs" value="=" style='width:35%'>=</button>
</div>
</div>
<div class="operations">
<button class="nums" value="+">+</button>
<button class="nums" value="a">a</button>
<button class="nums" value="*">*</button>
<button class="nums" value="/">/</button>
</div>
</div>
</div>
</body>
</html>
const display = document.getElementById('display');
const numbers = document.getElementsByClassName('nums');
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i].value)
numbers[i].addEventListener('click', () => {
console.log(display.innerText + `${numbers[i].value}`)
display.innerText = display.innerText + `${String(numbers[i].value)}`;
})
}
* {
box-sizing: border-box;
}
body {
margin: 0px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
button {
padding: 10px 18px
}
.operations button {
margin-top: 5px;
padding: 10px 15px;
}
.numbers {
width: 80%;
display: block;
/* flex-direction; */
/* justify-content: space-evenly; */
align-items: center;
}
.container {
border: 1px solid black;
padding: 20px;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-around;
/* align-items: center; */
margin: 7px 0;
}
.display {
border: 1px solid black;
width: 200px;
height: 30px;
margin: 10px;
text-align: right;
overflow: hidden;
direction: rtl;
}
.butts {
display: flex;
}
.operations {
display: flex;
margin-top: 2px;
flex-direction: column;
margin-left: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="display" id='display'></div>
<div class="butts">
<div class="numbers">
<div class="row">
<button class="nums" value="1">1</button>
<button class="nums" value="2">2</button>
<button class="nums" value="3">3</button>
</div>
<div class="row">
<button class="nums" value="4">4</button>
<button class="nums" value='5'>5</button>
<button class="nums" value='6'>6</button>
</div>
<div class="row">
<button class="nums" value="7">7</button>
<button class="nums" value="8">8</button>
<button class="nums" value="9">9</button>
</div>
<div class="row">
<button class="nums" value="0" style='width:55%'>0</button>
<button classs="eqs" value="=" style='width:35%'>=</button>
</div>
</div>
<div class="operations">
<button class="nums" value="+">+</button>
<button class="nums" value="a">a</button>
<button class="nums" value="*">*</button>
<button class="nums" value="/">/</button>
</div>
</div>
</div>
</body>
</html>
You can change the text direction with LTR & RTL source
Related
I am trying to do a for loop so that when the character limit reaches 21 it shifts up.
The issues, I am running into are as follows:
input stops after a certain amount of presses, which is not what I want.
Every time a line shifts up the next line spaces get wider.
This is what I want the outcome to look like:
Expected result output of screen behaviour with for loop:
|---------------|
|111111111111111|
|111111111111111|
|111111111111111|
|111111111111111|
|---------------|
/*********************
Setting up varlaibles*
**********************/
let result;
let calculation;
let num1;
let num2;
/*****************************************
Function for numbers to display on-screen*
******************************************/
function buttonPress(numbers) {
result = document.querySelector('.answer');
let input = result.innerHTML += numbers
console.log(input)
if (input.length >= 21) {
for (let i = 0; i < input.length; i++) {
result.innerHTML += "\n";
document.querySelector('.answer').style.marginTop = "-1rem";
}
}
}
body {
margin: auto 15rem;
box-sizing: border-box;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.base {
margin-top: 2rem;
background-color: #0C1021;
width: 19.8rem;
height: 40rem;
border-radius: 1.5rem;
}
.header {
display: flex;
flex-direction: row;
}
.time {
font-size: 10px;
color: white;
margin-top: 1rem;
margin-left: 2rem;
}
.icons {
margin-left: 11.3rem;
margin-top: 0.2rem;
}
.icons img {
width: 13px;
margin-top: 10px;
padding-left: 5px;
}
.battery {
filter: brightness(0) invert(1);
}
span {
display: block;
width: 6%;
border-top: 3px solid white;
margin-left: 1rem;
margin-top: 2rem;
}
.hl {
margin-top: 3px;
}
.hl2 {
cursor: pointer;
margin-top: 2px;
}
.calc-header {
display: flex;
flex-direction: row;
}
.calc-header h2 {
position: absolute;
margin-left: 6rem;
color: white;
margin-top: -23px;
}
.screen {
margin-left: 0rem;
/* changed */
margin-top: 149px;
}
.calc {
width: 5px;
color: white;
}
.answer {
color: white;
font-size: 32px;
text-align: right;
/* added */
}
button {
border: none;
cursor: pointer;
}
.row {
margin-top: -359px;
position: absolute;
}
.col {
padding: 1px;
}
.col-op,
.col-op-end,
.col-num {
width: 75.3px;
height: 70px;
}
.col-eq-end {
width: 155px;
height: 68px;
}
.col-op,
.col-op-end {
background-color: #093A52;
color: #01A6CB;
}
.col-num {
background-color: #0B1A2C;
color: white;
}
#border-left {
border-radius: 0px 0px 0px 23px;
}
.col-eq-end {
background-color: #01A6CB;
color: white;
}
#border-right {
border-radius: 0px 0px 23px 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/main.css" />
<script src="js/main.js" defer></script>
<script src="js/time.js" defer></script>
<title>Calculator</title>
</head>
<body>
<header>
<div class="base">
<div class="header">
<div class="time"></div>
</div>
<div class="dummy-nav">
<span></span>
<span class="hl"></span>
<span class="hl2"></span>
</div>
<div class="calc-header">
<h2>Calculator</h2>
</div>
<div class="screen">
<div class="calc"></div>
<div class="answer"></div>
</div>
</header>
<main>
<div class="row">
<div class="col">
<button class="col-op clear" onclick="buttonPress('c')">C</button>
<button class="col-op" onclick="buttonPress('()')">()</button>
<button class="col-op" onclick="buttonPress('%')">%</button>
<button class="col-op" onclick="buttonPress('/')">/</button>
</div>
<div class="col">
<button class="col-num" onclick="buttonPress(1)">1</button>
<button class="col-num" onclick="buttonPress(2)">2</button>
<button class="col-num" onclick="buttonPress(3)">3</button>
<button class="col-op-end" onclick="buttonPress('x')">x</button>
</div>
<div class="col">
<button class="col-num" onclick="buttonPress(4)">4</button>
<button class="col-num" onclick="buttonPress(5)">5</button>
<button class="col-num" onclick="buttonPress(6)">6</button>
<button class="col-op-end" onclick="buttonPress('+')">+</button>
</div>
<div class="col">
<button class="col-num" onclick="buttonPress(7)">7</button>
<button class="col-num" onclick="buttonPress(8)">8</button>
<button class="col-num" onclick="buttonPress(9)">9</button>
<button class="col-op-end" onclick="buttonPress('-')">-</button>
</div>
<div class="col">
<button class="col-num" id="border-left" onclick="buttonPress(0)">0</button>
<button class="col-num" onclick="buttonPress('.')">.</button>
<button class="col-eq-end" id="border-right" onclick="buttonPress('=')">=</button>
</div>
</div>
</main>
</body>
</html>
I am working on a project for my AP CS course where we have to clone an app that we use on a daily basis. I am doing CashApp. I opted to make the app mobile by using VoltBuilder which is basically like PhoneGap. You upload a zipped file of the HTML, CSS, and JS, and it compiles it into an APK for android. However, when I run the APK it looks super zoomed in and the scale is totally off. This is not exclusive to just the android, it also does it in the mobile viewer in the Chrome dev tools. Any suggestions to make it scale properly? The design is responsive, so I don't know why it's acting weird.
Problem in DevTools: issue in devtools mobile view
Problem on android emulator: issue on android emulator
document.getElementById('backspace').addEventListener('click', backspace)
let fired_button
let moneyval = document.getElementById('money')
$("button").click(function() {
fired_button = $(this).val();
let emptyArray = []
emptyArray.push(moneyval.textContent)
console.log(emptyArray)
for (var i = 0; i < emptyArray.length; i++) {
if (emptyArray[0] == "$0") {
moneyval.textContent = "$" + fired_button
} else {
moneyval.textContent += fired_button
}
}
});
function backspace() {
console.log(moneyval.textContent)
let string = moneyval.textContent
string = string.substring(0, string.length - 1);
moneyval.textContent = string
}
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap');
body {
background-color: blue;
font-family: 'Inter';
}
#camera,
#search,
#profile {
background-color: blue;
color: black;
border: 0;
}
.camera {
margin-left: 15px;
}
.search {
margin-left: 8px;
}
.head-section {
position: absolute;
top: 60px;
}
.head-right {
position: absolute;
right: 40px;
top: 60px;
}
.money {
color: rgba(255, 255, 255, 0.87);
font-size: 150px;
font-family: 'Inter';
font-style: normal;
font-weight: 600;
line-height: 182px;
position: absolute;
margin: 0;
}
.usd {
position: absolute;
width: 146.4px;
height: 61px;
background: #0CC337;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02);
border-radius: 43px;
color: white;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 25px;
line-height: 30px;
border-style: none;
}
.numberpad {
position: relative;
width: 850px;
height: 540px;
top: 180px;
}
.row1 {
display: flex;
justify-content: space-evenly;
margin-bottom: 35px;
}
.row2 {
display: flex;
justify-content: space-evenly;
margin-bottom: 35px;
}
.row3 {
display: flex;
justify-content: space-evenly;
margin-bottom: 35px;
}
.row4 {
display: flex;
justify-content: space-evenly;
margin-bottom: 35px;
}
.row1,
.row2,
.row3,
.row4 {
margin-top: 80px;
}
button {
border-style: none;
background-color: blue;
color: white;
font-size: 40px;
font-style: normal;
font-weight: 400;
}
.subcta {
border-style: solid;
position: relative;
}
.sub-cta {
display: flex;
position: relative;
width: 750px;
height: 124px;
top: 230px;
justify-content: space-evenly;
}
.sub-button {
border-style: solid;
border-radius: 1.3em;
padding: .3em;
background-color: black;
border-color: #0CC337;
width: 293px;
height: 88px;
}
.balance-container {
display: flex;
align-items: center;
justify-content: space-around;
text-align: center;
position: relative;
width: 720px;
height: 219px;
top: 200px;
}
main {
width:100%;
display: flex;
align-items: center;
flex-direction: column;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=yes">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="width=device-width, initial-scale= 1.0">
<meta name="color-scheme" content="light dark">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="cordova.js"></script>
<script defer src="./js/index.js"></script>
</head>
<body>
<div class="head-section">
<button id="camera"> <img src="./img/image 1.png" alt=""></button>
<button id="search"> <img src="./img/image 2.png" alt=""></button>
</div>
<div class="head-right">
<button id="profile"><img src="./img/image 3.png" alt=""></button>
</div>
<main>
<div class="balance-container">
<h1 id="money" class="money">$0</h1>
</div>
<div>
</div>
<section class="numberpad">
<div class="row1">
<button class="numpad" name="1" id="1" value="1">1</button>
<button name="2" id="2" value="2">2</button>
<button name="3" id="3" value="3">3</button>
</div>
<div class="row2">
<button name="4" id="4" value="4">4</button>
<button name="5" id="5" value="5">5</button>
<button name="6" id="6" value="6">6</button>
</div>
<div class="row3">
<button name="7" id="7" value="7">7</button>
<button name="8" id="8" value="8">8</button>
<button name="9" id="9" value="9">9</button>
</div>
<div class="row4">
<button name="." id="." value=".">.</button>
<button name="0" id="0" value="0">0</button>
<button id="backspace"><</button>
</div>
</section>
<section class="sub-cta">
<div>
<button class="sub-button">Request</button>
</div>
<div>
<button id="pay" class="sub-button">Pay</button>
</div>
</section>
</main>
</body>
</html>
You have to add a "#media only screen and (max-width: 450px){...}" into your css
I had the same problem a couple of days ago and I found out that it has something to do with your device pixel ratio. See, one pixel in CSS is not one physical pixel on your phone, it is 1/96th of an inch. If you just want the version of your project to run on just one device, find out what your device pixel ratio is and divide every pixel by that. For example, I have a Xiaomi Redmi Note 9 pro with a screen resolution of 1080p x 2400p but the device pixel ratio is 2.75. That means in HTML/CSS I have to divide every pixel by 2.75 (the resolution on my browser window is now 1080/2.75 and 2430/2.75 -> 393p x 873p).
Just adjust your pixel sizes and your images height and width and your good to go.
To find out your device pixel ratio:
Go to this link: https://yesviz.com/viewport/
I'm currently working on a website that shows a visual representation of all the movies I watched. A Movie List if you will. I figured out how to filter the list based on button presses using JS, however, it only filters by 1 button at a time. I'd like the list to be filtered based on multiple buttons.
For example: "All completed movies with a rating of 3 and the action genre*".
Or: "All completed and watching movies"
I've never learned JS (though I plan to eventually) so I am kinda lost on how to do this.
Here's my current code:
filterSelection("all")
function filterSelection(c) {
var eles = document.getElementsByClassName("flex-card");
for(var i=0; i < eles.length; i++) {
if (c === "all" || eles[i].classList.contains(c)) {
eles[i].classList.remove("displayNone");
}
else {
eles[i].classList.add("displayNone");
}
}
}
.card:hover .overlay {
display: none;
}
.btn:hover {
background-color: hsl(14,80%,70%);
}
.displayNone {
display: none;
}
.yellow {
color: hsl(14,80%,70%);
}
.heading {
color: white;
}
.button-container {
margin: 0px 0px 12px;
text-align: center;
padding-bottom: 12px;
}
.btn {
color: hsl(14,80%,30%);
background-color: hsl(43,83%,55%);
border: 1px solid rgba(0, 0, 0, 0.94);
border-radius: 10px;
text-align: center;
font-weight: 600;
font-size: 10px;
line-height: 20px;
width: 80px;
margin: 5px 0px 5px 5px;
padding: 0px 12px;
}
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
padding-left: 15%;
padding-right: 15%;
}
/* I am using a 7:10 aspect ratio (width:height) */
.flex-card {
position: relative;
height: 265px;
width: 185px;
perspective: 1000px;
margin-right: 1rem;
margin-bottom: 1rem;
}
.a {
}
.card {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s 0s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.image {
object-fit: cover;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
transition: .1s ease;
}
.title {
text-align: center;
color: white;
font-size: 14px;
font-weight: 600;
margin: 8px;
}
.subtitle {
margin: 8px;
font-size: 12px;
font-weight: 600;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<title>New page</title>
<link href="css/new.css" rel="stylesheet" type="text/css">
</head>
<body style="background-color: rgb(19,23,29);">
<div>
<h1 style="text-align: center;" class="heading">Movie List</h1>
<div class="button-container" data-pg-name="Buttons">
<button class="btn" onclick="filterSelection('all')">All</button>
<button class="btn" onclick="filterSelection('watching')">Watching</button>
<button class="btn" onclick="filterSelection('planned')">Planned</button>
<button class="btn" onclick="filterSelection('completed')">Completed</button>
<button class="btn" onclick="filterSelection('dropped')">Dropped</button>
<br>
<button class="btn" onclick="filterSelection('five')">5</button>
<button class="btn" onclick="filterSelection('four')">4</button>
<button class="btn" onclick="filterSelection('three')">3</button>
<button class="btn" onclick="filterSelection('two')">2</button>
<button class="btn" onclick="filterSelection('one')">1</button>
<br>
<button class="btn" onclick="filterSelection('action')">Action</button>
<button class="btn" onclick="filterSelection('horror')">Horror</button>
<button class="btn" onclick="filterSelection('romance')">Romance</button>
<button class="btn" onclick="filterSelection('etc')">etc.</button>
<button class="btn" onclick="filterSelection('etc')">etc.</button>
</div>
</div>
<div class="flex-container">
<div class="watching five flex-card">
<a href="#">
<div class="card">
<img src="https://via.placeholder.com/300" class="image">
<div class="overlay">
<p class="title">Title</p>
<p class="subtitle yellow">Studio</p>
</div>
</div>
</a>
</div>
<div class="planned three flex-card">
<a href="#">
<div class="card">
<img src="https://via.placeholder.com/300" class="image">
<div class="overlay">
<p class="title">Title</p>
<p class="subtitle yellow">Studio</p>
</div>
</div>
</a>
</div>
<div class="completed two flex-card">
<a href="#">
<div class="card">
<img src="https://via.placeholder.com/300" class="image">
<div class="overlay">
<p class="title">Title</p>
<p class="subtitle yellow">Studio</p>
</div>
</div>
</a>
</div>
</div>
</body>
</html>
also on jsfidle
It would be possible to store all clicked selectors in an array, and render cards based on the whole array's state, not just the last clicked button. Quick and dirty example could look like this:
const allCards = document.querySelectorAll(".flex-card");
var displayAll = true // special value for displaying all - default true
var activeCards = [] // array holding all selected values
function toggleSelector(c) {
if (c === 'all') {
displayAll = !displayAll
activeCards = [] // optional
return
}
displayAll = false
if (activeCards.includes(c)) {
activeCards = activeCards.filter(card => card !== c)
} else {
activeCards.push(c)
}
}
// quick dirty way to render cards
function renderCards() {
if (displayAll) {
allCards.forEach(card => showCard(card))
return
}
allCards.forEach(card => hideCard(card))
for (let card of allCards) {
for (let cardClass of card.classList) {
if (activeCards.includes(cardClass)) {
showCard(card)
break;
}
}
}
}
// on each click toggle clicked selector and re-render cards
function filterSelection(c) {
toggleSelector(c)
renderCards()
}
function showCard(card) {
card.classList.remove("displayNone");
}
function hideCard(card) {
card.classList.add("displayNone");
}
renderCards()
.card:hover .overlay {
display: none;
}
.btn:hover {
background-color: hsl(14,80%,70%);
}
.displayNone {
display: none;
}
.yellow {
color: hsl(14,80%,70%);
}
.heading {
color: white;
}
.button-container {
margin: 0px 0px 12px;
text-align: center;
padding-bottom: 12px;
}
.btn {
color: hsl(14,80%,30%);
background-color: hsl(43,83%,55%);
border: 1px solid rgba(0, 0, 0, 0.94);
border-radius: 10px;
text-align: center;
font-weight: 600;
font-size: 10px;
line-height: 20px;
width: 80px;
margin: 5px 0px 5px 5px;
padding: 0px 12px;
}
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
padding-left: 15%;
padding-right: 15%;
}
/* I am using a 7:10 aspect ratio (width:height) */
.flex-card {
position: relative;
height: 265px;
width: 185px;
perspective: 1000px;
margin-right: 1rem;
margin-bottom: 1rem;
}
.a {
}
.card {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s 0s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.image {
object-fit: cover;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
transition: .1s ease;
}
.title {
text-align: center;
color: white;
font-size: 14px;
font-weight: 600;
margin: 8px;
}
.subtitle {
margin: 8px;
font-size: 12px;
font-weight: 600;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<title>New page</title>
<link href="css/new.css" rel="stylesheet" type="text/css">
</head>
<body style="background-color: rgb(19,23,29);">
<div>
<h1 style="text-align: center;" class="heading">Movie List</h1>
<div class="button-container" data-pg-name="Buttons">
<button class="btn" onclick="filterSelection('all')">All</button>
<button class="btn" onclick="filterSelection('watching')">Watching</button>
<button class="btn" onclick="filterSelection('planned')">Planned</button>
<button class="btn" onclick="filterSelection('completed')">Completed</button>
<button class="btn" onclick="filterSelection('dropped')">Dropped</button>
<br>
<button class="btn" onclick="filterSelection('five')">5</button>
<button class="btn" onclick="filterSelection('four')">4</button>
<button class="btn" onclick="filterSelection('three')">3</button>
<button class="btn" onclick="filterSelection('two')">2</button>
<button class="btn" onclick="filterSelection('one')">1</button>
<br>
<button class="btn" onclick="filterSelection('action')">Action</button>
<button class="btn" onclick="filterSelection('horror')">Horror</button>
<button class="btn" onclick="filterSelection('romance')">Romance</button>
<button class="btn" onclick="filterSelection('etc')">etc.</button>
<button class="btn" onclick="filterSelection('etc')">etc.</button>
</div>
</div>
<div class="flex-container">
<div class="watching five flex-card displayNone">
<a href="#">
<div class="card">
<img src="https://via.placeholder.com/300" class="image">
<div class="overlay">
<p class="title">Title</p>
<p class="subtitle yellow">Studio</p>
</div>
</div>
</a>
</div>
<div class="planned three flex-card displayNone action">
<a href="#">
<div class="card">
<img src="https://via.placeholder.com/300" class="image">
<div class="overlay">
<p class="title">Title</p>
<p class="subtitle yellow">Studio</p>
</div>
</div>
</a>
</div>
<div class="completed two flex-card displayNone action">
<a href="#">
<div class="card">
<img src="https://via.placeholder.com/300" class="image">
<div class="overlay">
<p class="title">Title</p>
<p class="subtitle yellow">Studio</p>
</div>
</div>
</a>
</div>
</div>
</body>
</html>
Good morning!
I am still working on my calculator app and I'm trying to create a function that will store the input from the user and evaluate it. I don't know if this idea will work as intended, but I'm trying my best to keep from copying a tutorial and learn to think like a programmer.
let reset = document.getElementById("reset"),
output = document.getElementById("output"),
calcButtons = document.getElementById("calc_buttons");
// Clears the calculator display
function clearScreen() {
output.innerHTML = " "
}
// Keeps track of any of the calculator buttons being pressed
calcButtons.addEventListener("click", printNum, false);
// Prints the clicked buttons to the display allows them to concatenate
function printNum(e) {
if (e.target !== e.currentTarget) {
let clickedItem = e.target.value;
output.innerHTML += clickedItem;
};
};
function equal() {
let userInput = document.getElementById("output").value;
eval(userInput);
console.log(eval(userInput));
}
* {
background-color: silver;
}
h1 {
text-align: center;
width: 600px;
margin-left: auto;
margin-right: auto;
}
#calc_buttons {
display: grid;
align-content: center;
justify-content: center;
min-height: 50vh;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(6);
margin-top: 200px;
position: relative;
margin-top: 50px;
}
#reset {
grid-column: span 4;
}
#calc_buttons > button {
cursor: pointer;
font-size: 1.5rem;
border: 1px solid white;
outline: none;
background-color: #6699cc;
width: 100px;
height: 80px;
}
#calc_buttons > button:hover {
background-color: rgba(102, 153, 204, 70%);
}
#output {
font-size: 2.5rem;
border: 2px solid black;
grid-column: span 4;
height: 50px;
text-align: right;
border-radius: 10px;
padding: 5px;
}
#calculator {
border: 3px solid black;
border-radius: 10px;
height: 600px;
width: 450px;
margin-left: auto;
background-color: silver;
box-shadow: -10px 10px 10px;
margin-right: auto;
}
<HTML>
<h1> My First JavaScript Calculator </h2>
<div id="calculator">
<div id="calc_buttons">
<span id="output"></span>
<button onclick="clearScreen()"class="operate" id="reset">C</button>
<button class="num" id="seven" value="7">7</button>
<button class="num" id="eight" value="8">8</button>
<button class="num" id="nine" value="9">9</button>
<button class="operate" id="divide" value="/">/</button>
<button class="num" id="four" value="4">4</button>
<button class="num" id="five" value="5">5</button>
<button class="num" id="six" value="6">6</button>
<button class="operate" id="multiply" value="*">*</button>
<button class="num" id="one" value="1">1</button>
<button class="num" id="two" value="2">2</button>
<button class="num" id="three" value="3">3</button>
<button class="operate" id="minus" value="-">-</button>
<button class="num" id="zero" value="0">0</button>
<button class="operate" id="decimal" value=".">.</button>
<button onclick="equal()" class="operate" id="equals" value="=">=</button>
<button class="operate" id="plus" value="+">+</button>
</div>
</HTML>
https://codepen.io/tphelps5/pen/GRgBMMZ?editors=1010
I am trying to make a calendar where when I click on one of the dates, a form pops up that you have to fill in. I cannot get this to work correctly. The only one I can get to work is the very first "1" date. Everything else does not work and I don't know how to fix it. I have tried rewriting the code and switching to id's, but nothing will work. Any help is appreciated. Thanks!
document.querySelector(".weekdays").addEventListener("click",
function() {
document.querySelector(".bg-modal").style.display = "flex";
});
.bg-modal {
width: 100%;
background-color: rgba(0, 0, 0, .7);
height: 100vh;
position: fixed;
z-index: 20;
display: none;
}
.modal-content {
width: 30%;
height: 50%;
position: absolute;
top: 50%;
border-radius: 30px;
background: linear-gradient(to bottom, #2ad6ff, #0069ff);
}
.modal-heading {
width: 70%;
height: 50px;
position: absolute;
border-radius: 50px;
background-color: #2ad6ff;
left: 50%;
transform: translate(-50%);
top: -6%;
font-size: 32px;
text-align: center;
color: white;
}
.modal-close {
position: absolute;
transform: rotate(45deg);
font-size: 42px;
color: white;
top: -1%;
left: 95%;
;
cursor: pointer;
height: 10%;
}
.modal-input {
height: 70%;
border: none;
outline: none;
border-radius: 20px;
padding-left: 15px;
font-size: 15px;
margin-right: 32px;
}
.modal-textarea {
margin: 20px;
height: 150px;
border-radius: 20px;
border: none;
resize: none;
font-size: 15px;
padding-left: 3%;
padding-top: 2%;
}
.modal-submit {
width: 30%;
position: absolute;
left: 47%;
top: 85%;
transform: translateX(-50%);
background-color: white;
outline: none;
border: none;
font-size: 30px;
border-radius: 20px;
color: black;
}
.modal-submit:active {
top: 86%;
}
.modal-form {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
}
.calander {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-column-gap: 20px;
grid-row-gap: 20px;
justify-items: stretch;
align-items: stretch;
width: 40%;
height: 50%;
font-size: 32px;
text-align: center;
left: 50%;
position: absolute;
transform: translate(-50%);
}
.weekend {
font-size: 45px;
}
.weekdays {
font-weight: 200;
transition: .5s;
background: none;
border: none;
font-size: 40px;
}
.weekdays:hover {
transform: scale(1.3);
transition: .5s;
}
<div class="bg-modal">
<div class="modal-content center">
<div class="modal-heading">Complete the form below</div>
<form class="modal-form" action="">
<input class="modal-input" type="text" placeholder="Name">
<input class="modal-input" type="text" placeholder="Email">
<input class="modal-input" type="text" placeholder="Phone Number">
<input class="modal-input" type="text" placeholder="Company Name">
<textarea class="modal-textarea" placeholder="What can we help you with?"></textarea>
<input class="modal-submit" type="submit">
</form>
<div class="modal-close">+</div>
</div>
</div>
<div class="calander">
<div class="weekend">S</div>
<div class="weekend">M</div>
<div class="weekend">T</div>
<div class="weekend">W</div>
<div class="weekend">T</div>
<div class="weekend">F</div>
<div class="weekend">S</div>
<div></div>
<div></div>
<button type="button" class="weekdays"><div class="weekdays">1</div></button>
<button type="button" class="weekdays"><div class="weekdays">2</div></button>
<button type="button" class="weekdays"><div class="weekdays">2</div></button>
<button type="button" class="weekdays"><div class="weekdays">3</div></button>
<button type="button" class="weekdays"><div class="weekdays">4</div></button>
<button type="button" class="weekdays"><div class="weekdays">5</div></button>
<button type="button" class="weekdays"><div class="weekdays">6</div></button>
<button type="button" class="weekdays"><div class="weekdays">7</div></button>
<button type="button" class="weekdays"><div class="weekdays">8</div></button>
<button type="button" class="weekdays"><div class="weekdays">9</div></button>
<button type="button" class="weekdays"><div class="weekdays">10</div></button>
<button type="button" class="weekdays"><div class="weekdays">11</div></button>
<button type="button" class="weekdays"><div class="weekdays">12</div></button>
<button type="button" class="weekdays"><div class="weekdays">13</div></button>
<button type="button" class="weekdays"><div class="weekdays">14</div></button>
<button type="button" class="weekdays"><div class="weekdays">15</div></button>
<button type="button" class="weekdays"><div class="weekdays">16</div></button>
<button type="button" class="weekdays"><div class="weekdays">17</div></button>
<button type="button" class="weekdays"><div class="weekdays">18</div></button>
<button type="button" class="weekdays"><div class="weekdays">19</div></button>
<button type="button" class="weekdays"><div class="weekdays">20</div></button>
<button type="button" class="weekdays"><div class="weekdays">21</div></button>
<button type="button" class="weekdays"><div class="weekdays">22</div></button>
<button type="button" class="weekdays"><div class="weekdays">23</div></button>
<button type="button" class="weekdays"><div class="weekdays">24</div></button>
<button type="button" class="weekdays"><div class="weekdays">25</div></button>
<button type="button" class="weekdays"><div class="weekdays">26</div></button>
<button type="button" class="weekdays"><div class="weekdays">27</div></button>
<button type="button" class="weekdays"><div class="weekdays">28</div></button>
<button type="button" class="weekdays"><div class="weekdays">29</div></button>
<button type="button" class="weekdays"><div class="weekdays">30</div></button>
<button type="button" class="weekdays"><div class="weekdays">31</div></button>
</div>
https://codepen.io/pokyparachute66/pen/vPyrEv
Use querySelectorAll instead which would return you a list of node. You then have to iterate over then and attach the event handlers.
document.querySelectorAll(".weekdays").forEach(elem => elem.addEventListener("click",
() => {
document.querySelector(".bg-modal").style.display = "flex";
}));
Use querySelectorAll and forEach:
document.querySelectorAll('.weekdays').forEach(e => e.addEventListener('click', listener)):
querySelector just returns the first element match, querySelectorAll returns all elements that match.
if you want to acces all Class you have to use the querySelectorAll.
It's the right way to use class and Javascript like in the doc : https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
After this you just have to use a forin to parse it.
Because querySelector():
returns the first Element within the document that matches the specified selector, or group of selectors.
If you want to get multiple nodes use querySelectorAll(). It returns a NodeList (it can be iterated just like a normal array).