Textarea typing then show star rating - javascript

I have this star rate form and wanted you to start typing in the text area and it will show you the star rate form right away, but if the text area is empty, it will hide.
I discovered the following code:
<HTML>
<input placeholder="Enter some text" name="name" />
<p id="values"></p>
<JS>
const input = document.querySelector('input');
const log = document.getElementById('values');
input.addEventListener('input', updateValue);
function updateValue(e) {
log.textContent = e.target.value;
}
How can I combine this code into mine? Because it only does that now when I click outside of the text area and then show the stars. Please advise me on this!
#import url(https://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400);
* {
margin: 0;
padding: 0;
font-family: roboto;
}
body {
background: #000;
}
.cont {
width: 93%;
max-width: 350px;
text-align: center;
margin: 4% auto;
padding: 30px 0;
background: #111;
color: #EEE;
border-radius: 5px;
border: thin solid #444;
}
hr {
margin: 20px;
border: none;
border-bottom: thin solid rgba(255, 255, 255, .1);
}
div.title {
font-size: 2em;
}
h1 span {
font-weight: 300;
color: #Fd4;
}
div.stars {
width: 270px;
display: inline-block;
}
input.star {
display: none;
}
label.star {
float: right;
padding: 10px;
font-size: 36px;
color: #444;
transition: all .2s;
}
input.star:checked~label.star:before {
content: '\f005';
color: #FD4;
transition: all .25s;
}
input.star-5:checked~label.star:before {
color: #FE7;
text-shadow: 0 0 20px #952;
}
input.star-1:checked~label.star:before {
color: #F62;
}
label.star:hover {
transform: rotate(-15deg) scale(1.3);
}
label.star:before {
content: '\f006';
font-family: FontAwesome;
}
.rev-box {
height: 0;
width: 100%;
transition: all .25s;
}
textarea.review {
background: #222;
border: none;
width: 50%;
max-width: 100%;
height: 50px;
padding: 10px;
box-sizing: border-box;
color: #EEE;
}
label.review {
display: block;
transition: opacity .25s;
}
input.star:checked~.rev-box {
height: 125px;
overflow: visible;
}
<html>
<head>
<link rel="stylesheet" href="startratecss.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" />
<div class="cont">
<div class="stars">
<form>
<div class="rev-box">
<textarea class="review" id="review" cols="2" rows="2" name="review" onchange="asd(this)"></textarea>
</div>
<div id="rateYo" style="visibility: hidden;"></div>
<input type="hidden" name="rating" id="rating_input" />
</form>
</div>
</div>
<script>
function asd(txt) {
var something = txt.value;
var star = document.getElementById("rateYo");
star.style.visibility = "visible";
}
$(function MyFunction() {
$("#rateYo").rateYo({
onSet: function(rating, rateYoInstance) {
rating = Math.ceil(rating);
$('#rating_input').val(rating); //setting up rating value to hidden field
var bod = document.getElementById("review").value;
window.location.href = 'mailto:your#gmail.com?subject=' + rating + ' of 5' + '&body=' + bod;
}
});
});
</script>
</body>
</html>

I have taken the liberty of rewriting your code to accomplish what you are trying to do.
Two tips I want to give you:
Decouple the data layer with the presentation layer. You are mixing CSS styles in stylesheets, HTML and JavaScript. You are also having JavaScript as strings in your HTML attributes. This gets confusing quite rapidly! We have gone a long way since HTML4 and the 90's!
If you use a library, then use it. For example, you are using jQuery, then use it as it should instead of adding event handlers directly to the HTML attributes; jQuery has $(element).on(event, handler), don't do <div onclick="something(this)"></div>.
$(function MyFunction() {
const textInput = $("#review").on('input', function () {
if (textInput.val().length) {
rateStar.show();
} else {
rateStar.hide();
}
});
const ratingInput = $('#rating_input');
const rateStar = $("#rateYo").rateYo({
onSet: function(rating, rateYoInstance) {
let inputValue = textInput.val();
ratingInput.val(Math.ceil(rating)); //setting up rating value to hidden field
console.log( rating, inputValue );
// window.location.href = 'mailto:your#gmail.com?subject=' + rating + ' of 5' + '&body=' + bod;
}
}).hide();
});
#import url(https://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400);
* {
margin: 0;
padding: 0;
font-family: roboto;
}
body {
background: #000;
}
.cont {
width: 93%;
max-width: 350px;
text-align: center;
margin: 4% auto;
padding: 30px 0;
background: #111;
color: #EEE;
border-radius: 5px;
border: thin solid #444;
}
hr {
margin: 20px;
border: none;
border-bottom: thin solid rgba(255, 255, 255, .1);
}
div.title {
font-size: 2em;
}
h1 span {
font-weight: 300;
color: #Fd4;
}
div.stars {
width: 270px;
display: inline-block;
}
label.star {
float: right;
padding: 10px;
font-size: 36px;
color: #444;
transition: all .2s;
}
input.star:checked~label.star:before {
content: '\f005';
color: #FD4;
transition: all .25s;
}
input.star-5:checked~label.star:before {
color: #FE7;
text-shadow: 0 0 20px #952;
}
input.star-1:checked~label.star:before {
color: #F62;
}
label.star:hover {
transform: rotate(-15deg) scale(1.3);
}
label.star:before {
content: '\f006';
font-family: FontAwesome;
}
.rev-box {
/* height: 0; */
width: 100%;
transition: all .25s;
}
textarea.review {
background: #222;
border: none;
width: 50%;
max-width: 100%;
height: 50px;
padding: 10px;
box-sizing: border-box;
color: #EEE;
}
label.review {
display: block;
transition: opacity .25s;
}
input.star:checked~.rev-box {
height: 125px;
overflow: visible;
}
<html>
<head>
<link rel="stylesheet" href="startratecss.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" />
<div class="cont">
<div class="stars">
<form>
<div class="rev-box">
<textarea class="review" id="review" cols="2" rows="2" name="review"></textarea>
</div>
<div id="rateYo"></div>
<input type="hidden" name="rating" id="rating_input" />
</form>
</div>
</div>
</body>
</html>

Related

Stretching a grid box on hover to display additional information in that box

I want to make an weather app and I want to let the user to add in the application some weather cards with the city they are interested with. If they no longer want a specific weather card, they can delete it. For now, you can add some empty cards by using the + button.
Below is what I did and how the app looks like.
In the first phase I want the displayed cards to show the city weather information at the current time and with a hover I want the card to expand and display more information about that city such as a 5 day forecast.
I don't know how to stretch a specific card on hover and I'm asking your help with this problem. Thank you!
const displayContent = document.querySelector('.content');
const widget = document.querySelector('.widget');
const addWidget = document.querySelector(".addButton");
console.log(displayContent)
addWidget.addEventListener('click', newWidget);
var cont=0;
function newWidget(){
cont=cont+1;
let newWidget = document.createElement('div');
newWidget.setAttribute('class', 'widget');
newWidget.setAttribute('id', "widget" + cont);
let closeBtn = document.createElement('span');
closeBtn.setAttribute('class', 'remove');
closeBtn.setAttribute('id', 'remove' +cont);
closeBtn.textContent = '✕';
displayContent.appendChild(newWidget);
newWidget.appendChild(closeBtn);
//remove the cards
var close = document.querySelectorAll("span");
for(let i=0 ; i<close.length; i++){
close[i].addEventListener('click', () =>{
close[i].parentElement.remove();
})
}
}
#import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
:root {
--fontcolor: #313131;
--bgcolor: #FAFAFA;
}
html {
font-family: "Roboto", sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bgcolor);
margin: 0;
color: var(--fontcolor);
transition: background-color 500ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.container {
max-width: 85vw;
margin: 0 auto;
}
header {
display: flex;
margin-bottom: 30px;
font-size: 1.5em;
align-items: center;
justify-content: space-between;
}
.search {
width: 100%;
position: relative;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid black;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
}
.addButton {
width: 40px;
height: 36px;
border: 1px solid black;
background: black;
text-align: center;
color: #fff;
border-radius: 0 6px 5px 0;
cursor: pointer;
font-size: 20px;
}
.content {
margin-bottom: 1em;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-auto-rows: minmax(250px, 1fr);
grid-gap: 25px;
}
.widget {
color: white;
display: flex;
flex-direction: column;
padding: 25px;
position: relative;
white-space: normal;
word-wrap: break-word;
transition: background-color 50ms;
background: linear-gradient(130deg, rgba(25,118,210,1) 0%, rgba(63,81,181,1) 100%);
box-shadow: 5px 5px 18px -1px rgb(0 0 0 / 34%);
border-radius: 5px;
}
.remove{
position: absolute;
top: 5px;
right: 12px;
font-size: 22px;
opacity: 0.7;
cursor: pointer;
}
#keyframes append-animate {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0%);
opacity: 1;
}
}
/* animate new box */
.widget {
animation: append-animate .3s linear;
}
<!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>My Library</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/31c84a9fec.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<header class="header">
<h1 id='title'>Weather App</h1>
<div class="control">
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" placeholder="Add a city">
<button type="submit" class="addButton">+</button>
</div>
</div>
</div>
</header>
<div class="content">
<div class="widget" id="widget0">
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Have you tried using CSS transitions?
div {
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
transition: all 1s;
}
div.h:hover {
width: 150px;
background-color: purple;
}
div.v:hover {
height: 150px;
background-color: purple;
}
<div class="h"></div>
<div class="v"></div>

click show and hide search box

