Posts

Showing posts from November, 2018

Visual FizzBuzz Solution

Image
HTML CSS and JavaScript Solution for FizzBuzz Challenge This is a great visual solution to the FizzBuzz challenge using HTML5 CSS and JavaScript. *Featured Code Created by  Anurag Kumar Source Code HTML5 CSS and JavaScript <!DOCTYPE html> <html> <head>     <title>FizzBuzz</title>     <style>         * {     padding:0;     margin:0;     box-sizing:border-box;     outline:none; } .wrapper{     position:absolute;     width:100%;     height:100%;     top:0;     left:0; } .page{     position:absolute;     display:flex;     flex-direction:column;     align-items:center;     justify-content:center;     width:100%;     height:100%;     background-color:#eee; } .page:last-child{     display:none; } .input-area{     width:200px;     height:200px;     background-color:#ccc;     border-radius:3px;     box-shadow:1px 1px 2px rgba(0,0,0,.25

Awesome Login

Image
Awesome Login Gif Template Add this awesome login which is easily customizable with your favorite gifs or images to your websites or apps. Source Code HTML with CSS <html> <head> <style> body { } #form { position:absolute; top:50px; left:10%; height:360px; width:300px; border-radius:15px; box-shadow: 0px 0px 10px 10px #00aaaa; background-image:url(https://thumbs.gfycat.com/DarlingTornAsiaticmouflon.webp); background-repeat:repeat; } #a { position:fixed; top:10px; left:135px; border:#0099cc solid 2px; border-radius:50%; } #title { position:fixed; text-align:center; top:100px; left:40px; font-size:32px; } #name { position:fixed; top:190px; left:70px; } .fields-class { position:relative; top:0px; left:40px; height:30px; width:54%; padding-left:15px; font-size:18px; } #submit { position:fixed; top:280px; left:30px; } .submit-class { position:relative; top:0px; left:40px; height:30px;

Play and Learn Flute

Image
Learn to Play Flute Learn to Play Flute A B C D E F G Happy Birthday A A B A D C A A B A E D A A G D C B A G G F D E C Row Row Row your Boat C C C D E E D E F G G G G F F F D D D C C C G F E D C *Featured Code Created by Bobbie  Source Code HTML with CSS and JavaScript <!DOCTYPE html> <html>     <head>         <title>Learn to Play Flute</title>     <style>         .box { position: relative; width : 350px; height: 600px; border: 0px solid #CCC;border-radius:0px; background: url("https://cosmomusic.ca/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/B/S/BSFLARM303BOS_1_7.jpg ");background-size: cover ; }  button {      width:65px;      height:70px;      border-width:4px;      border-style: solid;      border-color:black;      background-color:#ff00ff;      border-radius:100% 50%;

Speed Test

Image
Speed Test for 1 Million Text Updates This awesome speed test will test the amount of time it takes for 1 Million Text Updates on your device. I recommend trying this multiple times and on multiple devices to see the varying results. *Featured Code Created by  Calvin Click here to Run Speed Test Source Code HTML with CSS, JavaScript and JQUERY <html>     <head>         <title>Page Title</title>         <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>                      <style>             html, body {     min-height: 100%; } body {     margin: 0;      min-height: 100vh; } body {     font-family: Arial; } #main {     margin: 5%;     padding: 2%;     min-width: 86%;     min-height: 80vh;     background-color: beige;     border-radius: 5px;          position: relative; } div, p {     margin: 5px; } #notes {     fo

Easter Egg

Image
Free Code Examples Easter Egg Contest Welcome to Free Code Examples Easter Egg Hunt What is an Easter Egg some of you may be asking. An Easter Egg in a code or program is a hidden surprise placed there by the developer. The first known Easter Egg was created by Warren Robinett in the 1979 Atari game Adventure. It was a single pixel that when moved to a specific place would display his name.  Some famous Easter Eggs that have been found include a hidden flight simulator in Microsoft Excel, a pinball game in Microsoft Word, and the fun do a barrel roll search on Google. Now that we understand a lil more about Easter Eggs lets start our Game... I have hidden an Easter Egg somewhere here on Free Code Examples. When or if you find it be the first person on each platform to reveal the location and secret message of the hidden Easter Egg. Your name will be added to the winners list here.  Winners will be announced for the first to reveal on each of the

FizzBuzz Challenge by David

Image
FizzBuzz Challenge using Javascript by David This is a very interesting approach to the FizzBuzz challenge. I love seeing the many different ways things can be accomplished with code. *Featured Code Created by  David Carroll FizzBuzz FizzBuzz Challenge Settings Set which multiples to apply Fizz or Buzz: Fizz: Buzz: Set range for multiples: Start: Limit: Run Output: Source Code HTML with CSS and JavaScript <!DOCTYPE html> <html>   <head>     <title>FizzBuzz</title> <style>      body {   background-color: lightblue; } </style>   </head>   <body>     <h1>FizzBuzz Challenge</h1>     <h2>Settings</h2>     <form>       <fieldset>         <legend>Set which multiples to apply Fizz

Javascript FizzBuzz Solution

Image
FizzBuzz Challenge Javascript Solution FizzBuzz FizzBuzz Challenge enter numbers for fizz and buzz =fizz =buzz run Source Code HTML with Javascript <!DOCTYPE html> <html>     <head>         <title>FizzBuzz</title>     </head>     <body bgcolor="lightblue">     <h1>FizzBuzz Challenge</h1>     <p>enter numbers for fizz and buzz</p>         <input id="x"></input>=fizz         <input id="y"></input>=buzz<br>         <button onclick="fb()">run</button>         <script> function fb() {         var a = document.getElementById("x").value;                var b = document.getElementById("y").value; for(i=1; i<101; i++) { if (i % a === 0 && i % b === 0){ document.write ("Fizz"+"Buzz<

FizzBuzz You Choose

Image
FizzBuzz You Choose the Divisors FizzBuzz is a fun coding challenge. The word Fizz will replace all numbers evenly divisible by the Fizz number. Another number is assigned to Buzz and all numbers divisible. Any shared numbers divisible by both will display FizzBuzz. *Featured Code Created By:  Shane Overby C# //Original by Shane Overby using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace SoloLearn {     class Program     {         static void Main(string[] args)         {             //Enter a positive whole number less than or equal to 100 as the "Fizz" divisor             int fizzNum = Int32.Parse(Console.ReadLine());                          //Enter a positive whole number less than or equal to 100 as the "Buzz" divisor             int buzzNum = Int32.Parse(Console.ReadLine());                          Console.WriteLine

HTML Cheat Sheets

Image
HTML5 Cheat Sheets Cheat Sheets are not really cheating at all it's just a collection of excellent information and resources. HTML5 Cheat Sheet Click here to see full size HTML5 Cheat Sheet 2 Click here to see full size HTML5 Cheat Sheet Tags  Click here to see full size HTML5 Cheat Sheet Events Click here to see full size HTML Canvas Cheat Sheet Click here to see full size More Free Code Examples: Split Image using CSS Javascript Substitution Cipher Javascript Easy Battleship Game Hello World in 10 Programming Languages Try these Fun Games by Bobbie: Ocean Treasures Game Travel Blast Game New York Play and Learn Russian Battlestarship Game Take a look at these Groovy Codes: Fun IQ Test Html Svg Starburst Javascript Particles Fishes Read the Latest Breaking Progr