Swapping out the initial hue and toggling between two different colors

Question

Swapping out the initial hue and toggling between two different colors

Is it possible to keep the color removed after pressing the 1st play SVG, while having two other colors switch back and forth between each other? https://jsfiddle.net/x0pu2c31/

The current colors are Blue. Once one is pressed, I want the colors to switch between Green & Orange.

In the existing code, the colors change between Blue & Green. How can I remove Blue and make the colors switch between Green & Orange once Blue is removed?

Desired behavior:

If Blue is pressed, the color should switch back to Green.
If Green is pressed, the color should become Orange.
If Orange is pressed, the color should go back to Green.
Once you click on the play SVG, then close the page by clicking 'X' and return.

.played {
  fill: green;
}

function markAsPlayed(played) {
    played.classList.toggle("played");
}

...

javascript css

Answer 1

Answer №1

We need to adjust the code so that on the first click, the played state is added but never removed (to avoid going back to blue). Instead, we should check if the played class has been added. If not, add it; if it has, toggle a new class for a different color.

function markAsPlayed(played) {
    played.classList.add("played");
}

function markAsVisited(played) {
    played.classList.toggle("visited");
}

function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    
    hideAll(config.containers);
    resetPage();
    
    if (!cover.classList.contains('played')) {
        markAsPlayed(cover);
    } else {
        markAsVisited(cover);
    }
    showCovers(cover);
}

The CSS now includes extra classes to control color:

.played {
  fill: green;
}

.played.visited {
  fill: orange;
}

// JavaScript functions
const manageUI = (function makeManageUI() {
    // Functions here...
}());

const manageCover = (function makeManageCover() {
    // Functions and configuration details...
}());
manageCover.init({
    container: ".container",
    playButton: ".thePlay"
});

manageUI.init({});

// CSS styles
html,
body {
  // Styles here...
}

.outer {
  // Styles here...
}

// More CSS styles...

<div>
  <div class="outer">
    // HTML content with dynamic classes
  </div>
</div>

Answer 2

We need to adjust the code so that on the first click, the played state is added but never removed (to avoid going back to blue). Instead, we should check if the played class has been added. If not, add it; if it has, toggle a new class for a different color.

function markAsPlayed(played) {
    played.classList.add("played");
}

function markAsVisited(played) {
    played.classList.toggle("visited");
}

function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    
    hideAll(config.containers);
    resetPage();
    
    if (!cover.classList.contains('played')) {
        markAsPlayed(cover);
    } else {
        markAsVisited(cover);
    }
    showCovers(cover);
}

The CSS now includes extra classes to control color:

.played {
  fill: green;
}

.played.visited {
  fill: orange;
}

// JavaScript functions
const manageUI = (function makeManageUI() {
    // Functions here...
}());

const manageCover = (function makeManageCover() {
    // Functions and configuration details...
}());
manageCover.init({
    container: ".container",
    playButton: ".thePlay"
});

manageUI.init({});

// CSS styles
html,
body {
  // Styles here...
}

.outer {
  // Styles here...
}

// More CSS styles...

<div>
  <div class="outer">
    // HTML content with dynamic classes
  </div>
</div>

Swapping out the initial hue and toggling between two different colors

Answer №1

Similar questions

Develop an AJAX script for processing multiple form inputs in PHP and HTML

Eliminate the use of ngTemplate in your AngularJS project

TineMCE fails to trigger ajax-loading when accessing a textarea

Position the table cells at the corner so they align on the same row as a table row, even if the cells are from a different table with

Can the Angular.js scope be maintained while also making changes to the template?

The mobile version of the website is currently unable to support video MP4 files

Delete the query parameter from the router

I am encountering an issue with CreateJS where I receive the error message: "createjs is not defined"

Organize the menu in Angular by sorting it alphabetically

Is there a way to incorporate CSS into a JPG file on the server end?

Swapping out a Django template variable for a variable generated using JavaScript

Cut off text inside an HTML anchor element using an ellipsis, while ensuring the image remains at the end - all without the need for JavaScript

The issue with the Bootstrap slider persists

Utilize the HTML img tag in conjunction with AngularJS and Ionic to showcase dynamic images

The precedence of theme CSS is paramount

How to access the CSS and JS files in the vendor folder using linemanjs

confirming the phone field's character count

Combining JSON objects within an array

In search of a dropline menu with a comparable style

Easily accessible button and span located on the right side