I want to do it like in the video I uploaded below. That's what I've done for now, but when I click the search icon, I can't replace it with the x icon. I think I couldn't do this because I have little knowledge of Javascript. I would be very happy if you could help me with this.
https://files.fm/f/856dwf9kj
function buttonUp(){
var valux = $('.sb-search-input').val();
valux = $.trim(valux).length;
if(valux !== 0){
$('.sb-search-submit').css('z-index','99');
} else{
$('.sb-search-input').val('');
$('.sb-search-submit').css('z-index','-999');
}
}
$(document).ready(function(){
var submitIcon = $('.sb-icon-search');
var submitInput = $('.sb-search-input');
var searchBox = $('.sb-search');
var qutu = $('.qutu');
var isOpen = false;
$(document).mouseup(function(){
if(isOpen == true){
submitInput.val('');
$('.sb-search-submit').css('z-index','-999');
submitIcon.click();
}
});
submitIcon.mouseup(function(){
return false;
});
searchBox.mouseup(function(){
return false;
});
submitIcon.click(function(){
if(isOpen == false){
searchBox.addClass('sb-search-open');
qutu.removeClass('noborder');
qutu.addClass('bborder');
isOpen = true;
} else {
searchBox.removeClass('sb-search-open');
qutu.removeClass('bborder');
qutu.addClass('noborder');
isOpen = false;
}
});
});
body{
margin: 40px 60px;
}
*{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.5s;
}
form{
display: inline-block;
}
.sb-search {
position: relative;
margin-top: 10px;
width: 0%;
min-width: 50px;
height: 50px;
float: right;
overflow: hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
transition: width 0.5s;
-webkit-backface-visibility: hidden;
}
.bborder{
opacity: 1;
}
.noborder{
opacity: 0;
}
.sb-search-input {
position: absolute;
top: 0;
right: 0px;
border: none;
outline: none;
width: 300px;
height: 50px;
margin: 0;
z-index: 10;
padding: 20px 65px 20px 20px;
font-family: inherit;
font-size: 20px;
color: #2c3e50;
}
input[type="search"].sb-search-input {
-webkit-appearance: none;
-webkit-border-radius: 0px;
border:1px black solid;
}
.sb-search-input::-webkit-input-placeholder {
color: #fff;
}
.sb-search-input:-moz-placeholder {
color: #fff;
}
.sb-search-input::-moz-placeholder {
color: #fff;
}
.sb-search-input:-ms-input-placeholder {
color: #fff;
}
.sb-icon-search,
.sb-search-submit {
width: 60px;
height: 60px;
display: block;
position: absolute;
right: 0;
top: 0;
padding: 0;
margin: 0;
line-height: 60px;
text-align: center;
cursor: pointer;
}
.sb-search-submit {
background: #fff; /* IE needs this */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
filter: alpha(opacity=0); /* IE 5-7 */
opacity: 0;
color: transparent;
border: none;
outline: none;
z-index: -1;
}
.sb-icon-search {
color: black;
background: #fff;
width: 35px;
height: 0px;
z-index: 90;
margin: -5px;
top: 1px;
right: 6px;
font-size: 22px;
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.sb-icon-search:before {
content: "";
}
.sb-search.sb-search-open,
.no-js .sb-search {
width: 300px;
}
.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
background: #fff;
color: black;
z-index: 11;
}
.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
/* z-index: 90;*/
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Search bar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css'><link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<div id="sb-search" class="sb-search " >
    <form>
        <input class="sb-search-input qutu noborder" onkeyup="buttonUp();" placeholder="Enter your search term..." onblur="monkey();" type="search" value="" name="search" id="search">
        <input class="sb-search-submit" type="submit" value="">
        <span class="sb-icon-search"><i class="fa fa-search"></i></span>
    </form>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
I made a really simple example below from the snippet you gave.
The only differences are inside the submitIcon.click.
You just have to do how you have done for your elements searchBox and qutu by adding/removing classes. Thanks to this, you will be able to change the FontAwesome icon you want to use for the element. It is probably perfectible, like by checking if the class exists before remove or add it (in a straight cae it should not, but we never know).
function buttonUp(){
var valux = $('.sb-search-input').val();
valux = $.trim(valux).length;
if(valux !== 0){
$('.sb-search-submit').css('z-index','99');
} else{
$('.sb-search-input').val('');
$('.sb-search-submit').css('z-index','-999');
}
}
$(document).ready(function(){
var submitIcon = $('.sb-icon-search');
var submitInput = $('.sb-search-input');
var searchBox = $('.sb-search');
var qutu = $('.qutu');
var isOpen = false;
$(document).mouseup(function(){
if(isOpen == true){
submitInput.val('');
$('.sb-search-submit').css('z-index','-999');
submitIcon.click();
}
});
submitIcon.mouseup(function(){
return false;
});
searchBox.mouseup(function(){
return false;
});
submitIcon.click(function(){
if(isOpen == false){
searchBox.addClass('sb-search-open');
qutu.removeClass('noborder');
qutu.addClass('bborder');
searchBox.find('i.fa').removeClass('fa-search');
searchBox.find('i.fa').addClass('fa-times');
isOpen = true;
} else {
searchBox.removeClass('sb-search-open');
qutu.removeClass('bborder');
qutu.addClass('noborder');
searchBox.find('i.fa').removeClass('fa-times');
searchBox.find('i.fa').addClass('fa-search');
isOpen = false;
}
});
});
body{
margin: 40px 60px;
}
*{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.5s;
}
form{
display: inline-block;
}
.sb-search {
position: relative;
margin-top: 10px;
width: 0%;
min-width: 50px;
height: 50px;
float: right;
overflow: hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
transition: width 0.5s;
-webkit-backface-visibility: hidden;
}
.bborder{
opacity: 1;
}
.noborder{
opacity: 0;
}
.sb-search-input {
position: absolute;
top: 0;
right: 0px;
border: none;
outline: none;
width: 300px;
height: 50px;
margin: 0;
z-index: 10;
padding: 20px 65px 20px 20px;
font-family: inherit;
font-size: 20px;
color: #2c3e50;
}
input[type="search"].sb-search-input {
-webkit-appearance: none;
-webkit-border-radius: 0px;
border:1px black solid;
}
.sb-search-input::-webkit-input-placeholder {
color: #fff;
}
.sb-search-input:-moz-placeholder {
color: #fff;
}
.sb-search-input::-moz-placeholder {
color: #fff;
}
.sb-search-input:-ms-input-placeholder {
color: #fff;
}
.sb-icon-search,
.sb-search-submit {
width: 60px;
height: 60px;
display: block;
position: absolute;
right: 0;
top: 0;
padding: 0;
margin: 0;
line-height: 60px;
text-align: center;
cursor: pointer;
}
.sb-search-submit {
background: #fff; /* IE needs this */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
filter: alpha(opacity=0); /* IE 5-7 */
opacity: 0;
color: transparent;
border: none;
outline: none;
z-index: -1;
}
.sb-icon-search {
color: black;
background: #fff;
width: 35px;
height: 0px;
z-index: 90;
margin: -5px;
top: 1px;
right: 6px;
font-size: 22px;
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.sb-icon-search:before {
content: "";
}
.sb-search.sb-search-open,
.no-js .sb-search {
width: 300px;
}
.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
background: #fff;
color: black;
z-index: 11;
}
.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
/* z-index: 90;*/
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Search bar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css'><link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<div id="sb-search" class="sb-search " >
    <form>
        <input class="sb-search-input qutu noborder" onkeyup="buttonUp();" placeholder="Enter your search term..." onblur="monkey();" type="search" value="" name="search" id="search">
        <input class="sb-search-submit" type="submit" value="">
        <span class="sb-icon-search"><i class="fa fa-search"></i></span>
    </form>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>

HTML, CSS and normal JS Code is not giving correct output

Making a sliding button to switch website theme using a CSS variable and javascript. It is working properly except there is a small bug that I am unable to fix. If I reload the page is light theme, the functionality of the button is being reversed. The "On" state of the button turns on light mode and off state toggles dark mode. However, the initial configuration is entirely opposite.
As you can see in the executable code snippet below, I tried solving this using click() function. This problem arises only when the value of num is 0 and page is reloaded. So, I thought if I store a variable in localStorage as false and check its value at the beginning of the function and if its false, then click the button and dont execute function, if its not false, then execute normally.
But it is not working for some reason. Please check this code:
if (!localStorage.getItem('thisvarisgud4me')) {
localStorage.setItem("thisvarisgud4me", "1")
}
document.getElementById("btn").addEventListener("click", change);
var c = "true";
if (!localStorage.getItem("clickc"))
{
localStorage.setItem("clickc", c);
}
function change() {
if (localStorage.getItem("clickc") == "false") {
localStorage.setItem("clickc","true");
document.getElementById("btn").click();
}
else if (localStorage.getItem("clickc") == "true") {
if (localStorage.getItem('thisvarisgud4me') == '1') {
localStorage.setItem("thisvarisgud4me", '0')
} else {
localStorage.setItem("thisvarisgud4me", '1')
}
var num = Number(localStorage.getItem('thisvarisgud4me'));
let root = document.documentElement;
root.style.setProperty("--numvar", num);
console.log(num);
if (num == 0) {
window.addEventListener("beforeunload", function (event) {
console.log("The page is redirecting")
alert("Reload");
localStorage.setItem("clickc", "false");
// document.getElementById("btn").click();
// debugger;
});
}
}
}
var num = Number(localStorage.getItem('thisvarisgud4me'));
let root = document.documentElement;
root.style.setProperty("--numvar", num);
:root {
--numvar: 0;
}
html {
filter: invert(var(--numvar));
}
body {
background: #fff;
}
.outer-button {
display: inline-block;
height: 28px;
width: 28px;
position: relative;
margin: 0 3px;
}
.inner-button {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px 2px white;
border-radius: 20px;
background: #f5f5f5;
}
span {
display: inline-block;
vertical-align: middle;
}
.status-text {
color: white;
text-transform: uppercase;
font-size: 11px;
font-family: Futura, sans-serif;
transition: all 0.2s ease;
}
.sliding-switch {
height: 28px;
width: 72px;
position: relative;
}
.outer-switch-box {
overflow: hidden;
height: 100%;
width: 100%;
display: inline-block;
border-radius: 20px;
position: relative;
box-shadow: inset 0 1px 3px 0px #818181, 0px 1px 2px 1px white;
transition: all 0.3s ease;
transition-delay: 65ms;
position: absolute;
z-index: 1;
}
.inner-switch-box {
position: relative;
width: 175px;
transition: all 0.3s ease;
}
/* .switch-checkbox:checked+.outer-switch-box .unchecked-text {
color: transparent;
}
.switch-checkbox:not(:checked)+.outer-switch-box .checked-text {
color: transparent;
} */
.switch-checkbox:checked+.outer-switch-box .inner-switch-box {
left: -27px;
/*OFF*/
}
.switch-checkbox:not(:checked)+.outer-switch-box .inner-switch-box {
left: 20px;
/*ON*/
}
.switch-checkbox:checked+.outer-switch-box {
/* background-image: linear-gradient(#b6d284, #b6d284); */
background: #492d7b;
/* background: #b6d284; */
}
.switch-checkbox:not(:checked)+.outer-switch-box {
/* background-image: linear-gradient(#cbcbcb, #dbdbdb); */
background: #dbdbdb;
}
[type="checkbox"] {
margin: 0;
padding: 0;
appearance: none;
width: 100%;
height: 100%;
border: 1px solid black;
position: absolute;
top: 0;
left: 0;
z-index: 100;
opacity: 0;
}
.unchecked-text {
color: black !important;
font-weight: 700;
}
.btn-heading {
color: black;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
padding: .4vw 0;
}
body {
float: left;
<!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>Document</title>
<body>
<div class="btn-heading">Dark Mode</div>
<div class="sliding-switch">
<input type="checkbox" id="btn" class="switch-checkbox" />
<div class="outer-switch-box">
<div class="inner-switch-box">
<span class="status-text checked-text" id="textp1">on</span>
<span class="outer-button">
<span class="inner-button"></span>
</span>
<span class="status-text unchecked-text" id="textp2">off</span>
</div>
</div>
</div>
</body>
</html>
As you might have noticed, I also tried manipulating CSS pseudo class properties using JS. But that was a complete mess. Then, I thought of this approach and I was quite confident that it is correct but looks like I was wrong :(
Just adding a condition to setting "clickc" to "true" will probably do the trick. Here I've used a similar condition to that you've already used for the "thisvarisgud4me" key.
I took the opportunity to test out a utility I created that essentially implements the Storage API (that's what <script src="https://heretic-monkey.link/FauxStorage.js"></script> is in the HTML, and why all of your localStorage references now say localStore).
So if you decide to copy and paste this into your own code, just do a search and replace of localStore with localStorage.
if (!localStore.getItem('thisvarisgud4me')) {
localStore.setItem("thisvarisgud4me", "1")
}
document.getElementById("btn").addEventListener("click", change);
var c = "true";
if (!localStore.getItem("clickc")) {
localStore.setItem("clickc", c);
}
function change() {
if (localStore.getItem("clickc") == "false") {
document.getElementById("btn").click();
localStore.getItem("clickc") = "true";
} else if (localStore.getItem("clickc") == "true") {
if (localStore.getItem('thisvarisgud4me') == '1') {
localStore.setItem("thisvarisgud4me", '0')
} else {
localStore.setItem("thisvarisgud4me", '1')
}
var num = Number(localStore.getItem('thisvarisgud4me'));
let root = document.documentElement;
root.style.setProperty("--numvar", num);
console.log(num);
if (num == 0) {
window.addEventListener("beforeunload", function(event) {
console.log("The page is redirecting")
alert("Reload");
localStore.setItem("clickc", "false");
// document.getElementById("btn").click();
// debugger;
});
}
}
}
var num = Number(localStore.getItem('thisvarisgud4me'));
let root = document.documentElement;
root.style.setProperty("--numvar", num);
:root {
--numvar: 0;
}
html {
filter: invert(var(--numvar));
}
body {
background: #fff;
}
.outer-button {
display: inline-block;
height: 28px;
width: 28px;
position: relative;
margin: 0 3px;
}
.inner-button {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px 2px white;
border-radius: 20px;
background: #f5f5f5;
}
span {
display: inline-block;
vertical-align: middle;
}
.status-text {
color: white;
text-transform: uppercase;
font-size: 11px;
font-family: Futura, sans-serif;
transition: all 0.2s ease;
}
.sliding-switch {
height: 28px;
width: 72px;
position: relative;
}
.outer-switch-box {
overflow: hidden;
height: 100%;
width: 100%;
display: inline-block;
border-radius: 20px;
position: relative;
box-shadow: inset 0 1px 3px 0px #818181, 0px 1px 2px 1px white;
transition: all 0.3s ease;
transition-delay: 65ms;
position: absolute;
z-index: 1;
}
.inner-switch-box {
position: relative;
width: 175px;
transition: all 0.3s ease;
}
/* .switch-checkbox:checked+.outer-switch-box .unchecked-text {
color: transparent;
}
.switch-checkbox:not(:checked)+.outer-switch-box .checked-text {
color: transparent;
} */
.switch-checkbox:checked+.outer-switch-box .inner-switch-box {
left: -27px;
/*OFF*/
}
.switch-checkbox:not(:checked)+.outer-switch-box .inner-switch-box {
left: 20px;
/*ON*/
}
.switch-checkbox:checked+.outer-switch-box {
/* background-image: linear-gradient(#b6d284, #b6d284); */
background: #492d7b;
/* background: #b6d284; */
}
.switch-checkbox:not(:checked)+.outer-switch-box {
/* background-image: linear-gradient(#cbcbcb, #dbdbdb); */
background: #dbdbdb;
}
[type="checkbox"] {
margin: 0;
padding: 0;
appearance: none;
width: 100%;
height: 100%;
border: 1px solid black;
position: absolute;
top: 0;
left: 0;
z-index: 100;
opacity: 0;
}
.unchecked-text {
color: black !important;
font-weight: 700;
}
.btn-heading {
color: black;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
padding: .4vw 0;
}
<!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>Document</title>
<script src="https://heretic-monkey.link/FauxStorage.js"></script>
</head>
<body>
<div class="btn-heading">Dark Mode</div>
<div class="sliding-switch">
<input type="checkbox" id="btn" class="switch-checkbox" />
<div class="outer-switch-box">
<div class="inner-switch-box">
<span class="status-text checked-text" id="textp1">on</span>
<span class="outer-button">
<span class="inner-button"></span>
</span>
<span class="status-text unchecked-text" id="textp2">off</span>
</div>
</div>
</div>
</body>
</html>
Here's how I would refactor it. This is more of an object-oriented way of doing things; it might not appeal to everyone and it certainly isn't meant to. It works for me and I'm the only one I need to make happy with it :).
class ThemeStore {
_darkModeKey = "thisvarisgud4me";
_darkMode = null;
get darkMode() {
if (this._darkMode === null) {
if (!localStore.getItem(this._darkModeKey)) {
localStore.setItem(this._darkModeKey, 0);
}
this._darkMode = JSON.parse(localStore.getItem(this._darkModeKey));
}
return this._darkMode;
}
set darkMode(value) {
this._darkMode = value;
}
persist() {
localStore.setItem("thisvarisgud4me", JSON.stringify(this.darkMode));
}
}
var themeStore = new ThemeStore();
document.getElementById("btn").addEventListener("click", change);
function change(e) {
themeStore.darkMode = e.target.checked ? 0 : 1;
let root = document.documentElement;
root.style.setProperty("--numvar", themeStore.darkMode);
console.log(themeStore.darkMode);
if (themeStore.darkMode === 0) {
window.addEventListener("beforeunload", function(event) {
console.log("The page is redirecting")
themeStore.persist();
});
}
}
document.getElementById("btn").dispatchEvent(new CustomEvent("change"));
:root {
--numvar: 0;
}
html {
filter: invert(var(--numvar));
}
body {
background: #fff;
}
.outer-button {
display: inline-block;
height: 28px;
width: 28px;
position: relative;
margin: 0 3px;
}
.inner-button {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px 2px white;
border-radius: 20px;
background: #f5f5f5;
}
span {
display: inline-block;
vertical-align: middle;
}
.status-text {
color: white;
text-transform: uppercase;
font-size: 11px;
font-family: Futura, sans-serif;
transition: all 0.2s ease;
}
.sliding-switch {
height: 28px;
width: 72px;
position: relative;
}
.outer-switch-box {
overflow: hidden;
height: 100%;
width: 100%;
display: inline-block;
border-radius: 20px;
position: relative;
box-shadow: inset 0 1px 3px 0px #818181, 0px 1px 2px 1px white;
transition: all 0.3s ease;
transition-delay: 65ms;
position: absolute;
z-index: 1;
}
.inner-switch-box {
position: relative;
width: 175px;
transition: all 0.3s ease;
}
/* .switch-checkbox:checked+.outer-switch-box .unchecked-text {
color: transparent;
}
.switch-checkbox:not(:checked)+.outer-switch-box .checked-text {
color: transparent;
} */
.switch-checkbox:checked+.outer-switch-box .inner-switch-box {
left: -27px;
/*OFF*/
}
.switch-checkbox:not(:checked)+.outer-switch-box .inner-switch-box {
left: 20px;
/*ON*/
}
.switch-checkbox:checked+.outer-switch-box {
/* background-image: linear-gradient(#b6d284, #b6d284); */
background: #492d7b;
/* background: #b6d284; */
}
.switch-checkbox:not(:checked)+.outer-switch-box {
/* background-image: linear-gradient(#cbcbcb, #dbdbdb); */
background: #dbdbdb;
}
[type="checkbox"] {
margin: 0;
padding: 0;
appearance: none;
width: 100%;
height: 100%;
border: 1px solid black;
position: absolute;
top: 0;
left: 0;
z-index: 100;
opacity: 0;
}
.unchecked-text {
color: black !important;
font-weight: 700;
}
.btn-heading {
color: black;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
padding: .4vw 0;
}
<script src="https://heretic-monkey.link/FauxStorage.js"></script>
<div class="btn-heading">Dark Mode</div>
<div class="sliding-switch">
<input type="checkbox" id="btn" class="switch-checkbox" />
<div class="outer-switch-box">
<div class="inner-switch-box">
<span class="status-text checked-text" id="textp1">on</span>
<span class="outer-button">
<span class="inner-button"></span>
</span>
<span class="status-text unchecked-text" id="textp2">off</span>
</div>
</div>
</div>

Make text color of colorpicker value

I need your help. I have button. With the press on it I can make text. With click on this text I can edit this text. And I have colorpicker. I need, when I choose color the text which I created also will change color(it will change on this value of colorpicker) I don't know how to do this. Help me please
function addText() {
var type = $(".select-txt").val();
var align = $(".form-align").val();
var float = "text-align:";
var id = Date.now();
var editBlock = "$('.edit-block')";
var display = ",'block'";
var colorValue = $(".color").val();
var color = "color:";
var closeTag = ";";
var onclick = "onclick="+editBlock+".css('display'"+display+");";
var ordinary = "<div class='text-"+align+"' id="+id+" "+onclick+" contenteditable style="+float+align+closeTag+
">text</div>";
var h = "<"+type+" class='text-"+align+"' id="+id+" "+onclick+" contenteditable style="+float+align+">text</"+type+">";
if(type == "ordinary") {
$(".preview").append(ordinary);
}
else if(type.startsWith("h")) {
$(".preview").append(h);
}
$(".color").minicolors({
defaultValue: "#000"
});
$(".color").on("change", function() {
var colorValue = $(".color").val();
ordinary.append(color+colorValue);
});
}
function showTextWindow() {
var modal = $(".modal-txt-container");
if (modal.css('display', "none")) {
modal.css('display', "grid");
}
else {
modal.css('display', "none");
}
}
function showTextWindow() {
var modal = document.querySelector(".modal-txt-container");
if (modal.currentStyle) {
var displayStyle = modal.currentStyle.display;
} else if (window.getComputedStyle) {
var displayStyle = window.getComputedStyle(modal, null).getPropertyValue("display");
}
if (displayStyle == "none") {
modal.style.display = "grid";
}
else {
modal.style.display = "none";
}
}
function showElement() {
var modal = document.querySelector(".choose-option");
var add = document.querySelector('.add');
if (modal.currentStyle) {
var displayStyle = modal.currentStyle.display;
} else if (window.getComputedStyle) {
var displayStyle = window.getComputedStyle(modal, null).getPropertyValue("display");
}
if (displayStyle == "none") {
modal.style.display = "grid";
}
else {
modal.style.display = "none";
add.style.display = "block";
}
}
* {
outline: none;
padding: 0;
margin: 0;
}
.choose-option {
background-color: #352a2c;
position: fixed;
color: white;
font-family: 'Scada', sans-serif;
padding: 15px;
width: 14%;
}
.insert-txt-block {
padding-bottom: 3%;
font-size: 1.3em;
}
.btn-txt::before {
content: '\f031';
font-family: "fontAwesome";
margin-right: 3%;
}
.btn-txt {
font-size: 1.2em;
list-style: none;
transition: 0.1s;
padding: 5px;
}
.btn-txt:hover {
background-color: #727272;
}
.modal-insert-txt {
background-color: #352a2c;
color: white;
font-family: 'Scada', sans-serif;
padding: 20px;
padding-right: 25px;
width: 130%;
border-radius: 4px;
}
.modal-txt-container {
display: grid;
justify-content: center;
right: 0;
left: 0;
position: fixed;
top: 15%;
display: none;
}
.container {
position: fixed;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
outline: 0;
box-shadow: none;
border: 0 !important;
background-image: none;
width: 85%;
height: 100%;
margin: 0;
padding: 0 0 0 .5em;
cursor: pointer;
color: black;
background: white;
border-radius: 1px 0px 0px 1px;
}
.form-group::after {
content: '\25BC';
position: absolute;
padding: 0 0.5em;
background: rgb(59, 61, 52);
pointer-events: none;
line-height: 1.7em;
-webkit-transition: .25s all ease;
-o-transition: .25s all ease;
transition: .25s all ease;
color: white;
}
.form-group {
position: relative;
display: block;
height: 1.7em;
margin: 1% 0% 5% 0;
border: 1px solid #272822;
}
.btn-insert-txt {
border: none;
color: white;
background: #ff5959;
padding: 5px;
font-size: 1.01em;
border-radius: 2px;
cursor: pointer;
}
.btn-insert-txt:hover {
background: #e54040;
}
.modal-insert-txt span {
font-size: 1.1em;
}
.modal-insert-txt h2 {
padding-bottom: 2%;
}
.modal-insert-txt hr {
margin-bottom: 3%;
}
.flex-close-title {
display: flex;
justify-content: space-around;
}
.type-insert li {
cursor: pointer;
}
.close {
font-size: 1.7em;
margin-top: -1%;
cursor: pointer;
}
.close::after {
content: '\f057';
font-family: "fontAwesome";
color: #ff5959;
}
.add {
font-size: 2em;
cursor: pointer;
display: none;
position: fixed;
left: 1%;
top: 2%;
}
.add::after {
content: '\f055';
font-family: "fontAwesome";
color: #ff5959;
}
#textarea-edit {
width: 80%;
height: 100px;
resize: none;
border: 2px solid #3B3D45;
background: #3B3D45;
color: white;
padding: 4%;
font-size: 1.05em;
border-radius: 4px;
display: flex;
justify-content: center;
position: relative;
top: 1%;
}
.edit-block {
background: #272822;
width: 20%;
height: 100vh;
float: right;
color: white;
font-family: 'Scada', sans-serif;
padding: 20px;
display: none;
position: fixed;
top: 0;
right: 0;
}
.edit-block span {
font-size: 1.3em;
}
.minicolors-theme-default .minicolors-input {
height: 29px !important;
padding-left: 30px !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Site Bilder</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Scada:400,700&subset=cyrillic" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/jquery.minicolors/2.1.2/jquery.minicolors.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.minicolors/2.1.2/jquery.minicolors.css">
</head>
<body>
<span class="add" onclick="showElement()"></span>
<div class="choose-option">
<div class="flex-close-title">
<div class="insert-txt-block">Insert elements</div>
<span class="close" onclick="showElement()"></span>
</div>
<ul class="type-insert">
<li class="btn-txt" onclick="showTextWindow()">Text</li>
</ul>
</div>
<div class="modal-txt-container">
<div class="modal-insert-txt">
<h2>Insert text</h2>
<hr>
<span>Тип Текста</span>
<div class="form-group">
<select class="select-txt">
<option value="ordinary" selected>Plain text</option>
<option value="h1">h1</option>
<option value="h2">h2</option>
<option value="h3">h3</option>
<option value="h4">h4</option>
<option value="h5">h5</option>
<option value="h6">h6</option>
</select>
</div>
<span>Text alignment</span>
<div class="form-group">
<select class="form-align">
<option value="left">left</option>
<option value="center">Center</option>
<option value="right">right</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn-insert-txt" onclick="addText()">Insert text</button>
</div>
</div>
</div>
<div class="preview">
</div>
<div class="edit-block">
<div class="wrap">
<span class="title-textarea">
Цвет
</span>
<input type="text" id="hue" class="color" data-control="hue">
</div>
</div>
<script src="js/app.js"></script>
</body>
</html>
The solution I decided on is simple enough, I add a class to know which piece of text I'm currently editing, and then set the color CSS attribute to the colour picker's selection for that selected class.
So your onclick is now:
var onclick = 'onclick="editTextColour(this)"';
I made a new function to handle the basics, (this) as the param for onclick is treated as the element that calls it:
function editTextColour(elem) {
$('.editing').removeClass('editing');
$(elem).addClass('editing');
$('.edit-block').show();
}
And then your change event for the color picker is just this:
$(".color").on("change", function() {
var colorValue = $(".color").val();
$('.preview .editing').css('color', colorValue);
});
JSFiddle

I can't seem to be able to link in my .js file

I'm trying to implement and link up CSS as well as JS to an HTML file provided by a friend of mine for a project I'm working on.
I've linked up the CSS with no problems, but the .js file I'm trying to link just won't work. Because the script won't work, my HTML keypad doesn't work :(
Anyone notice anything I'm doing wrong?
window.pass = 1234;
window.redirectURL = 'http://www.google.com';
$(document).ready(function() {
start();
});
function start() {
window.tries = 0;
$(".key").click(function(){
var n = $(this).html();
$('.screen').append( n );
window.tries++;
updateFlasher();
validate();
});
}
function updateFlasher() {
if (window.tries <=3) {
var dis = window.tries * 55;
$('.flasher').css({
'left' : dis + 'px'
});
}
else {
$('.flasher').css({
'left' : '20px',
'display' : 'none'
});
}
}
function validate() {
if (window.tries >= 4){
checkWin();
$('.screen').html('');
window.tries = 0;
$('.flasher').css({
'display' : 'block'
});
}
}
function checkWin() {
var w = $('.screen').html();
if (w == window.pass){
$('.success').show().delay(5000).queue(function(n) {
$('.success').hide(); n();
});
var u = window.redirectURL;
$(location).attr('href', u );
}
else {
$('.error').show().delay(1000).queue(function(n) {
$('.error').hide(); n();
});
}
}
#charset "UTF-8";
/* CSS Document */
/*basic reset*/
/*browsers have built in values for elements so we'll reset a few things to zero, you can add to this or remove items as needed*/
div,p,body,header,footer,section,article,nav
{
margin: 0;
padding: 0;
}
img
{
border: none;
margin: 0;
padding: 0;
}
/* html selectors */
body
{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #333;
background-color: #1d1d1d;
}
a:link, a:visited
{
text-decoration:none;
}
a:hover, a:active
{
text-decoration:none;
}
/* hide elements from browser but show for doc outline */
.hidden
{
display: none;
}
*
{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body
{
background-color: #1d1d1d;
}
::selection
{
background-color: transparent;
}
.screen{
height: 75px;
width: 225px;
border-radius: 15px;
border: 8px solid #2b2b2b;
background-color: #111;
font-size: 50px;
color: limegreen;
padding: 0px 20px 0px 20px;
letter-spacing: 26px;
font-family: 'VT323', monospace;
position: relative;
}
.flasher {
content: "";
display: block;
width: 30px;
height: 5px;
background-color: limegreen;
position: absolute;
top: 55px;
left: 20px;
animation: blink 1s linear infinite;
-webkit-animation: blink 1s linear infinite;
}
.keypad_wrapper {
position: relative;
width: 225px;
height: 375px;
background-color: #2b2b2b;
margin: 100px auto;
}
.key {
width: 75px;
height: 75px;
float: left;
border-radius: 15px;
border: 8px solid #2b2b2b;
line-height: 58px;
text-align: center;
font-size: 50px;
background-color: #3b3b3b;
box-shadow: inset 0px -2px 0px rgba(0,0,0,.5), inset 0px 1px 0px rgba(255,255,255,.2);
cursor: pointer;
text-shadow: 0px -2px 2px rgba(0,0,0,.5), 0px 1px 2px rgba(255,255,255,.4);
color: #eee;
}
.key:hover {
background-color: #4b4b4b;
}
.key:active {
background-color: #333;
box-shadow: inset 0px -1px 0px rgba(255,255,255,.2), inset 0px 2px 0px rgba(0,0,0,.5);
color: #aaa;
line-height: 62px;
}
.key.last {
position: relative;
left: 75px;
}
.notification {
color: limegreen;
font-family: 'VT323', monospace;
text-align: center;
font-size: 40px;
position: absolute;
width: 225px;
top: 15px;
display: none;
}
#keyframes blink {
0%{opacity: 0;}
50%{opacity: 1;}
100%{opacity: 0;}
}
#-webkit-keyframes blink {
0%{opacity: 0;}
50%{opacity: 1;}
100%{opacity: 0;}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script src="main.js"></script>
</head>
<div class="keypad_wrapper">
<div class="screen"></div>
<div class="flasher"></div>
<div class="error notification">ERROR</div>
<div class="success notification">SUCCESS</div>
<div class="key">1</div>
<div class="key">2</div>
<div class="key">3</div>
<div class="key">4</div>
<div class="key">5</div>
<div class="key">6</div>
<div class="key">7</div>
<div class="key">8</div>
<div class="key">9</div>
<div class="key last">0</div>
</div>
</body>
</html>
Works in my browser, all I added to your code was:
<link rel="stylesheet" type="text/css" href="style.css" />
But I assume from your question that you had this working already.
You could try downloading jquery to your machine locally and referencing it locally. Perhaps it gets stuck there.

Categories