Skip to content

Instantly share code, notes, and snippets.

@ifkas

ifkas/index.html

Created November 23, 2017 06:20
Show Gist options
  • Save ifkas/1225bbe0cf6f7e2723d6656013494824 to your computer and use it in GitHub Desktop.
Save ifkas/1225bbe0cf6f7e2723d6656013494824 to your computer and use it in GitHub Desktop.
Download ZIP
Нашата прва игра / Дај што даш // source http://jsbin.com/roqibid
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Нашата прва игра / Дај што даш</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<style id="jsbin-css">
/* body {background: url(http://wallpaper-gallery.net/images/violet-wallpaper/violet-wallpaper-9.jpg) no-repeat #7F3F98;text-align:center;color: #fff;font-size: 20px;} */
body {background: #7F3F98;text-align:center;color: #fff;font-size: 20px;}
h3 {margin-top: 40px;margin-bottom: 50px;}
h2 {color: #fff;margin-top: 140px}
.btn-default {background-color: #000;color: #FFB806; margin-top: 30px;}
.btn-default.alt {background-color: /*#0099CC; #6BC897;*/ #000}
.btn-default.alt:hover, .btn-default.alt:focus {background-color: #fff; color: #000;}
input {color: #000;}
span {position: absolute;bottom:0;left:0;margin-left:20px;}
.lista, audio {display: none;}
input {width: 220px !important;margin: 0 auto;}
h2#odgovor {color: #FFB806;text-shadow: 0px 5px 0px rgba(95, 18, 128, 1);font-size:40px;background: #000; padding: 35px;display: block; margin: 9 50px;}
.pulsiraj {
box-shadow: 0 0 0 0 rgba(255, 184, 6, 0.5);
-webkit-animation: pulse 1.5s infinite;
-moz-animation: pulse 1.5s infinite;
-ms-animation: pulse 1.5s infinite;
-o-animation: pulse 1.5s infinite;
animation: pulse 1.5s infinite;
}
@-webkit-keyframes pulse {
0% {
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
70% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1.1);
box-shadow: 0 0 0 20px rgba(255, 184, 6, 0);
}
100% {
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
box-shadow: 0 0 0 0 rgba(255, 184, 6, 0);
}
}
</style>
</head>
<body>
<div class="row">
<h3 class="title">ВНЕСИ БРОЈЧЕ И ДОБИЈ ЗАДАЧА</h3></div>
<div class="">
<input type="number" class="form-control" placeholder="" onclick="daj(); klik();" id="pole" oninput="pulsi()" max="24" onKeyUp="if(this.value>24){this.value='24';alert('Извини, но 20 е максималниот број :)');}else if(this.value<0){this.value='0';}" >
</div>
<div class="row">
<ol class="lista">
<li></li>
<li>Легни на двосед, лежи 5 минути</li>
<li>Глеј телевизија смешни филмови</li>
<li>Испи 5 голтки чај од лимон</li>
<li>Качи се до горе 3 пати</li>
<li>Оди до чешма и 5 пати напи се</li>
<li>2 пати прдни</li>
<li>3 пати направи чудни смешки</li>
<li>1 минута немој да трепнеш</li>
<li>10 пати нацртај цвет</li>
<li>Нека сите присутни ти удрат мало но слатко шамарче</li>
<li>Викни силно КУКУРИКУ</li>
<li>5 пати направи смешки</li>
<li>Исправи се високо и викни "Ја Сум Голема Страшна Мечка"</li>
<li>Пресметај брзо колку е 12 + 12?</li>
<li>Удри се со перница по глаа</li>
<li>Гледај низ прозор 5 минути</li>
<li>Гушни го тој до тебе и кажи му дека е мрсулче</li>
<li>Оди горе и седни стани на фотељата 5 пати</li>
<li>Стави си ја главата во ракавот</li>
<li>Прочитај од книга 2 страни</li>
<li>Викни силно ДА ЖИВЕЕ МАКЕДОНИЈА</li>
<li>Извади мрсул од нос</li>
<li>Рипни 2 пати и викај "Ја Сум Зајче"</li>
</оl>
</div>
<div class="row"><button id="pulsi" onclick="daj(); klik()" type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> ДАВАЈ ЗАДАЧА
</button><br/>
<button id="" onclick="dajKompjuter(); sega()" type="button" class="btn btn-default btn-lg alt">
<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> ЕЈ КОМПЈУТЕР,<br/> ТИ ДАЈ МИ ЗАДАЧА
</button>
<h2 id="odgovor"></h2></div>
<span>КОМПАНИЈА ФИЛИ<br/>- Калина Чулиќ -</span>
<audio id="audio" src="http://www.javascriptkit.com/script/script2/click.ogg" ></audio>
<audio id="audio-sega" src="http://themetracktor.com/EveSega.ogg" ></audio>
<script id="jsbin-javascript">
var pulsiraj = document.getElementById("pulsi").classList;
var zadaca = document.querySelector("ol.lista").children;
// Neka dade zadaca po broj
function daj() {
var brojka = document.querySelector('input').value;
var edna = zadaca[brojka].innerHTML;
pulsiraj.remove("pulsiraj");
if(!isNaN(parseFloat(brojka))) {
document.getElementById("odgovor").innerHTML = edna;
}
}
// Neka dade zadaca proizvolno kompjuterot
function dajKompjuter() {
var ul = document.querySelector('ol.lista');
for (var i = zadaca.length; i >= 0; i--) {
var kop = ul.appendChild(ul.children[Math.random() * i | 0]);
document.getElementById("odgovor").innerHTML = kop.innerHTML;
}
}
// Neka mrda kopce ako ima vrednost vo input
function pulsi() {
var btn = document.getElementById("pole");
if(btn !== null && btn.value !== '') {
pulsiraj.add("pulsiraj");
} else {
pulsiraj.remove("pulsiraj");
}
}
function klik(){
var audio = document.getElementById("audio");
audio.play();
}
function sega(){
var eveSega = document.getElementById("audio-sega");
eveSega.play();
}
</script>
<script id="jsbin-source-css" type="text/css"> /* body {background: url(http://wallpaper-gallery.net/images/violet-wallpaper/violet-wallpaper-9.jpg) no-repeat #7F3F98;text-align:center;color: #fff;font-size: 20px;} */
body {background: #7F3F98;text-align:center;color: #fff;font-size: 20px;}
h3 {margin-top: 40px;margin-bottom: 50px;}
h2 {color: #fff;margin-top: 140px}
.btn-default {background-color: #000;color: #FFB806; margin-top: 30px;}
.btn-default.alt {background-color: /*#0099CC; #6BC897;*/ #000}
.btn-default.alt:hover, .btn-default.alt:focus {background-color: #fff; color: #000;}
input {color: #000;}
span {position: absolute;bottom:0;left:0;margin-left:20px;}
.lista, audio {display: none;}
input {width: 220px !important;margin: 0 auto;}
h2#odgovor {color: #FFB806;text-shadow: 0px 5px 0px rgba(95, 18, 128, 1);font-size:40px;background: #000; padding: 35px;display: block; margin: 9 50px;}
.pulsiraj {
box-shadow: 0 0 0 0 rgba(255, 184, 6, 0.5);
-webkit-animation: pulse 1.5s infinite;
-moz-animation: pulse 1.5s infinite;
-ms-animation: pulse 1.5s infinite;
-o-animation: pulse 1.5s infinite;
animation: pulse 1.5s infinite;
}
@-webkit-keyframes pulse {
0% {
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
70% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1.1);
box-shadow: 0 0 0 20px rgba(255, 184, 6, 0);
}
100% {
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
box-shadow: 0 0 0 0 rgba(255, 184, 6, 0);
}
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">var pulsiraj = document.getElementById("pulsi").classList;
var zadaca = document.querySelector("ol.lista").children;
// Neka dade zadaca po broj
function daj() {
var brojka = document.querySelector('input').value;
var edna = zadaca[brojka].innerHTML;
pulsiraj.remove("pulsiraj");
if(!isNaN(parseFloat(brojka))) {
document.getElementById("odgovor").innerHTML = edna;
}
}
// Neka dade zadaca proizvolno kompjuterot
function dajKompjuter() {
var ul = document.querySelector('ol.lista');
for (var i = zadaca.length; i >= 0; i--) {
var kop = ul.appendChild(ul.children[Math.random() * i | 0]);
document.getElementById("odgovor").innerHTML = kop.innerHTML;
}
}
// Neka mrda kopce ako ima vrednost vo input
function pulsi() {
var btn = document.getElementById("pole");
if(btn !== null && btn.value !== '') {
pulsiraj.add("pulsiraj");
} else {
pulsiraj.remove("pulsiraj");
}
}
function klik(){
var audio = document.getElementById("audio");
audio.play();
}
function sega(){
var eveSega = document.getElementById("audio-sega");
eveSega.play();
}</script></body>
</html>
Raw
jsbin.roqibid.css
/* body {background: url(http://wallpaper-gallery.net/images/violet-wallpaper/violet-wallpaper-9.jpg) no-repeat #7F3F98;text-align:center;color: #fff;font-size: 20px;} */
body {background: #7F3F98;text-align:center;color: #fff;font-size: 20px;}
h3 {margin-top: 40px;margin-bottom: 50px;}
h2 {color: #fff;margin-top: 140px}
.btn-default {background-color: #000;color: #FFB806; margin-top: 30px;}
.btn-default.alt {background-color: /*#0099CC; #6BC897;*/ #000}
.btn-default.alt:hover, .btn-default.alt:focus {background-color: #fff; color: #000;}
input {color: #000;}
span {position: absolute;bottom:0;left:0;margin-left:20px;}
.lista, audio {display: none;}
input {width: 220px !important;margin: 0 auto;}
h2#odgovor {color: #FFB806;text-shadow: 0px 5px 0px rgba(95, 18, 128, 1);font-size:40px;background: #000; padding: 35px;display: block; margin: 9 50px;}
.pulsiraj {
box-shadow: 0 0 0 0 rgba(255, 184, 6, 0.5);
-webkit-animation: pulse 1.5s infinite;
-moz-animation: pulse 1.5s infinite;
-ms-animation: pulse 1.5s infinite;
-o-animation: pulse 1.5s infinite;
animation: pulse 1.5s infinite;
}
@-webkit-keyframes pulse {
0% {
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
70% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1.1);
box-shadow: 0 0 0 20px rgba(255, 184, 6, 0);
}
100% {
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
box-shadow: 0 0 0 0 rgba(255, 184, 6, 0);
}
}
Raw
jsbin.roqibid.js
var pulsiraj = document.getElementById("pulsi").classList;
var zadaca = document.querySelector("ol.lista").children;
// Neka dade zadaca po broj
function daj() {
var brojka = document.querySelector('input').value;
var edna = zadaca[brojka].innerHTML;
pulsiraj.remove("pulsiraj");
if(!isNaN(parseFloat(brojka))) {
document.getElementById("odgovor").innerHTML = edna;
}
}
// Neka dade zadaca proizvolno kompjuterot
function dajKompjuter() {
var ul = document.querySelector('ol.lista');
for (var i = zadaca.length; i >= 0; i--) {
var kop = ul.appendChild(ul.children[Math.random() * i | 0]);
document.getElementById("odgovor").innerHTML = kop.innerHTML;
}
}
// Neka mrda kopce ako ima vrednost vo input
function pulsi() {
var btn = document.getElementById("pole");
if(btn !== null && btn.value !== '') {
pulsiraj.add("pulsiraj");
} else {
pulsiraj.remove("pulsiraj");
}
}
function klik(){
var audio = document.getElementById("audio");
audio.play();
}
function sega(){
var eveSega = document.getElementById("audio-sega");
eveSega.play();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment