Thermostat Thinger

Developer
John Riordan
Size
3,342 Kb
Views
30,360
  1. Thermostat Thinger Previews
  2. Thermostat Thinger HTML Codes
  3. Thermostat Thinger CSS Codes
  4. Thermostat Thinger JS Codes

How do I make an thermostat thinger?

I'd like to turn this into a knob, just havent looked into it yet. I'm still quite new to this stuff so it's all a learning process! I got the idea from Virgil Pana's Progress bar on Dribbble. I thought it made thermostat.. What is a thermostat thinger? How do you make a thermostat thinger? This script and codes were developed by John Riordan on 22 August 2022, Monday.

Thermostat Thinger Previews
IQ Test

Thermostat Thinger - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Thermostat Thinger</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>	<div class="base-circle"> </div> <div class="color-circle"> </div> <div class="knob-circle"> </div> <span id="text-readout"><span class="degree">&deg;</span></span> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Thermostat Thinger - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
html { background-image: url('http://subtlepatterns.com/patterns/white_leather.png'); margin: 0; padding: 0; height: 100%; width: 100%;
}
body { margin: 0; padding: 0; height: 100%; width: 100%;
}
.background-color { height: 100%; width: 100%;	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M5YzljOSIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);	background-image: -moz-linear-gradient(90deg, #c9c9c9 0%, #fff 100%);	background-image: -o-linear-gradient(90deg, #c9c9c9 0%, #fff 100%);	background-image: -webkit-linear-gradient(90deg, #c9c9c9 0%, #fff 100%);	background-image: linear-gradient(90deg, #c9c9c9 0%, #fff 100%);
}
.base-circle {	width: 354px;	height: 354px; position: absolute; top: 20px; left:300px; z-index: 1; background-image: url('http://subtlepatterns.com/patterns/white_leather.png');	-moz-border-radius: 177px;	-webkit-border-radius: 177px;	border-radius: 177px;	-moz-background-clip: padding;	-webkit-background-clip: padding-box;	background-clip: padding-box;	background-color: #f5f5f5;	-moz-box-shadow: 0 0 0 1px #f7f7f7;	-webkit-box-shadow: 0 0 0 1px #f7f7f7;	box-shadow: 0 0 0 1px #f7f7f7;	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDM1NCAzNTQiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDQuNSUiIHgyPSI1MCUiIHkyPSItNC41MDAwMDAwMDAwMDAwMSUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZTllOWU5IiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYmNiY2JjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIzNTQiIGhlaWdodD0iMzU0IiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=);	background-image: -moz-linear-gradient(90deg, #e9e9e9 -4.5%, #bcbcbc 104.5%);	background-image: -o-linear-gradient(90deg, #e9e9e9 -4.5%, #bcbcbc 104.5%);	background-image: -webkit-linear-gradient(90deg, #e9e9e9 -4.5%, #bcbcbc 104.5%);	background-image: linear-gradient(90deg, #e9e9e9 -4.5%, #bcbcbc 104.5%);
}
.color-circle { position: absolute; top: 46px; left:324px; z-index: 2;	width: 306px;	height: 306px;	-moz-border-radius: 153px;	-webkit-border-radius: 153px;	border-radius: 153px;	-moz-background-clip: padding;	-webkit-background-clip: padding-box;	background-clip: padding-box;	background-color: #f5f5f5;	-moz-box-shadow:	inset 0 0 10px rgba(0,0,0,.36),	0 0 0 1px #969696;	-webkit-box-shadow:	inset 0 0 10px rgba(0,0,0,.36),	0 0 0 1px #969696;	box-shadow:	inset 0 0 10px rgba(0,0,0,.36),	0 0 0 1px #969696;	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDMwNiAzMDYiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSItMS40MjEwODU0NzE1MjAyZS0xNCUiIHkxPSIxMDAlIiB4Mj0iMTAwJSIgeTI9IjAlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBiMWM4NyIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBkZDdlNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMzA2IiBoZWlnaHQ9IjMwNiIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);	background-image: -moz-linear-gradient(45deg, #0b1c87 0%, #0dd7e4 100%);	background-image: -o-linear-gradient(45deg, #0b1c87 0%, #0dd7e4 100%);	background-image: -webkit-linear-gradient(45deg, #0b1c87 0%, #0dd7e4 100%);	background-image: linear-gradient(45deg, #0b1c87 0%, #0dd7e4 100%);
}
.knob-circle {	width: 235px;	height: 235px; position: absolute; top: 80px; left:360px; z-index: 3;	-moz-border-radius: 118px;	-webkit-border-radius: 118px;	border-radius: 118px;	-moz-background-clip: padding;	-webkit-background-clip: padding-box;	background-clip: padding-box;	background-color: #f5f5f5;	-moz-box-shadow:	0 7px 7px rgba(3,4,4,.55),	inset 0 2px 0 rgba(255,255,255,.75);	-webkit-box-shadow:	0 7px 7px rgba(3,4,4,.55),	inset 0 2px 0 rgba(255,255,255,.75);	box-shadow:	0 7px 7px rgba(3,4,4,.55),	inset 0 2px 0 rgba(255,255,255,.75);	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDIzNSAyMzUiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMTAuNSUiIHgyPSI1MCUiIHkyPSItMTAuNSUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjY2ZjZmNmIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZTdlN2U3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyMzUiIGhlaWdodD0iMjM1IiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=);	background-image: -moz-linear-gradient(90deg, #cfcfcf -10.5%, #e7e7e7 110.5%);	background-image: -o-linear-gradient(90deg, #cfcfcf -10.5%, #e7e7e7 110.5%);	background-image: -webkit-linear-gradient(90deg, #cfcfcf -10.5%, #e7e7e7 110.5%);	background-image: linear-gradient(90deg, #cfcfcf -10.5%, #e7e7e7 110.5%);
}
#text-readout {	color: #f5f5f5;	text-shadow: 0 2px 4px rgba(3,4,4,.55); font-size: 6.5em; font-family: 'Oswald'; font-weight: 700; position:absolute; top:120px; left:405px; z-index:4;
}
.text-readout .degree { font-weight: 400;
}

Thermostat Thinger - Script Codes JS Codes

$(function(){ var interval = setInterval(increment,200); var current = 0; function increment(){ current++; $('#text-readout').html(current+'&deg;'); if(current == 80) { current = 0; } }
});
Thermostat Thinger - Script Codes
Thermostat Thinger - Script Codes
Home Page Home
Developer John Riordan
Username JohnRiordan
Uploaded August 22, 2022
Rating 3
Size 3,342 Kb
Views 30,360
Do you need developer help for Thermostat Thinger?

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!

John Riordan (JohnRiordan) Script Codes
Name
Border image
Location marker - Pulse
A Pen by John Riordan
Compress panels
Little Calendar listing
Montoro branding
Square Wallet UI - WIP
Draw svg animation
Kick content off page
Feature article layout
Create amazing love letters 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!