Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Paper--Andrea Palacios #61

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Paper--Andrea Palacios #61

wants to merge 3 commits into from

Conversation

dre-create
Copy link

No description provided.

Copy link

@CheezItMan CheezItMan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You got the temperature buttons to work and I hope you understand how event handlers, JavaScript and the DOM work together now. I left some feedback, I hope it's useful. Let me know if you have questions.

I'm sorry you weren't able to get all the functionality in, but I'm glad you got this submitted so we can look at the feedback. If you do finish additional waves, let us know and we can take a look at it.

Comment on lines +40 to +42
<p id ="decrease-temp">🔽</p>
<p id=temp>70</p>
<p id="increase-temp">🔼</p>
Copy link

@CheezItMan CheezItMan Jul 15, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just want to point out that making these p tags is not great for accessibility. Instead I suggest making them hyperlinks or buttons.

Screen readers won't pick up that these are clickable.

Comment on lines +11 to +24
//increase temp
const increaseTemp= () => {
state.tempCount +=1
const tempUp = document.querySelector("#temp")
tempUp.textContent = `${state.tempCount}`
//updateTempColor();
};

const decreaseTemp= () => {
state.tempCount -=1
const tempDown = document.querySelector("#temp")
tempDown.textContent = `${state.tempCount}`
//updateTempColor();
};

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just note that you can combine these functions and use a parameter.

Suggested change
//increase temp
const increaseTemp= () => {
state.tempCount +=1
const tempUp = document.querySelector("#temp")
tempUp.textContent = `${state.tempCount}`
//updateTempColor();
};
const decreaseTemp= () => {
state.tempCount -=1
const tempDown = document.querySelector("#temp")
tempDown.textContent = `${state.tempCount}`
//updateTempColor();
};
//increase temp
const changeTemp= (increment) => {
state.tempCount +=increment
const tempUp = document.querySelector("#temp")
tempUp.textContent = `${state.tempCount}`
//updateTempColor();
};

Then you can pass these in as event handlers

upButton.addEventListener("click",() => changeTemp(1));

downButton.addEventListener("click",() => changeTemp( -1 ));

Comment on lines +63 to +64
// const changedElement = document.querySelectorAll(".your-city");
// changedElement.textContent = cityInput.value;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a note that querySelectorAll returns an array.

Suggested change
// const changedElement = document.querySelectorAll(".your-city");
// changedElement.textContent = cityInput.value;
// const changedElement = document.querySelectorAll(".your-city")[0];
// changedElement.textContent = cityInput.value;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants