Softweb Tuts

Pages

Textarea Tabs Syntax Highlighting

Syntex highlighting technique is used to make code editor looks nice. We will build it today.


What's happening guys today we are going to make Textarea Tabs Syntax Highlighting. As you know the HTML markup is vital for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.



Save It As index.html :

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Textarea Tabs + Syntax Highlighting</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="editor-holder">
<ul class="toolbar">
<li><a href="#" id="indent" title="Toggle tabs or spaces"><i class="fa fa-indent"></i></a></li>
<li><a href="#" id="fullscreen" title="Toggle fullscreen mode"><i class="fa fa-expand"></i></a></li>
<select>
<option>HTML</option>
<option>CSS</option>
<option>Javascript</option>
<option>PHP</option>
</select>
</ul>
<div class="scroller">
<textarea class="editor allow-tabs">&lt;div class="Editable Textarea">
&lt;h1>This is a fully editable textarea which auto highlights syntax.&lt;/h1>
&lt;p>Type or paste any code in here...&lt;/p>
&lt;div>
&lt;?php
var simple = "coding";
?>
&lt;script>
with = "Tab or double space functionality";
&lt;/script></textarea>
<pre><code class="syntax-highight html"></code></pre>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://use.fontawesome.com/b2c0f76220.js"></script>
<script src="https://raw.githubusercontent.com/emmetio/textarea/master/emmet.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"></script>
<script
src="js/index.js"></script>
</body>
</html>



Without CSS our this script (Textarea Tabs Syntax Highlighting) will never look divine. So here we are, our HTML markup is ready now we have to customize our HTML and it can be done using CSS.



So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new folder called css and put this file to that folder.



Save It As style.css :

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  position: relative;
  background: #72c3c3;
}

.editor-holder {
  width: 800px;
  height: 500px;
  margin-top: 50px;
  border-radius: 3px;
  position: relative;
  top: 0;
  margin-left: -400px;
  left: 50%;
  background: #1f1f1f !important;
  overflow: auto;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.4);
  transition: all 0.5s ease-in-out;
}
.editor-holder.fullscreen {
  width: 100%;
  height: 100%;
  margin: 0;
  left: 0;
}
.editor-holder .toolbar {
  width: 100%;
  list-style: none;
  position: absolute;
  top: -2px;
  margin: 0;
  left: 0;
  z-index: 3;
  padding: 8px;
  background: #afafaf;
}
.editor-holder .toolbar li {
  display: inline-block;
}
.editor-holder .toolbar select{
	width:10%;
	float:right;
	margin-bottom:-6px;
	padding: 8px;
	font-size: 10px;
	color: #fff;
	background: rgba(144, 144, 144, 0.6);
	height:;
}

.editor-holder .toolbar a {
  line-height: 20px;
  background: rgba(144, 144, 144, 0.6);
  color: grey;
  box-shadow: inset -1px -1px 1px 0px rgba(0, 0, 0, 0.28);
  display: block;
  border-radius: 3px;
  cursor: pointer;
}
.editor-holder .toolbar a:hover {
  background: rgba(144, 144, 144, 0.8);
}
.editor-holder .toolbar a.active {
  background: rgba(144, 144, 144, 0.8);
  box-shadow: none;
}
.editor-holder .toolbar i {
  color: #565656;
  padding: 8px;
}
.editor-holder textarea, .editor-holder code {
  width: 100%;
  height: auto;
  min-height: 450px;
  font-size: 14px;
  border: 0;
  margin: 0;
  top: 46px;
  left: 0;
  padding: 20px !important;
  line-height: 21px;
  position: absolute;
  font-family: Consolas,Liberation Mono,Courier,monospace;
  overflow: visible;
  transition: all 0.5s ease-in-out;
}
.editor-holder textarea {
  background: transparent !important;
  z-index: 2;
  height: auto;
  resize: none;
  color: #fff;
  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
}
.editor-holder textarea::-webkit-input-placeholder {
  color: white;
}
.editor-holder textarea:focus {
  outline: 0;
  border: 0;
  box-shadow: none;
}
.editor-holder code {
  z-index: 1;
}

pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
pre code {
  background: #1f1f1f !important;
  color: #adadad;
}
pre code .hljs {
  color: #a9b7c6;
  background: #282b2e;
  display: block;
  overflow-x: auto;
  padding: 0.5em;
}
.hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    background: #272822;
    color: #ddd
}
.hljs-tag,
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-strong,
.hljs-name {
    color: #f92672
}
.hljs-code {
    color: #66d9ef
}
.hljs-class .hljs-title {
    color: white
}
.hljs-attribute,
.hljs-symbol,
.hljs-regexp,
.hljs-link {
    color: #bf79db
}
.hljs-string,
.hljs-bullet,
.hljs-subst,
.hljs-title,
.hljs-section,
.hljs-emphasis,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
    color: #a6e22e
}
.hljs-comment,
.hljs-quote,
.hljs-deletion,
.hljs-meta {
    color: #75715e
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-doctag,
.hljs-title,
.hljs-section,
.hljs-type,
.hljs-selector-id {
    font-weight: bold
}



So we have written HTML markup and customised it and now we will add some functionality in this project (Textarea Tabs Syntax Highlighting).



To make this project (Textarea Tabs Syntax Highlighting) work properly for that we will use JavaScript.



So here is a JavaScript for our project (Textarea Tabs Syntax Highlighting) and also save it with the filename as provided. Make a new folder called js and put this file to that folder

.


Save It As index.js :

var tabCharacter = "  ";
var tabOffset = 2;

$(document).on('click', '#indent', function(e){
	e.preventDefault();
	var self = $(this);
	
	self.toggleClass('active');
	
	if(self.hasClass('active'))
	{
		tabCharacter = "\t";
		tabOffset = 1;
	}
	else
	{
		tabCharacter = "  ";
		tabOffset = 2;
	}
})

$(document).on('click', '#fullscreen', function(e){
	e.preventDefault();
	var self = $(this);
	
	self.toggleClass('active');
	self.parents('.editor-holder').toggleClass('fullscreen');
});

/*------------------------------------------
	Render existing code
------------------------------------------*/
$(document).on('ready', function(){
	hightlightSyntax();
	
	emmet.require('textarea').setup({
    pretty_break: true,
    use_tab: true
	});
});




/*------------------------------------------
	Capture text updates
------------------------------------------*/
$(document).on('ready load keyup keydown change', '.editor', function(){
	correctTextareaHight(this);
	hightlightSyntax();
});


/*------------------------------------------
	Resize textarea based on content  
------------------------------------------*/
function correctTextareaHight(element)
{
  var self = $(element),
      outerHeight = self.outerHeight(),
      innerHeight = self.prop('scrollHeight'),
      borderTop = parseFloat(self.css("borderTopWidth")),
      borderBottom = parseFloat(self.css("borderBottomWidth")),
      combinedScrollHeight = innerHeight + borderTop + borderBottom;
  
  if(outerHeight < combinedScrollHeight )
  {
    self.height(combinedScrollHeight);
  }
}
// function correctTextareaHight(element){
// 	while($(element).outerHeight() < element.scrollHeight + parseFloat($(element).css("borderTopWidth")) + parseFloat($(element).css("borderBottomWidth"))) {
// 		$(element).height($(element).height()+1);
// 	};
// }


/*------------------------------------------
	Run syntax hightlighter  
------------------------------------------*/
function hightlightSyntax(){
	var me  = $('.editor');
	var content = me.val();
	var codeHolder = $('code');
	var escaped = escapeHtml(content);
	
	codeHolder.html(escaped);
	
	$('.syntax-highight').each(function(i, block) {
		hljs.highlightBlock(block);
	});
}


/*------------------------------------------
	String html characters
------------------------------------------*/
function escapeHtml(unsafe) {
	return unsafe
			 .replace(/&/g, "&")
			 .replace(//g, ">")
			 .replace(/"/g, """)
			 .replace(/'/g, "'");
}


/*------------------------------------------
	Enable tabs in textarea
------------------------------------------*/
$(document).delegate('.allow-tabs', 'keydown', function(e) {
	var keyCode = e.keyCode || e.which;

	if (keyCode == 9) {
		e.preventDefault();
		var start = $(this).get(0).selectionStart;
		var end = $(this).get(0).selectionEnd;

		// set textarea value to: text before caret + tab + text after caret
		$(this).val($(this).val().substring(0, start)
								+ tabCharacter
								+ $(this).val().substring(end));

		// put caret at right position again
		$(this).get(0).selectionStart =
		$(this).get(0).selectionEnd = start + tabOffset;
	}
});




Completion :

So here we are, We have done and our project Textarea Tabs Syntax Highlighting is ready now you can save all the files as provided.
Like CSS files in css folder and JavaScript files in a JS folder name. Below is folder tree of the files and folders of this project.



  • Textarea Tabs Syntax Highlighting
    • css
      • style.css
    • js
      • index.js
    • index.html


Download Project (Textarea Tabs Syntax Highlighting) File :

Textarea Tabs Syntax Highlighting.zip
File Size 5.63 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.


So our today's project is completed I have also provided that download files above you can download them from the above link that's free do it now and also subscribe to the newsletters and join our mailing list.



Thank you !
Textarea Tabs Syntax Highlighting
editor javascript

Textarea Tabs Syntax Highlighting

Vimeo Youtube Video With Cover Image

Make cover image for your youtube or vimeo video players.


What's happening programmers today we are going to create Vimeo Youtube Video With Cover Image. As you know the HTML markup is vital for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.



Save It As index.html :

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Vimeo/YouTube video with cover image</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<body>
<div class="section">
<div class="blur-img"></div>
<div class="blur-img-over"></div>
<div class="video-container">
<div class="wrap-rel">
<div class="container">
<div class="row justify-content-center">
<div class="col-8">
<div class="video-section">
<figure class="vimeo">
<a href="https://player.vimeo.com/video/233536312" class="">
<img src="http://www.ivang-design.com/svg-load/video.jpg" alt="image"/>
</a>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Page cursor
================================================== -->
<div class="cursor" id="cursor"></div>
<div class="cursor2" id="cursor2"></div>
<div class="cursor3" id="cursor3"></div>
<!-- Link to page
================================================== -->
<a href="https://themeforest.net/user/ig_design/portfolio"
class="link-to-portfolio hover-target" target=”_blank”
></a>
</body>
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script
src="js/index.js"></script>
</body>
</html>


Our HTML markup is done.


Without CSS our this script (Vimeo Youtube Video With Cover Image) will never look cute. So here we are, our HTML markup is ready now we have to personalize our HTML and it can be done using CSS.



So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new directory called css and put this file to that directory.



Save It As style.css :

body{
 cursor: none;
 width: 100%;
 display: block;
 overflow: hidden;
 height: 100vh;
}

/* #Cursor
================================================== */

.cursor,
.cursor2,
.cursor3{
 position: fixed;
 border-radius: 50%; 
 transform: translateX(-50%) translateY(-50%);
 pointer-events: none;
 left: -100px;
 top: 50%
}
.cursor{
 background-color: #fff;
 height: 10px;
 width: 10px;
 z-index: 99999;
 box-shadow: 0 0 22px 0 rgba(255,255,255, 0.6);
}
.cursor2,.cursor3{
 height: 36px;
 width: 36px;
 z-index:99998;
 opacity: 0;
 background: rgba(255,255,255,.03);
 -webkit-transition:all 0.3s ease-out;
 transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
 -webkit-transform:scale(2.2) translateX(-25%) translateY(-25%);
 transform:scale(2.2) translateX(-25%) translateY(-25%);
 border:none;
}
.video-cursor .cursor{
 opacity: 0;
}
.logo-cursor .cursor{
 opacity: 0;
}
.logo-cursor .cursor2,
.logo-cursor .cursor3{
 -webkit-transform:scale(2.2) translateX(-25%) translateY(-25%);
 transform:scale(2.2) translateX(-25%) translateY(-25%);
 border:none; 
 opacity: 1;
}
.section{
 position: relative;
 width: 100%;
 display: block;
 overflow: hidden;
 height: 100vh;
}
.blur-img{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 8;
 display: block;
 background-size: cover;
 background-position: center;
 background-image: url("http://www.ivang-design.com/svg-load/video.jpg");
 filter: blur(6px);
}
.blur-img-over{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
  border: 10px solid #060606;
 z-index: 9;
 display: block;
}

/* Video
================================================== */

.wrap-rel {
 position: relative;
 width: 100%;
 display: block;
}
.video-container {
 position: absolute;
 top: 50%;
 left: 0;
 width: 100%;
 z-index: 10;
 display: block;
 margin: 0;
 padding: 0;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
}

/* #Video wrapper
================================================== */

.video-section {
 position: relative;
 width:100%;
 margin:0 auto;
 border-radius: 10px;
 box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.45);
}
.video-wrapper, figure.vimeo, figure.youtube {
 margin:0;
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 0;
 height: 0;
 overflow: hidden;
 border-radius: 10px;
} 
.video-wrapper iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
} 
figure.youtube a img, figure.vimeo a img {
 position: absolute;
 top: 0;
 left: 0;
 width: auto;
 height: 100%;
 max-width:none;
} 
figure.vimeo a:after, figure.youtube a:after {
 content:"";
 width:60px;
 height:60px;
 background: #fff;
 z-index:9;
 position:absolute;
 top:50%;
 left:50%;
 margin:-30px 0 0 -30px;
 border-radius:50%;
 box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.15);
 cursor: url("http://www.ivang-design.com/svg-load/play.png") 30 30,pointer;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear; 
}
figure.vimeo:hover a:after, figure.youtube:hover a:after {
 box-shadow: 0px 0px 0px 1000px rgba(0,0,0,0.1);
}
figure.vimeo:hover a:after, figure.youtube:hover a:after{
 opacity: 0;
}
figure.vimeo a:before, figure.youtube a:before {
 border-left: 8px solid #212121;
}
figure.vimeo a:before, figure.youtube a:before {
 content:"";
 width: 0;
 height: 0;
 border-top: 6px solid transparent;
 border-bottom: 6px solid transparent;
 z-index:10;
 position:absolute;
 top:50%;
 left:50%;
 margin-left: -3px;
 margin-top: -5px;
 display:block;
 cursor: url("http://www.ivang-design.com/svg-load/play.png") 30 30,pointer;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear; 
}
figure.vimeo:hover a:before, figure.youtube:hover a:before {
 border-color: transparent;
} 
figure.vimeo a:hover img, figure.youtube a:hover img {
 -webkit-transition: all 0.4s;
 transition: all 0.4s;
} 
figure.vimeo a img, figure.youtube a img {
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear; 
 border-radius: 10px;
 cursor: url("http://www.ivang-design.com/svg-load/play.png") 30 30,pointer;
}

/* #Link to page
================================================== */

.link-to-portfolio {
   position: fixed;
    top: 30px;
    right: 30px;
    z-index: 20;
    cursor: pointer;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 3px;
    background-position: center center;
    background-size: cover;
    background-image: url("https://ivang-design.com/ig-logo.jpg");
    box-shadow: 0 0 0 2px rgba(255,255,255,.3);
    transition: opacity .2s, border-radius .2s, box-shadow .2s;
    transition-timing-function: ease-out;
}
.link-to-portfolio:hover {
    opacity: 0.8;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255,255,255,0);
}


Customizations are completed.


So we have written HTML markup and customised it and now we will add some functionality in this project (Vimeo Youtube Video With Cover Image).



To make this project (Vimeo Youtube Video With Cover Image) work properly for that we will use JavaScript.



So here is a JavaScript for our project (Vimeo Youtube Video With Cover Image) and also save it with the filename as provided. Make a new directory called js and put this file to that directory

.


Save It As index.js :

/*! FitVids */
!function(t){"use strict";t.fn.fitVids=function(e){var i={customSelector:null};if(!document.getElementById("fit-vids-style")){var r=document.createElement("div"),a=document.getElementsByTagName("base")[0]||document.getElementsByTagName("script")[0],o="­<style>.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style>";r.className="fit-vids-style",r.id="fit-vids-style",r.style.display="none",r.innerHTML=o,a.parentNode.insertBefore(r,a)}return e&&t.extend(i,e),this.each(function(){var e=["iframe[src*='player.vimeo.com']","iframe[src*='youtube.com']","iframe[src*='youtube-nocookie.com']","iframe[src*='kickstarter.com'][src*='video.html']","object","embed"];i.customSelector&&e.push(i.customSelector);var r=t(this).find(e.join(","));r=r.not("object object"),r.each(function(){var e=t(this);if(!("embed"===this.tagName.toLowerCase()&&e.parent("object").length||e.parent(".fluid-width-video-wrapper").length)){var i="object"===this.tagName.toLowerCase()||e.attr("height")&&!isNaN(parseInt(e.attr("height"),10))?parseInt(e.attr("height"),10):e.height(),r=isNaN(parseInt(e.attr("width"),10))?e.width():parseInt(e.attr("width"),10),a=i/r;if(!e.attr("id")){var o="fitvid"+Math.floor(999999*Math.random());e.attr("id",o)}e.wrap('<div class="fluid-width-video-wrapper"></div>').parent(".fluid-width-video-wrapper").css("padding-top",100*a+"%"),e.removeAttr("height").removeAttr("width")}})})}}(window.jQuery||window.Zepto);

(function($) { "use strict";

  
 //Page cursors

    document.getElementsByTagName("body")[0].addEventListener("mousemove", function(n) {
        t.style.left = n.clientX + "px", 
  t.style.top = n.clientY + "px", 
  e.style.left = n.clientX + "px", 
  e.style.top = n.clientY + "px", 
  i.style.left = n.clientX + "px", 
  i.style.top = n.clientY + "px"
    });
    var t = document.getElementById("cursor"),
        e = document.getElementById("cursor2"),
        i = document.getElementById("cursor3");
    function n(t) {
        e.classList.add("hover"), i.classList.add("hover")
    }
    function s(t) {
        e.classList.remove("hover"), i.classList.remove("hover")
    }
    s();
    for (var r = document.querySelectorAll(".hover-target"), a = r.length - 1; a >= 0; a--) {
        o(r[a])
    }
    function o(t) {
        t.addEventListener("mouseover", n), t.addEventListener("mouseout", s)
    }

 $('.video-section').on('mouseover', function(event) {    
  $('body').addClass('video-cursor');
 });    
 $('.video-section').on('mouseout', function(event) {  
  $('body').removeClass('video-cursor');
 });
 $('.link-to-portfolio').on('mouseover', function(event) {    
  $('body').addClass('logo-cursor');
 });    
 $('.link-to-portfolio').on('mouseout', function(event) {  
  $('body').removeClass('logo-cursor');
 });

 
 $(document).ready(function() {
    
  /* Video */
  
  $(".container").fitVids();
      
  $('.vimeo a,.youtube a').on('click', function (e) {
   e.preventDefault();
   var videoLink = $(this).attr('href');
   var classeV = $(this).parent();
   var PlaceV = $(this).parent();
   if ($(this).parent().hasClass('youtube')) {
    $(this).parent().wrapAll('<div class="video-wrapper">');
    $(PlaceV).html('<iframe frameborder="0" height="333" src="' + videoLink + '?autoplay=1&showinfo=0" title="YouTube video player" width="547"></iframe>');
   } else {
    $(this).parent().wrapAll('<div class="video-wrapper">');
    $(PlaceV).html('<iframe src="' + videoLink + '?title=0&byline=0&portrait=0&autoplay=1&color=8c6acc" width="500" height="281" frameborder="0"></iframe>');
   }
  }); 
     
 });
 
  })(jQuery);

Functionality added now.




Closure :

So here we are, We have done and our project Vimeo Youtube Video With Cover Image is ready now you can save all the files as provided.
Like CSS files in css directory and JavaScript files in a JS directory name. Below is directory tree of the files and folders of this project.



  • Vimeo Youtube Video With Cover Image
    • css
      • style.css
    • js
      • index.js
    • index.html


Download Project (Vimeo Youtube Video With Cover Image) File :

Vimeo Youtube Video With Cover Image.zip
File Size 4.82 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.


That's it we are done now if you want to download the project file download button is provided above you can download it from there our today's post and hair and if you want to post on this site you are welcome here you can simply write your post and wrap it in a text file and simply send that post a text file to my email ID I will review and try to publish that post on my website.



Thank you !
Vimeo Youtube Video With Cover Image
javascript

Vimeo Youtube Video With Cover Image

Pure Css 404 Error Page Design

This is pure css error page design which you can use on your website free and easily if you like this.


How are you programmers today we are going to create 404 Error Page Design Pure Css. As you know the HTML markup is mandatory for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.



Save It As index.html :

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Pure CSS 404 Error Page</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="clouds">
<div class="cloud x1"></div>
<div class="cloud x1_5"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>
<div class="c">
<div class="_404">404</div>
<hr>
<div class="_1">THE PAGE</div>
<div class="_2">WAS NOT FOUND</div>
<a class="btn" href="#">BACK TO MARS</a>
</div>
</body>
</html>


This is simple html markup.


Without CSS our this script (404 Error Page Design Pure Css) will never look statuesque. So here we are, our HTML markup is ready now we have to personalize our HTML and it can be done using CSS.



So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new folder called css and put this file to that folder.



Save It As style.css :

@import url(https://fonts.googleapis.com/css?family=opensans:500);
Body{
                background: #33cc99;
                color:#fff;
                font-family: "Open Sans", sans-serif;
                max-height:700px;
                overflow: hidden;
            }
            .c{
                text-align: center;
                display: block;
                position: relative;
                width:80%;
                margin:100px auto;
            }
            ._404{
                font-size: 220px;
                position: relative;
                display: inline-block;
                z-index: 2;
                height: 250px;
                letter-spacing: 15px;
            }
            ._1{
                text-align:center;
                display:block;
                position:relative;
                letter-spacing: 12px;
                font-size: 4em;
                line-height: 80%;
            }
            ._2{
                text-align:center;
                display:block;
                position: relative;
                font-size: 20px;
            }
            .text{
                font-size: 70px;
                text-align: center;
                position: relative;
                display: inline-block;
                margin: 19px 0px 0px 0px;
                /* top: 256.301px; */
                z-index: 3;
                width: 100%;
                line-height: 1.2em;
                display: inline-block;
            }
           

            .btn{
                background-color: rgb( 255, 255, 255 );
                position: relative;
                display: inline-block;
                width: 358px;
                padding: 5px;
                z-index: 5;
                font-size: 25px;
                margin:0 auto;
                color:#33cc99;
                text-decoration: none;
                margin-right: 10px
            }
            .right{
                float:right;
                width:60%;
            }
            
            hr{
                padding: 0;
                border: none;
                border-top: 5px solid #fff;
                color: #fff;
                text-align: center;
                margin: 0px auto;
                width: 420px;
                height:10px;
                z-index: -10;
            }
            
            hr:after {
                content: "\2022";
                display: inline-block;
                position: relative;
                top: -0.75em;
                font-size: 2em;
                padding: 0 0.2em;
                background: #33cc99;
            }
            
            .cloud {
                width: 350px; height: 120px;

                background: #FFF;
                background: linear-gradient(top, #FFF 100%);
                background: -webkit-linear-gradient(top, #FFF 100%);
                background: -moz-linear-gradient(top, #FFF 100%);
                background: -ms-linear-gradient(top, #FFF 100%);
                background: -o-linear-gradient(top, #FFF 100%);

                border-radius: 100px;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;

                position: absolute;
                margin: 120px auto 20px;
                z-index:-1;
                transition: ease 1s;
            }

            .cloud:after, .cloud:before {
                content: "";
                position: absolute;
                background: #FFF;
                z-index: -1
            }

            .cloud:after {
                width: 100px; height: 100px;
                top: -50px; left: 50px;

                border-radius: 100px;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;
            }

            .cloud:before {
                width: 180px; height: 180px;
                top: -90px; right: 50px;

                border-radius: 200px;
                -webkit-border-radius: 200px;
                -moz-border-radius: 200px;
            }
            
            .x1 {
                top:-50px;
                left:100px;
                -webkit-transform: scale(0.3);
                -moz-transform: scale(0.3);
                transform: scale(0.3);
                opacity: 0.9;
                -webkit-animation: moveclouds 15s linear infinite;
                -moz-animation: moveclouds 15s linear infinite;
                -o-animation: moveclouds 15s linear infinite;
            }
            
            .x1_5{
                top:-80px;
                left:250px;
                -webkit-transform: scale(0.3);
                -moz-transform: scale(0.3);
                transform: scale(0.3);
                -webkit-animation: moveclouds 17s linear infinite;
                -moz-animation: moveclouds 17s linear infinite;
                -o-animation: moveclouds 17s linear infinite; 
            }

            .x2 {
                left: 250px;
                top:30px;
                -webkit-transform: scale(0.6);
                -moz-transform: scale(0.6);
                transform: scale(0.6);
                opacity: 0.6; 
                -webkit-animation: moveclouds 25s linear infinite;
                -moz-animation: moveclouds 25s linear infinite;
                -o-animation: moveclouds 25s linear infinite;
            }

            .x3 {
                left: 250px; bottom: -70px;

                -webkit-transform: scale(0.6);
                -moz-transform: scale(0.6);
                transform: scale(0.6);
                opacity: 0.8; 

                -webkit-animation: moveclouds 25s linear infinite;
                -moz-animation: moveclouds 25s linear infinite;
                -o-animation: moveclouds 25s linear infinite;
            }

            .x4 {
                left: 470px; botttom: 20px;

                -webkit-transform: scale(0.75);
                -moz-transform: scale(0.75);
                transform: scale(0.75);
                opacity: 0.75;

                -webkit-animation: moveclouds 18s linear infinite;
                -moz-animation: moveclouds 18s linear infinite;
                -o-animation: moveclouds 18s linear infinite;
            }

            .x5 {
                left: 200px; top: 300px;

                -webkit-transform: scale(0.5);
                -moz-transform: scale(0.5);
                transform: scale(0.5);
                opacity: 0.8; 

                -webkit-animation: moveclouds 20s linear infinite;
                -moz-animation: moveclouds 20s linear infinite;
                -o-animation: moveclouds 20s linear infinite;
            }

            @-webkit-keyframes moveclouds {
                0% {margin-left: 1000px;}
                100% {margin-left: -1000px;}
            }
            @-moz-keyframes moveclouds {
                0% {margin-left: 1000px;}
                100% {margin-left: -1000px;}
            }
            @-o-keyframes moveclouds {
                0% {margin-left: 1000px;}
                100% {margin-left: -1000px;}
            }


You can change all the colors as you want in css code.




Denouement :

So here we are, We have done and our project 404 Error Page Design Pure Css is ready now you can save all the files as provided.
Like CSS files in css folder and JavaScript files in a JS folder name. Below is folder tree of the files and folders of this project.



  • 404 Error Page Design Pure Css
    • css
      • style.css
    • js
    • index.html


Download Project (404 Error Page Design Pure Css) File :

404 Error Page Design Pure Css.zip
File Size 2.56 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.


That\'s it guys if you face any difficulty while running this project you can simply write a comment below I will try to answer it as soon as possible and keep visiting this site for more this kind of tutorials.



Thank you !
Pure Css 404 Error Page Design
css

Pure Css 404 Error Page Design

Web Speech Recognition App Javascript

Speech recognition is the capability in latest browsers to recognize spoken text. Today we are going to build it.


How do you do designers today we are going to make Web Speech Recognition App. As you know the HTML markup is necessary for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.



Save It As index.html :

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Web Speech Recognition Demo</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 id="headline">
<a href="http://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html">
Web Speech API</a> Demo</h1>
<div id="language">
Language: <select id="select_language" onchange="updateCountry()"></select>
  
<select id="select_dialect"></select>
</div>
<div id="info">
<p id="info_start">Click on the round button and begin speaking.</p>
<p id="info_speak_now">Speak now.</p>
<p id="info_no_speech">No speech was detected. You may need to adjust your
<a href="//support.google.com/chrome/bin/answer.py?hl=en&answer=1407892">
Microphone settings</a>.</p>
<p id="info_no_microphone" style="display:none">
No microphone was found. Ensure that a microphone is installed and that
<a href="//support.google.com/chrome/bin/answer.py?hl=en&answer=1407892">
Microphone settings</a> are configured correctly.</p>
<p id="info_allow">Click the "Allow" button above to enable your microphone.</p>
<p id="info_denied">Permission to use microphone was denied.</p>
<p id="info_blocked">Permission to use microphone is blocked. To change,
Go to chrome://settings/contentExceptions#media-stream</p>
<p id="info_upgrade">Web Speech API is not supported by this browser.
Upgrade to <a href="//www.google.com/chrome">Chrome</a>
Version 25 or later.</p>
</div>
<button id="start_button" onclick="startButton(event)"></button>
<div id="results">
<span id="final_span" class="final"></span>
<span id="interim_span" class="interim"></span>
</div>
<script
Src="js/index.js"></script>
</body>
</html>


Here we have completed html code.


Without CSS our this script (Web Speech Recognition App) will never look foxy. So here we are, our HTML markup is ready now we have to customize our HTML and it can be done using CSS.



So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new directory called css and put this file to that directory.



Save It As style.css :

* {
  font-family: Verdana, Arial, sans-serif;
}
Body {
  text-align: center;
}
Body > div {
  margin: 20px;
}
A:link {
  color:#000;
  text-decoration: none;
}
A:visited {
  color:#000;
}
A:hover {
  color:#33F;
}
Select {
  font-size: 1em;
}

.final {
  color: black;
  padding-right: 3px; 
}
.interim {
  color: gray;
}
.info {
  font-size: 14px;
  color: #777;
  display: none;
}

#headline {
  font-size: 40px;
  font-weight: 300;
}
#info {
  font-size: 1.2em;
  color: #777;
  visibility: hidden;
}
#results {
  font-size: 1.5em;
  font-weight: bold;
  border: 1px solid #ddd;
  padding: 15px;
  min-height: 150px;
}
#start_button {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  cursor: pointer;
}
#start_button:focus {
  background: red;
}
#language {
  font-size: 1.2em;
}


You can make customizations to make it look more beautiful.


So we have written HTML markup and customised it and now we will add some functionality in this project (Web Speech Recognition App).



To make this project (Web Speech Recognition App) work properly for that we will use JavaScript.



So here is a JavaScript for our project (Web Speech Recognition App) and also save it with the filename as provided. Make a new directory called js and put this file to that directory

.


Save It As index.js :

var langs = [
 ['English',         ['en-AU', 'Australia'],
                     ['en-CA', 'Canada'],
                     ['en-IN', 'India'],
                     ['en-NZ', 'New Zealand'],
                     ['en-ZA', 'South Africa'],
                     ['en-GB', 'United Kingdom'],
                     ['en-US', 'United States']],
 ['Español',         ['es-AR', 'Argentina'],
                     ['es-BO', 'Bolivia'],
                     ['es-CL', 'Chile'],
                     ['es-CO', 'Colombia'],
                     ['es-CR', 'Costa Rica'],
                     ['es-EC', 'Ecuador'],
                     ['es-SV', 'El Salvador'],
                     ['es-ES', 'España'],
                     ['es-US', 'Estados Unidos'],
                     ['es-GT', 'Guatemala'],
                     ['es-HN', 'Honduras'],
                     ['es-MX', 'México'],
                     ['es-NI', 'Nicaragua'],
                     ['es-PA', 'Panamá'],
                     ['es-PY', 'Paraguay'],
                     ['es-PE', 'Perú'],
                     ['es-PR', 'Puerto Rico'],
                     ['es-DO', 'República Dominicana'],
                     ['es-UY', 'Uruguay'],
                     ['es-VE', 'Venezuela']],
 ['Français',        ['fr-FR']],
 ['Italiano',        ['it-IT', 'Italia'],
                     ['it-CH', 'Svizzera']],
 ['Português',       ['pt-BR', 'Brasil'],
                     ['pt-PT', 'Portugal']],
 ['日本語',           ['ja-JP']],
 ['Lingua latīna',   ['la']]
];

For (var i = 0; i < langs.length; i++) {
  select_language.options[i] = new Option(langs[i][0], i);
}
Select_language.selectedIndex = 6;
UpdateCountry();
Select_dialect.selectedIndex = 6;
ShowInfo('info_start');

Function updateCountry() {
  for (var i = select_dialect.options.length - 1; i >= 0; i--) {
    select_dialect.remove(i);
  }
  var list = langs[select_language.selectedIndex];
  for (var i = 1; i < list.length; i++) {
    select_dialect.options.add(new Option(list[i][1], list[i][0]));
  }
  select_dialect.style.visibility = list[1].length == 1 ? 'hidden' : 'visible';
}


Var final_transcript = '';
Var recognizing = false;
Var ignore_onend;
Var start_timestamp;
If (!('webkitSpeechRecognition' in window)) {
  upgrade();
} else {
  start_button.style.display = 'inline-block';
  var recognition = new webkitSpeechRecognition();
  recognition.continuous = true;
  recognition.interimResults = true;

  recognition.onstart = function() {
    recognizing = true;
    showInfo('info_speak_now');
    start_img.src = 'mic-animate.gif';
  };

  recognition.onerror = function(event) {
    if (event.error == 'no-speech') {
      start_img.src = 'mic.gif';
      showInfo('info_no_speech');
      ignore_onend = true;
    }
    if (event.error == 'audio-capture') {
      start_img.src = 'mic.gif';
      showInfo('info_no_microphone');
      ignore_onend = true;
    }
    if (event.error == 'not-allowed') {
      if (event.timeStamp - start_timestamp < 100) {
        showInfo('info_blocked');
      } else {
        showInfo('info_denied');
      }
      ignore_onend = true;
    }
  };

  recognition.onend = function() {
    recognizing = false;
    if (ignore_onend) {
      return;
    }
    start_img.src = 'mic.gif';
    if (!final_transcript) {
      showInfo('info_start');
      return;
    }
    showInfo('');

  };

  recognition.onresult = function(event) {
    var interim_transcript = '';
    for (var i = event.resultIndex; i < event.results.length; ++i) {
      if (event.results[i].isFinal) {
        final_transcript += event.results[i][0].transcript;
      } else {
        interim_transcript += event.results[i][0].transcript;
      }
    }
    final_transcript = capitalize(final_transcript);
    final_span.innerHTML = linebreak(final_transcript);
    interim_span.innerHTML = linebreak(interim_transcript);
    if (final_transcript || interim_transcript) {
      showButtons('inline-block');
    }
  };
}

Function upgrade() {
  start_button.style.visibility = 'hidden';
  showInfo('info_upgrade');
}

Var two_line = /\n\n/g;
Var one_line = /\n/g;
Function linebreak(s) {
  return s.replace(two_line, '

').replace(one_line, ' '); } Var first_char = /\S/; Function capitalize(s) { return s.replace(first_char, function(m) { return m.toUpperCase(); }); } Function startButton(event) { if (recognizing) { recognition.stop(); return; } final_transcript = ''; recognition.lang = select_dialect.value; recognition.start(); ignore_onend = false; final_span.innerHTML = ''; interim_span.innerHTML = ''; start_img.src = 'mic-slash.gif'; showInfo('info_allow'); showButtons('none'); start_timestamp = event.timeStamp; } Function showInfo(s) { if (s) { for (var child = info.firstChild; child; child = child.nextSibling) { if (child.style) { child.style.display = child.id == s ? 'inline' : 'none'; } } info.style.visibility = 'visible'; } else { info.style.visibility = 'hidden'; } }

We are done now.




Ending :

So here we are, We have done and our project Web Speech Recognition App is ready now you can save all the files as provided.
Like CSS files in css directory and JavaScript files in a JS directory name. Below is directory tree of the files and folders of this project.



  • Web Speech Recognition App
    • css
      • style.css
    • js
      • index.js
    • index.html


Download Project (Web Speech Recognition App) File :

Web Speech Recognition App.zip
File Size 4.33 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.


I hope that this post help you a lot and I think you will appreciate it so don't take that appreciation with you if you like my post appreciate me in the comment form below.



Thank you !
Web Speech Recognition App Javascript
javascript

Web Speech Recognition App Javascript

Upload Image From Url Using PHP

Uploading is now-a-days a kind of hobby and we also want to save our memories so today i have an image uploader for you this image uploader will upload image by url only.


Good day programmers today we are going to build Upload Image From Url Using Php. As you know the HTML markup is necessary for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.



Save It As index.html :

<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/1.0.0-beta9/shoelace.css"/>
</head>
<body>
<center>
<form method="post" style="width:60%;margin:20%;" action="php/upload.php">
<h2>Upload Image From URL Using PHP</h2><br>
<input type="text" name="img_url" placeholder="Enter Image URL"><br>
<input type="submit" class="button" name="get_image" value="Submit">
<a class="button" href="https://softwebtuts.blogspot.com">For More Tutorials Visit SoftwebTuts</a>
</form>
</center>
</body>
</html>


I cannot provide you demo because i am using blogger and blogger does not support php so you can try this code provided below on your localhost server or on your website.


Uploading is now-a-days a kind of hobby and we also want to save our memories so today i have an image uploader for you this image uploader will upload image by url only.


So here is the php functions and files that you will need for this project you can copy the code or simple download archive from the download link below which contains all the files used in this project.

<?php
if(isset($_POST['get_image']))    // Run Function When Button Is Clicked
{
 $url=$_POST['img_url'];   // Get image URL
 $data = file_get_contents($url);
 $time = date("h-i-s-a");   // Get time
 if (!file_exists('../images')) {
    mkdir('../images', 0777, true);   // function to check if directory doesn't exist create it
}
 $new = '../images/image-'.$time.'.jpg'; //  Save Image
 file_put_contents($new, $data);
 echo "<img src='".$new."'>"; //  Output Image
}
?>




Closure :

We are done and our project Upload Image From Url Using Php is ready now you can save all the files as provided.
Copy Paste and Run that's it



Download Project (Upload Image From Url Using Php) File :

Upload Image From Url Using Php.zip
File Size 1.06 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.


So guys this post is completed and if you want anything else right here you can also comment that topic I will try to make a post about it you can take a while for that.



Thank you !


Upload Image From Url Using PHP
php php code to upload image using url upload image.upload image from url using php

Upload Image From Url Using PHP

Convert Bytes Into Kb Mb Gb Using PHP

Do you want online size converter.? Here i have that size converter for you you just see it.

So this converter can convert bytes into kb, mb, gb.

You can convert bytes into kb, mb, gb. So below is the code provided you just try iy out.


So here is the php functions and files that you will need for this project you can copy the code or simple download archive from the download link below which contains all the files used in this project.

<?php
function convert($size,$unit) 
{
 if($unit == "KB")
 {
  return $fileSize = round($size / 1024,4) . 'KB'; 
 }
 if($unit == "MB")
 {
  return $fileSize = round($size / 1024 / 1024,4) . 'MB'; 
 }
 if($unit == "GB")
 {
  return $fileSize = round($size / 1024 / 1024 / 1024,4) . 'GB'; 
 }
}

if(isset($_POST['convert_size']))
{
 $size=$_POST['size'];
 $unit=$_POST['convert_unit'];
 $size=convert($size,$unit);
}
?>

<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/1.0.0-beta9/shoelace.css"/>
</head>
<body>
<center>

<div id="convert_div">
 <form method="post"action="" style="width:60%;margin-top:20%;">
 <h2>Convert Bytes Into KB, MB, GB Using PHP</h2>
  <input type="text" name="size" placeholder="Enter Bytes">
  <select name="convert_unit">
   <option>KB</option>
   <option>MB</option>
   <option>GB</option>
  </select>
  <br>
  <input type="submit" class="button" name="convert_size" value="Convert Bytes">
  <a class="button" href="https://softwebtuts.blogspot.com">For More Tutorials Visit SoftwebTuts</a>

 </form>
 <p><?php echo $size;?></p>
</div>

</center>
</body>
</html>




Completion :

So here we are, We have done and our project Convert Bytes Into Kb Mb Gb Using Php is ready now you can save all the files as provided.
And run this file in your localhost server and you are done.



Download Project (Convert Bytes Into Kb Mb Gb Using Php) File :

Convert Bytes Into Kb Mb Gb Using Php.zip
File Size 877 Bytes
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.


Our today's post ends here and I think you might like my this post and if you did make sure to subscribe to the newsletters of this website for more this kind of posts.



Thank you !


Convert Bytes Into Kb Mb Gb Using PHP
convert convert bytes php php convert size

Convert Bytes Into Kb Mb Gb Using PHP

Compress HTML Using PHP

Today i will share with you php code to compress html code.

This php code works on load as page is loaded this code runs automatically before page loading.

This code simply remove all white spaces and all blank lines and saves memory as well as compressing php code also decreases page load time.


So here is the php functions and files that you will need for this project you can copy the code or simple download archive from the download link below which contains all the files used in this project.



<?php
ob_start("compress_code");

function compress_code($code) 
{
 $search = array(
  '/>[^S ]+/s',  // remove whitespaces after tags
  '/[^S ]+</s',  // remove whitespaces before tags
  '/(\s)+/s'       // remove multiple whitespace sequences
 );

 $replace = array('>','<','\\1');
 $code = preg_replace($search, $replace, $code);
 return $code;
}
?>

<!--Below is the html code to be compressed-->
<html>
<body>
<p>Compress HTML Code Using PHP</p>
</body>
</html>

<?php
ob_end_flush();
?>




Outcome :

So here we are, We have done and our project Compress Html Code Using Php is ready now you can save all the files as provided.
And run your code on localhost server or anywhere else where php can be executed.



Download Project (Compress Html Code Using Php) File :

Compress Html Code Using Php.zip
File Size 597 Bytes
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.


That's it guys if you face any difficulty while running this project you can simply write a comment below I will try to answer it as soon as possible and keep visiting this site for more this kind of tutorials.



Thank you !


Compress HTML Using PHP
compress html compress html using php php php code to compress html

Compress HTML Using PHP

Vue + Javascript Star Rating

This is a simple star rating system made with vue.js and javascript below is the source code provided.


What's happening buddy today we are going to create Vue + Javascript Star Rating. As you know the HTML markup is necessary for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.



Save It As index.html :

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Vue.js Star Rating</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<div class="card">
<div class="card-content">
<div class="media-content">
<p class="title is-4">Star Rating</p>
<p class="subtitle is-6">A simple VueJS rating component</p>
</div>
<star-rating :max="5" :current="value"></star-rating><br>
<br>
<button class="button" @click="randomValue">Play with values ({{value}})</button>
</div>
</div>
</div>
<script type="text/x-template" id="star-rating">
<div class="star-rating">
<span v-for="n in max">☆</span>
<div class="star-rating__current" :style="{width: getRating + "%"}">
<span v-for="n in max">★</span>
</div>
</div>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script
src="js/index.js"></script>
</body>
</html>


Html markup is quite simple.


Without CSS our this script (Vue + Javascript Star Rating) will never look charming. So here we are, our HTML markup is ready now we have to personalize our HTML and it can be done using CSS.



So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new directory called css and put this file to that directory.



Save It As style.css :

#app {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.star-rating {
  color: gold;
  display: inline-block;
  font-size: 4em;
  position: relative;
  transform: translate(-6px);
}

.star-rating__max,
.star-rating__current {
  position: absolute;
  top: 0;
}

.star-rating__current {
  overflow: hidden;
  white-space: nowrap;
}


Stylesheet used is this

https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css


So we have written HTML markup and customised it and now we will add some functionality in this project (Vue + Javascript Star Rating).



To make this project (Vue + Javascript Star Rating) work properly for that we will use JavaScript.



So here is a JavaScript for our project (Vue + Javascript Star Rating) and also save it with the filename as provided. Make a new directory called js and put this file to that directory

.


Save It As index.js :

Vue.component('star-rating', {
  template: '#star-rating',
  props: ['max', 'current'],
  computed: {
    getRating: function() {
      return (this.current / this.max) * 100
    }
  }
})

new Vue({
  el: '#app',
  data: {
    value: 4
  },
  methods: {
    randomValue: function () {
      this.value = (Math.random()*4+1).toFixed(2)
    }
  }
})

That's it we will use vue.js for this project cdn link is https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js




Outcome :

So here we are, We have done and our project Vue + Javascript Star Rating is ready now you can save all the files as provided.
Like CSS files in css directory and JavaScript files in a JS directory name. Below is directory tree of the files and folders of this project.



  • Vue + Javascript Star Rating
    • css
      • style.css
    • js
      • index.js
    • index.html


Download Project (Vue + Javascript Star Rating) File :

Vue + Javascript Star Rating.zip
File Size 2.61 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.


So that's it stay updated to this blog and subscribe to the newsletters that's free do it now to get notifications of my upcoming posts.



Thank you !


Vue + Javascript Star Rating
css star rating vue vue.js

Vue + Javascript Star Rating

FAQ with Accordion Javascript

This is the FAQ with accordion you can just see a table. This FAQ accordion will allow you to add your frequently asked questions you can say FAQ in an accordion so today we will build it.


Good day guys today we are going to make FAQ With Accordion. As you know the HTML markup is essential for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.



Save It As index.html :

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>FAQ with Accordion Javascript</title>
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h2>Frequently Asked Questions</h2>
<div class="accordion">
<div class="accordion-item">
<a>Why is the moon sometimes out during the day?</a>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
</div>
</div>
<div class="accordion-item">
<a>Why is the sky blue?</a>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
</div>
</div>
<div class="accordion-item">
<a>Will we ever discover aliens?</a>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
</div>
</div>
<div class="accordion-item">
<a>How much does the Earth weigh?</a>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
</div>
</div>
<div class="accordion-item">
<a>How do airplanes stay up?</a>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script
src="js/index.js"></script>
</body>
</html>


In my case I have added 5 questions and that are randomly generated by a tool you can add your own frequently asked questions or FAQ and add answers of that questions you can add as many as you want.


Without CSS our this script (FAQ With Accordion) will never look angelic. So here we are, our HTML markup is ready now we have to personalize our HTML and it can be done using CSS.



So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new directory called css and put this file to that directory.



Save It As style.css :

@import url("https://fonts.googleapis.com/css?family=Hind:300,400");

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Hind", sans-serif;
  background: #fff;
  color: #4d5974;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh;
}

.container {
  margin: 0 auto;
  padding: 4rem;
  width: 48rem;
}

h3 {
  font-size: 1.75rem;
  color: #373d51;
  padding: 1.3rem;
  margin: 0;
}

.accordion a {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  padding: 1rem 3rem 1rem 1rem;
  color: #7288a2;
  font-size: 1.15rem;
  font-weight: 400;
  border-bottom: 1px solid #e5e5e5;
}

.accordion a:hover,
.accordion a:hover::after {
  cursor: pointer;
  color: #03b5d2;
}

.accordion a:hover::after {
  border: 1px solid #03b5d2;
}

.accordion a.active {
  color: #03b5d2;
  border-bottom: 1px solid #03b5d2;
}

.accordion a::after {
  font-family: "Ionicons";
  content: " 218";
  position: absolute;
  float: right;
  right: 1rem;
  font-size: 1rem;
  color: #7288a2;
  padding: 5px;
  width: 30px;
  height: 30px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 1px solid #7288a2;
  text-align: center;
}

.accordion a.active::after {
  font-family: "Ionicons";
  content: " 209";
  color: #03b5d2;
  border: 1px solid #03b5d2;
}

.accordion .content {
  opacity: 0;
  padding: 0 1rem;
  max-height: 0;
  border-bottom: 1px solid #e5e5e5;
  overflow: hidden;
  clear: both;
  -webkit-transition: all 0.2s ease 0.15s;
  -o-transition: all 0.2s ease 0.15s;
  transition: all 0.2s ease 0.15s;
}

.accordion .content p {
  font-size: 1rem;
  font-weight: 300;
}

.accordion .content.active {
  opacity: 1;
  padding: 1rem;
  max-height: 100%;
  -webkit-transition: all 0.35s ease 0.15s;
  -o-transition: all 0.35s ease 0.15s;
  transition: all 0.35s ease 0.15s;
}


In above CSS code I have used a color scheme of WordPress you can change that color scheme to your website color scheme now it's time for JavaScript.


So we have written HTML markup and customised it and now we will add some functionality in this project (FAQ With Accordion).



To make this project (FAQ With Accordion) work properly for that we will use JavaScript.



So here is a JavaScript for our project (FAQ With Accordion) and also save it with the filename as provided. Make a new directory called js and put this file to that directory

.


Save It As index.js :

const items = document.querySelectorAll(".accordion a");

function toggleAccordion(){
  this.classList.toggle('active');
  this.nextElementSibling.classList.toggle('active');
}

items.forEach(item => item.addEventListener('click', toggleAccordion));

Javascript code is quite simple and short but it's necessary.




At The End :

So here we are, We have done and our project FAQ With Accordion is ready now you can save all the files as provided.
Like CSS files in css directory and JavaScript files in a JS directory name. Below is directory tree of the files and folders of this project.



  • FAQ With Accordion
    • css
      • style.css
    • js
      • index.js
    • index.html


Download Project (FAQ With Accordion) File :

FAQ With Accordion.zip
File Size 2.68 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.


Our today's post ends here and I think you might like my this post and if you did make sure to subscribe to the newsletters of this website for more this kind of posts.



Thank you !


FAQ with Accordion Javascript
accordion faq javascript

FAQ with Accordion Javascript

Tooltiper - Simple Jquery Tooltip


A tooltip is a simple tip that shows up when you hover over, Mouse over or click on any element.

Here today I am having a beautiful tooltip made with CSS and jQuery you just have a look on them above.


Good day people today we are going to make Tooltiper - Simple Jquery Tooltip. As you know the HTML markup is essential for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.



Save It As index.html :

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Tooltiper - Simple Jquery Tooltip</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section align="center" class="content">
<div class="wrap"><p><span class="tooltiper" data-tooltip="Siri, Google Now, Alexa, and Slackbots">Machine learning</span> techniques have progressed to the point where a new user interface is on the cusp of mass-market adoption: computer systems that understand enough natural human language to be useful and respond accordingly.
Siri, Google Now, Alexa, and <span class="tooltiper" data-tooltip="Bla bla blabla bla bla bla">Slackbots</span> are a few high-profile examples of voice or message-driven experiences that have gained some level of real-world use. Indeed, these and other AI systems are now open enough, and of high-enough quality, <span class="tooltiper" data-tooltip="Siri, Google Now, Alexa, and Slackbots">to</span> allow brands to begin interacting with customers and prospects through natural language. The result is the beginning of a new era in customer relationships that promises to be every bit transformative as social media and mobile devices were in the last decade.
</p></div>
</section>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script
src="js/index.js"></script>
</body>
</html>


Above is the example code but for you if you want to add that tooltip to your text you can use that code which is provided below

<span class="tooltiper" data-tooltip="Text inside tooltip">Text That Shows Tooltip</span>

You can make tooltip from any element for that you have to give that element a class name tooltiper and add attribute named as data-tooltip and give that attribute the value of that text which you want to show as a tooltip.


Without CSS our this script (Tooltiper - Simple Jquery Tooltip) will never look fascinating. So here we are, our HTML markup is ready now we have to personalize our HTML and it can be done using CSS.



So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new directory called css and put this file to that directory.



Save It As style.css :

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");

* {
  margin:0;
  padding:0;
  outline:none;
  list-style:none;
  text-decoration:none;
  box-sizing:border-box;
  color:#111;
  background: transparent;
  border:none;
}

body {
  background: #f3f3f3;
  font-family: "Montserrat", sans-serif;
}

h1, h2, h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}

.wrap {
  width: 90%;
  max-width: 1024px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

header {
  height: 450px;
  background: #fff;
  text-align: center;
}

header h1 {
  font-size: 72px;
}

.content .wrap {
  top: 100px;
  transform: none;
  -moz-transform: none;
  -webkit-transform: none;
}

.content .wrap p {
  margin-bottom: 30px;
  line-height: 1.8em;
}

.tooltiper {
  position: relative;
  display: inline-block;
  color: tomato;
  perspective:600px;
  transform-style: preserve-3d;
}

.tooltiper .tooltip {
  min-width: 100px;
  max-width:350px;
  position: absolute;
  font-size: 0.7rem;
  text-align: left;
  background: tomato;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  display: block;
  top: 0;left: 0;
  line-height: 1.4em;
  transform: rotateX(90deg) translateZ(0px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.64, 0.57, 0.67, 1.53), opacity 0.1s ease-out 0.1s;
}
.tooltiper:hover .tooltip {
  transform: rotateX(0) translateZ(20px);
  opacity: 1;
  transition: transform 0.4s cubic-bezier(0.64, 0.57, 0.67, 1.53), opacity 0.1s ease-out;
}
.tooltiper .tooltip:after {
  content:"";
  position: absolute;
  left: 20px;
  bottom: -7px;
  height: 0;
  border-style: solid;
  border-width: 7px 7px 0 7px;
  border-color: tomato transparent transparent transparent;
}


In my case I have set the default color tomato you can change it whatever you want.


So we have written HTML markup and customised it and now we will add some functionality in this project (Tooltiper - Simple Jquery Tooltip).



To make this project (Tooltiper - Simple Jquery Tooltip) work properly for that we will use JavaScript.



So here is a JavaScript for our project (Tooltiper - Simple Jquery Tooltip) and also save it with the filename as provided. Make a new directory called js and put this file to that directory

.


Save It As index.js :

$(document).ready(function(){
  toolTiper();
});

function toolTiper(effect) {
  $('.tooltiper').each(function(){
    var eLcontent = $(this).attr('data-tooltip'),
        eLtop = $(this).position().top,
        eLleft = $(this).position().left;
    $(this).append(''+eLcontent+'');
    var eLtw = $(this).find('.tooltip').width(),
        eLth = $(this).find('.tooltip').height();
    $(this).find('.tooltip').css({
      "top": (0 - eLth - 20)+'px',
      "left":'-20px'
    });
  });
}

Above is a simple jQuery function that allows you to make tooltip work properly. That's it you can try it on your own, make customizations as you want.


I used to get tooltip value from an attribute called data-tooltip you can change the attribute but for that you have to change it on two places one in the above JavaScript code and second in that HTML tag your element where you want to make tooltip.




Result :

So here we are, We have done and our project Tooltiper Simple Jquery Tooltip is ready now you can save all the files as provided.
Like CSS files in css directory and JavaScript files in a JS directory name. Below is directory tree of the files and folders of this project.



  • Tooltiper - Simple Jquery Tooltip
    • css
      • style.css
    • js
      • index.js
    • index.html


Download Project (Tooltiper - Simple Jquery Tooltip) File :

Tooltiper - Simple Jquery Tooltip.zip
File Size 3.28 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.


I hope that you will like my this post and if you do then please share it with your friends and keep visiting this site for more this kind of projects and tutorials.



Thank you !


Tooltiper - Simple Jquery Tooltip
jquery simple tooltip tooltiper

Tooltiper - Simple Jquery Tooltip

Subscribe Our Newsletter