Map prototype

Developer
Aaron Happe
Size
3,404 Kb
Views
12,144
  1. Map prototype Previews
  2. Map prototype HTML Codes
  3. Map prototype CSS Codes
  4. Map prototype JS Codes

How do I make an map prototype?

A prototype to create in interactive electoral map with SVG in the future. . What is a map prototype? How do you make a map prototype? This script and codes were developed by Aaron Happe on 09 November 2022, Wednesday.

Map prototype Previews
IQ Test

Map prototype - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Map prototype</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="square-proj"> <div id="my-square" class="square-wrap"> <div class="s1 s yellow" data-n="30">30</div> <div class="s2 s blue" data-n="8">8</div> <div class="s3 s blue" data-n="40">40</div> <div class="s4 s yellow" data-n="8">8</div> <div class="s5 s blue" data-n="43">43</div> <div class="s6 s yellow" data-n="28">28</div> <div class="s7 s yellow" data-n="32">32</div> <div class="s8 s blue" data-n="12">12</div> <div class="s9 s yellow" data-n="40">40</div> <div class="s10 s blue" data-n="34">34</div> </div> <div class="results-wrap"> <h5>Results</h5> <div class="result1"> <p><span></span><span>???</span></p> </div> <div class="result2"> <p><span></span><span>???</span></p> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Map prototype - Script Codes CSS Codes

