I have in my beacon <div class="post">
another beacon <p class="compteur"></p>
which is intended to be incremented to find out if the user likes (clicks) it or decrements it if the user likes (clicks) it.
for this reason I use a boolean to check the condition
in my js I have a function that its charge of the fact
but as I apply this function to multiple tag recovers in my code they all act on the same boolean and value that causes me problem.
I would like each of them to be independent
const cerle = document.getElementsByClassName('cerle')
const compteur = document.getElementsByClassName('compteur')
let onOff = false;
let nbr = 0;
function compte (i) {
if (onOff == false) {
nbr++
console.log( nbr);
onOff= true;
console.log( onOff);
compteur[i].innerHTML=`${nbr}k`
}else if(onOff == true){
nbr--
console.log( nbr);
onOff= false;
console.log( onOff);
compteur[i].innerHTML=`${nbr}k`
}
}
for (let i = 0; i < cerle.length; i++) {
cerle[i].addEventListener("click",()=>{
compte (i);
});
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Nunito Sans', sans-serif;
}
.contain{
align-items: center;
display: flex;
flex-direction: row;
width: 100%;
height: 400px;
background-color: yellowgreen;
}
.post{
margin-left: 30px;
width: 30%;
height: 70%;
background-color: rgb(73, 50, 205);
}
.cerle{
width: 20%;
height: 30%;
border-radius: 50%;
background-color: rgb(205, 35, 35);
}
<body>
<div class="contain">
<div class="post">
<div class="cerle"></div>
<p class="compteur"></p>
</div>
<div class="post">
<div class="cerle"></div>
<p class="compteur"></p>
</div>
<div class="post">
<div class="cerle"></div>
<p class="compteur"></p>
</div>
</div>
</body>
well here I was able to solve my problem and thank you to everyone who kindly helped me
I went through creating a new object for the assigned to each recovered div only the js file changed.
Here's my code.
const cerle = document.querySelectorAll(".cerle");
const compteur = document.getElementsByClassName('compteur');
let etat = false;
var valeurDesPoste = new Array();
class compte {
constructor(onOff, valeur ,i) {
this.onOff = onOff;
this.valeur = valeur;
this.i = i;
}
teste() {
if (this.onOff == false) {
this.valeur++ ;
console.log( this.valeur);
this.onOff= true;
console.log( this.onOff);
compteur[this.i].innerHTML=`${this.valeur}k`
}else if(this.onOff == true){
this.valeur-- ;
console.log( this.valeur);
this.onOff= false;
console.log( this.onOff);
compteur[this.i].innerHTML=`${this.valeur}k`
}
}
}
for (let i = 0; i < cerle.length; i++) {
valeurDesPoste.push(50 *i);
// console.log( valeurDesPoste[i]);
let a =new compte(etat, valeurDesPoste[i] ,i);
cerle[i].addEventListener("click",()=>{
a.teste()
});
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Nunito Sans', sans-serif;
}
.contain{
align-items: center;
display: flex;
flex-direction: row;
width: 100%;
height: 400px;
background-color: yellowgreen;
}
.post{
margin-left: 30px;
width: 30%;
height: 70%;
background-color: rgb(73, 50, 205);
}
.cerle{
width: 20%;
height: 30%;
border-radius: 50%;
background-color: rgb(205, 35, 35);
}
<div class="contain">
<div class="post">
<div class="cerle"></div>
<p class="compteur"></p>
</div>
<div class="post">
<div class="cerle"></div>
<p class="compteur"></p>
</div>
<div class="post">
<div class="cerle"></div>
<p class="compteur"></p>
</div>
</div>
Related
I've made a budgeting app that has expenses and Income tabs. Every time you add an expense or income, the app pushes the information inside of an array of objects and dynamically renders an <li> component and places it inside of a <ul>. I'm having trouble with the edit and delete features. Each individual <li> comes with a delete and edit button. The <li>, delete button, and edit button all have the same id of Date.now(). Date.now() is used because it produces a number based on milliseconds and won't produce the same id twice unless someone types an expense or income twice within one millisecond I want to click on the delete button inside of the <li> and have my app remove that individual object from my entry_list[] array and also remove the <li> from the DOM.
'use strict'
const balanceElement = document.querySelector(".balance .value");
const totalIncome = document.querySelector(".income-total");
const totalOutcome = document.querySelector(".outcome-total");
const incomeElement = document.querySelector(".income-tab");
const expense = document.querySelector(".expense-tab");
const all = document.querySelector(".all-tab");
const incomeList = document.querySelector(".income-tab .list");
const expenseList = document.querySelector(".expense-tab .list");
const allList = document.querySelector(".all-tab .list");
const expensesButton = document.querySelector(".tab1");
const incomeButton = document.querySelector(".tab2");
const allButton = document.querySelector(".tab3");
const addExpense = document.querySelector(".add-expense")
const expenseTitle = document.querySelector(".expense-title-input")
const expenseAmount = document.querySelector(".expense-amount-input")
const addIncome = document.querySelector(".add-income")
const incomeTitle = document.querySelector(".income-title-input")
const incomeAmount = document.querySelector(".income-amount-input")
const list = document.querySelector('.list')
//SWITCHING BETWEEN TABS
expensesButton.addEventListener('click', () => {
expense.classList.remove('hidden');
incomeElement.classList.add('hidden');
expensesButton.classList.add('clicked');
incomeButton.classList.remove('clicked');
})
incomeButton.addEventListener('click', () => {
incomeElement.classList.remove('hidden');
expense.classList.add('hidden');
expensesButton.classList.remove('clicked');
incomeButton.classList.add('clicked');
})
incomeList.addEventListener('click', deleteOrEdit)
expenseList.addEventListener('click', deleteOrEdit)
let entry_list = []
addExpense.addEventListener('click', () =>{
if(expenseTitle.value == '' || expenseAmount.value == ''){
return;
}
let expense = {
type: 'expense',
title: expenseTitle.value,
amount: expenseAmount.value,
id: Date.now()
}
entry_list.push(expense)
clearExpense()
changeLists()
})
addIncome.addEventListener('click', () =>{
if(incomeTitle.value == '' || incomeAmount.value == ''){
return;
}
let income = {
type: 'income',
title: incomeTitle.value,
amount: incomeAmount.value,
id: Date.now()
}
entry_list.push(income)
clearIncome()
changeLists()
})
const clearExpense = () =>{
expenseTitle.value = '';
expenseAmount.value = '';
}
const clearIncome = () =>{
incomeTitle.value = ''
incomeAmount.value = ''
}
const changeLists = () =>{
expenseList.innerHTML = ''
incomeList.innerHTML = ''
entry_list.map((entry) =>{
if(entry.type == 'expense'){
return expenseList.innerHTML += `<li id = "${entry.id}" class= "${entry.type}">
<div class = "entry">${entry.title}: $${entry.amount}</div>
<div class="icon-container">
<div class = "edit" id="${entry.id}"></div>
<div class ="delete" id="${entry.id}"></div>
</div>
</li>`
}
else if(entry.type == 'income'){
return incomeList.innerHTML += `<li id = "${entry.id}" class= "${entry.type}">
<div class = "entry">${entry.title}: $${entry.amount}</div>
<div class="icon-container">
<div class = "edit" id="${entry.id}"></div>
<div class ="delete" id="${entry.id}"></div>
</div>
</li>`
}
})
addIncomes()
}
const addIncomes = () =>{
let sum = 0;
let income = 0;
let outcome = 0;
balanceElement.innerHTML = 0
totalIncome.innerHTML = 0
totalOutcome.innerHTML = 0
entry_list.forEach(list =>{
if(list.type == 'expense'){
sum -= list.amount
outcome -= list.amount
}else if(list.type == 'income'){
sum += Number(list.amount)
income += Number(list.amount)
}
balanceElement.innerHTML = '$' + sum
totalIncome.innerHTML = '$' + income
totalOutcome.innerHTML = '$' + outcome
})
}
// // DETERMINE IF BUTTON IS EDIT OR DELETE
function deleteOrEdit(e){
const targetButton = e.target;
const entry = targetButton.parentNode.parentNode;
if(targetButton.classList == ('delete')){
deleteEntry(entry)
}else if(targetButton.classList == ('edit')){
editEntry(entry);
}
}
// //DELETE FUNCTION
const deleteEntry = (entry) =>{
console.log(entry.id)
entry_list.splice(entry.id, 1)
// entry.innerHTML = ''
console.log(entry.id)
addIncomes()
}
// EDIT FUNCTION
const editEntry = (entry) =>{
let Entry = entry_list[entry.id]
if(entry.type == "income"){
incomeAmount.value = Entry.amount;
incomeTitle.value = Entry.title;
}else if(entry.type == "expense"){
expenseAmount.value = Entry.amount;
expenseTitle.value = Entry.title;
}
deleteEntry(entry);
}
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&family=Raleway:wght#400;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.budget-container{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
background-color: #4F98CA;
}
.balance-container{
width: 360px;
height: 470px;
background-color: #50D890;
border-radius: 30px;
margin-right: 100px;
}
.app-title{
color: white;
margin-top: 1rem;
margin-left: 1rem;
}
.month{
color: white;
margin-top: 1rem;
text-align: center;
}
.budget-header{
display: flex;
flex-direction:column;
justify-content: center;
}
.balance{
margin-top: 1rem;
margin-left: 1rem;
}
.title{
color: white;
font-size: 1.25rem;
opacity: .75;
}
.value{
font-size: 1.75rem;
color: white;
font-weight: bold;
margin-left: 1rem;
}
.account{
margin-top: 2.5rem;
margin: 2.5rem 1.5rem 2.5rem 1.5rem;
display: flex;
justify-content: space-between
}
.income-total{
color: white;
text-align: center;
font-size: 1.5rem;
}
.outcome-total{
color: #4F98CA;
text-align: center;
font-size: 1.5rem;
}
/* DASHBOARD */
.budget-dashboard{
display: block;
width: 360px;
height: 470px;
position: relative;
border-radius: 30px;
background-color: white;
}
.dash-title{
margin-top: 2rem;
margin-left: 1rem;
font-size: 1.5rem;
}
.toggle{
margin: 1rem;
display: flex;
cursor: pointer;
}
.toggle .tab2, .tab3{
margin-left: 1rem;
cursor: pointer;
}
.clicked{
font-weight: bold !important;
}
.hidden{
display: none !important;
}
/* EXPENSES TAB */
.expense-tab{
display: flex;
justify-content: center;
}
.expense-input-container{
position: absolute;
top: 400px;
border-top: solid 1px gray;
width: 100%;
}
.expense-amount-input{
width: 125px;
border: none;
outline: none;
font-size: 1.25rem;
}
.expense-title-input{
width: 125px;
border: none;
outline: none;
font-size: 1.25rem;
}
.add-expense{
color: none;
background-color: none;
border: none;
outline: none;
color: inherit;
}
/* INCOME TAB */
.income-tab{
display: flex;
justify-content: center;
}
.income-input-container{
position: absolute;
top: 400px;
border-top: solid 1px gray;
width: 100%;
}
.input{
display: flex;
justify-content: space-between;
align-items: center;
margin: 1rem;
}
.income-amount-input{
width: 125px;
border: none;
outline: none;
font-size: 1.25rem;
}
.income-title-input{
width: 125px;
border: none;
outline: none;
font-size: 1.25rem;
}
.add-income{
color: none;
background-color: none;
border: none;
outline: none;
}
.plus-img{
width: 40px;
}
/* li */
ul{
width: 360px;
height: 255px;
list-style: none;
margin-top:20px;
overflow-x: auto;
}
/* BUTTON ICONS */
.edit{
background-image: url('media/Icons/icons8-edit-48.png');
background-size: contain;
width: 25px;
height: 25px;
background-repeat: no-repeat;
margin-right: 10px;
}
.delete{
background-image: url('media/Icons/icons8-trash-can-48 (2).png');
background-size: contain;
width:25px;
height: 25px;
background-repeat: no-repeat;
}
.income{
width:250px;
height: auto;
padding-left: 20px;
margin-bottom: 10px;;
word-wrap: break-word;
color: black
}
.expense{
width:250px;
height: auto;
padding-left: 20px;
margin-bottom: 10px;;
word-wrap: break-word;
font-family: 'Gilroy Bold';
color: #4F98CA;
}
li{
display: flex;
justify-content: space-between;
width: 100% !important;
padding-right: 20px;
}
.icon-container{
display: flex;
}
#media (max-width:900px){
.budget-container{
display: inline-block;
position: relative
}
.balance-container{
position: absolute;
top: 10%;
left: 25%;
}
.budget-dashboard{
position: absolute;
left: 25%;
top: 40%;
}
}
<!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="style.css">
<title>Budgetrr</title>
</head>
<body>
<main class="budget-container">
<section class="balance-container">
<div class="app-title">
<p>Budgetrr</p>
</div>
<h1 class="month">OCTOBER</h1>
<section class="budget-header">
<div class="balance">
<div class="title">
Balance
</div>
<div class="value">
<small>$</small>0
</div>
</div>
<div class="account">
<div class="budget-income">
<div class="title">
Income
</div>
<div class="income-total">
<small>$</small>0
</div>
</div>
<div class="chart"></div>
<div class="budgetoutcome">
<div class="title">
Expenses
</div>
<div class="outcome-total">
<small>$</small>0
</div>
</div>
</div>
</section>
</section>
<section class="budget-dashboard">
<div class="dash-title">Dashboard</div>
<div class="toggle">
<div class="tab1 clicked">Expenses</div>
<div class="tab2">Income</div>
<!-- <div class="tab3 clicked">All</div> -->
</div>
<div class="income-tab hidden">
<ul class="list"></ul>
<div class="income-input-container">
<form class="input">
<input type="text" class="income-title-input" name="title" placeholder="Title">
<input type="number" class="income-amount-input" name="amount" placeholder="$0">
<button type = "button" class="add-income"><img class= "plus-img"src="media/Icons/icons8-add-new-48.png" alt=""></button>
</form>
</div>
</div>
<div class = "expense-tab">
<ul class="list"></ul>
<div class="expense-input-container">
<div class="input">
<input type="text" class="expense-title-input" name="title" placeholder="Title">
<input type="number" class="expense-amount-input" name="amount" placeholder="$0">
<button type="button" class="add-expense"><img class= "plus-img" src="media/Icons/icons8-add-new-48.png" alt=""></button>
</div>
</div>
</div>
</section>
</main>
<script src="JavaScript/budget.js"></script>
</body>
</html>
I've tried to use .splice() but I can't seem to get it to work.
Your entry is an object. And entry has an id property with Date type.
Your delete function calls this:
entry_list.splice(entry.id, 1)
Javascript splice function
function takes number as argument(s).
You should find the id of element you want to delete and get its index. After that you can delete the element with splice method.
Here is how to delete:
// Find the index of object at the given list
const index = entry_list.findIndex(x => x.id === entry.id);
// Starting from index of element to delete, remove 1 element.
entry_list.splice(index, 1);
I have a function that adds a class oPiece while the counter is even and the class xPiece while odd. The current for-loop however only adds the class xPiece every time I click a div (with class=box)
JS
$('.box').click(function() {
for (var i = 0; i < 8; i++) {
if (i % 2 == 0) {
$(this).addClass('oPiece');
} else {
$(this).addClass('xPiece');
}
}
});
HTML
<div class="container">
<div class="box" id="1"></div>
<div class="box" id="2"></div>
<div class="box" id="3"></div>
<div class="box" id="4"></div>
<div class="box" id="5"></div>
<div class="box" id="6"></div>
<div class="box" id="7"></div>
<div class="box" id="8"></div>
<div class="box" id="9"></div>
</div>
<button class="resetBtn">Reset</button>
CSS
.container {
width: 240px;
height: 240px;
border: 2px solid gray;
display: block;
padding: 0;
font-size: 0;
margin: auto;
}
.box {
width: 80px;
height: 80px;
box-sizing: border-box;
border: 1px solid gray;
display: inline-block;
align-items: center;
justify-content: center;
}
.oPiece {
background-color: blue;
}
.xPiece {
background-color: red;
}
.resetBtn {
display: block;
margin: 20px auto;
}
Here is the link to my codepen --> https://codepen.io/jdk301/pen/LYbeeOX
when click the div(class=box),will execute once for statement. In the end of for statement the value of i is seven so div addclass always 'xPiece'.
change the js code:
let num = 0;
$('.box').click(function() {
// for (let i = 0; i < 8; i++) {
// console.log(i)
// if (i % 2 == 0) {
// $(this).addClass('oPiece');
// } else {
// $(this).addClass('xPiece');
// }
// }
num++;
if (num % 2 == 0) {
$(this).addClass('oPiece');
} else {
$(this).addClass('xPiece');
}
});
`
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Task Manager</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="main-container">
<header>
<h1>TASK MANAGER</h1>
<div id="task-value-check" class="value-check"></div>
<div id="member-value-check" class="value-check"></div>
<div id="input">
<div id="task-form">
<form onsubmit="createTask(event)">
<input class="text-input" name="task" type="text" placeholder="Name of
new task">
<input class="button" type="submit" value="ADD"/>
</form>
</div>
<div id="tasks-header" class="header">TASKS</div>
<div id="member-form">
<form onsubmit="createMember(event)">
<input class="text-input" name="teamMember" type="text"
placeholder="Name of new team member">
<input class="button" type="submit" value="ADD"/>
</form>
</div>
<div id="members-header" class="header">TEAM MEMBERS</div>
</div>
</header>
<main>
<div id="assign-value-check" class="value-check"></div>
<div id="assign-form">
<form onsubmit="assignToMember(event)">
<input class="text-input" class="input-txt" id="check-task" type="text"
placeholder="Pick task">
<input type="submit" id="assign-button" value="ASSIGN" class="button"
class="input-submit">
</form>
</div>
<div id="assignments-header" class="header">TASK ASSIGNMENTS</div>
<main>
<div id="listing">
<div id="tasks-rendering" class="rendering"></div>
<div id="members-rendering" class="rendering"></div>
<div id="assignments-rendering" class="rendering"></div>
</div>
</main>
</div>
<script src=index.js></script>
</body>
</html>
function createTask(event) {
event.preventDefault();
let task = document.querySelector("[name='task']").value;
task = task.toLowerCase();
const taskList = JSON.parse(localStorage.getItem('task')) || [];
if (task === "") {
document.getElementById("task-value-check").innerHTML = "PLEASE ENTER A TASK";
} else {
document.getElementById("task-value-check").innerHTML = "";
document.getElementById("member-value-check").innerHTML = "";
const tasks = { task};
taskList.push(tasks);
window.localStorage.setItem('task', JSON.stringify(taskList));
event.target.reset();
renderTaskList();
}
}
function createMember(event) {
event.preventDefault();
let member = document.querySelector("[name='teamMember']").value;
member = member.toLowerCase();
if (member === "") {
document.getElementById("member-value-check").innerHTML = "PLEASE ENTER A TEAM MEMBER";
} else {
document.getElementById("member-value-check").innerHTML = "";
document.getElementById("task-value-check").innerHTML = "";
const members = { member };
const memberList = JSON.parse(localStorage.getItem('member')) || [];
memberList.push(members);
window.localStorage.setItem('member', JSON.stringify(memberList));
event.target.reset();
renderMemberList();
}
}
function assignToMember(event) {
event.preventDefault();
const taskList = JSON.parse(localStorage.getItem('task')) || {};
let nameTask = document.getElementById('check-task').value;
let valueCheck = document.getElementById('assign-value-check');
if (nameTask === "") {
valueCheck.innerHTML = "PLEASE ENTER A TASK AND A TEAM MEMBER";
} else if (nameTask === "") {
valueCheck.innerHTML = "PLEASE ENTER A TASK";
} else {
valueCheck.innerHTML = "";
nameTask = nameTask.toLowerCase();
const assignMemberList = JSON.parse(localStorage.getItem('assignment')) || [];
let task;
if (nameTask != '') {
for (const a of taskList) {
if (a.task === nameTask) {
task = a.task;
}
}
if (task != undefined) {
let assignToMember = {task};
assignMemberList.push(assignToMember);
window.localStorage.setItem('assignment', JSON.stringify(assignMemberList));
} else {
valueCheck.innerHTML = "PLEASE ENTER AN EXISTING TASK AND/OR TEAM MEMBER";
}
renderUpdatedTaskList();
}
event.target.reset();
}
}
function renderTaskList() {
const taskList = JSON.parse(window.localStorage.getItem("task")) || [];
const taskListOutput = document.getElementById("tasks-rendering");
taskListOutput.innerHTML = "";
for (const a of taskList) {
let taskElement = document.createElement("div");
taskElement.innerHTML = `<div class="object-render">
<h4>${a.task.charAt(0).toUpperCase() + a.task.slice(1)}</h4>
</div>`;
taskListOutput.appendChild(taskElement);
}
}
function renderMemberList() {
const memberList = JSON.parse(window.localStorage.getItem("member")) || [];
const memberListOutput = document.getElementById("members-rendering");
memberListOutput.innerHTML = "";
for (const m of memberList) {
let memberElement = document.createElement("div");
memberElement.innerHTML = `<div class="object-render" draggable="true"
ondragstart="drag(event)">
<h4 id="drag1">${m.member.charAt(0).toUpperCase() +
m.member.slice(1)}</h4>
</div>`;
memberListOutput.appendChild(memberElement);
}
}
I am trying to drag and drop names to different tasks, but when I do the names i drop only
appears on the first created task. I want to be able to drag and drop names to the task I want. I also want them to stay there when the site is refreshed.
function renderUpdatedTaskList(){
const assignMemberList = JSON.parse(localStorage.getItem('assignment')) || [];
const assignmentListOutput = document.getElementById('assignments-rendering');
assignmentListOutput.innerHTML = "";
for (const a of assignMemberList) {
let assignmentElement = document.createElement("div");
assignmentElement.innerHTML = `<div id="assignment-object-render" class="object-render-
assignments"
class="containers" ondragover="allowdrop(event)">
<h1>${a.task.charAt(0).toUpperCase() + a.task.slice(1)}</h1>
<br>
<p>medlemmer</p>
<div class="membersDiv" ondragover="allowdrop(event)" ondrop="drop(event)">
</div>
</div>`;
assignmentListOutput.appendChild(assignmentElement);
}
renderMemberNamesOnTask();
}
function allowdrop(ev) {
ev.preventDefault();
}
function drag(ev) {
let memberInfo = ev.target.innerText;
ev.dataTransfer.setData("text/plain", memberInfo);
}
function drop(ev) {
ev.preventDefault();
const taskAndMember = JSON.parse(localStorage.getItem("taskAndMember")) || [];
let memberInfo = ev.dataTransfer.getData("text/plain");
task = ev.target.parentElement.querySelector("h1").innerText;
ev.target.append(memberInfo);
memberAndTask = {task, memberInfo};
taskAndMember.push(memberAndTask);
window.localStorage.setItem("taskAndMember", JSON.stringify(taskAndMember));
renderUpdatedTaskList();
}
function renderMemberNamesOnTask(){
const taskAndMember = JSON.parse(localStorage.getItem("taskAndMember")) || [];
let membersDiv = document.querySelectorAll(".membersDiv");
membersDiv.innerHTML = "";
for(const m of taskAndMember){
let htmlTxt = document.createElement("div");
htmlTxt.innerHTML = `${m.memberInfo}`;
Every name i drag on to a task will only appear on the first created task. I am pretty sure the problem lies somewhere here.
membersDiv.appendChild(htmlTxt);
}
}
`
`
body{
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
}
#main-container{
position: relative;
background-color: gainsboro;
margin: 0 auto;
width: 800px;
height: 1000px;
border-bottom: 30px solid floralwhite;
}
header{
z-index: 2;
position: absolute;
width: 800px;
height: 100px;
background-color: floralwhite;
text-align: center;
}
.text-input{
font-size: 15px;
border: 1px solid white;
height: 17px;
width: 250px;
}
.button{
font-size: 14px;
border: 1px solid white;
color: grey;
height: 20px;
width: 50px;
}
#task-form{
position: absolute;
left: 40px;
margin-top: 15px;
top: 110px;
}
#member-form{
position: absolute;
right: 40px;
margin-top: 15px;
top: 110px;
}
.value-check{
position: absolute;
z-index: 3;
top: 110px;
font-size: 12px;
color: red;
}
#task-value-check{
left: 40px;
}
#member-value-check{
right: 210px;
}
#assign-value-check{
top: 561px;
left: 135px;
}
.header{
position: absolute;
z-index: 2;
top: 170px;
background-color: antiquewhite;
color: grey;
border-bottom: 1px solid white;
height: 20px;
width: 370px;
font-size: 15px;
padding: 10px;
}
#tasks-header{
left: 0px;
}
#members-header{
right: 0px;
}
#assignments-header{
top: 620px;
width: 780px;
text-align: center;
}
#assign-form{
position: absolute;
left: 220px;
top: 578px;
}
#check-task{
position: absolute;
left: -85px;
}
#check-member{
position: absolute;
right: -445px;
}
#assign-button{
position: absolute;
width: 80px;
left: 450px;
}
#plus-symbol{
position: absolute;
color: white;
top: -28px;
left: 175.5px;
}
#assignment-object-render{
background-color: floralwhite;
padding: 20px;
padding-bottom: 50px;
font-size: 10px;
text-align: center;
}
.object-render{
background-color: floralwhite;
padding: 20px;
font-size: 10px;
text-align: center;
width: 62px;
word-wrap: break-word;
overflow-y: auto;
height: 55px;
}
.object-render-assignments{
background-color: floralwhite;
padding: 20px;
font-size: 10px;
text-align: center;
}
#tasks-rendering{
top: 210px;
}
#members-rendering{
top: 210px;
right: 0px;
}
#assignments-rendering{
bottom: 20px;
width: 760px;
height: 280px;
}
.rendering{
position: absolute;
background-color: antiquewhite;
font-family: sans-serif;
padding: 20px;
width: 350px;
height: 300px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-row-gap: 20px;
grid-column-gap: 20px;
overflow: auto;
}
.membersDiv{
height: 70px;
width: 200px;
background-color: lightgray;
overflow-y: scroll;
}
This is the css code.
`
I am trying to solve this problem with my mini game using javascript. The Game is suppose to randomly show divs using the randomFadeIn with jquery.random-fade-in.min.js. It works but the problem is that I could not stop it from running. This is just a basic javascript game but it is hard to implement using jquery
Here is my full code
const result = document.getElementById(".box-container>div");
console.log(result);
const button = document.getElementsByTagName("div");
let sec = 0;
function gameStart(num) {
let num1 = 800;
if ($(".box-container>div>p").css('opacity') != 0) {
console.log("not yet done");
$(function() {
$('.box-container').randomFadeIn(800);
});
} else {
console.log("win");
};
}
function clickBox() {
$(".box-container>div>p").click(function() {
$(this).animate({
opacity: 0
}, 800);
})
}
function gameWins() {}
function gameStops() {
setTimeout(function() {
alert("Game Ends");
}, 60000);
}
clickBox();
//gameStops();
gameWins();
.box-container {
width: 232px;
float: left;
width: 45%;
}
.box-container div {
float: left;
height: 100px;
margin-bottom: 8px;
margin-right: 8px;
overflow: hidden;
width: 100px;
}
.box-container div p {
background: #097;
box-sizing: border-box;
color: #fff;
display: none;
font-size: 20px;
height: 100%;
margin: 0;
padding-top: 14px;
text-align: center;
width: 100%;
}
.clearfix:after {
clear: both;
content: '';
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://sutara79.github.io/jquery.random-fade-in/dist/jquery.random-fade-in.js"></script>
<h1> Click Dem Boxes</h1>
<button onclick="gameStart()"> Start game </button>
<p>Mechanics: You need to click all the boxes before the time ends</p>
> just a bunch of divs that fades in and does not stop
<div class="box-container clearfix">
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
By using the .stop() function, you could stop the animation. See snippet below.
let maxSeconds = 30000;
let numOfCards = $('.box').length;
function gameStart() {
console.log("Game started");
let numOfClicked = 0;
$(".box-container>div>p").click(function() {
// Increase the counter
numOfClicked++;
// Fade out
$(this).fadeOut(800);
if(numOfClicked == numOfCards){
gameWon();
}
})
$('.box-container').randomFadeIn(800);
setTimeout(
function() {
if(numOfClicked != numOfCards){
gameLost();
}
}, maxSeconds);
}
function gameWon(){
gameStop();
console.log("You won the game!");
}
function gameLost(){
gameStop();
console.log("You lost the game!");
}
function gameStop(){
$(".box-container>div>p").stop(false, false);
}
.box-container {
width: 232px;
float: left;
width: 45%;
}
.box-container div {
float: left;
height: 100px;
margin-bottom: 8px;
margin-right: 8px;
overflow: hidden;
width: 100px;
}
.box-container div p {
background: #097;
box-sizing: border-box;
color: #fff;
display: none;
font-size: 20px;
height: 100%;
margin: 0;
padding-top: 14px;
text-align: center;
width: 100%;
}
.clearfix:after {
clear: both;
content: '';
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://sutara79.github.io/jquery.random-fade-in/dist/jquery.random-fade-in.js"></script>
<h1> Click Dem Boxes</h1>
<button onclick="gameStart()"> Start game </button>
<p>Mechanics: You need to click all the boxes before the time ends</p>
> just a bunch of divs that fades in and does not stop
<div class="box-container clearfix">
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
<div class="box">
<p></p>
</div>
</div>
So when I run this code and look at the console I get the response:
"The specified value "undefined" is not a valid number. The value must match to main.js:45 the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?
I've updated the HTML to do the onclick for the total in the JS. I've also put in an onclick to clear the display in the HTML. I think I need to actually put in a function to cleardisplay in JS as well.
What I'm struggling with is what's the best way to update JS to accept the values and return a response of the calculation?
At the moment I'm trying to do eval but I guess I'm using it wrong or not connecting it properly.
Let me know if I'm completely wrong with what I need to update this as well.
For a better look:
jsfiddle
let number = document.getElementsByClassName("number");
let operate = document.getElementsByClassName("operate");
let clear = document.getElementById("clear");
let sub=document.getElementById("sub");
let multiply = document.getElementById("mul");
let divide = document.getElementById("divide");
let add = document.getElementById("plus");
let display = document.querySelector("input");
//Functions or For Loops
for (let i = 0; i < number.length; i++) {
number[i].addEventListener("click", function() {
let inputValue = entry.querySelector("input").value;
let buttonValue = this.textContent;
if (buttonValue === "C") {
display.value = " ";
} else {
entry.innerHTML += buttonValue;
}
})
}
for (let i = 0; i < operate.length; i++) {
operate[i].addEventListener("click", function() {
let inputValue = entry.querySelector("input").value;
let buttonValue = this.textContent;
if (buttonValue === "C") {
entry.innerHTML = " ";
} else {
entry.innerHTML += buttonValue;
}
})
}
function total(){
let display = document.querySelector("input");//equal in HTML using "total()" for the onclick
x=display.value;
x=eval(x);
display.value=x;
}
/*Background color: #64B255;
Border color between buttons: #83C178;
Color for numbers, equal enterfield: white;
Operators (not =) color: #4B6E44;
Hover color for equal and clear: #83C178*/
.wrapper{
max-width: 375px;
margin: 0 auto;
margin-top: 50px;
}
section {
background-color: #64B255;
display: flex;
display: flex;
color: white;
text-align: center;
justify-content: center;
flex-wrap: wrap;
}
.number{
border: 1px solid gray;
box-sizing: border-box;
width:80px;
flex-grow: 1;
height: 80px;
}
#entry{
flex-grow: 3;
width: 245px;
font-size: 30px;
text-align: right;
}
#entry:hover{
background-color: #83C178;
}
#clear{
border: 2px solid gray;
box-sizing: border-box;
width:80px;
flex-grow: 1;
height: 80px;
}
.dot{
border: 1px solid gray;
box-sizing: border-box;
width:80px;
flex-grow: 1;
height: 80px;
}
.dot:hover{
background-color: #83C178;
}
.operate{
background-color: #83C178;
color: #4B6E44;
box-sizing: border-box;
width: 80px;
border: 1px solid gray;
flex-grow: 1;
height: 80px;
font-weight: 100;
}
.operate:hover{
color:white;
}
.number:hover{
background-color: #83C178;
}
input{
width: 20%;
height: 90%;
background-color: #64B255;
border-color: transparent;
text-align: right;
font-size: 60%;
color: white;
padding-bottom: 5px;
}
<body>
<div class="wrapper">
<section class="container">
<div class="clear" id="clear" onclick="clearDisplay()"><h1>C</h1></div>
<div id="entry"><input id="entryText" type="number"></div>
</section>
<section class="keys">
<div class="number seven" value="7"><h1>7</h1></div>
<div class="number eight" value="8"><h1>8</h1></div>
<div class="number nine" value="9"><h1>9</h1></div>
<div class="operate divide" id="divide"><h1>/</h1></div>
<div class="number four" value="4"><h1>4</h1></div>
<div class="number five" value="5"><h1>5</h1></div>
<div class="number six" value="6"><h1>6</h1></div>
<div class="operate mult" id="mul"><h1>x</h1></div>
<div class="number one" value="1"><h1>1</h1></div>
<div class="number two" value="2"><h1>2</h1></div>
<div class="number three" value="3"><h1>3</h1></div>
<div class="operate minus" id="sub"><h1>-</h1></div>
<div class="number zero" value="0"><h1>0</h1></div>
<div class="dot"><h1>.</h1></div>
<div class="operate equal" id="equal" onclick="total()"><h1>=</h1></div>
<div class="operate plus" id="plus"><h1>+</h1></div>
</section>
</div>
<script src="main.js"></script>
</body>
You have to add the clearDisplay function:
function clearDisplay(){
display.value = "";
}
Also you have to ask if the operator selected is equal (=). You can't add the = symbol to the input. Then your second for must look like this:
for (let i = 0; i < operate.length; i++) {
operate[i].addEventListener("click", function() {
let inputValue = entry.querySelector("input").value;
let buttonValue = this.textContent;
if (buttonValue === "C") {
entry.innerHTML = " ";
} else if(buttonValue !== "="){
entry.innerHTML += buttonValue;
}
})
}