rihardn · December 23, 2022 13:22
diff --git a/css_news_scroller.html b/css_news_scroller.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>News scroller</title>
  </head>
  <body>
    <style>
      html,
      body {
        height: 100%;
        min-height: 100%;
        padding: 0;
        margin: 0;
      }
      @-webkit-keyframes tickerAnimation {
        0% {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          visibility: visible;
        }
        100% {
          -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
        }
      }
      @keyframes tickerAnimation {
        0% {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          visibility: visible;
        }
        100% {
          -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
        }
      }
      .ticker-wrap {
        box-sizing: border-box;
        display: flex;
        position: absolute;
        bottom: 0;
        width: 100%;
        overflow: hidden;
        height: 4.6%;
        background-color: #ffd23f;
        padding-left: 100%;
        align-items: center;
      }
      .ticker {
        box-sizing: border-box;
        display: inline-block;
        white-space: nowrap;
        padding-right: 100vw;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-name: tickerAnimation;
        animation-name: tickerAnimation;
        -webkit-animation-duration: 60s;
        animation-duration: 60s;
      }
      .ticker__item {
        box-sizing: border-box;
        display: inline-block;
        padding: 0 3em;
        font-size: 2em;
        color: #000000;
        font-family: Arial, sans-serif;
        font-weight: bold;
      }
      .ticker__item:not(:first-child) {
        border-left: 2px solid #000000;
      }
      .editor {
        box-sizing: border-box;
        display:block;
        padding: 1em;
      }
      textarea {
        box-sizing: border-box;
        margin-top: 1em;
        width: 100%;
        font-family: Arial, sans-serif;
        font-weight: normal;
        padding: 0.5em;
      }
      button {
        font-family: Arial, sans-serif;
        font-weight: bold;
        padding: 0.25em 1em;
      }
    </style>

    <div class="editor">
      <label for="editor">Input news</label>
      <textarea name="editor" id="editor" cols="30" rows="10">
 “You cannot reason a person out of a position he did not reason himself into in the first place.” ― Jonathan Swift
 “Reality is that which, when you stop believing in it, doesn't go away.” ― Philip K. Dick
 “My fault, my failure, is not in the passions I have, but in my lack of control of them.” ― Jack Kerouac
 “In the depth of winter, I finally learned that within me there lay an invincible summer.” ― Albert Camus
 “Some people never go crazy. What truly horrible lives they must lead.” ― Charles Bukowski
 “Dwell on the beauty of life. Watch the stars, and see yourself running with them.” ― Marcus Aurelius
 “And that's the thing about people who mean everything they say. They think everyone else does too.” ― Khaled Hoseini
 “Darkness cannot drive out darkness: only light can do that. Hate cannot drive out hate: only love can do that.” ― Martin Luther King Jr.
 “Those who do not move, do not notice their chains.” ― Rosa Luxemburg
 “Wealth consists not in having great possessions, but in having few wants.” ― Epictetus</textarea>
      <button type="button" id="parse">Parse lines</button> <button type="button" id="clear">Clear news ticker</button>
    </div>

    <div class="ticker-wrap">
      <div class="ticker">
      </div>
    </div>

    <script>

      function parseNews() {

        const editor = document.getElementById('editor');
        const tickerWrap = document.querySelector('.ticker-wrap');
        const ticker = document.querySelector('.ticker');
        const animConst = 0.006;
        let animDur = 60;

        const result = editor.value.split(/\r?\n/).filter((item) => {
          return item.trim() != "";
        });

        ticker.innerHTML = "";
        
        if (result.length > 0) {

          tickerWrap.style['visibility'] = 'visible';

          for (line of result) {
            let newsItem = document.createElement('div');
            newsItem.classList.add('ticker__item');
            newsItem.innerHTML = line;
            ticker.appendChild(newsItem);
          }

          console.dir(result);
          animDur = Math.floor(ticker.clientWidth * animConst);
          console.log(animDur);

          ticker.style['animation-duration'] = animDur+"s";
          ticker.style['-webkit-animation-duration'] = animDur+"s";
        } else {
          tickerWrap.style['visibility'] = 'hidden';
        }
      }

      parseNews();

      document.getElementById('parse').addEventListener('click',(evt) => {
        parseNews();
      });

      document.getElementById('clear').addEventListener('click',(evt) => {
        document.querySelector('.ticker').innerHTML = "";
        document.querySelector('.ticker-wrap').style['visibility'] = 'hidden';
      });
    </script>

  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>News scroller</title>
	</head>
	<body>
	<style>
	html,
	body {
	height: 100%;
	min-height: 100%;
	padding: 0;
	margin: 0;
	}
	@-webkit-keyframes tickerAnimation {
	0% {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	visibility: visible;
	}
	100% {
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
	}
	}
	@keyframes tickerAnimation {
	0% {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	visibility: visible;
	}
	100% {
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
	}
	}
	.ticker-wrap {
	box-sizing: border-box;
	display: flex;
	position: absolute;
	bottom: 0;
	width: 100%;
	overflow: hidden;
	height: 4.6%;
	background-color: #ffd23f;
	padding-left: 100%;
	align-items: center;
	}
	.ticker {
	box-sizing: border-box;
	display: inline-block;
	white-space: nowrap;
	padding-right: 100vw;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-name: tickerAnimation;
	animation-name: tickerAnimation;
	-webkit-animation-duration: 60s;
	animation-duration: 60s;
	}
	.ticker__item {
	box-sizing: border-box;
	display: inline-block;
	padding: 0 3em;
	font-size: 2em;
	color: #000000;
	font-family: Arial, sans-serif;
	font-weight: bold;
	}
	.ticker__item:not(:first-child) {
	border-left: 2px solid #000000;
	}
	.editor {
	box-sizing: border-box;
	display:block;
	padding: 1em;
	}
	textarea {
	box-sizing: border-box;
	margin-top: 1em;
	width: 100%;
	font-family: Arial, sans-serif;
	font-weight: normal;
	padding: 0.5em;
	}
	button {
	font-family: Arial, sans-serif;
	font-weight: bold;
	padding: 0.25em 1em;
	}
	</style>

	<div class="editor">
	<label for="editor">Input news</label>
	<textarea name="editor" id="editor" cols="30" rows="10">
	“You cannot reason a person out of a position he did not reason himself into in the first place.” ― Jonathan Swift
	“Reality is that which, when you stop believing in it, doesn't go away.” ― Philip K. Dick
	“My fault, my failure, is not in the passions I have, but in my lack of control of them.” ― Jack Kerouac
	“In the depth of winter, I finally learned that within me there lay an invincible summer.” ― Albert Camus
	“Some people never go crazy. What truly horrible lives they must lead.” ― Charles Bukowski
	“Dwell on the beauty of life. Watch the stars, and see yourself running with them.” ― Marcus Aurelius
	“And that's the thing about people who mean everything they say. They think everyone else does too.” ― Khaled Hoseini
	“Darkness cannot drive out darkness: only light can do that. Hate cannot drive out hate: only love can do that.” ― Martin Luther King Jr.
	“Those who do not move, do not notice their chains.” ― Rosa Luxemburg
	“Wealth consists not in having great possessions, but in having few wants.” ― Epictetus</textarea>
	<button type="button" id="parse">Parse lines</button> <button type="button" id="clear">Clear news ticker</button>
	</div>

	<div class="ticker-wrap">
	<div class="ticker">
	</div>
	</div>

	<script>

	function parseNews() {

	const editor = document.getElementById('editor');
	const tickerWrap = document.querySelector('.ticker-wrap');
	const ticker = document.querySelector('.ticker');
	const animConst = 0.006;
	let animDur = 60;

	const result = editor.value.split(/\r?\n/).filter((item) => {
	return item.trim() != "";
	});

	ticker.innerHTML = "";

	if (result.length > 0) {

	tickerWrap.style['visibility'] = 'visible';

	for (line of result) {
	let newsItem = document.createElement('div');
	newsItem.classList.add('ticker__item');
	newsItem.innerHTML = line;
	ticker.appendChild(newsItem);
	}

	console.dir(result);
	animDur = Math.floor(ticker.clientWidth * animConst);
	console.log(animDur);

	ticker.style['animation-duration'] = animDur+"s";
	ticker.style['-webkit-animation-duration'] = animDur+"s";
	} else {
	tickerWrap.style['visibility'] = 'hidden';
	}
	}

	parseNews();

	document.getElementById('parse').addEventListener('click',(evt) => {
	parseNews();
	});

	document.getElementById('clear').addEventListener('click',(evt) => {
	document.querySelector('.ticker').innerHTML = "";
	document.querySelector('.ticker-wrap').style['visibility'] = 'hidden';
	});
	</script>

	</body>
	</html>