Algorithm: How to print a big shape of the letter - javascript
For example, when input is "y", it will print:
the output looks like this.
I use a front-end languages to show the example. I just generated nesting arrays as 9*9 grids to simulate the output. Then using for loop change them to HTML syntax. In this case, no matter what language I use, the key is the algorithm. I don't think my algorithm is efficient since I must generate 26 nesting arrays for 26 letters. Are there any efficient ways to solute this problem rather than create 26 nesting arrays?
$(document).ready(function(){
var letter_y=[
[0,0,0,0,0,0,0,0,0],
[0,1,0,0,0,0,0,1,0],
[0,1,0,0,0,0,0,1,0],
[0,1,0,0,0,0,0,1,0],
[0,1,1,1,1,1,1,1,0],
[0,0,0,0,1,0,0,0,0],
[0,0,0,0,1,0,0,0,0],
[0,0,0,0,1,0,0,0,0],
[0,0,0,0,1,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
]
for(var x=0;x<letter_y.length;x++){
for(var j=0;j<letter_y[x].length;j++){
if(letter_y[x][j]===0)
$('.row').append('<div class="grid"></div>');
if(letter_y[x][j]===1)
$('.row').append('<div class="grid2"></div>');
}
$('.row').append('<br>');
}
});
.grid{
background-color: black;
width: 20px;
height: 20px;
display: inline-block;
margin:0px;
}
.row{
line-height: 0px;
}
.grid2{
background-color: blue;
width: 20px;
height: 20px;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>fill_me_in</title>
<meta name="description" content="fill_me_in" >
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css " rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav id="nav_top" class="navbar navbar-inverse navbar-static-top">
<div class="container" id="main_container">
<a class="navbar-brand" href="http://api.jquery.com">Pac_man</a>
</div>
</nav>
<div class="container">
<div class="row">
</div>
</div>
<div class="own"></div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="application.js"></script>
</body>
</html>
There are two common ways to represent symbols - raster representation and vector representation. Since you already tried storing images for symbols as bit maps you can try vectors - e.g. "1" could be "line (0,0) to (0,10)".
If your main concern is size/how bitmaps look in code you can use strings ("010000010",...) or individual bits of numbers (that way 9x9 can be represented by 9 numbers).
Note: if you goal is to just render huge pixelated letters - there is likely matching font to do just that. Also you may need to figure out how to make such font available on the client.
Related
How can I generate line number from css or javascript based on height of container
I have a situation where I have to make something that looks like a code editor and to acheive this I have to use HTML, CSS and Js without any libraries. I have achieved pretty much everything except the line numbers and I am not sure how to do it. So far I have achieved this: and this is what actually is my target: supposing that I have this html structure: <html> <head> </head> <body> <div class="lines"></div> <div class="code"></div> </body> </html> how do I populate lines based on the height of content in code using CSS or JavaScript?
Here's something: (written fast, feel free to adjust CSS etc)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<style>
#code {
line-height: 15px;
}
.holder {
display: flex
}
</style>
</head>
<body>
<div class="holder">
<div>
<pre id="lines">
</pre>
</div>
<div>
<pre id="code">
.aaa {
bbb
}
.ccc {
ddd
}
</pre>
</div>
</div>
</body>
<script>
const codeHeight = document.getElementById('code').offsetHeight;
const lines = Math.ceil(codeHeight / 15);
let html = '';
for (i = 1; i < lines; i++) {
html += i + '<br>'
}
document.getElementById('lines').innerHTML = html;
</script>
</html>
Here's the JS fiddle: https://jsfiddle.net/4aowc26f/
Number 15 in calculation is due to 15px line height. Feel free to introduce variable for this one.
you should make every line as a div
<div><span>{line}</span> <span>some code</span> </div>
Typewriter effect with JavaScript
I am just new to JavaScript I do not understand how can I create such Typewriter effect, I am having problem in changing the color of some of its words. I have made something like this Sugar, Spice, everythingNice
Well mate the website you wanted to build (i guess) is made up of three.js for that rotating cube and for the typing effect you can use a simple easy and yet powerful js library - Typed.js
Include this in your html file:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></script>
<h3>Hey i am a<span class="typing"></span></h3>
Configure some basic options such as what are the different words to type,speed and the container you want to insert it onto:
var typed = new Typed(".typing",{ //specify the element
strings: ["Freelancer","Developer","Designer"], //multiple texts
typeSpeed: 100,
bacSpeed: 60,
loop: true
})
That's it! see it live below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Typed js basic usage</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></script>
<style>
*{
font-family: sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.typing{
color: red;
}
</style>
</head>
<body>
<h3>Hey i am a <span class="typing"></span></h3>
<script>
var typed = new Typed(".typing",{
strings: ["Freelancer","Developer","Designer"],
typeSpeed: 100,
bacSpeed: 60,
loop: true
})
</script>
</body>
</html>
External links(for reference)
Typed.js docs
Centering Scroll to Element to via # ? (without modifying the DOM / using refs)
I would like to scroll to a certain element via #: Element <div name="element" /> It accomplishes this quite well, but it goes to the very top of the element. However, I'd like the element scrolled to to be centered for the user. I am hesitant to use Javascript's scrollTo or other, external libraries, since I will need to use this functionality a lot (very, very much). I am using React and don't want to overuse refs and slow down my app. So I'd like to accomplish this with HTML only, preferably. JS is fine too, of course, but most solutions I came across modify the DOM and/or use refs.
There is probably a better/cleaner way to do it, but with only html/css, the only thing that I think about is to use a hidden span under your div element, like so:
html {
scroll-behavior: smooth;
}
.space {
width: 100%;
height: 400px;
background-color: blue;
}
#element {
position: relative;
top: -50vh;
visibility: hidden;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
Element
<div class="space"></div>
<p> some text </p>
<div class="space"></div>
<p> some text </p>
<div class="space"></div>
<div>
<p>
Your element
</p>
<span id="element">anchor </span>
</div>
<div class="space"></div>
</body>
</html>
AFAIK, no way to achieve your desirable effect without a bit of js. As for "centered", then some calculation is needed.
<html>
<head>
<title>Document</title>
<style>
.placeholder {
height: 1000px;
}
</style>
<script>
function scrollToDest(event) {
var id = event.target.getAttribute("href");
if (id.charAt(0) !== "#") return; // not a valid <a> element
var dest = document.getElementById(id.substr(1));
if (!dest) return; // no destination found;
event.preventDefault();
// calculate the top and bottom margin remained when dest is centered
var margin = window.innerHeight - dest.clientHeight;
// what if the dest's height is larger than viewport?
if (margin < 0) margin = 0;
window.scroll({ left: 0, top: dest.offsetTop - margin / 2, behavior: "smooth" });
}
</script>
</head>
<body>
<div class="placeholder">
Let's go!
</div>
<div id="dest">ARRIVAL</div>
<div class="placeholder"></div>
</body>
</html>
Use the tab bar html/css/js from Material Design
I'm trying to use get this tab bar from Material Components: https://material.io/develop/web/components/tabs/tab-bar/
I'm having trouble following the installation steps. This is what I have so far:
tab.html:
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="tab.css">
</head>
<body>
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content">
<button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span>
<span class="mdc-tab__text-label">Favorites</span>
<span class="mdc-tab__text-label">Favorites2</span>
<span class="mdc-tab__text-label">Favorites3</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
</body>
</html>
tab.css:
<style lang="scss">
#import "#material/tab-bar/mdc-tab-bar";
#import "#material/tab-scroller/mdc-tab-scroller";
#import "#material/tab-indicator/mdc-tab-indicator";
#import "#material/tab/mdc-tab";
body{
background-color: blue;
}
#app
{
main
{
margin-top:65px;
}
div.mdc-layout-app--main-container{ display: block !important;}
div.mdc-layout-app
{
max-width: 1000px;
background-color: white !important;
margin: 0 auto;
}
header.mdc-top-app-bar
{
max-width: 1000px;
}
}
</style>
import {MDCTabBar} from '#material/tab-bar';
const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));
I want it to look like the demo, but right now it looks like something completely different. I was wondering if someone could break down these steps more for me as I'm extremely confused. Thanks. All help is appreciated.
This is what it looks like: enter image description here
I wanted it to look like this: enter image description here
Are you trying to run SCSS in the browser? If so, this is the problem. The "CSS" portion of your code is actually SCSS, a nested syntax that needs to be compiled down to regular CSS in order for the browser to be able to read it. For example:
SCSS (Browser cannot read)
#app {
main {
margin-top: 65px;
}
}
CSS (Works fine)
#app main {
margin-top: 65px;
}
Material should provide plain CSS version for you, otherwise you will need to use a compiler.
To add on Simran his answer:
I see no <script src="app.js"></script> in your HTML.
You need to compile the code below using babel and include the output file in your HTML.
import {MDCTabBar} from '#material/tab-bar';
const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));
If it is unclear how you do this re-read the Getting started
Step 3: Webpack with ES2015 is about compiling JavaScript using Babel
Create bullet list in mindmap selection using js-mindmap
I am using the js-mindmap library for a different kind of use, I need to allow a selection to link to extrenal/internal pages on some links but need others to bubble into a bullet list (preferably withing the same css shape as the rest of the mindmap.) I was initially looking at getting the content for the alert from the title or alt tags but not sure if they will retain the ul and li needed without defaulting to the mindmap format...
I'm searching for more of a more simplistic way to accomplish this. I'm sure css is most likely the best practice and I need to pull the content from the html for ease of creating different modles.
here is JSFiddle MindMp
html:
<!DOCTYPE html>
<html>
<head>
<!-- Computer Medic 2016
NOTE: http://stackoverflow.com/questions/15352556/links-not-working-on-js-mindmap
-->
<title>ALS Mindmap</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="mindmap/js-mindmap.css" />
<link href="mindmap/style.css" type="text/css" rel="stylesheet"/>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<!-- UI, for draggable nodes -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<!-- Raphael for SVG support (won't work on android) -->
<script type="text/javascript" src="mindmap/raphael-min.js"></script>
<!-- Mindmap -->
<script type="text/javascript" src="mindmap/js-mindmap.js"></script>
<!-- Kick everything off -->
<script src="mindmap/script.js" type="text/javascript"></script>
<style>
.alert {
padding: 20px;
background-color: #f44336;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
</style>
</head>
<body>
<ul>
<li>ALS
<ul>
<li>Chest Pain</li>
<li>Shortness of Breath</li>
<li>Allergic Reaction</li>
<li>Diabetic</li>
<li>STEMI
<ul>
<li>ACS</li>
<li>STEMI
<ul>
<li>Treatment</li>
<li>Protocol</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</body>
</html>
Here you go my friend, it's a bit hacky but it works. I made several modifications to the plugin itself as well as your styles and html.
The plugin was taking your anchor tags, stripping everything and creating them anew. I had to make sure my new attribute data-content was being preserved. Now the plugin checks if a link has this attribute and if it does, it doesn't fire the click event.
Then, I assigned my own click handler to replace content of the alert div and subsequently show it:
$('a').click(function(e){
var tag = $(this).attr('data-content');
if(tag)
{
$('.alert .content').html(content[tag]).parent().show();
}
});
If you have any questions, let me know.
https://jsfiddle.net/x8826shn/7/