Alarm Clock UI

Developer
Josh Bivens
Size
4,491 Kb
Views
40,480
  1. Alarm Clock UI Previews
  2. Alarm Clock UI HTML Codes
  3. Alarm Clock UI CSS Codes
  4. Alarm Clock UI JS Codes

How do I make an alarm clock ui?

Made with Mark (https://codepen.io/iheartkode). What is a alarm clock ui? How do you make a alarm clock ui? This script and codes were developed by Josh Bivens on 01 October 2022, Saturday.

Alarm Clock UI Previews
IQ Test

Alarm Clock UI - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Alarm Clock UI</title> <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app"></div> <script src='https://fb.me/react-15.1.0.min.js'></script>
<script src='https://fb.me/react-dom-15.1.0.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Alarm Clock UI - Script Codes CSS Codes

.container { font-family: "Roboto"; background: #333; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100vh; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
.alarm { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 400px;
}
input { width: 200px; margin-top: 55px;
}
input[type="range"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 130px; height: 2px; background: #fff; outline: none; border: 0; border-radius: 20px; cursor: pointer;
}
input[type='range']::-webkit-slider-thumb { -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; -webkit-appearance: none; appearance: none; background: #fff; height: 20px; width: 20px; border-radius: 20px;
}
input[type='range']::-webkit-slider-thumb:active { background: dodgerblue;
}
.sliders { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); width: 235px; margin-top: -70px; margin-left: -62px;
}
span { font-size: 2.8em; color: white;
}

Alarm Clock UI - Script Codes JS Codes

"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var App = function (_React$Component) { _inherits(App, _React$Component); function App() { _classCallCheck(this, App); var _this = _possibleConstructorReturn(this, _React$Component.call(this)); _this.state = { hour: "1", minute: "00", ampmIndex: 0, ampm: "AM" }; return _this; } App.prototype.changeHour = function changeHour(e) { if (e.target.value === "0") { this.setState({ hour: "00" }); } else if (parseInt(e.target.value) < 10) { this.setState({ hour: e.target.value }); } else { this.setState({ hour: e.target.value }); } }; App.prototype.changeMinute = function changeMinute(e) { if (e.target.value === "0") { this.setState({ minute: "00" }); } else if (parseInt(e.target.value) < 10) { this.setState({ minute: "0" + e.target.value }); } else { this.setState({ minute: e.target.value }); } }; App.prototype.setAmPm = function setAmPm(e) { if (e.target.value === "1") { this.setState({ ampm: "PM", ampmIndex: 1 }); } else if (e.target.value === "0") { this.setState({ ampm: "AM", ampmIndex: 0 }); } }; App.prototype.render = function render() { var ampmStyles = { cursor: "pointer", color: this.state.ampm === "PM" ? "steelblue" : "yellow", transition: "all .3s ease-in" }; var containerStyles = { background: this.state.ampm === "PM" ? "#152736" : "skyblue", transition: "all .3s ease-in" }; return React.createElement( "div", { className: "container", style: containerStyles }, React.createElement( "div", { className: "alarm" }, React.createElement( "div", { className: "readout" }, React.createElement( "span", null, this.state.hour ), React.createElement( "span", null, ":" ), React.createElement( "span", null, this.state.minute ), " ", React.createElement( "span", { onClick: this.setAmPm.bind(this), style: ampmStyles }, this.state.ampm ) ), React.createElement( "div", { className: "sliders" }, React.createElement("input", { onChange: this.changeHour.bind(this), type: "range", min: "1", max: "12", value: this.state.hour }), React.createElement("input", { onChange: this.changeMinute.bind(this), type: "range", max: "59", value: this.state.minute }), React.createElement("input", { onChange: this.setAmPm.bind(this), type: "range", max: "1", value: this.state.ampmIndex }) ) ) ); }; return App;
}(React.Component);
var mountNode = document.getElementById("app");
ReactDOM.render(React.createElement(App, null), mountNode);
Alarm Clock UI - Script Codes
Alarm Clock UI - Script Codes
Home Page Home
Developer Josh Bivens
Username joshbivens
Uploaded October 01, 2022
Rating 4
Size 4,491 Kb
Views 40,480
Do you need developer help for Alarm Clock UI?

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!

Josh Bivens (joshbivens) Script Codes
Name
React Show and Hide
Fun Facts
React Progress Bar
Vue Shopping Cart
Android Logo
Settings Card
Simple Firebase Comments
Vue Router
React Palette Picker
Material Form
Create amazing sales emails 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!