nfreear · December 2, 2021 19:35
diff --git a/star-rating.js.html b/star-rating.js.html
 <!doctype html> <title> Star-rating widget </title>

 <h1> Star-rating widget </h1>

 <p><label for="rating">You can give us a star rating</label></p>


 <div class="star-rating" data-v="2">
  <input id="rating" type="range" min="0" max="5" step=".5" value="2" />
  <span class="no-star"></span>
  <span class="star"></span>
 </div>


 <style>
  :root {
    --star-rating-height: 4rem;
    --no-star-url: url(https://upload.wikimedia.org/wikipedia/commons/e/e7/Empty_Star.svg);
    --star-url: url(https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg);
  }

  * {
    X-box-sizing: border-box;
  }

  body { margin: 1px auto; max-width: 34rem; padding: 0 .3rem; }

  .star-rating {
    X-outline: 1px solid #ccc;
    height: var(--star-rating-height);
    width: calc(5.25 * var(--star-rating-height));
  }
  .star-rating input {
    color: pink;
    cursor: col-resize;
    opacity: .05;
    outline: 1px solid #333;
    outline-offset: 2px;
    position: absolute;
    height: var(--star-rating-height);
    width: calc(5.25 * var(--star-rating-height));
    padding: 0;
    transition: all 1s;
    z-index: 99;
  }
  .star-rating input:hover,
  .star-rating input:focus {
    X-outline: 2px solid #555;
    opacity: .5;
  }

  .star-rating .star,
  .star-rating .no-star {

    background-image: var(--star-url);
    background-repeat: repeat-x;
    background-position: left;
    background-size: auto var(--star-rating-height);
    display: block;
    height: 100%;
    position: relative;
    top: .15rem;
  }

  .star-rating .no-star {
    background-image: var(--no-star-url);
    border-right: none;
    width: 100%;
  }

  .star-rating .star {
    background-color: #eee;
    border-right: 1px solid #ddd;
    top: calc(-4rem + .15rem);
  }

  .star-rating[ data-v = '0'  ] .star { width: 0; }
  .star-rating[ data-v = '0.5'] .star { width: 10%; }
  .star-rating[ data-v = '1'  ] .star { width: 20%; }
  .star-rating[ data-v = '1.5'] .star { width: 30%; }
  .star-rating[ data-v = '2'  ] .star { width: 40%; }
  .star-rating[ data-v = '2.5'] .star { width: 50%; }
  .star-rating[ data-v = '3'  ] .star { width: 60%; }
  .star-rating[ data-v = '3.5'] .star { width: 70%; }
  .star-rating[ data-v = '4'  ] .star { width: 80%; }
  .star-rating[ data-v = '4.5'] .star { width: 90%; }
  .star-rating[ data-v = '5'  ] .star { width: 100%; }

 </style>


 <script>
  const RATING = document.querySelector('.star-rating');
  const INPUT = RATING.querySelector('input');
  INPUT.addEventListener('change', ev => {
    const value = ev.target.value
    RATING.setAttribute('data-v', value);
    RATING.title = `${value} / 5 stars!`;

    console.log('Rating change:', value, ev);
  });
 </script>


 <template id="star-template">
  <svg xmlns="http://www.w3.org/2000/svg" width="1235" height="1175">
    <path fill="#de0000" d="M0,449h1235l-999,726 382-1175 382,1175z"/>
  </svg>
 </template>


 <pre>



 NDF, 02-Dec-2021.

 * https://commons.wikimedia.org/wiki/File:Red_star.svg;
 * https://commons.wikimedia.org/wiki/File:Empty_Star.svg;

 </pre>
	<!doctype html> <title> Star-rating widget </title>

	<h1> Star-rating widget </h1>

	<p><label for="rating">You can give us a star rating</label></p>


	<div class="star-rating" data-v="2">
	<input id="rating" type="range" min="0" max="5" step=".5" value="2" />
	<span class="no-star"></span>
	<span class="star"></span>
	</div>


	<style>
	:root {
	--star-rating-height: 4rem;
	--no-star-url: url(https://upload.wikimedia.org/wikipedia/commons/e/e7/Empty_Star.svg);
	--star-url: url(https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg);
	}

	* {
	X-box-sizing: border-box;
	}

	body { margin: 1px auto; max-width: 34rem; padding: 0 .3rem; }

	.star-rating {
	X-outline: 1px solid #ccc;
	height: var(--star-rating-height);
	width: calc(5.25 * var(--star-rating-height));
	}
	.star-rating input {
	color: pink;
	cursor: col-resize;
	opacity: .05;
	outline: 1px solid #333;
	outline-offset: 2px;
	position: absolute;
	height: var(--star-rating-height);
	width: calc(5.25 * var(--star-rating-height));
	padding: 0;
	transition: all 1s;
	z-index: 99;
	}
	.star-rating input:hover,
	.star-rating input:focus {
	X-outline: 2px solid #555;
	opacity: .5;
	}

	.star-rating .star,
	.star-rating .no-star {

	background-image: var(--star-url);
	background-repeat: repeat-x;
	background-position: left;
	background-size: auto var(--star-rating-height);
	display: block;
	height: 100%;
	position: relative;
	top: .15rem;
	}

	.star-rating .no-star {
	background-image: var(--no-star-url);
	border-right: none;
	width: 100%;
	}

	.star-rating .star {
	background-color: #eee;
	border-right: 1px solid #ddd;
	top: calc(-4rem + .15rem);
	}

	.star-rating[ data-v = '0' ] .star { width: 0; }
	.star-rating[ data-v = '0.5'] .star { width: 10%; }
	.star-rating[ data-v = '1' ] .star { width: 20%; }
	.star-rating[ data-v = '1.5'] .star { width: 30%; }
	.star-rating[ data-v = '2' ] .star { width: 40%; }
	.star-rating[ data-v = '2.5'] .star { width: 50%; }
	.star-rating[ data-v = '3' ] .star { width: 60%; }
	.star-rating[ data-v = '3.5'] .star { width: 70%; }
	.star-rating[ data-v = '4' ] .star { width: 80%; }
	.star-rating[ data-v = '4.5'] .star { width: 90%; }
	.star-rating[ data-v = '5' ] .star { width: 100%; }

	</style>


	<script>
	const RATING = document.querySelector('.star-rating');
	const INPUT = RATING.querySelector('input');
	INPUT.addEventListener('change', ev => {
	const value = ev.target.value
	RATING.setAttribute('data-v', value);
	RATING.title = `${value} / 5 stars!`;

	console.log('Rating change:', value, ev);
	});
	</script>


	<template id="star-template">
	<svg xmlns="http://www.w3.org/2000/svg" width="1235" height="1175">
	<path fill="#de0000" d="M0,449h1235l-999,726 382-1175 382,1175z"/>
	</svg>
	</template>


	<pre>



	NDF, 02-Dec-2021.

	* https://commons.wikimedia.org/wiki/File:Red_star.svg;
	* https://commons.wikimedia.org/wiki/File:Empty_Star.svg;

	</pre>
No results found