body { background: #e1e4f3; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300;	}	.yellow { background: #efe400;	}	.blue { background: #4ac9f0;	}	.square-wrap { display: block; width: 507px; height: 507px; margin: 50px auto 20px; background-color: #4e4e4e; border: 2px solid #4e4e4e; position: relative; box-sizing: border-box; z-index: 1; text-align: center;	}	.s { box-sizing: border-box; position: absolute; z-index: 3; cursor: pointer;	}	.s1 { width: 160px; height: 160px; border: 1px solid #4e4e4e;	}	.s2 { width: 80px; height: 80px; border: 1px solid #4e4e4e; border-right: 3px solid #4e4e4e; border-bottom: 3px solid #4e4e4e; left: 161px;	}	.s3 { width: 342px; height: 160px; border: 1px solid #4e4e4e; left: 161px; z-index: 2;	}	.s4 { width: 80px; height: 80px; border: 1px solid #4e4e4e; right: 0px; z-index: 3; border-left: 3px solid #4e4e4e; border-bottom: 3px solid #4e4e4e;	}	.s5 { width: 240px; height: 240px; border: 1px solid #4e4e4e; top: 161px;	}	.s6 { width: 160px; height: 160px; border: 1px solid #4e4e4e; top: 161px; left: 241px;	}	.s7 { width: 101px; height: 342px; border: 1px solid #4e4e4e; top: 161px; left: 402px;	}	.s7 { width: 101px; height: 342px; border: 1px solid #4e4e4e; top: 161px; left: 402px;	}	.s8 { width: 100px; height: 101px; border: 1px solid #4e4e4e; bottom: 0; left: 0;	}	.s9 { width: 300px; height: 101px; border: 1px solid #4e4e4e; bottom: 0; left: 101px;	}	.s10 { width: 160px; height: 79px; border: 1px solid #4e4e4e; bottom: 102px; left: 241px;	}	.results-wrap { display: block; margin: 0 auto; width: 300px; height: 80px;	}	h5 { color: #5c5e65; text-transform: uppercase; text-align: center; padding-top: 1em; margin-top: 0; margin-bottom: .5em; text-decoration: underline; letter-spacing: .2em;	}	.results-wrap .result1 { float: left; width: 50%; display: block; padding-bottom: 1em;	}	.results-wrap .result2 { float: right; width: 50%; display: block; padding-bottom: 1em;	}	.results-wrap .result1 span:nth-child(1) { display: inline-block; width: 20px; height: 20px; margin: 0 20px; background: #4ac9f0; float: right;	}	.results-wrap .result2 span:nth-child(1) { display: inline-block; width: 20px; height: 20px; margin: 0 20px; background: #efe400; float: left;	}	.results-wrap .result1 p { text-align: right; margin-top: .25em;	}	.results-wrap .result2 p { text-align: left; margin-top: .25em;	}

Map prototype - Script Codes JS Codes

;
(function(window) { function extend(a, b) { for (var key in b) { // for every key in object b if (b.hasOwnProperty(key)) { // if b has it's *own* propoerty of key (not a prototype inheritence) // b's key and thus it's value is assigned to a's key a[key] = b[key]; } } return a; } function MySquare(el, options) { this.el = el; this.options = extend({}, this.options); //why is this needed??? it seems redundant extend(this.options, options); this._init(); } MySquare.prototype.options = { } MySquare.prototype._init = function() { this.squares = [].slice.call(this.el.querySelectorAll('.s')); this.blueSquares = [].slice.call(this.el.querySelectorAll('.blue')); this.yellowSquares = [].slice.call(this.el.querySelectorAll('.yellow')); this.dataNumberBlue = [].slice.call(this.el.querySelectorAll('.result1 p span:nth-child(2)')); this.dataNumberYellow = [].slice.call(this.el.querySelectorAll('.result2 p span:nth-child(2)')); this.dataNumBlue = this.dataNumberBlue[0]; this.dataNumYellow = this.dataNumberYellow[0]; this.dataArrayBlueS = []; this.dataArrayYellowS = []; this._squareCollect(this.blueSquares, this.yellowSquares, this.dataArrayBlueS, this.dataArrayYellowS); // this._squareCollect(this.yellowSquares, this.dataArrayYellowS); var self = this; // click on a square this.squares.forEach(function(el, index, array) { el.addEventListener('click', function() { if (this.classList.contains('yellow')) { this.classList.remove('yellow'); this.classList.add('blue'); self.yellowSquares = [].slice.call(self.el.querySelectorAll('.yellow')); self.blueSquares = [].slice.call(self.el.querySelectorAll('.blue')); self._squareCollect(self.blueSquares, self.yellowSquares, self.dataArrayBlueS, self.dataArrayYellowS); } else if (this.classList.contains('blue')) { this.classList.remove('blue'); this.classList.add('yellow'); self.yellowSquares = [].slice.call(self.el.querySelectorAll('.yellow')); self.blueSquares = [].slice.call(self.el.querySelectorAll('.blue')); self._squareCollect(self.blueSquares, self.yellowSquares, self.dataArrayBlueS, self.dataArrayYellowS); } }); }); } MySquare.prototype._squareCollect = function(sqCollBlue, sqCollYellow, dataArrayBlue, dataArrayYellow) { // collect total data if (dataArrayBlue.length) { dataArrayBlue = []; } if (dataArrayYellow.length) { dataArrayYellow = []; } sqCollBlue.forEach(function(el, index, array) { dataArrayBlue.push(parseInt(el.dataset.n)); }); sqCollYellow.forEach(function(el, index, array) { dataArrayYellow.push(parseInt(el.dataset.n)); }); this._dataCalc(dataArrayBlue, dataArrayYellow, sqCollBlue, sqCollYellow); } MySquare.prototype._dataCalc = function(dataBlue, dataYellow, sqCollBlue, sqCollYellow) { // add total data if (!dataBlue.length) { var dataResultBlue = 0; } else { var dataResultBlue = dataBlue.reduce(function(preVal, currVal, index, array) { return preVal + currVal; }); } if (!dataYellow.length) { var dataResultYellow = 0; } else { var dataResultYellow = dataYellow.reduce(function(preVal, currVal, index, array) { return preVal + currVal; }); } this._domInsert(dataResultBlue, dataResultYellow, sqCollBlue, sqCollYellow); } MySquare.prototype._domInsert = function(resultBlue, resultYellow, sqCollBlue, sqCollYellow) { var newBlueDataText = document.createTextNode(resultBlue); var newYellowDataText = document.createTextNode(resultYellow); var sqCollectedBlue = sqCollBlue[0]; var sqCollectedYellow = sqCollYellow[0]; this.dataNumBlue.textContent = newBlueDataText.textContent; this.dataNumYellow.textContent = newYellowDataText.textContent; } // add to global namespace window.MySquare = MySquare;
})(window);
(function() { new MySquare(document.getElementById('square-proj'));
})();
Map prototype - Script Codes
Map prototype - Script Codes
Home Page Home
Developer Aaron Happe
Username aaronhappe
Uploaded November 09, 2022
Rating 3
Size 3,404 Kb
Views 12,144
Do you need developer help for Map prototype?

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!

Aaron Happe (aaronhappe) Script Codes
Name
CSS animations.
A Pen by Aaron Happe
Testing Script
Shoprecord - bookmarkletCSS
Wimpiest Chat Room Ever
V3 - Seamless Slider
Prototype for BZees filters.
Tutorial
Exploring Snap SVG.
Shop Record Bookmarklet
Create amazing web content 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!