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); }
input{     height:40px;     width:160px;     padding:10px;     margin-left:20px;     margin-top:20px;     border:none;  …

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;
width:233px;
font-size:18px;
color:#000000;
background:#00bbbb;
}
.submit-class:hover
{

Play and Learn Flute

Image
Learn to Play Flute



Learn to Play Flute
ABCDEFG

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%;      text-align:center;      font-size:20px;      padding: 1px 1px;}     </style></head>     <body>      <div class="box"&…

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 {     font-style: italic;     position: absolute;     font-size: smaller;     bottom: 10px; }         </style>     </head&…

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 following platforms.
The comments sect…

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 SettingsSet 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 or Buzz:</legend>         <label for="fizz">Fizz:</label>         <input id="fizz" value="3" />         <label for="buzz">Buzz:</label>         <input…

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<br>"); }
else if(i % a === 0) { document.write("Fizz"+"<br>"); }
else if(i % b === …

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($"This is the FizzBuzz exercise.\n\nUsing the integers you have specified,\nnumbers evenly d…

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: