Experiment
How do I make an experiment?
"Copy" of Cottonbureau. Done for Viget's Prototyping Challenge series. Meant to be a fast exploration, not an example of good code.. What is a experiment? How do you make a experiment? This script and codes were developed by Todd Moy on 14 October 2022, Friday.
Experiment - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Experiment</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header id="header"> <a href="#cart" class="cart-toggle entypo-basket"></a>
</header>
<div id="wrapper"> <div id="main"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus consequuntur aliquam reprehenderit qui dolor eveniet nobis, ab quos quasi molestiae velit hic, unde placeat recusandae debitis non perferendis possimus vel! Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p>Minus consequuntur aliquam reprehenderit qui dolor eveniet nobis, ab quos quasi molestiae velit hic, unde placeat recusandae debitis non perferendis possimus vel! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus consequuntur aliquam reprehenderit qui dolor eveniet nobis, ab quos quasi molestiae velit hic, unde placeat recusandae debitis non perferendis possimus vel!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus consequuntur aliquam reprehenderit qui dolor eveniet nobis, ab quos quasi molestiae velit hic, unde placeat recusandae debitis non perferendis possimus vel!</p> <button class="cart-toggle add-to-cart">Add to Cart</button> </div> <aside id="cart"> <h1>Shopping Cart</h1> <ul class="items"></ul> </aside>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Experiment - Script Codes CSS Codes
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;
}
* { box-sizing: border-box;
}
a { text-decoration: none;
}
html, body { height: 100%;
}
body { font-family: sans-serif; overflow-x: hidden;
}
#header { background-color: #f46353; text-align: right;
}
#header .cart-toggle { display: inline-block; font-size: 2rem; padding: 30px; color: white;
}
#header .cart-toggle:hover { background-color: #f24d3b;
}
#wrapper { -webkit-transition: all 0.5s; height: 100%;
}
#main { background-color: #eee; height: 100%; padding: 30px;
}
#main p { margin-bottom: 1rem;
}
#cart { width: 400px; background-color: #dad9ce; height: 100%; position: absolute; right: -400px; top: 0px; padding: 30px;
}
#cart h1 { font-weight: bold; font-size: 1rem; text-transform: uppercase; border-bottom: solid #f46353 5px; padding-bottom: 0.5rem; margin-bottom: 0.5rem;
}
.cart-open { -webkit-transform: translate3D(-400px, 0, 0);
}
button.add-to-cart { background-color: #f46353; border-radius: 3px; border: 0; padding: 1rem; font-size: 1rem; display: block; color: white; text-transform: uppercase; cursor: pointer;
}
button.add-to-cart:hover { background-color: #f24d3b;
}
.items .item { border-bottom: solid #aaa 5px; margin-bottom: 0.5rem; padding-bottom: 0.5rem;
}
.items .item:after { content: ""; display: table; clear: both;
}
.items .item span, .items .item img, .items .item a { display: block;
}
.items .item img { width: 120px; height: 120px; border-radius: 5px; float: left;
}
.items .item .title { text-transform: uppercase; font-weight: 700;
}
.items .item .info { float: left; margin-left: 20px; width: 200px;
}
.items .item .remove { text-align: right; font-size: 1.5rem; color: #aaa;
}
.items .item .remove:hover { color: #333;
}
Experiment - Script Codes JS Codes
$(document).ready(function(){ $(".cart-toggle").on('click', function(e){ e.preventDefault(); $("#wrapper").toggleClass("cart-open"); $("#wrapper").toggleClass("cart-toggle"); }); $(".add-to-cart").on('click', function(){ $(".items").append("<li class=\"item\"><img src=\"https://cottonbureau.com/img/products/2022_erin-manning_p-v_2_256.jpg\" /><div class=\"info\"><a href=\"#\" class=\"remove entypo-cancel\"></a><span class=\"title\">A Tame Fox</span><span class=\"designer\">by Dallas Barnes</span><span class=\"size\">Mens S</span><span class=\"quantity\">1 @ $23.00</span></div></li>"); $(".item a").on('click', function(){ $(this).parent(".info").parent(".item").remove(); }); });
});
Developer | Todd Moy |
Username | toddmoy |
Uploaded | October 14, 2022 |
Rating | 3 |
Size | 3,868 Kb |
Views | 14,168 |
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!
Name | Size |
Loader 5 | 2,489 Kb |
Chrome Store Copy | 3,593 Kb |
Experiment | 2,849 Kb |
A Pen by Todd Moy | 2,144 Kb |
Logo Animation | 2,580 Kb |
Modal Interaction Test | 3,142 Kb |
Pulsar | 3,191 Kb |
Flexbox test | 2,152 Kb |
Hidden Menu Test | 3,582 Kb |
SVG Animation Test | 3,102 Kb |
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!
Name | Username | Size |
Twitch API | Coderpilot | 3,412 Kb |
CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 Kb |
Toggling Divs with jQuery | Yying6 | 1,967 Kb |
CSS Piano | Dannystyle | 5,138 Kb |
Wikipedia viewer | Chpecson | 2,865 Kb |
NeeilTimer | Neeilan | 2,836 Kb |
Three js | Paulq | 2,353 Kb |
Drag n Drop | Martin42 | 2,594 Kb |
Tab panels | Accessibility | 0 Kb |
Hover Animation from UNIQLO | Insprd | 3,772 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!