Giter VIP home page Giter VIP logo

Comments (3)

CraigTorg avatar CraigTorg commented on July 21, 2024

Screen Shot 2021-03-02 at 10 16 48 PM

I went searching in the MMM-CountDown.js file and found these lines that I highlighted in blue. I adjusted the first two lines where it says medium and large. I haven't found where those classes come from but I guessed and changed them from large and xlarge to medium and large.

I am hoping I can change the word "days" to gray and dimmed like it shows in the example on the read me page but I haven't found where to do that yet.

from mmm-countdown.

JAG836 avatar JAG836 commented on July 21, 2024

@CraigTorg I figured out how to dim the word "days" like in the screenshot. The hint was in the "initial upload" commit. Here's what my MMM-CountDown.js getDOM function looks like:

getDom: function() {
		var wrapper = document.createElement("div");

		var timeWrapper = document.createElement("div");
		var textWrapper = document.createElement("div");
		var unitWrapper = document.createElement("sup");

		textWrapper.className = "align-left week dimmed medium";
		timeWrapper.className = "time bright xlarge light";
		unitWrapper.className = "dimmed";     // added

		textWrapper.innerHTML=this.config.event;

		var today = new Date(Date.now());
		var target = new Date(this.config.date);
		var timeDiff = target - today;

		// Set days, hours, minutes and seconds
		var diffDays = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
		var diffHours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
		var diffMinutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
		var diffSeconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

		// Build the output
		var hrs = '';
		var mins = '';
		var secs = '';
		var days = diffDays;   // moved  this.config.daysLabel to unitWrapper.innerHTML below

		if(this.config.showHours == true) hrs = diffHours + this.config.hoursLabel;
		if(this.config.showMinutes == true) mins = diffMinutes + this.config.minutesLabel;
		if(this.config.showSeconds == true) secs = diffSeconds + this.config.secondsLabel;

		timeWrapper.innerHTML = days + hrs + mins + secs;
		unitWrapper.innerHTML = this.config.daysLabel;    // moved from 'var days' above. add other labels as needed like timeWrapper line but I have only tested with days

		wrapper.appendChild(textWrapper);
		wrapper.appendChild(timeWrapper);
		timeWrapper.appendChild(unitWrapper);    // added

		return wrapper;
	}

from mmm-countdown.

EfficientUser avatar EfficientUser commented on July 21, 2024

Thank for your help, resizing works perfectly just dimming doesn't work but that's fine for me

from mmm-countdown.

Related Issues (12)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.