Air Quality Gauge

Developer
Paul Demers
Size
5,812 Kb
Views
36,432
  1. Air Quality Gauge Previews
  2. Air Quality Gauge HTML Codes
  3. Air Quality Gauge CSS Codes
  4. Air Quality Gauge JS Codes

How do I make an air quality gauge?

A little experiment to explore ways a user could input their air quality that wasn't a boring radio button.. What is a air quality gauge? How do you make a air quality gauge? This script and codes were developed by Paul Demers on 28 August 2022, Sunday.

Air Quality Gauge Previews
IQ Test

Air Quality Gauge - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Air Quality Gauge</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Oleo+Script'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { width: 90%; margin: 0 auto; color: #222222; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.intro { text-align: center; display: block; padding-bottom: 0.5em; margin: 0 auto;
}
.intro h1 { font-family: "Oleo Script"; text-shadow: white 1px 1px 0; color: #274b6a;
}
.wrapper { text-align: center; margin-top: 2em;
}
.cta { font-size: 1.5rem;
}
.gauge { position: relative; display: inline-block; cursor: pointer;
}
.gauge__values { position: absolute; font-family: 'Helvetica Neue'; line-height: 1; color: #fff; text-align: center; margin: 0; margin-left: -63px; left: 50%; top: 50%; margin-top: -12px;
}
.yellow .gauge__values, .orange .gauge__values { color: #000;
}
.gauge_value, .gauge_rating { text-transform: uppercase; font-weight: bold; display: block;
}
.gauge_value { font-size: .85em;
}
.gauge_rating { font-size: 2em; letter-spacing: .1em;
}
svg { display: block; margin: 1em auto 0;
}
.outer_ring { fill: #AFE1F9;
}
.spinner { fill: #6FBE46; stroke: #FFFFFF; stroke-width: 2; stroke-miterlimit: 10; transform-origin: 120px 120px; transition: all 1s;
}
.green .spinner { fill: #6DBE46; transform: rotate(75deg);
}
.yellow .spinner { fill: #F0E91B; transform: rotate(125deg);
}
.orange .spinner { fill: #F89A21; transform: rotate(180deg);
}
.purple .spinner { fill: #8F2F60; transform: rotate(230deg);
}
.red .spinner { fill: #861720; transform: rotate(280deg);
}
.ring_green { fill: #6DBE46;
}
.ring_yellow { fill: #F0E91B;
}
.ring_orange { fill: #F89A21;
}
.ring_purple { fill: #8F2F60;
}
.ring_red { fill: #861720;
}
.type { fill: #fff;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="intro"> <h1>Clickable Air Quality Gauge</h1> <p>A little experiment to explore ways a user could input their air quality that wasn't a boring radio button.</p>
</div>
<hr />
<div class="wrapper"> <div class="gauge green"> <p class="gauge__values"> Your air quality is: <span class="gauge_rating">Good</span> </p> <svg xmlns="http://www.w3.org/2000/svg" width="241" height="241" viewBox="0 0 241 241"><circle cx="120.5" cy="120.5" r="120.5" class="outer_ring"/><path d="M167.9 18.4C153.5 11.7 137.4 8 120.5 8c-19.7 0-38.3 5.1-54.4 14l15.3 24.7c11.7-6.2 25-9.7 39.1-9.7 11.3 0 22.1 2.3 32 6.3l15.4-24.9z" class="ring_orange"/><path d="M152.5 43.3c23.9 9.9 42.2 30.6 48.8 56l27.3-10.2C219.4 57.7 197 32 167.9 18.4l-15.4 24.9z" class="ring_purple"/><path d="M38.1 106.9c4.2-25.9 21-48.1 43.3-60.2L66.1 22C37.7 37.7 16.8 65.4 10.2 98.2l27.9 8.7z" class="ring_yellow"/><path d="M54.4 171.6C43.5 157.5 37 139.7 37 120.5c0-4.7.4-9.2 1.1-13.7l-27.8-9C8.8 105.2 8 112.7 8 120.5c0 27.2 9.6 52.1 25.7 71.6l20.7-20.5z" class="ring_green"/><path d="M207 192.4c16.2-19.5 26-44.6 26-71.9 0-10.9-1.6-21.5-4.5-31.4l-27.3 10.2c1.8 6.8 2.7 13.9 2.7 21.2 0 19.7-6.8 37.8-18.3 52.1l21.4 19.8z" class="ring_red"/><g class="type"><path class="st6" d="M63.3 204.6l2.1 1.4-2.8 11.1-2-1.4.6-2.2-3.3-2.2-1.8 1.4-2-1.3 9.2-6.8zm-3.9 5.5l2.3 1.5 1.2-4.3-3.5 2.8zM66.1 219l-1.9-1.1 5.3-9.4 1.9 1.1-5.3 9.4zM79.1 213.8c.3.3.5.7.6 1.1.1.3.1.7.1 1.1 0 .4-.1.7-.3 1.1-.2.5-.6.9-1 1.2-.4.3-1 .5-1.6.4.4.4.6.8.6 1.2s-.1 1-.4 1.7l-.3.7c-.2.4-.3.8-.4.9-.1.3 0 .5.1.7l-.1.2L74 223c0-.2.1-.4.1-.6l.3-.9.4-.9c.3-.6.4-1.1.3-1.4s-.4-.6-1-.9l-2-.9-1.8 3.8-2-.9 4.6-9.7 4.7 2.2c.7.3 1.2.6 1.5 1zm-4.9-.6l-1.2 2.6 2.2 1c.4.2.8.3 1.1.3.5 0 .8-.3 1.1-.8.3-.6.3-1.1 0-1.5-.2-.2-.4-.4-.9-.6l-2.3-1zM93 226.5c-.4.5-.8.9-1.3 1.2l.8 1.5-1.5.8-.9-1.6c-.4.1-.8.2-1.1.2-.5 0-1.1-.1-1.7-.3-1.3-.4-2.3-1.2-3-2.2-.8-1.3-.9-2.9-.3-4.7.6-1.9 1.6-3.1 3-3.8 1.1-.5 2.4-.6 3.7-.2 1.3.4 2.3 1.2 3 2.3.7 1.3.9 2.8.3 4.5-.2 1-.6 1.7-1 2.3zm-4.3.2h.5l-.7-1.3 1.5-.8.7 1.3c.3-.3.5-.5.6-.8.2-.3.4-.8.6-1.3.4-1.2.4-2.1.1-2.9-.3-.8-.9-1.3-1.8-1.6-.9-.3-1.6-.2-2.3.3s-1.2 1.3-1.6 2.5c-.4 1.4-.4 2.5.2 3.4.3.5.9.9 1.5 1.1.2 0 .4 0 .7.1zM96.8 219.5l2.3.4-1.3 6.5c-.1.7-.2 1.3-.1 1.6.2.6.7 1.1 1.6 1.2.9.2 1.5 0 1.9-.6.2-.3.4-.8.6-1.5l1.3-6.5 2.3.4-1.3 6.5c-.2 1.1-.6 2-1 2.5-.9 1-2.2 1.4-4.1 1-1.8-.4-3-1.2-3.4-2.4-.2-.7-.2-1.6 0-2.7l1.2-6.4zM110.2 221.7l2.5.2 2.8 11.1-2.4-.2-.5-2.3-4-.4-.9 2.1-2.4-.2 4.9-10.3zm-.8 6.7l2.8.2-1-4.4-1.8 4.2zM117.4 222.3h2.3l.1 8.9 5.4-.1v1.9l-7.6.1-.2-10.8zM129.2 232.7l-2.2.1-.7-10.8 2.2-.1.7 10.8zM138.1 220.8l.2 1.9-3.2.4 1.1 8.8-2.3.3-1.1-8.8-3.2.4-.2-1.9 8.7-1.1zM145 219.3l2.5-.6-2.1 7.4.9 4-2.2.5-.9-4-5.1-5.8 2.6-.6 3.2 4.1 1.1-5zM157.4 226.8l-2.1.7-3.4-10.2 2.1-.7 3.4 10.2zM155.7 216.1l2.2-.9 6.9 5.3-2.9-6.9 1.9-.8 4.2 10-2.1.9-7-5.4 3 7.1-1.9.8-4.3-10.1zM170.9 209.1c.8-.1 1.5 0 2.3.3.6.3 1.1.7 1.5 1.2.4.5.8 1 1 1.5.7 1.3 1 2.5 1 3.6 0 1.6-.8 2.7-2.2 3.5l-4.1 2.2-5.2-9.5 4.1-2.2c.6-.3 1.2-.5 1.6-.6zm-2.8 3.5l3.4 6.2 1.8-1c.9-.5 1.3-1.3 1.2-2.4-.1-.6-.3-1.3-.7-2-.5-1-1.1-1.6-1.7-2-.6-.4-1.3-.3-2.2.2l-1.8 1zM182 204l-4.7 3.2 1.3 1.9 4.3-2.9 1.1 1.6-4.3 2.9 1.6 2.3 4.9-3.4 1.1 1.6-6.8 4.6-6.1-8.9 6.5-4.4 1.1 1.5zM190.5 208.6l-2 1.7-.8-6.5-5.9-2 2.1-1.7 3.7 1.5-.7-4 2-1.7.8 6.1 6.3 2.1-2.1 1.7-3.9-1.5.5 4.3z"/></g><path d="M102.3 190.1c-31.4-8.1-54.6-36.6-54.6-70.5 0-40.2 32.6-72.8 72.8-72.8s72.8 32.6 72.8 72.8c0 33.9-23.2 62.5-54.6 70.5l-18.3 17.7-18.1-17.7z" class="spinner" transform='rotate(75 120 120)' /></svg> </div> <h1 class="cta">Click the gauge to choose your air quality.</h1>
</div> <script src="js/index.js"></script>
</body>
</html>

Air Quality Gauge - Script Codes CSS Codes

body { width: 90%; margin: 0 auto; color: #222222; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.intro { text-align: center; display: block; padding-bottom: 0.5em; margin: 0 auto;
}
.intro h1 { font-family: "Oleo Script"; text-shadow: white 1px 1px 0; color: #274b6a;
}
.wrapper { text-align: center; margin-top: 2em;
}
.cta { font-size: 1.5rem;
}
.gauge { position: relative; display: inline-block; cursor: pointer;
}
.gauge__values { position: absolute; font-family: 'Helvetica Neue'; line-height: 1; color: #fff; text-align: center; margin: 0; margin-left: -63px; left: 50%; top: 50%; margin-top: -12px;
}
.yellow .gauge__values, .orange .gauge__values { color: #000;
}
.gauge_value, .gauge_rating { text-transform: uppercase; font-weight: bold; display: block;
}
.gauge_value { font-size: .85em;
}
.gauge_rating { font-size: 2em; letter-spacing: .1em;
}
svg { display: block; margin: 1em auto 0;
}
.outer_ring { fill: #AFE1F9;
}
.spinner { fill: #6FBE46; stroke: #FFFFFF; stroke-width: 2; stroke-miterlimit: 10; transform-origin: 120px 120px; transition: all 1s;
}
.green .spinner { fill: #6DBE46; transform: rotate(75deg);
}
.yellow .spinner { fill: #F0E91B; transform: rotate(125deg);
}
.orange .spinner { fill: #F89A21; transform: rotate(180deg);
}
.purple .spinner { fill: #8F2F60; transform: rotate(230deg);
}
.red .spinner { fill: #861720; transform: rotate(280deg);
}
.ring_green { fill: #6DBE46;
}
.ring_yellow { fill: #F0E91B;
}
.ring_orange { fill: #F89A21;
}
.ring_purple { fill: #8F2F60;
}
.ring_red { fill: #861720;
}
.type { fill: #fff;
}

Air Quality Gauge - Script Codes JS Codes

(function(){ function spinner() { var classNames = [ { className: 'green', title: 'good' }, { className: 'yellow', title: 'ok' }, { className: 'orange', title: 'meh' }, { className: 'purple', title: 'yikes' }, { className: 'red', title: 'bad' } ]; var svg = document.getElementsByClassName('gauge')[0], title = svg.getElementsByClassName('gauge_rating')[0], i = 0; svg.addEventListener('click', function() { i < (classNames.length - 1) ? i++ : i = 0; this.className = "gauge " + classNames[i].className; title.innerHTML = classNames[i].title; }); }; spinner();
})();
Air Quality Gauge - Script Codes
Air Quality Gauge - Script Codes
Home Page Home
Developer Paul Demers
Username demersdesigns
Uploaded August 28, 2022
Rating 4
Size 5,812 Kb
Views 36,432
Do you need developer help for Air Quality Gauge?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Paul Demers (demersdesigns) Script Codes
Name
Sticky Header Fade In On Scroll
Half Circle Hover Effect
Fun with transition
A Pen by Paul Demers
Project Timeline Visualization
Icon Font Social Icons
Project Timeline
CodePen Boston Layout 1
Icon Fonts and CSS3 Animations
Populate Login with User Avatar
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!