Fair to Foul

Developer
Anya Craig
Size
3,716 Kb
Views
44,528
  1. Fair to Foul Previews
  2. Fair to Foul HTML Codes
  3. Fair to Foul CSS Codes
  4. Fair to Foul JS Codes

How do I make an fair to foul?

Change the weather by adjusting a range slider.Rain functionality modified from Aurélien Lemesre's CSS Rain CodePen: https://codepen.io/alemesre/pen/hAxGg. What is a fair to foul? How do you make a fair to foul? This script and codes were developed by Anya Craig on 26 August 2022, Friday.

Fair to Foul Previews
IQ Test

Fair to Foul - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fair to Foul</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="lightning"> <div class="weather-control"> <h2>Move the slider to turn the weather from fair to foul</h2> <input id="weather-setter" type="range" min="0" max="100" value="0"/> </div> <div id="sun"></div> <div class="cloud-wrapper"> <div class="puff puff-1"></div> <div class="puff puff-2"></div> <div class="puff puff-3"></div> <div class="puff puff-4"></div> <div class="puff puff-5"></div> <div class="puff puff-6"></div> <div id="rain-wrapper"> <div id="rain"></div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Fair to Foul - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');
body { margin: 0; padding: 0; background-color: #d3f4ff; overflow-x: hidden; transition: background-color 0.5s ease;
}
#sun { border-radius: 50%; width: 160px; height: 160px; position: absolute; top: -30px; right: -30px; background: #fff5a0; box-shadow: 2px 2px 100px 20px #ffeaa0; animation: radiant 2s infinite;
}
.weather-control { background: white; width: 250px; text-align: center; padding: 30px; position: fixed; font-family: "Libre Baskerville"; font-size: 12px; top: 0; left: 0;
}
#weather-setter { width: 90%;
}
.lightning { background-color: transparent;
}
.lightning-active { animation: lightning 1.2s infinite;
}
.cloud-wrapper { margin: 0 auto; position: relative; width: 385px; border: 1px solid transparent;
}
.puff { border-radius: 50%; position: absolute; background-image: linear-gradient( whitesmoke, darkslategrey ); background-size: auto 800px; background-position: 50% 0%; z-index: 100;
}
.puff-1 { width: 110px; height: 110px; top: 100px; left: 30px;
}
.puff-2 { width: 130px; height: 120px; top: 60px; left: 80px;
}
.puff-3 { width: 120px; height: 120px; top: 120px; left: 100px;
}
.puff-4 { width: 120px; height: 120px; top: 50px; left: 170px;
}
.puff-5 { width: 110px; height: 110px; top: 120px; left: 190px;
}
.puff-6 { width: 100px; height: 100px; top: 110px; left: 250px;
}
#rain-wrapper { width: 280px; height: 800px; margin-left: auto; margin-right: auto; margin-top: 130px; overflow: hidden; z-index: 0;
}
#rain { display: none; width: 100%; position: relative; height: 100%;
}
.drop {	width:1px;	height:80px;	position: absolute;	bottom:200px;	animation: falling 1s linear infinite; background:linear-gradient(transparent, #d3f4ff);
}
@keyframes falling { 100% { margin-top: 800px; }
}
@keyframes lightning { 10%, 30% { background-color: rgba(255, 251, 226, 0.5);} 15%, 35% { background-color: transparent; }
}
@keyframes radiant { 50% { transform: scale(1.05); }
}

Fair to Foul - Script Codes JS Codes

// VARIABLES
var $slider = $("#weather-setter");
var severity = $slider.val();
var $puffs = $(".puff");
var $rain = $("#rain");
var initialSkyColour = "#d3f4ff";
var numberOfRaindrops = 500;
var $sun = $("#sun");
// FUNCTIONS
// figure out how much the sun should be shining and make it so
function handleSun(severity) { if(severity >= 50) { $sun.css({ opacity: 0 }); } else { var sunOpacity = Math.abs(((severity * 2) - 100) / 100); $sun.css({ opacity: sunOpacity }); }
}
// change the sky colour
function handleSkyColour(severity) { if (severity >= 0 && severity < 10) { newSkyColour = initialSkyColour; } else if (severity >= 10 && severity < 20) { newSkyColour = "#addded"; } else if (severity >= 20 && severity < 30) { newSkyColour = "#8ac5d8"; } else if (severity >= 30 && severity < 40) { newSkyColour = "#6db1c6"; } else if (severity >= 40 && severity < 50) { newSkyColour = "#4f9db5"; } else if (severity >= 50 && severity < 60) { newSkyColour = "#368ba5"; } else if (severity >= 60 && severity < 70) { newSkyColour = "#1d7893"; } else if (severity >= 70 && severity < 80) { newSkyColour = "#0e637c"; } else if (severity >= 80 && severity < 90) { newSkyColour = "#05536b"; } else if (severity >= 90) { newSkyColour = "#003547"; } return newSkyColour;
}
// this rain business was modified from Aurélien Lemesre's CodePen here: https://codepen.io/alemesre/pen/hAxGg
// generate a random number within a range
function randomNumInRange( min, max ) { return (Math.floor(Math.random() * (max - min + 1)) + min);
}
// // create drops of rain
function createRain() {	for( i = 1 ; i < numberOfRaindrops ; i++ ) { var dropLeft = randomNumInRange(0,280); var dropTop = randomNumInRange(-900,900); $rain.append('<div class="drop" id="drop'+i+'"></div>'); $('#drop'+i).css('left', dropLeft); $('#drop'+i).css('top', dropTop);	}
}
// check if it should be raining, and if yes, make it rain
function isRaining(severity) { if (severity >= 50) { $rain.slideDown(); } else { $rain.slideUp(); }
}
// check if there should be lightning, and if yes, show the lightning
function isLightning(severity) { if (severity >= 80) { $(".lightning").addClass("lightning-active"); } else { $(".lightning").removeClass("lightning-active"); }
}
// change/activate all the weather-changing stuff
function setWeather(severity) { // set the cloud colour var percentage = severity + "%"; $puffs.css({ 'background-position-y' : percentage }); // set the sky colour var newSkyColour = handleSkyColour(severity); $("body").css({ 'background-color': newSkyColour }); // handle the rain isRaining(severity); // handle the lightning isLightning(severity); // handle the sun handleSun(severity);
}
// create the rain at the start (it will be hidden at first)
createRain();
// EVENT LISTENERS
// when the user moves the slider, get the severity and change the weather
$slider.on("mousemove", function(){ severity = $slider.val(); setWeather(severity);
})
Fair to Foul - Script Codes
Fair to Foul - Script Codes
Home Page Home
Developer Anya Craig
Username AnyaCraig
Uploaded August 26, 2022
Rating 4
Size 3,716 Kb
Views 44,528
Do you need developer help for Fair to Foul?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anya Craig (AnyaCraig) Script Codes
Name
Hover Effect Hodge-Podge
Cupid in Pursuit
Bee flight animation using Snap.svg
Fancy Two-Border Buttons
Making an img fill a div while maintaining aspect ratio - Three Imperfect Solutions
Rainbow Pride Slide
Text with Background Gradients and Text-Shadows
Border-image for Frames
Leaf animation with Snap.svg on scroll-by
Maple Blossom
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!