Answered: fix the main.js file so that when the…

New Perspectives on HTML5, CSS3, and JavaScript

6th Edition

ISBN:9781305503922

Author:Patrick M. Carey

Publisher:Patrick M. Carey

Chapter9: Getting Started With Javascript: Creating A Countdown Clock

Section: Chapter Questions

Problem 10CP4

See similar textbooks

Related questions

Concept explainers

Question

Please fix the main.js file so that when the button is clicked enough times the

<button class="hot-button cold"> in index.html gets changed to <button class="hot-button cool"> at less than 4 clicks, <button class="hot-button tepid"> at less than 7 clicks and so forth.

We only just learned dom manipulation and

document.querySelector()

pls help me understand dom better thank you very much!

index.html

<!DOCTYPE html>

<head>

<title>DOM Manipulation</title>

</head>

<body>

<main>

<button class="hot-button cold">Hot Button</button>

<p class="click-count">Clicks: 0</p>

</main>

</body>

</html>

main.js

var $hot = document.querySelector('.hot-button');

var numTimesClicked = 0;

function handleClick(event) {

numTimesClicked++;

var temperature = null;

var countOnpage = document.querySelector('.click-count');

countOnpage.textContent = 'Clicks: ' + numTimesClicked;

if (numTimesClicked < 4) {

temperature = 'cold';

} else if (numTimesClicked < 7) {

temperature = 'cool';

} else if (numTimesClicked < 10) {

temperature = 'tepid';

} else if (numTimesClicked < 13) {

temperature = 'warm';

} else if (numTimesClicked < 16) {

temperature = 'hot';

} else {

temperature = 'nuclear';

}

var $click = document.querySelector('.hot-button');

$click.addEventListener('click', handleClick);

Expert Solution

Trending now

This is a popular solution!

Step by step

Solved in 2 steps

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.

Similar questions