jmonster · September 30, 2024 15:08
diff --git a/readme.md b/readme.md
diff --git a/homework.txt b/homework.txt
 See the following well-written docs for more information
 - https://lit.dev/docs/components/overview/
 - https://lit.dev/docs/templates/overview/
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Timer Example</title>
  <script type="module" src="my-timer.js"></script> <!-- Assuming your component is in 'my-timer.js' -->
 </head>
 <body>
  <!-- Starts the interval and updates the count because should-run is true -->
  <my-timer should-run></my-timer>

  <!-- Component with should-run initially false, interval won't start -->
  <my-timer></my-timer>

 </body>
 </html>
diff --git a/my-timer.js b/my-timer.js
 import { LitElement, html, css, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';

 @customElement('my-timer')
 class MyTimer extends LitElement {

  // A public property that can be set from outside the component
  @property({ attribute: 'should-run', type: Boolean })
  shouldRun = false; // Determines if the timer should run

  // Internal state to hold the current count
  @state()
  private _count = 0;

  // Hold a reference to the interval, so we can clear it later
  private _intervalId = null;

  static styles = css`
    div {
      font-size: 20px;
      font-family: Arial, sans-serif;
      color: #333;
      margin-bottom: 10px;
    }
    button {
      padding: 8px 12px;
      font-size: 16px;
      cursor: pointer;
    }
  `;

  constructor() {
    super();
    this._increment = this._increment.bind(this);
    this._toggleRun = this._toggleRun.bind(this);  // Bind the toggle function
  }

  connectedCallback() {
    super.connectedCallback();
    if (this.shouldRun) {
      this._startInterval();
    }
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    this._clearInterval();
  }

  firstUpdated() {
    console.log('Component rendered for the first time!');
  }

  willUpdate(changedProps) {
    console.log('Component will update, changed properties:', changedProps);
  }

  updated(changedProps) {
    if (changedProps.has('shouldRun')) {
      this._handleRunState();
    }
  }

  _handleRunState() {
    if (this.shouldRun) {
      this._startInterval();
    } else {
      this._clearInterval();
    }
  }

  _startInterval() {
    this._intervalId = setInterval(this._increment, 1000);
  }

  _clearInterval() {
    if (this._intervalId) {
      clearInterval(this._intervalId);
      this._intervalId = null;
    }
  }

  _increment() {
    this._count += 1;
  }

  // Toggles the shouldRun property when the button is clicked
  _toggleRun() {
    this.shouldRun = !this.shouldRun;
  }

  render() {
    return html`
      <div>
        Count: ${this._count}
      </div>
      <button @click="${this._toggleRun}">
        ${this.shouldRun ? 'Stop' : 'Start'} Timer
      </button>
    `;
  }
 }
	See the following well-written docs for more information
	- https://lit.dev/docs/components/overview/
	- https://lit.dev/docs/templates/overview/
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>My Timer Example</title>
	<script type="module" src="my-timer.js"></script> <!-- Assuming your component is in 'my-timer.js' -->
	</head>
	<body>
	<!-- Starts the interval and updates the count because should-run is true -->
	<my-timer should-run></my-timer>

	<!-- Component with should-run initially false, interval won't start -->
	<my-timer></my-timer>

	</body>
	</html>
	import { LitElement, html, css, nothing } from 'lit';
	import { customElement, property, state } from 'lit/decorators.js';

	@customElement('my-timer')
	class MyTimer extends LitElement {

	// A public property that can be set from outside the component
	@property({ attribute: 'should-run', type: Boolean })
	shouldRun = false; // Determines if the timer should run

	// Internal state to hold the current count
	@state()
	private _count = 0;

	// Hold a reference to the interval, so we can clear it later
	private _intervalId = null;

	static styles = css`
	div {
	font-size: 20px;
	font-family: Arial, sans-serif;
	color: #333;
	margin-bottom: 10px;
	}
	button {
	padding: 8px 12px;
	font-size: 16px;
	cursor: pointer;
	}
	`;

	constructor() {
	super();
	this._increment = this._increment.bind(this);
	this._toggleRun = this._toggleRun.bind(this); // Bind the toggle function
	}

	connectedCallback() {
	super.connectedCallback();
	if (this.shouldRun) {
	this._startInterval();
	}
	}

	disconnectedCallback() {
	super.disconnectedCallback();
	this._clearInterval();
	}

	firstUpdated() {
	console.log('Component rendered for the first time!');
	}

	willUpdate(changedProps) {
	console.log('Component will update, changed properties:', changedProps);
	}

	updated(changedProps) {
	if (changedProps.has('shouldRun')) {
	this._handleRunState();
	}
	}

	_handleRunState() {
	if (this.shouldRun) {
	this._startInterval();
	} else {
	this._clearInterval();
	}
	}

	_startInterval() {
	this._intervalId = setInterval(this._increment, 1000);
	}

	_clearInterval() {
	if (this._intervalId) {
	clearInterval(this._intervalId);
	this._intervalId = null;
	}
	}

	_increment() {
	this._count += 1;
	}

	// Toggles the shouldRun property when the button is clicked
	_toggleRun() {
	this.shouldRun = !this.shouldRun;
	}

	render() {
	return html`
	<div>
	Count: ${this._count}
	</div>
	<button @click="${this._toggleRun}">
	${this.shouldRun ? 'Stop' : 'Start'} Timer
	</button>
	`;
	}
	}