Skip to content

Instantly share code, notes, and snippets.

@VasVV
VasVV / Video Player.html
Created July 21, 2020 14:28
Video Player - Javascript
<div class="player">
<video class="player__video viewer" src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></video>
<div class="player__controls">
<div class="progress">
<div class="progress__filled"></div>
</div>
<button class="player__button toggle" title="Toggle Play">►</button>
<input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
@VasVV
VasVV / Nightmode Switcher.html
Created July 21, 2020 14:29
Nightmode switcher
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Nightmode switcher
</a>
</li>
@VasVV
VasVV / Profile Scroller.html
Last active July 21, 2020 14:37
Profile Scroller - Javascript
<div class='container'>
<div class='row'>
<div class='col-md-6 mx-auto'>
<h1 class='mb-3'>Profile Scroller</h1>
<div id='imageDisplay'></div>
<br>
<div id='profileDisplay'></div>
<br>
<button id='next' class='btn btn-dark btn-block'>Next</button>
@VasVV
VasVV / github-finder-bootstrap-vanilla-js.markdown
Created July 21, 2020 14:38
Github Finder - Bootstrap, Vanilla JS
@VasVV
VasVV / Number Guesser.html
Created July 21, 2020 14:38
Number Guesser - Vanilla JS, Skeleton
<div class='container'>
<div id='game' class='row'>
<p>Guess a number between <span id='min-num'>1</span> and <span id='max-num'>10</span></p>
<input type='number' id='number' placeholder='Enter the number'>
<input type='submit' value='Try to guess' id='submit'>
<p id='message'> </p>
</div>
</div>
@VasVV
VasVV / book-database-vanilla-js-skeleton.markdown
Created July 21, 2020 14:39
Book database - Vanilla JS, Skeleton
@VasVV
VasVV / Loan Calculator.html
Created July 21, 2020 14:39
Loan Calculator - Vanilla JS, Bootstrap
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
@VasVV
VasVV / To Do List.html
Created July 21, 2020 14:40
To do - Vanilla JS
<div class='containter'>
<div class='row'>
<div class='col s12'>
<div id='main' class='card'>
<div class='card-content'>
<span class='card-title'>Task List</span>
<div class='row'>
<form id='task-form'>
<div classs='input-field col s12'>
<input type='text' name='task' id='task'>
@VasVV
VasVV / Menu.html
Last active July 21, 2020 14:41
Menu - React
<div id='root'>
</div>
@VasVV
VasVV / drum-kit-react.markdown
Created July 21, 2020 14:42
Drum kit - React